1.1　UI设计与移动UI设计

要想设计出好的移动UI作品，首先要了解UI的基础概念。了解UI设计的基础概念后，可以帮助设计师从本质上理解UI设计的内容和原理，充分发挥设计师的个人设计理念，设计出更多既符合行业需求，又满足用户需求的作品。

1.1.1　了解UI设计

UI即User Interface的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计能够充分体现软件的定位和特点。

UI设计的范围很广，大到Windows操作系统，小到输入法软件，都有UI设计的身影。常见的银行取款机界面、排队机界面也都是UI设计的范畴，如图1-1所示。

UI设计按照其职能划分可以分为图形设计、交互设计和用户测试/研究，如图1-2所示。

图形设计通常指的是软件产品的“外形”设计。

交互设计主要设计软件的操作流程、树状结构和操作规范等。交互设计是UI设计中最重要的环节，通常一个软件产品在编码之前需要完成的就是交互设计，并确立交互模型和交互规范。

用户测试/研究则用来测试交互设计的合理性和图形设计的美观性，其主要通过目标用户问卷调查的形式来衡量UI设计的合理性。

提示

如果没有对UI设计进行测试/研究，那么UI设计的好坏只能凭借设计师或领导的审美来评判，这样会为项目带来极大的风险。

1.1.2　了解移动UI设计

移动UI设计通常指的是智能手机、平板电脑和智能手表等移动设备中应用程序的UI设计。常见的移动设备如图1-3所示。

移动设备中的应用程序就是指被用户经常提起的App。App是Application的缩写，主要是指安装在智能手机上的软件，用来完善原始系统的不足并增加个性化，为用户提供更丰富的使用体验，淘宝和12306都是移动设备中的App，如图1-4所示。

用户在选择移动端软件时，通常会选择界面视觉清晰，并具有良好体验的应用软件。目前市场上的移动应用软件非常多，但这些软件良莠不齐，界面各异。如何满足用户需求，如何使自己的软件盈利，这都是UI设计师需要考虑的内容。

1.1.3　移动UI与平面UI

平面UI设计的范围非常广，包括绝大多数的UI领域。而移动UI设计主要是指智能手机和平板电脑的客户端。从设计的角度来说，二者在屏幕尺寸、设计规范和UI交互操作上都有很大的不同。

● 屏幕尺寸不同

移动设备的屏幕一般都比较小，且受到不同系统的限制，因此每一个页面中所放的东西较少，需要通过多层级的方式扩充内容。而平面UI则没有这个顾虑，每一页中都尽量多放东西，从而减少层级。例如，PC端的淘宝店铺，整个页面尺寸较大，可放的空间也大，用户只需要通过二级页面就可以看到想要找的内容，如图1-5所示。

而移动端的淘宝店铺层级较多，用户想要找到感兴趣的商品，往往需要一层一层查找，如图1-6所示，点击了“天猫”栏目后只是进入了天猫页面。

● 设计规范不同

平面UI通常使用鼠标操作，而移动端UI使用手指操作。鼠标操作的精度非常高，手指操作的精确度则相对较低。因此平面UI的图标一般都比较小，而移动端的图标则要大很多。微信PC端和移动端图标大小的对比如图1-7所示。

● UI交互操作不同

平面UI中可以展现的UI交互操作方式更多，例如单击、双击、按住、移入、移除、右击和滚轮等多种操作；而移动端的功能相对较弱，只能实现点击、按住和滑动等操作。

例如移动端爱奇艺视频，在屏幕的左边上下滑动可以调整亮度，在屏幕的右边上下滑动可以调整声音，在屏幕的下面左右滑动进度条可以调整视频的进度，双击屏幕可以暂停播放。移动端爱奇艺界面如图1-8所示。

PC端的爱奇艺视频，则通过单击、双击、右击和滚轮进行多种操作。PC端爱奇艺界面如图1-9所示。

提示

除了以上所讲的不同，平面UI与移动UI还有很多地方是不同的，例如图片的格式、切片输出要求等，在后面的章节中会逐一详细讲解。