如何做好移動產品的導航設計

2022-09-24 12:42:09 字數 2229 閱讀 8657

在物理空間中,人們可以在某種程度上依靠天生的方向感給自己定位,但是這些幫助我們在真實世界中找到方向的大腦機制,在資訊空間中卻根本起不到作用。因此在產品設計過程中導航設計是非常重要的。

產品的導航設計又被稱為框架設計,設計的是以什麼樣的具體形式將分類好的內容展現給使用者。好的導航設計能組織好使用者最常用的行為,同時讓這些介面元素被使用者用最容易的方式獲取和使用。那麼好的導航設計要滿足哪些要求呢?

首先必須給使用者一種在應用內不同頁面跳轉的方法ziotllq。由於我們不可能把每個頁面都一股腦的拋在使用者眼前,所以導航設計必須能自然而然的促進或引導使用者的跳轉行為。

其次導航設計必須能清晰的向使用者傳達出跳轉入口和所包含的內容之間的關係。僅僅提供乙個跳轉入口的列表是不夠的。入口按鈕之間相互之間有什麼關係?

是否有功能的側重點?它們之間的相關差異在哪?這些傳達出來的資訊對於使用者理解乙個產品,更快的上手使用乙個產品是非常必要的。

最後導航設計必須能結構化的傳達出它的內容和使用者當前瀏覽頁面之間的關係,簡單的來說也就是幫助使用者去理解哪個跳轉入口可以最好的支援他們的任務或他們想要達到的目標。

在了解完導航設計的作用和基本要求之後,我們來看看目前市面上有哪些比較流行的導航設計,他們之間又有哪些優缺點,適用於哪種型別的產品。

tab式導航是目前移動端市場上最被廣泛使用的導航設計,諸如微信、大眾點評、攜程等app使用的都是tab式導航。

優點1、主要功能突出,不程式設計客棧需要使用者尋找,易於被發現使用。

2、可以輕鬆在各個主要入口頻繁跳轉使用,減少使用者的點選次數。使用者也不容易迷失不知所措,即時在很深的流程環節中也能快速跳轉返回首頁。

缺點1、產品的核心功能過多時,如果都放在tab導航上會顯得框架過於笨重,一般4-5個為宜,過多的話明顯不利於使用者的切換,也將降低介面體驗友好度。

2、沉浸式的體驗不足,底部露出了與當前頁面無關的跳轉入口,容易誘發打斷使用者的當前使用行為。只不過目前很多內容體驗型或電商消費型應用往往會在使用者下拉瀏覽時自動隱藏底部導航,以此解決沉浸式體驗不足的缺點。

抽屜式導航是指選單藏在當前頁面後,點選入口後就像抽屜一樣拉出選單。2023年剛出現的時候曾非常的風靡,facebook就採用過該種導航。但現在採用的頻率較低,仍在使用的應用如qq、滴滴出行、郵箱大師。抽屜式導航比較適合核心功能突出且較為單一的產品。

優點1、給內容頁足夠的空間,讓使用者專注在當前的頁面或需求目標,提高頁面沉浸式的體驗。2、拓展性較好,側邊欄可以提供更多的功能入口的展示空間。

缺點1、使用者的學習成本較高,剛入手使用時很難發現抽屜式的導航。

2、其他主要功能的入口因此被隱藏起來了不夠突出,難以被使用者察覺。

3、主要入口的切換需要二次點選,第一次先點選出抽屜式導航,然後再找到想要的功能,使用者的點選較多且路徑較深。

跳板式導航有被稱作九宮格式導航,將各個入口都平鋪展示在頁面上,該種導航適合功能較多且功能之間較為獨立的產品。目前純粹的跳板式導航其實較少,大多與tab式導航復合使用。常見的應用比如美圖秀秀、典典養車、支付寶等。

優點1、可以清晰的展現各個入口。

2、可以一次性展現更多程式設計客棧的入口。

例如對於支付寶這種功能較多且繁雜的應用,採用跳板式導航可以讓使用者第一時間快速發現找到手機充值、轉賬、生活繳費等常用功能,而不用多次點選跳轉。

缺點1、重點功能不夠突出。

2、各個入口之間的跳轉不夠靈活。如果某個功能的層級路徑較深時,使用者不能快速跳轉到自己忽然想要完成的任務頁面。

列表式導航將入口或內容按照列表的樣式依次展現在頁面之上,列表式導航比較適合內容型產品作為主導航或者一般性產品作為輔助導航。比如網易新聞某類標籤下的內容頁,簡書的訊息頁面,ios的設定頁面。

優點1、內容的層次較為清晰。

2、一次性可載入展現的內容條數較多。

缺點1、內容過多時,無法突出重點。因此目前很多內容型產品如「豌豆莢一覽」會在重點或熱門內容上加上乙個小火焰的紅色標記來突出。2、靈活性不高。

在乙個移動產品的設計過程中,我們往往會選擇乙個導航作為主體框架,其他導航作為輔助設計。如果一開始覺得自身拿捏不准的話,tab式導航是風險度最低,學習成本最低,最容易被大眾所接受的移動導航。

乙個好的移動產品導航最重要的檢驗標準為是否能清晰的告訴使用者「他們在**」以及「他們能去**」。選擇什麼導航作為主體框架切記不能盲目跟風選擇,要根據自身產品的型別是什麼以及功能之間的程式設計客棧關係結構是怎樣等條件來做決定。

本文作者:link,微信***www.cppcns.com:aboutlink。乙隻新美大產品汪。專注分享優質書籍,職場與生活,it業態觀察,更分享產品汪從0到1折騰產品的經驗與方法。

本文標題: 如何做好移動產品的導航設計

本文位址:

如何做好產品設計

今年早些時候,我曾經問過幾位作家是怎麼寫書的,比如 流血的仕途 作者曹公升 科幻作家劉慈欣,發現他們寫書的方式,居然和我想的不一樣。據他們說,基本上是順序寫下來的,甚至寫的過程中自己也不知道後面會發生什麼情節,也許和他們寫的是 有關係。對比起來我的寫作就很特別了,簡直是把書當軟體來做了,有點瀑布模型...

移動產品設計之ios系統的導航

做道題 不定項選擇題 os中導航設計模式有幾種?a.平鋪導航 b.標籤導航 c.樹形導航 d.模態檢視導航 正確答案 a b c 講解 導航始終是產品設計的重頭戲,往往產品設計中90 的事情就是在做導航。在iphone中預置了3種可以直接使用的導航模式 平鋪列表 標籤頁 樹狀結構,每種模式都配有不同...

說說抽屜式導航 移動產品導航

web端設計很多時候是在考慮如何將操作展示給使用者,而mobile的設計更多的時候則是考慮如何將操作巧妙的隱藏起來。這種隱藏實際上是對核心功能的一種突出。導航始終是產品設計的重頭戲,不管在web端設計還是在mobile的設計中。之前曾經在讀 觸動人心 的時候寫過一篇 移動產品設計之ios導航模式 其...