中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

設(shè)置是產(chǎn)品中非常邊緣的一個(gè)模塊，但并不是可以不經(jīng)思考就進(jìn)行處置的。“不起眼”的設(shè)置背后也有一套設(shè)計(jì)邏輯，值得我們深入挖掘。

一、“設(shè)置（Settings）”是什么

在產(chǎn)品設(shè)計(jì)中，設(shè)置（Settings）可能是最容易被人忽視和輕視的一塊內(nèi)容。無論是非常之低的使用頻次，還是次之又次的優(yōu)先等級，都使“設(shè)置”看起來像一個(gè)“不需要設(shè)計(jì)”的角落。

然而，“設(shè)置”是幾乎所有產(chǎn)品都難以回避的一個(gè)模塊，它的應(yīng)用范圍可能比我們想象的要廣泛得多。無論是操作系統(tǒng)、軟件、網(wǎng)站，甚至是各種硬件設(shè)備，都有著一個(gè)允許用戶自由定義產(chǎn)品的底層模塊，幫助產(chǎn)品更好地適應(yīng)每個(gè)人不同的需求，這就是我們熟悉又陌生的“設(shè)置（Settings）”了。

生活中的“設(shè)置”

為什么是熟悉又陌生的“設(shè)置”呢？

熟悉，在于“小齒輪”形狀的icon已經(jīng)如此深入人心。而陌生，一方面是用戶很少使用設(shè)置功能、很難預(yù)知完成任務(wù)的操作方法（想一想，你能夠背出“更改手機(jī)時(shí)區(qū)”的操作路徑么？）；另一方面，設(shè)計(jì)者對設(shè)置模塊的研究與理解也經(jīng)常是不足的。

正因如此，我們生活中不乏各種各樣糟糕的“設(shè)置”設(shè)計(jì)——理論上能讓用戶實(shí)現(xiàn)隨心所欲、自由度極高的定制化操作，實(shí)際上卻仿佛把一架最新型號的戰(zhàn)斗機(jī)隨意丟給普通人一樣，自帶一種“看不懂就別亂動(dòng)”的威嚴(yán)氣場。

糟糕的“設(shè)置”界面

怎樣的“設(shè)置”才是滿足用戶需要的呢？我們首先要從“設(shè)置”的用戶特點(diǎn)開始分析。

二、“設(shè)置”場景的用戶：永遠(yuǎn)的新手用戶

眾所周知，判斷用戶操作系統(tǒng)的熟練程度和經(jīng)驗(yàn)（即判斷用戶是新手用戶還是高級用戶），是繪制用戶畫像（Persona）中的重要一環(huán)，同時(shí)也是進(jìn)行實(shí)操設(shè)計(jì)的基石。對于新手用戶和高級用戶，產(chǎn)品往往要提供截然不同的交互方式。

一個(gè)典型的例子是網(wǎng)站代碼編輯器Dreamweaver，不僅為熟悉前端代碼的高級用戶提供了代碼編輯功能，同時(shí)也考慮到了編程小白的需求，提供了可視化的網(wǎng)頁制作功能。

Dreamweaver交互界面，兼顧新手與熟練用戶的需求

那么，言歸正傳，“設(shè)置”模塊的用戶究竟是新手用戶還是高級用戶呢？

我們很容易在這里走進(jìn)一個(gè)誤區(qū)，認(rèn)為會(huì)使用“自定義”、“個(gè)性化”這些復(fù)雜功能的，一定是高級用戶了。更何況，“設(shè)置”中通常還有“高級設(shè)置”這一個(gè)分類，顧名思義，肯定只有小部分專家級用戶才會(huì)用到這個(gè)功能了?

Chrome瀏覽器的設(shè)置，點(diǎn)擊“高級”可以展開更多設(shè)置項(xiàng)

的確，使用到“設(shè)置”這個(gè)功能的，有很大概率是這款產(chǎn)品的重度用戶了。然而，由于需要使用到“設(shè)置”的頻次非常之低，更改設(shè)置的周期也非常長，用戶很難向熟悉產(chǎn)品那樣，逐步習(xí)得完成任務(wù)的路徑與方法。從這層意義上來說，即使是對產(chǎn)品非常熟悉的用戶，對于“設(shè)置”這個(gè)模塊而言，也依然是新手用戶，甚至永遠(yuǎn)是新手用戶。

以我自己身上發(fā)生的事情為例——我用微信已經(jīng)6年了，不僅能玩轉(zhuǎn)各種社交和支付功能，還用過各種各樣的小程序，可以說得上是典型的熟練用戶了。

一次，旁人告訴我，微信是可以自定義發(fā)現(xiàn)頁的內(nèi)容的（我自己根本發(fā)現(xiàn)不了），于是我關(guān)閉了“漂流瓶”功能，因?yàn)槲覐膩碛貌坏剿Ｈ欢^了半年左右，由于需要研究陌生人社交的一些交互方式，我想重新找回“漂流瓶”試一試，結(jié)果不難想象：我姑且是完成了任務(wù)，但此前的經(jīng)驗(yàn)派不上一點(diǎn)用場，探索的過程中伴隨著迷失和疑惑。

微信的“發(fā)現(xiàn)頁管理”路徑

三、“設(shè)置”模塊設(shè)計(jì)的要點(diǎn)

在論證了“設(shè)置”模塊的用戶永遠(yuǎn)是新手用戶之后，我們接下來看看“設(shè)置”模塊設(shè)計(jì)的要點(diǎn)與注意事項(xiàng)。這些小Tips是基于以下兩個(gè)事實(shí)而進(jìn)行推導(dǎo)和提煉的：

第一，“設(shè)置”模塊的用戶是新手用戶，新手用戶需要導(dǎo)航與交互方式更符合邏輯、任務(wù)步驟更循序漸進(jìn)，而快捷與效率是其次的需要。

初學(xué)者更多地傾向于選項(xiàng)最少的結(jié)構(gòu)性互動(dòng)，這種互動(dòng)通常有提示、限制、協(xié)助等幫助，形成特定的控制模式。熟練應(yīng)用者則喜歡結(jié)構(gòu)性、步驟性不是很強(qiáng)的互動(dòng)，跳過一些特定的步驟和幫助，直接切入功能得到結(jié)果?！锻ㄓ迷O(shè)計(jì)法則》

第二，“設(shè)置”是對產(chǎn)品進(jìn)行相對底層的控制，是有一定使用門檻的。如果產(chǎn)品是一輛車，那么“設(shè)置”就是車的底盤，許多老司機(jī)也沒有親自檢修過。

“設(shè)置”之于產(chǎn)品，相當(dāng)于底盤之于汽車

在這種情況下，對“設(shè)置”進(jìn)行化繁為簡的優(yōu)化是有一定限度的。簡約四策略中的刪除、組織、隱藏、轉(zhuǎn)移，幾乎可以說只?！敖M織”和“隱藏”能夠適用。

在承認(rèn)以上兩個(gè)前提條件的基礎(chǔ)上，我總結(jié)了下面幾個(gè)“設(shè)置”模塊設(shè)計(jì)的要點(diǎn)：

1. 根據(jù)信息體量規(guī)劃信息架構(gòu)

在處理任何更細(xì)致的交互問題之前，我們必須對“設(shè)置”模塊整體的信息架構(gòu)有一個(gè)合理的規(guī)劃，這一點(diǎn)即包括“設(shè)置”應(yīng)當(dāng)位于整體產(chǎn)品的哪一個(gè)層級（用戶如何觸達(dá)“設(shè)置”模塊，也包括“設(shè)置”內(nèi)部的導(dǎo)航設(shè)計(jì)與信息結(jié)構(gòu)?！霸O(shè)置”的信息架構(gòu)模式，主要是由“設(shè)置”在產(chǎn)品中的重要程度，以及“設(shè)置”內(nèi)部的信息體量決定的。

當(dāng)“設(shè)置”的重要程度不高、體量相對輕時(shí)，下拉框?qū)Ш?彈窗的形式就可以解決承載所有的信息。這種交互方式的優(yōu)勢在于減少頁面跳轉(zhuǎn)，減輕層級深度。

百度搜索的設(shè)置

但當(dāng)“設(shè)置”的信息非常復(fù)雜、體量很大的時(shí)候，就不應(yīng)該吝惜頁面跳轉(zhuǎn)了，“設(shè)置”可以被視作擁有獨(dú)立場景的獨(dú)立模塊（甚至某種意義上的子產(chǎn)品）來設(shè)計(jì)。

例如，Google Calendar在進(jìn)入設(shè)置模塊后，只在頂欄留了返回產(chǎn)品主界面的鏈接，而一級側(cè)邊導(dǎo)航則是完全獨(dú)立于日歷功能、僅為“設(shè)置”這個(gè)特殊場景服務(wù)的。

Google Calendar的設(shè)置

而Gmail在處理“設(shè)置”時(shí)，可能是為了減少頁面跳轉(zhuǎn)的感覺、力求信息更加扁平，僅在“郵件展示區(qū)”替換了“設(shè)置”的內(nèi)容，保留郵件應(yīng)用的頂導(dǎo)、側(cè)導(dǎo)、快捷功能，但實(shí)際效果非常不盡如人意。設(shè)置信息的分類只能利用視覺上很弱的三級導(dǎo)航（tab導(dǎo)航）來梳理，而 tab作為導(dǎo)航時(shí)，對于入口個(gè)數(shù)、標(biāo)題名長度都是有要求和限制的，其實(shí)非常不適合Gmail設(shè)置的場景。

Gmail的設(shè)置

Gmail的案例再一次證明了，缺乏分析地減少層級、將信息架構(gòu)“拍扁”，是無法讓信息更清晰的。

“設(shè)置”內(nèi)部的信息架構(gòu)設(shè)計(jì)同樣值得思考，其重點(diǎn)在于導(dǎo)航的規(guī)劃，我們需要在信息的深度和廣度之間做好平衡。

導(dǎo)航的深度與廣度

在很多情況下，需要設(shè)置的內(nèi)容經(jīng)常是零散的、彼此之間關(guān)聯(lián)不強(qiáng)的，對這些內(nèi)容進(jìn)行分類整理從來不是一件易事。而設(shè)計(jì)師很容易陷入的一個(gè)誤區(qū)是把所有“不知道怎么歸類”的信息，一股腦丟到“通用”、“常規(guī)”或“高級”里。

Gmail的設(shè)置再次貢獻(xiàn)了一個(gè)反例——由于“常規(guī)”欄目下沒有更詳細(xì)的分類，整個(gè)頁面的信息量非常冗雜，用戶完全無法快速找到自己需要的內(nèi)容?！熬庉嬥]件簽名”是一個(gè)相當(dāng)常用的功能，然而在Gmail中，用戶需要在“設(shè)置-常規(guī)”欄目下，滾動(dòng)到至少第三屏才能找到它的位置。

Gmail的常規(guī)設(shè)置

改善這個(gè)問題的方案其實(shí)并不復(fù)雜。139郵箱的設(shè)置模塊中，在“常規(guī)設(shè)置”下還有更詳細(xì)的二級導(dǎo)航，盡管頁面很長，但導(dǎo)航提供了一個(gè)很好的“概覽”功能。在這個(gè)場景下，擴(kuò)展性強(qiáng)的側(cè)邊導(dǎo)航優(yōu)勢非常明顯。

139郵箱的設(shè)置

另一個(gè)可行的方案是善用信息的“折疊”與“展開”、例如新浪微博的消息設(shè)置中，“@我的”、“評論”、“贊”、“私信”等不同的消息類型都是折疊起來的，僅外顯標(biāo)題，只有當(dāng)用戶點(diǎn)擊“編輯”時(shí)，才會(huì)展開相應(yīng)的區(qū)域。

新浪微博的設(shè)置

但這種方式也有使用的限制條件，只有當(dāng)設(shè)置項(xiàng)比較容易理解、用戶對需要編輯的內(nèi)容比較熟悉的時(shí)候，大面積隱藏信息才是適用的。

2. 適當(dāng)?shù)恼f明與提示

“界面設(shè)計(jì)中是否需要提供足夠的說明與提示”——這個(gè)問題經(jīng)常是富有爭議的。

一方面，人們常常說起，“好的產(chǎn)品不需要說明書”、“好的導(dǎo)航能夠自我解釋”、“設(shè)計(jì)需要不言自明”；另一方面，著名的尼爾森10項(xiàng)可用性原則又指出，“幫助及使用文檔是必要的”。

尼爾森10項(xiàng)可用性原則

那么，在“設(shè)置”中應(yīng)當(dāng)如何平衡這個(gè)問題呢？

考慮到我們上文已經(jīng)提到的，“設(shè)置”的用戶是永遠(yuǎn)的新手用戶，且設(shè)置的內(nèi)容對于用戶是有一定難度的，我們可以認(rèn)為，在“設(shè)置”模塊中，說明與提示出現(xiàn)的概率要更高，遠(yuǎn)遠(yuǎn)高于產(chǎn)品的主體功能模塊（即那些用戶可以在探索中獲得樂趣、在反復(fù)使用中漸漸熟悉的功能）。

因此，在設(shè)計(jì)“設(shè)置”模塊的信息時(shí)，需要格外考慮說明與提示的信息是否充足，而不要輕易以為“用戶能夠理解這些”。

例如，Google賬號的設(shè)置模塊中，不僅出現(xiàn)了大量的介紹說明文案，還給出了生動(dòng)的配圖，加深用戶對信息的理解。

Google 賬戶的設(shè)置

另外，在進(jìn)行解釋說明時(shí)，圖片傳遞信息的能力往往比文字更強(qiáng)。下圖為華為榮耀電視盒子的“播放設(shè)置”界面，“音視頻輸出方式”對于大多數(shù)用戶都是難以理解的，但通過配圖，我們可以理解到，它與硬件線路的鏈接方式有關(guān)。

榮耀盒子的播放設(shè)置

圖像提示的衍生物就是“預(yù)覽”功能。用戶穿梭在一系列設(shè)置表單之間，只能看到各種各樣的下拉菜單、Radio（單選）與CheckBox（多選），但變更選項(xiàng)后，真正生效的位置卻非常遙遠(yuǎn)。在這種背景下，以可視化的方式告訴用戶，你到底更改了什么，就非常有意義了。

在QQ中，用戶可以自定義聊天區(qū)域的視覺樣式，當(dāng)更改對話氣泡的顏色時(shí)，預(yù)覽區(qū)域會(huì)立刻展示新的效果。

QQ的設(shè)置

3. 聰明的默認(rèn)值

設(shè)置中的選項(xiàng)將對整個(gè)產(chǎn)品、平臺(tái)與系統(tǒng)產(chǎn)生影響，并且對于絕大多數(shù)用戶來說，初始狀態(tài)的默認(rèn)選項(xiàng)將會(huì)一直沿用下去。因此，選擇聰明的默認(rèn)值就是至關(guān)重要的了。要做到這一點(diǎn)，設(shè)計(jì)師一方面需要對用戶的使用習(xí)慣非常了解，另一方面需要業(yè)務(wù)需求，即怎樣的設(shè)置對業(yè)務(wù)有利。

例如，幾乎所有電商平臺(tái)都會(huì)在消息設(shè)置中默認(rèn)打開全部類型的消息推送，以增加產(chǎn)品的曝光率。

淘寶的消息設(shè)置

4. 交互方式的抉擇：表單提交與即時(shí)生效

“設(shè)置”模塊基本是由一系列表單組合而成的，那么勢必就存在一個(gè)問題：在設(shè)置中更改選項(xiàng)時(shí)，是即時(shí)生效比較好，還是提交表單時(shí)統(tǒng)一生效比較好？

這一點(diǎn)我們可以從業(yè)務(wù)需要和用戶認(rèn)知這兩個(gè)層面來進(jìn)行考慮：

首先，業(yè)務(wù)需要是必須最優(yōu)先考慮的?！霸O(shè)置”作為控制系統(tǒng)的底層操作，很有可能牽一發(fā)而動(dòng)全身。一些設(shè)置項(xiàng)的變更可能會(huì)帶來試錯(cuò)成本，甚至產(chǎn)生嚴(yán)重的后果。對于這種設(shè)置項(xiàng)，我們要慎用“實(shí)時(shí)生效”。多點(diǎn)一次“提交”，甚至要求二次確認(rèn)，都能更高地防止出錯(cuò)。

其次，由于表單提交和即時(shí)生效這兩種交互方式都非常常見，用戶在面臨設(shè)置項(xiàng)時(shí)，就天然地存在一種認(rèn)知壓力（疑惑是即時(shí)生效還是需要提交表單）。于是，我們需要通過設(shè)計(jì)，明白準(zhǔn)確地將這個(gè)信息傳達(dá)給用戶，消解這種壓力。

我們可以對比幾個(gè)案例：

a.在網(wǎng)易云音樂的設(shè)置頁，用戶點(diǎn)擊控件切換選項(xiàng)后，新的選擇立即生效，頁面底部沒有“提交”或“重置”按鈕。但是，由于切換選項(xiàng)時(shí)頁面沒有任何反饋，使用者很容易產(chǎn)生困惑，會(huì)想要到頁面底部確認(rèn)一下。

b.Mac系統(tǒng)的設(shè)置，在每個(gè)子欄目下，設(shè)置項(xiàng)都控制在了一屏以內(nèi)，且對話框底部沒有統(tǒng)一提交的按鈕。盡管調(diào)整部分選項(xiàng)后，什么也沒有發(fā)生，用戶依然能夠感知到，這些選項(xiàng)已經(jīng)生效了。

c.在QQ郵箱中，設(shè)置頁的內(nèi)容量大、頁面較長，底部有一個(gè)明顯的懸浮低欄，提示用戶需要保存更改。

不難看出，當(dāng)表單信息在一屏以內(nèi)時(shí)，無論是即時(shí)生效，還是需要多一個(gè)“提交”的步驟，用戶都是能夠理解。但當(dāng)表單內(nèi)容超出一屏?xí)r，疑惑就隨之產(chǎn)生了，比較好的方案是讓“提交”或“保存”按鈕以懸浮的方式常駐于頁面底部，而不是需要滾動(dòng)到頁面最下方才看到。

最后，還有一點(diǎn)細(xì)節(jié)問題值得討論：交互控件本身也有“即時(shí)生效”與“提交后生效”兩種傾向，這種分類是與控件隱喻的實(shí)物原型相關(guān)的。

例如，按鈕（Button）、開關(guān)（Switch）、滑塊（Slider）就有很強(qiáng)的“即時(shí)生效”隱喻；而當(dāng)人們看到下拉框（Select）、文本輸入框（Input），就會(huì)下意識地尋找“提交”按鈕。

四、結(jié)語

設(shè)置是產(chǎn)品中非常邊緣的一個(gè)模塊，但并不是可以不經(jīng)思考就進(jìn)行處置的。“不起眼”的設(shè)置背后也有一套設(shè)計(jì)邏輯，值得我們深入挖掘。

本文由 @?leadwhite 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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