关于 UI 设计需要注意哪些细节的讨论，我们不一次把所有列举出来，而是先围绕一件事展开，那就是——“对比”。

---

抛开产品和交互上的问题，能让我们觉得精致好看的界面，都离不开 “对比” 的应用，这也是整个产品设计中最重要的视觉问题。而缺乏对比的设计，看起就会来乏善可陈，毫无吸引力，比如下图的案例：

没有吸引力的设计

想要做好界面中的对比，可以从下面几个方面入手：

    - 形式

    - 色彩

    - 文字

    - 层级

下面，我用一份课程中学生的作业作为讲解对象，来详细地阐述如何通过对比的方式来提升设计质感。

学员案例

01.形式对比

什么是形式呢，就是组件在相同的功能和元素下，排版、视觉的呈现方式。形式的对比，就是在一个页面中，不同组件的呈现方式上是否能形成差异化，让页面看起来更丰富多元。

分析上方的案例，组件之间并没有拉开差异性，尤其在详情页中，剧情简介和观众影评，影人和剧照，设计形式接近一致，这就是一个不好的开端。

再看看一些拥有相同问题的设计案例：

仔细点观察就会发现，作为飞机稿，不是图片、颜色用得花哨就够了的，组件缺少差异性，设计感就完全无法体现。如果还没法理解，就再看看下面几个案例，是不是就没有形式强行重复的尴尬，表现得更合理：

所以针对作业中的问题，我们在这个基础上进行完善，第一步要做的就是在形式上做出区分。所以我们可以通过以下几个思路来调整第一页：

    - 头部分页器和下方的上映/即将上映过于近似，控件形式上需要作出区分

    - 图片太多，模块左右边缘都是图片，导致看上去呆板，要减少图片出现的面积

    - 底部新闻部分不能继续使用大图模式要作出调整

第二页的调整上，主要在下半部分：

    - 演员和剧照应该有更加明显的差异

    - 评论和上方的简介这两个不同的组件，形式上却看起来完全一致

通过原型上的调整，就可以得到一个初步改版的样式，各个组件之间保证足够的差异化和识别性，可以观察看看是不是比原来的页面更合理了。

02.色彩对比

色彩对比是很关键的对比，色彩决定作品给人的第一印象。那么如何为色彩做出对比呢？无非就是鲜艳对比浅色、暗色对比亮色、暖色对比冷色，不用特意套用配色的理论，用比较直观的感受判断就可以。

开始配色的过程中，我们首先需要确定主色和背景色，原图中的主色棕色和背景色白色，搭配起来的效果给我们的感受并不强烈，所以我对原色的棕色做一定范围的调整。

然后把主色添加到原型中，并为相关的一些元素添加合适的辅助色。先看第一页添加后的效果。

然后我们再为原型增加配图，这里要重点关注，以 “作品” 角度切入的话，配图也是整个界面元素的一部分，包括它使用的色彩。如果一个界面中出现了多处需要应用配图的地方的话，那么不同的模块所使用配图的风格和色彩，也应该有一定的对比，而不是一种风格撸到底的。比如还是之前的这个错误的案例：

所以根据这个原则，我们加入配图后再看看效果：

如果头部我们用了色彩主体比较强烈的配图，那么在下方就应该用比较平淡简约的，做出明确的对比。

    - 在第二页中也应用一样的方法，那么思路如下：

    - 头部作为权重最高的组件颜色要更突出

    - 头部背景和封面的颜色应该具有更大的对比，并能让文字更容易识别

    - 头部、剧照图片较丰富，所以在影人和用户头像中应该使用更简单的配图

整体增加配图后的效果：

到这里已经有了大致的设计效果，已经可以明显感觉到比之前的设计有更好的提升，但是，对比不是到这里就结束了，我们接着往下做。

03.文字对比

文字对比是最容易被忽视的细节，很多设计师都认为文字只要看得清就行，样式变化越少越好，这是非常错误的思路。

文字样式的多少主要取决于文字段的类型和需要重点体现的内容数量，而不是没有理由的精简到最少。例如看一篇排版成熟的期刊或是论文，其中标题、副标题、正文、引用、标注等作用不同的文字段，都会有不同的样式来帮助我们去区分，如果从头到尾出现的所有文字都应用一样的格式，那么就毫无可读性。

文字的对比，主要通过以下几个属性表现：

    - 字号

    - 字重

    - 色彩

即：越重要的文字字号越大、字重越高、色彩越深，权重越低的则反之。

回到我们的案例，在原型阶段，其实我已经对文字做出了简单的对比处理，下面我们要进一步细化这个步骤。

修改的分析大致如下：

    - 将分页器作为权重最高的文字段，所以模块标题不应该比它更显眼

    - 多段文本比标题类文字权重低一级，可以统一它们的样式并比标题稍弱

    - 注释类文字比多段文本再弱一级，用较低的灰度

    - 为评分、点赞数、展开等有“特殊性质”的文本增加色相

然后我们可以看看下面修改前后的对比：

通过正确细化文字的对比以后，就能真正让页面精致起来，具备丰富的细节。当然，对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果，但绝对不能忽略这个过程。

04.层级对比

最后一个，就是层级的对比。这么命名实际上比较拗口，它就是元素在 Z 轴上的高度，即元素的投影应用，比如谷歌官方的解释。

投影的使用既是视觉样式，也是一个用来制造景深的技巧。只要在一个扁平的界面中，为任何一个元素添加了投影，那么这个界面就存在了上下的空间关系，处于上方的元素就会得到凸显，例如苹果官方应用中的案例：

既然是空间关系，就要有前后的落差对比，我们要为最重要的元素增加投影，而不是把它当成设计风格进行统一的添加。所有元素都带上了投影，就没有了对比，可看性也会大打折扣。

所以，在这些页面中，需要突出的元素分析如下：

    - 首页头部广告图层级要高于下方其它元素，作为优先级最高吸引用户的入口

    - 详情页头部的电影海报要进行凸显，和背景拉开层次

    - 详情页底部评论对影片重要性较高，为社区原创内容，也需要突出

最后，我们就可以得到下方最终的效果：

关于投影的设置，可以参考我之前写的另一篇文章：

https://zhuanlan.zhihu.com/p/40293659

最后，我们再对比一遍修改以后的案例和之前的案例，看看更细致的增加了对比以后，有哪些提升：

诚然，这次的修改主要只针对在原作框架上的小范围调整，没有完全翻新，会受到很大的局限，但也足以让我们的设计变得更精致和具备可看性！

多做总结并进行对比的训练，就可以很快的帮助大家掌握上面所讲的几个知识点。本次讨论的内容就到这里，后面还会增加其它分析，谢谢观看。

---