• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】總結Android 4.0設計的10大改變




    總結Android 4.0設計的10大改變

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自Tencent CDC Blog的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    在拜讀和翻譯了Android design設計指導后,對比Android 4.0與Android2.3及之前版本的app設計指導,總結了Android 4.0設計的10大改變。


    設計理論教學開始

    在拜讀和翻譯了Android design設計指導后,對比Android 4.0與Android2.3及之前版本的app設計指導,總結了Android 4.0設計的10大改變:

    1. 導航欄 (詳見模式PATTERNS>導航Navigation)

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

    總結Android 4.0設計的10大改變

    左側為早期有4個物理按鍵的手機,右側為新版只有3個虛擬按鈕的手機

    把菜單項和搜索項從導航欄去掉,把之前通過長按主頁鍵才出現的最近任務直接展示在導航欄中。

    總結Android 4.0設計的10大改變

    最近任務的界面

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

    總結Android 4.0設計的10大改變

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

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

    操作欄從之前的app圖標+操作,變成如下圖所示:

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

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

    總結Android 4.0設計的10大改變

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

    總結Android 4.0設計的10大改變

    在空間足夠的橫向屏幕展示界面時,被拆分的操作欄,可以靈活合併在一起。如下圖中的手機端橫豎屏操作欄所示。

    總結Android 4.0設計的10大改變

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

    多面板布局更多的是針對平板電腦,把手機端的目錄視圖和詳情視圖兩個層級的界面,甚至更多的頁面,複合展示在同一個界面中,有效地利用平板電腦的屏幕空間,扁平化層級結構,簡化導航。這點在iPad上已經運用得相當嫻熟了。

    總結Android 4.0設計的10大改變

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

    Android4.0中的長按與Android2.3及更早期的版本有很大的不同。早期版本長按操作后,是出現情境菜單的浮出層。在Android4.0中,長按后在操作欄的位置會覆蓋一個臨時的情境操作欄,不再彈出情境菜單浮出層。在臨時情境操作欄的環境下,當前界面的內容項允許被單個處理,也允許被批量處理。

    總結Android 4.0設計的10大改變

    長按Android2.3及更早期系統版本的內容項時,出現情境菜單的浮出層。

    總結Android 4.0設計的10大改變

    長按Android4.0系統版本的內容項時,情境菜單欄覆蓋在操作欄上。

    總結Android 4.0設計的10大改變

    在情境菜單環境下,支持批量操作。

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

    返回按鍵用在手機全局的虛擬導航欄中,基於用戶最近查看的界面歷史,採用時間倒序的方式,連接界面間的關係。向上按鈕用在操作欄的左側,基於層級結構,點擊后是去到當前界面的上一個層級,若當前界面已經是最高一級,則沒有向上按鈕。

    總結Android 4.0設計的10大改變

    總結Android 4.0設計的10大改變

    黃色部分為點擊向上按鈕后的頁面路徑,紅色部分為點擊返回按鈕后的頁面路徑

    6. 主題樣式 (詳見風格STYLE>主題樣式Themes)

    推出三套默認主題:Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在這三套默認主題的基礎上做設計,以加快app研發效率,但只是建議使用,並沒有完全強制。視覺設計師們可以重點看下STYLE和BUILDING BLOCKS這兩章。

    總結Android 4.0設計的10大改變

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

    在原apps頁里,用選項卡tabs的方式增加了widgets內容。一改用隱晦方式添加widget的操作和把widgets零散放在桌面呈現的方式。在app設計中,應該提高對widget設計的重視程度。

    總結Android 4.0設計的10大改變

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

    向後兼容,考慮到物理導航按鍵手機如何兼容Android 4.0系統和虛擬導航手機如何兼容Android2.3和更早期版本的apps。

    總結Android 4.0設計的10大改變

    在物理導航按鍵手機上安裝android4.0系統,點擊物理按鍵,在屏幕下方出現action overflow的內容。

    總結Android 4.0設計的10大改變

    在新的虛擬導航手機上安裝為android2.3及更早版本系統設計的app,會在屏幕下方的虛擬導航的右側出現action overflow按鈕(如上圖的黃色部分)。

    總結Android 4.0設計的10大改變

    在新的虛擬導航手機上安裝android4.0,點擊action overflow后的展示狀態如上圖。

    9. 強調純粹的Android應用設計 (詳見模式PATTERNS>純粹的Android)

    在Android4.0 app設計準則中,特彆強調為Android設計純粹的Android app,切勿使用其他平台特定元素的注意事項,有以下5個方面:

    (1)強調視覺元素的樣式要符合android系統;

    (2)不用其它平台特有的圖標;

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

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

    (5)不在內容列表裡使用向右箭頭。

    總結Android 4.0設計的10大改變

     

    總結Android 4.0設計的10大改變

    Android系統里,選項卡(tabs)會固定放在屏幕上方,不會放在下方。這點與ios系統不同。

    10. 其它細節

    增加許多新的交互細節、信息展示和視覺樣式等規範,詳細見翻譯。其中,有幾點在此強調下:

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

    總結Android 4.0設計的10大改變

    (2)視覺的平面化,柵格風正在4.0中上演。

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

    — —

    文章永久連結為: 總結Android 4.0設計的10大改變