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

標籤：蘋果   iphone   ui組件   研究   哪些   開發人員   quick   手機品牌   vga   

第一章 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設計與產品Team 專案流程的關係

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就是指DPI為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)

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