起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識從美工到設(shè)計(jì)師，影響用戶行為的8個視覺策略
編輯導(dǎo)語：視覺設(shè)計(jì)是利用視覺符號來傳遞各種信息的設(shè)計(jì)，用戶在使用產(chǎn)品時，會對上面的信息進(jìn)行一個獲取，視覺設(shè)計(jì)也是為了讓用戶關(guān)注到重點(diǎn)，提高用戶決策；本文作者分享了關(guān)于用戶行為的8個視覺策略，我們一起來看一下。
視覺設(shè)計(jì)師≈美工/圖標(biāo)仔，是很多“圈外人”甚至設(shè)計(jì)師自己對“視覺設(shè)計(jì)”的理解。
當(dāng)然，“美”作為信息傳達(dá)的載體，其本質(zhì)上，也是為了吸引三心二意的用戶們對我們能有多一點(diǎn)的興趣和耐心（在線卑微）。
然而，我們每天都會通過視覺獲取大量信息，只能看到“美”的“載體”未免也太過空虛，尤其當(dāng)這種“美”還越來越千篇一律的時候。
如何通過用戶的“眼”打動用戶的“心”，對其行為造成真正的影響，才是商業(yè)設(shè)計(jì)應(yīng)該重點(diǎn)考慮的問題。
雖然產(chǎn)品轉(zhuǎn)化是產(chǎn)品、資源、運(yùn)營、設(shè)計(jì)一整套組合拳打出后的結(jié)果；但本文還是想僅從視覺的角度，分析設(shè)計(jì)師在用戶產(chǎn)品生命周期的3個階段，分別可以采取的視覺策略。
如果你也在探索「影響用戶決策行為」的方法，希望本文能對你有所增益。
框架包括：
- 感知期：視覺是點(diǎn)燃情緒的引線。
- 探索期：當(dāng)脆弱的用戶失去耐心時。
- 促購期：按鈕大一點(diǎn)就能解決問題嗎？
一、感知期：視覺是點(diǎn)燃情緒的引線
1. 策略一：為用戶創(chuàng)造有故事的情緒場景
梁寧在《產(chǎn)品思維30講》里講，最能激發(fā)用戶動機(jī)(motivation)的是人的底層操作系統(tǒng)：情緒——人的痛苦、愉悅、不爽促使人去改變自己、付出行動。
但梁寧老師沒有講的是：人同時也是健忘、善變的，沒有人會保持一直痛苦、不爽、甚至快樂的情緒去生活，人的情緒很大程度是被當(dāng)時所處的場景所喚起的。
舉一個栗子：
我們國家有一段屈辱的現(xiàn)代史，可以說是所有國人心中的痛，但我們一直痛苦了嗎？
很明顯沒有！因?yàn)榇藭r此刻的我們正生活在安居樂業(yè)的場景中。
如果換一個場景，去看一場抗戰(zhàn)影片，血腥殘忍的畫面鋪在你面前：我們的同類，因弱小而被屠殺、瀕臨滅亡…你會感到痛苦嗎？
你會痛苦，甚至還會憤怒，恨不能馬上參軍為國捐軀。
我們身處的場景觸發(fā)了休眠的記憶/想象力按鈕，激發(fā)了情緒反應(yīng)；而健全人大部分的信息都是通過視覺獲取，所以視覺也是喚起情緒最快的方式。
我們應(yīng)該如何搭建一個情緒場景呢？
為了說明方便，再舉一個生動的例子，例如，下圖是一個“測試與明星長相相似度”的需求原型：
我們嘗試分三步為它創(chuàng)造一個情緒場景：
第一步：定位——找到目標(biāo)用戶的群體特征。
設(shè)計(jì)的中心是人，而人是一切社會關(guān)系的總和，可能你會說，每個人都是“個性獨(dú)立”的啊；但其實(shí)標(biāo)榜“個性獨(dú)立”本身也是特定時代群體的共性。
人的年齡范圍、生活地域、愛好習(xí)慣、文化背景都可以構(gòu)建群體，而人對某類“社會群體”的“歸屬期望”潛移默化地影響著每個人的選擇和行為。
例如我們可以對95后的群體特性歸納如下：
第二步：造夢——通過視覺場景為目標(biāo)用戶植入情緒。
比較有趣的是上面說的是人們“期望歸屬”的群體，而不是“實(shí)際歸屬”的群體；這包括了“我期望的我”和“你們認(rèn)為的我”之間矛盾所帶來的不爽與痛苦。
當(dāng)人們?yōu)榱俗C明“我是我期望的樣子”而不是“你們認(rèn)為的我的樣子”的時候，會具有更強(qiáng)的動機(jī)和行動力。
所以，能激發(fā)用戶情緒的設(shè)計(jì)，不會僅僅是滿足用戶所屬群體當(dāng)前的需求，還會在一定程度上給予用戶群體“做夢”的想象力，告訴用戶：雖然你現(xiàn)在是A，其實(shí)你也可以是B，而我的產(chǎn)品可以幫到你。
根據(jù)用戶群體特征，可以推導(dǎo)的視覺場景：
除了圖像以外，顏色在用戶文化背景中帶有的情感屬性也可輔助我們構(gòu)建情緒場景，比如：
- 紅色：熱情、煩躁、危險(xiǎn)
- 綠色：安全、健康、清新
- 黃色：溫馨、親和、愉快
- 藍(lán)色：冷峻、憂郁、穩(wěn)重
- 紫色：神秘、高貴、浪漫
根據(jù)想要在場景中植入的情感，選擇合適的顏色如下：
第三步：傳達(dá)——圖形化解讀核心（情與利）文案。
比起圖像，文字的一個優(yōu)勢是理解起來更準(zhǔn)確，但閱讀文字其實(shí)又是一件比較費(fèi)勁的事情；在腦力不足的幼兒/老年時期，人甚至需要把字念出聲來才能理解其中的意思。
面對小小手機(jī)屏幕的用戶受到的干擾會非常多，客觀上無法真正地像看電影一樣的沉浸在我們創(chuàng)造的場景里；所以，在數(shù)字產(chǎn)品文案設(shè)計(jì)上，信息傳遞的精準(zhǔn)和迅速尤為重要。
當(dāng)我們面對需求方給出的一大段文案時，可以通過“情”和“利”兩個緯度進(jìn)行精簡聚焦。
原文案：
我是大明星！福利多多，參加活動將有機(jī)會獲得不同額度優(yōu)惠券最高立減60元，還有大牌明星親筆簽名等你拿呢～
從“情”和“利”兩個緯度提取關(guān)鍵字后：
喚起情緒：我、大、明星。
帶來利益：福利超多、優(yōu)惠券、親筆簽名。
然后，通過合理的構(gòu)圖歸納場景元素成稿：
二、探索期：當(dāng)脆弱的用戶失去耐心時
情緒可以喚起動機(jī)，同樣也可以澆滅動機(jī)；用戶在探索產(chǎn)品的過程中，產(chǎn)生了“迷惑”、“煩躁”、“不知道接下去會怎樣，好迷?！暗那榫w，就有可能喪失剛剛?cè)计鸬膭恿?，放棄最后的行動?/p>
如何通過設(shè)計(jì)降低用戶探索過程中的“負(fù)面情緒”？
以下6個策略可以參考：
1. 策略一：分清主次，結(jié)構(gòu)化表達(dá)信息
相較于傾聽，其實(shí)大多數(shù)人都更喜歡表達(dá)，這個習(xí)慣帶到產(chǎn)品設(shè)計(jì)中所帶來的問題就是——覺得要表達(dá)的每個信息都特別重要，觀眾們最好能全部接收，挨個兒研讀。
但其實(shí)這是不可能的，因?yàn)榫退愀嗣鎸γ娴臏贤?，雙方雖然都頻頻點(diǎn)頭，但也未必真的能完全聽懂對方的意思；更別說，面對屏幕，跟用戶單向溝通的情況了。
設(shè)計(jì)師需要從表達(dá)視角轉(zhuǎn)變?yōu)橛^眾視角，對界面中的信息進(jìn)行結(jié)構(gòu)性歸納（需要時可見）：突出少量用戶需要的重點(diǎn)部分，弱化大量次要部分、狠心刪減掉不那么緊急重要的部分。
允許用戶忽視大部分信息，專注重點(diǎn)信息
2. 策略二：杜絕傲慢，用用戶的語言表達(dá)
用戶產(chǎn)生負(fù)面情緒還有可能是因?yàn)榻邮樟撕推湮幕?專業(yè)背景不符的信息，認(rèn)知上無法理解：產(chǎn)品設(shè)計(jì)者們在自說自話，也不管用戶是不是能明白。
20世紀(jì)50年代，第一代計(jì)算機(jī)剛出現(xiàn)時，非?！案叨?、專業(yè)”，只能通過計(jì)算機(jī)語言命令來完成交互，不會代碼的人根本難以企及；因此計(jì)算機(jī)很長一段時間也只能是在少數(shù)企業(yè)、精要機(jī)構(gòu)里使用。
大多數(shù)用戶并不想“博學(xué)多才”，他們只想順利地使用產(chǎn)品?！狝lan?Cooper《交互設(shè)計(jì)精髓》
1973年，施樂公司首次發(fā)布了采用圖形化用戶界面的電腦Alto，開始使用普通人更容易接受的擬物化、隱喻等設(shè)計(jì)手法，不再把“后臺邏輯”赤裸裸地展示給用戶；計(jì)算機(jī)才能在普通人中得以廣泛運(yùn)用。
3. 策略三：尊重習(xí)慣，保持設(shè)計(jì)的一致性
習(xí)慣的力量是強(qiáng)大的，在《思考的快與慢》里，作者認(rèn)為人的行為大部分都是通過習(xí)慣（快思考模式）在無/弱意識地情況下做出的。
只要稍微體會一下讓右撇子使用左手時的痛苦，就不應(yīng)放肆挑戰(zhàn)用戶已養(yǎng)成的習(xí)慣；除非產(chǎn)品有足夠的壟斷力，否則讓用戶重新學(xué)習(xí)新習(xí)慣，就是在推離用戶的邊緣瘋狂試探。
值得一提的是，恰當(dāng)?shù)乩幂p微的“反習(xí)慣”冒犯也可以起到讓用戶“三思后行”的作用，比如淘寶的“退出挽留彈窗”：
4. 策略四：保持禮貌，不打斷用戶
美國加利福利亞大學(xué)一項(xiàng)針對專注力的研究表明：專注的工作被打斷后，人們重新恢復(fù)專注的時間平均為8分鐘，這種現(xiàn)象被很形象地稱為“鋸齒效應(yīng)”；不僅如此，還有超過50%已經(jīng)開始的工作會因?yàn)楸淮驍喽胪径鴱U。
但不得不承認(rèn)的是，我們又生活在一個注意力特別難集中的時代，時間被各種誘惑高度碎片化，已經(jīng)無法真正長時間沉浸在一個產(chǎn)品/一本書/一個人的身上。
作為設(shè)計(jì)師，我們需要一些策略來保護(hù)用戶脆弱的“專注力”：
1）如果非要有打斷，出場順序很重要
保證主要流程符合用戶心理預(yù)期，順著用戶的欲望而動，不人為打斷他們已經(jīng)非常短暫的注意力。
下圖為“未登錄”的用戶經(jīng)過詳情頁——支付完成的交互流程。
用戶點(diǎn)擊“加入購物車”卻彈出“登錄/注冊頁面”，人為打斷了購買流程，如果登錄流程還足夠復(fù)雜，就很容易讓其放棄購買。
下圖為優(yōu)化后，聚焦主流程的完整性，在技術(shù)條件允許的情況下，將“登錄/注冊”作為次要流程，讓其對用戶專注力的打擾降到最小。
2）保持禮貌，實(shí)時閉環(huán)反饋
百度網(wǎng)盤找回密碼界面：提前說明規(guī)則、任務(wù)中恰當(dāng)提醒、用戶犯錯后給出解決方法。
5. 策略五： 降低用戶的“等待”感知
人其實(shí)是喜歡即時性、確定性的動物，但是產(chǎn)品在使用過程中又難免會出現(xiàn)加載時間長、操作步驟多的情況；而當(dāng)用戶不知將來會發(fā)生什么時，就會很容易放棄。
可以采用以下兩個方法降低用戶對于“等待”的心理感知：
1）讓產(chǎn)品設(shè)計(jì)符合用戶的審美
我們的眼睛喜歡低能耗、高效的形式??！哆M(jìn)化論美學(xué)》
當(dāng)產(chǎn)品出現(xiàn)短暫錯誤時，相較于“丑”的界面，用戶面對符合自己審美的界面，忍耐度也會更高。
2）讓用戶覺得等待是“理所應(yīng)當(dāng)”的
對于用戶來講，產(chǎn)品內(nèi)部到底是如何運(yùn)行的真相并不重要，讓等待過程符合他們頭腦中的認(rèn)知，緩解其對未知的焦慮很重要！
全民k歌生成歌曲時，會有很長的一段加載時間，但是設(shè)計(jì)利用這個時間，做到了讓用戶心里有數(shù)、有事可做，甚至覺得時間還可以再長一點(diǎn)。
6. 策略六： 考慮面向“視覺障礙”時的視覺設(shè)計(jì)
1）視覺障礙
世界上大約有8%的男性和0.5%的女性有顏色感知障礙（Wolfmaier ,1999）無法分辨特定的顏色（紅、綠、黃、藍(lán)等顏色）。
而且，隨著年齡的增長，眼睛晶狀體也會逐漸失去彈性；據(jù)統(tǒng)計(jì)，50歲以上的一半人有一定程度的低視力狀況（視敏度低于20/40，Cathy O’ Connor ）。
這其實(shí)是一個非常大的群體，對于視覺障礙人群，適用普通用戶的界面策略可能會失效，但他們的訴求卻似乎并沒有在界面設(shè)計(jì)中引起足夠的重視。
紅綠色盲除了無法分辨紅色、綠色，還無法分辨深紅色和黑色、藍(lán)色和紫色、淺藍(lán)色和白色。
2）場景障礙
在強(qiáng)烈的光照下，會將屏幕的色彩“沖洗掉”，將彩色屏變?yōu)椤盎叶绕痢?來源《認(rèn)知與設(shè)計(jì)》)
如何減少閱讀障礙呢？
不使用顏色作為唯一信息傳達(dá)方式：
優(yōu)化對比度，讓更多人群在更多場景下舒適閱讀：
2020年的Ucan大會上，語雀團(tuán)隊(duì)分享了他們?yōu)榱颂峁└焉频拈喿x體驗(yàn)，提升文字對比度為AAA級標(biāo)準(zhǔn)。
什么是W3C的AAA級標(biāo)準(zhǔn)？
按照W3C的解讀，該標(biāo)準(zhǔn)針對的是三類典型的“日常生活視力（包括矯正視力）人群”，分別為：正常視力、輕微視覺障礙（也是80歲老人的典型視力）以及中度視覺損傷者。
AAA級標(biāo)準(zhǔn)就是能滿足中度視覺障礙者（視敏度20/80以下）的無障礙閱讀的標(biāo)準(zhǔn)。
三、促購期：“大”一點(diǎn)就能解決問題？
1. 策略一： 增強(qiáng)“召喚按鈕/用語”用戶感知
在工作中，常有需求方對設(shè)計(jì)師說，這個按鈕的轉(zhuǎn)化不行，再大一點(diǎn)吧！
那么，為什么要“大”一點(diǎn)？
按鈕設(shè)計(jì)的大一點(diǎn)，本質(zhì)上其實(shí)是產(chǎn)品最后時刻對用戶進(jìn)行的“主動推銷”；但線上和線下還不一樣，我們沒有銷售員跟在客戶后面暗示說：“看了這么久了，趕緊買了吧！”
在視覺上，線上只能通過把“召喚按鈕”設(shè)計(jì)的更加顯眼（大多還會配合“稀缺效應(yīng)”、“錨定效應(yīng)”、“承諾一致效應(yīng)”、“權(quán)威效應(yīng)”、“互惠效應(yīng)”、“熟人效應(yīng)”、“社會認(rèn)同效應(yīng)”等運(yùn)營促銷手段——《影響力》）；以達(dá)到增強(qiáng)用戶感知，同時繞過用戶理性思維快速促銷的作用。
斯坦福教授福格（BJ Fogg）把這一系列組合拳稱為：“扳機(jī)（Trigger）”即——設(shè)計(jì)通過扣動扳機(jī)快速促成用戶最后的行動。
如果以增強(qiáng)用戶的視覺感知為目的，尺寸對比其實(shí)并非唯一的影響因素：
1）左、上位置注意力權(quán)重最高
下圖為用戶在閱讀文章/促銷卡片時的眼動熱力圖，紅色-紫色/綠色分別代表著用戶注意力從強(qiáng)到弱。
從上面的熱力圖里，我們至少可以歸納出用戶的5個行為模型；
- 用戶通過“掃描”閱讀，并非逐字逐句；
- 閱讀流線是從上到下、從左到右的；
- 用戶會最先注意到上部、左邊的信息；
- 對上/左信息無興趣，就不會繼續(xù)探索；
- 最后視覺重心會落在右/下部分。
簡化為下圖的模式：
所以，我們在實(shí)際的設(shè)計(jì)中，應(yīng)當(dāng)順應(yīng)用戶的視覺重心流線，有的放矢地放置重點(diǎn)元素：將需要用戶強(qiáng)感知的信息放在模塊的上/左部分，結(jié)論性操作放在下/右部分。
2）恰當(dāng)?shù)膱D像、動效可以吸引用戶注意力
我們的大腦更喜歡講故事，特別是當(dāng)它們伴隨著圖像和視頻時，而不是整頁的沉重文字?！禜ow Eye Tracking Can Help You With Website Optimization?》
生動圖像比靜態(tài)更能吸引注意力（拼多多）
3）使用“箭頭”吸引用戶注意力
國外一家名叫CXL的機(jī)構(gòu)做了一個關(guān)于視覺引導(dǎo)有效性的研究——《Which Visual Cues Work Best To Drive Attention?》
CXL得出了4點(diǎn)結(jié)論：
- 引導(dǎo)方式會影響用戶對信息的注意力程度；
- 「箭頭引導(dǎo)」能讓注意力更持久；
- 「人眼背離目標(biāo)」讓注意力更短暫；
- 引導(dǎo)方式不能影響用戶對元素的印象。
該試驗(yàn)結(jié)論也在實(shí)踐中被廣泛運(yùn)用：
但是，一味增強(qiáng)“召喚按鈕”的注意力也并非萬能藥。
當(dāng)用戶動機(jī)特別低時，扳機(jī)（Trigger）是無效的。
不要忘了福格行為模型（Fogg’s behavior model）告訴我們：動機(jī)+能力+扳機(jī)=行動。
當(dāng)用戶在特別高動機(jī)情況下，“體驗(yàn)設(shè)計(jì)師”其實(shí)是沒有什么存在感的，因?yàn)椴⒉恍枰覀冊趺磁Γ脩舳紩鲃有袆印?/p>
以“體驗(yàn)差”而出圈的12306以及一些企業(yè)、政府內(nèi)部的產(chǎn)品，即使用戶需要忍受冗雜的界面、長時間的等待；但由于這類產(chǎn)品提供的服務(wù)與用戶的生存需求息息相關(guān)，還具有一定的壟斷、難以替代的地位；所以就算用戶付出的成本極高，用戶也甘愿不計(jì)成本去適應(yīng)。
而用戶在特別低動機(jī)情況下，我們設(shè)計(jì)師的命運(yùn)就被反轉(zhuǎn)過來了，任憑我們怎么費(fèi)盡心機(jī)，把召喚按鈕做到半屏這么大，用戶也依舊不會看我們一眼。
每個元素都是“扳機(jī)”（Trigger），就沒有“扳機(jī)”。
注意力是非常稀缺的資源，一個女團(tuán)只能有一個C位，如果大家都是主角，就是沒有主角，金主爸爸們就會眼花繚亂、無所適從，不知該pick誰（席克定律：給用戶的選擇越多，用戶做決定的時間就越長）。
每個元素都在用力招徠客人，一時竟讓人有些無從下手（花小豬）
四、總結(jié)
通過這篇文章，我們分析了在數(shù)字產(chǎn)品銷售的3個階段可以采取的8個視覺策略，分別是：
在初次見面的感知期：
策略一，創(chuàng)造有故事性的情緒場景。
在關(guān)系脆弱的探索期，站在用戶角度，保護(hù)他們脆弱的情緒：
- 策略二，分清主次，結(jié)構(gòu)化表達(dá)信息；
- 策略三，杜絕傲慢，用用戶的語言表達(dá)；
- 策略四，尊重習(xí)慣，保持設(shè)計(jì)的一致性；
- 策略五，保持禮貌，不打斷用戶；
- 策略六，降低對于“等待”的實(shí)際感知；
- 策略七，面向“視覺障礙”時的視覺設(shè)計(jì)。
在臨門一腳的促銷期：
策略八，增強(qiáng)“召喚”感知，觸發(fā)行動。
同時也要注意：
- 當(dāng)用戶對信息不感興趣時，“行動按鈕”再顯眼也沒用；
- 用戶的“注意力”非常脆弱，設(shè)計(jì)引導(dǎo)時要聚焦不要分散。
最后，不要忽視測試迭代的重要性，不同的產(chǎn)品具有差異性；通過市場反饋來快速驗(yàn)證、修正、沉淀并運(yùn)用到后續(xù)的迭代中，才是產(chǎn)品和個人成長最快的方式。
ps：感謝我的朋友閆彥，在無障礙設(shè)計(jì)部分給我的指點(diǎn)，另外，大部分參考資料已經(jīng)在文中列出，這里不再一一列舉。
作者：雨橋同學(xué)，微信公眾號：雨橋說（ID：yuqiaoshuo）
本文由@雨橋同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
