1.1 移动端UI设计基础

想要设计出好的移动UI作品，首先要了解移动UI的基础知识，包括移动UI设计的概念、移动UI的平台、移动UI的设计流程、移动UI的常用设计工具，以及移动端与PC端UI设计的区别等。

通过了解移动UI设计的基础知识，可以帮助设计师从本质上理解UI设计的内容和原理，从而充分发挥设计师个人的设计理念，最终设计出更多既符合行业需求，又满足用户需求的UI作品。

1.1.1 了解移动UI设计

UI是User Interface的简称，翻译为“用户界面”。简单来说，UI设计是对软件的人机交互、操作逻辑和界面美观的整体设计。而移动UI设计通常是对智能手机、智能手表和平板电脑等移动电子设备中的应用程序的界面设计。图1-1所示为常见的移动电子设备。

移动电子设备中的应用程序就是大众口中经常提到的App。App是Application的缩写，主要是指安装在智能手机上的软件，用来完善原始系统的不足和个性化，为用户提供更丰富的使用体验。图1-2所示为当当网和小红书的App首页。

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

1.1.2 iOS系统与Android系统

为移动设备设计UI界面，会受到移动设备采用的系统的影响。目前常见的智能手机和平板电脑系统平台为iOS系统和Android系统，而目前常见的智能手表系统平台为Wear OS系统和Watch OS系统。

iOS系统

iOS系统是由苹果公司开发的一款操作系统，目前主要应用在iPhone、iPod touch和iPad等设备上。它以Darwin为根底，最初被命名为iPhone OS，在2010年6月7日召开的WWDC大会上宣布将其改名为iOS。

从2010年开始，苹果公司逐步完善并发布iOS系统，截至2020年7月，最新的iOS系统版本为iOS 14。图1-3所示为iOS 6和iOS 14的系统界面。

相对于Android系统而言，iOS系统具有稳定、安全性高、整合度高和应用质量高等特点。

● 稳定

iOS系统是一个完全封闭的系统，不开源，但是这个系统拥有严格的管理体系和评审规则。由于iOS系统闭源的缘故，更多的系统进程都在苹果公司的掌控之中，因此系统运行较为流畅和稳定。不会出现Android系统那样后台程序繁多并影响系统响应速度的现象。

● 安全性高

对于用户来说，保障移动电子设备的信息安全具有十分重要的意义，不管是企业信息、客户信息和个人照片，还是银行信息或者地址等，都必须保证其安全。苹果公司对iOS系统采取了封闭的措施，并建立了完整的开发者认证和应用审核机制，导致恶意程序基本没有入侵的机会。

iOS设备使用严格的安全技术和功能，使用起来十分方便。iOS设备上的许多安全功能都是默认的，无须对其进行大量的设置，而且某些关键功能，如设备加密，则不允许配置，这样就会避免出现用户意外关闭这项功能的情况。

● 整合度高

iOS系统软件与硬件的整合度相当高，大大降低了它的分化性，在这方面iOS系统远胜碎片化严重的Android系统。同时整合度高也增加了整个iOS系统的稳定性，经常使用iPhone的用户会发现，手机很少出现死机和无响应的情况。

● 应用质量高

作为目前最为流行的移动端操作系统之一，iOS系统与Android系统一样，也拥有大量的用户及开发人员。但由于iOS系统的封闭性和审查制度，iOS系统中的应用相对于Android系统来说，无论是界面设计还是操作流畅方面，质量都会高一些。

Android系统

Android公司于2003年在美国加州成立，2005年被Google公司收购。Android是一种以Linux为基础的开放源码操作系统，主要应用于手持设备。2010年年末的数据显示，仅正式推出两年的操作系统Android已经超越了塞班系统，一跃成为全球最受欢迎的智能手机操作系统。

开发者使用甜点的名称为Android系统的各个版本进行命名，从Andoird 1.5发布开始，作为每个版本代表的甜点尺寸越变越大，并按照26个字母进行排序。

从Android 1.5开始到Android 9.0，依次为纸杯蛋糕、甜甜圈、松饼、冻酸奶、姜饼、蜂巢、果冻豆、奇巧巧克力、棒棒糖、棉花糖、牛轧糖、奥利奥、派。图1-4所示为Google公司总部甜点广场的Android版本雕塑。但是从Android Q开始，不再采用“首字母+甜点”的命名方式，而是直接采用数字，如Android Q被命名为Android 10。

相对于iOS系统来说，Android系统具有系统开源、跨平台性及应用丰富等特点。

● 系统开源

Android系统的底层使用Linux内核和GPL许可证，也就意味着相关的代码必须开源。开源能够带来快速流行的能力与较低的学习成本，各个手机厂商无须自行开发手机操作系统，因此纷纷采用Android系统，甚至各家厂商可以按照自己的目的进行深度定制。例如三星的One UI系统、小米的MIUI系统和锤子的Smartisan OS系统，如图1-5所示。

开源促进了学习研究社区的迅速兴起，相比iOS系统，Android系统的开源对于开发者来说，是一个更适合研究与修改的系统，同时还不受不开源系统的限制。

开源带来的另一个优势就是降低了手机厂商的成本。除去操作系统开发的高成本，Android系统厂商的手机价格可以控制在很低的水平；或者在同样价位中相对iOS系统手机拥有更高端的硬件配置。因此在中低端市场，Android系统手机有着绝对的市场占有率；在高端市场与iOS系统手机相比，同样毫不逊色。

● 跨平台性

由于使用Java对Android系统进行开发，所以Android系统继承了Java跨平台的优点。任何Android应用程序几乎无须修改就能运行于所有的Android设备上。简单来说，就是Android系统允许厂商将五花八门的App应用到移动设备中，移动设备不仅包括智能手机，也包括平板电脑、智能手表、电视和各种智能家居等。

Android系统的跨平台性也极大地方便了庞大的应用开发者群体。同样的应用，对不同的设备编写不同的程序是一件极其浪费劳动力的事情，而Android系统的出现很好地改善了这一状况。

● 应用丰富

操作系统代表着一个完整的生态圈，而一个只有系统没有应用的“空壳”，即使设计得再好，也很难成为主流的操作系统。

Android系统由于其本身的特点及Google公司的大力推广，很快就吸引了开发者的注意。时至今日，Android系统已经积累了相当多的应用。丰富的应用使得Android系统更加流行，从而吸引更多的开发者开发出更多、更好的应用，形成良性循环。

Wear OS系统和Watch OS系统

由于Google公司与苹果公司在智能手机市场的强大控制力和智能穿戴设备的兴起，分别由两家公司开发的用于智能穿戴设备的Wear OS系统和Watch OS系统也开始走进大众的视野。

● Wear OS

Wear OS系统是Android系统的一个分支版本，专为智能手表等可穿戴智能设备而设计，首个预览版本于2014年3月公布。图1-6所示为Google智能手表。

● Watch OS

Watch OS是苹果公司基于iOS系统开发的一套用于Apple Watch智能手表的操作系统。在2014年9月的iPhone 6发布会上，苹果公布了一款全新产品——Apple Watch，并运行基于iOS的Watch OS操作系统。图1-7所示为苹果智能手表。

1.1.3 移动端与PC端UI设计的区别

PC端UI设计是指电子计算机中所有软件的用户界面设计。而移动端UI设计主要是指智能手机和平板电脑中所有App的界面设计。从设计载体的角度来说，两者在屏幕尺寸、设计规范和交互操作上都有很大的不同。

屏幕尺寸不同

移动设备的屏幕一般都比较小，受不同系统的限制，每一个页面中所摆放的内容也较少，需要通过多层级的方式扩充内容。而PC端UI设计则没有这个顾虑，每一页中都可以尽量多放东西，从而减少层级。

例如PC端的京东页面，整个页面尺寸较大，可摆放内容的空间也大，用户只需要通过二级页面就可以看到想要的内容，如图1-8所示。

移动端的京东App层级较多，有5个大的层级，用户想要找到感兴趣的商品，往往需要一层一层地查找。图1-9所示为点击了“京东到家”图标后进入了“京东到家”页面。

设计规范不同

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

交互操作不同

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

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

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