[译] 迅速提升设计美感的 7 个小技巧

用战术来改进你的设计

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