每个设计师都不可避免地会遇到这样的情况，我们需要做出可视化的设计决策，阐述每一个UI元素的存在意义，我们通过一些设计手段使我们的设计更具有说服。

本文通过7个实用案例，提升我们的设计细节和可行性。

阅读本文大概需要10-12分钟。

每个设计师都不可避免地会遇到这样的情况，我们需要做出可视化的设计决策，阐述每一个UI元素的存在意义，我们通过一些设计手段使我们的设计更具有说服。

这里有7个实用的案例，是我们工作过程中经常遇到的，希望能够帮助大家。

1、文字使用颜色和权重来区分层次结构，而不是大小

对于UI工作，同一个板块两个字体权重(字号)基本就够用了。

文字层级主次不要单纯的只改变字号大小，尝试使用颜色或者字体大小和粗细变化来完成相同的设计目的，会让你的设计更加有层次感，拉大这种关系对比同时可以降低用户提取信息的成本。

移动端字体规范参考

2、不要在彩色背景上使用灰色文本

采用灰色文本是在白色背景上弱化效果的好方法，但是在彩色背景上效果就没有那么好了。

我们不考虑色相的话上看到的灰对白的效果是其实是降低了，加上色相则会显得很脏。

背景色实际上是帮助我们创建视觉层次的，而不是让他变成浅灰色。

在处理彩色背景时，有两种方法展示视觉层级

A1、减少白色文字的不透明度，让背景颜色变淡一些，淡化与背景与背景不冲突的文本

A2、选择与背景色调相同的颜色，调整饱和度和亮度，直到您觉得合适为止。这样你的背景是带纹理或动态的时候能够更好的展示，也可以避免在减少不透明度的时候让文本感觉太单调或看不清了。

3、卡片阴影的应用

增加shadomsY轴阴影偏移量，而不是以中心为基点的阴影扩张，这样会使阴影框更明显，我们要做的不是突出卡片，而是突出内容本身，卡片只是一种设计手段服务于内容的信息层级划分，要记住内容永远是优先于UI样式的。

我们可以让阴影看起来更自然，模拟一个光源从上面照下来，就像我们在现实世界中看到的那样。

这同样适用于嵌入阴影，就像你可能会使用在表单输入中，当然也可以不添加阴影。

4、留白分割，尽量避免使用线框分割

当你需要在两个元素之间创建分割时，请尽量避免使用边框或分割线进行设计，区分元素线不是唯一的方法，使用太多的线会让你的页面感觉忙碌和杂乱。

想一想我们这样设计的目标是什么，其实是信息层级的区分，更便于用户筛选和作出决定，但线的划分是把它归整成一个列表，我们知道列表是很不容易筛选的一个东西。所以当你在面临这样的选择时不妨试试下面的方法。

a、使用卡片阴影

卡片阴影可以很好的勾勒出一个元素的轮廓，就像边框一样，但不比边框那样死板，严肃，投影的效果更加微妙，轻量。在不分散注意力的情况下可以完成相同的设计目标。

b、使用浅灰色块区分

卡片上使用两种不同的背景颜色，给相邻的元素稍微不同的背景色，通常可以更有效的划分他们的关系。如果你使用了边框来设计，尝试换成背景色填充区分信息层级，可能会有更好的效果。

并且这种形式加强了板块内部元素的划分，相当于隐喻的在引导用户如何操作，对于新用户可以很有好的降低学习成本。

c、通过留白区分功能结构

我认为最简约高效的方法是增加元素之间的间距来创建结构上的区分。

5、小图标处理方式

如果你设计的界面会用到一些图标列表，你可能会通过Iiconfont抓取一个免费的图标集，然后调整到合适的大小，直到适合你的需要。

当你修改矢量图像的尺寸时，它们的质量不会降低。但是当你放大或缩小到原来的3倍或4倍是，再以同样的方式去展示其实是很不专业的，它们缺乏细节，并不是你真正想要的效果

当然如果你有时间最好可以整理新的思路重新创意。

如果你需要一组小图标，尝试把它们放另一个形状里，然后给这个形状一个背景色，这样会使你的icon更统一更接近你的设计预期。

同时赋予icon形状外观会让他们看起来更容易点击，让用户更容易触及想要看到的内容。

6、使用强调线条为界面提高设计感

在保证设计目标不偏离的前提下，在界面中添加一些颜色会有更好呈现的视觉效果，不然界面会感觉平淡无奇，比如添加带颜色的线条。颜色可以是品牌颜色，根据页面反馈也可以是红色(错误/失败)，绿色(通过/正确)，橙色(经过）的反馈色，可用于tab、提示框、进度条等。

7、不是每个按钮都需要填充

当用户可以执行多个操作时，很容易陷入纯粹基于语义设计的这些操作的陷阱。

Bootstrap之类的前端控件给这些按钮新的语义样式，你可以有很多选择，那按钮样式如何能更好的呈现呢，主要基于用户处于什么样的场景，什么用的按钮更容易达到用户目标。

下面三个按钮层级样式可以用于参考

1级、填充色，高对比度的背景颜色的按钮，应用在合适位置可以帮我提高主要的业务目标，提高用户转化。

2级、边框按钮或饱和度较低的背景色，形状明确的矩形按钮，而不突出，能够帮助用户在相对专注的页面迅速的完成操作的目的，同时不影响其他元素的呈现，不干扰用户。

3级、文字颜色，不引人注目，这种蓝色字体的链接，@ID是很好的展示方式。

本文结合自己经验总结Medium@Adam Wathan & Steve Schoger

Thanks