基于视觉感受的UI设计笔记

---

一、层次

1.机制

人类的大脑更喜欢三维的感受，讨厌单调的二维平面。

双眼捕捉到的视觉在经过合成后就成了三维的感受，因此久而久之，我们更容易接受三维的感受。

比如：我们就觉得五官立体的长相更好看，3D游戏电影更热卖。

三维比二维更ok，有层次的二维比没有层次的二维更ok。

同样是二维图片，左边的比右边的更ok，因为它能给我们一种三维的感觉。

2.层次数量的控制

层次太少就单调，但层次过多就很混乱 。就像房间，什么家具都没有的房间和东西摆的太满的房间都不是很好。

3.使用颜色对比

背景的颜色保持一致，让控件和背景形成对比色突出层次感

要清晰的层次：控件是控件，背景是背景，不要让控件和背景混淆在一起

（1）例1：登陆界面

前着控件和背景的视觉层次很好，后者就是混淆在一起。

（2）例2：数据界面

分析中间的控件：

• 控件的背景是上部分的绿色背景，下部分的黑色背景，这样颜色对比，让你觉得控件悬浮在底层背景之上。
• 那个棕色的图标，这个图标如果在布局里面的效果也不错，颜色的对比像是堆积木一样的效果，它这样偏移出布局更有层次感。

二、主题

1.颜色

就像穿衣服一样，如果不会穿得花里胡哨还好看，那就穿得简单。

（1）一致

主题是使用同一个的颜色、接近的颜色或渐变色。背景使用图片也是。

• 同一个颜色
  

• 接近的颜色
  
  

• 渐变色
  
  
  

（2）对比

对比色最好两种。

三、分割

1.文字

使用字体效果：大小、加粗、颜色、对齐方式

2.控件

（1）圆角

圆角矩形看起来比直角矩形舒服

（2）间隙

不仅控件之间有间隙，而且控件布局要和屏幕边缘有间隙，最好不要紧贴着屏幕边缘