下载掌阅APP，畅读海量书库
立即打开
UI可以直译为用户界面。UI设计不仅是指界面美化设计，其实从字面上还能够看出UI有与“用户与界面”直接的交互关系。所以，UI设计不仅是为了美化界面，它还需要研究用户，让界面变得更简洁、易用、舒适。
用户界面在智能设备中随处可见，它可以是软件界面，也可以是登录界面，不论是手机上还是PC上都有它的存在，如下图所示。
UI设计包括美化和交互两个方面。为了使读者直观地了解到UI设计的重要性，下面笔者将用UI设计前和UI设计后的界面来做对比分析，如右图所示。
通过观察可以发现，未经过UI设计的界面特点是：
（1）界面过于简单；
（2）“登录”没有体现出按钮的立体感，看起来就像是单纯的文字，而不会引导用户单击；
（3）在没有其他说明的情况看下，无法确认登录界面是哪款软件。
经过UI设计后的界面特点是：
（1）画面内容丰富，具有时尚感和立体感；
（2）“登录”和“注册”按钮具有立体感，使用户明确知道通过单击它们就可以进入“登录”或“注册”的界面中；
（3）通过界面上的微信图标就能让用户知道这是一个微信的登录界面。
UI设计前后对比图
从对比图中就可以看到没有经过UI设计的界面是非常简陋的，因此对于智能手机APP来说，UI的设计非常值得人们重视的。
1. 图样设计
因为icon 最重要的是对形状的把握，所以在定稿之前，不仅要多画草图，还要考虑形的表现形式。早在2008年和2009年，icon的设计就趋向于三维样式，自从iPhone上市后，它的终端icon和iPhone一样，还以二维形式展现。但不管是哪种形式（三维、二维、文字和像素）都要表现得简洁易懂。好的设计源自对生活细节的提炼，在当今时代的大趋势下，只有设计出更人性化的作品，才能立于不败之地。如下面的这个作品是800×400分辨率的屏幕，我们可以从像素、颜色和细节等方面再下些工夫。
二维图标
三维图标
一般情况下，一套 icon 要有统一的外形，这样才能统一 UI 设计风格，如下面的图标都是在一个方形的容器里面做的，所以icon 的四面要顶到容器。同样的，你的容器定位是三角、正三角、梯形，也是如此。通常作者会留出2像素～4像素的浮动空间。
其次还要有素描关系，一套 icon 的透视角度和光源角度必须保持一致，不然就会显得很凌乱。如果光源角度是50°，还要考虑 icon 的高光、反光和阴影。
不同投影方向的三维图标
2. 元素搭配组合
图标的组合元素最好是 1～2 个组合，元素过多会导致识别混乱。就算两个元素的组合也要有主次（大小区分或颜色轻重区分）。要是一套图标里面含有共同的元素，只需要在元素之间进行相互组合即可，没必要重新设计。需要注意的是，如果在同一界面上，一个元素的应用次数很多，就会导致识别性不高，这时就需要做一些小小的调整。
通常一个图标由不同元素组合而成
3. 配色方案
一个 icon 的色彩在3个颜色以内是最好的，控制在 0～2 （黑白灰不算）也不错。因为颜色要是超出3个， icon就会和界面的设计一样，显得很花。
整套 icon 的颜色灰度和基调应该保持一致。当然，并不是说要完全一致，它是有左右浮动的空间的，设计师可以凭着感觉取色。
icon 和背景明暗距离以及icon 的明暗反差都要调整好，需要注意的是要突出主次关系。
颜色过于复杂，影响识别效果
简单的配色更适合图标
4. 视觉体验
主要体现在了质感的呈现上。首先谈一下质感的确定，对于 icon 设计对用户的视觉体验来说，质感非常重要。一般情况下，在开始设计的时候，就要考虑到 icon 的质感效果（如金属质感、水晶玻璃、纸质和亚光质感等）和质感定型（如好几种体现剔透的水晶质感，只选取体现高光的）。而在质感的表现方面，一套 icon 在草稿纸上画好后，就用其中最容易表现的一个图标进行质感的尝试。这时候，可以将能想到的质感表现方式，都进行尝试。只要做完一个 icon，就可以仿照着做其他 icon。
水晶玻璃效果 |
木质效果 |
皮革效果 |
金属效果
手机UI的范围基本被锁定在手机的APP/客户端上。而平面UI的范围就非常广。手机UI独特的尺寸要求、空间和组件类型使很多平面UI设计者对手机UI设计的了解不够到位。
通过PC端和手机印象笔记登录界面下面4幅画的比较，我们可以直观地了解到手机UI与一般网页UI的区别，即使是在同样功能的页面上，内容也是相差很远的。
PC端印象笔记登录界面
PC端印象笔记主页
手机印象笔记登录界面 |
手机印象笔记主页 |