編者按：用戶體驗(yàn)設(shè)計(jì)從來(lái)都不是一成不變的，比如側(cè)邊欄導(dǎo)航，我們所需要的設(shè)計(jì)規(guī)則和技巧比我們實(shí)際想象的要更多，它也在多年的發(fā)展過(guò)程中，形成了更加完善、復(fù)雜的用戶體驗(yàn)設(shè)計(jì)機(jī)制。今天的文章來(lái)自資深 UX 設(shè)計(jì)師 Dmitry Sergushkin ，他所總結(jié)的側(cè)邊欄終極設(shè)計(jì)指南比我們想象中還要完善，非常值得深讀和反復(fù)琢磨。

用戶界面中的側(cè)邊欄設(shè)計(jì)這一選題一直吸引著我的注意，因?yàn)橥τ醒芯績(jī)r(jià)值，并且有可能極大改善用戶體驗(yàn)。它們是現(xiàn)代 Web APP 和 APP 中最受歡迎的組件之一，通過(guò)以結(jié)構(gòu)化和邏輯的方式組織和呈現(xiàn)內(nèi)容和功能來(lái)幫助用戶瀏覽內(nèi)容，從而有效呈現(xiàn)信息架構(gòu) (IA)。

在研究許多流行的 APP 中的側(cè)邊欄之后，我也在不同的數(shù)字項(xiàng)目中進(jìn)行設(shè)計(jì)過(guò)這一組件，我開(kāi)始注意到它們的設(shè)計(jì)中反復(fù)使用的模式和技術(shù)，這些模式和技術(shù)深受用戶的歡迎并有助于提高用戶的參與度。我在這個(gè)領(lǐng)域積累的知識(shí)和研究成果促使我撰寫(xiě)這篇文章，我想分享提升設(shè)計(jì)側(cè)邊欄可用性的設(shè)計(jì)最佳實(shí)踐。

為什么側(cè)邊欄設(shè)計(jì)很重要

側(cè)邊欄無(wú)疑是用戶最重要的導(dǎo)航工具之一，作為設(shè)計(jì)師，我們的任務(wù)是幫助用戶快速方便地訪問(wèn)關(guān)鍵功能，同時(shí)保持主工作區(qū)干凈清爽。鑒于某些 APP 的結(jié)構(gòu)和信息架構(gòu)可能相當(dāng)廣泛和復(fù)雜，設(shè)計(jì)側(cè)邊欄對(duì)任何設(shè)計(jì)師來(lái)說(shuō)無(wú)疑是一項(xiàng)挑戰(zhàn)。

下面我強(qiáng)調(diào)一下側(cè)邊欄重要性的幾個(gè)重要方面：

• 效率：側(cè)邊欄的邏輯結(jié)構(gòu)使用戶更輕松地瀏覽 APP ，使他們能夠快速有效地執(zhí)行有針對(duì)性的操作，從而減少認(rèn)知負(fù)荷。
• 空間優(yōu)化：側(cè)邊欄在展開(kāi)時(shí)，只占據(jù)約 15% 的工作空間，并且可以折疊，從而可以高效使用它們而不會(huì)使主工作空間變得雜亂，同時(shí)仍允許訪問(wèn)功能和不同模塊。用戶可以根據(jù)需要最小化和最大化它們，將它們用作 APP 中的主要導(dǎo)航工具。
• 可訪問(wèn)性：側(cè)邊欄可根據(jù)個(gè)人用戶偏好進(jìn)行定制，使其具有通用性，為用戶提供了選擇。側(cè)邊欄可以根據(jù)用戶偏好更改模式、大小、結(jié)構(gòu)，在信息組織上是可定制的。
• 一致性：側(cè)邊欄提供了一種方便且一致的方式來(lái)組織信息，使界面清晰且合乎邏輯，確保用戶流程順暢。結(jié)構(gòu)清晰、組織良好的側(cè)邊欄可確保用戶高效、快速學(xué)習(xí)并避免可能的錯(cuò)誤。
• 適應(yīng)性和靈活性：側(cè)邊欄通過(guò)添加新功能和新版塊為未來(lái)的產(chǎn)品開(kāi)發(fā)提供了堅(jiān)實(shí)的基礎(chǔ)。側(cè)邊欄可以隨著產(chǎn)品的發(fā)展而改進(jìn)，為用戶提供便利和功能。
• 明確用戶任務(wù)的優(yōu)先級(jí)：精心設(shè)計(jì)的側(cè)邊欄可以最大限度地減少干擾，讓用戶專(zhuān)注于自己的任務(wù)，同時(shí)還可以充當(dāng)有效的導(dǎo)航工具。

按照我所總結(jié)的最佳實(shí)踐，你不僅可以創(chuàng)建一個(gè)功能性極佳的側(cè)邊欄，還可以創(chuàng)建一個(gè)能引起用戶共鳴的設(shè)計(jì)。

＃1 最佳側(cè)邊欄寬度

保持寬度較為實(shí)用：展開(kāi)模式下為 240–300px，折疊模式下為 48–64px。既能保證清晰度，又不會(huì)占用太多空間。

設(shè)計(jì)要點(diǎn)：
? 在建議的限制范圍內(nèi)設(shè)置側(cè)邊欄寬度范圍：展開(kāi)模式為 240–300px，折疊模式為 48–64px。
?添加真實(shí)內(nèi)容，使用清晰的標(biāo)題來(lái)命名部分和功能，同時(shí)考慮菜單項(xiàng)名稱(chēng)的不同長(zhǎng)度、項(xiàng)目之間的空間和圖標(biāo)大小。
?使用側(cè)邊欄的展開(kāi)和折疊視圖進(jìn)行用戶測(cè)試，并收集反饋以進(jìn)行進(jìn)一步改進(jìn)。
?針對(duì)不同的屏幕分辨率優(yōu)化側(cè)邊欄的響應(yīng)能力，并確定側(cè)邊欄在不同設(shè)備（包括移動(dòng)設(shè)備和平板電腦版本）上的顯示和交互是否合理。
?以工具提示的形式加入視覺(jué)索引，這些提示在懸停時(shí)顯示，尤其是在側(cè)邊欄的折疊視圖下，因?yàn)槠渲胁藛雾?xiàng)通常顯示為圖標(biāo)。

?專(zhuān)業(yè)提示：使用真實(shí)內(nèi)容和用戶測(cè)試側(cè)邊欄寬度，以確?？勺x性和可用性。

#2、根據(jù)上下文內(nèi)容動(dòng)態(tài)切換導(dǎo)航

調(diào)整側(cè)邊欄，當(dāng)用戶導(dǎo)航到特定部分（如 [設(shè)置]）時(shí)，顯示重點(diǎn)設(shè)置菜單。這可保持界面簡(jiǎn)潔，并減少干擾。

設(shè)計(jì)要點(diǎn)：
? 分析 APP 的所有部分，以確定哪些部分需要額外的導(dǎo)航。通常，這是設(shè)置部分，其中可能包括需要結(jié)構(gòu)化和組織化導(dǎo)航的基本設(shè)置和其他次要的設(shè)置。
?為選定部分創(chuàng)建側(cè)邊欄設(shè)計(jì)，顯示必要的項(xiàng)目和子部分，在主側(cè)邊欄和附加側(cè)邊欄之間提供邏輯過(guò)渡。
?在動(dòng)態(tài)的菜單面包的顯示中提供視覺(jué)差異，使用戶可以區(qū)分主菜單和附加菜單的位置。
?在不同場(chǎng)景中測(cè)試可用性，并確定動(dòng)態(tài)側(cè)邊欄的直觀程度。

?專(zhuān)業(yè)提示：始終包含「返回主菜單」，以便用戶輕松返回主導(dǎo)航。

#3、輕松切換賬戶

在側(cè)邊欄中整合賬戶切換器，讓用戶能夠在多個(gè)賬戶之間無(wú)縫切換。它提高了管理多個(gè)帳號(hào)的用戶的效率。

設(shè)計(jì)要點(diǎn)：
?在帳戶顯示旁邊添加一個(gè)下拉列表來(lái)呈現(xiàn)所有帳號(hào)，以便輕松在它們之間切換。
?確保下拉列表中顯示關(guān)鍵帳戶信息，以便快速掃描信息（姓名、電子郵件、ID等）。
?直觀顯示當(dāng)前處于活動(dòng)狀態(tài)下的帳戶。
?通過(guò)提供清晰的反饋，使帳戶切換過(guò)程成為一鍵快速完成。
?啟用添加新帳戶的選項(xiàng)，以防用戶在列表中找不到所需的帳戶。

?專(zhuān)業(yè)提示：帳號(hào)列表中添加公司 LOGO 等視覺(jué)提示，以幫助用戶快速識(shí)別帳號(hào)。

#4、添加可擴(kuò)展的菜單子項(xiàng)

讓用戶能夠展開(kāi)或折疊子菜單項(xiàng)，從而實(shí)現(xiàn)更好的層次結(jié)構(gòu)和更清晰的導(dǎo)航。使用圖標(biāo)（如箭頭或 V 形）來(lái)指示子菜單是否可以展開(kāi)。

設(shè)計(jì)要點(diǎn)：
?分析 APP 的信息架構(gòu)，以確定邏輯上的父級(jí)和子級(jí)。
?添加直觀的圖標(biāo)（例如箭頭或 V 形）以指示展開(kāi)或折疊子菜單的能力。
?將相關(guān)元素分組到各自的父類(lèi)別下，以清晰呈現(xiàn)信息架構(gòu)的邏輯。
?限制嵌套的深度，以避免 UI 結(jié)構(gòu)的復(fù)雜度過(guò)載。
?為展開(kāi)和折疊子菜單實(shí)現(xiàn)平滑過(guò)渡，以改善視覺(jué)感知。

?專(zhuān)業(yè)提示：展開(kāi)或折疊子菜單項(xiàng)時(shí)添加微妙的動(dòng)畫(huà)（例如平滑的滑動(dòng)）。

#5、保留更新的空間

使用側(cè)邊欄的底部來(lái)顯示營(yíng)銷(xiāo)內(nèi)容，更新或 APP 公告 — — 可見(jiàn)但不顯眼，確保它不會(huì)擾亂主要導(dǎo)航。

設(shè)計(jì)要點(diǎn)：
?在側(cè)邊欄底部預(yù)留空間，專(zhuān)門(mén)用于營(yíng)銷(xiāo)內(nèi)容的更新、公告或新功能。
?將此空間用于真正有意義的通知，例如新功能發(fā)布、促銷(xiāo)或重要消息。
?使該區(qū)域可點(diǎn)擊，以便用戶可以在需要時(shí)打開(kāi)詳細(xì)信息。
?進(jìn)行測(cè)試，以確保此區(qū)域不會(huì)干擾主導(dǎo)航并被視為有用的補(bǔ)充。

?專(zhuān)業(yè)提示：使用視覺(jué)層次來(lái)區(qū)分更新——較小的字體尺寸、柔和的顏色或微妙的圖標(biāo)。

#6、允許用戶在明暗模式之間切換

讓用戶可以在側(cè)邊欄中直接切換明暗模式。此功能增強(qiáng)了產(chǎn)品的可訪問(wèn)性，并減少了弱光環(huán)境下的視覺(jué)疲勞。

設(shè)計(jì)要點(diǎn)：
?為側(cè)邊欄創(chuàng)建明暗兩種配色方案，同時(shí)考慮到對(duì)比度、可讀性和視覺(jué)平衡。
?確保文本、圖標(biāo)和其他元素在兩種模式下都保持可見(jiàn)。
?讓明暗切換可以根據(jù)用戶的系統(tǒng)設(shè)置自動(dòng)檢測(cè)并跟隨。
?確保顏色對(duì)比度符合WCAG（Web 內(nèi)容可訪問(wèn)性指南）要求。

?專(zhuān)業(yè)提示：提供適應(yīng)用戶操作系統(tǒng)設(shè)置的系統(tǒng)默認(rèn)選項(xiàng)。

#7、突出顯示菜單的可用部分

使用獨(dú)特的視覺(jué)提示（如突出顯示的背景、粗體文本或強(qiáng)調(diào)色）來(lái)清晰地指示出處于活動(dòng)狀態(tài)下的菜單選項(xiàng)。這些提示有助于減少導(dǎo)航所耗費(fèi)的精力。

設(shè)計(jì)要點(diǎn)：
?使用醒目的視覺(jué)標(biāo)記，通過(guò)背景、強(qiáng)調(diào)色或下劃線突出顯示活動(dòng)狀態(tài)下的元素。
?為每個(gè)菜單項(xiàng)狀態(tài)（未選中、選中、聚焦）定義清晰的樣式。
?將活動(dòng)部分的文本加粗或更改其顏色以使其引人注目。
?進(jìn)行測(cè)試以確保突出顯示的部分引人注目但不會(huì)分散注意力。
?確保文本、背景和突出顯示之間的對(duì)比度符合WCAG 要求。

?專(zhuān)業(yè)提示：進(jìn)行可訪問(wèn)性檢查，以確保為有視力障礙的用戶提供足夠的對(duì)比度。

#8、優(yōu)先呈現(xiàn)重要信息

通過(guò)有效地組織側(cè)邊欄中的元素，用戶可以輕松訪問(wèn)基本功能并無(wú)縫導(dǎo)航，而不會(huì)產(chǎn)生不必要的混亂或困惑。

設(shè)計(jì)要點(diǎn)：
?突出顯示用戶最常使用的最重要的功能和類(lèi)別。
?以視覺(jué)元素（例如，使用分隔符或縮進(jìn)）分隔各個(gè)部分或者分組，使組織結(jié)構(gòu)更易于理解。
?添加自定義側(cè)邊欄的功能，允許用戶自行確定優(yōu)先級(jí)并顯示不同類(lèi)別。

?專(zhuān)業(yè)提示：與真實(shí)用戶一起測(cè)試來(lái)微調(diào)結(jié)構(gòu)。

#9、讓側(cè)邊欄寬度可被調(diào)整

允許用戶通過(guò)拖動(dòng)邊緣手動(dòng)自定義側(cè)邊欄寬度。此功能增強(qiáng)了側(cè)邊欄的靈活性，確保側(cè)邊欄能夠適應(yīng)個(gè)人偏好和不同的內(nèi)容需求。

設(shè)計(jì)要點(diǎn)：
?添加使用滑塊或拖動(dòng)面板邊緣來(lái)更改側(cè)邊欄寬度的功能。
?確保視覺(jué)指示器（例如箭頭）清楚地表明邊緣是可以調(diào)整大小的。
?定義寬度可調(diào)整范圍，以防止面板被過(guò)度壓縮或拉伸。
?自定義側(cè)邊欄內(nèi)的元素，使其正確適應(yīng)寬度變化（例如，文本被裁剪或者自動(dòng)換行）。

?專(zhuān)業(yè)提示：調(diào)整大小時(shí)使用微妙的視覺(jué)反饋來(lái)提高可用性。

#10、添加快速搜索功能

在側(cè)邊欄中添加快速搜索欄，幫助用戶即時(shí)找到所需信息。搜索功能可確保用戶高效瀏覽復(fù)雜系統(tǒng)或大型數(shù)據(jù)集。

設(shè)計(jì)要點(diǎn)：
?將快速搜索欄放在側(cè)邊欄頂部，以便用戶輕松找到它。
?提供打開(kāi)模態(tài)窗口（彈出框）進(jìn)行高級(jí)搜索的功能，其中包含過(guò)濾器和參數(shù)選擇的功能。
?通過(guò)在搜索框中顯示鍵盤(pán)快捷鍵，來(lái)調(diào)用快速搜索，這可以教育用戶提高可用性。

?專(zhuān)業(yè)提示：將搜索欄放在側(cè)邊欄的頂部，以實(shí)現(xiàn)最大可見(jiàn)性，讓用戶輕松訪問(wèn)。

#11、在側(cè)邊欄啟用目標(biāo)導(dǎo)向型操作

通過(guò)添加操作按鈕，允許用戶直接從側(cè)邊欄執(zhí)行特定的高頻、導(dǎo)向性的操作。這簡(jiǎn)化了工作流程并最大限度地減少了額外導(dǎo)航的需求，從而提高用戶體驗(yàn)。

設(shè)計(jì)要點(diǎn)：
?將按鈕放在關(guān)鍵元素（如頻道、任務(wù)或頁(yè)面）旁邊，以便用戶無(wú)需導(dǎo)航到其他界面即可執(zhí)行創(chuàng)建新頁(yè)面、編輯或管理等操作。
?采用可直觀反映操作的圖標(biāo)（例如，創(chuàng)建時(shí)使用「+」圖標(biāo)，編輯時(shí)使用「鉛筆」圖標(biāo)）。
?在工具提示中指定快捷鍵，以加快高頻操作的速度。
?檢查用戶是否可以輕松理解按鈕和菜單位置，以及操作順序。

?專(zhuān)業(yè)提示：確保按鈕易于訪問(wèn)，且不會(huì)使界面過(guò)于擁擠。

#12、增加次級(jí)側(cè)邊欄用于快速訪問(wèn)

添加次級(jí)側(cè)邊欄，以便用戶快速訪問(wèn)他們所偏愛(ài)的工具、常用的 APP 或基本操作。此附加面板有助于簡(jiǎn)化工作流程，輕松保存關(guān)鍵項(xiàng)目。

設(shè)計(jì)要點(diǎn)：
?確定哪些項(xiàng)目或功能在次級(jí)側(cè)邊欄中最有用（例如，收藏工具、常用應(yīng)用、快速操作）。
?將輔助面板放置在主面板的左側(cè)，保持其足夠簡(jiǎn)潔易用。
?通過(guò)添加或刪除元素的功能，以便用戶可以根據(jù)自己的需要來(lái)個(gè)性化側(cè)邊欄。
?使用小圖標(biāo)或快捷方式來(lái)呈現(xiàn)側(cè)邊欄元素，以保持次級(jí)側(cè)邊欄在視覺(jué)上足夠輕量。

?專(zhuān)業(yè)提示：允許用戶根據(jù)他們的工作流程自定義次級(jí)側(cè)邊欄的內(nèi)容。

結(jié)語(yǔ)

側(cè)邊欄是現(xiàn)代用戶界面不可或缺的重要組成部分，有助于構(gòu)建和組織信息架構(gòu)，同時(shí)簡(jiǎn)化可訪問(wèn)性。通過(guò)應(yīng)用側(cè)邊欄設(shè)計(jì)的最佳實(shí)踐并遵守效率、易學(xué)性和適應(yīng)性等可用性原則，設(shè)計(jì)師可以創(chuàng)建實(shí)用且用戶友好的側(cè)邊欄。

通過(guò)直觀的導(dǎo)航，結(jié)合我總結(jié)的建議，可以顯著提高用戶滿意度和工作效率。這些指南為進(jìn)一步探索和改進(jìn)現(xiàn)代 UI ，提供更好的解決方案，增加堅(jiān)實(shí)的基礎(chǔ)。強(qiáng)調(diào)與真實(shí)用戶一起測(cè)試你的想法、假設(shè)和場(chǎng)景，這也非常重要。

作者：陳子木