[UI及布局] Android 4.0設(shè)計(jì)規(guī)范

　　在拜讀和翻譯了Android design設(shè)計(jì)指導(dǎo)后，對(duì)比Android 4.0與Android2.3及之前版本的app設(shè)計(jì)指導(dǎo)，總結(jié)了Android 4.0設(shè)計(jì)的10大改變：

　　1. 導(dǎo)航欄 (詳見(jiàn)模式PATTERNS>導(dǎo)航Navigation)

　　由之前的物理按鍵導(dǎo)航(返回、菜單、搜索、主頁(yè))變成了嵌入屏幕的虛擬按鍵(返回、主頁(yè)、最近任務(wù))。

　　左側(cè)為早期有4個(gè)物理按鍵的手機(jī)，右側(cè)為新版只有3個(gè)虛擬按鈕的手機(jī)

　　把菜單項(xiàng)和搜索項(xiàng)從導(dǎo)航欄去掉，把之前通過(guò)長(zhǎng)按主頁(yè)鍵才出現(xiàn)的最近任務(wù)直接展示在導(dǎo)航欄中。

　　最近任務(wù)的界面

　　把菜單收起的同時(shí)，在軟件界面的操作欄上增加了“更多操作”(action overflow)，如下圖中的黃色圓點(diǎn)所示。

　　黃色圈部分為“更多操作”(action overflow)的位置和點(diǎn)擊后內(nèi)容的展示方式

　　2. 操作欄 (詳見(jiàn)模式PATTERNS>操作欄Action bar)

　　操作欄從之前的app圖標(biāo)+操作，變成如下圖所示：

　　1向上+2 Spinner+3 重要操作+4 更多操作。

　　其中，向上按鈕，點(diǎn)擊后是去到當(dāng)前界面的上一個(gè)層級(jí)，非第一層級(jí)界面有此按鈕，第一層級(jí)界面則無(wú)向上按鈕;Spinner 是用于展示內(nèi)容的下拉菜單，其內(nèi)容包括視圖的快速切換和顯示相關(guān)內(nèi)容的完整信息;更多操作(action overflow)是集合操作欄中不常用的和非重要操作的地方。

　　操作欄可以拆分成下圖中的1主操作欄、2頂部欄和3底部欄。如果需要，頂部欄可以承載選項(xiàng)卡tabs，底部欄可以承載主要操作和被收起的更多操作(action overflow)。

　　在空間足夠的橫向屏幕展示界面時(shí)，被拆分的操作欄，可以靈活合并在一起。如下圖中的手機(jī)端橫豎屏操作欄所示。

　　3. 多面板布局 (詳見(jiàn)模式PATTERNS>多面板布局Multi-pane layouts)

　　多面板布局更多的是針對(duì)平板電腦，把手機(jī)端的目錄視圖和詳情視圖兩個(gè)層級(jí)的界面，甚至更多的頁(yè)面，復(fù)合展示在同一個(gè)界面中，有效地利用平板電腦的屏幕空間，扁平化層級(jí)結(jié)構(gòu)，簡(jiǎn)化導(dǎo)航。這點(diǎn)在iPad上已經(jīng)運(yùn)用得相當(dāng)嫻熟了。

　　4. 選擇 (詳見(jiàn)模式PATTERNS>選擇Selection)

　　Android4.0中的長(zhǎng)按與Android2.3及更早期的版本有很大的不同。早期版本長(zhǎng)按操作后，是出現(xiàn)情境菜單的浮出層。在Android4.0中，長(zhǎng)按后在操作欄的位置會(huì)覆蓋一個(gè)臨時(shí)的情境操作欄，不再?gòu)棾銮榫巢藛胃〕鰧印Ｔ谂R時(shí)情境操作欄的環(huán)境下，當(dāng)前界面的內(nèi)容項(xiàng)允許被單個(gè)處理，也允許被批量處理。

　　長(zhǎng)按Android2.3及更早期系統(tǒng)版本的內(nèi)容項(xiàng)時(shí)，出現(xiàn)情境菜單的浮出層。

　　長(zhǎng)按Android4.0系統(tǒng)版本的內(nèi)容項(xiàng)時(shí)，情境菜單欄覆蓋在操作欄上。

　　在情境菜單環(huán)境下，支持批量操作。

　　5. 返回和向上 (詳見(jiàn)模式PATTERNS>返回和向上Navigation with Back and Up)

　　返回按鍵用在手機(jī)全局的虛擬導(dǎo)航欄中，基于用戶最近查看的界面歷史，采用時(shí)間倒序的方式，連接界面間的關(guān)系。向上按鈕用在操作欄的左側(cè)，基于層級(jí)結(jié)構(gòu)，點(diǎn)擊后是去到當(dāng)前界面的上一個(gè)層級(jí)，若當(dāng)前界面已經(jīng)是最高一級(jí)，則沒(méi)有向上按鈕。

　　黃色部分為點(diǎn)擊向上按鈕后的頁(yè)面路徑，紅色部分為點(diǎn)擊返回按鈕后的頁(yè)面路徑

　　6. 主題樣式 (詳見(jiàn)風(fēng)格STYLE>主題樣式Themes)

　　推出三套默認(rèn)主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在這三套默認(rèn)主題的基礎(chǔ)上做設(shè)計(jì)，以加快app研發(fā)效率，但只是建議使用，并沒(méi)有完全強(qiáng)制。視覺(jué)設(shè)計(jì)師們可以重點(diǎn)看下STYLE和BUILDING BLOCKS這兩章。

　　7. Widgets (詳見(jiàn)開始吧GET STARTED>UI概覽UI Overview)

　　在原apps頁(yè)里，用選項(xiàng)卡tabs的方式增加了widgets內(nèi)容。一改用隱晦方式添加widget的操作和把widgets零散放在桌面呈現(xiàn)的方式。在app設(shè)計(jì)中，應(yīng)該提高對(duì)widget設(shè)計(jì)的重視程度。

　　8. 兼容性 (詳見(jiàn)模式PATTERNS>兼容性Compatibility)

　　向后兼容，考慮到物理導(dǎo)航按鍵手機(jī)如何兼容Android 4.0系統(tǒng)和虛擬導(dǎo)航手機(jī)如何兼容Android2.3和更早期版本的apps。

　　在物理導(dǎo)航按鍵手機(jī)上安裝android4.0系統(tǒng)，點(diǎn)擊物理按鍵，在屏幕下方出現(xiàn)action overflow的內(nèi)容。

　　在新的虛擬導(dǎo)航手機(jī)上安裝為android2.3及更早版本系統(tǒng)設(shè)計(jì)的app，會(huì)在屏幕下方的虛擬導(dǎo)航的右側(cè)出現(xiàn)action overflow按鈕(如上圖的黃色部分)。

　　在新的虛擬導(dǎo)航手機(jī)上安裝android4.0，點(diǎn)擊action overflow后的展示狀態(tài)如上圖。

　　9. 強(qiáng)調(diào)純粹的Android應(yīng)用設(shè)計(jì) (詳見(jiàn)模式PATTERNS>純粹的Android)

　　在Android4.0 app設(shè)計(jì)準(zhǔn)則中，特別強(qiáng)調(diào)為Android設(shè)計(jì)純粹的Android app，切勿使用其他平臺(tái)特定元素的注意事項(xiàng)，有以下5個(gè)方面：

　　(1)強(qiáng)調(diào)視覺(jué)元素的樣式要符合android系統(tǒng);

　　(2)不用其它平臺(tái)特有的圖標(biāo);

　　(3)不在界面的下方使用選項(xiàng)卡tabs;

　　(4)區(qū)分向上和返回，不在操作欄上使用返回樣式的按鈕;

　　(5)不在內(nèi)容列表里使用向右箭頭。

　　Android系統(tǒng)里，選項(xiàng)卡(tabs)會(huì)固定放在屏幕上方，不會(huì)放在下方。這點(diǎn)與ios系統(tǒng)不同。

　　10. 其它細(xì)節(jié)

　　增加許多新的交互細(xì)節(jié)、信息展示和視覺(jué)樣式等規(guī)范，詳細(xì)見(jiàn)翻譯。其中，有幾點(diǎn)在此強(qiáng)調(diào)下：

　　(1)新增了橫滑移除內(nèi)容的交互手勢(shì)。在部分模塊中，支持向左或向右橫滑移除內(nèi)容的操作，如最近任務(wù)和消息通知抽屜。

　　(2)視覺(jué)的平面化，柵格風(fēng)正在4.0中上演。

　　(3)在writing style中明確指出寫wording時(shí)，要直接使用第二人稱“你”。