界面设计技巧：如何让界面更有层次感

现在是靠「样」食饭的年代，你看看各大媒体每年如何吐槽参加南宁小姐的「靓」女就知道啦!同样，网页设计不够「靓仔」都会失去用户对网站的期待，甚至产生厌恶感。所以，要想抓住用户的心，你就要好好掌握一些界面设计的技巧!

技巧一：区分层次结构靠字体颜色，不靠大小

界面设计中，很多设计师都会过分依赖字体大小来控制层次结构。不要一味想着改变字号的大小来区分层次结构，其实通过改变字体颜色或字体粗细会令画面变得更加有质感，更生动。

如何通过字体颜色区分层次结构?

例如：

● 主要内容用深色，如文章标题等，但不要全黑色;

● 次要内容，如文章发表日期等，使用较深的灰色;

● 辅助性内容则可以采用浅灰色，如：页脚中的版权声明等。

说了字体颜色，我们有来看看字体粗细如何区分层次结构?

例如：

◆ 大多数文本的正常字重为400~500，具体取决於字体;

◆ 较粗字体即600或700，主要用於需要强调的问题。

注意：在UI设计上，字重不超过400的字体仅适合大标题，因为不利於在较小字号阅读。另外，如果你考虑使用较轻重量淡化某些文字，请选用较浅的颜色或较小的字体。

技巧二：不要在彩色背景使用灰色文字

想淡化浅灰色文本，这好似在彩色背景中并不是效果很明显。因为白色搭配灰色的对比度会降低，使文本更接近背景色，而且还有助於创建层次结构，而不是仅仅作为浅灰色出现。

在彩色背景中，如何增加内容层次结构?

1)减少白色文字的不透明度

降低白色文字的不透明度，可以让背景颜色慢慢渗透，且不会与背景冲突而减弱文字。

2)基於背景色的颜色

当页面背景是图像或图案时，或者减少不透明度却使文字变得过於枯燥或不适应时，选择与背景色调相同的颜色，调整饱和度和亮度，效果会更加合适。

技巧三：偏移阴影

不要使用较大的模糊和扩散值增加边框阴影，添加垂直偏移，会使边框看起来更自然，就像在现实世界中看到的从上方照射下来的光源。

技巧四：少使用边框

虽然使用边框能区分两个元素，但这并不是唯一的方法，使用太多的边框会让你的界面设计变得非常混乱，因此你可以大胆尝试一下：

① 使用盒子阴影

利用盒子阴影来区分两个元素的效果，并不会逊色於边框，而且不会像边框那样让人分心。

② 利用不同色背景颜色

稍微修改相邻元素的背景颜色，就可以对它们进行区分，但记住使用这种方法时，请尝试删除边框，因为你并不需要它。

③ 添加额外的间距

为两个元素添加一定的间距，是一种不引入任何新UI的情况下，区分元素组间的好方法。

技巧五：不要过度放大图标

虽然矢量图像在增加尺寸时不会降低图片质量，但如果将它们过分放大，就会显得非常不专业，总觉得这是一个不成比例的「肥仔」。

尝试将小图标放在另一个形状中，并为该形状提供背景颜色，这样既可以保持实际图标接近预期尺寸，同时还能填充更大的空间。当然如果你有多余的预算，还可以使用专门用於较大尺寸的高级图标集。

技巧六：强调边框

在界面的某些部分添加色彩鲜明的边框，可以使网站更具有设计感。如果你对色彩搭配的灵敏度不是很好，可以尝试从Dribbble的颜色搜索等受限调色板中进行选择，避免被传统颜色选择器的无穷可能性所淹没。

技巧七：并非所有按钮都要添加背景颜色

语义是按钮设计中重要的组成部分，但有一个更重要的维度是经常被设计师们忽略的，那就是层次结构。

在界面设计中，层次结构的传达是非常重要的：

1. 主要行动应该很明显，可使用实心和高对比度颜色的按钮;

2. 次要行动应该明确但不突出，使用轮廓样式或较低对比度背景色的按钮最为恰当;

3. 三级行动应该是可以发现但不明显，将这些行为直接设计为链接是最好的方法。

4. 至於消极行为按钮，如果不是页面上的主要行为，给它二级或三级按钮处理更更好。

如果你没有太多的界面设计经验，但依然想让自己的设计有足够的吸引力，最简单的方法就尝试以上的界面设计技巧。但如果你尝试了很多方法都无法解决界面设计问题，你就需要找专业的网页制作公司Inspirr Creation帮你手。