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

一、堆砌設(shè)置項(xiàng)

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

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

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

二、建議

1. 精簡(jiǎn)設(shè)置項(xiàng)

避免堆砌過多功能，影響用戶體驗(yàn)；

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

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

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

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

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

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

可以通過以下方式進(jìn)行有效的信息歸類：

1. 邏輯分組

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

2. 層次分明

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

3. 避免過多層級(jí)

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

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

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

建議

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

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

2. 合適的對(duì)齊方式

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

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

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

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

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

縱向設(shè)置項(xiàng)

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

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

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

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

建議

1. 易懂的語言

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

2. 傳遞用戶價(jià)值

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

3. 圖文結(jié)合

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

六、使用雙重否定描述

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

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

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

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

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

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

建議：

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

避免用于多個(gè)功能的組合操作。

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

表示一個(gè)或多個(gè)獨(dú)立的選擇項(xiàng)，選中表示啟用或選擇。適用場(chǎng)景：

表示多選選項(xiàng)（如用戶可以同時(shí)選擇多個(gè)興趣愛好）；

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

建議：

用于表示多選或需要確認(rèn)的選項(xiàng)；

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

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

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

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

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

2. 效果可預(yù)覽

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

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

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

九、設(shè)計(jì)實(shí)踐

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

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

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

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

小結(jié)

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