設(shè)置頁面雖小，卻直接影響用戶體驗。一個設(shè)計不佳的設(shè)置頁面，可能會讓用戶在遇到問題時更加焦慮，而一個精心設(shè)計的設(shè)置頁面，則能幫助用戶快速解決問題，提升對產(chǎn)品的整體滿意度。本文將分享設(shè)計設(shè)置頁面時常見的7個坑，以及如何避免這些坑，幫助設(shè)計師們打造出更加友好、高效的設(shè)置頁面。

一、堆砌設(shè)置項

設(shè)置功能在產(chǎn)品設(shè)計中通常不是最顯眼的部分，用戶遇到問題才會想到進入設(shè)置里解決。此刻的用戶一定是焦躁不安的，因此設(shè)置界面的體驗好壞決定了用戶對這款產(chǎn)品的評價，體驗好的設(shè)置面板設(shè)計會讓用戶的問題迎刃而解；不好的體驗則會讓本已在壞情緒中的用戶放大對產(chǎn)品的負面印象。

在釘釘相關(guān)產(chǎn)品的設(shè)置頁面設(shè)計中，踩過不少坑，跟設(shè)計師朋友們分享以下7個常見的「坑」，幫助大家避坑！

產(chǎn)品設(shè)計中，有些設(shè)置項其實不需要交給用戶來做選擇，但因為產(chǎn)品內(nèi)部無法達成一致時，就會想到通過增加設(shè)置項作為個性化功能交給用戶來做選擇，比如導(dǎo)航的寬窄，內(nèi)容的緊湊度，這部分「設(shè)置」功能不是用戶出于第一性原理會想到的，缺少實際使用場景，是產(chǎn)品強加給用戶的選擇。

二、建議

1. 精簡設(shè)置項

避免堆砌過多功能，影響用戶體驗；

定期清理不再使用或影響較低的設(shè)置項；

將不常用的設(shè)置歸類為“高級設(shè)置”或隱藏在折疊菜單中。

2. 預(yù)設(shè)合理默認值，減少為「設(shè)置」而設(shè)置

為大部分用戶提供適用的默認設(shè)置，減少調(diào)整設(shè)置的需求。

三、設(shè)置項布局和層次不清晰

設(shè)置界面通常匯集了產(chǎn)品內(nèi)的多個業(yè)務(wù)設(shè)置項，如果不對設(shè)置項的信息結(jié)構(gòu)進行梳理，進行合理的歸類，很有可能用戶一進來就迷失在一片列表中，無法「快速」找到想要的設(shè)置入口。

可以通過以下方式進行有效的信息歸類：

1. 邏輯分組

將設(shè)置項按功能或主題進行分組，例如“賬戶設(shè)置”、“通知設(shè)置”、“隱私設(shè)置”等。

2. 層次分明

使用標題、分隔線或間距區(qū)分各組設(shè)置，避免信息雜亂。

3. 避免過多層級

層級過深會增加用戶操作成本，通常建議限制在2-3層內(nèi)。

四、布局不統(tǒng)一

多數(shù)設(shè)置頁面是一次次迭代豐富的，需要在設(shè)計之初就定義好設(shè)置頁面的設(shè)計規(guī)范，避免在每次迭代后因為沒有保持統(tǒng)一的對齊方式，開關(guān)時左時右，導(dǎo)致界面信息布局混亂，用戶易用性較差。

建議

1. 統(tǒng)一的樣式

按鈕、滑塊、輸入框等交互元素在界面中保持一致的風格和大小。

2. 合適的對齊方式

采用左對齊或右對齊，使內(nèi)容更加整齊，便于閱讀。

3. 定義設(shè)置項類型及應(yīng)用場景

按照布局方式定義設(shè)置項類型，如橫向設(shè)置項、縱向設(shè)置項，以及通欄設(shè)置項，保證界面整潔易用。橫向設(shè)置項

當設(shè)置項以開啟、選擇等方式居多，操作動線為由左至右，可使用橫向設(shè)置項，保持布局為左右結(jié)構(gòu)，操作居左。

若需要有單選設(shè)置時，可采用通欄設(shè)置項

縱向設(shè)置項

當設(shè)置項以多選、單選方式居多，操作動線為由上至下，可使用縱設(shè)置項，保持布局為上下結(jié)構(gòu)，操作相對居右。

當某些設(shè)置項無法遵從縱向布局時，可輔助使用通欄設(shè)置項

五、設(shè)置項描述不清晰

釘釘?shù)臉I(yè)務(wù)場景中有很多業(yè)務(wù)形態(tài)通過文案無法描述清楚，如果設(shè)置項僅有文案，用戶是無法感知到設(shè)置后的效果及反饋，用戶只能靠猜或試錯。

建議

1. 易懂的語言

避免技術(shù)用語，確保普通用戶能理解每個設(shè)置的功能。

2. 傳遞用戶價值

避免業(yè)務(wù)視角或技術(shù)視角的功能描述，告知能給用戶帶來的價值。

3. 圖文結(jié)合

有些設(shè)置通過文案無法精準描述，可以采用圖文結(jié)合的方式，讓用戶更有體感。

六、使用雙重否定描述

有些設(shè)置項默認是開啟的，業(yè)務(wù)在描述設(shè)置項時，會站在業(yè)務(wù)視角，描述為禁止開啟某某功能，開關(guān)是關(guān)閉的，這種雙重否定表達跟用戶的直觀反應(yīng)并不一致，用戶進入設(shè)置后尋找的線索是「關(guān)閉」這個功能，而非「開啟」。建議設(shè)置項采用正向肯定描述語句

無論功能默認開啟或關(guān)閉，設(shè)置項都應(yīng)該表述為開啟功能帶來的結(jié)果及價值。

七、錯用開關(guān)和復(fù)選框組件

設(shè)置項開關(guān)（switch button）和復(fù)選框（check box）組件使用相對高頻，兩者的語義也有相似之處，可以用來表達是否選擇某個條件，因此會造成混用，帶來不符合用戶預(yù)期的結(jié)果。

1. 開關(guān)（switch button）

表示即時狀態(tài)的切換（如“開/關(guān)”、“啟用/禁用”）適用場景：設(shè)置中需要立即生效的功能（如開啟藍牙、啟用通知）。表示二元狀態(tài)，且用戶能即時看到切換結(jié)果。

建議：

只在狀態(tài)需要立即生效時使用。

避免用于多個功能的組合操作。

2. 復(fù)選框（check box）

表示一個或多個獨立的選擇項，選中表示啟用或選擇。適用場景：

表示多選選項（如用戶可以同時選擇多個興趣愛好）；

用于提交或批量應(yīng)用的場景（如勾選多項后點擊“刪除”）。

建議：

用于表示多選或需要確認的選項；

避免在實時反饋場景中使用，防止誤導(dǎo)用戶。

八、設(shè)置結(jié)果不易感知

設(shè)置后，用戶預(yù)期要感受到設(shè)置的結(jié)果，比如界面發(fā)生了什么樣的變化，如果設(shè)計上欠考慮，未能及時傳遞設(shè)置的結(jié)果，就會導(dǎo)致用戶后知后覺，可能因為結(jié)果不符合預(yù)期，需要反復(fù)修改。建議：

1. 設(shè)置界面用分欄替代彈窗

Gmail郵箱的設(shè)置通過在邊欄出現(xiàn)，能讓用戶對郵箱界面的的設(shè)置效果實時可見。

2. 效果可預(yù)覽

釘釘文檔的界面偏好設(shè)置則是通過一張動態(tài)變化的示意片，讓用戶感知到設(shè)置后界面的變化。

3. 去除影響預(yù)覽的阻礙

Slack的設(shè)置頁面是一個模態(tài)彈窗，當設(shè)置項跟當前界面沒有相關(guān)性時，會默認有一層遮罩，當設(shè)置項的結(jié)果會在界面上有反饋時，會把遮罩層去掉，讓設(shè)置者可以直觀感受到效果變化。

九、設(shè)計實踐

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

• 堆砌設(shè)置項，常用設(shè)置項未優(yōu)先透出
• 設(shè)置項描述不清晰
• 設(shè)置結(jié)果不易感知

按照上述總結(jié)的經(jīng)驗優(yōu)化后：

• 把常用設(shè)置項優(yōu)先透出，不再低效查找
• 設(shè)置頁面和主界面在同一窗口，讓設(shè)置結(jié)果所見即所得
• 設(shè)置項通過圖文結(jié)合方式，一眼能懂

小結(jié)

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