原作者：Adam Wathan & Steve Schoger 

译：贺红阳

用设计战术代替天赋，提高我们的设计能力。

在我们设计开发过程中都不可避免的遇到需要做出视觉决策的情况，除了

专业资深高级设计师外，其他非专业设计师外不管喜欢与否，又或者我们的

公司没有全职设计师，需要我们自己为新的产品实现UI。

有时候我们正在攻克一个新项目，并希望它看上去比之前的另一个网站更好。对于我们（技术人员或者非专业设计师来说）难为的说“我永远也无法让这幅画好看，因为我不是艺术家。”但事实证明，有很多技巧可以提高我们的工作水平，而不需要有平面设计背景。

这里有7个简单的方法，大家可以使用来改进我们的设计工作。

1使用字体颜色（color）和字体重量（weight）来代替字体大小（size）创建视觉结构层次

当我们设计UI，样式文本化的时候，常见的错误是过于以来字体的大小，也就是字体的字号来控制层次结构。

“这文字重要吗？那我们就让它大点儿。”

“这是次层级文字吗？那我们就让它小点儿。”

不要把所有的重担都放在字体的大小上，试着使用字体颜色和重量来完成同样的工作要求。

“这文字重要吗？那就选用一个字重大些的字体，让它变得粗些。”

“这是次层级文字吗？那我们就用一个明度高些的字体颜色。”

试着并坚持使用2-3种颜色：

用深色而不是黑做主要内容，就像一篇文章的标题。

灰色用做次层级文字内容，像一篇文章的出版日期信息。

更浅的灰用作辅助次次要内容，也许是页脚的版权声明信息。

同样的道理，对于UI工作来说两种字重通常就足够了：

就英文字体来说，对于大部分的文本，普通字重（400—500），如果想要强调的文本可以是（600—700）；就中文来讲，主要内容字体一般在常规30-34，标题和想要强调的文本中黑36-42

在ui工作中，英文字体远离字重在400以下的字体，中文字体远离16像素以下的字体。如果你考虑使用更轻的字体重量来淡化一些文字，那就使用一个更浅的颜色或者更小的字体大小代替。

关于字体重量（font weight）字体粗细的值：

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

font-weight的属性值有3种指定方法：第1种是关键字法，关键字包括“normal”和“bold”两个；也是我们常见的；第2种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；第3种为数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

字体的粗和细这种描述方法本身就是一种相对描述，所谓粗和细也必须要有一个参照体。例如，在上面介绍的3类属性值之间需要有一个相互对照匹配的过程，这是一个很难界定的过程。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。

另外，有的字体看上去比较粗，但是它们的字体描述却是“Regular、Roman、Book（常规）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑体）”等字样，这主要取决于该字体本身“normal”表示的粗细程度。

2不要在彩色背景板上使用灰色文字

在白色背景下将文本设置成浅灰色是淡化内容重要性的一个好方法。但是在彩色背景此效果就不那么好了。这是因为我们在白色上看灰色是弱化了对比关系。让文本颜色更接近背景颜色，实际上创建了信息层次结构，而不是使用更亮的灰。

在彩色背景下有两种方法降低对比度：

1减少白色文本的透明度

使用白色白色文本，降低不透明度。让背景颜色稍微渗透些，以与背景不冲突的方式淡化文本

2.基于背景，选一个颜色

当你的背景是图片或是图案；或者当降低文字的透明度太枯燥或是文字降低透明度被冲淡时，这种方法都优于降低透明度的方法。

选择一个和背景相似的颜色，调整它的饱和度和亮度直到你觉得合适为止。

3.偏移卡片的投影

不要使用大的模糊和扩展值，这样会使得卡片的阴影更明显，所以添加一个垂直偏移量。它会看上去更自然，因为它模拟了一个从上往下发光的光源，就像我们真实世界中经常看到的那样。

这种内嵌式阴影可以很好的用在输入表单上

如果你有兴趣学习更多关于阴影设计的知识， Material Design是很好的设计指南（https://material.io/design/environment/elevation.html）

4尽可能少使用分割线和描边

当你需要在两个元素之间创建分割时，试着不使用分割线。

虽然分割线是区分两个元素的好方法，但它并不是唯一的方法，使用太多分割线会让你的设计感觉很杂乱。

下次当你发现自己想要使用分割线的时候，试试下面的方法：

1使用卡片投影

卡片投影是一个非常好的区分元素的轮廓方式，就像边框分割线一样，完成同样的目标但它更巧妙而不分散注意力

2使用两种不同背景颜色

为相邻的元素添加稍微不同的背景颜色通常是在他们之间创建区别的好方法。如果你已经使用了不同的背景颜色，又使用了边框，那请试着把边框删掉，你可能不需要它。

3添加额外的空间，也就是留白。

除了简单地增加距离之外，还有什么更好的方法在元素之间创建分离呢?在空间上加大更多的距离（更多的留白）是一种好的方法，在不引入任何新的UI组件元素时来区分元素

5.不要放大本来应该很小的图标

如果你正在设计一个可以使用一些大图标的页面，像一些登录页面的“特色”部分，你可能本能的使用免费图标库里的图标，然后放大它们的尺寸直到符合你的需要。

两个超棒的免费图标库分享给大家：

1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

2 Zondicons(http://www.zondicons.com/)

“它们毕竟是矢量图，所以如果你放大尺寸质量是不会受到影响的对吧？”

虽然我们增大矢量图片的尺寸它们的质量是不会下降的，但是当我们把它们放大到3倍或者4倍的时候，那些原来用16-24px绘制的图标永远不会看起来非常的专业。因为它们缺少细节，并且总是感觉不成比例的矮胖矮胖的。

如果你只有小图标，试着把它放在另一个图形里，并且给这个图形一个背景色：

这可以让你的图标尺寸更接近原始图标尺寸，同时仍就充满大的空间。如果你有足够的预算，你也可以使用高级优质图标集做设计，在大的尺寸上使用大的图标，付费图标库如Heroicons和Iconic。

1  Heroicons  （http://www.heroicons.com/）

2   Iconic（https://useiconic.com/）

6.在平淡的设计中使用超重的彩色的边框

如果你不是一名平面设计师，相比其他作品里的漂亮摄影照片或者颜色丰富的插图作品，你如何在你的uI设计中添加少许的视觉天赋。

有一个简单的技巧可以让你的界面有一点不同，那就是添加超重的彩色边框在你的部分界面里，它会使得你的界面不同于其他平淡的设计。

例如，沿着警告信息的侧边加一个超重的彩色边框：

又或者是高亮显示激活的导航栏项目

甚至是在横穿整个布局的顶部：

它不需要任何的设计天赋增加一个彩色的矩形在你的UI作品里，并且它可以让你的网站像你期望的那样更具设计感。

选颜色很困难？试着从有限的颜色板中选取颜色，例如dribbble的颜色搜索，以避免被传统颜色选择器带来的无尽的可能性。

7不是每一个button按钮都需要一个背景颜色

当用户在一个页面上有多个可操作路径时，很容易陷入基于纯语义设计行为陷阱。

如Bootstrap这样的框架式网站鼓励你这样做，当你添加一个新按钮时，它会给你一个语义样式菜单供你选择。

“这是一个正面的行为吗？是，那就使用绿色。”

“这是删除数据的操作吗？如果是，那就使用红色按钮。”

语义是按钮设计的重要部分，但还有一个常常被忘记的重要的维度，那就是等级／层次结构（hierarchy）

页面上的每个按钮放在哪都基于重要性金字塔的某个位置。大部分页面仅有一个主操作按钮（primary action），几个不重要的次级操作（secondary actions），和几个很少使用的三级操作（tertiary actions）

当设计这些操作按钮时，最重要的是考虑它们在层次结构中的位置。

主要操作按钮应该是显而易见的，实心纯色的，与背景颜色是高亮度对比。

次要操作按钮应该是明确清晰但不突出。轮廓风格或者是与背景颜色低对比是很好的选择。

三级操作路径应该是可发现但不显眼。将这些操作路径设置成链接样式通常是最好的方法。

“那破坏性的行为呢，难道不应该是红色的吗？”

不一定！如果破坏性操作不是页面上的主要操作路径，那么最好对其样式按照二级或者三级按钮的形式处理。

保存大的，红色的并且加粗的设计样式，以便于当界面的主要操作路径是负面的操作路径时使用，比如在确认的对话框中：