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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#3、輕松切換賬戶

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

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

?專業(yè)提示：帳號列表中添加公司 LOGO 等視覺提示，以幫助用戶快速識別帳號。

#4、添加可擴展的菜單子項

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

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

?專業(yè)提示：展開或折疊子菜單項時添加微妙的動畫（例如平滑的滑動）。

#5、保留更新的空間

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?專業(yè)提示：與真實用戶一起測試來微調(diào)結(jié)構(gòu)。

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

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

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

?專業(yè)提示：調(diào)整大小時使用微妙的視覺反饋來提高可用性。

#10、添加快速搜索功能

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

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

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

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

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

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

?專業(yè)提示：確保按鈕易于訪問，且不會使界面過于擁擠。

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

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

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

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

結(jié)語

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

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

作者：陳子木