Android UI 模式(patterns)


Multi-pane 布局


當在寫一個Android應用時,要記住Android設備有很多不同的屏幕尺寸類型。要保證內容能適應多屏幕尺寸以及屏幕朝向。

Panels是一個很好的能實現這個要求的方法。當橫向時,有很多空間,它們允許你把多個視圖結合成一個復合視圖,當可用空間比較少的時候,它們會把內容分割開。

& 把多個視圖結合成一個:在小的設備上,典型的安排是分成一個主要的grid或list視圖和一個detail視圖。點擊一個項目后,進入detail視圖。但因為平板上有很多空間,你可以使用panels把多個相關的list和detail視圖結合成一個復合的視圖。這可以更有效地使用多余的空間,並且使應用導航更為簡單。

& 復合視圖和朝向改變(與平板有關,先略過)

 

Swipe Views


有效地導航也是一個良好設計要關心的部分。用Swipe,可以通過一個簡單的手勢來實現從一個item到另一個item的轉換,使瀏覽和使用數據變得更為流暢。

& 在Detai視圖間Swipe

在之前的設計里,比如郵件,是分為一個List視圖和一個Detail視圖,點擊進入一個item之后,要看其他的item,只能退出去后再點擊進入。這叫“pogo-sticking”。

現在可以通過使用Swipe手勢來導航上一個/下一個 視圖。

& 在Tabs間Swipe

如果使用Action Bar tabs,使用Swipe在不同的視圖間進行切換。

 

Selection


 

Android 3.0 開始,長按手勢的作用全局性的變為了數據選擇。這影響你處理多選擇和上下文Actions的方式。

& 變化

之前長按的效果是顯示上下文Actions,在3.0之后,用作選擇數據,把上下文Action和selection management function 結合成一個新的元素,叫作CAB(contextual action bar)

& 使用 CAB

這個CAB是一個暫時性出現在你的應用當前的Action Bar位置的一個東西。出現在長按一個item之后。在這里,用戶可以進行下列操作:

  • 通過點擊來選擇其他的item
  • 從CAB里觸發一個Action,並應用到所有高亮的數據item上。這個CAB自動消失。
  • 通過導航Bar里的back鍵來消除CAB,同時也取消這些已選中的高亮。

& 選擇CAB Actions

 你可以決定在CAB上放哪些Action。可以參考Action Bar pattern指引,來決定哪些item是可以放到CAB里的。

& 動態調整CAB Actions

大多數情況下,當用戶選擇了很多的item之后,CAB需要有一個動態的變化。

Action Bar


Action Bar是一個很重要的元素。主要目的如下:

  • 把重要的Action放到明顯的地方,並且很容易可以想到去哪里訪問
  • 支持統一的導航並在應用里切換
  • 通過提供一個放置多余的Action的Action來減少混亂

要注意,Action Bar是一個重要的元素。

& 通常的安排

一般是分成四個部分

  1. App Icon:重要:如果當前的界面不是最頂層的一個,那么在App Icon的左邊應該加一個向左的箭頭,來進行返回的導航
  2. View Controller:如果你的應用要在不同的View中顯示數據,這部分允許用戶來切換View。一般的作法是用一個drop-down菜單或者是Tab Controls。如果只有一個界面,那這里可以顯示App Title或者更長點的商標信息
  3. Action Buttons:把你應用當中最重要的Action放在這個地方。不適合在這里的Actions都放到Action overflow。
  4. Action overflow:把不常用的Actions移到Action overflow。

& 適應旋轉以及不同尺寸的屏幕

寫一個應用時一個重要的UI 問題就是如何適應屏幕旋轉和不同尺寸的屏幕。你可以通過使用split action bars來適應這種變化,就是把action bar 內容分配到不同的bars里,這些可以位於main action之下,或者在屏幕最下。

& Split Action Bars布局考慮

如果是這樣的布局,一般分成三個部分:

  1. Main Action Bar
  2. Top Bar
  3. Bottom Bar

如果用戶可以回到上層界面,Main action 要包括一個小的箭頭

如果允許用戶快速在應用的界面間切換,可以在top bar里使用Tabs或spinner

如果要顯示Actions,或者action overflow,使用Bottom bar

 

上下文Action Bars


 

參見上文

 

Action Bar元素


 

Tabs:

如果希望用戶經常在幾個部分間切換,可以使用Tabs。 有兩種Tabs:固定的(fixed)跟可滑動的(scrollable)

Scrollable:經常占據整個Bar的寬度,當前的活動View在中間位置,因此需要在一個專用的Bar里。可以自己水平的scroll,來顯示更多其他的view。使用情況:如果有很多的Views或者你不確定有多少Views,因為可能是動態添加的。Scrollable Tabs應該總是允許用戶通過左右Swipe來切換Views。

Fixed Tabs:固定的Tabs不能被移動,當屏幕朝向變化時,它可能會被移動到Top bar位置去。

Spinners:

在這些情況下使用Spinners,而不是Tabs:

  • 不想放棄豎直屏幕時,給Tab bar安排好的空間
  • 你希望你的用戶不是經常地切換視圖

Action buttons:

要分清楚哪些Action是經常使用的,並根據這個來安排它們的位置。應該顯示最常用的Actions,把其他不是常用的放到overflow里。如果一個Action在當前不被使用,把它隱藏掉,而不是顯示為不能用。

使用FIT表來分辨優先級。如果FIT中有一個適用,就把它放到Action bar,否則就放到Action overflow里。

Action overflow:

把不常用的Action放到這里。這個東西只出現在沒有實體按鍵的手機里。如果有menu實體按鍵的手機,就可以通過點擊menu按來顯示Action icon。

在Action bar里能放多少個圖標,也有一定的要求。參見這部分的guide。

 Sharing data:

任何時候你想分享數據,比如圖片或電影,在你的Action bar里使用share action provider。這個Share action provider是用來加速分享。

總結:

在說干計划分割Action bars的時候,問以下問題:

  • View導航對於這個任務來說,有多重要?如果是很重要的,那么可以使用tabs或spinners
  • 哪些Action需要直接放到Action bar里,哪些要放到action overflow里?使用FIT表來決定
  • 在發生變化時,哪些元素要發生變化。如何跟着變化走。

 

Notifications


 

提示系統允許你的應用給用戶提示重要的事件,比如信息之類的東西。但是太多的,不重要的信息會打擾用戶,所以要慎重地使用。

& 何時使用:

創建一個用戶喜歡的應用,要意識到,用戶的注意力和焦點是一個應該受保護的資源。也就是不要隨便打斷用戶的注意力。創建一個Notification是一個要小心的事。

Notifications應該被使用在時間敏感事件上,尤其如果這些事件還包括了其他人。比如信息,是時間敏感的,並且包括了其他的人;日歷提醒,也是這樣的。

& 不應該使用:

  • 不是直接對用戶產生效果的信息,或者不是時間敏感的
  • 如果相關的信息界面正在顯示,那也不要使用Notification system,而是用應用里的UI 來提示用戶。
  • 不要在低級別的技術操作上打擾用戶,比如保存或同步信息,或者更新應用之類的。
  • 如果應用自己可以修復錯誤,就不要通過Notification的方式還打斷用戶去提醒他這個錯誤
  • 不要為Service去用Notification,因為用戶無法開始也無法停止它
  • 不要創建多余的提示,僅僅為了顯示你的商標,這樣會疏遠用戶。

& 設計指導:

  • Make it personal:記住要加上icon,這樣用戶才能分別出是哪個應用發出的這個提示
  • 導航到正確的地方:當用戶點擊這個提示時,要跳到這條提示所對應的正確的地方。要能顯示相關的數據。如果這條提示是一個堆(stack),那么就跳到detail界面的上一層
  • 為時間敏感事件添加Timestamp:系統默認地會在右上角顯示一個時間,考慮這個時間戳對你的內容是否有價值。如果沒價值,考慮這條信息是否有必要吸引用戶注意力。如果確實有必要,再決定是否顯示這個時間戳。
  • Stack 你的提示:如果有兩個類似的提示過來,注意不要把它們一個個列出來,而是在右下角用一個數字表示堆疊。這樣子的話,在點擊后,跳到的界面可能跟單獨的情況有所不同。
  • 自我清除:有些信息只是在一個特定的時間點才會有意義,過了這個點之后就沒意義了,所以最好能夠自我清除掉。
  • 在你的消息里提供一些小的信息:可以提供一個小的信息,然后自動隱藏。
  • 讓消息提示變得可選:在你應用的設置里加一個消息的設置,讓用戶可以決定是否有消息提示。
  • 使用易區別的icons

& 交互:

一般的提示可以通過左右Swipe來取消掉,但是進行中的(ongoing)提示不能被取消,如音樂播放或者下載之類的操作。

 

Settings


& 流程和結構:

  • 在Action Overflow里提供對Settings的訪問。從來都不要把它單獨放到Action Bar中,而是把它放到overflow中。位置位於倒數第二個,僅高於“Help”
  • 不要把所有的設置都放到Settings里:太多的選項也會造成混亂。要根據一個表來決定是否把一個選擇放到Settings里
  • 如果還是有很多的設置,把相關的湊到一起:在一個部分中,最好只有7(+-)2個的數量選項,如果多於10個,用戶的瀏覽,理解和決定就會有難度。可以把它們分成幾組,通過兩種方法來分組:1. 在一個區間划分下;2. 在一個分割的子屏幕下。
  • 基於數量多少來分割設置的內容:
    1. 7個或更少:不要分割
    2. 8 到10個:把它們分割成1到2個部分(section)。如果有些是單獨的,判斷它們是否是重要的,如果重要,放在最上面;如果不是,放到最下面的“OTHER”。
    3. 11 到15個:跟上面的一樣,但把它們分成2到4個部分
    4. 16個以上:如果有4個或以上相關的內容,把它們聚到一塊

& 設計

  • Checkbox:選擇或沒有選擇上
  • Multiple choice:有多個離散的選擇,但用戶只能選擇其中一個
  • Slider:用於非離散的,連續的值
  • Date/time:用戶需要使用日期
  • 子界面:指引用戶去一個更為復雜的設置界面:如果導航到一個單獨的子界面,使用同樣的標題;如果導航到一串子頁面,標題使用第一步里的名字
  • List 子界面:如果一個設置的內容包含很多相似的選項,用這個。
  • Master on/off switch:為同一類的Settings設置開關。例如wifi開關。如果選擇為off,下面的列表同時消失。
  • Individual on/off switch:跟上面的不同在於,在第一個界面里不能直接開關,點擊進入子界面后,才可以設置。正文部分是對這個設置的說明。
  • Depedency:這個Setting是跟另外的Setting有關的。比如另一個設置被選擇了,這個設置才可以使用。

 

向后兼容


 

用虛擬導航控制的手機,在Action Bar里有一個Button,也就是overflow部分,可以放很多的選項;

實體的機子,用menu鍵來替代overflow這個Button,但彈出來的內容顯示在屏幕底部,而不是在頂部。

遺留下來的問題:如果是為2.3開發的應用,則會在導航Bar的最右邊出一個action overflow,用來顯示menu。

 

Pure Android


 

不要跟其他平台上設計得一樣。

& 不要模仿其他平台上的元素:

不要把其他平台上的UI元素以及它們的行為拿過來使用。如果想要息定義UI元素,要根據自己的產品來做,而不要根據一個不同的平台來做。

& 不要搬抄其他平台特殊的圖標:

當你把一個應用從其他平台移植過來的時候,注意要准備一份Android上的圖標副本

& 不要使用底部Tab bars:

有些平台使用底部的Tab bars來切換界面。在Android里,切換界面的Tab bars一般在頂部,而在底部是用來顯示split action bar 。

& 不要硬編碼鏈接到其他應用:

如果要使用其他的應用,不要在代碼里寫死要用哪個其他的應用,而是用Android intent API來打開一個選擇頁面,讓用戶選擇用哪個相關應用來處理這個事件。如果是分享的話,考慮使用Action bar里的Share Action Provider 來處理分享事件。

& 不要在Action bars里使用帶標簽的返回按鈕:

不要像IOS里的返回那樣。

& 不要在item里使用向右箭頭

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM