APP里導航欄設計的6個常見錯誤和3個成功的案例分析

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

本文主要分析了在APP導航欄設計中常犯的六個錯誤,還分析3個成功的案例。牢記這些將幫助您從別人的錯誤中學習,吸取經驗教訓。同時,也可以幫您改善導航設計,讓用戶在您的應用里運用自如。

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

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

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

一、您的菜單選項太多

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

應用App也不例外!

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

希克定律是確保您不會提供太多選擇的絕佳方式。

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

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

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

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

三、您的菜單不可見

有關漢堡包圖標的文章已經寫得很多,有些人認為它是應用程序設計的必要組成部分,有些人甚至稱其為應用程序圖標之王。

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

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

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

四、您正試圖重制導航規則

負責界面設計的人員一般都很有創新精神,但也很容易過分忠于這份熱情。在移動應用行業不斷變革的時代,毫無疑問這樣的創新精神自然會創造出好的結果。但這有發揮它的專屬時間和地點,而不是發揮在您的應用導航設計中。

不尋常的導航規則可能看起來很有創意,但最終對用戶來說并不直觀,這就可能會對應用程序的成功產生嚴重影響。

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

最好的方法是為每個圖標設置一個位置,并將每個圖標保留在固定的位置。請把那些創意另作它用吧,比如:在應用程序的其它功能上去發揮您的創意特長。

五、您正在使用不熟悉的圖標

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

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

這篇文章給出了一些可以幫助解決這個圖標設計的技巧,其中還包括5秒規則:

“如果花費超過5秒的時間考慮一個合適的圖標,則這個圖標不可能有效地傳達您想要它傳達的含義。“

六、您沒向用戶顯示他們的當前位置

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

3個把導航和菜單設計得很好的應用程序

盡管很多應用出現了這些常見的錯誤,但還是有一些應用程序能夠把導航和菜單設計得很優秀。這里推薦參考這三個應用程序:

1. Tastemade

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

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

圖片來源:?Tastemade

2. 多鄰國

作為一個教育應用,必須讓用戶易于發現和易于理解它的所有內容及類別。盡管語言學習的應用程序包含大量的內容,但多鄰國這個應用,仍然沒有在屏幕的左側或右側隱藏其菜單。

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

圖片來源:?Duolingo

3. 愛彼迎

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

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

圖片來源:?Airbnb

結束語

市場上的應用數不勝數,競爭相當激烈。要開發一個牛B的應用,同時還要讓新手入門簡單有趣,請務必確保您的用戶能夠在您為其創建的移動小世界里,輕松地點擊和滑動。

要了解用戶對您應用的導航設計體驗如何,您必須先行千里路,做好各種準備工作。比如:充分利用移動應用數據分析、用戶評論和測試等。此外,您還需要一點兒換位思考和用戶使用應用的習慣常識。

 

本文由 @XXX 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖作者提供

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

    來自以色列 回復
    1. 您好!請問能加個微信好友嗎?怎樣聯系您?

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

      來自北京 回復