技巧提高——设计出美感的几个方法

设计的美感不是个人想象出来的，也不是个人喜好，有一定的规范和要求，但也有规则可循。介绍几个可以提高设计美感的基础规则。

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

文本样式设计最常犯的错误是依赖字体大小控制层次结构。

例如：文字比较重要，加大字体。

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

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

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

同样，两种 font weights 适用于大部分 UI 设计。

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

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

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

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

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

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

两种方式

• 降低白色文字的不透明度。

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

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

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

3、 正确使用阴影

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

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

需要进行分割操作时，尝试使用留白来创造边界感。边框是区分两个页面元素的好方法，但不是唯一的方法，频繁使用边框会让页面显得很复杂凌乱。

可以试试下面的方法

• 使用框型阴影

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

• 使用两种不同的背景颜色

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

• 添加更大的间距

5、不要使用过大的图标

虽然矢量图像放大尺寸时并不会降低图像质量，但是放大尺寸后缺乏细节会显得很不专业。

如果只有小图标，尝试将其放在另一个包含背景颜色的形状中，会更合适。这不仅能保持原有图标处于最合适的尺寸，也能适配更大的页面。

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

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

如警告消息：

如导航栏标签：

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

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

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

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

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

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

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

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

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

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

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

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

更多历史链接-阅读公众号菜单-《历史发布》

近十天历史发布链接

1. LOGO的标准画法

2. Ai鼠绘猫和老鼠角色

3. Ai扁平化城市夜景灯光

4. Ai设计稿——红色梦幻背景图

5. Ai手绘鸡肉卷画法

6. 先付定金再开工，谢绝免费设计

7. 平面设计师需要懂的纸张知识

8. 10个免费在线图片设计工具

9. Photoshop模特-PS换衣服教程

10. pop设计及用途

    提示：公众号菜单“历史发布”，可浏览全部历史发布。