7个提升UI设计质感的小技巧

今天的文章，总结了7个能提升页面高级感的设计小技巧。学会了就能立刻上手，一起来看看吧。

1、使用色彩和字重来创造层次结构，而不是单纯的大小对比

主要内容采用深色（诸如标题，但是不要用纯黑）

次要内容采用灰色（比如文章发表日期）

辅助性内容采用浅灰色（比如页脚中的版权声明）

2、不要再有色背景上使用灰色的文本

1）降低白色文本的不透明度

2）基于背景色手工挑选文本的颜色

3、阴影设计

相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。

Material Design Guideline 非常清晰地讲明白了这样的阴影的制作细节。

4、尽量少使用 Borders

虽然 Border 是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，甚至会造成混乱。

所以你可以尝试下面的办法来规避：

1、使用 box shadow

box shadow 同样可以营造出边界感，而且更加微妙，并不会显得突兀，不会分散用户的注意力。

2、使用不同的背景色来区分

在不同的区块采用不同的背景色，并且尝试删除边框。

3、增加额外的留白

创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

5、不要随意放大小图标

创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

将它置于另外一个带有颜色的图形当中，会显得精致。

6、增加带有颜色的单边边框提升个性

比如在警告弹出框的侧面：

或者在导航栏的底部，以示触发：

或者在整个页面的顶部。这并不需要什么平面设计的经验，但是会明显强化设计感。

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

这是一个积极的操作？让这个按钮是绿色的吧。

这是否是要删除数据？那么将按钮设置为红色吧。

的确，语义和按钮本身的设计息息相关，但是还有更重要的维度被忽略了，那就是层次结构。

页面上每个操作其实都位于整个交互金字塔中的某个位置。绝大多数的页面其实只有一个主要操作，搭配一些不太重要的次要操作，以及为数不多的几个三级操作。

在设计交互的时候，通过层级结构来呈现这些交互的重要性是很重要的设计环节。

主要操作：很明显。采用实色、高对比度的按钮很有必要。

次要操作：明显，但是不突出。采用幽灵按钮或者和背景对比度较低的色彩是比较合理的。

三级操作：可被发现，但是不明显的。

“破坏性的交互所涉及的按钮难道不应该是红色的么？”

没必要！如果破坏性的交互所涉及到的按钮不是主要操作的话，让它按照次要操作甚至三级操作的按钮来设计就好了。

如果这样的操作是主要操作的话，可以让它是大号的、红色的带有加粗文本的按钮：

这7个设计技巧可以直接拿来用，也可以对照看看自己原来的设计有没有可以改进的地方。大家有什么好的想法也可以留言互动！