UI 设计：如何做到理性（二）

二、UI 设计：如何做到理性

可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。

1. 规划

用“红绿灯”法设定风格设定风格，用到的方法姑且称之为“红绿灯”法。

“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。

先说关键词定位，共有两步。第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。

如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。

这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。

可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。

2. 归类

就是把第一步产生的所有关键词归成“红黄绿”三类。

如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。

需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。

这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。回到第一步的关键词上来。

设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。

（微信 Redesign 之按“红绿灯”法归类后的设计关键词）关键词定位已就绪，再来找参考图片。

可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。

做 UI 设计，参考什么样的图片？

个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。

但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。

参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。

微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。

这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？

这时就要求助关键词定位。

除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。

最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。

2. 成形

按照规划，实现风格红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。

我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。

先说版式风格。用的主要绿色关键词是“更流行”和“更年轻”。

• “更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。
• “更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。

再说元素风格之图标风格。图标主要参考爱奇艺 App：

• 底部导航和发现页的图标都是深浅双色加较粗的描边；
• 除了更圆润以外，部分图标还变 Q 了。最后说元素大小。以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。

通常情况，元素越小，给人感觉越精致、越高端。可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。

元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。最后，出来的效果如下图所示。

3. 细化

UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。

关于设计风格，传统规划方法一般只有三四个“绿色”关键词。

“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。

“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。

在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。

“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。

需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。