UI局劲,讓用戶注意

我們?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è)性簽名

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市占哟,隨后出現(xiàn)的幾起案子心墅,更是在濱河造成了極大的恐慌,老刑警劉巖榨乎,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怎燥,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蜜暑,警方通過查閱死者的電腦和手機(jī)铐姚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肛捍,“玉大人隐绵,你說我怎么就攤上這事∽竞粒” “怎么了依许?”我有些...
    開封第一講書人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)缀蹄。 經(jīng)常有香客問我峭跳,道長(zhǎng),這世上最難降的妖魔是什么缺前? 我笑而不...
    開封第一講書人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任蛀醉,我火速辦了婚禮,結(jié)果婚禮上诡延,老公的妹妹穿的比我還像新娘滞欠。我一直安慰自己古胆,他們只是感情好肆良,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逸绎,像睡著了一般惹恃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棺牧,一...
    開封第一講書人閱讀 49,741評(píng)論 1 289
  • 那天巫糙,我揣著相機(jī)與錄音,去河邊找鬼颊乘。 笑死参淹,一個(gè)胖子當(dāng)著我的面吹牛醉锄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播浙值,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼恳不,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了开呐?” 一聲冷哼從身側(cè)響起烟勋,我...
    開封第一講書人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎筐付,沒想到半個(gè)月后卵惦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓦戚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年沮尿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伤极。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蛹找,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出哨坪,到底是詐尸還是另有隱情庸疾,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布当编,位于F島的核電站届慈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏忿偷。R本人自食惡果不足惜金顿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鲤桥。 院中可真熱鬧揍拆,春花似錦、人聲如沸茶凳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贮喧。三九已至筒狠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間箱沦,已是汗流浹背辩恼。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人灶伊。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓疆前,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親聘萨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子峡继,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容