不再隱藏了！設計「設定頁面」時會遇到的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的設置頁面是一個模態彈窗，當設置項跟當前界面沒有相關性時，會預設有一層遮罩，當設置項的結果會在界面上有反饋時，會把遮罩層去掉，讓設置者可以直觀感受到效果變化。

設計實踐

釘釘郵箱的設置界面也存在如下問題：

● 堆砌設置項，常用設置項未優先透出

● 設置項描述不清晰

● 設置結果不易感知

按照上述總結的經驗優化後：

● 把常用設置項優先透出，不再低效查找

● 設置頁面和主界面在同一窗口，讓設置結果所見即所得

● 設置項通過圖文結合方式，一眼能懂

小結

理論永遠只是指導實踐的一部分，上述經驗是在用戶認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析，希望能幫到大家～

多姆科技（DomTech）是釘釘在香港的官方指定服務商，專門為廣大客戶提供釘釘服務。如果您還想瞭解更多釘釘平臺應用的內容，可以直接諮詢我們的在線客服，或者通过电话+852 56253886或邮箱cs@dingtalk.com.hk联系我们。我們有優秀的開發和運維團隊，豐富的市場服務經驗，可以為您提供專業的釘釘解決方案和服務！