Android 4.0設計規範
在拜讀和翻譯了 Android design 設計指導後,對比 Android 4.0 與 Android2.3 及以前版本的 app 設計指導,總結了 Android 4.0 設計的 10 大改變:
1. 導航欄 (詳見模式 PATTERNS>導航 Navigation)
由以前的物理按鍵導航(返回、菜單、搜索、主頁)變成了嵌入屏幕的虛擬按鍵(返回、主頁、最近任務)。
左側爲早期有 4 個物理按鍵的手機,右側爲新版只有 3 個虛擬按鈕的手機
把菜單項和搜索項從導航欄去掉,把以前經過長按主頁鍵纔出現的最近任務直接展現在導航欄中。
最近任務的界面
把菜單收起的同時,在軟件界面的操做欄上增長了「更多操做」(action overflow),以下圖中的黃色圓點所示。
黃色圈部分爲「更多操做」(action overflow)的位置和點擊後內容的展現方式
2. 操做欄 (詳見模式 PATTERNS>操做欄 Action bar)
操做欄從以前的 app 圖標+操做,變成以下圖所示:
1向上+2 Spinner+3 重要操做+4 更多操做。
其中,向上按鈕,點擊後是去到當前界面的上一個層級,非第一層級界面有此按鈕,第一層級界面則無向上按鈕;Spinner 是用於展現內容的下拉菜單,其內容包括視圖的快速切換和顯示相關內容的完整信息;更多操做(action overflow)是集合操做欄中不經常使用的和非重要操做的地方。
操做欄能夠拆分紅下圖中的 1 主操做欄、2頂部欄和 3 底部欄。若是須要,頂部欄能夠承載選項卡 tabs,底部欄能夠承載主要操做和被收起的更多操做(action overflow)。
在空間足夠的橫向屏幕展現界面時,被拆分的操做欄,能夠靈活合併在一塊兒。以下圖中的手機端橫豎屏操做欄所示。
3. 多面板佈局 (詳見模式 PATTERNS>多面板佈局 Multi-pane layouts)
多面板佈局更多的是針對平板電腦,把手機端的目錄視圖和詳情視圖兩個層級的界面,甚至更多的頁面,複合展現在同一個界面中,有效地利用平板電腦的屏幕空間,扁平化層級結構,簡化導航。這點在 iPad 上已經運用得至關嫺熟了。
4. 選擇 (詳見模式 PATTERNS>選擇 Selection)
Android4.0中的長按與 Android2.3 及更早期的版本有很大的不一樣。早期版本長按操做後,是出現情境菜單的浮出層。在 Android4.0 中,長按後在操做欄的位置會覆蓋一個臨時的情境操做欄,再也不彈出情境菜單浮出層。在臨時情境操做欄的環境下,當前界面的內容項容許被單個處理,也容許被批量處理。
長按 Android2.3 及更早期系統版本的內容項時,出現情境菜單的浮出層
長按 Android4.0 系統版本的內容項時,情境菜單欄覆蓋在操做欄上。
在情境菜單環境下,支持批量操做。
5. 返回和向上 (詳見模式 PATTERNS>返回和向上 Navigation with Back and Up)
返回按鍵用在手機全局的虛擬導航欄中,基於用戶最近查看的界面歷史,採用時間倒序的方式,鏈接界面間的關係。向上按鈕用在操做欄的左側,基於層級結構,點擊後是去到當前界面的上一個層級,若當前界面已是最高一級,則沒有向上按鈕。
黃色部分爲點擊向上按鈕後的頁面路徑,紅色部分爲點擊返回按鈕後的頁面路徑
6. 主題樣式 (詳見風格 STYLE>主題樣式 Themes)
推出三套默認主題:Holo 淺色主題、Holo 深色主題、Holo 淺色底+深色操做欄主題。主推 app 在這三套默認主題的基礎上作設計,以加快 app 研發效率,但只是建議使用,並無徹底強制。視覺設計師們能夠重點看下 STYLE 和 BUILDING BLOCKS 這兩章。
7. Widgets (詳見開始吧 GET STARTED>UI 概覽 UI Overview)
在原 apps 頁裏,用選項卡 tabs 的方式增長了 widgets 內容。一改用隱晦方式添加 widget 的操做和把 widgets 零散放在桌面呈現的方式。在 app 設計中,應該提升對 widget 設計的重視程度。
8. 兼容性 (詳見模式 PATTERNS>兼容性 Compatibility)
向後兼容,考慮到物理導航按鍵手機如何兼容 Android 4.0 系統和虛擬導航手機如何兼容 Android2.3 和更早期版本的 apps。
在物理導航按鍵手機上安裝 android4.0 系統,點擊物理按鍵,在屏幕下方出現 action overflow 的內容。
在新的虛擬導航手機上安裝爲 android2.3 及更早版本系統設計的 app,會在屏幕下方的虛擬導航的右側出現 action overflow 按鈕(如上圖的黃色部分)。
在新的虛擬導航手機上安裝 android4.0,點擊 action overflow 後的展現狀態如上圖。
9. 強調純粹的 Android 應用設計 (詳見模式 PATTERNS>純粹的 Android)
在 Android4.0 app 設計準則中,特別強調爲 Android 設計純粹的 Android app,切勿使用其餘平臺特定元素的注意事項,有如下 5 個方面:
(1)強調視覺元素的樣式要符合 android 系統;
(2)不用其它平臺特有的圖標;
(3)不在界面的下方使用選項卡 tabs;
(4)區分向上和返回,不在操做欄上使用返回樣式的按鈕;
(5)不在內容列表裏使用向右箭頭。
Android 系統裏,選項卡(tabs)會固定放在屏幕上方,不會放在下方。這點與 ios 系統不一樣。
10. 其它細節
增長許多新的交互細節、信息展現和視覺樣式等規範,詳細見翻譯。其中,有幾點在此強調下:
(1)新增了橫滑移除內容的交互手勢。在部分模塊中,支持向左或向右橫滑移除內容的操做,如最近任務和消息通知抽屜。
(2)視覺的平面化,柵格風正在4.0中上演。
(3)在 writing style 中明確指出寫 wording 時,要直接使用第二人稱「你」。
歡迎關注本站公眾號,獲取更多信息