建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
[核心提示] 這一次，我們就設(shè)計(jì)錯(cuò)誤的話(huà)題展開(kāi)，指出一些大家在安卓開(kāi)發(fā)領(lǐng)域設(shè)計(jì)應(yīng)用導(dǎo)航時(shí)經(jīng)常被犯下的錯(cuò)誤以便更好的避免他們。
成都創(chuàng)新互聯(lián)公司主營(yíng)自貢網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,自貢h5小程序開(kāi)發(fā)搭建,自貢網(wǎng)站營(yíng)銷(xiāo)推廣歡迎自貢等地區(qū)企業(yè)咨詢(xún)
大家好，這里是 2014 年***期正式的 ADiA 教程。在上一次的設(shè)計(jì)錯(cuò)誤文章里，我們已經(jīng)簡(jiǎn)略的提過(guò)了一下導(dǎo)航設(shè)計(jì)上的錯(cuò)誤，這一次，我們就這個(gè)話(huà)題展開(kāi)，指出一些大家在設(shè)計(jì)應(yīng)用導(dǎo)航時(shí)經(jīng)常被犯下的錯(cuò)誤以便更好的避免他們。
十大導(dǎo)航設(shè)計(jì)”反模式”，Android 開(kāi)發(fā)者聯(lián)系團(tuán)隊(duì)為你用心呈現(xiàn)~ 希望大家看 (乖) 得 (乖) 開(kāi) (中) 心 (槍)~
1. 將導(dǎo)航項(xiàng)放在 Action Overflow 里
我應(yīng)該已經(jīng)不止一次在各種 App 上看到有人把導(dǎo)航項(xiàng)放在 Action Overflow 中了。經(jīng)常被放進(jìn) Action Overflow 的導(dǎo)航有"主頁(yè)"，"商店"，"我的信息 (微信，twitter 中槍)"，甚至一些分類(lèi)。但是 Action Overflow 真的不是導(dǎo)航項(xiàng)該去的地方，別忘了這地方是 Action Overflow，是用來(lái)放操作的。還有另一個(gè)很重要的原因是，在很多有著 Menu 按鈕的手機(jī)上，應(yīng)用中是不會(huì)顯示 Action Overflow 的，他們得被 Menu 鍵喚出，可見(jiàn)性太低了，而且關(guān)于 Menu 鍵還有一大堆問(wèn)題 (這里就不展開(kāi)了)。
還有一點(diǎn)很重要的就是，在現(xiàn)在的 Android 上，界面 UI 已經(jīng)逐漸形成了一個(gè)規(guī)律 —— 導(dǎo)航靠左，操作靠右。如果你硬是要把導(dǎo)航放進(jìn) Action Overflow，無(wú)形中也會(huì)違背這個(gè)規(guī)律。
2.錯(cuò)誤的導(dǎo)航層級(jí)
這個(gè)錯(cuò)誤也是頗為常見(jiàn)的。在 Android 中我們有很多常見(jiàn)的導(dǎo)航方式，比如 Tabs，Spinners 和 Drawer。這些導(dǎo)航方式當(dāng)然是可以搭配著使用的，但是當(dāng)你搭配使用這些導(dǎo)航方式的時(shí)候，請(qǐng)注意他們之間的層級(jí)關(guān)系。當(dāng)你規(guī)劃你的導(dǎo)航層級(jí)的時(shí)候，一般 情況下是要構(gòu)造一個(gè)樹(shù)狀結(jié)構(gòu)，在一個(gè)層級(jí)下有其他的子層級(jí)，以此類(lèi)推。在 Android 中，不同層級(jí)一般對(duì)應(yīng)著不同的導(dǎo)航方式。而錯(cuò)誤的用法是，比如上圖中那樣的，用 Tab 作為***導(dǎo)航層，Spinners 作為次層，而 Drawer 作為最次層。在 Android 上，這三個(gè)導(dǎo)航方式對(duì)應(yīng)的層級(jí)是遵循著比較嚴(yán)格的規(guī)定的。
上圖呢才是一般情況下的正確做法。通常情況下，Drawer (如果有的話(huà)) 代表著***的導(dǎo)航層級(jí)，然后則是 Spinners，再次是 Tabs。如果你有超過(guò)三級(jí)的導(dǎo)航層級(jí)，我們強(qiáng)烈建議你把最頂端的幾個(gè)都放在 Drawer 中 (只有 Drawer 能容納超過(guò)一個(gè)導(dǎo)航層級(jí)，因?yàn)?Drawer 中的項(xiàng)目能夠以合理的方式展開(kāi))，然后把剩下兩個(gè)層級(jí)分配各 Spinners 和 Tabs。當(dāng)然，實(shí)際上作為一個(gè)移動(dòng)應(yīng)用，簡(jiǎn)化層級(jí)也是非常重要的，我們強(qiáng)烈的不推薦你在應(yīng)用中采用非常深的導(dǎo)航層級(jí)，這只會(huì)讓用戶(hù)感到困惑。
還有一點(diǎn)需要注意的是，雖然在上面的示意圖中 Spinner 和 Drawer 共存而且看起來(lái) Spinner 在 Action Bar 上 (Drawer 實(shí)際上在 Action Bar 之下)，但是在實(shí)際應(yīng)用中，當(dāng)用戶(hù)劃出 Drawer 的時(shí)候，你應(yīng)該讓 Drawer 漸變成另一副模樣 —— 只留下在應(yīng)用中全局通用的操作，比如搜索，隱去其他的東西，比如 Spinners，換成 App 的名字。這樣的話(huà)就不會(huì)產(chǎn)生導(dǎo)航層級(jí)上的困惑了。
另外，關(guān)于 Drawer，我們還有另一期專(zhuān)門(mén)介紹它的 ADiA: Android Design 趨勢(shì)——Navigation Drawer。
3.不能滑動(dòng)切換的 Tabs。
在 Android 中，Tab 幾乎是綁定了橫向滑動(dòng)的操作。用戶(hù)對(duì) Tabs 的期望就是他們可以被滑動(dòng)。如果你在頁(yè)面上采用了 paginate (ViewPager) 內(nèi)容，那么內(nèi)容上的滑動(dòng)操作就會(huì)和 Tabs 的全局滑動(dòng)產(chǎn)生混淆。當(dāng)然，如果頁(yè)面中只有一小部分是可以滑動(dòng)的內(nèi)容 —— 比如一個(gè)非全屏的圖片瀏覽，那么這么做是完全沒(méi)問(wèn)題的，只要不與 Tabs 本身的滑動(dòng)手勢(shì)沖突即可。
正確的做法很簡(jiǎn)單，只要把橫向的 ViewPager 給改為縱向就行了。當(dāng)然，如果你有其他的解決方案也很好，只要規(guī)避與導(dǎo)航的手勢(shì)沖突就可以了。
4. 深層/頑固的 Tabs
什么叫做"深層"的 Tabs? 要解釋深層，一般來(lái)講我們用"淺層"來(lái)做對(duì)比。在 Android 上，Tabs 應(yīng)該是淺的。你用 Tabs 來(lái)作為試圖更變，或者分類(lèi)切換之用，而不應(yīng)該在 Tabs 之內(nèi)再有層級(jí)和歷史。通常情況下，Tabs 只應(yīng)該在導(dǎo)航界面出現(xiàn)。在上圖的例子中，用戶(hù)點(diǎn)擊一個(gè)項(xiàng)目，理應(yīng)打開(kāi)一個(gè)全新的頁(yè)面，而不是刷新 Tabs 下的內(nèi)容。這種持續(xù)出現(xiàn)的 Tab 就是我們所說(shuō)的深層 Tabs，或者說(shuō)在 Tabs 之內(nèi)有歷史。
之所以不這么做的原因是，當(dāng)你離開(kāi)了這個(gè) Tab，比如說(shuō)滑動(dòng)到了另一個(gè) Tab 上的時(shí)候，你就把這個(gè) Tab 置于了一種尷尬的境地 —— 現(xiàn)在這個(gè) Tab (對(duì)于用戶(hù)而言不可見(jiàn)) 應(yīng)該顯示什么呢? 當(dāng)用戶(hù)從另一個(gè) Tab 回到這個(gè) Tab (無(wú)論是點(diǎn)擊還是滑動(dòng)) 時(shí)，他應(yīng)該保持原來(lái)的樣子 (顯示內(nèi)容) 呢，還是顯示列表? 在這種情況下，用戶(hù)會(huì)很容易的感到困惑。為了避免這種尷尬，我們建議 Tabs ***做得淺一些。
另外，若你的 Tabs 堅(jiān)持不變的話(huà)，很大程度會(huì)影響到 Back 的作用。當(dāng)用戶(hù)切換到不同的 Tab 并且在這個(gè) Tab 中做了一些操作之后，Back 的作用就會(huì)變得不甚明確。如果你非得在同一個(gè)視圖內(nèi)顯示新內(nèi)容，那么我們建議你采用 Drawer，Drawer 才是為全局內(nèi)容切換而生的。
上圖顯示的才是正確的做法，打開(kāi)一個(gè)新的，沒(méi)有 Tabs，有 Up 的界面，而不是繼續(xù)顯示 Tabs。
5. 溯回 (反向遍歷) Tabs
前面說(shuō)的 Tabs 不應(yīng)該深層，同樣也提到了 Tabs 不應(yīng)該包含歷史。什么叫做不因該包含歷史呢? 就是指，你在 Tabs 上的操作不能被 Back 溯回。同一個(gè)導(dǎo)航層級(jí)是不應(yīng)該被溯回的。
6.溯回 (反向遍歷) Drawer
和 Tabs 一樣，Drawer 中的導(dǎo)航項(xiàng)也不應(yīng)該被溯回。理由同上。當(dāng)用戶(hù)在不同的導(dǎo)航項(xiàng)中切換時(shí)，你應(yīng)該重置任務(wù)狀態(tài)。在不同的導(dǎo)航項(xiàng)目中切換就像是切換到不同的應(yīng)用中一樣 (比如說(shuō)，在 Google+ 中，Photos Tab 根本就是另一個(gè)應(yīng)用。)。在用戶(hù)按下 Back 的時(shí)候，你應(yīng)該退出應(yīng)用，或者回到應(yīng)用的主界面 —— 這里的主界面是指哪個(gè)自然狀態(tài)下的初始界面，一個(gè)你特別希望用戶(hù) (同時(shí)用戶(hù)也特別期待能夠容易地) 回到的地方。
7. 深層的 Navigation Drawer
前文說(shuō)過(guò)，一個(gè)移動(dòng)應(yīng)用不應(yīng)該有復(fù)雜的結(jié)構(gòu)。如果你需要特別多的導(dǎo)航層級(jí)，那么說(shuō)明你真正應(yīng)該做的其實(shí)是簡(jiǎn)化你的應(yīng)用結(jié)構(gòu)。Drawer 存在的意義是提供一個(gè)穩(wěn)定的導(dǎo)航樞紐，讓用戶(hù)不需要記住自己在什么地方，他只要打開(kāi) Drawer 就能自然的明白一切。但是，如果在 Drawer 里面彈出了一個(gè)次級(jí) Drawer 會(huì)把很多人逼瘋。
Drawer 雖然有能力承載多個(gè)導(dǎo)航層級(jí)，但是正確的做法不是這樣的。
當(dāng)你需要在 Drawer 中放入多個(gè)導(dǎo)航層級(jí)的時(shí)候，不應(yīng)該以新彈出一個(gè) Drawer 的方式，而是應(yīng)該以展開(kāi)/折疊的方式呈現(xiàn)這個(gè)子層級(jí)。展開(kāi)和折疊并不會(huì)造成整個(gè)控件的劇變，同時(shí)能展示給用戶(hù)少多一些的項(xiàng)目。關(guān)于 Drawer 上的導(dǎo)航項(xiàng)以及觸摸區(qū)域的設(shè)置，在 Android Design 中另有提及。
如果你的導(dǎo)航層級(jí)真的很深，你可以單獨(dú)做出一個(gè)次級(jí)導(dǎo)航頁(yè) 展示所有的導(dǎo)航項(xiàng)目。比如說(shuō)，在 Play Music 中，曲庫(kù)下的 Tabs (藝人，專(zhuān)輯，風(fēng)格，曲目) 其實(shí)完全可以做成 Drawer 中的次級(jí)導(dǎo)航項(xiàng)，但是把它們分散到 Tabs 中能夠更好的優(yōu)化導(dǎo)航。(上圖這樣則是有點(diǎn)類(lèi)似腹肌式的導(dǎo)航方式。當(dāng)然，***不要只是在上面寫(xiě)著文字，可以往里面添加點(diǎn)圖片啊，內(nèi)容預(yù)覽什么的)
8. 錯(cuò)誤的 Drawer 轉(zhuǎn)場(chǎng)
我們?cè)谶@里說(shuō)轉(zhuǎn)場(chǎng)的時(shí)候，是意味著過(guò)渡動(dòng)畫(huà)和一個(gè)有著 Drawer 的界面和沒(méi)有 Drawer 的界面之間的切換。下面兩個(gè)錯(cuò)誤都和這個(gè)轉(zhuǎn)場(chǎng)有關(guān)。
當(dāng)用戶(hù)打開(kāi) Drawer，按下其中一個(gè)項(xiàng)目之后，他不應(yīng)該被帶去一個(gè)有著 Up 箭頭的新界面。所有在 Drawer 中呈現(xiàn)的導(dǎo)航項(xiàng)，都應(yīng)該在其界面中顯示 Drawer 指示 (比如說(shuō)，"漢堡")。而且，當(dāng)用戶(hù)通過(guò) Drawer 從其中一個(gè)導(dǎo)航項(xiàng)進(jìn)入另一個(gè)導(dǎo)航項(xiàng)，他不應(yīng)該看到標(biāo)準(zhǔn)的視圖切換動(dòng)畫(huà) (漸變 + 放大，常見(jiàn)于進(jìn)入新界面/新活動(dòng)時(shí))，而應(yīng)該是一個(gè)細(xì)致而迅速的漸隱 + 漸顯動(dòng)畫(huà)，伴隨著 Drawer 的關(guān)閉而完成。同樣的動(dòng)畫(huà)也應(yīng)該應(yīng)用在 Action Bar 的轉(zhuǎn)變上。還有一個(gè)對(duì)于開(kāi)發(fā)者而言常見(jiàn)的討論是，應(yīng)該用 Activity 還是 Fragment? 這個(gè)問(wèn)題并沒(méi)有標(biāo)準(zhǔn)答案，也很難回答。一般來(lái)說(shuō)還是視情況而定 —— 它實(shí)現(xiàn)起來(lái)難度如何? 對(duì)于我的應(yīng)用而言靠譜嗎? 如果你有什么建議的話(huà)當(dāng)然歡迎評(píng)論。
上圖展示的就是正確的做法，在 Action Bar 上顯示 Drawer Indicator。
9. 不顯示 Up 箭頭
上文說(shuō)過(guò)，所有出現(xiàn)在 Drawer 中的導(dǎo)航頁(yè)面都應(yīng)該顯示 Drawer 指示，這點(diǎn)反過(guò)來(lái)也是一樣成立的 —— 沒(méi)有顯示在 Drawer 中的東西就不應(yīng)該顯示 Drawer 指示。比如在上圖，當(dāng)用戶(hù)進(jìn)入某個(gè)內(nèi)容的時(shí)候，Drawer 指示依然顯示。實(shí)際上，這個(gè)內(nèi)容頁(yè)已經(jīng)不是導(dǎo)航頁(yè)了，也沒(méi)有在 Drawer 中顯示，這里是應(yīng)用更深的層級(jí)，已經(jīng)不歸 Drawer 管了。這里應(yīng)該顯示的是 Up。
在顯示 Up 同時(shí)，你也可以允許用戶(hù)以邊緣滑動(dòng)的方式喚出 Drawer。你不需要總是顯示 Drawer 指示來(lái)告訴用戶(hù)可以喚出 Drawer，因?yàn)樵诖渭?jí)界面中喚出 Drawer 是某種意義上的"進(jìn)階用戶(hù)操作"。有人發(fā)現(xiàn)了，那很好，沒(méi)人發(fā)現(xiàn)，不要緊，通過(guò) Up 他們依然能夠找回 Drawer。另外，你可以看看 Google Play Newsstand 是如何處理在沒(méi)有 Drawer 指示的地方處理 Drawer 的 —— 漸變動(dòng)畫(huà)真的非常重要。
10.右側(cè)導(dǎo)航
前文說(shuō)過(guò)，Android 上有個(gè)規(guī)律就是"導(dǎo)航靠左，操作靠右"。對(duì)于從左向右閱讀的用戶(hù)而言，左側(cè)導(dǎo)航項(xiàng)能夠更好的強(qiáng)調(diào)導(dǎo)航層級(jí)。另外，由于 Spinners 只能出現(xiàn)在左側(cè)，Tabs 也往往將最左側(cè)的一個(gè)設(shè)為默認(rèn)，右側(cè)的 Drawer 與這些操作距離過(guò)遠(yuǎn)。而且，Drawer 指示放在左邊，操作的時(shí)候向左回縮，如果在右側(cè)使用 Drawer 的話(huà)就會(huì)遇到各種各樣的視覺(jué)隱喻沖突。
正確的做法就是如上圖所示。當(dāng)然，如果在從右向左的語(yǔ)言環(huán)境下 (比如說(shuō)，希伯來(lái)文什么的，不過(guò)我覺(jué)得我們國(guó)家的開(kāi)發(fā)者應(yīng)該不怎么會(huì)去做希伯來(lái)語(yǔ)適配吧……)，那當(dāng)然是應(yīng)該反轉(zhuǎn)這些東西的位置。
以上就是本期 ADiA 介紹的全部十個(gè)導(dǎo)航設(shè)計(jì)錯(cuò)誤。如果你有更多的常見(jiàn)/不常見(jiàn)錯(cuò)誤，或者對(duì)于上面提出的錯(cuò)誤有更好的解決方案，當(dāng)然歡迎評(píng)論。
***，一如既往的感謝 +Roman Nurik 和 +Nick Butcher 的 Android Design in Action 活動(dòng)。
原文地址：http://www.geekpark.net/read/view/199244
文章題目：Android應(yīng)用中十大導(dǎo)航設(shè)計(jì)錯(cuò)誤
本文來(lái)源：http://m.fisionsoft.com.cn/article/dpisjcd.html
