用战术来改进你的设计

1. 利用颜色和粗体来创建层次结构，而非使用字体大小

对于文本样式的设计，最常犯的一个错误就是依赖字体大小来控制层次结构。

我们很常听到这样的要求：

「这段文字比较重要，加大字体！」

记住，不要过于依赖字体大小，而是尝试使用颜色和字体粗细来完成相同的工作。

尝试使用三种以下的颜色进行设计：

主要内容用黑色（如文章的标题）
次要内容用灰色（如文章发表日期）
辅助内容用浅灰色（如页脚中的版权声明）

同样，两种 font weights 足以适用于大部分 UI 设计了：

大部分文本的正常粗细值（400 或 500，取决于字体）
更粗号的字体（600 或 700）用于您要强调的文字

用于网页展示的一般不小于 400，他们更适合大标题，较小尺寸下阅读会很不舒服。

当然，对于那些不重要的文本（比如电影海报下的出品公司等），可以改用较淡的颜色或者较小的字体。

2. 不要在彩色背景上使用灰色字体

白色背景上使用浅灰字体是个淡化文本的好方法，那是因为降低了字体与背景的对比度。 但灰色字体并不适用于彩色背景。

正确的方式应该是找寻接近背景色的文本颜色，这样才有助于创建层次结构。

两种方式：

降低白色文字的不透明度

这样可以让背景颜色「渗透」进字体，同时又不会和背景有颜色冲突

挑选与背景颜色相近的字体颜色

选择与背景色调相近的颜色，并调整饱和度和亮度使其与背景更融洽。当文本背景包含图像或者其他非颜色元素时，这种方法更好。

3. 正确使用阴影

阴影效果并不是采用一大块模糊效果去仿制，而是正确地模拟现实世界中光源照射的情况。

阴影效果的设计推荐阅读『Material Design Guidelines』

4. 不要频繁使用边框（border）

当你需要进行分割操作时，尝试使用留白来创造边界感。

边框当然是区分两个页面元素的好方法，但它并不是唯一的方法，而且频繁使用边框会让页面显得很复杂凌乱。

下次可以试试这样：

使用框型阴影

同样能达成效果的操作，却不容易分散用户的注意力

使用两种不同的背景颜色

通常相邻元素的背景颜色略有不同就有明显的区分效果了

添加更大的间距

5. 不要使用过大的图标

如果你正在使用像 Font Awesome 或者 Zondicons 这样的免费图标集，而且你设计的东西需要使用大图标，比如 landing page 的功能部分，那就需要注意了。

虽然矢量图像在放大尺寸时并不会降低图像质量，但是放大尺寸后的缺乏细节却无可辩驳，这会显得你很不专业。

如果你只有小图标，尝试将其放在另一个包含背景颜色的形状中，会更合适。

这不仅能保持原有图标处于最合适的尺寸，也能适配更大的页面。

当然，最好的方法是使用大尺寸高级图标集，如 Heroicons 或 Iconic。

6. 使用颜色边框丰富设计

提升设计美感的很讨巧的一个办法就是，给页面添加色彩鲜明的边框。

比如警告消息：

比如导航栏标签：

再比如整个页面的顶部也是可以的：

7. 并非每个按钮都需要背景颜色

其实当页面有多个可执行操作时，要注意语义设计动作带来的心理暗示。

像 Boostrap 这样的框架就会提供语义样式的菜单按钮：

比如积极语义可能就会用绿颜色按钮，而删除数据一般采用红色按钮。

语义是按钮设计的重要组成部分，但是层次结构依然是一个重要的维度。

类比金字塔结构，大多数页面通常只有一个主要操作，一些不太重要的次级操作，以及其他很少使用的三级操作。

设计这些动作时，在层次结构中传达他们的位置很重要。

主要动作应该最明显。可以使用实心，高对比度的背景色。
次级动作应该明确但不突出。轮廓样式或低对比的背景色是很好的选择。
三级动作应该是可以被发现但不显眼的。设计为链接样式就足够了。

对于破坏性动作，是否应该都用红色呢？

这得分情况了。

如果这个动作不是页面上的主要行为，那么采用二级或三级的设计模式可能更恰当：

当这个动作是主要行为时（比如在确认对话框中），那么就应当着重强调：

希望以上几点能帮助到你！

Wish you good light : )

原文链接：7 Practical Tips for Cheating at Design

我的知乎：@Aceyclee | 我的微博：@Aceyclee