設定是產品中非常邊緣的一個模組，但並不是可以不經思考就進行處置的。“不起眼”的設定背後也有一套設計邏輯，值得我們深入挖掘。
一、“設定（Settings）”是什麼
在產品設計中，設定（Settings）可能是最容易被人忽視和輕視的一塊內容。無論是非常之低的使用頻次，還是次之又次的優先等級，都使“設定”看起來像一個“不需要設計”的角落。
然而，“設定”是幾乎所有產品都難以迴避的一個模組，它的應用範圍可能比我們想象的要廣泛得多。無論是作業系統、軟體、網站，甚至是各種硬體裝置，都有著一個允許使用者自由定義產品的底層模組，幫助產品更好地適應每個人不同的需求，這就是我們熟悉又陌生的“設定（Settings）”了。
生活中的“設定”
為什麼是熟悉又陌生的“設定”呢？
熟悉，在於“小齒輪”形狀的icon已經如此深入人心。而陌生，一方面是使用者很少使用設定功能、很難預知完成任務的操作方法（想一想，你能夠背出“更改手機時區”的操作路徑麼？）；另一方面，設計者對設定模組的研究與理解也經常是不足的。
正因如此，我們生活中不乏各種各樣糟糕的“設定”設計——理論上能讓使用者實現隨心所欲、自由度極高的定製化操作，實際上卻彷彿把一架最新型號的戰鬥機隨意丟給普通人一樣，自帶一種“看不懂就別亂動”的威嚴氣場。
糟糕的“設定”介面
怎樣的“設定”才是滿足使用者需要的呢？我們首先要從“設定”的使用者特點開始分析。
二、“設定”場景的使用者：永遠的新手使用者
眾所周知，判斷使用者作業系統的熟練程度和經驗（即判斷使用者是新手使用者還是高階使用者），是繪製使用者畫像（Persona）中的重要一環，同時也是進行實操設計的基石。對於新手使用者和高階使用者，產品往往要提供截然不同的互動方式。
一個典型的例子是網站程式碼編輯器Dreamweaver，不僅為熟悉前端程式碼的高階使用者提供了程式碼編輯功能，同時也考慮到了程式設計小白的需求，提供了視覺化的網頁製作功能。
Dreamweaver互動介面，兼顧新手與熟練使用者的需求
那麼，言歸正傳，“設定”模組的使用者究竟是新手使用者還是高階使用者呢？
我們很容易在這裡走進一個誤區，認為會使用“自定義”、“個性化”這些複雜功能的，一定是高階使用者了。更何況，“設定”中通常還有“高階設定”這一個分類，顧名思義，肯定只有小部分專家級使用者才會用到這個功能了？
Chrome瀏覽器的設定，點選“高階”可以展開更多設定項
的確，使用到“設定”這個功能的，有很大機率是這款產品的重度使用者了。然而，由於需要使用到“設定”的頻次非常之低，更改設定的週期也非常長，使用者很難向熟悉產品那樣，逐步習得完成任務的路徑與方法。從這層意義上來說，即使是對產品非常熟悉的使用者，對於“設定”這個模組而言，也依然是新手使用者，甚至永遠是新手使用者。
以我自己身上發生的事情為例——我用微信已經6年了，不僅能玩轉各種社交和支付功能，還用過各種各樣的小程式，可以說得上是典型的熟練使用者了。
一次，旁人告訴我，微信是可以自定義發現頁的內容的（我自己根本發現不了），於是我關閉了“漂流瓶”功能，因為我從來用不到它。然而過了半年左右，由於需要研究陌生人社交的一些互動方式，我想重新找回“漂流瓶”試一試，結果不難想象：我姑且是完成了任務，但此前的經驗派不上一點用場，探索的過程中伴隨著迷失和疑惑。
微信的“發現頁管理”路徑
三、“設定”模組設計的要點
在論證了“設定”模組的使用者永遠是新手使用者之後，我們接下來看看“設定”模組設計的要點與注意事項。這些小Tips是基於以下兩個事實而進行推導和提煉的：
第一，“設定”模組的使用者是新手使用者，新手使用者需要導航與互動方式更符合邏輯、任務步驟更循序漸進，而快捷與效率是其次的需要。
初學者更多地傾向於選項最少的結構性互動，這種互動通常有提示、限制、協助等幫助，形成特定的控制模式。熟練應用者則喜歡結構性、步驟性不是很強的互動，跳過一些特定的步驟和幫助，直接切入功能得到結果。——《通用設計法則》
第二，“設定”是對產品進行相對底層的控制，是有一定使用門檻的。如果產品是一輛車，那麼“設定”就是車的底盤，許多老司機也沒有親自檢修過。
“設定”之於產品，相當於底盤之於汽車
在這種情況下，對“設定”進行化繁為簡的最佳化是有一定限度的。簡約四策略中的刪除、組織、隱藏、轉移，幾乎可以說只剩“組織”和“隱藏”能夠適用。
在承認以上兩個前提條件的基礎上，我總結了下面幾個“設定”模組設計的要點：
1。 根據資訊體量規劃資訊架構
在處理任何更細緻的互動問題之前，我們必須對“設定”模組整體的資訊架構有一個合理的規劃，這一點即包括“設定”應當位於整體產品的哪一個層級（使用者如何觸達“設定”模組，也包括“設定”內部的導航設計與資訊結構。“設定”的資訊架構模式，主要是由“設定”在產品中的重要程度，以及“設定”內部的資訊體量決定的。
當“設定”的重要程度不高、體量相對輕時，下拉框導航+彈窗的形式就可以解決承載所有的資訊。這種互動方式的優勢在於減少頁面跳轉，減輕層級深度。
百度搜索的設定
但當“設定”的資訊非常複雜、體量很大的時候，就不應該吝惜頁面跳轉了，“設定”可以被視作擁有獨立場景的獨立模組（甚至某種意義上的子產品）來設計。
例如，Google Calendar在進入設定模組後，只在頂欄留了返回產品主介面的連結，而一級側邊導航則是完全獨立於日曆功能、僅為“設定”這個特殊場景服務的。
Google Calendar的設定
而Gmail在處理“設定”時，可能是為了減少頁面跳轉的感覺、力求資訊更加扁平，僅在“郵件展示區”替換了“設定”的內容，保留郵件應用的頂導、側導、快捷功能，但實際效果非常不盡如人意。設定資訊的分類只能利用視覺上很弱的三級導航（tab導航）來梳理，而 tab作為導航時，對於入口個數、標題名長度都是有要求和限制的，其實非常不適合Gmail設定的場景。
Gmail的設定
Gmail的案例再一次證明了，缺乏分析地減少層級、將資訊架構“拍扁”，是無法讓資訊更清晰的。
“設定”內部的資訊架構設計同樣值得思考，其重點在於導航的規劃，我們需要在資訊的深度和廣度之間做好平衡。
導航的深度與廣度
在很多情況下，需要設定的內容經常是零散的、彼此之間關聯不強的，對這些內容進行分類整理從來不是一件易事。而設計師很容易陷入的一個誤區是把所有“不知道怎麼歸類”的資訊，一股腦丟到“通用”、“常規”或“高階”裡。
Gmail的設定再次貢獻了一個反例——由於“常規”欄目下沒有更詳細的分類，整個頁面的資訊量非常冗雜，使用者完全無法快速找到自己需要的內容。“編輯郵件簽名”是一個相當常用的功能，然而在Gmail中，使用者需要在“設定-常規”欄目下，滾動到至少第三屏才能找到它的位置。
Gmail的常規設定
改善這個問題的方案其實並不複雜。139郵箱的設定模組中，在“常規設定”下還有更詳細的二級導航，儘管頁面很長，但導航提供了一個很好的“概覽”功能。在這個場景下，擴充套件性強的側邊導航優勢非常明顯。
139郵箱的設定
另一個可行的方案是善用資訊的“摺疊”與“展開”、例如新浪微博的訊息設定中，“@我的”、“評論”、“贊”、“私信”等不同的訊息型別都是摺疊起來的，僅外顯標題，只有當用戶點選“編輯”時，才會展開相應的區域。
新浪微博的設定
但這種方式也有使用的限制條件，只有當設定項比較容易理解、使用者對需要編輯的內容比較熟悉的時候，大面積隱藏資訊才是適用的。
2。 適當的說明與提示
“介面設計中是否需要提供足夠的說明與提示”——這個問題經常是富有爭議的。
一方面，人們常常說起，“好的產品不需要說明書”、“好的導航能夠自我解釋”、“設計需要不言自明”；另一方面，著名的尼爾森10項可用性原則又指出，“幫助及使用文件是必要的”。
尼爾森10項可用性原則
那麼，在“設定”中應當如何平衡這個問題呢？
考慮到我們上文已經提到的，“設定”的使用者是永遠的新手使用者，且設定的內容對於使用者是有一定難度的，我們可以認為，在“設定”模組中，說明與提示出現的機率要更高，遠遠高於產品的主體功能模組（即那些使用者可以在探索中獲得樂趣、在反覆使用中漸漸熟悉的功能）。
因此，在設計“設定”模組的資訊時，需要格外考慮說明與提示的資訊是否充足，而不要輕易以為“使用者能夠理解這些”。
例如，Google賬號的設定模組中，不僅出現了大量的介紹說明文案，還給出了生動的配圖，加深使用者對資訊的理解。
Google 賬戶的設定
另外，在進行解釋說明時，圖片傳遞資訊的能力往往比文字更強。下圖為華為榮耀電視盒子的“播放設定”介面，“音影片輸出方式”對於大多數使用者都是難以理解的，但透過配圖，我們可以理解到，它與硬體線路的連結方式有關。
榮耀盒子的播放設定
影象提示的衍生物就是“預覽”功能。使用者穿梭在一系列設定表單之間，只能看到各種各樣的下拉選單、Radio（單選）與CheckBox（多選），但變更選項後，真正生效的位置卻非常遙遠。在這種背景下，以視覺化的方式告訴使用者，你到底更改了什麼，就非常有意義了。
在QQ中，使用者可以自定義聊天區域的視覺樣式，當更改對話氣泡的顏色時，預覽區域會立刻展示新的效果。
QQ的設定
3。 聰明的預設值
設定中的選項將對整個產品、平臺與系統產生影響，並且對於絕大多數使用者來說，初始狀態的預設選項將會一直沿用下去。因此，選擇聰明的預設值就是至關重要的了。要做到這一點，設計師一方面需要對使用者的使用習慣非常瞭解，另一方面需要業務需求，即怎樣的設定對業務有利。
例如，幾乎所有電商平臺都會在訊息設定中預設開啟全部型別的訊息推送，以增加產品的曝光率。
淘寶的訊息設定
4。 互動方式的抉擇：表單提交與即時生效
“設定”模組基本是由一系列表單組合而成的，那麼勢必就存在一個問題：在設定中更改選項時，是即時生效比較好，還是提交表單時統一生效比較好？
這一點我們可以從業務需要和使用者認知這兩個層面來進行考慮：
首先，業務需要是必須最優先考慮的。“設定”作為控制系統的底層操作，很有可能牽一髮而動全身。一些設定項的變更可能會帶來試錯成本，甚至產生嚴重的後果。對於這種設定項，我們要慎用“實時生效”。多點一次“提交”，甚至要求二次確認，都能更高地防止出錯。
其次，由於表單提交和即時生效這兩種互動方式都非常常見，使用者在面臨設定項時，就天然地存在一種認知壓力（疑惑是即時生效還是需要提交表單）。於是，我們需要透過設計，明白準確地將這個資訊傳達給使用者，消解這種壓力。
我們可以對比幾個案例：
a。在網易雲音樂的設定頁，使用者點選控制元件切換選項後，新的選擇立即生效，頁面底部沒有“提交”或“重置”按鈕。但是，由於切換選項時頁面沒有任何反饋，使用者很容易產生困惑，會想要到頁面底部確認一下。
網易雲音樂的設定
b。Mac系統的設定，在每個子欄目下，設定項都控制在了一屏以內，且對話方塊底部沒有統一提交的按鈕。儘管調整部分選項後，什麼也沒有發生，使用者依然能夠感知到，這些選項已經生效了。
Mac系統的設定-通用
c。在QQ郵箱中，設定頁的內容量大、頁面較長，底部有一個明顯的懸浮低欄，提示使用者需要儲存更改。
QQ郵箱的設定
不難看出，當表單資訊在一屏以內時，無論是即時生效，還是需要多一個“提交”的步驟，使用者都是能夠理解。但當表單內容超出一屏時，疑惑就隨之產生了，比較好的方案是讓“提交”或“儲存”按鈕以懸浮的方式常駐於頁面底部，而不是需要滾動到頁面最下方才看到。
最後，還有一點細節問題值得討論：互動控制元件本身也有“即時生效”與“提交後生效”兩種傾向，這種分類是與控制元件隱喻的實物原型相關的。
例如，按鈕（Button）、開關（Switch）、滑塊（Slider）就有很強的“即時生效”隱喻；而當人們看到下拉框（Select）、文字輸入框（Input），就會下意識地尋找“提交”按鈕。
“即時生效”的控制元件
四、結語
設定是產品中非常邊緣的一個模組，但並不是可以不經思考就進行處置的。“不起眼”的設定背後也有一套設計邏輯，值得我們深入挖掘。
本文由 @ leadwhite 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議