前言

商業競爭的本質，是對用戶注意力的爭奪。只有贏得了用戶注意力的產品，才可能在殘酷的市場競爭中生存延續。

進入互聯網下半場，人口紅利消失，如何服務好存量用戶，抓住他們注意力，提升產品功能轉化成各大產品關注的核心。作為設計師，我們掌管著產品的表現層，決定著用戶對產品的第一印象和探索欲望。不管是基于內在興趣還是外在刺激，當用戶打開我們的產品，看到我們的設計界面時，能否通過界面設計，快速傳達核心信息，瞬間抓住用戶注意力，成為設計師越來越重要的使命。

所以，每個設計師都必須了解和掌握吸引用戶注意力的設計技巧，構筑起產品和用戶之間的互動之橋。

今天，我們就一起來聊一聊，設計師吸引用戶注意力的 4 大秘笈。

運動

運動，可以說是最有效的吸引用戶注意的方式。

從生物學的角度來講，人的視網膜中有兩類細胞：視錐細胞和視桿細胞。中央凹（約占 1%）處分布著約 350 萬的視錐細胞，負責高清晰度的解析聚焦的物體。中央凹周圍 99%的區域則分布著約 1.25 億視桿細胞。

視桿細胞有一個非常重要的作用，就是覺察運動。一個個視桿細胞，就像一個個眼觀八方的偵察兵，時刻偵查著周圍環境的變化，一有風吹草動，就及時報告并引導視錐細胞看過去。

從進化論的角度來講，關注運動元素，是我們祖先賴以生存最重要的技能，畢竟在嚴酷的生存條件下，任何運動的動物，不是以我們為食，就是被我們所食，錯失哪一個都不利于我們的生存。在這樣的生存環境下，我們的潛意識學會了靈活控制我們的眼球，看向運動的物體，它比我們的意識快上 60~110 毫秒，這關乎生命的時間差，有利于我們在獵物競爭中生存下來。

正因為對運動物體的關注，是一個不由自主的潛意識過程，且有充足的視桿細胞支持，所以運動，是最有效，也被使用得最為泛濫的注意力引導方式。

適用場景：

在界面設計時，把最想讓用戶注意并操作的元素添加合適的動效，可以有效的提升該元素的點擊轉化率。

比如以下這個案例：

這個案例比較極致，彈出窗口本來就是模態的，獨占式的，會讓用戶的注意力都聚焦其上，在彈窗按鈕上再同時使用縮放動效+手勢引導，幾乎沒有用戶會錯過或拒絕它。

圖 1 喜馬拉雅的禮包動效

縮放動效包含著從小到大的變化過程，我們的視桿細胞對這種動效尤其敏感，因為一個物體從小變大，相比其他形式，會更具威脅性。（對應在自然界中，代表著事物由遠及近地向我們靠近，對我們的威脅系數最大）手勢引導則會刺激我們的鏡像神經元，讓我們產生無意識的模仿行為，從而促進行為的轉化。除了這種額外添加運動因素，我們還可以挖掘元素本身的運動屬性，并將其展示出來，這樣的運動方式，會更加貼合場景。

比如對于很多視頻類的產品，在提供封面讓用戶選擇時，都會提供預覽動圖，讓用戶更好的注意并理解其內容，進而促進內容本身的轉化。

圖 2 vivo i 視頻的影視動圖

相對而言，這種利用元素本身的運動屬性比附加的動效更容易讓用戶接受（而不是將其視為干擾）。

所以添加運動效果，對設計師的挑戰就是：要盡可能結合元素本身及場景的特性，讓其運動看起來自然而有趣。

人臉

人臉，也是一個被驗證的有效引導用戶注意的方式。

在人的大腦中，有專門針對人臉的識別視覺區域——梭狀回腦區。這個腦區可以讓人臉繞過通常的視覺解析渠道，快速被人注意和識別。人是社會性動物，除了自閉癥患者，喜歡看臉是人的天性。實驗表明：出生不到一小時的新生兒也喜歡看有明顯面部特征的東西。面對人臉，尤其是直視用戶的臉，社會人幾乎毫無防御之力，總是會忍不住與之對視。

適用場景：

在一些展示人物圖片的場景，盡可能展示人物的臉，特別是能看到眼睛的臉，可以明顯提升該人物圖片的視覺吸引力。

圖 3 人臉及眼睛對觀眾的視覺吸引力

不管是設計卡通角色，還是選擇物料素材，使用人臉且帶有眼睛的圖片都可以有效提升該圖片的視覺關注度。

比如去年天貓雙十一的養貓活動，就很好的運用了人臉及眼睛對用戶的視覺吸引力。

圖 4 淘寶養貓活動

再比如，我們在主播封面物料的規范上，也會鼓勵主播上傳臉部輪廓清晰，且可以跟用戶眼神交流的圖片，以此來提高主播封面對用戶的吸引力。

圖 5 主播封面建議

對比

對比是設計上最常用的表現手法，來凸顯界面上的主要信息。

綠葉上的一朵紅花是多么吸引眼球，在黑色的界面上找一個橙色按鈕又是多么容易，這種現象被稱作跳出效應。

圖 6 跳出效應

在序列搜索（上圖）中，用戶需要依次檢索所有字母才能找到目標字母 T，而在跳出搜索（下圖）中，目標字母 T 則像像香檳瓶塞一樣躍入眼簾。

特瑞斯曼和格拉德認為，跳出效應是因為視覺皮質中存在簡單物理特征（比如顏色、形狀）的偵測系統，從而使我們的感官能迅速定位所有符合這一特征的物體。但跳出效應無法出現在每一次搜索中，因為不可能每個搜索目標都有自己的探測器。

視覺系統擁有這樣的神經元，能夠辨認出超越顏色和簡單形狀的幾大視覺分類。所以我們在設計時，視覺探測器的設計要越簡單越有辨識度。比如最直觀的色彩，形狀、大?。ù旨殻?、虛實、投影、情緒等。在這些簡單的維度上，做出強烈的對比效果，可以很好的吸引用戶的視覺探測器。

1. 色彩

色彩是界面設計的第一語言。明快突出的色彩總是會在第一時間抓住用戶的注意力。

圖 7 圖片來自網絡

特別是頁面色彩相對單一時，色彩的顯著性越強，越容易產生跳出效應（如左圖相對右圖，左圖的跳出效應更明顯）。

除了讓元素本身自帶特別的色彩之外，設計上也常常采用附加元素色彩的方式來短期增強元素的視覺注意力，比如我們常見的小紅點和運營標簽，都是通過額外的元素色彩點綴，增強原信息的視覺醒目度。

圖 8 微信及 vivo 視頻截圖

2. 形狀

因為視覺皮質中存在簡單物理特征（比如顏色、形狀）的偵測系統，所以對于差異化的簡單圖形，能快速產生跳出效應。

同時，根據格式塔原理，人的視覺天生偏好簡潔的形狀，越是簡單的形狀，越是能夠吸引用戶的注意力。

圖 9 跳出效應及簡單原則

所以，在一堆正方形中的圓形，會產生跳出效應，讓人瞬間聚焦。

多個復雜圖形對比，圖形邊緣越是光滑簡潔，聚焦效果越好，圓形是所有形狀中聚焦效果最好的形狀，所以很多 logo 設計和海報的設計，都喜歡使用圓形來吸引用戶注意力。

圖 10 圖片來自網絡

想了解更全面的格式塔原理，看這篇：

3. 大小

大小對視覺的吸引力跟相對位置有關。當兩個元素并列（分開）時，一般來說，越大的元素，視覺重量感越強，越容易吸引用戶注意力。

但是當兩個元素重疊時，因為主體與背景的原理，大的圖形會被看作是背景，小的圖形會被看作是為主體，則相對小的圖形更容易吸引用戶注意力。

圖 11 主體與背景

所以當我們進行設計時，對于并列的元素，可以采用不同的大小，來強化大的主體。

圖 12 QQ 音樂截圖

也可以通過主體和背景的運用，用大的背景來聚焦小的主體。

圖 13 無印良品海報（圖片來自網絡）

4. 虛實

虛實模擬的是日常視覺世界中的遠近關系，近處的物體清晰，遠處的物體模糊。越清晰的物品，越容易吸引用戶注意力。

在手機上常用的毛玻璃效果，就是通過虛實的效果，讓用戶聚焦在當前的主體上。

圖 14 ios 手機截圖

5. 投影

在 Material Design 中，在屏幕的 X 軸和 Y 軸構成的平面之上，還引入了 Z 軸的概念。Z 軸表示平面上各圖層元素的高度關系，這種高度關系，主要是通過投影來體現。投影越大，代表圖層在 Z 軸上的位置越高。

圖 15 投影與 Z 軸的位置關系

在 Material design 中，對所有組件的海拔高度做了明確的定義，以避免不同圖層的元素在布局時出現高度沖突。

圖 16 Meteria design 中組件海拔的定義

海拔越高，投影越重，視覺層級越高，越容易吸引用戶的注意力。

圖 17 海拔與投影的案例示范

以 vivo 視頻為例：

圖 18 vivo i 視頻中視覺層級與投影的關系

頭部運營位，海拔最高，投影最重，希望借此強化用戶視覺焦點；其次是你正在追，用戶需求度最高，投影其次；最后是長尾的推薦樓層，無投影。

6. 情緒

人是社會性的動物，對于他人的情感變化非常敏感，越是強烈的情緒，越容易喚起用戶的注意力，如果要增強人物的表現力，可以用更飽滿的情緒來吸引用戶。

圖 19 飽滿的情緒更有視覺吸引力

本能

人有三個大腦：舊腦、中腦和新腦，它們是逐漸演化而來的。

舊腦最先演化，它的工作就是持續不斷的觀察環境并提出問題：他會害死我嗎？能吃嗎？能發生性關系嗎？這些生存要素就是舊腦所關心的所有事情（危險、食物、性）。

中腦是處理情感的部分，所以對情緒會比較敏感。

新腦是有意識的、理性的、負責邏輯推理的大腦，這是我們自認為最能干也最強大的腦。但在現實生活中，我們約有 95%的決策是來自無意識的，只有 5%的決策是受意識所支配的。因為舊腦和中腦一刻不停的在運轉，而新腦則多數時候都在偷懶休息。這就是為什么人們無法對危險、食物、和性視而不見，因為我們的舊腦和中腦時刻不停的在周圍環境中偵查它們的線索。

舉個例子，在出了車禍的道路上，往往不是因為道路阻塞導致交通擁堵，而是因為司機們對危險場景的好奇和關注導致車流行駛變慢，進而導致了交通擁堵。

無論你如何自控，你都無法抗拒危險、食物、和性的注意力，因為這是舊腦的本質工作。

圖 20 圖片來自網絡

本能其實是最具吸引力的，之所以放在最后，是因為很多時候無法在界面設計中直接被設計師所用，但在游戲和運營活動中還是可以參照的。如果場景中可以使用有吸引力的人物或危險情況的圖片，可以選取一部分這樣的素材，因為它們確實是用戶注意力的磁石。

小結

設計師吸引用戶注意力的四大秘笈分別是：

圖 21 吸引用戶注意的秘笈小結

• 運動（包括自身運動+附加運動元素）
• 人臉（尤其是帶有和用戶互動眼睛的人臉）
• 對比（包括色彩、形狀、大小、虛實、投影、情緒等）
• 本能（包括危險、食物、性）

日常設計中我們可以先從這四個大的維度考慮是否有運用的可行性，然后再考慮其維度下的具體吸引點。值得一提的是，這四個維度是可以組合運用的，這樣能夠將視覺注意力效果發揮到極致。

參考文獻

• 書籍：《注意力：專注的科學與訓練》
• 規范：《Material design》

歡迎關注作者微信公眾號：「VMIC UED」