編寫:XizhiXu - 原文:http://developer.android.com/training/design-navigation/descendant-lateral.html
一種提供查看應(yīng)用整體界面結(jié)構(gòu)的方式就是顯示層級導(dǎo)航。這節(jié)課我們討論 向下導(dǎo)航,它允許用戶進(jìn)入子界面。我們還討論 橫向 導(dǎo)航,它允許用戶訪問同級界面。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-desc.png" alt="app-navigation-descendant-lateral-desc" />
Figure 1. 向下和橫向?qū)Ш?/p>
有兩種同級界面:容器關(guān)聯(lián)和區(qū)塊關(guān)聯(lián)界面。容器關(guān)聯(lián)(Collection-related) 界面展示由父界面放入同個容器里地那些條目。區(qū)塊關(guān)聯(lián)(Section-related) 界面展示父界面不同部分的信息,例如:一個部分可能展示某對象的文字信息,可是另一個部分則提供對象地理位置的地圖。一個父界面的區(qū)塊關(guān)聯(lián)界面數(shù)量通常較少。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-children.png" alt="app-navigation-descendant-lateral-children" />
Figure 2. 容器關(guān)聯(lián)子界面和區(qū)塊關(guān)聯(lián)子界面。
向下和橫向?qū)Ш娇捎肔ist(列表),Tab(標(biāo)簽)或者其他 UI 模式來實現(xiàn)。 UI 模式, 與軟件設(shè)計模式很類似,是重復(fù)交互設(shè)計問題的一般化解決方案。下幾章,我們將探究一些常用的橫向?qū)Ш侥J健?/p>
Button設(shè)計
設(shè)計指南請閱讀 Android 設(shè)計文檔的Button指導(dǎo)
對于區(qū)塊關(guān)聯(lián)的界面,最直接和熟悉的導(dǎo)航界面就是提供可觸或鍵盤可得焦點的控件。例如,Button,固定大小的 List View 或 文本鏈接,雖然后者不是一個觸屏導(dǎo)航的理想 UI 元素。一旦點選了這些控件,子界面被打開,完全替代當(dāng)前上下文環(huán)境(屏幕)。Button或其他簡單地控件很少被用來呈現(xiàn)容器中的項目。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-buttons.png" alt="app-navigation-descendant-lateral-buttons" />
Figure 3. Button導(dǎo)航模式例子和對應(yīng)界面圖。Dashboard 模式見下文。
Dashboard(操作面板)模式是一種一般以Button為主來獲取不同應(yīng)用劃分模塊的模式。一個dashboard就是個大圖標(biāo)Button表格,它表示了父界面絕大部分內(nèi)容。這個表格通常是2、3行或列,取決于 App 的頂層劃分。此模式展示全部區(qū)塊的視覺效果非常豐富。巨大的觸摸控件也讓 UI 特別好使。當(dāng)每個區(qū)塊都同等重要時,Dashboard模式最好用。然而,這個模式在大屏上效果不佳,他讓用戶直接獲取 App 內(nèi)容時多走了一步彎路。
還有更多套用了各種其他 UI 模式來提升內(nèi)容即得性和獨特的展示效果,但仍保持著直觀特點的高級 UI 模式。
List 和 Grid List 設(shè)計
設(shè)計指南請閱讀 Android 設(shè)計文檔的Lists和Grid Lists指導(dǎo)。
對于容器關(guān)聯(lián)的界面,特別是文字信息,垂直滑動列表通常是最直接最熟悉的做法。對于視覺更豐富的內(nèi)容(例如,圖片,視頻),可用垂直滑動的 Grid,水平滾動的 List(有時被叫做 Carousel),或 Stack(有時叫做卡片,Card)來代替。這些 UI 元素通常用在呈現(xiàn)容器內(nèi)的條目,或大量子界面最好,而不是零星的毫無關(guān)聯(lián)的同級子界面。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-lists.png" alt="app-navigation-descendant-lateral-lists" />
Figure 4. 控件例子和對應(yīng)界面圖
這個模式還有些問題。深層列表導(dǎo)航常常叫 drill-down(鉆井)列表導(dǎo)航,它的list層層嵌套。這種導(dǎo)航笨拙低效。獲得某塊內(nèi)容需要點擊多次,帶給用戶很差的體驗,特別是活躍用戶。
使用縱向list也可能帶來尷尬的用戶交互,并且如果list條目簡單地的拉伸話也可能用不好大屏空白。解決方法就是提供額外的信息,例如用文字匯總填充那些可用的水平空間。或者在左右添加個視窗。
Tab 設(shè)計
設(shè)計指南請閱讀 Android 設(shè)計文檔的Tab指導(dǎo)
Tab是非常流行的橫向?qū)Ш健_@個模式允許組合同級界面,就是說tab可嵌入原本可能成為另一個界面的子界面內(nèi)容。Tab適合用在小量的區(qū)塊關(guān)聯(lián)界面。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-tabs.png" alt="app-navigation-descendant-lateral-tabs" />
Figure 5. 手機(jī)和平板導(dǎo)航例子和對應(yīng)界面圖
幾個使用Tab時的最佳做法。Tab在關(guān)聯(lián)界面種應(yīng)該一直存在,只有指定內(nèi)容區(qū)域發(fā)生改變,并且tab提示在任何時候都可用。此外,tab切換不能算作歷史。例如,如果用戶從 Tab A 切換到 Tab B,按 Back 按鈕(詳情看下節(jié))不該重選 Tab A。Tab通常水平排布,可是有時其他tab展現(xiàn)形式,例如Action bar(詳見Android 設(shè)計的模式章節(jié))的下拉菜單,也是可以的。最后,最重要的是,tab應(yīng)該在界面頂端和內(nèi)容對應(yīng)。
tab導(dǎo)航相對于list和button導(dǎo)航,有很多即得的優(yōu)點:
既然只有一個初始時既選的活動tab,用戶能立即從界面獲取tab的內(nèi)容。
注意: 當(dāng)切換Tab時,保證立即切換很重要。不要加載時彈個確認(rèn)對話框來阻塞tab的訪問。
導(dǎo)致這個模式被批評常見的原因就是必須從展示內(nèi)容的屏幕空間分一些給tab提示欄。但是結(jié)果還能接受,權(quán)衡一般都向使用此模式的方向傾斜。你可以隨意個性化你的tab提示欄,加點文字或圖標(biāo)什么的讓縱向空間合理利用。但是調(diào)整tab寬度時,請確保tab夠大到能讓人無誤點擊。
Swipe View 設(shè)計
設(shè)計指南請閱讀 Android 設(shè)計文檔的Swipe View指導(dǎo)
另一種橫向?qū)Ш降哪J骄褪撬椒猪?,也叫?Swipe View。這個模式在容器關(guān)聯(lián)的同級界面上最好用,例如類別列表(世界,金融,技術(shù)和健康新聞)。就像Tab,這個模式也允許組合界面,這樣父界面就能在布局內(nèi)嵌入子界面的內(nèi)容。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-paging.png" alt="app-navigation-descendant-lateral-paging" />
Figure 6. 水平分頁導(dǎo)航例子和對應(yīng)界面圖
在水平分頁 UI 中,一次只展示一個子界面(這兒叫頁,page)。用戶能通過觸摸屏幕然后按想要訪問相鄰頁面的方向拖拽導(dǎo)航到同級界面。為補(bǔ)充這種手勢交互通常由另一種 UI 元素提示當(dāng)前頁和可訪問頁。這樣能幫助用戶發(fā)覺內(nèi)容并且也提供了更多的上下文環(huán)境信息給用戶。當(dāng)為區(qū)塊關(guān)聯(lián)的同級模塊使用這種模式的水平導(dǎo)航時,這個做法很有必要。這些提示界面元素的例子包括點標(biāo)(tick mark),滑動標(biāo)注(scrolling label)和標(biāo)簽(tab):
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-descendant-lateral-paging-companion.png" alt="app-navigation-descendant-lateral-paging-companion" />
Figure 7. 搭配分頁的 UI 元件。
當(dāng)子界面包含水平平移視圖時(例如地圖)也最好避免使用這種模式,因為這些沖突的交互會威脅你界面的易用性。
此外,對于同級關(guān)聯(lián)界面,如果內(nèi)容類型具有一定相似性而且同級界面數(shù)量較少時,水平分頁再適合不過了。就這一點,這個模式可以和tab一起用。tab放在內(nèi)容上方來最大化界面直觀性。對于容器關(guān)聯(lián)界面,當(dāng)界面間有天然的順序時,水平分頁是最符合直覺的,例如頁面代表連續(xù)的日歷日。對于無窮無盡的數(shù)據(jù),特別是雙向都有內(nèi)容數(shù)據(jù),分頁機(jī)制效果非常棒。
下節(jié)課,我們討論在內(nèi)容層級中允許用戶往上和回退到之前訪問界面的導(dǎo)航的機(jī)制。