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

一、方法

1. 熟悉

用戶面對陌生的頁面，就像是一個人來到了陌生的地方，會產生緊張的情緒。所以要用用戶熟悉的頁面結構。

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

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

2. 可信賴的環境氛圍

（1）氛圍渲染

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

（2）品牌背書與口碑

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

（3）合適的文案

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

3. 幫助系統

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

（1）進入后的新手教程（漫游式引導）

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

下圖為巨量星圖界面重構上線后，出現引導介紹內容。

（2）幫助中心

幫助中心以固定位置作為頁面的常駐入口，匯總全平臺文字、圖片和視頻信息庫，庫中內容要分類明確，符合用戶對系統的認知，內容呈現要清晰簡單易懂，幫助用戶在使用系統遇到問題可以隨時進行問題搜索查詢，獲得系統性的問題解答。

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

（3）任務預設

新手對于業務邏輯復雜的產品上手難度較大，任務預設主要是給出系統或任務核心的流程來讓用戶預先進行操作。整個任務體驗需要簡單且核心，切合用戶實際需求，通過步驟引導用戶完成任務來了解系統或任務的核心邏輯和主流程。

下圖為游戲原神中“練習元素戰技”的任務，用戶如果不做這個任務，就無法進行后面的主線任務。

4. 認知負荷

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

當認知負荷過重的時候，用戶會感受到任務難以進行，從而會放棄任務。所以合理的認知負荷才能讓用戶進行下去。下面是幾種減少認知負荷的方法

（1）漸進式呈現

漸進式披露不再是簡單地給用戶提供大量的信息和選擇，而是將這個過程分解成幾部分，讓用戶集中注意力在當前的事件上，從易到難地引導用戶。

下圖為apple官網的登錄界面。首先只呈現apple ID的輸入框，當輸入完apple ID內容后，再出現密碼部分。

（2）信息量控制

上面的漸進式呈現是將信息分解成幾部分呈現。而信息量控制可以對信息的內容進行編輯。比如哪一塊信息對自己沒有任何用處，就可以不讓他顯示出來。

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

5. 格式塔原理

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

（1）相似性

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

案例：京東把產品分類用扁平圖標顯示，放在上面。百億補貼產品用實際圖片顯示，放在下面。這樣兩類內容就很好得區分開了。

（2）接近性

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

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

（3）閉合性

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

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

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

（4）連續性

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

（5）主體與背景的關系

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

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

（6）圖形化

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

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

會發現表述完內容會非常吃力。圖形在表達關系，用較下的空間包含較復雜信息上具有優勢。

6. 容錯與防錯

（1）防錯設計

工業設計領域中的防呆設計的兩種特征：

1. 即使出現操作者的人為疏忽也不會發生錯誤 ── 不需要注意力
2. 具備即使是外行人來做也不會做錯的構造 ── 不需要專業知識與高度的技能

（2）斷根

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

（3）保險

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

（4）自動

流程節點的自動化。運用各種設備、結構和原理，使功能自動開始或停止。聯盟后臺中，如果時間一到即使商家沒有確認，也會自動發款。

（5）相符

利用形狀、數字公式、發音、數量進行檢測和匹配，進行校驗。下圖的級聯選擇幫助防止出現錯誤的地址和格式。

7. 容錯

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

（1）輸入的容錯

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

（2）空間上的容錯

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

文字鏈熱區示例：當懸浮在 ID 所在的文字鏈單元格時，鼠標「指針」隨即變為「手型」，單擊即可跳轉。

8. 其他

（1）驗證碼

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

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

（2）關鍵信息可追溯

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

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

總結

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