一、隨處可見的齒輪

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

在一些產(chǎn)品團(tuán)隊(duì)的眼里，“設(shè)置”或許是一件非常簡(jiǎn)單的事情，因?yàn)榇蠖嘣O(shè)置模塊的使用頻次低，無(wú)關(guān)核心業(yè)務(wù)。所以當(dāng)內(nèi)容看似非常簡(jiǎn)單明確時(shí)，“設(shè)置”甚至?xí)唤?jīng)設(shè)計(jì)，由開發(fā)直接上手就干。但這樣簡(jiǎn)單處理的結(jié)果被擺到用戶面前時(shí)，各種糟糕的體驗(yàn)就紛至沓來(lái)了。找不到設(shè)置入口、不知道該如何設(shè)置的用戶吐槽屢見不鮮。所以說(shuō)，“設(shè)置”，說(shuō)簡(jiǎn)單也不簡(jiǎn)單。

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

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

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

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

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

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

而以技術(shù)導(dǎo)向的工具型產(chǎn)品為典例，繁雜的系統(tǒng)設(shè)置是產(chǎn)品為了滿足不同客戶間、復(fù)雜多變的業(yè)務(wù)規(guī)格，在系統(tǒng)中留出的彈性空間。在這個(gè)需求場(chǎng)景中，與產(chǎn)品對(duì)話的用戶一般是系統(tǒng)管理員或技術(shù)支持人員等，他們對(duì)系統(tǒng)方方面面的經(jīng)驗(yàn)認(rèn)知都很充足，甚至系統(tǒng)設(shè)置就是其主要工作模塊。所以，對(duì)于這類用戶場(chǎng)景下的“設(shè)置”模塊，“高效操作、成功結(jié)果”是至關(guān)重要的設(shè)計(jì)目標(biāo)。因?yàn)楦呒?jí)用戶往往不追求很強(qiáng)的互動(dòng)性，更希望跳過(guò)流程和步驟，直接切入功能得到理想結(jié)果。

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

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

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

• 設(shè)置前：如何向用戶展示設(shè)置內(nèi)容

• 設(shè)置中：如何設(shè)計(jì)用戶的輸入交互

• 設(shè)置后：如何保存生效或發(fā)生錯(cuò)誤的處理

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

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

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

首先，在“設(shè)置”內(nèi)部規(guī)劃一個(gè)合理且清晰的導(dǎo)航，需要在信息的深度和廣度之間做好平衡。平衡架構(gòu)的天然敵人少不了信息量冗雜這個(gè)令人頭疼的問題。無(wú)論是在單個(gè)層級(jí)中內(nèi)容過(guò)多，還是層級(jí)本身過(guò)多，都會(huì)給用戶的快速定位帶來(lái)考驗(yàn)。而通過(guò)調(diào)研發(fā)現(xiàn)，如Google、Salesforce等產(chǎn)品都選擇在復(fù)雜的“設(shè)置”模塊引入了全局搜索來(lái)幫助用戶緩解查找某一功能的壓力。

信息量冗雜帶來(lái)的考驗(yàn)還有那些零散的、彼此關(guān)聯(lián)不強(qiáng)的設(shè)置項(xiàng)。對(duì)他們的架構(gòu)安排，很容易因?yàn)椴恢涝趺唇M織，便一股腦地塞進(jìn)諸如“通用”、“高級(jí)”等的模糊分類中，不過(guò)這可謂是十足的懶人設(shè)計(jì)。想要搞定這些難搞的信息，設(shè)計(jì)者需要對(duì)設(shè)置內(nèi)容有更深入的研究和理解，搞清楚它改變了什么、會(huì)影響什么以及后續(xù)是否會(huì)拓展更多關(guān)聯(lián)設(shè)置，等等。

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

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

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

1、適合以表單形式組織的內(nèi)容：一般是具有獨(dú)立影響又擁有相同特征標(biāo)簽的單條數(shù)據(jù)被整合到一個(gè)分組下進(jìn)行展示與配置

2、適合以表格形式組織的內(nèi)容：一般是具有相同固定結(jié)構(gòu)的數(shù)據(jù)集需要進(jìn)行統(tǒng)一管理，包括組層面的增刪等

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

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

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

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

了解用戶習(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ì)，恰到好處的幫助說(shuō)明也可以讓設(shè)置的用戶體驗(yàn)變得更好。

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

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

所以，不難想象，設(shè)置模塊的說(shuō)明概率會(huì)遠(yuǎn)高于產(chǎn)品的主體功能模塊。進(jìn)一步探究幫助說(shuō)明的設(shè)計(jì)：從形式來(lái)說(shuō)，它可以是文案、配圖甚至是一個(gè)視頻講解；從強(qiáng)度來(lái)說(shuō)，它可以一次性出現(xiàn)、常駐于頁(yè)面或是直接跳轉(zhuǎn)幫助文檔等。大多數(shù)用戶并不希望在設(shè)置模塊獲得探索的樂趣，所以無(wú)論如何設(shè)計(jì)，幫助其快速完成任務(wù)是我們?cè)谠O(shè)計(jì)“設(shè)置”時(shí)非常重要的一個(gè)追求。

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

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

1、每一項(xiàng)配置都即時(shí)生效

2、整個(gè)表單統(tǒng)一提交后生效

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

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

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

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

1、實(shí)時(shí)的操作反饋可以幫助用戶判斷是否生效

2、盡量控制設(shè)置內(nèi)容在一屏以內(nèi)，這樣無(wú)論是否設(shè)計(jì)統(tǒng)一提交的按鈕（或者更改后出現(xiàn)），用戶都可以輕易感知

3、將統(tǒng)一提交的按鈕以懸浮方式明顯地駐于頁(yè)面底部，減輕內(nèi)容超出一屏?xí)r的認(rèn)知壓力

4、慎重處理如開關(guān)、按鈕、滑塊等帶有很強(qiáng)“即時(shí)生效”隱喻的控件

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

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

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

文章來(lái)源：站酷 作者：齊治設(shè)計(jì)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)