多圖詳解 “Android UI”設(shè)計(jì)官方教程
我們?cè)?jīng)給大家一個(gè)《MeeGo移動(dòng)終端設(shè)備開發(fā)UI設(shè)計(jì)基礎(chǔ)教程》，同時(shí)很多朋友都在尋找Android UI開發(fā)的教程，我們從Android的官方開發(fā)者博客找了一份幻燈片，介紹了一些Android UI設(shè)計(jì)，我們把這個(gè)教程整理出來(lái)，希望大家喜歡。
想了解全部Android UI教程內(nèi)容請(qǐng)點(diǎn)擊51CTO獨(dú)家專題：谷歌官方教程:Android UI設(shè)計(jì)技巧
作為開發(fā)者，為啥我們要關(guān)心UI，前面的一堆通通可以忽略掉，直接跳到***一條。因?yàn)楹玫腢I設(shè)計(jì)可以幫助我們賣出更多拷貝，賺到更多錢。
#p#
簡(jiǎn)介
這個(gè)教程包含5個(gè)部分：
◆該做什么，不該做什么
◆設(shè)計(jì)哲學(xué)和考量
◆你必須了解的 UI 框架特性
◆新的 UI 設(shè)計(jì)模式
◆圖標(biāo)和準(zhǔn)則
#p#
UI設(shè)計(jì)5不要
Don’t:
◆不要照搬你在其它平臺(tái)的UI設(shè)計(jì)，應(yīng)該讓用戶感覺(jué)是在真正使用一個(gè) Android 軟件，在你的商標(biāo)顯示和平臺(tái)整體觀感之間做好平衡
◆不要過(guò)度使用模態(tài)對(duì)話框
◆不要使用固定的絕對(duì)定位的布局
◆不要使用px單位，使用dp或者為文本使用sp
◆ 不要使用太小的字體
#p#
UI設(shè)計(jì)9要素：
Do：
◆為高分辨率的屏幕創(chuàng)建資源（縮小總比放大好）
◆ 需要點(diǎn)擊的元素要夠大
◆圖標(biāo)設(shè)計(jì)遵循 Android 的準(zhǔn)則
◆ 使用適當(dāng)?shù)拈g距（margins, padding）
◆ 支持D-pad和trackball導(dǎo)航
◆正確管理活動(dòng)（activity）堆棧
◆ 正確處理屏幕方向變化
◆使用主題/樣式，尺寸和顏色資源來(lái)減少多余的值
◆和視覺(jué)交互設(shè)計(jì)師合作!
#p#
4則Android UI的設(shè)計(jì)哲學(xué):
◆干凈而不過(guò)于簡(jiǎn)單
◆關(guān)注內(nèi)容而非修飾
◆保存一致，讓用戶容易投入其中，可附加少許變化
◆使用云端服務(wù)（存儲(chǔ)和同步用戶資料）來(lái)加強(qiáng)用戶體驗(yàn)
#p#
優(yōu)秀界面的設(shè)計(jì)5條準(zhǔn)則:
◆關(guān)注用戶
◆顯示正確的內(nèi)容
◆給予用戶適當(dāng)?shù)幕仞?/p>
◆有章可循的行為模式
◆容忍錯(cuò)誤
關(guān)注用戶：
◆了解你的用戶（年齡，技能，文化，對(duì)你的應(yīng)用的需求，使用的設(shè)備，何時(shí)何地如何使用設(shè)備）
◆‘用戶優(yōu)先’的設(shè)計(jì)心態(tài) （用戶通常是任務(wù)導(dǎo)向的行為模式）
◆更早，更頻繁的由真實(shí)用戶來(lái)測(cè)試
顯示正確的內(nèi)容：
◆最常用的操作需要最快被用戶看到并且可用
◆不太常用的功能可以放到菜單里面
給予用戶適當(dāng)?shù)幕仞仯?/strong>
◆交互式的UI元素最少需要反映出4種不同的狀態(tài) （default，disabled，focused，pressed）
◆保證操作的結(jié)果是清晰可見(jiàn)的
◆多給予用戶進(jìn)度提示，但是不要干擾他們當(dāng)前的操作
有章可循的行為模式：
◆行為模式遵循用戶的期望（正確的操作活動(dòng)堆棧，顯示用戶期望看到的信息和動(dòng)作）
◆使用合適的方式來(lái)加強(qiáng)功能可見(jiàn)性（可點(diǎn)擊的元素就應(yīng)該看起來(lái)是可以點(diǎn)擊的）
◆如果用戶完成一項(xiàng)任務(wù)需要復(fù)雜的操作，重新思考你的設(shè)計(jì)!!!
容忍錯(cuò)誤：
◆只允許有意義的操作（適當(dāng)禁用一些按鈕）
◆盡量減少不可回退的操作
◆允許回退（undo）比使用確定對(duì)話框更好（實(shí)際上，應(yīng)該盡量少用確定對(duì)話框，它對(duì)用戶是一種干擾）
#p#
“如果錯(cuò)誤是可能發(fā)生的，那它就一定會(huì)發(fā)生。”
——Donald Norman, The Design of Everyday Things 作者
設(shè)計(jì)需要考量的8地方：
◆屏幕的物理尺寸
◆屏幕密度
◆屏幕的方向（豎向和橫向）
◆主要的UI交互方式（觸屏還是使用D-pad/trackball）
◆軟鍵盤還是物理鍵盤
◆了解不同設(shè)備之間的相異之處是非常重要的!
◆閱讀CDD，學(xué)習(xí)設(shè)備可能差異的地方
◆了解屏幕尺寸和密度分類
#p#
Android UI 框架特性
你必須了解（使用）的 UI 框架特性。
使用相對(duì)布局管理界面元素。
譯者注：相對(duì)布局和線性布局是Android里面常用的兩種布局，線性布局比較簡(jiǎn)單，而相對(duì)布局可以做出比較復(fù)雜的布局管理，所以僅僅了解線性布局，很多時(shí)候是不夠的。不過(guò)以作者之前Qt的經(jīng)驗(yàn)來(lái)看，Android里面的布局管理功能都比較陽(yáng)春也不太容易使用，不過(guò)這可能是跟移動(dòng)平臺(tái)的性能考量有關(guān)系。
#p#
合理使用資源修飾符
使用資源修飾符來(lái)修飾同一套資源的多個(gè)不同版本。
◆一個(gè)apk包里面會(huì)包含所有的資源文件。
◆系統(tǒng)在運(yùn)行時(shí)會(huì)根據(jù)軟硬件環(huán)境來(lái)自動(dòng)選擇相應(yīng)修飾符版本的資源。
譯者注：最常用的修飾符可能是locale修飾符（制作多語(yǔ)文本），dpi修飾符（為不同密度的屏幕制作不同尺寸的圖標(biāo)和皮膚），orientation修飾符（為橫屏和豎屏提供不同的UI布局）。如果系統(tǒng)找不到對(duì)應(yīng)的修飾符版本，它就會(huì)選擇無(wú)修飾符的版本，這個(gè)版本通常也是所謂的默認(rèn)選擇。
#p#
9-patch drawables
使用 9-patch drawables – foo.9.png
◆9-patch drawables 的語(yǔ)法跟CSS3 border image 類似
◆根據(jù)邊緣的像素寬度切割出不同的拉伸區(qū)域
◆***同時(shí)提供 mdpi 和 hdpi 的版本
譯者注：drawables 在 Android 里面跟 WPF 里面的 Drawing 類似，用于定義一個(gè)可繪制的對(duì)象，包括位圖，刷子，填充顏色或者以上物件的組合等等。所謂 9-patch drawables，就是將一個(gè) drawable 按照定義的 4 個(gè)邊緣的寬度大小切割成9個(gè)區(qū)域，包括4個(gè)角落，4條邊緣和一個(gè)中心區(qū)域，當(dāng)把這個(gè) drawable 繪制到一個(gè)任意矩形區(qū)域時(shí)，drawable 的各個(gè)區(qū)域有不同的拉伸控制（角落不拉伸，橫邊橫向拉伸，豎邊豎向拉伸，中心區(qū)域橫豎向都拉伸）。通常使用 9-patch drawable 一般是為了繪制出比較漂亮的帶圓角背景，這樣可以避免圓角及邊緣被任意拉伸導(dǎo)致變形。當(dāng)然，如果你的程序里面繪制的圖像和目標(biāo)區(qū)域大小完全一樣，就不需要那么麻煩，不過(guò)以 Android 的狀況來(lái)說(shuō)，為了適應(yīng)多種設(shè)備，***不要事先假設(shè)目標(biāo)區(qū)域的像素大小。
#p#
使用狀態(tài)列表和多層疊加來(lái)制作具備復(fù)雜效果的可繪制圖像
使用 Selector (state list) drawables （狀態(tài)列表）來(lái)提供不同狀態(tài)（normal，disabled，focused，pressed…）下的繪制圖像。
使用 Layer drawables （多層疊加）來(lái)制作具備復(fù)雜效果的可繪制圖像。
譯者注：所謂多層疊加，使用PS來(lái)制作圖標(biāo)和皮膚的同學(xué)可能都清楚，比如說(shuō)一個(gè)按鈕的PS模板通常會(huì)包括所謂的background層定義底色，mask層定義輪廓，shine層定義前景的高亮效果。而 Android 里面允許你直接在 XML 腳本里面使用 Layer drawables 的語(yǔ)法來(lái)定義上述的多層疊加效果，這樣可能比在PS里面直接做好要更靈活一些，并且有的層可以是來(lái)自png位圖，有的層可以是直接通過(guò) XML 腳本生成（比如純色，過(guò)渡色等等）。
【編輯推薦】
