UI设计发展到今天已经比较成熟，各种公司企业这个岗位也普遍被大家认可，可是这不代表

现在的UI设计就是将来的UI设计。上次讲到了UI设计师怎样T型发展的前半部分，这次我们

重点来讲讲视觉这块。

直接进入正题

小编来讲一些视觉方面的经验及看法：

颜色：

为了保持产品的整体品牌调性，我们将会使用一种主色调，两种或三种辅色，但一般选择两

种辅色，选择同一色系或者邻近的色系，比如主色是蓝色，那么我们可以选择临近色系的浅

蓝和深蓝做为辅色。再加上1-2种点睛色，用来高亮显示，提醒用户的作用，比如红色，橙

色，黄色等对比色。

字体：

经过研究及多方证实，最利于阅读的字号以及大部分人所觉得最舒适的字号大小是16px。

那么，在同一个产品里，我们将用到除了顶部导航以外的3种字体大小，分别为正文16px，

次要性文字14px，提示文字12px。对于10px文字小编建议尽量少的使用。字体的颜色也通

常使用3个颜色便足以用于这个产品，深色，深灰色，以及浅色字体。

线条：

线条所起的作用一个是分割内容，第二个是流引导，同样的内容，用横向线条或者竖向线

条，用户的浏览路径将会发生变化，所以分割线在整个app里的所用也是不言而喻的，那

么我们将分割线也可以定义1-2个层级的颜色，在移动端肉眼能识别即可，但注意不能太

深，也不能太浅。

图标：

图标能使整个app更生动，但是图标有时候单独存在又是个硬伤，对于一些抽象画的字段

图标没办法更好的绘制出来的时候我们就需要进行图文结合来描述。图标使用的位置不同，

大小也会不同，甚至风格也会迥异。比如：微信底部标签栏的图标，和顶部导航栏的图标

粗细不同，风格也不同。但是不是一个app里就有很多风格的图标，只要形成统一就行。

一般图标能分为线性和色块两种，线性图标更轻盈，缺点是放大之后线条会变粗，且线性

图标没有色块图标来的表意明确。色块图标更直观，且放大缩小不影响，可以用到iconfont

里，图标将成为一种字体，比较大程度优化app的内存，缺点是信息较多时比较冗杂。

排版：

排版对于一个页面来说是最最重要不过了，在交互稿上，交互已经大致区分出了信息的布

局，这个时候我们视觉需要去进行“具像化”（或许前期交互就是你自己做的）。我们先

将信息关联度大的内容整合在一起，再根据内容的重要程度，以用户的视觉流进行排布，

当然这个只是正常的设计流程，凡事无绝对，要懂得变通。再说一个小窍门，就是尽量保

证信息元素之间的距离相等，除非为了区分两个信息，间距一致会使整个页面更美观，当

然我们考虑做页面的时候不是能展示所有信息就是好设计，我们强调的是用户体验，那么

用户不希望一眼看去都是信息，这个时候我们需要做一些留白的设计或者信息的层级显示。

做项目碰到的问题：

1.目前采用的标注方式使用sketch的插件marketch一键导出标注，虽然不是很精确，但已

经大大提高了工作效率。问题来了，开发到底看不看标注？很有意思的问题，其实只要项

目紧他们一般不会看标注，等到逻辑写完了，再来改UI的问题。那么为了避免在页面写完

后不做大的布局调整，做为视觉设计，应该在开发前期就和前端定义好布局的框架，交互，

用自定义还是系统控件，否则等开发写完你和开发说我要的效果不是这样，但是开发说已

经改不了了，再改就要很大的精力去重写（当然也可能是开发想偷懒），这里必须说一下，

其实为了你我他，UI设计必须要学前端代码，否则开发随便忽悠下你你就放弃了自己的立

场，这完全是对自己，对产品不负责。

2.尽可能将页面的状态补全，因为可能没有交互，也可能交互的文档原型没有那么细致。

比如你做完一个页面发现所有字段都填满了，整个页面挺饱满，这个时候测试的同学说了，

这个字段后台可能不返回，是空，那里也是空，这样的页面东边少一块，西边少一块还

好看吗？

3.适配的问题。运营要做活动图片，通过后台返回获取到不是由前段添加，这时候我们需

要定义一个比例，不同机型等比例缩放即可。

4.同时接到3个以上的需求怎么办，拍优先级？怎么排？

把内容少的，重要的部分先做，再做内容多的，重要的。最重要的还是老板重视的，必

须先做！

5.能这个版本迭代掉的内容千万不要放倒下一个版本，放着放着就没了。

6.sketch的插件craft＋dropbox的新组合用来制作app kit，能拖拽直接使用和编辑

最后讲一句话：请基于场景设计！