B端設(shè)計(jì)語(yǔ)言-導(dǎo)航

2023-1-13    ui設(shè)計(jì)分享達(dá)人

前言:

對(duì)于B端而言他們使用導(dǎo)航菜單目的性很強(qiáng),到后臺(tái)主要是對(duì)具體功能進(jìn)行操作。因此,其主要的功能就是對(duì)B端產(chǎn)品進(jìn)行分發(fā)、引導(dǎo),幫助用戶找到自己想要的功能。

分享內(nèi)容:

1. 導(dǎo)航是什么,存在的意義

2. 導(dǎo)航的設(shè)計(jì)目標(biāo)

3. 其設(shè)計(jì)原則

4. 設(shè)計(jì)建議

5. 幾種常見(jiàn)的導(dǎo)航類型

1. 存在的意義

導(dǎo)航用來(lái)展示當(dāng)前產(chǎn)品中,用戶在哪兒,可以去哪兒。在廣義上,任何告知用戶他在哪里,他能去什么地方以及如何到達(dá)那里的方式,都可以稱之為導(dǎo)航。當(dāng)設(shè)計(jì)者使用導(dǎo)航或者自定義一些導(dǎo)航結(jié)構(gòu)時(shí),請(qǐng)注意:

a. 盡可能提供標(biāo)識(shí)、上下文線索,避免用戶迷路。

b. 保持導(dǎo)航樣式和行為一致或者減少導(dǎo)航數(shù)量,降低用戶學(xué)習(xí)成本。

c. 盡可能減少頁(yè)面間的跳轉(zhuǎn)(例如:一個(gè)常見(jiàn)任務(wù)需要多個(gè)頁(yè)面跳轉(zhuǎn)時(shí),請(qǐng)減少至一到兩次),讓用戶移動(dòng)距離保持簡(jiǎn)短。

導(dǎo)航菜單是將內(nèi)容信息友好地展示給用戶的有效方式。在確定好網(wǎng)站的信息架構(gòu)后,應(yīng)當(dāng)按需選取適當(dāng)?shù)膶?dǎo)航菜單樣式。

2. 設(shè)計(jì)目標(biāo)

導(dǎo)航菜單是讓用戶明確知曉當(dāng)前所處產(chǎn)品中的位置,并方便快捷地帶用戶到他想去的地方。

3. 設(shè)計(jì)原則

可循性

用戶可定位到他們想要的信息。

高效

a. 多接入點(diǎn):對(duì)同一目的地提供多個(gè)鏈接。

b. 捷徑:提供訪問(wèn)內(nèi)容的捷徑,如相關(guān)鏈接。

c. 逃生艙:點(diǎn)擊 logo 回到首頁(yè)重新啟動(dòng)信息搜尋。

4. 設(shè)計(jì)建議

信息架構(gòu)

? 設(shè)計(jì)時(shí)應(yīng)盡量保持淺平寬的信息架構(gòu)層級(jí);

? 從用戶的使用路徑考慮導(dǎo)航,而非僅基于層級(jí)結(jié)構(gòu);

? 常見(jiàn)的組織方式有:

a. 按主題,例如產(chǎn)品提供的服務(wù)或內(nèi)容分類,好處是直接呈現(xiàn)站點(diǎn)的內(nèi)容范圍。

b. 按受眾群體,例如管理員、運(yùn)營(yíng)、操作員。

c. 按任務(wù),例如了解合作模式、聯(lián)系合作專員、簽約流程、合作聯(lián)調(diào)、業(yè)務(wù)運(yùn)營(yíng)、客戶服務(wù)。

導(dǎo)航路徑

完善的導(dǎo)航應(yīng)該允許用戶沿多種路徑移動(dòng):

a-平移:同層級(jí)跳轉(zhuǎn)

b-下鉆:進(jìn)入低層級(jí)的內(nèi)容

c-返回:返向?yàn)g覽歷史或高層級(jí)內(nèi)容

d-聯(lián)想導(dǎo)航:根據(jù)相關(guān)性導(dǎo)航至內(nèi)容

5. 類型

正確理解和使用導(dǎo)航組件對(duì)產(chǎn)品全局體驗(yàn)至關(guān)重要。

我們將導(dǎo)航劃分為以下 6 種類型:

a. 全局導(dǎo)航(側(cè)邊導(dǎo)航、頂部導(dǎo)航、彈出式導(dǎo)航)

b. 子站點(diǎn)導(dǎo)航(沉浸式導(dǎo)航、多級(jí)站點(diǎn)導(dǎo)航)

c. 頁(yè)內(nèi)導(dǎo)航

d. 下鉆類導(dǎo)航

e. 返回類導(dǎo)航

f. 聯(lián)想類導(dǎo)航

全局導(dǎo)航(側(cè)邊、頂部、彈出式)

全局導(dǎo)航體現(xiàn)網(wǎng)站的核心組織結(jié)構(gòu)。

頂部導(dǎo)航菜單

頂部導(dǎo)航菜單的形式就是把超鏈接連成一行,信息內(nèi)容層級(jí)比較簡(jiǎn)單明了,適用在瀏覽性強(qiáng)的門戶性質(zhì)以及比較前臺(tái)化的應(yīng)用。一級(jí)類目建議在 2-7 個(gè)以內(nèi)。標(biāo)題長(zhǎng)度 4-15 個(gè)字符長(zhǎng)度為好,中文字長(zhǎng) 2-6 個(gè)。

a. 各菜單權(quán)重常常與排列順序呈正相關(guān),即排列順序影響用戶使用頻次。

b. 建議 2~7 項(xiàng)內(nèi)容使用。

c. 建議 1-2 個(gè)層級(jí);超出 2 個(gè)層級(jí)時(shí),建議采用彈出式導(dǎo)航。

側(cè)邊導(dǎo)航菜單

垂直導(dǎo)航較橫向的導(dǎo)航更靈活,易于向下擴(kuò)展, 且允許的標(biāo)簽長(zhǎng)度較長(zhǎng)。類目數(shù)量不限,可配合滾動(dòng)條使用,適合信息層級(jí)多、操作切換頻率高的管理性質(zhì)的應(yīng)用。

a. 很多菜單時(shí)使用,建議菜單多于 6 項(xiàng)時(shí)使用。

b. 可以承載多個(gè)層級(jí),但建議 1-3 個(gè)層級(jí)。

c. 企業(yè)級(jí)產(chǎn)品推薦使用側(cè)欄導(dǎo)航,其可見(jiàn)性更好易于掃讀,各菜單重要性受菜單排列順序影響較小。

彈出式導(dǎo)航

用于拓展導(dǎo)航承載層級(jí),適用于大型網(wǎng)站。站點(diǎn)地圖式導(dǎo)航可以讓用戶對(duì)整個(gè)網(wǎng)站的可用功能一目了然。

a. 不要讓用戶延著狹窄的懸停路徑獲取導(dǎo)航菜單。

b. 不要讓用戶逐層打開(kāi)每層菜單去查找,低效又困難。(此建議僅針對(duì)導(dǎo)航類菜單,不適用于操作類菜單。)

子站點(diǎn)導(dǎo)航(沉浸式、多級(jí)站點(diǎn))

企業(yè)級(jí)產(chǎn)品常采用層級(jí)+數(shù)據(jù)庫(kù)混合結(jié)構(gòu)的信息架構(gòu),這種信息架構(gòu)通常層級(jí)較深,為了實(shí)現(xiàn)用戶感知層面的淺平寬,將較深幾個(gè)層級(jí)組織為一個(gè)子站點(diǎn),降低單個(gè)站點(diǎn)層級(jí)數(shù)量,減輕用戶認(rèn)知負(fù)擔(dān)。

另一種子站點(diǎn)場(chǎng)景是,面對(duì)一些任務(wù)復(fù)雜,需要較大的工作空間,以子站點(diǎn)的方式沉浸式處理任務(wù)。最常見(jiàn)的是編輯器。子站點(diǎn)模式下,對(duì)全站導(dǎo)航功能需求低,通常只需提供一個(gè)返回上級(jí)或回到首頁(yè)的出口。

(此處的數(shù)據(jù)庫(kù)是一種信息架構(gòu)形式,各頁(yè)面內(nèi)容獨(dú)立,但都遵循一致的形式/格式。)

沉浸式導(dǎo)航

用于處理較為復(fù)雜或需要較大工作空間的任務(wù)

多級(jí)站點(diǎn)導(dǎo)航

a. 菜單數(shù)量較多的子站點(diǎn)使用。

b. 子站點(diǎn)設(shè)計(jì)上,應(yīng)明顯區(qū)別于全站導(dǎo)航,使得進(jìn)入子站點(diǎn)需要成較大的過(guò)渡波動(dòng),提示用戶進(jìn)入了新的空間。

下鉆類導(dǎo)航

點(diǎn)擊進(jìn)入信息架構(gòu)下層內(nèi)容,默認(rèn)站內(nèi)跳轉(zhuǎn),站外新開(kāi)標(biāo)簽頁(yè),典型場(chǎng)景為列表下鉆至詳情。

返回類導(dǎo)航

面包屑

反映當(dāng)前頁(yè)面在網(wǎng)站結(jié)構(gòu)中的位置,在少于三個(gè)層級(jí)時(shí)無(wú)需展示,此時(shí)的全局導(dǎo)航能直接呈現(xiàn)位置。用戶可通過(guò)面包屑返回上級(jí)頁(yè)面。


作者:鹿優(yōu)優(yōu)
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔