UI 设计：有哪些理性( 一)

UI 设计：有哪些理性

UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。

四类理性有一个共同核心：活学活用。

1. 基本原则

共有四个基本原则：对齐，对比，亲密，重复。

先说对齐，秩序产生美。

对齐作为一种基本秩序，主要事关整齐美观和阅读体验。对齐一般分左对齐、右对齐和居中对齐。

从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。

从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。

从空间利用率角度来讲，右对齐往往是左对齐的一种补充。

比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。

UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。

整体而言，是以左对齐为主，居中对齐和右对齐为辅。再说对比。嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。

好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。

一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。

一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。

第三说亲密。设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。

性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。

最后说下重复。设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。

2. 基础知识

基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。

UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。

作为造型基本功，需要掌握一定手绘技能。颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。

配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。

另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。

版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。

“活学活用”环节，会结合例子分享版式设计。字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。

3. 风格设定

风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。

好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。

风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。

风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。

在“精准”和“周密”上同时做到优良，风格设定才能做到优良。

既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。

4. 风格把控

风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。

只要严格在“圆圈”里发挥，实现当初设定的风格并不难。

那做到统一和规范难吗？

往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。

往简单了说就是大量复用已有的设计样式。风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。

5. 活学活用

活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。活学活用有两个要点：正反结合，风格第一。

所谓正反结合，是指设计知识既能正着用，也能反着用。

最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。

除了对齐原则，其它设计知识，比如重复原则，也可以反着用。

本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。

我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。

之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。

所谓风格第一，是指设计风格永远第一，设计知识永远第二。

知识服务风格，切不可重知识轻风格。

《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。对比原则也有反着用的时候。

有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。

设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。

当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误。

设计师往往很难意识到这一点，因为技法高超风格不足虽然很难打动普通用户，但却能打动很多设计师。最终的结果就是，这些作品在设计社区依然人气高涨。