起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識不藏了！設計「設置頁面」時會踩的7個坑
設置頁面雖小，卻直接影響用戶體驗。一個設計不佳的設置頁面，可能會讓用戶在遇到問題時更加焦慮，而一個精心設計的設置頁面，則能幫助用戶快速解決問題，提升對產品的整體滿意度。本文將分享設計設置頁面時常見的7個坑，以及如何避免這些坑，幫助設計師們打造出更加友好、高效的設置頁面。
一、堆砌設置項
設置功能在產品設計中通常不是最顯眼的部分，用戶遇到問題才會想到進入設置里解決。此刻的用戶一定是焦躁不安的，因此設置界面的體驗好壞決定了用戶對這款產品的評價，體驗好的設置面板設計會讓用戶的問題迎刃而解；不好的體驗則會讓本已在壞情緒中的用戶放大對產品的負面印象。
在釘釘相關產品的設置頁面設計中，踩過不少坑，跟設計師朋友們分享以下7個常見的「坑」，幫助大家避坑！
產品設計中，有些設置項其實不需要交給用戶來做選擇，但因為產品內部無法達成一致時，就會想到通過增加設置項作為個性化功能交給用戶來做選擇，比如導航的寬窄，內容的緊湊度，這部分「設置」功能不是用戶出于第一性原理會想到的，缺少實際使用場景，是產品強加給用戶的選擇。
二、建議
1. 精簡設置項
避免堆砌過多功能，影響用戶體驗；
定期清理不再使用或影響較低的設置項；
將不常用的設置歸類為“高級設置”或隱藏在折疊菜單中。
2. 預設合理默認值，減少為「設置」而設置
為大部分用戶提供適用的默認設置，減少調整設置的需求。
三、設置項布局和層次不清晰
設置界面通常匯集了產品內的多個業務設置項，如果不對設置項的信息結構進行梳理，進行合理的歸類，很有可能用戶一進來就迷失在一片列表中，無法「快速」找到想要的設置入口。
建議
可以通過以下方式進行有效的信息歸類：
1. 邏輯分組
將設置項按功能或主題進行分組，例如“賬戶設置”、“通知設置”、“隱私設置”等。
2. 層次分明
使用標題、分隔線或間距區分各組設置，避免信息雜亂。
3. 避免過多層級
層級過深會增加用戶操作成本，通常建議限制在2-3層內。
四、布局不統一
多數設置頁面是一次次迭代豐富的，需要在設計之初就定義好設置頁面的設計規范，避免在每次迭代后因為沒有保持統一的對齊方式，開關時左時右，導致界面信息布局混亂，用戶易用性較差。
建議
1. 統一的樣式
按鈕、滑塊、輸入框等交互元素在界面中保持一致的風格和大小。
2. 合適的對齊方式
采用左對齊或右對齊，使內容更加整齊，便于閱讀。
3. 定義設置項類型及應用場景
按照布局方式定義設置項類型，如橫向設置項、縱向設置項，以及通欄設置項，保證界面整潔易用。橫向設置項
當設置項以開啟、選擇等方式居多，操作動線為由左至右，可使用橫向設置項，保持布局為左右結構，操作居左。
若需要有單選設置時，可采用通欄設置項
縱向設置項
當設置項以多選、單選方式居多，操作動線為由上至下，可使用縱設置項，保持布局為上下結構，操作相對居右。
當某些設置項無法遵從縱向布局時，可輔助使用通欄設置項
五、設置項描述不清晰
釘釘的業務場景中有很多業務形態通過文案無法描述清楚，如果設置項僅有文案，用戶是無法感知到設置后的效果及反饋，用戶只能靠猜或試錯。
建議
1. 易懂的語言
避免技術用語，確保普通用戶能理解每個設置的功能。
2. 傳遞用戶價值
避免業務視角或技術視角的功能描述，告知能給用戶帶來的價值。
3. 圖文結合
有些設置通過文案無法精準描述，可以采用圖文結合的方式，讓用戶更有體感。
六、使用雙重否定描述
有些設置項默認是開啟的，業務在描述設置項時，會站在業務視角，描述為禁止開啟某某功能，開關是關閉的，這種雙重否定表達跟用戶的直觀反應并不一致，用戶進入設置后尋找的線索是「關閉」這個功能，而非「開啟」。建議設置項采用正向肯定描述語句
無論功能默認開啟或關閉，設置項都應該表述為開啟功能帶來的結果及價值。
七、錯用開關和復選框組件
設置項開關（switch button）和復選框（check box）組件使用相對高頻，兩者的語義也有相似之處，可以用來表達是否選擇某個條件，因此會造成混用，帶來不符合用戶預期的結果。
1. 開關（switch button）
表示即時狀態的切換（如“開/關”、“啟用/禁用”）適用場景：設置中需要立即生效的功能（如開啟藍牙、啟用通知）。表示二元狀態，且用戶能即時看到切換結果。
建議：
只在狀態需要立即生效時使用。
避免用于多個功能的組合操作。
2. 復選框（check box）
表示一個或多個獨立的選擇項，選中表示啟用或選擇。適用場景：
表示多選選項（如用戶可以同時選擇多個興趣愛好）；
用于提交或批量應用的場景（如勾選多項后點擊“刪除”）。
建議：
用于表示多選或需要確認的選項；
避免在實時反饋場景中使用，防止誤導用戶。
八、設置結果不易感知
設置后，用戶預期要感受到設置的結果，比如界面發生了什么樣的變化，如果設計上欠考慮，未能及時傳遞設置的結果，就會導致用戶后知后覺，可能因為結果不符合預期，需要反復修改。建議：1. 設置界面用分欄替代彈窗
Gmail郵箱的設置通過在邊欄出現，能讓用戶對郵箱界面的的設置效果實時可見。
2. 效果可預覽
釘釘文檔的界面偏好設置則是通過一張動態變化的示意片，讓用戶感知到設置后界面的變化。
3. 去除影響預覽的阻礙
Slack的設置頁面是一個模態彈窗，當設置項跟當前界面沒有相關性時，會默認有一層遮罩，當設置項的結果會在界面上有反饋時，會把遮罩層去掉，讓設置者可以直觀感受到效果變化。
九、設計實踐
釘釘郵箱的設置界面也存在如下問題：
堆砌設置項，常用設置項未優先透出
設置項描述不清晰
設置結果不易感知
按照上述總結的經驗優化后：
把常用設置項優先透出，不再低效查找
設置頁面和主界面在同一窗口，讓設置結果所見即所得
設置項通過圖文結合方式，一眼能懂
小結
理論永遠只是指導實踐的一部分，上述經驗是在用戶認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析，希望能幫到大家～
本文由人人都是產品經理作者【釘釘用戶體驗】，微信公眾號：【釘釘用戶體驗】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
哇，這篇關于設計設置頁面的文章太實用了！之前我用一些APP時，設置頁面總是讓人頭疼，現在才知道原來有這么多坑。希望設計師們都能避開這些坑，給我們帶來更順滑的使用體驗呀！