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

一、方法

1. 熟悉

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

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

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

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

（1）氛圍渲染

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

（2）品牌背書與口碑

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

（3）合適的文案

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

3. 幫助系統(tǒng)

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

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

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

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

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

（2）幫助中心

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

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

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

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

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

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

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

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

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

漸進(jìn)式披露不再是簡單地給用戶提供大量的信息和選擇，而是將這個過程分解成幾部分，讓用戶集中注意力在當(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)。而信息量控制可以對信息的內(nèi)容進(jìn)行編輯。比如哪一塊信息對自己沒有任何用處，就可以不讓他顯示出來。

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

5. 格式塔原理

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

（1）相似性

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

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

（2）接近性

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

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

（3）閉合性

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

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

IBM的Logo運用封閉性原則即使部分沒有了依然不會影響我們對整體的圖形的識別。

（4）連續(xù)性

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

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

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

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

（6）圖形化

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

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

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

6. 容錯與防錯

（1）防錯設(shè)計

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

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

（2）斷根

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

（3）保險

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

（4）自動

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

（5）相符

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

7. 容錯

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

（1）輸入的容錯

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

（2）空間上的容錯

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

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

8. 其他

（1）驗證碼

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

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

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

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

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

總結(jié)

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