經驗分享|關于構建一款產品的導航體系

1 評論 6909 瀏覽 47 收藏 10 分鐘

導航體系對于產品易用性有著極大的影響,設計師應該對此足夠的重視起來。今天,本文作者給大家分享的一些自己的心得,希望給各位設計師在將來的導航設計中提供了一些不同的思路。

隨著智能手機的興起,移動端導航技術的成熟,對于導航我們也越來越熟悉。現如今去一個陌生的城市,我們只要一部帶有導航功能的手機,就能做到暢行無阻。導航最基本的兩個功能:告訴用戶當前所處的位置和規劃出前往目的地的路線圖。

導航這一理論投射到互聯網產品的層面來說,網站和app都是為了向用戶展示某些內容,但是與從書本或者海報這類展示形式差異來看,網站和app通過“鏈接”可以將不同的內容相互串聯起來,并且可以往返各個內容之間。簡言之,因為“鏈接”的存在使得這些內容具有了相關性。所以,用戶在使用過程中,我們必須讓他/她時刻了解:

  • 現在我在哪個頁面?
  • 這個頁面內容是什么?
  • 從哪里來到這個頁面?
  • 從這個頁面可以到哪個頁面去?

什么時候開始構建導航體系?

產品導航體系的構建應該在前期線框圖繪制的時候就開始,從排版布局、場景轉換到功能定位,大致規劃出導航體系的框架。在產品原型圖期間,再進行一次檢查,以確保所有重要的操作和功能選項對于用戶來說都是明確的。我們不能等到進行UI設計階段才想起來去搭建導航體系,那樣會冒極大的風險,對產品的未來也會帶來極大的隱患。

菜單

菜單是最主要的導航元素,在很多人看來甚至是唯一的導航元素。菜單樣式很符合我們傳統意義上對于互聯網產品導航的理解。你打開一款app,出現一個菜單列表,用戶可以通過點擊選項來進入不同的功能模塊。菜單根據在頁面中所處的位置可以分為:頂部欄菜單,側邊欄菜單和底部欄菜單?;诓煌慕换ツJ胶屯庥^又可以分為:下拉菜單,滑動菜單和彈出框菜單。

設計師對于最終菜單方案的選擇是基于多重因素的:功能的優先級、使用場景和用戶的操作習慣。精心設計的菜單會大大加快用戶實現目標和滿足需求的進程。

上面這個就是側邊欄菜單的一個例子,左側菜單中項目代表了內容類別,用戶可以通過微文案和圖標來識別具體功能。這種菜單模式具有較強的拓展性,可以在有限的屏幕空間中容納更多數量的功能入口。

上面這個例子屬于列表式菜單的一種。列表式菜單主要應用于核心功能流程比較單一的產品,主界面就可以滿足用戶核心場景下的需求,不需要通過底部欄菜單來在幾個功能模塊之間來回切換。

行為召喚???

Call To Action,這里翻譯為行為召喚,是一種很重要的設計技法。顧名思義,設計師引入行為召喚是鼓勵和刺激用戶完成特定操作。

在交互過程中,行為召喚在產品的易用性和適航性上起著至關重要的作用。從產品導航的角度來說,即使我們給用戶構建了完整的交互流程,但是如果行為召喚沒有考慮到,用戶會感到困惑。就像我們來到一個陌生城市搭地鐵,通過手機導航我們可以找到地鐵站,但是“前方100米地鐵站”的標志對于我們來說也是極其重要的。

常見的行為召喚元素有按鈕、標簽和鏈接,但是不止于此。一個圖標,一幅插畫甚至是一句話都可以是召喚用戶的一種行為。

行為召喚元素使用的是非成功在于,我們強迫或者希望用戶看到的內容在頁面中是非足夠明顯,能否被用戶立即識別。

上面這個海鮮食品網站的登錄頁面我們可以看到,圖片上面的那句“Let’s Cook”就是一個行為召喚元素。用戶進入頁面第一眼就可以看到這句話,接受到產品的主題。但是這文案本身不可交互,這個頁面中可交互的行為召喚元素是頁面底部的紅色按鈕。通過按鈕上的標簽View More,用戶知道點擊后就會看到更多特定主題的食品與菜單。紅色的應用增強了頁面的視覺層次結構,可以有效的吸引用戶的目光。

功能條

功能條作為一個重要的交互元素,用戶可以通過點擊來實現與產品之間的快速互動。此外功能條還可以向用戶展示系統當前狀態,讓用戶時刻了解自己所處的位置。

標簽欄

主要應用于app中,位于頁面底端,用戶可以通過點擊標簽欄實現不同功能之間的切換。

進度條

進度條可以通過時間或者數字百分比的形式,給用戶很直觀的展示加載或者處理過程的實時情況。

按鈕

按鈕是當前UI設計中最常用的交互元素,用戶通過按鈕可以向系統發出命令和接受反饋。按鈕本身有著極強的可塑性,給我們的導航設計提供了更多的發揮空間。

漢堡按鈕

使用漢堡按鈕可以將功能列表隱藏起來,它既節省了空間,同時也保持了頁面的簡潔,而且一般都會結合點擊彈出的樣式,操作起來也很方便。但是有一個缺點,就是增加了用戶的認知負擔,有點時候很難發現。

添加按鈕

用戶可以點擊添加按鈕來添加新的內容,包括新的聯系人、筆記、照片等。通常情況下,用戶點擊后會直接進入創建新內容的頁面。而有的時候,用戶還會進行一次選擇。例如發微博時點擊“+”隨后出現的path動效。

開關

開關是用戶可以進行切換狀態(打開/關閉)的控件,在當前UI設計中被普遍使用。主要一部分原因是其模仿了現實生活中的開關,用戶對此很熟悉。當設計師要設計一個開關控件的時候,首先要考慮的是開與關這兩種狀態能夠從視覺上給用戶截然不同的感覺,明細的差異易于用戶進行區分。用戶就不用花時間去分辨兩種狀態的區別,減少了用戶的學習成本。具體來說,我們可以使用加強對比來實現兩種狀態之間的差異化設計,也可以增加一些動畫來提升用戶友好度。

上圖這個例子是Toonie的一個開關樣式。在這里動畫的應用增加了操作過程中的流暢度,使狀態的轉換更加自然。顏色的變化和那個不斷轉動的太陽可以讓用戶很容易的明白哪種狀態是開,哪種狀態是關。

總結

導航體系對于產品易用性有著極大的影響,設計師應該對此足夠的重視起來。今天給大家分享的一些自己的心得,希望給各位設計師在將來的導航設計中提供了一些不同的思路。

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 交互動效很贊,可惜程序猿哥哥才不會聽……

    回復