一、隨處可見(jiàn)的齒輪

以一個(gè)小小的齒輪（或者扳手）形象登場(chǎng)，“設(shè)置”在幾乎所有產(chǎn)品中都是不可回避的模塊，他允許用戶(hù)在彈性范圍內(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ì)，由開(kāi)發(fā)直接上手就干。但這樣簡(jiǎn)單處理的結(jié)果被擺到用戶(hù)面前時(shí)，各種糟糕的體驗(yàn)就紛至沓來(lái)了。找不到設(shè)置入口、不知道該如何設(shè)置的用戶(hù)吐槽屢見(jiàn)不鮮。所以說(shuō)，“設(shè)置”，說(shuō)簡(jiǎn)單也不簡(jiǎn)單。

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

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

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

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

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

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

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

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

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

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

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

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

• 設(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èn)題。無(wú)論是在單個(gè)層級(jí)中內(nèi)容過(guò)多，還是層級(jí)本身過(guò)多，都會(huì)給用戶(hù)的快速定位帶來(lái)考驗(yàn)。而通過(guò)調(diào)研發(fā)現(xiàn)，如Google、Salesforce等產(chǎn)品都選擇在復(fù)雜的“設(shè)置”模塊引入了全局搜索來(lái)幫助用戶(hù)緩解查找某一功能的壓力。

信息量冗雜帶來(lái)的考驗(yàn)還有那些零散的、彼此關(guān)聯(lián)不強(qiáng)的設(shè)置項(xiàng)。對(duì)他們的架構(gòu)安排，很容易因?yàn)椴恢涝趺唇M織，便一股腦地塞進(jìn)諸如“通用”、“高級(jí)”等的模糊分類(lèi)中，不過(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)景里答案并不一致，我覺(jué)得這需要綜合考慮該設(shè)置項(xiàng)的放權(quán)角色、配置頻率、配置影響等因素。

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

完成“設(shè)置”模塊的基本架構(gòu)后，就該將目光投向那些具體的設(shè)置項(xiàng)了。就常見(jiàn)的設(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)景的存在，這就需要我們多花些心思，以用戶(hù)更易理解的展示形式完成功能性的表達(dá)。

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

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

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

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

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

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

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

所以，不難想象，設(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ù)用戶(hù)并不希望在設(shè)置模塊獲得探索的樂(lè)趣，所以無(wú)論如何設(shè)計(jì)，幫助其快速完成任務(wù)是我們?cè)谠O(shè)計(jì)“設(shè)置”時(shí)非常重要的一個(gè)追求。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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