APP里導(dǎo)航欄設(shè)計的6個常見錯誤和3個成功的案例分析

3 評論 8438 瀏覽 26 收藏 12 分鐘

本文主要分析了在APP導(dǎo)航欄設(shè)計中常犯的六個錯誤,還分析3個成功的案例。牢記這些將幫助您從別人的錯誤中學(xué)習(xí),吸取經(jīng)驗教訓(xùn)。同時,也可以幫您改善導(dǎo)航設(shè)計,讓用戶在您的應(yīng)用里運(yùn)用自如。

所有應(yīng)用程序都有著屬于它們自己的小世界,它們擁有大山般龐大的各種微觀交互,大海般的汪洋數(shù)據(jù)以及來自各個城市各行各業(yè)的用戶。應(yīng)用程序設(shè)計師有能力構(gòu)建這些世界,并將它們打磨到完美,為用戶提供輕松易用的導(dǎo)航并為用戶敞開歡迎的大門。

每當(dāng)一個用戶啟動應(yīng)用程序時,他們最先要做的就是導(dǎo)航游覽。當(dāng)這條道路走到分岔路口時,還有什么能比給用戶提供一張簡而易懂的地圖更好呢?

在本文中,您將看到用戶體驗UX和UI界面設(shè)計人員所犯的一些最常見的導(dǎo)航錯誤,以及為什么這些錯誤會讓用戶倉皇而逃。牢記這些將幫助您從別人的錯誤中學(xué)習(xí),吸取經(jīng)驗教訓(xùn)。同時,也可以幫您改善導(dǎo)航設(shè)計,讓用戶在您的應(yīng)用里運(yùn)用自如。

一、您的菜單選項太多

您有沒有過這樣的經(jīng)歷,當(dāng)您在一個餐廳坐下來,接過菜單一看,感覺要花整個世紀(jì)才能把它看完?當(dāng)您有太多的選擇的時候,往往很難做出決定,而且會讓您感到困惑和不知所措。

應(yīng)用App也不例外!

如果用戶需要花很長的時間來查看選項列表,很難快速地進(jìn)行選擇,他們多半會直接放棄該菜單。因此,最好讓列表盡量短一些以便用戶快速查閱。

??硕墒谴_保您不會提供太多選擇的絕佳方式。

二、您的菜單沒有足夠的選項

另一方面,有些菜單包含很少的選項,用戶很難理解在哪里可以找到相關(guān)功能。在用戶體驗設(shè)計中爭取簡約主義通常是明智之舉,特別是對于手機(jī)的小屏幕而言存在一個隱藏顯示的問題。如果您為了在一個菜單上,顯示三個圖標(biāo)而嘗試在每個類別下設(shè)置太多選項,用戶還得猜測到底該去哪里選擇。

這樣的話,用戶尋找他們想要的界面或功能可能需要長時間的點(diǎn)擊和嘗試。例如:他們會嘗試猜測“我的朋友列表”是否位于“個人資料”下還是“設(shè)置”下,他們會徘徊于“店鋪位置” 會顯示在“聯(lián)系我們”界面還是“主頁”界面等。

您應(yīng)用的主要目的如果不是用于“發(fā)現(xiàn)”,那恐怕糟糕的是,當(dāng)用戶沒有找到他們想要的東西時,用戶多半就會失去耐心并去嘗試您競爭對手的類似應(yīng)用了。

三、您的菜單不可見

有關(guān)漢堡包圖標(biāo)的文章已經(jīng)寫得很多,有些人認(rèn)為它是應(yīng)用程序設(shè)計的必要組成部分,有些人甚至稱其為應(yīng)用程序圖標(biāo)之王。

其實,問題不在于圖標(biāo)本身,而在于將菜單隱藏在另一個點(diǎn)擊后面的這種做法。更明智的方法是,讓用戶能夠在最少的點(diǎn)擊情況下,訪問到最多的應(yīng)用程序內(nèi)容。

隱藏菜單可能導(dǎo)致用戶迷失方向而無法找到他們想要的東西,當(dāng)用戶無法找到他們想要的菜單或界面時,他們會開始胡亂點(diǎn)擊或滑動,因此很快就會感到煩躁。確定用戶遇到導(dǎo)航錯誤的具體位置(例如:無響應(yīng)的手勢)可能非常具有挑戰(zhàn)性,但觸摸熱圖可以幫助您將問題區(qū)域可視化,為您提供一看就懂的數(shù)據(jù)并助您改善導(dǎo)航功能。

觸摸熱圖的圖片示例由Appsee提供

四、您正試圖重制導(dǎo)航規(guī)則

負(fù)責(zé)界面設(shè)計的人員一般都很有創(chuàng)新精神,但也很容易過分忠于這份熱情。在移動應(yīng)用行業(yè)不斷變革的時代,毫無疑問這樣的創(chuàng)新精神自然會創(chuàng)造出好的結(jié)果。但這有發(fā)揮它的專屬時間和地點(diǎn),而不是發(fā)揮在您的應(yīng)用導(dǎo)航設(shè)計中。

不尋常的導(dǎo)航規(guī)則可能看起來很有創(chuàng)意,但最終對用戶來說并不直觀,這就可能會對應(yīng)用程序的成功產(chǎn)生嚴(yán)重影響。

在移動應(yīng)用的廣泛使用中,大多數(shù)用戶已經(jīng)習(xí)慣于某些地方的某些元素。他們的眼睛會掃到界面底部去尋找底部的導(dǎo)航菜單,或者到左上角看看是否有“退回”按鈕。除非他們非常有冒險精神和耐心,否則他們不會希望像淘金一樣慢慢花時間去尋找他們需要的界面。

最好的方法是為每個圖標(biāo)設(shè)置一個位置,并將每個圖標(biāo)保留在固定的位置。請把那些創(chuàng)意另作它用吧,比如:在應(yīng)用程序的其它功能上去發(fā)揮您的創(chuàng)意特長。

五、您正在使用不熟悉的圖標(biāo)

正如用戶習(xí)慣于傳統(tǒng)的菜單一樣,他們也習(xí)慣于特定的圖標(biāo)設(shè)計。不清楚或不熟悉的圖標(biāo)設(shè)計是最糟糕的UX設(shè)計。比如:使用公司圖標(biāo)而不是心形,星號或書簽圖標(biāo),或者使用任何其它圖標(biāo)而不用相機(jī)圖標(biāo)去表示攝像頭功能等。

這些變化似乎是可以接受的,甚至是具有創(chuàng)造性的,但它們會讓用戶覺得他們像身處異國他鄉(xiāng)一樣不自在。這是導(dǎo)致導(dǎo)航困難的一個非常常見的錯誤。

這篇文章給出了一些可以幫助解決這個圖標(biāo)設(shè)計的技巧,其中還包括5秒規(guī)則:

“如果花費(fèi)超過5秒的時間考慮一個合適的圖標(biāo),則這個圖標(biāo)不可能有效地傳達(dá)您想要它傳達(dá)的含義?!?/p>

六、您沒向用戶顯示他們的當(dāng)前位置

這是移動應(yīng)用設(shè)計中常見的錯誤。正如使用一個導(dǎo)航應(yīng)用程序時,跟著那個指路的小箭頭/小圓點(diǎn)那樣至關(guān)重要,在使用應(yīng)用程序時讓用戶了解其具體位置也非常重要。通過向用戶顯示他們正在查看的界面(例如:突出顯示所選圖標(biāo)),有助于保持導(dǎo)航清晰明了、不復(fù)雜,并避免了使用應(yīng)用程序的一些不必要的猜測。

3個把導(dǎo)航和菜單設(shè)計得很好的應(yīng)用程序

盡管很多應(yīng)用出現(xiàn)了這些常見的錯誤,但還是有一些應(yīng)用程序能夠把導(dǎo)航和菜單設(shè)計得很優(yōu)秀。這里推薦參考這三個應(yīng)用程序:

1. Tastemade

這個美食視頻應(yīng)用,為我們提供了底部導(dǎo)航欄的一個很好的示例。這些圖標(biāo)都很容易識別:房屋式的主頁按鈕、形狀像放大鏡的搜索按鈕、以及經(jīng)典的書簽按鈕和個人資料按鈕。

一般推薦的圖標(biāo)是2-5個按鈕,這里的4個圖標(biāo)顯示出UI設(shè)計師完美地把控了平衡。這些熟悉的符號提供了一種簡單快捷的入門,并確保了返回用戶會把時間著重花在使用應(yīng)用程序的主要功能上。

圖片來源:?Tastemade

2. 多鄰國

作為一個教育應(yīng)用,必須讓用戶易于發(fā)現(xiàn)和易于理解它的所有內(nèi)容及類別。盡管語言學(xué)習(xí)的應(yīng)用程序包含大量的內(nèi)容,但多鄰國這個應(yīng)用,仍然沒有在屏幕的左側(cè)或右側(cè)隱藏其菜單。

它采取的方式是在底部導(dǎo)航菜單設(shè)置5個灰色圖標(biāo),當(dāng)選擇一個圖標(biāo)時,它將變成藍(lán)色,界面名稱則顯示在其下方。僅顯示突出顯示的圖標(biāo)名稱可以使界面保持簡潔,同時又可以幫助新用戶了解應(yīng)用程序。 [額外福利:請參閱關(guān)于多鄰國應(yīng)用的UX案例分析!]

圖片來源:?Duolingo

3. 愛彼迎

愛彼迎(Airbnb)的應(yīng)用程序使用了適合各種機(jī)型(包括小型智能手機(jī)界面)的5個明顯易懂的圖標(biāo),避免了用戶不得不打開數(shù)十個瀏覽器標(biāo)簽,來查看搜索結(jié)果和由此帶來的諸多不便。比如:當(dāng)在某一國家選擇住所時,愛彼迎的導(dǎo)航設(shè)計最明智的抉擇,是將整個用戶瀏覽軌跡分成幾個獨(dú)立的界面,然后以合理的順序顯示每個界面的圖標(biāo)。

用戶可以在房屋搜索結(jié)果之間切換,查看已經(jīng)保存的公寓,已經(jīng)預(yù)訂的公寓以及他們正在與之聯(lián)系的房東等。這使瀏覽過程和對決定去哪一家變得簡單、方便又直觀。

圖片來源:?Airbnb

結(jié)束語

市場上的應(yīng)用數(shù)不勝數(shù),競爭相當(dāng)激烈。要開發(fā)一個牛B的應(yīng)用,同時還要讓新手入門簡單有趣,請務(wù)必確保您的用戶能夠在您為其創(chuàng)建的移動小世界里,輕松地點(diǎn)擊和滑動。

要了解用戶對您應(yīng)用的導(dǎo)航設(shè)計體驗如何,您必須先行千里路,做好各種準(zhǔn)備工作。比如:充分利用移動應(yīng)用數(shù)據(jù)分析、用戶評論和測試等。此外,您還需要一點(diǎn)兒換位思考和用戶使用應(yīng)用的習(xí)慣常識。

 

本文由 @XXX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖作者提供

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 您好!錯過您的信息太久,真不好意思。歡迎轉(zhuǎn)載,還請保留鏈接。謝謝!

    來自以色列 回復(fù)
    1. 您好!請問能加個微信好友嗎?怎樣聯(lián)系您?

      來自以色列 回復(fù)
    2. 您好~~我的微信號是julysuna

      來自北京 回復(fù)