1.1 APP UI设计相关知识

1.1.1 什么是APP UI设计

UI可以直译为用户界面。UI设计不仅是指界面美化设计，其实从字面上还能够看出UI有与“用户与界面”直接的交互关系。所以，UI设计不仅是为了美化界面，它还需要研究用户，让界面变得更简洁、易用、舒适。

用户界面在智能设备中随处可见，它可以是软件界面，也可以是登录界面，不论是手机上还是PC上都有它的存在，如下图所示。

1.1.2 做APP UI设计的目的和重要性

UI设计包括美化和交互两个方面。为了使读者直观地了解到UI设计的重要性，下面笔者将用UI设计前和UI设计后的界面来做对比分析，如右图所示。

通过观察可以发现，未经过UI设计的界面特点是：

（1）界面过于简单；

（2）“登录”没有体现出按钮的立体感，看起来就像是单纯的文字，而不会引导用户单击；

（3）在没有其他说明的情况看下，无法确认登录界面是哪款软件。

经过UI设计后的界面特点是：

（1）画面内容丰富，具有时尚感和立体感；

（2）“登录”和“注册”按钮具有立体感，使用户明确知道通过单击它们就可以进入“登录”或“注册”的界面中；

（3）通过界面上的微信图标就能让用户知道这是一个微信的登录界面。

从对比图中就可以看到没有经过UI设计的界面是非常简陋的，因此对于智能手机APP来说，UI的设计非常值得人们重视的。

1.1.3 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。

1.1.4 平面UI与手机UI的不同

手机UI的范围基本被锁定在手机的APP/客户端上。而平面UI的范围就非常广。手机UI独特的尺寸要求、空间和组件类型使很多平面UI设计者对手机UI设计的了解不够到位。

通过PC端和手机印象笔记登录界面下面4幅画的比较，我们可以直观地了解到手机UI与一般网页UI的区别，即使是在同样功能的页面上，内容也是相差很远的。