【Android應用開發技術：使用者介面】介面導航設計

標籤：

郭孝星
微博：郭孝星的新浪微博
郵箱：[email protected]
部落格：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

設計開發App的起初步驟之一就是決定使用者能夠在App上看到什麼和做什麼，一旦我們知道了使用者在App上和哪種內容互動，我們就可以去設計使用者在App上的不同內容塊之間的切換、進入和回退。

一 多視窗布局

小尺寸螢幕只適合每次展示單個縱向內容視窗，一個列表或清單項目的具體資訊，這種裝置上，介面通常對應於資訊層次的某一級上，例如：類別-列表-詳情。

大尺寸螢幕通常會有更多的可用介面空間，並且它們能夠展示多個內容視窗，我們通常也利用多視窗來避免介面留下過多的空白和一些比較尷尬的互動（例如：為了填補空白，設計了一個很長或很寬的按鈕）。

下面來示範一下把UI設計遷移到大尺寸螢幕時經常出現的問題：

舉例1

問題描述

大橫屏使用單視窗導致空白和過長行

解決方案

採用橫屏多視窗布局，這樣可以產生更好的視覺平衡、效用和可讀性。

當決定好了區分使用單視窗布局和多視窗布局的螢幕大小基準線後，我們就可以為不同螢幕大小區間（例如：large/xlarge ）或最低螢幕寬度（例如：sw600dp）提供不同的布局了。
單一介面被實現為Activity的子類, 單獨的內容視窗則可實現為Fragment的子類。這樣最大化了跨越不同結構因素和不同螢幕內容的代碼複用。

二 為不同平板方向設計

在開始在螢幕上排布UI元件，多視窗布局在橫屏時有很好的表現，因為有大量可用的橫向空間可用，但是在豎屏時橫向空間被限制，因此需要為豎屏單獨設定一個布局。

2.1 伸縮

伸縮每個視窗的寬度來適應豎屏下呈現的內容，視窗可以固定寬度或者占可用介面寬度的一定比例，如所示：

2.2 展開/摺疊

在豎屏中摺疊左側視窗的內容，當遇到總/分視窗中左側視窗包含易摺疊的清單項目時，這個策略很有效，如所示：

舉例

以一個即時聊天應用為例。橫屏中，左側列表包含聊天連絡人的照片，名稱和線上狀態。在豎屏中，將以一個隱藏名稱，只顯示照片和線上狀態的提示表徵圖的方式來摺疊橫向空間。也可以選擇性的提供展開控制，它允許使用者展開左側視窗或相反的操作。

2.3 顯示/隱藏

左側視窗在豎屏模式下完全隱藏，為了保證介面功能的等價性，左側視窗功能必須可見，例如：在ActionBar中添加一個按鈕來展示左側視窗，

2.4 堆疊

在豎屏時垂直地堆放橫向排布的視窗，當視窗不是簡單的文本列表或者有多個內容模組與基本內容視窗同時運行時，這個策略很有效。

三 組合介面3.1 向下導航

顯示層級導航是一種查看應用整體畫面的方式。

-向下導航：允許使用者進入子介面。

橫嚮導航

橫嚮導航允許使用者訪問同級介面。

同級介面有兩種，如下所示：

• 容器關聯：介面展示由父介面放入同個容器裡的那些條目。
• 區塊關聯：介面展示父介面不同部分的資訊。

Dashboard模式

Dashboard模式是一種一般以Button為主來擷取不同應用劃分模組的模式。一個Dashboard就是個大表徵圖Button表格，它表示了父介面絕大部分內容。這個表格通常是2、3行或列，取決於App的頂層劃分。此模式展示全部區塊的視覺效果非常豐富。巨大的觸摸控制項也讓UI特別好使。當每個區塊都同等重要時，Dashboard模式最好用。但是，這個模式在大屏上效果不佳，他讓使用者直接擷取 App 內容時多走了一步彎路。

Grid模式

垂直滑動

List模式

水平滑動

Stack模式

卡片

Tab模式

Tab模式允許組合約級介面，該模式可以嵌入原本可能成為另一個介面的子介面內容，Tab模式適合用在小量的區塊關聯介面。

Tab模式的優點：

• 只有一個既選的活動Tab，使用者能立即從介面擷取tab的內容。
• 使用者可在相關介面內快速導航，不用重新訪問父介面。

注意：

• 當選擇時Tab被跳過，Tab應該保持原狀，只有指定內容地區發生改變，並且Tab任何時候都可用。
• Tab切換不能算作曆史。例如：如果使用者從Tab A切換到Tab B，按Back按鈕不該重選Tab A。Tab通常水平排布，可是有時其他tab展現形式，例如Action Bar的下拉式功能表，也是可以的。
• tab應該在介面頂端和內容對應。
• 當切換Tab時，保證立即切換很重要。不要載入時彈個確認對話方塊來阻塞tab的訪問。

Swipe View模式

Swipe View模式即水平分頁模式，該模式在容器關聯的同級介面上最好用，例如：類別列表技術、金融或新聞等。該模式也允許組合介面，即父介面在布局內嵌入子介面的內容。

在水平分頁UI中，一次只展示一個子介面，每個子介面稱為頁。使用者能通過觸控螢幕幕然後按想要訪問相鄰頁面的方向拖拽導航到同級介面。為補充這種手勢互動通常由另一種UI元件提示當前頁和可訪問頁。這樣能協助使用者發覺內容並且也提供了更多的上下文環境資訊給使用者。當為區塊關聯的同級模組使用這種模式的水平導航時，這個做法很有必要。這些提示元件的方式如下所示：

• Mark
• Scrolling Label
• Tab

時間導航

時間導航，或者說在曆史的介面間導航，在Android系統中由來已久。不論其他狀態如何，所有Android使用者都期望Back按鈕能帶他們回到之前的介面。曆史介面集全都以使用者的Launcher應用為基礎（電話的 “Home” 鍵）。也就是說，按下Back鍵足夠多次數後你應該回到 Launcher，之後Back鍵不做任何事情。

舉例

從 Contacts（連絡人）App中進入電子郵件 app 然後按 Back 鍵的行為，如所示：

應用自身通常不必考慮去管理Back按鈕。系統自己自動處理task和back stack回退棧），或者叫曆史介面列表。Back按鈕預設反向訪問介面列表，然後當按鈕被按下時從列表中移除當前介面。

但是總是有一些我們可能需要重寫Back行為的例子。比如，螢幕包含一個嵌入的網頁瀏覽器，在這個瀏覽器中你的使用者可和頁面元件進行互動來在網頁間導航。我們可能希望當使用者按下裝置的 Back 鍵時觸發嵌入瀏覽器的預設back操作。當到達了瀏覽器內部曆史的起始點，就應該遵從系統Back按鈕的預設行為了。

向上導航

Android 3.0引入了Up記號，點擊Up，使用者將被帶入到結構中的父介面。這個導航操作通常就是進入前一個介面（就像之前 Back 按鈕討論中描述的一樣），但是並不是永遠都這樣。因此，開發人員必須保證Up對於每個介面都會導航到某個既定的父親介面。

某些情況下，Up適合執行某個行為而非導航到一個父親節點。

以Android 3.0平板上的Gmail應用為例。當查看一封郵件的對話時把裝置平放，對話列表和對話詳情將並排顯示。這是一種之前課程中的父、子介面組合。然而，當豎屏查看郵件對話時，只有對話詳情被顯示。Up按鈕被用來使父視窗滑入螢幕顯示。當左側視窗可見時再按一次Up按鈕，單個對話便回到全屏的對話列表中。

舉例

從連絡人App中進入電子郵件App然後按Up導航的行為，如下所示：

著作權聲明：當我們認真的去做一件事的時候，就能發現其中的無窮樂趣，豐富多彩的技術宛如路上的風景，邊走邊欣賞。

【Android應用開發技術：使用者介面】介面導航設計