第一章 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)