《Photoshop智能手機APP界面設計》學習筆記-轉

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