視覺設計師≈美工/圖標仔，是很多“圈外人”甚至設計師自己對“視覺設計”的理解。

當然，“美”作為信息傳達的載體，其本質上，也是為了吸引三心二意的用戶們對我們能有多一點的興趣和耐心（在線卑微）…

然而，我們每天都會通過視覺獲取大量信息，只能看到“美”的“載體”未免也太過空虛，尤其當這種“美”還越來越千篇一律的時候。

如何通過用戶的“眼”打動用戶的“心”，對其行為造成真正的影響，才是商業設計應該重點考慮的問題。

雖然產品轉化是產品、資源、運營、設計一整套組合拳打出后的結果，但本文還是想僅從視覺的角度，分析設計師在用戶產品生命周期的3個階段，分別可以采取的視覺策略。

如果你也在探索「影響用戶決策行為」的方法，希望本文能對你有所增益。

框架包括：

感知期：視覺是點燃情緒的引線
探索期：當脆弱的用戶失去耐心時
促購期：按鈕大一點就能解決問題嗎？

上期回顧：

探索期：當脆弱的用戶失去耐心時

情緒可以喚起動機，同樣也可以澆滅動機。用戶在探索產品的過程中，產生了“迷惑”、“煩躁”，“傻X”，“不知道接下去會怎樣，好迷茫“的情緒，就有可能喪失剛剛燃起的動力，放棄最后的行動。

如何通過設計降低用戶探索過程中的“負面情緒”？以下6個策略可以參考：

1. 分清主次，結構化表達信息

相較于傾聽，其實大多數人都更喜歡表達，這個習慣帶到產品設計中所帶來的問題就是，覺得要表達的每個信息都特別重要，觀眾們最好能全部接收，挨個兒研讀。

但其實這是不可能的，因為就算跟人面對面的溝通，雙方雖然都頻頻點頭，但也未必真的能完全聽懂對方的意思…更別說，面對屏幕，跟用戶單向溝通的情況了。

設計師需要從表達視角轉變為觀眾視角，對界面中的信息進行結構性歸納（需要時可見）：突出少量用戶需要的重點部分，弱化大量次要部分、狠心刪減掉不那么緊急重要的部分。

△ 允許用戶忽視大部分信息，專注重點信息

2. 杜絕傲慢，用用戶的語言表達

用戶產生負面情緒還有可能是因為接收了和其文化/專業背景不符的信息，認知上無法理解：產品設計者們在自說自話，也不管用戶是不是能明白。

20世紀50年代，第一代計算機剛出現時，非常“高端、專業”，只能通過計算機語言命令來完成交互，不會代碼的人根本難以企及，因此計算機很長一段時間也只能是在少數企業、精要機構里使用。

大多數用戶并不想“博學多才”，他們只想順利地使用產品。——Alan Cooper《交互設計精髓》

1973年，施樂公司首次發布了采用圖形化用戶界面的電腦Alto，開始使用普通人更容易接受的擬物化、隱喻等設計手法，不再把“后臺邏輯”赤裸裸地展示給用戶，計算機才能在普通人中得以廣泛運用。

3. 尊重習慣，保持設計的一致性

習慣的力量是強大的，在《思考的快與慢》里，作者認為人的行為大部分都是通過習慣（快思考模式）在無/弱意識地情況下做出的。

只要稍微體會一下讓右撇子使用左手時的痛苦，就不應放肆挑戰用戶已養成的習慣，除非產品有足夠的壟斷力，否則讓用戶重新學習新習慣，就是在推離用戶的邊緣瘋狂試探。

值得一提的是，恰當地利用輕微的“反習慣”冒犯也可以起到讓用戶“三思后行”的作用，比如淘寶的“退出挽留彈窗”：

4. 保持禮貌，不打斷用戶

美國加利福利亞大學一項針對專注力的研究表明：專注的工作被打斷后，人們重新恢復專注的時間平均為8分鐘，這種現象被很形象地稱為“鋸齒效應”，不僅如此，還有超過50%已經開始的工作會因為被打斷而半途而廢。

但不得不承認的是，我們又生活在一個注意力特別難集中的時代，時間被各種誘惑高度碎片化，已經無法真正長時間沉浸在一個產品/一本書/一個人的身上。

作為設計師，我們需要一些策略來保護用戶脆弱的“專注力”：

如果非要有打斷，出場順序很重要

保證主要流程符合用戶心理預期，順著用戶的欲望而動，不人為打斷他們已經非常短暫的注意力。

下圖為“未登錄”的用戶經過詳情頁——支付完成的交互流程。

用戶點擊“加入購物車”卻彈出“登錄/注冊頁面”，人為打斷了購買流程，如果登錄流程還足夠復雜，就很容易讓其放棄購買。

下圖為優化后，聚焦主流程的完整性，在技術條件允許的情況下，將“登錄/注冊”作為次要流程，讓其對用戶專注力的打擾降到最小。

保持禮貌，實時閉環反饋

百度網盤找回密碼界面：提前說明規則、任務中恰當提醒、用戶犯錯后給出解決方法。

5. 降低用戶的“等待”感知

人其實是喜歡即時性、確定性的動物，但是產品在使用過程中又難免會出現加載時間長、操作步驟多的情況，而當用戶不知將來會發生什么時，就會很容易放棄。

可以采用以下兩個方法降低用戶對于“等待”的心理感知：

讓產品設計符合用戶的審美

我們的眼睛喜歡低能耗、高效的形式 。——《進化論美學》

當產品出現短暫錯誤時，相較于"丑"的界面，用戶面對符合自己審美的界面，忍耐度也會更高。

讓用戶覺得等待是“理所應當”的

對于用戶來講，產品內部到底是如何運行的真相并不重要，讓等待過程符合他們頭腦中的認知，緩解其對未知的焦慮很重要！

全民k歌生成歌曲時，會有很長的一段加載時間，但是設計利用這個時間，做到了讓用戶心里有數，有事可做，甚至覺得時間還可以再長一點。（原諒公眾號的渣像素吧！）

6. 考慮面向“視覺障礙”時的視覺設計

視覺障礙

世界上大約有8%的男性和0.5%的女性有顏色感知障礙（Wolfmaier ,1999）無法分辨特定的顏色（紅、綠，黃、藍等顏色）。

而且，隨著年齡的增長，眼睛晶狀體也會逐漸失去彈性，據統計，50歲以上的一半人有一定程度的低視力狀況（視敏度低于20/40，Cathy O' Connor ）。

這其實是一個非常大的群體，對于視覺障礙人群，適用普通用戶的界面策略可能會失效，但他們的訴求卻似乎并沒有在界面設計中引起足夠的重視。

△?紅綠色盲除了無法分辨紅色、綠色，還無法分辨深紅色和黑色、藍色和紫色、淺藍色和白色。

場景障礙

在強烈的光照下，會將屏幕的色彩“沖洗掉”，將彩色屏變為“灰度屏”(來源《認知與設計》)

如何減少閱讀障礙呢？

不使用顏色作為唯一信息傳達方式

優化對比度，讓更多人群在更多場景下舒適閱讀

2020年的Ucan大會上，語雀團隊分享了他們為了提供更友善的閱讀體驗，提升文字對比度為AAA級標準。

什么是W3C的AAA級標準？

按照W3C的解讀，該標準針對的是三類典型的“日常生活視力（包括矯正視力）人群”，分別為：正常視力、輕微視覺障礙（也是80歲老人的典型視力）以及中度視覺損傷者。

AAA級標準就是能滿足中度視覺障礙者（視敏度20/80以下）的無障礙閱讀的標準

促購期：“大”一點就能解決問題？

1. 增強“召喚按鈕/用語”用戶感知

在工作中，常有需求方對設計師說，這個按鈕的轉化不行，再大一點吧！

那么，為什么要“大”一點？

按鈕設計的大一點，本質上其實是產品最后時刻對用戶進行的”主動推銷“，但線上和線下還不一樣，我們沒有銷售員跟在客戶后面暗示說：“看了這么久了，趕緊買了吧！”。

在視覺上，線上只能通過把“召喚按鈕”設計的更加顯眼（大多還會配合“稀缺效應”、“錨定效應”、“承諾一致效應”、“權威效應”、“互惠效應”、“熟人效應”、“社會認同效應”等運營促銷手段——《影響力》），以達到增強用戶感知，同時繞過用戶理性思維快速促銷的作用。

斯坦福教授福格（BJ Fogg）把這一系列組合拳稱為：“扳機（Trigger）”即，設計通過扣動扳機快速促成用戶最后的行動。

如果以增強用戶的視覺感知為目的，尺寸對比其實并非唯一的影響因素：

左、上位置注意力權重最高

下圖為用戶在閱讀文章/促銷卡片時的眼動熱力圖，紅色-紫色/綠色分別代表著用戶注意力從強到弱。

從上面的熱力圖里，我們至少可以歸納出用戶的5個行為模型；

• 用戶通過“掃描”閱讀，并非逐字逐句；
• 閱讀流線是從上到下、從左到右的；
• 用戶會最先注意到上部、左邊的信息；
• 對上/左信息無興趣，就不會繼續探索；
• 最后視覺重心會落在右/下部分

簡化為下圖的模式：

所以，我們在實際的設計中，應當順應用戶的視覺重心流線，有的放矢地放置重點元素：將需要用戶強感知的信息放在模塊的上/左部分，結論性操作放在下/右部分。

恰當的圖像、動效可以吸引用戶注意力

我們的大腦更喜歡講故事，特別是當它們伴隨著圖像和視頻時，而不是整頁的沉重文字。——《How Eye Tracking Can Help You With Website Optimization?》

生動圖像比靜態更能吸引注意力（拼多多）

使用“箭頭”吸引用戶注意力

國外一家名叫CXL的機構做了一個關于視覺引導有效性的研究——《Which Visual Cues Work Best To Drive Attention?》

CXL得出了4點結論：

• 引導方式會影響用戶對信息的注意力程度
• 「箭頭引導」能讓注意力更持久
• 「人眼背離目標」讓注意力更短暫
• 引導方式不能影響用戶對元素的印象

該試驗結論也在實踐中被廣泛運用：

但是，一味增強“召喚按鈕”的注意力也并非萬能藥。

當用戶動機特別低時，扳機（Trigger）是無效的

不要忘了福格行為模型（Fogg's behavior model）告訴我們：動機+能力+扳機=行動

當用戶在特別高動機情況下，“體驗設計師”其實是沒有什么存在感的，因為并不需要我們怎么努力，用戶都會主動行動。

以“體驗差”而出圈的12306以及一些企業、政府內部的產品，即使用戶需要忍受冗雜的界面、長時間的等待，但由于這類產品提供的服務與用戶的生存需求息息相關，還具有一定的壟斷、難以替代的地位，所以就算用戶付出的成本極高，用戶也甘愿不計成本去適應。

而用戶在特別低動機情況下，我們設計師的命運就被反轉過來了，任憑我們怎么費盡心機，把召喚按鈕做到半屏這么大，用戶也依舊不會看我們一眼。

每個元素都是“扳機”（Trigger），就沒有“扳機”

注意力是非常稀缺的資源，一個女團只能有一個C位，如果大家都是主角，就是沒有主角，金主爸爸們就會眼花繚亂、無所適從，不知該pick誰（席克定律：給用戶的選擇越多，用戶做決定的時間就越長）。

△?每個元素都在用力招徠客人，一時竟讓人有些無從下手（花小豬）

總結

通過2篇文章，我們分析了在數字產品銷售的3個階段可以采取的8個視覺策略，分別是：

1. 在初次見面的感知期

策略一，創造有故事性的情緒場景。

2. 在關系脆弱的探索期

站在用戶角度，保護他們脆弱的情緒：

• 策略二，分清主次，結構化表達信息；
• 策略三，杜絕傲慢，用用戶的語言表達；
• 策略四，尊重習慣，保持設計的一致性；
• 策略五，保持禮貌，不打斷用戶；
• 策略六，降低對于“等待”的實際感知；
• 策略七，面向“視覺障礙”時的視覺設計。

3. 在臨門一腳的促銷期

策略八，增強“召喚”感知，觸發行動。

4. 同時也要注意：

• 當用戶對信息不感興趣時，“行動按鈕”再顯眼也沒用；
• 用戶的“注意力”非常脆弱，設計引導時要聚焦不要分散。

最后

不要忽視測試迭代的重要性，不同的產品具有差異性，通過市場反饋來快速驗證、修正、沉淀并運用到后續的迭代中，才是產品和個人成長最快的方式。

ps:感謝我的朋友閆彥，在無障礙設計部分給我的指點，另外，大部分參考資料已經在文中列出，這里不再一一列舉。

歡迎關注作者微信公眾號：「雨橋說」