国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

導(dǎo)語：我們在超市購物時，基本是依靠超市的導(dǎo)航系統(tǒng)（導(dǎo)示/包裝/產(chǎn)品特點）以及我們掃描商品的能力來找我們想要的東西。然而網(wǎng)絡(luò)上找東西和真實世界的不同之處是我們感覺不到物理方位和大小，只能通過一個個鏈接觸達。為了讓用戶“不迷路” ，清晰、一致的導(dǎo)航設(shè)計尤為重要。下面本文作者結(jié)合實際工作經(jīng)驗來談?wù)凚端導(dǎo)航設(shè)計。

一、導(dǎo)航作用

中后臺產(chǎn)品設(shè)計中導(dǎo)航設(shè)計尤為重要，基本上是以導(dǎo)航架構(gòu)為基礎(chǔ)，布局內(nèi)容信息。

導(dǎo)航的主要作用為：

1. 確定用戶的位置：B端產(chǎn)品由于業(yè)務(wù)的復(fù)雜性和角色的多樣性，頁面層級結(jié)構(gòu)較多。清晰的導(dǎo)航設(shè)計會告訴用戶“自己在哪里” ，避免用戶迷路；
2. 告訴用戶如何使用網(wǎng)站：晰一致的導(dǎo)航能夠幫助用戶規(guī)劃行程，就像一封詳盡的說明書，起到指示說明作用，能明確地提示用戶從哪里開始，能進行哪些操作；
3. 告訴用戶這里有什么：B端產(chǎn)品中，系統(tǒng)架構(gòu)通常通過導(dǎo)航結(jié)構(gòu)劃分，通過層次分級，導(dǎo)航文案引導(dǎo)可以快速呈現(xiàn)網(wǎng)站層級和內(nèi)容。

二、幾種常見的導(dǎo)航形態(tài)

“導(dǎo)航”往往承載平臺的主要欄目，根據(jù)位置劃分為頂部導(dǎo)航、側(cè)邊導(dǎo)航和混合導(dǎo)航。

• 頂部導(dǎo)航：自上而下的頂部布局結(jié)構(gòu)符合用戶的瀏覽習(xí)慣，其排版穩(wěn)定，不受顯示器的影響，在網(wǎng)頁設(shè)計中較受歡迎。不足之處是橫向布局的拓展性較弱，能夠放置的條目也是有限的。
• 側(cè)邊導(dǎo)航：側(cè)邊導(dǎo)航因其可拓展的布局結(jié)構(gòu)在后臺類產(chǎn)品中比較受歡迎，它雖占據(jù)頁面主視覺區(qū)，但豎向的布局能夠展示更多條目，當(dāng)每個分類模塊的數(shù)量較多（條目信息一般遵循5±2原則）可通過收起折疊信息。
• 混合導(dǎo)航：B端系統(tǒng)設(shè)計中，往往根據(jù)不同任務(wù)功能，選用合適的導(dǎo)航布局?；旌蠈?dǎo)航有極強的包容性，可以承載更多復(fù)雜的邏輯關(guān)系，更受系統(tǒng)設(shè)計者喜愛。如 teambition中，選用上下混合導(dǎo)航，頂部導(dǎo)航包括站點ID、搜索、實用工具等全局功能。把與用戶常用的功能如任務(wù)/消息/日期/設(shè)置放在頂部導(dǎo)航中，方便查閱和管理。側(cè)邊導(dǎo)航根據(jù)我的項目和任務(wù)權(quán)重分組展示。

三、確定導(dǎo)航菜單的深度和廣度

B端導(dǎo)航設(shè)計時，面對復(fù)雜多樣的任務(wù)，當(dāng)遇到導(dǎo)航的廣度過多（平級功能太多）或?qū)蛹夁^深時怎么辦？

• 導(dǎo)航菜單廣度：導(dǎo)航菜單每一層級包含的菜單數(shù)目為廣度，數(shù)目越多，廣度越大；
• 導(dǎo)航菜單深度：導(dǎo)航菜單層級的數(shù)目為深度，層級越多，深度越大。

1. 廣度

這里用到了《簡約至上：交互式設(shè)計四策略》- 合理刪除、分層組織、適時隱藏和巧妙轉(zhuǎn)移 的四種方法。

1）“刪除”

• 刪功能：平庸的產(chǎn)品設(shè)計往往堆砌更多功能而忽視用戶主要目標(biāo)。當(dāng)發(fā)現(xiàn)功能與用戶目標(biāo)相背時，可以主動和產(chǎn)品溝通，刪除冗余功能，尋求滿足用戶目標(biāo)的精簡方案。
• 簡化樣式：刪除多余的文字，精簡按鈕樣式，去掉分散注意力的元素減少用戶認(rèn)知負(fù)擔(dān)。

2）“分組”

在視覺層面，信息分層是確保頁面清晰的常用策略。這種策略同樣適用于功能層面，如下圖，阿里云產(chǎn)品導(dǎo)航設(shè)計中，把不同的產(chǎn)品根據(jù)服務(wù)內(nèi)容分組，方便查閱和檢索。

3）“隱藏”

阿里云和騰訊云的服務(wù)眾多，涉及幾百個產(chǎn)品。這時隱藏是一種很好的方式，當(dāng)用戶鼠標(biāo)懸停時會拓展出臨時模態(tài)選項區(qū)域，可以充分利用屏幕空間。

如下圖：

4）“轉(zhuǎn)移”

當(dāng)一個功能既不能刪除、分組、也不能隱藏，就可以用轉(zhuǎn)移的方法。包括：設(shè)備轉(zhuǎn)移、軟件轉(zhuǎn)移、向用戶轉(zhuǎn)移。

• 設(shè)備轉(zhuǎn)移：因屏幕大小影響一些產(chǎn)品的高級功能在手機端往往進行簡化隱藏，高級的功能只在電腦端呈現(xiàn)；
• 軟件之間轉(zhuǎn)移：tableau數(shù)據(jù)分析軟件把數(shù)據(jù)準(zhǔn)備階段的功能進行簡化，抽離出制作數(shù)據(jù)清洗的軟件—Tableau Prep，既滿足了用戶數(shù)據(jù)準(zhǔn)備階段的需求，用戶又可單獨購買產(chǎn)品的服務(wù)，提高公司收益；
• 向用戶轉(zhuǎn)移：這里的向用戶轉(zhuǎn)移可以理解為“用戶自定義”，產(chǎn)品提供的功能眾多，但常用的功能往往就幾個，如下圖，騰訊云產(chǎn)品列表提供自定義常用軟件快捷入口功能，體驗感更佳。

2. 深度

1）根據(jù)用戶角色需求和使用場景梳理產(chǎn)品架構(gòu)

當(dāng)發(fā)現(xiàn)功能層級過深時，可以根據(jù)用戶角色和使用場景給功能分組，如：哪些功能需求是相互關(guān)聯(lián)在一起的，（創(chuàng)建會議邀請時，需要看到與會人的日歷是否有排期）這里就需要考慮用同一個頁面視圖來集成所有功能。

2）運用面包屑導(dǎo)航

多級導(dǎo)航運用“面包屑”： 一般頁面層級多于2層，可嘗試用面包屑導(dǎo)航，它的優(yōu)勢是可以看到當(dāng)前頁面的位置軌跡，且可返回到任意想要返回的位置。

通過加背景顏色和文字粗細等視覺表現(xiàn)手法突出當(dāng)前所在頁面

3）減少頁面跳轉(zhuǎn)

當(dāng)頁面功能存在關(guān)聯(lián)性時候，可以用覆蓋層彈窗來減少跳轉(zhuǎn)。如下圖，用戶查看模型訓(xùn)練任務(wù)列表詳情展示采用覆層彈窗，減少頁面層級的跳轉(zhuǎn)。

四、導(dǎo)航顏色注意事項

我們先記住一個重要的原則：讓導(dǎo)航在每一頁上以一致的外觀出現(xiàn)在相同的位置，會讓用戶立即確認(rèn)自己仍然待在這個網(wǎng)站上。

1. 導(dǎo)航用色與品牌匹配

選取品牌色是產(chǎn)品UI設(shè)計的重要步驟，品牌色的選用要符合產(chǎn)品定位和使用人群的特點。我們需要了解各種顏色的情感屬性，然后根據(jù)產(chǎn)品使用人群的特點選中適合的色相，在色相基礎(chǔ)上調(diào)整亮度和飽和度。

注意：

• 這里要考慮色盲和色弱用戶視覺體驗，可以用色彩工具查看選取的色彩是否對色彩障礙用戶同樣友好。
• 盡量讓產(chǎn)品在不佳的環(huán)境中視覺感受良好，有些色彩往往在Mac下展示很漂亮，在其他低分辨率的設(shè)備下容易偏色。設(shè)計師需要考慮不同設(shè)備下產(chǎn)品顏色的展示效果，做綜合挑選和評估。

推薦色彩對比工具：

• https://color.adobe.com
• WebAIM’s Color Contrast Checker

2. 避免用高飽和度和亮度的顏色

B端產(chǎn)品設(shè)計中，用戶往往需要長時間專注工作內(nèi)容，而明亮的導(dǎo)航顏色會使人感到視覺疲勞，不利于導(dǎo)航層級和內(nèi)容更好地展示，因此應(yīng)避免使用高亮度和飽和度的顏色。這里舉個反例：釘釘6.0版本架構(gòu)布局做了調(diào)整，雖有可取之處， 但導(dǎo)航顏色飽和度與之前相比變高了，看起來很搶眼。

3. 可嘗試用帶有色相的深灰色

企業(yè)類平臺產(chǎn)品，往往以pc端用戶居多。從屏幕分辨率角度考慮，導(dǎo)航的顏色盡量選用深色，這樣在不同終端實際展現(xiàn)效果的包容性比較強。也有利于系統(tǒng)層級的展示，從而更好地突出內(nèi)容。

導(dǎo)航如高速路上的指示標(biāo)，指引用戶方向并承載產(chǎn)品內(nèi)容。產(chǎn)品擁有清晰、一致的導(dǎo)航，防止用戶迷路，是良好產(chǎn)品體驗的基礎(chǔ)，需要每位產(chǎn)品設(shè)計師精心打磨。

本文由@小設(shè)計? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自pexels，基于CC0協(xié)議