長城上的貓

人的視線是有限的,總有忽略的地方。那么在設置信息層級分布時如何設計視覺主次以便達到目的呢?

很多設計師在進行信息設計的時候,通??恐杏X和曾經嘗試過的經驗進行信息美化。但是當我們遇到需要對信息設計進行解釋的時候,理由通常很蒼白。你無法說出為什么用戶能夠快速高效的瀏覽信息,只是覺得又大、又粗、又硬哦不是,又鮮艷的信息能夠被識別。所以今天我們就要來聊一聊,為什么。

首先給大家介紹一些經過研究之后的數據結論:

人類視野的空間分辨率從中央向邊緣減少。我們人類每只眼睛具有700萬左右的視錐細胞,它們在人眼中的分布是越靠近中央凹的區域越密集。而另外一個研究證明,邊界視覺的信息在被傳遞到大腦之前是經過壓縮的,而中央凹的視覺則不會。大概就是下2圖這個意思。

然后有同學會問,既然我們的邊界視覺那么差,當用戶在瀏覽界面信息的時候,為什么給用戶3秒鐘時間看界面他還是能夠記住頁面中的一些信息呢或者會說為什么我們在瀏覽的時候它不像下圖那樣只有一小圈是高清而邊上的文字是模糊的呢。

這其實是因為大腦通過一個比較粗獷的方式,基于我們的預期,給視野進行填充,大腦也會命令你的眼睛對邊上的信息進行細節采樣。所以這是一個很快速的過程。

為什么有的人能夠一目十行就是,他的大腦能幫他補充的更多,或者說他的中央凹面積大。

但是有一個實驗是,我們通過眼動測試,當用戶的中央凹停留在一篇文章中的一個地方時,這個文字顯示的是正確的,但是隨著中央凹的移動,他周圍的文字會進行隨機的變化,他雖然能夠成功的完成閱讀,但是速度大幅下降。

比如大家看一下下面這個頁面的區域

當我們掃完這個頁面也就2-3秒,但是如果你沒有把中央凹停留在一個信息上的時候,其實都是靠大腦對我們的預期進行的補充。而真實的情況是,你們并沒有發現頁面中錯誤的地方。

言歸正傳,為什么你的信息用戶總是看不見呢。我們又要講到邊界視覺。我們的設計如果不考慮邊界視覺,那么就會影響到能夠被識別的信息。

 

那么邊界視覺到底有什么用呢?

1.引導中央凹
我們剛才說了中央凹的重要性,那么我們在什么時候會把中央凹放到我們要看的信息上呢?其實就是依靠我們的邊界視覺。
邊界視覺引導中央凹,它幫助中央凹捕捉關鍵信息。我舉個例子,大家在查看一個食品包裝的生產日期的時候是怎么尋找的呢,大家的眼睛不斷的在搜索,而邊界視覺是提供了低分辨率的線索,幫助大腦,控制眼睛以線索的發現順序進行移動。

 

2.捕捉運動元素
邊界視覺可以非??焖俚牟蹲降竭\動的物體,所以在界面設計中,無法放置在核心位置的元素但又需要用戶去注意到的時候,通常就會使用動效。

 

那么我們要怎么做才能讓用戶關注到關鍵信息呢?

1.將信息盡量放在中央凹或者中央凹邊上能夠被預期的位置
在小紅書很早的一個版本中,當用戶進行點贊操作后,反饋消息在頂部顯示,讓用戶無法察覺和關注到。因為邊界視覺都無法捕捉。所以當用戶在進行操作時,如果需要將狀態、文字告知用戶,就需要顯示在用戶能預期以及能被邊界視覺捕捉到的位置。

 

?2.使用圖標、圖片的形式標記出關鍵信息
比如在一大段的文本中,用戶無法快速的查看內容標題,我們就可以在標題前使用圖標、圖片的形式進行標記,讓邊界視覺獲取到信息之后在大腦中產生預期模型。

 

3.使用動態效果吸引用戶注意
動態效果能夠快速被捕捉,甚至引導用戶的視線。比如馬蜂窩在底部進行點贊后通過動效引導用戶,告知用戶該點贊是為用戶而贊,同時讓用戶的視線又回到了頂部,可能增加用戶的停留時間。

 

4.使用高亮的顏色來吸引用戶的邊界視覺進行捕捉
由于邊界視覺的搜索是線性的,所以我們必須將重點的信息進行高亮顯示,比如警告的紅色,可點擊的藍色等。

 

在這里再補充一個我總結出來的規律,不一定對,但是我的猜測。

大家可以看到,下方的知乎話題界面,一進入界面我們的邊界視覺立馬給我們進行信息捕捉,所以首先被關注到的是呈現藍色的文字、圖片、圖標等。
這里大家發現一個問題沒有
為什么在這個界面中上方的兩個按鈕不用色塊的形式做呢?例如右邊這樣,很多同學在這里第一反應是這個按鈕太重了!很突兀!為什么很突兀?既然要引導用戶為什么不做的重一點呢?那有同學又會說這樣設計會干擾用戶對其他信息的瀏覽,那么為什么會干擾對其他信息的瀏覽呢?
我的猜測來了!
我猜測人眼的中央凹視錐細胞會根據界面中信息的重要程度進行調整,也就是說不同程度的強化會讓邊界視覺的捕捉能力下降。像右側的色塊按鈕讓中央凹的視覺細胞更加聚集,而導致邊界視覺的范圍也大幅縮小,所以你們看左邊界面覺得信息優先級很清晰,但是右側的就會覺得我只看到了兩個大按鈕,而其他的信息都沒有被捕捉到。
那繼續思考一下,什么時候能用大色塊的按鈕呢?很多電商平臺的購物都是大按鈕,這個難道不會讓用戶的邊界視覺受影響嗎?
大家發現一個規律沒有,有大按鈕的頁面基本上圖片、圖標都很多,而一般都是文字的頁面,通常都不會出現大按鈕,因為出現了就會被噴太突兀了??!
這就是因為大按鈕在沒有其他更高層級信息的配合下讓邊界視覺捕捉范圍降低了,如果都是高層級的信息,那么邊界視覺的捕捉范圍就會“一視同仁”。?
所以,為了讓一個界面的按鈕不突兀,一種方法是用和它相似級別的元素進行輔助展示,另一種方法就是降低該按鈕的視覺引導層級。

 

原文地址:應謀鬼計(公眾號)
作者:?應駿

 

轉載請注明:學UI網 » 【新系列】十萬個為什么設計-為什么你設計的信息用戶總是看不見

登錄收藏
 
你可能喜歡的:
關于微信消息困擾用戶的10點設計反思,體驗上怎么優化會更好呢?關于微信消息困擾用戶的10點設計反思,體驗上怎么優化會更好呢?
帶你重新認識十大設計心理學原則帶你重新認識十大設計心理學原則
設計驅動商業 | PUPU讀書改版設計驅動商業 | PUPU讀書改版
設計,只有基于用戶的使用場景才會產生價值設計,只有基于用戶的使用場景才會產生價值
播放控件的本地化和國際化播放控件的本地化和國際化
設計沉思錄|資訊產品設計之道設計沉思錄|資訊產品設計之道
語音用戶界面設計 - 對話式體驗設計原則語音用戶界面設計 – 對話式體驗設計原則
所有設計師都應該懂的動效設計所有設計師都應該懂的動效設計
如何正確地使用色塊排版?如何正確地使用色塊排版?
中臺設計組件-按鈕中臺設計組件-按鈕
?
天津十一选五app