中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：視覺(jué)設(shè)計(jì)，不僅僅指的是交互和審美，還包括信息的傳達(dá)與感知。大多數(shù)互聯(lián)網(wǎng)產(chǎn)品都是通過(guò)視覺(jué)被用戶所感知，擅于利用視覺(jué)設(shè)計(jì)，你的產(chǎn)品才可以充分吸引用戶的注意力。

一、理解視覺(jué)原理的重要性

在做AB測(cè)試的過(guò)程中，我們不難發(fā)現(xiàn)，有時(shí)改變一個(gè)按鈕的顏色或者是文字排布的順序，都可以使得數(shù)據(jù)有不少的提升。假設(shè)某個(gè)功能和其交互流程是固定不變的，但信息的呈現(xiàn)方式的如果不同，用戶對(duì)信息的理解會(huì)產(chǎn)生巨大的差異。

這種差異是人類的“視覺(jué)系統(tǒng)成像過(guò)程”導(dǎo)致的。完全一樣的信息和內(nèi)容，經(jīng)過(guò)不同的排版、顏色搭配、形狀對(duì)比、間距差異等，會(huì)讓用戶在視覺(jué)處理的過(guò)程中的效率、注意力乃至對(duì)信息的理解都完全不同。

理解人類視覺(jué)系統(tǒng)成像的過(guò)程會(huì)極大提升設(shè)計(jì)水平以及用戶的體驗(yàn)。同時(shí)也可以通過(guò)正確引導(dǎo)用戶的注意力，達(dá)到提升轉(zhuǎn)化率的效果。

本文將主要從“視覺(jué)查詢”、“特征識(shí)別”、“圖像處理”這三個(gè)維度，簡(jiǎn)單介紹人們大腦在處理這些內(nèi)容時(shí)的一些規(guī)律，以及在產(chǎn)品設(shè)計(jì)中可以如何利用這些規(guī)律來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)。

這些規(guī)律中，除了圖像處理會(huì)跟用戶的認(rèn)知背景有些關(guān)聯(lián)外，其余基本是生物層面上的，放之四海皆準(zhǔn)的規(guī)律。

二、視覺(jué)查詢

視覺(jué)查詢是人們用眼睛快速掃視期間獲得信息的過(guò)程。這個(gè)過(guò)程決定用戶獲取信息的“效率”。

人眼實(shí)際能清晰成像的面積很小。你目前正專注在看著屏幕，試著用余光注意一下你眼睛周圍的環(huán)境，應(yīng)該可以明顯感覺(jué)到周圍的視野變模糊了。這種成像特點(diǎn)使得眼睛只能清晰地看到有限范圍的視覺(jué)信息。

因此用戶在面對(duì)一整個(gè)頁(yè)面時(shí)，往往需要通過(guò)快速“掃視”才能夠完成頁(yè)面的視覺(jué)查詢。在產(chǎn)品設(shè)計(jì)中，為了提升用戶獲取信息的效率或引導(dǎo)用戶閱讀的順序，可以采用以下方法：

1. 關(guān)聯(lián)性高的內(nèi)容放在一起

將關(guān)聯(lián)性高的信息放在一起，減少視覺(jué)上的掃視。例如我們經(jīng)常將操作按鈕放在一起或者把存在邏輯關(guān)系的信息放在一起，也可以提升視覺(jué)查詢效率。

2. 利用模糊成像方式，引導(dǎo)焦點(diǎn)

這種做法通常使用在游戲里，當(dāng)游戲中需要引導(dǎo)用戶去觸發(fā)某個(gè)特定的道具時(shí)，除了將會(huì)將背景進(jìn)行虛化，自然而然將用戶注意力吸引到道具上。又或是在App新用戶引導(dǎo)過(guò)程中，通常會(huì)加一個(gè)黑色遮罩，高亮展示來(lái)引導(dǎo)用戶的注意力集中在某個(gè)功能。

3. 重要程度遵循用戶閱讀習(xí)慣

由于大部分人的閱讀習(xí)慣是從左往右、從上至下的（部分阿拉伯語(yǔ)系是從右往左）。因此通常來(lái)說(shuō)，左上角的東西最重要，右下角的內(nèi)容最次要。重要的東西通常要放在左上角。

4. 信息錨點(diǎn)引導(dǎo)認(rèn)知方向

當(dāng)用戶瀏覽一個(gè)頁(yè)面時(shí)，往往先看到的信息會(huì)影響后續(xù)視覺(jué)查詢的重點(diǎn)。

例如：在一個(gè)商品列表頁(yè)中，如果優(yōu)先讓用戶看到商品的功能和作用而不是折扣力度，那么用戶本能的注意力就會(huì)轉(zhuǎn)移到“我是不是需要這個(gè)功能”，而不是“這個(gè)東西便不便宜”上面去。我們可以根據(jù)用戶實(shí)際的需求場(chǎng)景來(lái)設(shè)計(jì)和引導(dǎo)用戶。

三、特征識(shí)別

特征識(shí)別是對(duì)視網(wǎng)膜成像內(nèi)容進(jìn)行初步識(shí)別的過(guò)程。這個(gè)過(guò)程決定了用戶“注意力”的分配方式。例如當(dāng)用戶想要找西紅柿的時(shí)候，在快速掃視的過(guò)程中，會(huì)本能對(duì)紅色、圓形的東西更加敏感。紅色和圓形就是特征。

此外，用戶本能地會(huì)被具有差異化的特征吸引。例如在一群方塊中的三角形，或者黑夜里的亮光。產(chǎn)品設(shè)計(jì)中可以利用這個(gè)視覺(jué)原理來(lái)引導(dǎo)用戶注意力的分配方式。

1. 運(yùn)用顏色對(duì)比提升識(shí)別度

顏色對(duì)比越強(qiáng)烈，越能吸引注意力。原因是視覺(jué)成像過(guò)程是由視網(wǎng)膜中三種錐狀細(xì)胞決定的，這三種錐狀細(xì)胞分別對(duì)不同波長(zhǎng)的顏色會(huì)更敏感，當(dāng)用戶同時(shí)看到不同的敏感顏色域時(shí)，眼睛就會(huì)感受到強(qiáng)烈的對(duì)比。

此外補(bǔ)充一點(diǎn)：色盲人群通常就是缺少其中一種錐狀細(xì)胞。而全球色盲人群的占比接近8%（男性居多），因此如果你的用戶量級(jí)是百萬(wàn)以上的，最好盡量避免用色盲無(wú)法區(qū)分的顏色來(lái)做對(duì)比。

產(chǎn)品中按鈕不同的對(duì)比度來(lái)表不同的重要程度。例如下面一個(gè)彈窗的按鈕，通過(guò)改變顏色來(lái)引導(dǎo)用戶的注意力。那么反過(guò)來(lái)，如果設(shè)計(jì)者不希望在彈窗中引導(dǎo)用戶注意力，則應(yīng)該將兩個(gè)按鈕顏色樣式做得一樣。

此外，這種色彩的對(duì)比在游戲中也常見(jiàn)，例如王者榮耀的小地圖通過(guò)對(duì)不同英雄頭像的描邊顏色不同，可以讓用戶快速識(shí)別“敵人”、“隊(duì)友”和“自己”。

亮度的對(duì)比越強(qiáng)烈，也越能吸引注意力。例如在很多游戲的對(duì)話過(guò)程中，會(huì)采用高亮來(lái)表示當(dāng)前正在說(shuō)話的人物。此外，黑色和白色是顏色跳到最亮和最暗的情況。

因此在白色背景的頁(yè)面中，黑色字體是最突出也最能吸引注意力的，通常一些次要的內(nèi)容，則會(huì)降低亮度和大小，變?yōu)榛疑∽帧?/p>

2. 運(yùn)用外觀對(duì)比提升識(shí)別度

1）第一種是形狀對(duì)比

由于手機(jī)屏幕是方形，為了提升屏幕的利用率，大多數(shù)的卡片、圖標(biāo)等內(nèi)容都會(huì)以矩形為結(jié)構(gòu)。

但是我們也不難看到很多產(chǎn)品中夾雜有圓形的元素，通過(guò)矩形和圓形的對(duì)比，讓用戶更清晰的區(qū)分信息。例如京東的發(fā)現(xiàn)頁(yè)面，將店鋪采用圓形，商品采用方形，更能讓用戶區(qū)分這兩種信息。

2）第二種是尺寸對(duì)比

簡(jiǎn)單的說(shuō)，尺寸越大的內(nèi)容，越容易被注意到。例如美團(tuán)“免費(fèi)領(lǐng)水果”游戲中，圖標(biāo)的大小也提現(xiàn)了重要程度，高頻使用的圖標(biāo)通常會(huì)做出更大的尺寸，以便用戶操作。

3）第三種是動(dòng)靜對(duì)比

當(dāng)頁(yè)面大部分元素是靜態(tài)的時(shí)候，用戶更容易被動(dòng)態(tài)的東西吸引。例如將一些圖標(biāo)添加動(dòng)效又或是突然出現(xiàn)一個(gè)新的元素，都可以極大的吸引用戶注意力。

例如：在京東App首頁(yè)的金剛位10個(gè)圖標(biāo)中，由于”免費(fèi)水果“和“券后9.9”是動(dòng)態(tài)的圖標(biāo)，對(duì)用戶注意力的吸引遠(yuǎn)大于其他圖標(biāo)。

4）第四種是運(yùn)用信息間距

一般來(lái)說(shuō)，信息間距越小，代表信息間存在的關(guān)聯(lián)性越強(qiáng)。下圖中將不同元素通過(guò)縮小間距放在一起，不論那種方式，都會(huì)讓人感覺(jué)他們是一組的內(nèi)容，有很強(qiáng)的關(guān)聯(lián)性。產(chǎn)品設(shè)計(jì)中也需要通過(guò)間距將信息分組，讓用戶更容易識(shí)別和區(qū)分。

以下圖為例，設(shè)計(jì)時(shí)為了讓用戶更直觀的理解“金幣用于商店購(gòu)物”這層邏輯，可以通過(guò)縮短金幣與商店的間距，來(lái)提升用戶的理解效率。

四、圖像處理

人們?cè)趯?duì)視覺(jué)做圖像處理過(guò)程中，會(huì)基于圖形的關(guān)鍵特征來(lái)整合成復(fù)雜的圖像，這個(gè)階段決定了用戶對(duì)信息的理解。在這個(gè)過(guò)程中，視覺(jué)系統(tǒng)將會(huì)把顏色、形狀、尺寸等特征所辨識(shí)出的信息關(guān)聯(lián)起來(lái)，形成更復(fù)雜的圖像來(lái)供大腦解讀。

1. 圖像處理中的認(rèn)知差距

在這個(gè)階段，用戶認(rèn)知水平的差異會(huì)對(duì)圖像的形成有造成很大的影響。例如我作為一個(gè)京東老用戶，只需要看到PLUS幾個(gè)字母，或者哪怕是只要看到黑色的小標(biāo)簽，我就能識(shí)別出到這個(gè)是PLUS會(huì)員有折扣的商品。

但對(duì)于新用戶而言，單單看到PLUS這幾個(gè)字母，他們完全無(wú)法建立起跟會(huì)員的關(guān)聯(lián)。因此在產(chǎn)品設(shè)計(jì)中要考慮到新老用戶不同的認(rèn)知差距，兼顧新用戶的認(rèn)知，該具體的地方具體表述。同時(shí)也要提升老用戶的效率，在能抽象的地方盡量抽象。

此外，要讓用戶正確處理圖像的關(guān)鍵除了要讓信息符合認(rèn)知水平以外，還要盡量讓其只與正確信息建立充分聯(lián)系。

例如：在京東App中，黑色小標(biāo)識(shí)代表了Plus會(huì)員，那么其他的標(biāo)識(shí)就盡量不能做成黑色，而要采用其他顏色，不然用戶也不能很快建立認(rèn)知，或者會(huì)造成錯(cuò)誤的聯(lián)想。

2. 合理運(yùn)用圖形語(yǔ)義

圖形語(yǔ)義是指：用戶基于不同圖形之間的組合方式，可以快速地理解他們的邏輯關(guān)系。

這種認(rèn)知是人類在日常生活中的經(jīng)驗(yàn)積累而自然產(chǎn)生的，在產(chǎn)品設(shè)計(jì)中將圖形語(yǔ)義和元素之間的邏輯恰當(dāng)?shù)慕M合，可以讓頁(yè)面間元素的關(guān)系更易被用戶理解。常見(jiàn)的圖形語(yǔ)義包括：連接、分組、包含和疊加。

如下圖所示：

通常來(lái)說(shuō)，我們可以改變?cè)氐某叽?、外形、顏色等不同的視覺(jué)特征引導(dǎo)注意力或者體現(xiàn)產(chǎn)品個(gè)性。但不能改變圖形語(yǔ)義，否則會(huì)給用戶造成誤解。

五、總結(jié)

本文從視覺(jué)查詢、特征識(shí)別、圖像處理三個(gè)維度簡(jiǎn)單介紹了用戶視覺(jué)成像原理過(guò)程中要素以及產(chǎn)品設(shè)計(jì)中值得注意的點(diǎn)。理解人的視覺(jué)原理，一方面可以避免在產(chǎn)品設(shè)計(jì)中出現(xiàn)一些“低級(jí)錯(cuò)誤”；另一方面也可以更巧妙的引導(dǎo)用戶的注意力，達(dá)到產(chǎn)品目標(biāo)。

此外，以上三個(gè)環(huán)節(jié)中都會(huì)存在一個(gè)篩選過(guò)程，用戶在掃視時(shí)，通常是大腦接受到了某一個(gè)查詢指令，這個(gè)指令會(huì)影響用戶以上過(guò)程中關(guān)注的重點(diǎn)。

例如逛街時(shí)想要買一件藍(lán)色衣服，那么在掃視的時(shí)候會(huì)將非藍(lán)色的物體主動(dòng)排除在外，當(dāng)識(shí)別到藍(lán)色后，再通過(guò)特征識(shí)別看看這個(gè)藍(lán)色的東西是否是衣服，最后才是注意到這個(gè)衣服的材質(zhì)、款式等元素。

因此，產(chǎn)品設(shè)計(jì)中除了考慮上述成像原理外，還要將用戶當(dāng)前的行為狀態(tài)考慮在內(nèi)。

例如當(dāng)用戶逛商城App，進(jìn)入特價(jià)專區(qū)時(shí)，本能的會(huì)更想關(guān)注價(jià)格和折扣，視覺(jué)設(shè)計(jì)如果沒(méi)有足夠突出價(jià)格和折扣，那么則會(huì)影響用戶的識(shí)別效率。視覺(jué)設(shè)計(jì)的核心目標(biāo)還是提升用戶的識(shí)別效率和準(zhǔn)確度、恰當(dāng)引導(dǎo)用戶注意力，讓用戶更流暢的體驗(yàn)到產(chǎn)品價(jià)值。

參考資料：路行己. 體驗(yàn)傳遞[M].?北京：機(jī)械工業(yè)出版社. 2020.

#專欄作家#

愛(ài)學(xué)習(xí)的Keyda，人人都是產(chǎn)品經(jīng)理專欄作家。主要專注在線教育和電商類產(chǎn)品增長(zhǎng)，擅長(zhǎng)游戲化設(shè)計(jì)，定期分享產(chǎn)品設(shè)計(jì)和思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。