我們?cè)诮缑嬖O(shè)計(jì)中冰肴,常常會(huì)有提醒框屈藐,有加粗榔组,彈出窗口...一切只是為了讓用戶“注意”
目錄:
名詞解釋
邊界視覺作用
怎樣讓用戶“注意”
讓用戶“注意”的重武器
1、名詞解釋
視網(wǎng)膜:眼球里聚焦成像的表面
視錐細(xì)胞:視網(wǎng)膜上面負(fù)責(zé)顏色的感光細(xì)胞
視桿細(xì)胞:視網(wǎng)膜上面負(fù)責(zé)光線的感光細(xì)胞
中央凹:視網(wǎng)膜中間的位置
邊界視野:視網(wǎng)膜除過中央凹外的區(qū)域联逻,也可以說從中央凹向外擴(kuò)散
2搓扯、邊界視覺的作用
要知道邊界視覺的作用,得先了解下視網(wǎng)膜的“分辨率”包归。
視網(wǎng)膜的分辨率由三個(gè)因素決定:
視錐細(xì)胞的密度锨推、視錐細(xì)胞與神經(jīng)節(jié)細(xì)胞的連接率、大腦視覺皮層的利用率
簡(jiǎn)單點(diǎn)就是如下圖:
這個(gè)是眼球的視網(wǎng)膜公壤,中央凹和邊界已標(biāo)注换可,圓圈和點(diǎn)都是視錐細(xì)胞∠梅可見锦担,90%的視錐細(xì)胞分布在中央凹,10%的視錐細(xì)胞分布在邊界視野
在中央凹區(qū)域的視錐細(xì)胞與神經(jīng)節(jié)細(xì)胞是一一對(duì)應(yīng)的慨削,也就是說一個(gè)視錐細(xì)胞就與一個(gè)神經(jīng)節(jié)細(xì)胞相連接
而邊界視野,多個(gè)視錐細(xì)胞與一個(gè)神經(jīng)節(jié)細(xì)胞對(duì)應(yīng)
左邊是視網(wǎng)膜套媚,右邊是大腦視覺皮層
中央凹占視網(wǎng)膜1%缚态,大腦視覺皮層卻用50%處理,剩下的50%處理中央凹之外的區(qū)域
由上可見:中央凹分辨率非常高堤瘤,邊界視覺分辨率非常非常差玫芦。
題外話:既然這樣,我們看東西應(yīng)該是一個(gè)隧道本辐?no桥帆,那是因?yàn)槲覀冄矍蛎棵?次的速度快速移動(dòng),大腦有印象畫片慎皱。
好了老虫,既然邊界視覺這么差,它有什么用呢茫多?
引導(dǎo)中央凹
察覺運(yùn)動(dòng)
在黑暗中觀察
上面就是邊界視覺的三個(gè)功能
引導(dǎo)中央凹
邊界視覺分辨率很低祈匙,視野邊界的模糊線索提供了信息,從而幫助大腦計(jì)劃往哪里什么順序移動(dòng)眼鏡天揖,目的是讓中央凹去觀察這些信息夺欲。眼動(dòng)就是讓中央凹關(guān)注“重要的東西”。
例如:你看到旁邊有個(gè)模糊美女身影今膊,你就會(huì)立刻眼球轉(zhuǎn)過去些阅,看清楚;你在搜索目標(biāo)商品時(shí)斑唬,總會(huì)從模糊的顏色樣式感覺到然后眼球轉(zhuǎn)動(dòng)過去市埋。
觀察運(yùn)動(dòng)
我們身邊只要有運(yùn)動(dòng)的物體哪怕很輕微黎泣,也能立刻觀察到,然后引導(dǎo)中央凹去注視它腰素。
黑暗里看的更清楚
此時(shí)就要談到視桿細(xì)胞了聘裁,它主要功能是暗視覺,但是奇怪的是中央凹沒有視桿細(xì)胞弓千,所以在黑暗中衡便,我們使用邊界視覺看的。也就是當(dāng)你在亮度極低的時(shí)候洋访,你越盯著它越看不清楚镣陕,卻能在“側(cè)面”看清楚。
3姻政、怎樣讓用戶注意
上面說了這么多呆抑,現(xiàn)在開始正題,我們?cè)谟脩艚缑嬷梗W(wǎng)站或者軟件上鹊碍,怎樣讓用戶注意到。無非就是利用中央凹和視覺邊界食绿。
當(dāng)我們要顯示一個(gè)錯(cuò)誤信息侈咕,你卻把信息放到了視覺邊界上,那么用戶怎么注意到器紧;雖然你用色彩耀销、加粗使信息展現(xiàn)出來,但是卻放到了用戶的盲點(diǎn)上...
讓我們看下例子:
上面是搜房網(wǎng)登錄頁面铲汪,是我用戶名或者密碼輸入錯(cuò)誤的提醒熊尉。
直接彈出一個(gè)框,頁面正中間掌腰,背景與頁面底層色調(diào)一樣狰住,還能拖動(dòng)。雖然提醒的“很重”齿梁,當(dāng)我第一次輸入錯(cuò)誤转晰,那一瞬間我看到了,但是當(dāng)我在那一時(shí)刻干別的事情了士飒,再想起來登錄查邢,我會(huì)突然注意不到這個(gè)框,因?yàn)樗c頁面“融為一體”的感覺酵幕。
當(dāng)我點(diǎn)擊了無數(shù)的登錄扰藕,沒有效果,我才知道原來我輸入錯(cuò)誤了芳撒。
如果用戶無意拖動(dòng)到了左下角邓深,那么提示信息下次更不容易被觀察到未桥。因?yàn)樗鼪]有落入我的“中央凹”或者它給的信息我無法撲捉,它出現(xiàn)在視覺邊界上芥备。
如果要讓用戶注意冬耿,就要把信息放到離上一次事件的最近距離處。
讓信息可見的方法
放在用戶所看的位置
使用符號(hào)圖形
保留紅色以呈現(xiàn)錯(cuò)誤信息
放在用戶所看到的位置:當(dāng)用戶界面與用戶交互時(shí)萌壳,用戶想看到的信息都在他所期望的地方亦镶。那什么是他所期望的地方,如果是運(yùn)動(dòng)的物體袱瓮,那就是沿著運(yùn)動(dòng)軌跡下次出現(xiàn)的地方缤骨;如果是點(diǎn)擊一個(gè)按鈕,那么就是按鈕的位置附近尺借,因?yàn)橛脩粽诳此砥穑褪钱?dāng)前位置。
使用符號(hào)圖形:
燎斩,類似于這些虱歪,明確的標(biāo)記出錯(cuò)誤的位置或信息。
保留紅色以呈現(xiàn)錯(cuò)誤信息:一般我們都會(huì)認(rèn)為紅色就是警告栅表,但在特殊情況下笋鄙,比如整個(gè)用戶界面以紅色為主色調(diào),那么就要換用其他顏色提醒谨读。
讓我們看下好的例子:
百度和京東的登錄界面,當(dāng)我輸入錯(cuò)誤后坛吁,都會(huì)在輸入錯(cuò)誤的位置有紅色框劳殖,并且錯(cuò)誤信息就在登錄的上方,很容易觀察拨脉。
相比較下哆姻,京東的更佳,紅色的框都是錯(cuò)誤的位置和提示信息玫膀,并且錯(cuò)誤提示信息前面還有圖形標(biāo)記矛缨。
4、讓用戶注意的重武器
彈出式對(duì)話框中的信息
使用聲音
閃爍或者抖動(dòng)
彈出式對(duì)話框中的信息:如果僅僅是讓用戶確認(rèn)帖旨,沒必要這樣做箕昭,這樣彈出窗口只會(huì)讓人煩。彈出對(duì)話框令人厭煩的程度隨著模式級(jí)別的增高而增高解阅,依次是非模式落竹、應(yīng)用程序?qū)印⑾到y(tǒng)級(jí)別货抄,第一個(gè)用戶可以忽略述召,第二個(gè)停止該程序操作朱转,第三個(gè)阻止用戶任何操作,直到對(duì)話框被關(guān)閉积暖。
隱患:如果彈出的對(duì)話框離之前事件很遠(yuǎn)藤为,或者顏色色調(diào)融入了背景,那么再用戶回過來再次查看時(shí)夺刑,可能會(huì)觀察不到缅疟,只能重新嘗試登陸;如果瀏覽器可以設(shè)置阻止所有彈出窗口性誉,那么你的提示信息可能會(huì)被屏蔽窿吩;或者你的彈窗令用戶很討厭,討厭的都卸載了你的應(yīng)用错览。
使用聲音:當(dāng)我們聽到聲音(滴滴聲纫雁,蜂鳴聲...),用戶的眼睛條件反射性地開始掃描屏幕尋找造成蜂鳴的任何可能倾哺。這就是聲音的價(jià)值轧邪。
隱患:當(dāng)在公共場(chǎng)合,很吵雜羞海,有可能忽略聽不到忌愚,或者影響別人;用戶如果習(xí)慣音量很小或者靜音却邓,那么這些提示信息完全不會(huì)被注意到硕糊!
所以只能在特定環(huán)境條件下使用聲音。
閃爍或者抖動(dòng):前面說過腊徙,我們的視覺系統(tǒng)容易撲捉運(yùn)動(dòng)的物體简十,如果增加運(yùn)動(dòng)信息,那么就會(huì)讓用戶注意到撬腾。
隱患:由于目前好多廣告都是運(yùn)動(dòng)螟蝙、晃動(dòng),導(dǎo)致部分用戶對(duì)于運(yùn)動(dòng)晃動(dòng)的提示信息有了厭煩民傻,厭惡胰默。或者都已經(jīng)習(xí)慣自動(dòng)忽略漓踢。
因此牵署,運(yùn)動(dòng)的提醒必須簡(jiǎn)短,否則它就變成了打擾喧半,一般在四分之一到二分之一秒碟刺。
說了這么多,就是為了讓用戶“注意”薯酝!并且不讓用戶“煩”半沽。也就是給用戶好的體驗(yàn)爽柒。
只是看書總結(jié),也許說的都是錯(cuò)的者填!
好了浩村,最后給出個(gè)性簽名