界面是功能的載體，所以往往產(chǎn)品會(huì)重視功能的設(shè)計(jì)，以及與之緊密相關(guān)的交互。但是常常不重視產(chǎn)品中提供給的感情。下面來(lái)講下界面如何塑造安全感。

一、方法

1. 熟悉

用戶面對(duì)陌生的頁(yè)面，就像是一個(gè)人來(lái)到了陌生的地方，會(huì)產(chǎn)生緊張的情緒。所以要用用戶熟悉的頁(yè)面結(jié)構(gòu)。

在《易用性中的易理解性》中提到同類(lèi)產(chǎn)品的模仿“喻體不但可以是現(xiàn)實(shí)中的，也可以是虛擬中的。如下圖，京東、淘寶和拼多多三個(gè)電商平臺(tái)的app界面，它們的頁(yè)面結(jié)構(gòu)出奇相似。最上面是“產(chǎn)品分類(lèi)區(qū)”，下面是“活動(dòng)商品區(qū)”，最下面是“商品瀑布流區(qū)”。最開(kāi)始應(yīng)用這個(gè)結(jié)構(gòu)的產(chǎn)品不清楚，但是大公司不一而同地使用了這個(gè)方式。一方面是因?yàn)樗_實(shí)有效，另一方面是因?yàn)橛脩粢呀?jīng)習(xí)慣了這樣的結(jié)構(gòu)”

抄襲”的名頭，但是確實(shí)能提高用戶對(duì)產(chǎn)品的熟悉度和安全感。

2. 可信賴的環(huán)境氛圍

（1）氛圍渲染

界面的設(shè)計(jì)要與用戶的印象相符合。下圖是世界著名的金融公司——黑石公司的官網(wǎng)設(shè)計(jì)，黑白的配色給人高級(jí)的感覺(jué)。讓人感受到這個(gè)公司的強(qiáng)大。

（2）品牌背書(shū)與口碑

用戶一開(kāi)始知道產(chǎn)品的時(shí)候，必然是陌生的。陌生往往意味著不信任，那么如何減輕用戶的不信任感呢？展示使用該產(chǎn)品的商家。用戶一看到產(chǎn)品與眾多品牌合作，甚至是行業(yè)知名的品牌,會(huì)相信這個(gè)產(chǎn)品很靠譜，愿意合作、使用。

（3）合適的文案

“不是所有牛奶都叫特侖蘇”，且不論實(shí)際上特侖蘇的品質(zhì)。單這個(gè)文案表現(xiàn)出來(lái)的氣勢(shì)，讓人感覺(jué)它很有自信。這種自信也會(huì)帶動(dòng)消費(fèi)者去相信它的品質(zhì)。

3. 幫助系統(tǒng)

用戶剛接觸新的界面，必然會(huì)有很多不懂的地方。下面將講述簡(jiǎn)單介紹幫助的模式，讓用戶熟悉上產(chǎn)品。

（1）進(jìn)入后的新手教程（漫游式引導(dǎo)）

漫游導(dǎo)覽主要以Tour形式呈現(xiàn)，在用戶觸達(dá)新頁(yè)面，且未開(kāi)始操作時(shí)出現(xiàn)。存在有遮罩層和無(wú)遮罩層兩種。用于產(chǎn)品全局功能升級(jí)或任務(wù)頁(yè)面多個(gè)功能升級(jí)的引導(dǎo)組合。提前告知用戶具體功能的使用場(chǎng)景，幫助用戶聚焦到具體的頁(yè)面元素和功能，引導(dǎo)性強(qiáng)。

下圖為巨量星圖界面重構(gòu)上線后，出現(xiàn)引導(dǎo)介紹內(nèi)容。

（2）幫助中心

幫助中心以固定位置作為頁(yè)面的常駐入口，匯總?cè)脚_(tái)文字、圖片和視頻信息庫(kù)，庫(kù)中內(nèi)容要分類(lèi)明確，符合用戶對(duì)系統(tǒng)的認(rèn)知，內(nèi)容呈現(xiàn)要清晰簡(jiǎn)單易懂，幫助用戶在使用系統(tǒng)遇到問(wèn)題可以隨時(shí)進(jìn)行問(wèn)題搜索查詢，獲得系統(tǒng)性的問(wèn)題解答。

下圖為teambition的幫助中心，視覺(jué)非常干凈清爽，內(nèi)容也非常直接。

（3）任務(wù)預(yù)設(shè)

新手對(duì)于業(yè)務(wù)邏輯復(fù)雜的產(chǎn)品上手難度較大，任務(wù)預(yù)設(shè)主要是給出系統(tǒng)或任務(wù)核心的流程來(lái)讓用戶預(yù)先進(jìn)行操作。整個(gè)任務(wù)體驗(yàn)需要簡(jiǎn)單且核心，切合用戶實(shí)際需求，通過(guò)步驟引導(dǎo)用戶完成任務(wù)來(lái)了解系統(tǒng)或任務(wù)的核心邏輯和主流程。

下圖為游戲原神中“練習(xí)元素戰(zhàn)技”的任務(wù)，用戶如果不做這個(gè)任務(wù)，就無(wú)法進(jìn)行后面的主線任務(wù)。

4. 認(rèn)知負(fù)荷

認(rèn)知負(fù)荷理論是由澳大利亞新南威爾士大學(xué)的認(rèn)知心理學(xué)家約翰·斯威勒(John Sweller)于1988年首先提出來(lái)的。一般的，認(rèn)知負(fù)荷（Cognitive Workload）表征工作狀態(tài)下腦力資源占用率，也稱為精神負(fù)荷（Mental Workload）、腦力負(fù)荷、心理負(fù)荷，目前缺乏廣泛認(rèn)可的明確定義。

當(dāng)認(rèn)知負(fù)荷過(guò)重的時(shí)候，用戶會(huì)感受到任務(wù)難以進(jìn)行，從而會(huì)放棄任務(wù)。所以合理的認(rèn)知負(fù)荷才能讓用戶進(jìn)行下去。下面是幾種減少認(rèn)知負(fù)荷的方法

（1）漸進(jìn)式呈現(xiàn)

漸進(jìn)式披露不再是簡(jiǎn)單地給用戶提供大量的信息和選擇，而是將這個(gè)過(guò)程分解成幾部分，讓用戶集中注意力在當(dāng)前的事件上，從易到難地引導(dǎo)用戶。

下圖為apple官網(wǎng)的登錄界面。首先只呈現(xiàn)apple ID的輸入框，當(dāng)輸入完apple ID內(nèi)容后，再出現(xiàn)密碼部分。

（2）信息量控制

上面的漸進(jìn)式呈現(xiàn)是將信息分解成幾部分呈現(xiàn)。而信息量控制可以對(duì)信息的內(nèi)容進(jìn)行編輯。比如哪一塊信息對(duì)自己沒(méi)有任何用處，就可以不讓他顯示出來(lái)。

下圖在騰訊云的“管理面板”中，可選擇“產(chǎn)品管理”、“產(chǎn)品監(jiān)控”、“產(chǎn)品運(yùn)維”、“安全中心”和其他自定義面板顯示。把需要的顯示出來(lái)。

5. 格式塔原理

大家提到可視化設(shè)計(jì)往往是偏插畫(huà)的內(nèi)容，顏色非常豐富或者圖形感十足。但是格式塔原理的也從根本上控制了認(rèn)知成本。把不同類(lèi)別的信息分開(kāi)幫助理解，幫助我們快速識(shí)別到自己想要的信息塊。

（1）相似性

人們習(xí)慣將所看到的東西，按照形狀、大小、顏色、方向等外觀明顯且有某些相似之處的元素自動(dòng)的整合或集合為一組。

案例：京東把產(chǎn)品分類(lèi)用扁平圖標(biāo)顯示，放在上面。百億補(bǔ)貼產(chǎn)品用實(shí)際圖片顯示，放在下面。這樣兩類(lèi)內(nèi)容就很好得區(qū)分開(kāi)了。

（2）接近性

距離/位置相近的元素趨于組成一個(gè)整體。如下圖，用戶會(huì)認(rèn)知為“兩條”（兩組圓）而不是“一條”（一組圓）。

案例：在巨量星圖篩選組件中，“標(biāo)簽”和“內(nèi)容”之間有較大的間距，而“內(nèi)容”之間的間距較小，它就是用接近性來(lái)區(qū)分兩者。

（3）閉合性

構(gòu)成閉合造型的元素趨于組成一個(gè)整體。如下圖，用戶會(huì)認(rèn)知為兩個(gè)框，而不是許許多多的小圓。我們的視覺(jué)系統(tǒng)自動(dòng)的嘗試將敞開(kāi)的圖形封閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。

案例：在頁(yè)面設(shè)計(jì)過(guò)程中也有很多地方利用了這條原理。巨量星圖篩選組件中，要區(qū)分“可展示的指標(biāo)”和“已選中的指標(biāo)”內(nèi)容，將兩塊區(qū)域用灰色的線框框起來(lái)。

IBM的Logo運(yùn)用封閉性原則即使部分沒(méi)有了依然不會(huì)影響我們對(duì)整體的圖形的識(shí)別。

（4）連續(xù)性

我們的大腦會(huì)傾向于將事物看成連續(xù)的形體，連續(xù)性幫助我們通過(guò)構(gòu)圖來(lái)解釋方向和運(yùn)動(dòng)。如下圖，用戶第一認(rèn)知是一條線，而不是六個(gè)圓。

（5）主體與背景的關(guān)系

該法則指出我們?cè)诟兄挛锏臅r(shí)候，總是自動(dòng)的將視覺(jué)區(qū)域分為主體和背景。一旦圖像中的某個(gè)部分符合作為背景特征的話，我們的視覺(jué)感知就不會(huì)把它們作為主體焦點(diǎn)。根據(jù)這樣的原理在用戶界面設(shè)計(jì)當(dāng)中，我們就可以通過(guò)一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶的焦點(diǎn)轉(zhuǎn)移。如下圖中，我們往往會(huì)注意到藍(lán)色的正方形，而不會(huì)去注意淡藍(lán)色的背景。

案例：在IOS的軟件界面打開(kāi)“應(yīng)用聚合”，會(huì)將背景模糊處理，使用戶的視覺(jué)焦點(diǎn)轉(zhuǎn)移到新的主體上。如果不那么處理，豐富的背景會(huì)搶奪用戶的注意力。

（6）圖形化

文字在我們的生活中有舉足輕重的作用，書(shū)籍上絕大部分都是文字，但是不要輕視圖形的傳達(dá)的信息。它常常很難用文字表達(dá)出來(lái)的

如下圖是logseq的信息圖譜，表示信息之間的關(guān)系。那如果用文字表述該怎么表達(dá)呢？Sparkle和glow、twinkle、glare、flame、flash、glitter、blaze、flare和light相關(guān)。其中l(wèi)ight和另外一個(gè)單詞相關(guān)。low-stakes與stake相關(guān)，單獨(dú)成一組……

會(huì)發(fā)現(xiàn)表述完內(nèi)容會(huì)非常吃力。圖形在表達(dá)關(guān)系，用較下的空間包含較復(fù)雜信息上具有優(yōu)勢(shì)。

6. 容錯(cuò)與防錯(cuò)

（1）防錯(cuò)設(shè)計(jì)

工業(yè)設(shè)計(jì)領(lǐng)域中的防呆設(shè)計(jì)的兩種特征：

1. 即使出現(xiàn)操作者的人為疏忽也不會(huì)發(fā)生錯(cuò)誤 ── 不需要注意力
2. 具備即使是外行人來(lái)做也不會(huì)做錯(cuò)的構(gòu)造 ── 不需要專(zhuān)業(yè)知識(shí)與高度的技能

（2）斷根

將發(fā)生錯(cuò)誤的原因從根本上排除，不給用戶犯錯(cuò)的機(jī)會(huì)。下圖中默認(rèn)選擇了“普通代理”且不可更改，因?yàn)楫?dāng)前場(chǎng)景下只能選擇“普通代理”。其他是不可選的。

（3）保險(xiǎn)

彈窗的再一次確認(rèn)的功能，是典型的「保險(xiǎn)」案例，可以避免用戶的誤操作，點(diǎn)擊刪除等功能會(huì)重復(fù)一遍動(dòng)作。

（4）自動(dòng)

流程節(jié)點(diǎn)的自動(dòng)化。運(yùn)用各種設(shè)備、結(jié)構(gòu)和原理，使功能自動(dòng)開(kāi)始或停止。聯(lián)盟后臺(tái)中，如果時(shí)間一到即使商家沒(méi)有確認(rèn)，也會(huì)自動(dòng)發(fā)款。

（5）相符

利用形狀、數(shù)字公式、發(fā)音、數(shù)量進(jìn)行檢測(cè)和匹配，進(jìn)行校驗(yàn)。下圖的級(jí)聯(lián)選擇幫助防止出現(xiàn)錯(cuò)誤的地址和格式。

7. 容錯(cuò)

上面內(nèi)容是減少用戶的操作錯(cuò)誤，而容錯(cuò)是即使用戶操作錯(cuò)誤了，也能得到正確的結(jié)果。

（1）輸入的容錯(cuò)

伯斯塔爾法則：接受多變，輸出保守。即便我輸入的是“蘋(píng)果手機(jī)”、“平果手機(jī)”。baidu依然能夠給我想要的結(jié)果，當(dāng)然這需要貝葉斯方法的協(xié)助，但我們不需要去了解背后實(shí)現(xiàn)的概率論原理，我們只需要知道這個(gè)結(jié)果是符合伯斯塔爾法則的。

（2）空間上的容錯(cuò)

根據(jù)費(fèi)茨法則（Fitts’s Law）所描述的，如果用戶鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶越容易操作。可視區(qū)域 ≠ 可點(diǎn)擊區(qū)域。在使用 Table 時(shí)，文字鏈的點(diǎn)擊范圍受到文字長(zhǎng)短影響，可以設(shè)置整個(gè)單元格為熱區(qū)，以便用戶觸發(fā)。

文字鏈熱區(qū)示例：當(dāng)懸浮在 ID 所在的文字鏈單元格時(shí)，鼠標(biāo)「指針」隨即變?yōu)椤甘中汀?，單擊即可跳轉(zhuǎn)。

8. 其他

（1）驗(yàn)證碼

Apple賬戶中的Apple ID和密碼非常重要，登錄各種地方。如果apple ID和密碼被人盜用，就意味著app store、用該apple ID登錄的應(yīng)用就會(huì)都不可用，會(huì)被隨意修改。只要開(kāi)啟雙重認(rèn)證就不會(huì)發(fā)生這種事情。

“雙重認(rèn)證是為 Apple ID 提供的一層額外安全保護(hù)，旨在確保只有本人可以訪問(wèn)自己的帳戶，其他人即使知道密碼也無(wú)法訪問(wèn)帳戶。當(dāng)首次在新設(shè)備或網(wǎng)頁(yè)上使用 Apple ID 登錄時(shí)，既需要提供密碼，也需要提供自動(dòng)顯示在受信任設(shè)備上的六位驗(yàn)證碼。由于僅僅知道密碼不足以訪問(wèn)帳戶，因此雙重認(rèn)證顯著提升了 Apple ID 以及通過(guò) Apple 儲(chǔ)存的數(shù)據(jù)的安全性?！?/p>

（2）關(guān)鍵信息可追溯

在瀏覽信息中，用戶如果有返回看之前看過(guò)的信息的需求。如果找不到會(huì)讓用戶產(chǎn)生焦慮。

下圖為知乎的最近瀏覽和bilibili的歷史記錄，bilibili的歷史記錄甚至還有視頻、直播、專(zhuān)欄等分類(lèi)。

總結(jié)

以上就是我總結(jié)的體驗(yàn)設(shè)計(jì)中“安全感”的設(shè)計(jì)方法。在界面建立安全感后，用戶才能安心使用產(chǎn)品。