第02章 手机UI设计基础
智能手机的UI设计是指对手机软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性、有品位，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
2.1 关于手机
Keyword
本节将从智能手机常见的操作系统分类讲起，包括iSO（苹果）Android（安卓）和微软的windows Phone系统，这3种分类对应了不同的型号和屏幕分辨率。屏幕的色彩也有所不同，这里介绍这么多是为了让读者熟悉制作载体。
2.1.1 智能手机操作系统的分类
智能手机与个人计算机一样，具有独立的操作系统，用户可以根据自己的需要，自定义安装由第三方服务商提供的应用程序，并可以通过通信网络来实行无线上网。
目前智能手机的操作系统有：Windows Phone、Windows Mo-bile、iOS、Android、Plam OS、BlackBerry OS等。本书中UI设计主要是对Android、iOS、Windows Phone这3个最热门的系统进行设计的。
Android系统智能手机示例图
iOS系统智能手机示例图
Windows Phone系统智能手机示例图
2.1.2 手机屏幕的分辨率
我们平时用的手机屏幕采用的是和笔记本一样的液晶屏，液晶屏幕的分辨率都是固定的，一个点就代表着一个像素。但是手机分辨率和屏幕的大小没有关系，因为手机分辨率并不是指屏幕大小。
常用的手机屏幕分辨率规格共有QVGA、HVGA、WQVGA、VGA和WVGA5种形式，接下来，我们就一起认识一下这5种分辨率。
QVGA（Quarter VGA）：其分辨率为240×320像素，是当下智能手机最常用的分辨率级别。240×320像素的意思就是，手机屏幕横向每行有240个像素点，纵向每列有320 个像素点，乘起来就是320×240 = 76800个像素点。早期的智能手机也大都采用这一显示级别的屏幕。
WQVGA（Wide Quarter Video Graphics Array）：数码产品屏幕分辨率的一种，代表480×272（宽高比16∶9）或者400×240（宽高比5∶3）的屏幕分辨率，代表作是三星2008年机皇I908。
HVGA（Half-size VGA）：其分辨率为480×320像素，宽高比为3∶2。一直都很热销的iPhone和黑莓的Bold 9000，An-droid系统手机谷歌G1、G2、G3都采用了这一显示级别的屏幕。
VGA（Video Graphics Array）：其分辨率为640×480像素，宽高比为5∶4。昔日的HTC机皇Diamond采用的就是VGA分辨率。
WVGA（Wide VGA）是VGA的宽屏模式，分辨率更是达到了800×480像素和854×480像素两种，HTC后来生产的Dia-mond 2和Touch HD就是WVGA的代表作，而MOTO里程碑的分辨率是854×480像素。
iPhone 5的这种视网膜显示屏具有1136×640像素的分辨率，326像素/英寸，对比度800∶1，细腻程度比iP-hone 4S高很多，因而用它浏览文字、观看视频和图片的效果都有一种极致的感受。
前面说过，手机分辨率和屏幕的大小没有关系，但是，单就屏幕显示而言，分辨率和屏幕大小也不是一点关系没有。如果屏幕大小一定，那么分辨率越高屏幕显示就会越清晰；反之，如果分辨率一定，屏幕越小显示图像也就越清晰。
在了解了手机屏幕分辨率规格之后，以后下载所需软件时，要先看好规格再下载。随着科技的发展和时代的进步，手机正在向着大屏幕、高分辨率发展，根据屏幕规格分类的软件肯定会日益增多！
iOS系统
Android系统
Windows Phone系统
2.1.3 屏幕的色彩
在谈屏幕色彩之前，我们先了解一下色阶，色阶就是手机屏幕的颜色问题。屏幕色彩和色阶两者相辅相成，主要指的是液晶显示屏亮度强弱的指数标准。一般情况下，现阶段手机屏幕色彩有65536色、26万色和1600万色3种。不同的颜色，其显示效果也不相同。色彩越高，显示效果就会越好。对于我们来说，高色彩通常意味着能有更好逼真感。但有时候，我们通过实际体验，发现有的1600万色的显示能力还比不上26万色。就像诺基亚的1600万色的N86屏幕还不如HTC G3的26万色屏幕显示效果好。
总而言之，我们在选购手机的时候，要进行有效的科学对比，不能单单看手机屏幕色彩或者分辨率，不然就会在选购手机、评测手机中出现很多差错。我们要结合屏幕色彩和屏幕分辨率两者合理分析手机的优劣。
2.2 UI设计相关知识
Keyword
本节介绍的是手机UI设计的基本概念，包括什么是UI设计、做UI设计的目的、UI设计的重要性、UI设计中最重要的元素是什么、平面UI和手机UI的不同等几个小节，通过本节的学习，我们将了解手机UI设计的概念。
2.2.1 什么是UI设计
UI可以直译为用户界面。UI设计不仅仅是指界面美化设计，从文字的意思上能够看出UI还有与“用户与界面”直接的交互关系。所以，UI设计不仅仅是为了美化界面，它还需要研究用户，让界面变得更简洁、易用、舒适。
用户界面无处不在。它可以是软件界面，也可以是登录界面，无论是在手机还是在PC上都有它的存在。在你使用工具完成任务的过程中，你所做的操作及工具的响应，这些结合起来构成了界面。
用户界面设计，不只是要考虑如何摆放按钮和菜单，更为重要的是考虑程序、设备如何与用户互动。
网站客户端UI
平版客户端UI
手机客户端UI
2.2.2 UI设计的目的和重要性
UI设计的目的是让用户理解程序的用途及如何操作程序。外观和视觉感不是界面设计的主要目的，仅仅是一部分，界面的主要目的还是沟通，通过沟通让用户理解程序。
UI设计包括美化和交互两个方面。为了使读者直观地了解到UI设计的重要性，我们将用UI设计前和UI设计后的对应图来做对比分析。
从左图中可以看出，未被UI设计界面有明显的特点。
（1）界面过于简单。
（2）“登录”没有体现出按钮的立体感，让人看起来就像是单纯的文字，而不会单击。
（3）在没有其他说明的情况下，无法知道登录界面属于哪种软件。
从右图中可以看到，UI设计后的界面有明显的特点。
（1）画面内容丰富，具有时尚感和立体感。
（2）“登录”和“注册”按钮具有美感，使人们明确知道通过单击它们就可以进入“登录”或“注册”的界面中。
（3）从图片上的色调就让人们知道这是一个美团网的登录界面。
从对比图中我们就可以看到，没有被UI设计的界面是非常简陋的，因此对于智能手机APP来说，UI的设计是非常值得人们重视的。
2.2.3 UI设计中最重要的元素是什么
UI设计中，最重要的元素如下。
（1）布局和定位（版面结构）。
（2）形状和尺寸（通过形状，让人迅速地辨识；通过大小确定某元素的重要性，常用的要大，容易按到）。
（3）颜色（不同的颜色，含义不同，红色——危险、停止、错误，绿色——成功、继续；颜色可以突出显示内容，如高亮显示）。
（4）对比（加强对比可以提高辨识度，如黑白；降低对比可以融合；通过强加和降低对比，让用户可以分清主次）。
（5）材质（在对话框的四角加材质，可以提示用户拖曳）。
2.2.4 平面UI与手机UI的不同
手机UI的范围基本被锁定在手机的APP客户端上。而平面UI的范围就非常广。手机UI独特的尺寸要求、空间和组件类型使得很多平面UI设计者对手机UI的设计了解得不到位。
通过一款软件（印象笔记）的比较，我们可以直观地了解到手机UI与一般网页UI的区别，在同样功能的页面上，内容也是相差很远的。
PC端印象笔记登录界面（内容含量更多）
手机印象笔记主页（内容更紧凑）
2.3 UI设计的原则
Keyword
世界级图形设计大师Paul Rand（保罗·兰德）说：“设计绝不是简单的排列组合与简单地再编辑，它应当充满着价值和意义，去说明道理，去删繁就简，去阐明演绎，去修饰美化，去赞美褒扬，使其有戏剧意味，让人们信服你所言……”从这句话可以看出，设计不是轻而易举之事，要想设计出优秀的UI得要费很大的精力。
1.区分重点
为了保持屏幕元素的统一性，初级设计师经常对需要加以区分的元素采用相同的视觉处理效果，当然采用不同的视觉效果也是可以的。由于屏幕元素各自的功能不同，所以它们的外观也不同。也就是说，要是功能相同或者相近，那么它们看起来就应该是一样的。
美团网（左）和大众点评网（右）UI的设计风格布局较为接近
旅行网站又是另一种界面布局
2.界面统一性
为了保持界面的统一性，就要把相同的功能放在同样的位置。一个页面是由一些基本模块组成，而每一种基本模块在进行UI设计的时候，考虑不同的应用实例是否把字型、字号、颜色、按钮颜色、按钮形状、按钮功能、提示文字、行距等元素排列一致。很多设计师在执行的时候会有一些随意的想法，有些想法是比较好的，但是我们还是要执行统一的界面标准。例如，在Windows里面，不同窗口的“关闭”按钮排列在不同的位置，并且颜色也不一样，这样就显得非常凌乱。
天猫商城风格一致的界面设计
3.清晰度是工作的重中之重
在界面设计中，清晰度是第一步工作，也是最重要的工作。如果你想要用户认可并喜欢你设计的界面，就必须让用户先能够识别出它，再让用户知道使用它的原因？让用户不仅能预料到发生什么，还能成功地和它交互。清晰的界面才能够长期吸引用户不断地重复使用，如果界面设计得不太清晰，那么只能满足用户一时的需求。
购物和游戏网站宜采用清晰的产品图片和文字
4.界面的存在就是为了促进交流和互动
界面的存在，主要是为了促进用户和界面之间的互动。一个优秀的界面，不仅能够让我们做事有效率，还能够激发和加强我们与这个世界的联系。
5.让界面处在用户的掌控之中
大家可能会有这样这样一种感觉：人们对能够掌控自己的环境感到很舒心。而那些不考虑用户感受的软件，就不会带给用户这种舒适感。我们应该保证界面时刻处在用户的掌控之中，让用户自己决定系统状态，只需要稍加引导，就会使用户达到所希望的目标。
美图秀秀的人性化功能界面，只看图表也能进行操作
6.界面的存在必须有所用途
在设计领域，衡量一个界面的设计成功与否，就是看有没有用户使用它。比如一件漂亮的衣服，虽然做工精细，材质细腻，但是穿着不合适，那么客户就不会选择它，它也就是一个失败的设计。所以，界面设计只能满足设计者的虚荣心是远远不够的，它必须有实用的价值，即界面设计是先设计一个使用环境，再创造一个值得使用的艺术品。
百度地图的界面设计让人感觉使用起来非常方便
7.强烈的视觉层次感
想要让屏幕的视觉元素具有清晰的浏览次序，只有通过强烈的视觉层次感来实现。换言之，要是视觉层次感不明显的话，用户每次都按照相同的顺序浏览同样的东西，那么他就不知道哪里才是目光停留的重点，最终只会让用户感到一片茫然。可是在设计不断变更的情况下，要保持明确的层次关系，就显得十分困难。如果要把所有的元素都突出显示，那么就没有重点可言，因为所有的元素层次关系都是相对的。为了再次实现明确的视觉层次，就需要设计师添加一个需要特别突出的元素。这是增强视觉层次的最简单、最有效的办法。
几个具有强烈视觉冲击力的界面设计
设计思路：一个UI设计师去找工作，如何展示他的价值
在一个成熟且高效的手机APP产品团队中，UI设计者会在前期就加入项目，针对UI设计的产品分析、定位等多方面问题进行探讨。下面讲述UI设计项目的流程及方法，希望可以有效帮助UI设计者。
1.给力的工作经验
一是要求从业人员精通Photoshop、Illustrator、Flash等图形软件，HTML、Dreamweaver等网页制作工具，能够独立完成静态网页设计工作；熟练操作常用办公软件，且具备其他软件应用能力；熟悉HTML，CSS，JavaS-cript，AJAX。
二是对通用类软件或互联网应用产品的人机交互方面有自己的理解和认识。
三是具备良好的审美能力、深厚的美术功底，有较强的平面设计和网页设计能力。
四是具有敏锐的用户体验观察力，富有创新精神。
2.展示很有细节的视觉UI
设计师这个行业具有一定的特殊性，面试的时候必须提供相关的作品展示，这是衡量你能力的一个前提，也是你区分于其他设计师的一个最重要的标准，因此一定要有作品，而且一定要挑选个人认为最好的作品展示，切忌把所有的作品都放上去展示，有可能筛选简历的人打开的就是你的那幅设计一般或者很差的作品，直接给你否了，这样你就会失去一次宝贵的面试机会。
至于作品的展现形式：个人建议如果有自己的网站或者博客（整理平时的作品或者发表一些文章，谈谈设计思路），那是最佳的，因为本身也是你专业水平的一个体现，会让HR觉得你是个很有规划、很有想法的人。当然，如果没有条件，你可以在一些设计网站上，比如68design创建自己的设计空间，把自己的设计作品上传上去，只要有链接，HR一般都会看的。
3.与实力均衡的工资
你的工资应该和你的实力相均衡。工作10年，工资还只要求在平均工资以下，那只能说明你能力差，不自信。而刚刚工作两三年，工资要求超过公司内部的工资体系也不会被考虑。
所以，各位求职者一定要正确衡量自己的价值，才能提高你面试的机率，调整好心态，才能从众多设计师中脱颖而出。
知识扩展：思考一下UI设计的流程
在设计UI时，一定要注意流程，从而设计出最佳的UI。本小节就来为大家介绍UI的主要流程。
[出发点]
（1）了解设计的原则。没有原则，就丧失了设计的立足点。
（2）了解交互模式。在做UI设计时，不了解模式就会对设计原则的实施产生影响。
（3）了解交互元素及其功能。如果对于基本交互元素和功能都不了解，如何设计呢？
[阶段一——分析]
（1）用户需求分析。
（2）用户交互场景分析。
（3）竞争产品分析。
出发点与分析阶段可以说是相辅相成的。对于一个较为正规的UI项目来说，必然会对用户的需求进行分析，如果说设计原则是设计的出发点，那么用户需求就是本次设计的出发点。
要想做出好的UI设计，必须要对用户进行深刻了解，因此用户交互场景分析就很重要。对于大部分项目组来说，也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。
竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。
当然，有的时候可以参考的并不一定是竞争产品。
[阶段二——设计]
采用面向场景、面向事件和面向对象的设计方法。
UI设计着重于交互，因此必然要对最终用户的交互场景进行设计。
软件是交互产品，用户所做的就是对软件事件的响应以及触发软件内置的事件。因此，要面向事件设计。
面向对象设计可以有效地体现面向场景和面向事件的特点。
因此，设计的4个要素为：交互对象、数据对象、事件（交互事件和异常）、动作。
[阶段三——开发]
通过用户交互图（说明用户和系统之间的联系）、用户交互流程图（说明交互和事件之间的联系）和交互功能设计图（说明功能和交互的对应关系），最终得到设计产品。
[阶段四——验证]
对于产品的验证主要从下面几个方面入手。
（1）功能性对照。UI设计的再好，和需求不一致也不可以。
（2）实用性内部测试。UI设计的最重要点就是实用性。
通过以上一个出发点和4个阶段的设计，就可以做出完美的、符合用户需求的UI设计。