一、使用颜色和粗细来创建层次结构而不是大小

1.png

上图中UI文本的一个常见错误是过分依赖字体大小来控制层次结构。

“这个文字很重要吗？让它变得更大。“
“这个文字是次要的吗？让它变小。“
不要单独将所有繁重的工作留在字体大小上，而是尝试使用颜色或字体粗细来完成相同的工作。
“这个文字很重要吗？让我们来将其加粗。“
“这个文字是次要的吗？让我们用浅色。“

尝试并坚持两种或三种颜色：
主要内容的深色（但不是黑色）（如文章标题）
二级内容的灰色（如文章发布日期）
辅助内容的浅灰色（可能是页脚中的版权声明）

2.png

同样，两种字体权重通常足以用于UI工作：

大多数文本的正常字体粗细（400或500，具体取决于字体）
要强调的文本较重的字体粗细（600或700）

3.png

用户界面工作远离400以下的字体权重;它们可以用于大标题，但是在较小的尺寸下难以阅读。如果您正在考虑使用较轻的重量来减弱某些文本，请使用较浅的颜色或较小的字体大小。

二、 不要在彩色背景上使用灰色文字

4.png

使文本变为浅灰色是在白色背景上去强调它的好方法，但它在彩色背景上看起来并不那么好。

那是因为我们实际上在白色上看到灰色的效果是对比度降低。

使文本更接近背景颜色实际上有助于创建层次结构，而不是使其变为浅灰色。

使用彩色背景时，有两种方法来减少对比度：

1. 降低白色文本的不透明度
   使用白色文本并降低不透明度。这样可以使背景颜色稍微渗透，以不与背景冲突的方式去强调文本。

   
   
   7.png

2.手工挑选基于背景颜色的颜色
当背景是图像或图案时，或者当降低不透明度使文本感觉太钝或褪色时，这比减少不透明度更好。

8.png

选择与背景色调相同的颜色，调整饱和度和亮度，直到它看起来舒适

三、 抵消阴影

9.png

不使用较大的模糊和展开值来使框阴影更加明显，而是添加垂直偏移。

它看起来更自然，因为它模拟了从上面照射下来的光源，就像我们以前在现实世界中看到的一样。

这适用于您可能在井或表格输入上使用的插入阴影：

10.png

如果您有兴趣了解有关阴影设计的更多信息，那么[ Material Design Guidelines]是一本非常棒的入门读物

四、 使用较少的边框

11.png

当你需要在两个元素之间创建分离时，尝试不要使用边框设计，

虽然边框是区分两个元素的好方法，但它们并不是唯一的方法，使用太多边框可能会让您的设计感到忙碌和混乱。

下次当你发现自己正在寻找边界时，请尝试其中一个想法：
1.使用框阴影
箱形阴影可以很好地勾勒出像边框一样的元素，且可以更精细并实现相同的目标而不会分散注意力

12.png

2.使用两个不同的背景颜色
想要区分相邻元素我们只提供稍微不同的背景颜色。如果您已经使用了除边框之外的其他背景颜色，请尝试删除边框，你可能不需要它。

13.png

3.增加额外的间距
有什么更好的方法来创建元素之间的分割感而不是简单地增加分割线？在不引入任何新UI的情况下创建元素组之间分割感的最好方法方法就是调整元素之间的距离。

14.png

五、 不要忽略那些意味着小的图标

15.png

如果你正在设计一些可以使用一些大图标的东西（比如登陆页面的“功能”部分），你可能会本能地抓住像Font Awesome或Zondicons这样的免费图标集，然后提升尺寸直到满足你的需求。
毕竟它们是矢量图像，所以如果增加尺寸，质量不会受到影响吗？
虽然矢量图像在增加尺寸时不会降低质量，但是当你将它们吹到预期尺寸的3倍或4倍时，以16-24px绘制的图标看起来永远不会非常专业。他们缺乏细节，总觉得不成比例地“矮胖”。

16.png

如果您已经获得了小图标，请尝试将它们包含在另一个形状中并为该形状提供背景颜色：

17.png

这使您可以使实际图标更接近其预期大小，同时仍然填充更大的空间。

六、使用重音边框为平淡的设计添加色彩

18.png

如果你不是一名平面设计师，你如何在你的用户界面中添加那些其他设计从美丽的摄影或彩色插图中获得的视觉效果？

一个可以产生重大影响的简单技巧是在界面的某些部分添加色彩鲜艳的边框，否则会感觉有点乏味。

例如，提醒信息的设计：

19.png

...或突出显示活动导航项：

20.png

......甚至在整个布局的顶部：

21.png

这样可以让您的网站更有设计感。

七、并不是每一个按钮都需要有背景色填充

22.png

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

像Bootstrap这样的框架通过为您提供一个语义样式菜单来鼓励这一点，无论何时添加新按钮，都可以选择：

23.png

“这是一个积极的行动吗？将按钮设为绿色。“

“这会删除数据吗？将按钮设为红色。“

语义是按钮设计的一个重要部分，但是有一个更常见的重要维度：层次结构。

页面上的每个操作都位于重要金字塔的某个位置。大多数页面只有一个真正的主要动作，一些不太重要的次要动作，以及一些很少使用的三级动作。

在设计这些操作时，通过层次结构来传达它们的位置非常重要。

.主要操作应该是明显的。坚固，高对比度的背景色在这里工作得很好。
.次要操作应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。
.三级行动应该是可发现的，但不引人注目。像链接一样设置这些操作通常是最好的方法。

24.png

“破坏性的行动怎么样，他们不应该总是变红吗？”

不必要！如果破坏性操作不是页面上的主要操作，则最好为其提供二级或三级按钮处理。

25.png

当负面操作是界面上的主要操作时，使用大、红色和粗体样式，就像在确认对话框中一样：

26.png

文章翻译自：7 Practical Tips for Cheating at Design