電商設(shè)計(jì)特別講究視覺引導(dǎo)問(wèn)題，一個(gè)好的設(shè)計(jì)給人感覺不凌亂，很舒暢，所要展現(xiàn)的內(nèi)容在不知不覺中就灌輸給買家了，做到了視覺層級(jí)上的操控買家

在所有的設(shè)計(jì)需求中，可以利用一些具有指向性的設(shè)計(jì)元素，如：色彩人物和動(dòng)作留白處理等，讓用戶的眼神跟著頁(yè)面元素的引導(dǎo)，完成對(duì)信息的關(guān)注與吸收

01.先要有個(gè)視覺點(diǎn)，靠這些點(diǎn)指引或者聚集視線

點(diǎn)的形狀并非都是圓，或者是某種具象的元素

比如：在整張頁(yè)面中出現(xiàn)的大小對(duì)比關(guān)系，那么小的元素可以稱之為點(diǎn)大的元素也可稱之為點(diǎn)

它是一種相對(duì)而言的說(shuō)法其實(shí)，在頁(yè)面中出現(xiàn)一點(diǎn)時(shí)，就可以很快吸引住用戶的眼球當(dāng)再出現(xiàn)一點(diǎn)時(shí)，此刻用戶觀察畫面時(shí)的注意力就分散了
??? 當(dāng)遇到大小不同的點(diǎn)同時(shí)出現(xiàn)時(shí)，用戶首先會(huì)關(guān)注較大的那個(gè)點(diǎn)，再接著是較小的點(diǎn)

視線會(huì)首先集中在中間的水果上面，面積的對(duì)比點(diǎn)在這里是相對(duì)的關(guān)系，你可以把整體出現(xiàn)的元素都可以看做點(diǎn)但是首先會(huì)有一個(gè)焦點(diǎn)去吸引用戶的視線；點(diǎn)的焦中設(shè)計(jì)，居中的位置使用戶直接關(guān)注到正中的內(nèi)容；

在實(shí)際應(yīng)用中又可分為

焦點(diǎn)：第一時(shí)間吸引人眼球的那個(gè)元素畫面中的點(diǎn)有著明顯的大小顏色形狀的對(duì)比

亮點(diǎn)：是指畫面中點(diǎn)的形狀或者細(xì)節(jié)區(qū)別于其他元素，成為畫面中的主視覺

當(dāng)你在設(shè)計(jì)時(shí)

1、畫面元素的對(duì)比不明顯，整體視覺很平均時(shí)：

你可以根據(jù)設(shè)計(jì)需要和活動(dòng)目的，對(duì)設(shè)計(jì)元素調(diào)整大小或者顏色等形式，使要突出的點(diǎn)對(duì)比更為突出

2、當(dāng)版式中的文字太多時(shí)，用戶不知道先看什么？這時(shí)你可以嘗試把主要文案的字形顏色等進(jìn)行處理，使用戶視線有個(gè)聚焦亦或者你可以嘗試對(duì)文字的層次進(jìn)行調(diào)整，使該突出的突出，該弱化的弱化

02.人物動(dòng)作設(shè)計(jì)多，手眼身腳都要使！

動(dòng)作，舉止的指向性：這種指向可以通過(guò)模特?cái)[出的各種姿勢(shì)去體現(xiàn)，也可以通過(guò)調(diào)整模特元素的方向位置和排版共同完成對(duì)指定內(nèi)容的指向在做一些以模特類為主要元素的設(shè)計(jì)時(shí)，可以好好利用下模特的一舉一動(dòng)

? ??

實(shí)際應(yīng)用中

如在表現(xiàn)一些運(yùn)動(dòng)活動(dòng)專題時(shí)：動(dòng)感活力是這類需求的主要切入點(diǎn)，在人物動(dòng)作的挑選上，就盡量找一些動(dòng)作幅度較大夸張的模特，來(lái)完成對(duì)于動(dòng)起來(lái)的基本訴求。

當(dāng)你在設(shè)計(jì)時(shí)

1、選擇大片模特時(shí)，首先要考慮到使用模特做為主視覺元素時(shí)，模特的動(dòng)作是否要去結(jié)合文案需要構(gòu)圖需要等需求然后再去挑選或者去拍攝適合活動(dòng)目的并帶有指向的動(dòng)作素材；

2、在使用模特素材時(shí)，充分利用好模特的動(dòng)作表情和眼神的視覺指向，按著瀏覽軌跡安排合適的販內(nèi)容到正確的位置上

眼神：眼神的作用，暗示出模特所指的具體內(nèi)容中，它有著明確的方向指向，當(dāng)你看我當(dāng)我看你，當(dāng)你看它時(shí)，隨著人們注意視線的移動(dòng)，人們關(guān)注的焦點(diǎn)也會(huì)做出相應(yīng)的調(diào)整

在實(shí)際應(yīng)用中

當(dāng)你用不同的眼神觀察事物時(shí)，其實(shí)你的眼神中，就帶有了指向目的的作用。人們會(huì)隨著你的眼神所指，朝你眼神所示的方向關(guān)注過(guò)去它會(huì)暗示用戶的眼睛，跟隨模特或者元素的指引方向，關(guān)注到指定的信息這是一種利用模特眼神，引起用戶關(guān)注的一個(gè)方法。

人物向右的眼神引導(dǎo)用戶先將視線聚焦在人物上身，然后再跟隨人物眼神向右移動(dòng)，關(guān)注人物右邊的信息。

當(dāng)你在設(shè)計(jì)時(shí)

1?跟著模特臉的方向眼神所指的方向，安排重要次要信息到相應(yīng)的位置上這會(huì)暗示用戶的眼球朝所示的方向看過(guò)去

2?不要忽略模特的表情哦，它其實(shí)也很重要哦試想一下，一個(gè)要表達(dá)天真無(wú)邪，充滿童趣的畫面時(shí)，你選的模特表情僵硬目光呆滯，像欠了500工資一樣，是不是顯得傻了一些呢？

03.上下左右和中間，前面后面和側(cè)面！

方向，用于提示某種位置，箭頭直線斜線都具有明確的指向性，它們是引導(dǎo)用戶視線的好元素它不僅有著明確的指向性，而且還可以對(duì)畫面進(jìn)行分隔，對(duì)信息進(jìn)行層次的間隔

在一些場(chǎng)景中，指示方向最多的元素當(dāng)屬各式方向的箭頭了它是提示用戶并暗示行動(dòng)的一種設(shè)計(jì)元素 ?

在實(shí)際應(yīng)用中

如果要給用戶點(diǎn)明要關(guān)注的內(nèi)容，最好的方法就是利用線箭頭元素的指向，可以很方便的對(duì)用戶眼睛，進(jìn)行方向上的引導(dǎo)

當(dāng)你在設(shè)計(jì)時(shí)

1?在做時(shí)尚類服裝類的設(shè)計(jì)需求中，靈活運(yùn)用小短線元素可以幫你加強(qiáng)文字層次，修飾畫面細(xì)節(jié)，和提示標(biāo)重的地方中不同的線，有著不同的視覺感覺例如：粗線給人男人有力的印象；曲線給人柔美飄逸的感受；

2?在使用線短線箭頭元素時(shí)，一定要加在要進(jìn)行明確指向的目的上不要為了加，而加

04.萬(wàn)柳叢中一點(diǎn)紅，誘導(dǎo)聚焦和突出

萬(wàn)柳叢中一點(diǎn)紅，從這句話中折射出了色彩所具有的指向性。它的優(yōu)點(diǎn)是直接讓主體從萬(wàn)千元素干擾中，非常突出并且馬上抓住用戶視覺

在實(shí)際應(yīng)用可分為二種情況

誘導(dǎo)

在面對(duì)大幅面文字元素圖像信息時(shí)，人的眼睛是需要引導(dǎo)的，而色彩是最為直白的形式之一。通過(guò)對(duì)色彩的合理運(yùn)用著重突出最主要的信息，把色彩的反差最大化如果在色彩的引導(dǎo)上，加配以元素的指向動(dòng)作的指向，那么色彩指向?qū)?huì)更加的具有沖擊力

圖：明快對(duì)比強(qiáng)烈的色塊分別置于畫面的左右側(cè)，讓用戶的視線跟著這些色塊進(jìn)行移動(dòng)，既活了畫面，又豐富了整體效果
通過(guò)上面的例子說(shuō)明，色彩誘導(dǎo)的作用類似于，色彩方案中的點(diǎn)睛色把你要做突出的內(nèi)容，用對(duì)比色互被色進(jìn)行表現(xiàn)

聚集

當(dāng)畫面出現(xiàn)多種顏色時(shí)，用戶的眼神首先會(huì)聚焦在那些對(duì)比性強(qiáng)面積大的突出的顏色上，然后再找另外一種顏色，然后全部瀏覽完成

通過(guò)上面的例子說(shuō)明，色彩聚集的核心作用就是把你要突出的內(nèi)容突出化對(duì)比化聚焦化，讓用戶的視線停留于此，閱讀你想要傳達(dá)給他們的信息

當(dāng)你在設(shè)計(jì)時(shí)

1?用反差比較強(qiáng)烈的互補(bǔ)色去突出主要內(nèi)容時(shí)，這種聚焦的處理方法更有效；

2?如果畫面中的顏色較多時(shí)，可以利用色彩的面積大小，去給頁(yè)面出現(xiàn)的所有信息進(jìn)行重要層次的分級(jí)

05.留白設(shè)計(jì)空白多，主角旁邊面積大

留白，常見的逼格神器，突出主角的必備招數(shù)

如果說(shuō)上述的幾種方法是在做加法的設(shè)計(jì)，那么留白其實(shí)是在做減法的設(shè)計(jì)當(dāng)主角元素四周的留白很多時(shí)，人眼的視線首先會(huì)從整頁(yè)復(fù)雜的環(huán)境中，優(yōu)先發(fā)現(xiàn)那個(gè)沒(méi)有任何障礙物的設(shè)計(jì)元素

在實(shí)際應(yīng)用中

留白就是留出主角空白層次逼格的一種簡(jiǎn)潔的設(shè)計(jì)方法

留白的白指的不是顏色的白，而是空白的白，留白指的是某一區(qū)域無(wú)多余元素四周處于大面積空白的狀態(tài)

左圖1：頁(yè)面是以手表產(chǎn)品為主題，含有少量信息內(nèi)容組成的。產(chǎn)品四周大面積的留“白”使的形態(tài)更加聚焦，同時(shí)留白的處理更能體現(xiàn)產(chǎn)品的品質(zhì)和氣質(zhì)。

右圖2：除少數(shù)裝飾元素外，整體頁(yè)面大面積留白，使畫面簡(jiǎn)潔富有趣味性，便于閱讀。

當(dāng)你在設(shè)計(jì)時(shí)

1、有效的留白可以提升畫面的逼格，而且可以使要突出的主角更突出；

2、敢留白：大量留白會(huì)使頁(yè)面有空間感，不會(huì)因?yàn)轫?yè)面內(nèi)容密密麻麻而產(chǎn)生厭惡

3、使用最精簡(jiǎn)的元素：不添加無(wú)謂的設(shè)計(jì)元素，給用戶帶去視覺干擾，只保留核心和必要的關(guān)鍵關(guān)素，并且對(duì)關(guān)鍵元素進(jìn)行細(xì)節(jié)的刻畫

?

06.一二三四五六七，7654321

?

數(shù)字指向，順序的指向性

一般人都會(huì)有這樣的體驗(yàn)，當(dāng)看到數(shù)字1時(shí)，就要去尋找數(shù)字2有些需求里，在需要用視覺牽引用戶眼睛時(shí)，把數(shù)字當(dāng)標(biāo)頭，使用戶視線在頁(yè)面中合理跳躍

在實(shí)際應(yīng)用中

數(shù)字元素的運(yùn)用往往出現(xiàn)在以目錄頁(yè)發(fā)展歷程或者產(chǎn)品排列展示中

?左圖1：左上角文案內(nèi)容區(qū)域排版密集；以數(shù)字為代表的標(biāo)頭指示用戶逐個(gè)閱讀，增加條理性，便于讀者閱讀。

右圖1：數(shù)字標(biāo)頭的作用指示用戶繼續(xù)向下閱讀，每個(gè)色塊又形成對(duì)比。

當(dāng)你在設(shè)計(jì)時(shí)

1、做時(shí)尚搭配的需求時(shí)，可以用數(shù)字去引導(dǎo)產(chǎn)品的順序；

2、以用運(yùn)數(shù)字為元素時(shí)，對(duì)數(shù)字的大小和字形要進(jìn)行整體的把控切不可讓數(shù)字影響主體內(nèi)容，當(dāng)然如果是以數(shù)字為主的，就要盡量突出數(shù)字的視覺性

07.動(dòng)的太大顯得鬧，靜的太死顯得悶

動(dòng)靜，就是畫面的靜與動(dòng)

動(dòng)的元素在整體靜態(tài)的頁(yè)面中更能吸引用戶的眼球當(dāng)然這其中包括頁(yè)面中有g(shù)if圖視覺元素的動(dòng)感表現(xiàn)等

在實(shí)際應(yīng)用中

動(dòng)的表現(xiàn)可以用人物的動(dòng)作產(chǎn)品的動(dòng)作gif圖來(lái)完成對(duì)動(dòng)的執(zhí)行但是畫面中同一屏的頁(yè)面中，同時(shí)動(dòng)的元素最好不要超過(guò)3處或更多，因?yàn)槊縿?dòng)一處都會(huì)引起人們視覺的噪動(dòng)，如果動(dòng)的太多，勢(shì)必會(huì)分散用戶的注意力使主要內(nèi)容的傳達(dá)，弱化

當(dāng)你在設(shè)計(jì)時(shí)

1?瞬間讓元素有動(dòng)感的處理方法：給元素增加動(dòng)感模糊；給畫面增加飛著的元素如：五彩紙屑紅包傾斜著的線等

2?動(dòng)的頁(yè)面還可以通過(guò)用現(xiàn)在較流行的h5視差滾動(dòng)等技術(shù)讓頁(yè)面中的不同元素根據(jù)用戶的鼠標(biāo)滾動(dòng)相應(yīng)的出現(xiàn)；

08.文案設(shè)計(jì)想法多，緊扣主題有內(nèi)涵

文案，用文筆引導(dǎo)用戶產(chǎn)生畫面感

在實(shí)際應(yīng)用中

相比較而言，文字雖沒(méi)有色彩那么實(shí)在，也沒(méi)人物動(dòng)作那么顯而易見，但是它卻是最能走進(jìn)人們內(nèi)心的形式

左圖1：我們負(fù)責(zé)提供好產(chǎn)品，你負(fù)責(zé)貌美如花，設(shè)計(jì)師完全找到了文案與形象之間的切入點(diǎn)，結(jié)合卡通的表現(xiàn)形式，表現(xiàn)有趣激發(fā)顧客購(gòu)買欲望。

右圖1：設(shè)計(jì)改變生活，設(shè)計(jì)師通過(guò)文案的發(fā)散，繪制了一個(gè)美好的愿景，使得讀者想去了解、購(gòu)買。

?

當(dāng)你在設(shè)計(jì)時(shí)

1?好文案往往會(huì)聯(lián)想到一些元素的色彩的風(fēng)格的關(guān)鍵字，這樣的好文案往往和圖像的貼合度更高
2?文案的視覺設(shè)計(jì)，往往通過(guò)對(duì)文案意思具象的抽象型的表達(dá)引起用戶的共鳴

以上的8點(diǎn)就是我對(duì)視覺元素引導(dǎo)的八個(gè)方法：

總結(jié)

1.先要有個(gè)視覺點(diǎn)，引導(dǎo)眼神靠這些

2.人物動(dòng)作設(shè)計(jì)多，手眼身腳都要使

3.上下左右和中間，前面后面和側(cè)面

4.萬(wàn)柳叢中一點(diǎn)紅，誘導(dǎo)聚焦和突出

5.留白設(shè)計(jì)空白多，主角旁邊面積大