第一章 APP用户界面基础
1.1 手机UI设计相关基本概念
1.1.1 什么是UI设计
UI(User's Interface)即用户界面，
它不仅仅是美化界面，还需要研究用户，让界面变得更友好、简洁、舒适、易用。
用户界面无处不在。它可以是登录界面，也可以是软件界面，手机、PC上都有；
1.1.2 手机UI与平面UI的不同
手机UI将范围基本锁定在手机的APP/客户端上。
平面UI范围则非常广泛，包括了绝大部分的UI领域。
1.1.3 什么是APP/客户端
APP(application)指的是应用程序。 客户端是APP的另一种叫法，其实是一样的。
1.1.4 智能手机的OS种类
Android, iOS
1.1.5 Photoshop和手机UI的关系
行业通例，大都用PS来开发；
1.2 UI设计与产品团队项目流程的关系
UI设计者并不是一个独立的个体，他是属于产品团队的，会要和产品团队紧密协作！
1.2.1 UI设计者与产品团队
UI设计者存在于一个叫“产品团队”的集体中，
关于产品团队的人员划分可以归纳如下:
产品经理(PM / Product Manager)
产品设计师(PD / Product Designer)
用户体验师(UE / User Experience)
用户设计师(UI / User Interface Designer)
1. 产品经理(PM / Product Manager):
角色: 产品团队的老大
主要职责: 主要对用户需求进行细分调研，
针对用户的需求进行卖点的规划，
然后将规划陈述给公司高层，以此来争取项目所需要的各类资源(人力、物力和财力)。
附属职责: 比较全能的产品经理可以兼具另外一个PM(Project Manager,项目经理)的职责。
常用软件: PPT， Visio和Project等
2. 产品设计师(PD / Product Designer)
角色: 相当于小产品经理
主要职责: 侧重功能设计，
考虑技术的可行性和性价比。
常用软件: Word, Axure
举例: 比如看书类的APP中加入背景音乐的功能是否可行，能否增加APP的下载量；
3. 用户体验师(UE / User Experience)
角色: PD的合作者
主要职责: 了解商业层面的内容，从商业价值的角度出发，对产品与用户交互方面的环节进行改良
常用软件: Dreamweaver
举例: 播放音乐的APP中是否加入一个静音按键，加与没加有什么区别；
4. 用户设计师(UI / User Interface Designer)
角色: 美工
主要职责: 和UE有部分重合，
进行界面表现的实现和美化；
常用软件: Photoshop、Fireworks、Illustrator
不是所有的公司都是按上面的职责划分的，
通常是，PM和PD是一个人， UE和UI是一个人；
1.2.2 UI设计与项目流程步骤
在一个成熟且高效的手机APP产品团队中，通常UI设计者会在前期就加入项目中，
针对产品定位、面向人群、设计风格等多方面进行探讨。
这样做的好处在于，保持了设计风格与产品的一致性，
同时，定下风格后，设计人员立刻可以着手效果图的设计和多套方案的整理，有效节约时间。
UI所参与的项目流程有以下几个部分，如图1-19所示。
Fig 1-19
1. 产品定位
产品的功能是什么？
做这个产品的依据是什么？
要达到什么目的？
想要达成什么影响？
2. 产品风格
产品定位直接影响产品风格。
根据产品的功能、面向人群和商业价值等产品定位内容，会产生许多不同的风格需求。
3. 产品控件
用多选框还是下拉菜单，用下拉滑动还是滚动条等；
4. 方案制订
当对产品的定位、风格和组件确定后，就可以开始制订方案。
一般情况下可以做出两套以上的方案，以便于对比选择。
方案可以采用原型图来表现，也可以是效果图，这根据项目的要求来做。
5. 方案提交
方案提交后，邀请各方人士（不仅包括产品团队，还包括技术和运营）来进行评定，
两套方案可以做A/B测试，选取用户体验更优的方案。
6. 方案选定
如果前期做方案时采用的是原型图的表现形式，
那在选定方案后，就可以以敲定的方案效果图为基准开始进行美化设计了。
1.3 UI的设计流程及方法
上一节是UI设计与项目的纵向划分，本节则是横向视角深入UI设计者的具体操作。
当产品定位和风格达成一致意见后，UI设计者就可以开始方案起草。
方案起草一般由
定位指南、
核心功能确认、
ADS、
画草图、
还原原型、
视觉设计和
交付6个部分组成。
1.3.1 定位指南图
用来直观展现产品的定位。
明确的定位更容易把握产品的风格。
Fig 1-20 产品定位指南
1.3.2 核心功能确认
大方向把握好后，就是核心功能的确认。
APP最终是要为用户服务的，它能实现什么功能一定是一个重要的衡量依据。
下面介绍下KJ法，如图1-21所示
Fig 1-21
KJ法，又称亲和法，由日本Jiro Kawakita教授创造，可以帮助团队对产品最主要核心功能达成共识。
1. 准备黄色便利贴、笔和贴便利贴的场地。
2. 头脑风暴--让参与者在黄色便利贴上写下自己认为最主要的功能，写完贴在墙上。
3. 让每个人都将他认为的功能相似的便利贴排在一起，可以讨论，
当所有人对排列方式满意的时候，小组就确定了。
4. 再给参与者绿色便利贴，给这些小组命名，并写上命名理由。
5. 投票。
给每个人发三张便利贴，分别画上1星，2星和3星，代表优先级，分别贴在各个小组旁边。
最后统计星数，星数越高代表优先级越高，功能越核心。
可以看出，KJ法采用的是由下往上的归类总结法。
这样做的好处是，避免了细节问题上争吵而浪费时间，有效总结归类抓住重点。
接下来，只需要把这些便利贴上写的内容按优先级，归纳到ADS中去。
1.3.3 应用定义声明（ADS）
ADS(Application Definition Statement)就是应用定义声明。
应用定义声明由3个不同的部分组成，根据受众区分解决方案，即:
定义(differentiator)、方案(solution)和用户(audience)，
基本结构如下:
定义(differentiator)、方案(solution) FOR 用户(audience)，
用一句话简短说明应用(APP)的作用，
它能为(哪些)用户(在什么情况下)解决(什么)问题？
从而展现出它的定位(娱乐/工具)，然后列出最主要的功能(Features)。
例如一个天气预报APP的ADS会是:
为在出游前想确定天气情况的用户提供随时随地查询天气情况的解决方案。
功能如下:
位置服务；
天气服务；
实景查看；
用户订阅；
ADS是苹果公司杜撰的一个名词，在APP开发的初始阶段被开发者广泛使用，
ADS用非常简单的一句话来概括APP的功能、目标用户和需求。
例如Entropy最近开发的一款podcast全球广播APP的ADS描述是这样的：
“The LBC Podcast App will allow LBC Radio enthusiasts
to subscribe, download, save, organize, and listen to their favorite LBC shows
and podcasts in a smooth and intuitive interface.”
APP的ADS描述应当打印出来钉在墙上，每天提醒开发者我们在干什么，为谁，以及为什么。
这一步看似简单，但极为重要。
再比如说我们准备开发一个尚酷男装网店，如果我们能准确写出以下这样的ADS:
“我们的目标买家的移动体验包括能够查找最近店面、开业时间和路线信息、快速查找打折信息。”
显然，这条ADS对产品功能和用户需求的定义与第一条ADS完全不同。
1.3.4 画草图
ADS是文字性的展示。
要把它变成更为直观易于理解的形式，用画草图的方式再合适不过了，如图1-23所示。
Fig 1-23
画草图不要求很复杂，简简单单就好。
重要的是将思考的结果表现出来。工具加上一点技巧，任何人都能轻松上手。
1.3.5 低保真原型与高保真原型
低保真原型(也叫线框图)是指将草图通过 Axure、Mockup或Visio等线框工具还原，并移植到电脑上，
无须纠结于细节效果，尽量使用黑白粗糙的线条来还原。
高保真原型因追求细节(如屏幕尺寸)而比低保真原型更加耗时，
为了避免高保真原型被否决而浪费大量时间，高保真原型通常是低保真原型得到确认后才开始制作。
如图1-28所示
Fig 1-28
1.3.6 视觉设计
在原型完成的基础上，就可以对其进行视觉设计。
理论上不提倡使用用户不熟悉或奇怪复杂的界面元素(游戏类APP除外)。
如下图所示，是经过优化的界面:
Fig 1-29
Fig 1-30
1.3.7 切图与交付
把设计的界面成果和描述指南集中到一张大图中交付给开发人员。
标注出原型图的尺寸及描述说明，并切图为PNG格式，以便于技术人员在开发APP时使用，
如图1-31所示。
Fig 1-31
1.4 色彩搭配
色彩搭配是否恰当，决定着你的设计水平品位的高低。
1.5 各设备尺寸标准一览
下图是一个手机屏幕各类参数
Fig 1-46
1.5.1 英寸(Inch)
英寸其实就是我们常说的长度单位，14英寸笔记本电脑等。
指的是屏幕对角的长度，手机屏蔽也沿用这个概念。
1.5.2 分辨率(Resolution)
分辨率是屏幕物理像素的总和。
一般用屏幕像素宽乘以屏幕像素高来表示，如480px * 800px。
1.5.3 网点密度(DPI)
屏幕物理面积内所包含的像素数，通过DPI(每英寸像素点数)来计算，
252DPI就是指每英寸点数为252.
DPI越高，显示的画面质量就越精细。
在一般平面设计上比较追求高DPI来呈现画面质感。
但在手机UI设计时，DPI要与对应手机相匹配，因为低分辨率的手机无法满足高DPI图片对手机硬件的要求 ，
显示的效果反而会变得很差。
1.5.4 屏幕密度(Screen Densities)
屏幕密度分为iDPI(低), mDPI（中等）、hDPI（高）。xhDPI（特高）四种，
图1-46所示的mDPI和hDPI分别指中等密度和高密度。
Fig 1-50
图1-50中分成了屏幕密度(横列表头)和屏幕大小(纵列表头)两个维度。
与屏幕密度相对应的，屏幕大小也分四种:
小屏，普屏，大屏和超大屏。
因为，APP不是为某一个人而服务的，它需要满足一大部分手机用户，而这些用户的手机品牌，型号，尺寸都不同。
最基本的定律----想让越多不同的屏幕大小的手机能够适应你的APP，生成的图片屏幕密度版本要越齐全。
如图1-51所示:
Fig 1-51
比如你只生成了hDPI版本的图片，但有很多手机只支持HVGA分辨率，
那么你生成的图片在这些只支持HVGA的手机上，会显得很大很粗糙，用户体验就会很差。
图1-50中绿色区域的屏幕密度后面带有一个括号，里面填有120， 160， 240， 320这样的数值。
其实这些数值就是要在Photoshop设计中需要用到的。
Fig 1-52
图1-52在新建一个Photoshop文档时，在分辨率一栏中，选择像素/英寸模式，
再在前面输入框中输入相应的屏幕密度数值即可。
不过这样就出现了一个麻烦的问题，
假如一个APP有50张图要设计，每张图要生成4种不同的版本，那就是50x4，合计200张。
意味着要新建并填写200次分辨率，而且还得将图片内容不停地缩放大小，对于新手来说完全是一种折磨。
建议新手从最基准的分辨率--160像素/英寸开始设计，
设计完成后，按75%、150%、200%的缩放比率将图片缩小或扩大。
Photoshop菜单中的 图像->图像大小 命令，按Alt+Ctrl+l组合键，就能很好地完成这一功能，
如图1-53至图1-56所示:
Fig 1-53
Fig 1-54
Fig 1-55
Fig 1-56
转换完不要忘记命名并放置到相应的文件夹中，如图1-57所示。
Fig 1-57
当然，如果只针对Pad而设计的APP, 就只用生成相应的版本就可以了；
与Android相比，iPhone对密度版本的数量要求就没有那么多，它只有有限的几个版本。
1.6 图标尺寸大小与格式建议
本节介绍Android， iOS系统图标的尺寸要求，及对于图片采用格式的建议。
1.6.1 图标尺寸大小
APP的图标(icon)不仅指应用程序的启动图标，
还包括状态栏、菜单栏或是切换导航栏等位置出现的其它标识性图片。
所以icon指的是所有这些图片的集合。
icon同样采上节介绍的屏幕密度制约，
如下图所示:
Fig Android-icon屏幕密度
iPhone的屏幕密度默认为mDPI.
Fig iOS-icon屏幕密度
1.6.2 图标格式建议
任何关于图标格式的选择，都应该将实际情况需求纳入考虑范围。
下面介绍最常见的图片格式。
JPEG: 照片基本格式，相同图像JPEG格式文件较PNG格式文件小，不支持背景透明。
GIF: 支持透明但会出现锯齿。
PNG: 支持透明，iOS推荐图片格式，相同图像在生成PNG格式后，文件会比JPEG格式、GIF格式大。
如果APP不涉及网上下载，且需要进行图片透明处理，那么PNG格式是最好的选择。
如果要保持图片色泽质量饱和度等，不需要透明处理时，就可以选择JPEG格式。
GIF格式占的空间小，在不要求背景透明和图片质量的前提下，可以考虑使用GIF格式。
1.7 APP布局说明
拒绝陌生感，统一布局风格。
1.8 熟悉各系统组件
1.8.1 Android的基础UI组件
1. 文本显示 (TextView）
2. 常规按钮 (Button)
3. 编辑输入框(EditText)
4. 复选框(CheckBox)
5. 单选按钮(RadioButton)
6. 开关按钮(ToggleButton)
7. 下拉框(Spinner)
8. 智能提示框(AutoCompleteTextView)
9. 时间选择框(TimePicker)
10. 列表显示(ListView)
11. 可扩展列表显示(ExpandableListView)
12. 网格式浏览(GridView)
13. 图片显示组件(Gallery)
14. 图片切换条(ImageSwitcher)
15. 进度条(ProgressBar)
16. 选择卡切换(TabWidgel)
17. 提示信息(Toast)
18. 快捷菜单(QuickActions)
1.8.2 iOS的基础UI组件
1. 文本显示 (UITextView）
2. 文本标签 (UILabel)
3. 图片显示 (UIImageViews)
4. Web内容显示(UIWebView)
5. 地图显示 (MKMapViews)
6. 滚动条 (UIScrollView)
7. 警告框(UIAlertView 和 UIActionSheet)
8. 按钮 (UIButton)
9. 平行按钮组(UISegmentedControl)
10. 一键开关(UISwitch)
11. 滑动条 (UISlider)
12. 多图片浏览切换控件(UIpageControl）
13. 编辑输入框 (UITextField)
14. 表格排列显示 (UITableView)
15. 导航栏 (UINavigationBar)
16. 页面切换(UItabBarController)
17. 搜索栏 (UISearchBar)
