快速提升 UI 设计效果的9 个小技巧 (UI 设计集

编者按：在进行 UI 设计的快速时候 ，很多小技巧能够恰到好处地提升界面的提升设计视觉效果、用户体验。设计I设这篇来自Mark Andrew 的效果小技文章梳理了 9 个实用性很强的 UI 效果提升小技巧  ，这篇文章最早发布于 marcandrew.me
，计集快来看看吧。快速

在创建漂亮而高效的提升 UI 的时候 ，你需要花费不少的设计I设时间来打磨细节，并且在此过程中进行不断的效果小技调整，让你的计集客户、用户以及你自己感到满足 。快速如果你是提升设计师 ，你会很明白这种感受。设计I设

我在做设计的效果小技过程中，发掘了不少实用的计集、有效的细节调整的技巧，可以快速地将整个设计稿的视觉效果提升一个档次 。

在这篇文章当中， 我将这些技巧梳理了出来 ，希望能够给你一些帮助 。

1、让元素看起来更清晰的技巧

其实并不复杂，就是在通常不会用阴影的元素边缘增加「多个投影」或者使用非常微妙的边框（比阴影要稍微暗一点），可以让这个元素看起来更加清晰
，并且避免了弥散投影带来的那种拖泥带水的感觉。

2、只使用一个字体族做设计

虽然使用字体组合可以创造视觉风格和样式上的对比，但是实际上仅用一个字体族所制作的效果是完全没问题的
。

请忽略「至少使用2种不同字体」这种设计规则，通过调整字重、尺寸 、配色，你同样可以达到相当优秀的效果 。

3
、长篇幅文本最好在 20pt 浮动

对于长篇幅的文本内容
，比如博客文章，项目说明以及需要用户阅读一段时间的内容，最好在正文当中 ，采用 20 pt 的文本参数。

当然 ，考虑到使用场景、字体本身的样式差异，20pt 这一参数并非是定死的
，而是可以根据实际效果进行灵活调整 。在过去的 10 年间 ，依然有很多网站遵循传统采用 18pt 的字号
，阅读体验相当糟糕。

4、提供可选的新用户引导流程

在用户首次安装 APP 或进入网站的时候，通常是会提供给用户以一个新用户教程以引导用户熟悉产品和交互
。

但是！并不是每个用户都有看完教程的必要，在界面中提供「跳过」选项 ，让用户拥有选择的权利
，同时，这个「跳过」按钮尽量在界面的底部  ，毕竟在这个大屏当道的时代，手指最便捷的交互区域主要集中在屏幕底部。

5、为阴影统一光源

这可以算是一个统一体验的进阶技巧了，当 UI 界面元素的光源不统一的时候，可能会有一部分用户能够感知到并觉得奇怪。但是如果光源统一
，能够给 APP 的体验带来强烈的一致感 。

6、用微妙的叠加图层来改善对比度

文本和背景之间的对比度并不一定理想，这个时候你可以额外增加一个色彩叠加层，不过这个叠加图层尽量不要使用纯色 ，而是要用一定的渐变（从下往上或者从上往下）来变化 
，一方面优化了元素之间的对比度 ，还能确保自然舒适 。

7
、克制地使用居中对齐的文本

居中对齐式的文本排版并非不能用，而是要克制地使用。尽量只在标题和少量的小块文本当中使用居中的文本排版
，对于其他的内容 ，请还是遵循普世的左对齐排版 。

8、请大胆使用留白

留白是排版设计的时候 ，最重要的元素。请不要吝啬 ，不要过度追求信息的饱和度，尽量让界面有呼吸感，在这个信息过载的时代 ，尽量给用户以舒适通透的体验 。让行高至少为文本高度的 1.5倍，基于亲近原则，合理地将元素分组的前提之下，让元素与元素
、组与组之间，不要过于密集。

这是提升设计感最快的方法之一。

9
 、加深浅色背景上的文本

现在的设计师同学应该很清楚不要在浅色和白色背景上使用纯黑的文本了 ，大家通常会使用灰色或者使用使用透明度来控制文本的深浅，不过很多时候为了展示需要，很多同学用的灰色文本，可读性并不强
。

为了改善实际的体验和效果，保证文本内容的可访问性 ，适当加深文本的灰色，在保证色彩对比度以及和其他文本的层次感的前提下，达到优秀的视觉体验。

结语

想要让 UI 界面的体验更加优秀，其实在很多时候都需要在细节上打磨即可。类似这样的小技巧有很多，后面我还会继续补充。