導航設計的15個UX指導原則

2022-09-25 11:03:14 字數 2543 閱讀 2010

為使用者導航是每一位**和app設計者的首要職責。畢竟使用者一旦迷路,再炫酷的動效、再有趣的內容也都毫無意義。即使我們的**中有搜尋功能,也不能把搜尋框當成使用者導航的程式設計客棧唯一工具。大多設計者已意識到這一點,並在自己的**中設計了導航選單。

定義:導航選單是**主要內容或特徵的列表,通常由一組鏈結或icon組成,並在視覺樣式上與**其他內容有顯著差異。

導航選單包含但不限於導航條和漢堡選單。

導航選單的重要性已經不言而喻,我們平時遇到的每乙個**或軟體中都有它的存在;但並不是所有的導航選單都設計得準確無誤程式設計客棧。我們也常發現使用者因導航設計不當而感到困惑、難以操作,或者連導航在哪兒都不知道。

下面的設計原則,程式設計客棧可以避免導航選單出錯。

導航選單要清晰可見1.大屏中的導航選單不要太小。如果空間足夠,不要將選單隱藏。

2.把導航選單放在使用者熟悉的位置。通常使用者會希chiweil望在瀏覽過的**或app中的類似位置(譬如**頂部、左側等)中找到他們想要的ui元素。

3.讓選單鏈結看起來有互動感。如果選單選項看起來不可點選,使用者未必能認出它是導航。如果我們的導航設計融入太重的圖形、或太過追崇扁平化設計風格,會使它們看起來更像是裝飾性或標題。

4.確保導航選單擁有足夠的視覺吸引力。很多導航選單的周圍會留有一點空白區域以從視覺上突顯它。但當**ui元素比較擁擠時,如果導航選單視覺比重太弱就會在各色圖形、**廣告、標題裡迷失,不易被使用者識別。

5.選單選項的顏色要與**背景色對比鮮明。令人驚訝的是,有非常多的設計師都忽視了「對比原則」。

即便是熟悉以上規則的設計師設計出來的導航選單也有可能會被使用者忽視,因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設計標準時,比如哪個ui元素應該擁有更明顯的視覺效果。如果你知道你的導航選單在哪兒,自然能一看看到它,因為這是你設計的。因此,讓使用者參與驗證十分必要。

告訴使用者其當前位置6.告訴使用者當前所處什麼位置。使用者成功導航的乙個最基本的標準是他自己能發現:「我在哪兒?」 通常被選中的選單選項在視覺上與其他選項是有差異的,這可以幫助使用者明確自己的當前所在位置(或者通過麵包屑導航定位)。如果沒有讓使用者明確所在位置、導致他們迷路,那麼就犯了**設計最基本的錯誤。諷刺的是使用者不總是通過首頁到達目的頁,所以導航選單對於使用者來說意義重大。

導航選單要與使用者任務協調一致7.使用易懂的鏈結標籤。清楚使用者要找的是什麼,使用相似且相關的類別標籤。要記住導航選單並不是拿自造詞和行話去忽悠人的。請使用可以準確描述**內容和特徵的術語。

8.鏈結標籤要容易閱讀。減少使用者閱讀選單具體內容的時間,如使用左對齊的垂直選單、或將關鍵詞前置。

9.對於大型**來說,讓使用者通過導航選單預覽子級內容。對於喜歡挖掘**各層級內容的典型使用者來說,下拉列表可以讓使用者快速瀏覽、節省時間。

10.為息息相關的內容提供本地導航。如果使用者喜歡對一些同類商品頻繁對比、或在某個場景裡完成多個任務,可以將這些臨近頁面做成本地導航選單,這樣使用者就不需要在複雜的路徑裡「上躥下跳」了。

11.利用視覺的傳達力。影象、顏色等元素可以幫助使用者理解選單選項,但也要確保這些圖形起的是積極作用(至少不能讓操作變得更難)。

導航選單要易於操作12.選單選項要夠大、方便點選。如果導航選單的選項過小或者彼此靠得太近,會給移動使用者造成很大的困擾;大屏**中導航選單選項如果也設計成這樣,那就會很難操作。

13.確保下拉列表不會太大或太小。滑鼠懸停觸發的下拉列表呈現時間太過短暫會給使用者帶來挫敗感,因為使用者還沒來得及點選選單裡的某個鏈結的時候,下拉列表就消失了。另外,太長的垂直導航選單也不利於底部選項的點選,除非滾動螢幕。最後,滑鼠懸停觸發的下拉列表不能太寬,否則會讓使用者誤以為是新頁面、並且好奇為什麼自己還沒點選就出現了新的「頁面」?

14.當頁面內容很長時,可以考慮懸浮吸頂(或固底)選單。已瀏覽到頁面底部的使用者要想回到首屏需要一次又一次地回滾滑鼠(移動端則是不斷向上划動螢幕);如果導航可以懸浮吸頂,使用者就可以很方便地進行其他選單選項的切換。這很適合小螢幕場景。

15.盡可能縮短導航選單最常用操作的物理距離。下拉列表內容比較多時,將使用者最常點選的鏈結放到離滑鼠懸停的選項最近的地方可以減少滑鼠移動的距離(移動端也類似)。最近一些app中流行的餅狀選單則將所有選單選項成圓(有的是半圓)狀圍繞在選單周圍,這樣每乙個選項鏈結的物理點選距離都是最短的。

用新穎有趣的互動方式去驚豔使用者?

實際上……答案是「不」。

炫酷的效果並非我們的首要目標。對於使用者來說,最能打動他們的還是**的精彩內容、以及熟悉且操作簡單的導航選單。

當然,有的時程式設計客棧候一些創新型選單的確可以提公升使用者體驗(下拉列表就是乙個例子)。在某些場景下,由於新技術的獨特要求,這15條原則也未必使用——舉個例子,第4條 「確保導航選單擁有足夠的視覺吸引力」 就不適用於語音識別。但大多數情況下,這15條都是我們需要考慮的指導原則,因為它們會大大提高導航選單的易用性。

原文鏈結:menu design: checklist of 15 ux guidelines to help users

本文標題: 導航設計的15個ux指導原則

本文位址:

什麼是UX設計師,UX設計師面試的6個技巧

面試是乙個過程,可以幫助招聘人員找到合適的人,可以以理想的方式滿足他們的要求。它包括一系列問題和答案,以使對方了解他 她的技能,興趣和態度。有多種方法可以在面試中表現出色,下面列出了一些可以幫助您下次面試的有用提示。什麼是ux設計師,ux設計師面試的6個技巧 1.做好準備 在面試之前,您要做的第一件...

使用者指導手冊的乙個原則

某使用者指導手冊中有如下內容 官方在這方面曾做過警示 請注意 如果你具有多個筆記本 notebook 多個筆記本組 stack 在匯入時,將失去這個結構,全部筆記進入到乙個筆記本中,所以請三思而後行 但這些文字,對使用者操作,是誤導而非指導!面向使用者 指導應用的原則是,明示使用者應該如何做,而非告...

軟體架構設計最常用的15個原則

架構原則 1 n 1設計 永遠不少於兩個,通常三個。2 回滾設計。確保系統可以回滾到以前發不過的任何版本。3 禁用設計。能夠關閉任何發布的功能。4 監控設計。在設計階段就必須要考慮監控,而不是在實施完成之後補充。5 設計多活資料中心。不要被乙個資料中心的解決方案把自己限制住。6 使用成熟的技術。只用...