頁面如何設計增長用戶信賴感和驚喜感

如何給用戶製造信賴感和驚喜感，一直是體驗設計的難題，這篇好文做者總結了關於這兩方面的經驗，建議閱讀。

信賴感

近和業務方討論產品體驗目標時，「可信賴」一詞被屢次提到，那麼都有什麼因素會影響到產品的可信賴感?如何經過體驗設計手段，打造能贏得用戶信任的產品呢?在此拋磚引玉，歡迎探討。

專業的總體印象

專業與信賴的關係密不可分，展示出產品的專業程度，有利於快速獲取到新用戶的信任，在高質量的內容基礎上，咱們也能夠經過設計進一步固化「專業」的印象。

1. 氛圍渲染

在上圖這個案例中，產品關鍵功能的截圖並非孤立展現的，而是嵌入在具體的使用場景(老闆和員工正在交談)之中，經過高質量的場景圖/視頻，能夠有效強化用戶對產品專業性的印象，這種方式在很多 B 類產品首頁都能見到。

除了以上這種形式，在頁面中透露出產品當前已經取得的成就，好比具體的數據、來自已有用戶的正面評價等，也是經常使用手段之一。

2. 關注細節

細節上的設計心思雖然不是全部人都能感知獲得，但也是有效表達產品專業態度的手段之一，粗糙的界面、使人困惑的文案、糟糕的一致性、直接暴露的系統錯誤信息，不專業的設計表現，影響的是用戶對產品總體的信任。

3. 適當保守

雖然咱們平時都講要設計創新、要突破常規，但對於專業可信賴有着高要求的產品，一味追求酷炫的交互視覺表現，有時反而容易引起用戶的疑慮，並不是全部人都是熱愛新鮮事物的年輕一族，適當的保守對於營造產品專業印象仍是有積極做用的。

放心的使用感覺

1. 坦誠透明

處於個性化推薦等功能須要，產品有時會要求用戶提供我的信息、系統權限等，但不夠穩當的索要方式則會讓用戶感到不安、擔憂隱私泄漏。

更合適的作法是，首先和業務確認須要讓用戶提供的內容是否必定必要，在合適的場景下(好比不提供就沒法進行下一步操做，而非一打開應用就要求)向用戶請求，並表達清楚爲何須要我的信息/權限等內容、提供後的具體用途，承諾保障隱私權、不會對用戶利益形成損害。

除此以外，涉及到多流程、多狀態等場景，及時反饋給用戶最新動態，讓用戶第一時間產生感知，也有利於贏得更多信任。

2. 井井有理

秩序，意爲有條理地、有組織地安排各構成部分以求達到正常的運轉或良好的外觀的狀態，映射到產品設計中，則是清晰有條理的瀏覽操做體驗。

內容層面，信息組織須要有一條清晰連貫的邏輯主線，雜亂無章的堆積則很容易使人迷失;交互層面，操做邏輯環環相扣，適當外化總體進度，對當前所處位置有比較好的感知;展示層面，保持用戶注意力的聚焦，好比當有多個模塊都存在切換動效時循序執行，而不是每一個模塊都在切換，使人無所適從。

3. 品牌背書

同等條件下，大公司、大品牌更容易獲取信任，產品設計中也能夠利用這一點，在界面裏嵌入展現品牌信息，增長權威印象。

固然，我想營造信賴感的方法還有不少，文章也只是片面地總結了一部分，有更多想法的話，歡迎補充交流哦～

驚喜感

在平時的設計工做中，咱們有時候會陷入一種「千篇一概的平淡」式苦惱，以爲相似的產品基本都是差很少的信息架構、佈局風格、界面元素……本身按照各類方法推導下來的結果也難逃窠臼;而若是想要作一點不同的創新突破，又容易走進「爲設計而設計」的誤區，非但不能討得合做方和用戶的歡心，還會招來相似「爲啥不按 xx 產品那樣作」的質疑。

過去幾個月來，我一直在試圖驅動本身多思考怎麼賦予本身的設計以更多的「驚喜感」。首先要明確的是，「打破常規」只是「創造驚喜」的充分非必要條件，相比盲目追求「爲了避免同樣而不同」，嘗試有邏輯多維度的聯想發散，帶給了我更多有意思又具有必定說服力的靈感啓發，下文中就我就舉近期幾個思考的例子來講明。

1. 諧音聯想

在背單詞、想文案、譯商標時，「諧音聯想法」常常被有意無心地用到，不少流行一時的網絡用語也源於一些內涵的諧音詞彙。而在設計工做中，諧音聯想則能夠幫助咱們把一些抽象或無味的詞彙，可視化成生動有趣的形象。

前段時間組隊參加部門的 Hackathon 活動，須要設計一個相似「壓力指標」的數據圖表，最開始的時候我想到的是可視化成氣壓計、儀表盤之類的形象，比較直觀和常見，但也偏於平庸、沒什麼驚喜感。

起色發生在一次用拼音輸入「壓力值」的時候，無心間瞥到輸入法的建議列表中給出了「鴨梨」一詞，瞬間想到幾年前的流行網絡用語「鴨梨山大」，因而我想：爲何不直接把壓力值可視化成一個梨子的形象呢?還能夠進一步拓展：壓力值越高梨子個頭越大，給梨子加上各類微表情，能夠像「切水果」同樣切碎梨子來「釋放壓力」等……這下可比氣壓計儀表盤之類有趣多了，方案也獲得了小組內夥伴的一致確定(雖然仍是遺憾地沒能獲獎哈哈~)。

2. 行爲聯想

動效設計研究是我這半年來一個主要的專業沉澱方向，也沒少蒐集體驗各類界面動效設計案例，但感受大部分的動效設計仍是停留在諸如「讓體驗銜接更流暢」、「吸引你的注意力」之類的階段，對於深層次一點的有溫度、有情感的動態行爲挖掘並不太深刻。

以前聽公司裏一位資深設計專家的分享時，他舉了一個設計案例，爲了在產品中體現出「主動積極」的商務禮儀設計語言，爲左右切換 Banner 的箭頭入口作了一個小動效，當鼠標 Hover 到箭頭附近時，後者會主動向鼠標靠近，就像商務場景中對方主動來向你握手同樣。雖然只是一個很小的細節，但卻能給人以觸動。

最近在作對話式交互產品的案例蒐集工做，在 Dribbble 上看到了一個 Google 用來招聘實習生的做品，是一個相似 Google Allo 的對話界面，效果以下：

雖然對話氣泡出現的動效用在實際產品設計中，會顯得略於浮誇，但這卻給了我一個啓發，是否是能夠考慮給對話氣泡賦予一些有情感的動效呢?好比當我給這個氣泡的內容點了贊，氣泡會感到「高興」而蹦蹦跳跳一下;當我以爲氣泡裏的回答沒有任何幫助，氣泡會由於「沮喪」而癱軟成一團爛泥;當我表達了憤怒生氣的情緒時，氣泡會由於「懼怕」而瑟瑟發抖……把設計的對象當作一個有血有肉的人，再去思考怎麼賦予它的行爲以意義，也許能夠更好地幫咱們作出「觸動人心」的動效設計。

3. 通感聯想

「通感」是咱們在中學時就學過的一種修辭手法，「將人的聽覺、視覺、嗅覺、味覺、觸覺等不一樣感受互相溝通、交錯，彼此挪移轉換，將原本表示甲感受的詞語移用來表示乙感受，使意象更爲活潑、新奇」。

在體驗設計中咱們一樣能夠運用「通感」，不過受限於平臺，嗅、味、觸覺的施展空間不大，大部分狀況下主要都依賴視覺與聽覺元素的轉換。好比說給用戶操做以反饋的場景，大部分設計可能只考慮了視覺一個維度，可能作出水波擴散、煙花綻開、漫天彩紙片飛舞一類的特效，若是再加上符合感受的對應趣味音效，也許就能把氛圍渲染得更上一層樓了;而對於FM、音樂播放器一類的應用，則能夠反過來把聲音具象爲視覺元素，好比把聲波具象爲一輪輪擴散的漣漪，挖掘聲音中的情感等……

文章來源：http://www.haitaoit.com/