編輯導(dǎo)語：許多看起來簡單的設(shè)計(jì)場景，可能隱藏著容易被忽略的用戶體驗(yàn)問題。“設(shè)置”場景便是其中之一。那么，站在用戶使用的角度上來看，“設(shè)置”場景要如何設(shè)計(jì)，才能給予用戶完善的體驗(yàn)？本文作者就此做了總結(jié)，一起來看一下。

一、隨處可見的齒輪

以一個小小的齒輪（或者扳手）形象登場，“設(shè)置”在幾乎所有產(chǎn)品中都是不可回避的模塊，它允許用戶在彈性范圍內(nèi)自定義產(chǎn)品，來更好地適應(yīng)實(shí)際需求。

在一些產(chǎn)品團(tuán)隊(duì)的眼里，“設(shè)置”或許是一件非常簡單的事情，因?yàn)榇蠖嘣O(shè)置模塊的使用頻次低，無關(guān)核心業(yè)務(wù)。所以當(dāng)內(nèi)容看似非常簡單明確時(shí)，“設(shè)置”甚至?xí)唤?jīng)設(shè)計(jì)，由開發(fā)直接上手就干。

但這樣簡單處理的結(jié)果被擺到用戶面前時(shí)，各種糟糕的體驗(yàn)就紛至沓來了。找不到設(shè)置入口、不知道該如何設(shè)置的用戶吐槽屢見不鮮。所以說，“設(shè)置”，說簡單也不簡單。

下面我們就從用戶場景出發(fā)，深入挖掘設(shè)計(jì)邏輯，重新認(rèn)識這個隨處可見的小齒輪。

二、“設(shè)置”的用戶場景

調(diào)研發(fā)現(xiàn)，不同性質(zhì)、體量的產(chǎn)品，“設(shè)置”模塊的功能設(shè)計(jì)存在著不小的差異。

ToC產(chǎn)品一般會提供關(guān)于用戶自身使用習(xí)慣的設(shè)置，如界面語言、皮膚主題等。而對于ToB產(chǎn)品來說，除了部分與ToC產(chǎn)品重疊的用戶個性化設(shè)置內(nèi)容外，往往還有作用于整個平臺、全體用戶的系統(tǒng)設(shè)置權(quán)限，當(dāng)然他們的可見用戶并不是全體成員。

從上述對功能的簡單描述可以初見，“設(shè)置”模塊的目標(biāo)用戶也不會是一成不變的。

拿我們?nèi)粘８哳l使用的瀏覽器產(chǎn)品來說，設(shè)置是開放給全體用戶的功能模塊，但它的使用頻次很低，如一些關(guān)于性能、證書的配置，即使是瀏覽器的熟練使用者也可能對它很陌生。

也就是說，哪怕是產(chǎn)品的高級用戶，也可能是“設(shè)置”模塊的新手用戶。

而以技術(shù)導(dǎo)向的工具型產(chǎn)品為典例，繁雜的系統(tǒng)設(shè)置是產(chǎn)品為了滿足不同客戶間、復(fù)雜多變的業(yè)務(wù)規(guī)格，在系統(tǒng)中留出的彈性空間。

在這個需求場景中，與產(chǎn)品對話的用戶一般是系統(tǒng)管理員或技術(shù)支持人員等，他們對系統(tǒng)方方面面的經(jīng)驗(yàn)認(rèn)知都很充足，甚至系統(tǒng)設(shè)置就是其主要工作模塊。所以，對于這類用戶場景下的“設(shè)置”模塊，“高效操作、成功結(jié)果”是至關(guān)重要的設(shè)計(jì)目標(biāo)。因?yàn)楦呒売脩敉蛔非蠛軓?qiáng)的互動性，更希望跳過流程和步驟，直接切入功能得到理想結(jié)果。

面向不同的目標(biāo)用戶，自然有不同的設(shè)計(jì)邏輯，本文接下來的內(nèi)容，或有共同之處，但更側(cè)重于面向第二種情況的思考。

三、“設(shè)置”的設(shè)計(jì)邏輯

思考“設(shè)置”的用戶場景，使得設(shè)計(jì)邏輯的探討更加有據(jù)可依。簡單來看，“設(shè)置”的設(shè)計(jì)可以從三個環(huán)節(jié)切入：

• 設(shè)置前：如何向用戶展示設(shè)置內(nèi)容；
• 設(shè)置中：如何設(shè)計(jì)用戶的輸入交互；
• 設(shè)置后：如何保存生效或發(fā)生錯誤的處理。

接下來我也將從這三個環(huán)節(jié)發(fā)散思考，從信息架構(gòu)、展示編輯、默認(rèn)值、幫助說明以及保存等多個方面來談?wù)勎覍Α霸O(shè)置”的一些看法。

1. 做好內(nèi)容的信息架構(gòu)

成熟的“設(shè)置”模塊，必然擁有良好的信息架構(gòu)。

這不僅是指“設(shè)置”內(nèi)部的導(dǎo)航設(shè)計(jì)，同時(shí)也包括“設(shè)置”在整個產(chǎn)品的層級安排。這些導(dǎo)航、層級的確定，則會受內(nèi)容信息體量、功能重要程度等影響。

首先，在“設(shè)置”內(nèi)部規(guī)劃一個合理且清晰的導(dǎo)航，需要在信息的深度和廣度之間做好平衡。

平衡架構(gòu)的天然敵人少不了信息量冗雜這個令人頭疼的問題。無論是在單個層級中內(nèi)容過多，還是層級本身過多，都會給用戶的快速定位帶來考驗(yàn)。如Google、Salesforce等產(chǎn)品都選擇在復(fù)雜的“設(shè)置”模塊引入了全局搜索來幫助用戶緩解查找某一功能的壓力。

信息量冗雜帶來的考驗(yàn)還有那些零散的、彼此關(guān)聯(lián)不強(qiáng)的設(shè)置項(xiàng)。對他們的架構(gòu)安排，很容易因?yàn)椴恢涝趺唇M織，便一股腦地塞進(jìn)諸如“通用”、“高級”等的模糊分類中，這可謂是十足的懶人設(shè)計(jì)。

想要搞定這些難搞的信息，設(shè)計(jì)者需要對設(shè)置內(nèi)容有更深入的研究和理解，搞清楚它改變了什么、會影響什么以及后續(xù)是否會拓展更多關(guān)聯(lián)設(shè)置，等等。

還有一個值得思考的細(xì)節(jié)：對于豐富多樣的設(shè)置項(xiàng)來說，是將他們散落到直接影響的功能模塊中合適，還是匯總于一個設(shè)置模塊中更合適呢？或許在不同的場景里答案并不一致，我覺得這需要綜合考慮該設(shè)置項(xiàng)的放權(quán)角色、配置頻率、配置影響等因素，很難一錘定音。

2. 設(shè)置內(nèi)容的展示與編輯

完成“設(shè)置”模塊的基本架構(gòu)后，就該將目光投向那些具體的設(shè)置項(xiàng)了。就常見的設(shè)置內(nèi)容而言，根據(jù)其適合的展示形式進(jìn)行簡單的抽象，主要分為以下兩種：

1. 適合以表單形式組織的內(nèi)容：一般是具有獨(dú)立影響又擁有相同特征標(biāo)簽的單條數(shù)據(jù)被整合到一個分組下進(jìn)行展示與配置；
2. 適合以表格形式組織的內(nèi)容：一般是具有相同固定結(jié)構(gòu)的數(shù)據(jù)集需要進(jìn)行統(tǒng)一管理，包括組層面的增刪等。

為每一個內(nèi)容選擇最合適的展示形式（當(dāng)然也并不僅是上述兩種），這個選擇大多時(shí)候并不困難，因?yàn)椤霸O(shè)置”場景的目標(biāo)導(dǎo)向往往比較明確、直接。當(dāng)然也不排除部分復(fù)雜場景的存在，這就需要我們多花些心思，以用戶更易理解的展示形式完成功能性的表達(dá)。

在“設(shè)置”模塊，展示與編輯的聯(lián)系非常緊密。直接編輯和解鎖后編輯的選擇，主要取決于用戶進(jìn)入頁面的常規(guī)訴求是查看確認(rèn)還是編輯修改，以及這些設(shè)置內(nèi)容的改動容錯性是否良好，等等。

3. 默認(rèn)值與幫助說明里的用戶體驗(yàn)

在本文討論的“設(shè)置”場景中，每一個更改都可能對整個平臺乃至全體用戶產(chǎn)生影響。通過調(diào)研，我們發(fā)現(xiàn)多數(shù)用戶對于默認(rèn)值的沿用性不低。故，對于那些需要默認(rèn)值的設(shè)置項(xiàng)，選擇一個合適的默認(rèn)值是值得審慎對待的問題。

了解用戶習(xí)慣和業(yè)務(wù)需求是解題的關(guān)鍵。什么樣的默認(rèn)值最貼合用戶的使用習(xí)慣，什么樣的默認(rèn)值能以最佳狀態(tài)滿足業(yè)務(wù)需求。例如，我們的堡壘機(jī)產(chǎn)品一般將日志保留時(shí)間的默認(rèn)值設(shè)為365天，便是考慮到了用戶習(xí)慣與產(chǎn)品性能的微妙平衡。

除了默認(rèn)值的設(shè)計(jì)，恰到好處的幫助說明也可以讓設(shè)置的用戶體驗(yàn)變得更好。

我時(shí)?？吹健霸O(shè)計(jì)的目標(biāo)應(yīng)該是完全刪除說明文字”之類的論述，這好像正契合了簡約至上、不要讓用戶思考等當(dāng)下流行的宗旨。但，正如尼爾森十大原則的最后一條“人性化幫助原則”也指出，幫助和使用文檔是有必要的。

結(jié)合“設(shè)置”的自身的特點(diǎn)：這是一個對產(chǎn)品進(jìn)行底層配置（相對其他模塊而言）的控制模塊，對用戶的認(rèn)知與學(xué)習(xí)能力有著不低的門檻要求。也就是說，設(shè)置的內(nèi)容對于用戶是有一定難度的。我們需要更多考慮內(nèi)容的幫助說明是否充足，不要想當(dāng)然覺得用戶能夠理解。

所以，不難想象，設(shè)置模塊的說明概率會遠(yuǎn)高于產(chǎn)品的主體功能模塊。進(jìn)一步探究幫助說明的設(shè)計(jì)：從形式來說，它可以是文案、配圖甚至是一個視頻講解；從強(qiáng)度來說，它可以一次性出現(xiàn)、常駐于頁面或是直接跳轉(zhuǎn)幫助文檔等。

大多數(shù)用戶并不希望在設(shè)置模塊獲得探索的樂趣，所以無論如何設(shè)計(jì)，幫助其快速完成任務(wù)是我們在設(shè)計(jì)“設(shè)置”時(shí)非常重要的一個追求。

4. 二次提交與即時(shí)生效

“保存了嗎”這不僅是每個設(shè)計(jì)師在電腦卡機(jī)時(shí)候會問自己的問題，也是用戶在完成一系列配置操作后的疑惑。這就牽扯到了設(shè)置何時(shí)生效的問題。最常見的交互方案有兩種：

1. 每一項(xiàng)配置都即時(shí)生效；
2. 整個表單統(tǒng)一提交后生效。

那么，哪一種方式更好？我繼續(xù)嘗試從業(yè)務(wù)需求和用戶習(xí)慣兩個方面入手：

“設(shè)置”模塊的操作往往牽一發(fā)而動全身，試錯成本其實(shí)是非常大的。之前聽產(chǎn)品經(jīng)理說過一個銀行客戶因?yàn)樾薷牧四硞€小小配置項(xiàng)，而造成了巨大實(shí)際損失的例子。所以，在這樣一個控制中樞般地位的模塊中，即時(shí)生效的選用必須謹(jǐn)慎評估操作風(fēng)險(xiǎn)，減少用戶輕易出錯的機(jī)會。

同時(shí)，由于即時(shí)生效和表單提交這兩種交互方式都非常常見，用戶天然存在一種認(rèn)知壓力，也就是上面提到的“保存了嗎”的不確定。所以，我們需要通過設(shè)計(jì)，讓用戶快速且準(zhǔn)確地知道當(dāng)前頁面采用的是何種保存交互。

從調(diào)研和自身經(jīng)驗(yàn)得出，以下幾點(diǎn)都是比較好的思路：

1. 實(shí)時(shí)的操作反饋可以幫助用戶判斷是否生效；
2. 盡量控制設(shè)置內(nèi)容在一屏以內(nèi)，這樣無論是否設(shè)計(jì)統(tǒng)一提交的按鈕（或者更改后出現(xiàn)），用戶都可以輕易感知；
3. 將統(tǒng)一提交的按鈕以懸浮方式明顯地駐于頁面底部，減輕內(nèi)容超出一屏?xí)r的認(rèn)知壓力；
4. 慎重處理如開關(guān)、按鈕、滑塊等帶有很強(qiáng)“即時(shí)生效”隱喻的控件。

四、簡單也不簡單的“設(shè)置”

對于很多產(chǎn)品產(chǎn)品而言，“設(shè)置”是點(diǎn)擊率不高的輔助模塊。由開發(fā)人員直接上手，設(shè)置項(xiàng)很容易就變成機(jī)器語言的直譯、迭代順序下的鋪陳，而用戶是否可以接受這種簡單粗暴的處理，就成了阿甘手中的那盒巧克力。

從關(guān)于“設(shè)置”的論述以小見大，哪怕是看似簡單的角落，也存在著不簡單的設(shè)計(jì)邏輯。如果說，設(shè)計(jì)對于商業(yè)的價(jià)值在于推動溝通，那么理想狀態(tài)下，我們應(yīng)當(dāng)保證產(chǎn)品與用戶的對話“時(shí)刻”流暢。所以，不要草率處置那些不起眼的邊緣模塊或簡單功能的設(shè)計(jì)。

本文由@齊治設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議