不翻船的设计和前端

作为一名前端的开发者，最亲密的搭档莫过于UI和后端，为了让友谊的小船，不是说翻就翻，我总结了一下几套方案。
作为一个前端开发，开发的目的便是让产品可用、易用、友好、视觉体验爆表。要把设计的精髓，更快的领悟消化，快速开发、达成一致。但通常怎么搞呢？这便是知其然不知其所以然。

1、基本的设计规范

对比这两张图片你能发现几处图2比图1好的地方吗？
首先给大家普及一下设计师遵循的4大基本原则

• 对比（Contrast）

• 重复（Repetition）

• 对齐（Alignment）

• 亲密性（Proximity）

怎么理解呢？给大家普及4张图

'对比能增强视觉效果、避免颜色相近的比较，避免2中以上字体比较

重复增强视觉效果、避免太多的重复一个元素

对齐增强视觉效果、避免太多的重复一个元素

亲密性实现组织性、避免多个孤立元素

2、常用的设计规范

• 字体：

1、字体大小一般为10px、12px、14px、16px、18px…..等偶数值。标题一般中文14px，英文12。
2、字体font-family中文一般采用‘’微软雅黑‘’，和‘’华文细黑‘’，英文一般采用‘’Tahoma‘’、‘’ Arial‘’
例如小米：   "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYiMicro Hei",sans-serif;
淘宝：  tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;

• 行高：

  字体大小（ PX ）* 0.2 +字体大小（PX）= 适当的行间距（ PX ）
  

• 配色

1、配色要求：主色调+强调色+辅助色
2、统一色调：安全色用黄色，高科技用蓝色，环保用绿色。
3、配色有对比：浅色背景使用深色文字、深色背景使用浅色文字。
4、统一页面，不易使用3中以上颜色
5、交互按钮，使用三种状态的

• 图片命名

1、第一部分是图片的逻辑归属分类
2、第二部分是图片的表现内容
3、第三部分是图片的内容的类型（有些图片还会有第四部分，表示图片表现的状态。）
4、tabbar_home_icon, [e-mail]，tabbar_categories_icon

3、提升用户体验

• 合理的使用动画

1、添加加载(loading)、可以让用户不那么无聊。
2、使用过渡效果，可以明了的知道用户开始和结束之间发生了什么。
3、动画可以增强直接操控感
4、利用动画来反馈来突显出了错
参考https://segmentfault.com/a/11...

知道这些法则，便能更快的知道设计师想表达的意思，同时希望对大家有所帮助，遵循这些法则，友谊的小船必然乘风破浪，直济沧海。

github账号欢迎一起交流