如果你去寻找

“UI设计界面如何更加精致？”

那你得到的最多回答一定是：

“对比”

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

如果你接着询问“如何利用对比？”

那么你的得到的答案一定是：

形式、色彩、文字、层级

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

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

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

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

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

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

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

• 字号
• 字重
• 色彩

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

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

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

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

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

当然了！

按照格妹儿的性格，是不可能介绍到这里就结束了！

接下来格妹儿要说的是大家经常忽略但是极其重要的

设计细节

（以下内容称之为正文）

做好设计不能全靠数学的精准实施，很多时候还是要相信自己的眼睛，以心理感知作为判断标准来辅助优化设计，最后的结果对用户来说或许才是最优的。

Anton Lovchikov在《Optical adjustments in components》为我们做出了这样的分析：

我为你展示的两张图，上图是没有做调整的，下图是做了七处调整的。试着去比较调整前后的视觉感觉。如果直接对比比较难看出的话，没关系，这里有 GIF 帮助大家进行对比。

一、调整重心

现实世界中的任何物体都会受到重力的影响。意思是，一旦没有支撑就会掉下来。我们的大脑将现实世界的期望自动应用到界面的元素上，并假设屏幕上的任何物体都在「尝试」掉下来。即使当物体完全静止时，我们的大脑仍然认为它会向下移动（物体上方的空间会增加，下面的空间会减少）并对其进行视觉调整。一个完美垂直居中的对象，在实际中看到的时候会偏低。为了使物体在视觉上保持一致，我们必须反补偿重力的「预期」，把物体略微上移。如下图：

物体越大，它就越「重」，从而「下降」得更快。所以我们需要为更大的物体补偿更多，而更小的物体补偿更少。 粉色显示容纳「更小」按钮的容器：

二、调整圆角按钮的边距

将圆形按钮稍稍移动到对其之外也是一个不错的主意。

否则，按钮会被认为略微不对齐，视觉上「向内凹进去了」。同时，如果按钮圆角比较小，则在边缘看起来还是一条直线，这时候就不需要进行视觉补偿了。

三、调整标题边距

同样的原则也适用于标题，特别是较大的标题。 随着字体大小的增大，每个字母的周围空白都变得更加大，并打破了左边界的视觉感知。 为了改变这一点，我做了一个小的负左边距：

当然，将它应用于设计中的每一个标题是很费精力的一件事，因为这需要一个手动调整过程，但是对于更突出的标题（例如，在一个登录页面上）是值得的。

四、调整文本块的右边框

使用左对齐文本时，文本块的右边缘变得「不整齐」，并且文本内容看起来会偏移。 类似于圆形按钮的情况，我将把整个文本块稍微往右边移动，使其视觉居中：

这样，右边缘就更靠近右边隐含的垂直对齐规则。如果我们不这么调整，则会有明显的感知差异：

五、调整颜色

根据填充区域的不同，颜色的感知是不同的。 应用于白色背景上的文本颜色，将比放在同样大块的相同颜色上的文字显得更加亮一些。 相反，如果我们在深色背景上放置彩色文本，颜色看起来会变得更暗。 背景会「吸收」文字颜色，总是让视觉上转向背景颜色。 为了适应这一事实，当我在浅色背景上使用文字时，我把颜色适当调暗一点，而在深色的背景上把颜色适当调亮。

字体尺寸和重量越小，就越需要补偿：

六、调整灰度

这是颜色调整的一个特例。我尝试选用100％黑色并修改其不透明度来建立灰色文字，而不是直接设置颜色值：

这样，当你变暗背景时，你的灰色不会被「看不清」：

半透明黑色有助于实现可读的结果，而无需创建许多不同的样式。 对于较深的背景，半透明白色也是一种选择：

七、调整投影浓度

我使用不同的阴影浓度取决于产生阴影物体的颜色。对于较暗的物体，应使阴影更强烈，而对于较亮的物体，应使阴影更轻薄：

如果没有这个技巧，假设两个阴影都具有相同的不透明度，那么较亮物体的阴影会在较暗物体的阴影旁边看起来更暗：

并非每个项目都需要花费额外的视觉调整时间，但如果您正在开发的界面需要特别重视并且需要脱颖而出，使用上述所有技巧将会带来更加和谐的结果。

图文参考：

《Optical adjustments in components》 Anton Lovchikov

网络（侵删）

好啦今天的分享就到这里啦~

如果你还有什么设计类相关问题或者推荐内容，都可以留言给我吼~