起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識實例分析：「8招」教你玩轉(zhuǎn)視覺引導(dǎo)
在所有的設(shè)計需求中，可以利用一些具有指向性的設(shè)計元素，如：色彩、人物和動作、留白處理等，讓用戶的眼神跟著頁面元素的引導(dǎo)，完成對信息的關(guān)注與吸收。今天這篇文章，我將分享幾個引導(dǎo)視覺的方法和技巧，一起來收。
01.先要有個視覺點，靠這些點指引或者聚集視線
點的形狀并非都是圓，或者是某種具象的元素。
比如：在整張頁面中出現(xiàn)的大小對比關(guān)系，那么小的元素可以稱之為點。大的元素也可稱之為點。
它是一種相對而言的說法。其實，在頁面中出現(xiàn)一點時，就 可以很快吸引住用戶的眼球。當再出現(xiàn)一點時，此刻用戶觀察畫面時的注意力就分散了。
當遇到大小不同的點同時出現(xiàn)時，用戶首先會關(guān)注較大的那個點，再接著是 較小的點。
左上1：視線會首先集中在右側(cè)鮮紅的草莓上，1是因為顏色的對比，2是因為面積的對比。點在這里是相對的關(guān)系，你可以把整體出現(xiàn)的元素都可以看做點。但是首先會有一個焦點去吸引用戶的視線；
左上2：點的焦中設(shè)計，居中的位置使用戶直接關(guān)注到正中的內(nèi)容；
左下3：這里的點，甚至說是頁面中的亮點。就是右側(cè)沖出畫面的騎行者，這種表現(xiàn)打破畫面的平穩(wěn)，使用戶最先關(guān)注到破格出畫面的人物，同時也體現(xiàn)出戶外騎行的自然和冒險；
左下4：點的集中設(shè)計，中間的圓為點，二邊的餐具為線，屬于典型的居中構(gòu)圖；
在實際應(yīng)用中又可分為
焦點
第一時間吸引人眼球的那個元素。畫面中的點有著明顯的大小、顏色、形狀的對比。
亮點
是指畫面中點的形狀或者細節(jié)區(qū)別于其他元素，成為畫面中的主視覺。
左圖1：以手繪的黑白線條為主，用原色的食品形成畫面的視覺點，引導(dǎo)用戶跳躍式的瀏覽；
右圖1：居中的點設(shè)計，視覺會焦聚在此。大面積的留白，使得畫面很干凈，除了主體產(chǎn)品外，沒有任何其他的元素干擾視線。以3種地殊場景下為主，向用戶推薦了不同的產(chǎn)品；
當你在設(shè)計時
1、畫面元素的對比不明顯，整體視覺很平均時：
你可以根據(jù)設(shè)計需要和活動目的，對設(shè)計元素調(diào)整大小、或者顏色等形式，使要突出的點對比更為突出。
2、當版式中的文字太多時，用戶不知道先看什么？
這時你可以嘗試把主要文案的字形、顏色等進行處理，使用戶視線有個聚焦點。亦或者你可以嘗試對文字的層次進行調(diào)整，使該突出的突出，該弱化的弱化。
02、人物動作設(shè)計多，手眼身腳都要使！
動作，舉止的指向性。
這種指向可以通過模特擺出的各種姿勢去體現(xiàn)，也可以通過調(diào)整模特元素的方向、位置、和排版共同完成對指定內(nèi)容的指向。在做一些以模特類為主要元素的設(shè)計時，可以好好利用下模特的一舉一動。
實際應(yīng)用中
如在表現(xiàn)一些運動活動專題時：動感、活力是這類需求的主要切入點。
在人物動作的挑選上，就盡量找一些動作幅度較大、夸張的模特，來完成對于“動”起來的基本訴求。
左圖1：模特人物展開雙臂運動的動作中，其中拿球的左手位置正好置于文字上，加之文字顏色為白色，使得用戶第一時間去關(guān)注那部分內(nèi)容。其中右手所示的位置，有一個扶地的動作，而這個動作也正好巧妙的結(jié)合于推薦的商品上，使用戶的視覺順著向下進行瀏覽關(guān)注。
右圖2：第一屏，圖像中模特的動作有“秀一下”的暗示，向用戶展示出他的8塊腹?。ㄎ?。二是人物所展示的拳頭指向，也使用戶的視覺焦點向畫面左側(cè)的文字靠攏。第二屏，模特眼神所示的方向正好指向了右側(cè)內(nèi)容。
當你在設(shè)計時
- 選擇大片模特時，首先要考慮到使用模特做為主視覺元素時，模特的動作是否要去結(jié)合文案需要、構(gòu)圖需要等需求。然后再去挑選或者去拍攝適合活動目的并帶有指向的動作素材；
- 在使用模特素材時，充分利用好模特的動作、表情和眼神的視覺指向，按著瀏覽軌跡安排合適的販內(nèi)容到正確的位置上。
眼神
眼神的作用，暗示出模特所指的具體內(nèi)容中，它有著明確的方向指向。
當你看我、當我看你，當你看它時，隨著人們注意視線的移動，人們關(guān)注的焦點也會做出相應(yīng)的調(diào)整。
在實際應(yīng)用中
當你用不同的眼神觀察事物時，其實你的眼神中，就帶有了指向目的的作用。
人們會隨著你的眼神所指，朝你眼神所示的方向關(guān)注過去。它會暗示用戶的眼睛，跟隨模特或者元素的指引方向，關(guān)注到指定的信息。這是一種利用模特眼神，引起用戶關(guān)注的一個方法。
左圖1：人物向上的眼神引導(dǎo)用戶先將視線聚焦在人物上身，然后再跟隨人物眼神向上移動，關(guān)注人物頂端的四塊信息。
左圖2：人物正面、向上、向右的眼神，都把用戶的眼神引導(dǎo)到相應(yīng)的信息上。
當你在設(shè)計時
- 跟著模特臉的方向、眼神所指的方向，安排重要、次要信息到相應(yīng)的位置上。這會暗示用戶的眼球朝所示的方向看過去。
- 不要忽略模特的表情哦，它其實也很重要哦。試想一下，一個要表達天真無邪，充滿童趣的畫面時，你選的模特表情僵硬、目光呆滯，像欠了500工資一樣，是不是顯得傻了一些呢？
03?上下左右和中間，前面后面和側(cè)面！
方向，用于提示某種位置。
箭頭、直線、斜線都具有明確的指向性，它們是引導(dǎo)用戶視線的好元素。它不僅有著明確的指向性，而且還可以對畫面進行分隔，對信息進行層次的間隔。
在一些場景中，指示方向最多的元素當屬各式方向的箭頭了。它是提示用戶、并暗示行動的一種設(shè)計元素。
在實際應(yīng)用中
如果要給用戶點明要關(guān)注的內(nèi)容，最好的方法就是利用線、箭頭元素的指向，可以很方便的對用戶眼睛，進行方向上的引導(dǎo)。
左圖1：線條具有明確的指向性、節(jié)奏感。直線具有男性的特征，它有力度、相對穩(wěn)定。曲線具有柔美、流暢的印象；
左圖2：垂直的線，有著明確的上下指向作用。
當你在設(shè)計時
1??? 在做時尚類、服裝類的設(shè)計需求中，靈活運用小短線元素可以幫你加強文字層次，修飾畫面細節(jié)，和提示標重的地方中。不同的線，有著不同的視覺感覺。例如：粗線給人男人、有力的印象；曲線給人柔美、飄逸的感受；
2??? 在使用線、短線、箭頭元素時，一定要加在要進行明確指向的目的上。不要為了加，而加。
04?萬柳叢中一點紅，誘導(dǎo)聚焦和突出
萬柳叢中一點紅，從這句話中折射出了色彩所具有的指向性。
它的優(yōu)點是直接讓主體從萬千元素干擾中，非常突出并且馬上抓住用戶視覺。
左上1：人物向上慢慢撕開的紅色內(nèi)容，成為用戶關(guān)注的第一焦點，面無表情人物給畫面營造出一種詭異、恐怖的感覺。
左上2：科比的湖人黃色首先成為視覺焦點，引導(dǎo)用戶關(guān)注其經(jīng)典的扣藍動作中。
左下3：紅色的線條運用提示用戶向下繼續(xù)瀏覽，分散的纖細短紅色線條自由無序的擺放在頁面的主要內(nèi)容上，使用戶的視覺焦點，集中在這些線條所指示的內(nèi)容上。
左下4：紅黑的對比，使得人物左側(cè)的紅色更為明顯。
在實際應(yīng)用可分為二種情況
誘導(dǎo)
在面對大幅面文字、元素、圖像信息時，人的眼睛是需要引導(dǎo)的，而色彩是最為直白的形式之一。
通過對色彩的合理運用著重突出最主要的信息，把色彩的反差最大化。如果在色彩的引導(dǎo)上，加配以元素的指向、動作的指向，那么色彩指向?qū)拥木哂袥_擊力。
左圖1：是典型的綠紅配，整體色調(diào)的綠色化，使得頁面最底部的紅瓶子顯得格外醒目。在用戶按照從上到下的瀏覽習慣看完后，視線就被定在了這個紅色的元素上。
左圖2：明快、對比強烈的色塊分別置于畫面的左右側(cè)，讓用戶的視線跟著這些色塊進行移動，既活躍了畫面，又豐富了整體效果。
通過上面的例子說明，色彩誘導(dǎo)的作用類似于，色彩方案中的點睛色。把你要做突出的內(nèi)容，用對比色、互被色進行表現(xiàn)。
聚集
當畫面出現(xiàn)多二種顏色時，用戶的眼神首先會聚焦在那些對比性強、面積大的突出的顏色上，然后再找另外一種顏色，然后全部瀏覽完成。
通過上面的例子說明，色彩聚集的核心作用就是把你要突出的內(nèi)容突出化、對比化、聚焦化，讓用戶的視線停留于此，閱讀你想要傳達給他們的信息。
當你在設(shè)計時
1? 用反差比較強烈的互補色去突出主要內(nèi)容時，這種聚焦的處理方法更有效；
2? 如果畫面中的顏色較多時，可以利用色彩的面積大小，去給頁面出現(xiàn)的所有信息進行重要層次的分級。
05、留白設(shè)計空白多，主角旁邊面積大
留白，常見的逼格神器，突出主角的必備招數(shù)。
如果說上述的幾種方法是在做加法的設(shè)計，那么留白其實是在做減法的設(shè)計。當主角元素四周的留白很多時，人眼的視線首先會從整頁復(fù)雜的環(huán)境中，優(yōu)先發(fā)現(xiàn)那個沒有任何障礙物的設(shè)計元素。
在實際應(yīng)用中
留白就是留出主角、空白、層次、逼格的一種簡潔的設(shè)計方法。
留白的”白”指的不是顏色的”白”，而是空白的”白”，留白指的是某一區(qū)域無多余元素、四周處于大面積空白的狀態(tài)。
左圖1：以產(chǎn)品為主的專題且只有的少量信息頁面，產(chǎn)品四周大面積的留白處理，使產(chǎn)品的形態(tài)，細節(jié)更加的聚焦。同時留白的處理，也提升品牌的品質(zhì)感和氣質(zhì)。
右圖2：整體頁面非常多的留白，除了一些扁平的設(shè)計元素外，主畫面以外多是以“白”的形式出現(xiàn)的。
當你在設(shè)計時
- 有效的留白可以提升畫面的逼格，而且可以使要突出的主角更突出；
- 敢留白：大量留白會使頁面有空間感，不會因為頁面內(nèi)容密密麻麻而產(chǎn)生厭惡。
- 使用最精簡的元素：不添加無謂的設(shè)計元素，給用戶帶去視覺干擾，只保留核心和必要的關(guān)鍵關(guān)素，并且對關(guān)鍵元素進行細節(jié)的刻畫。
06、一二三四五六七，7654321
數(shù)字指向，順序的指向性。
一般人都會有這樣的體驗，當看到數(shù)字1時，就要去尋找數(shù)字2。有些需求里，在需要用視覺牽引用戶眼睛時，把數(shù)字當標頭，使用戶視線在頁面中合理跳躍。
在實際應(yīng)用中
數(shù)字元素的運用往往出現(xiàn)在以目錄頁、發(fā)展歷程、或者產(chǎn)品排列展示中。
左圖1：魯尼踢球的動作和方向正好指向了右側(cè)的內(nèi)容區(qū)，以數(shù)字為代表的標頭又指示用戶逐個閱讀或者分散閱讀。
右圖1：數(shù)字的作用就是用來指示用戶繼續(xù)向下閱讀，黃色與黑色的強烈火對比。
左圖2：產(chǎn)品周圍大面積的留白，使得主角先被人關(guān)注到。右側(cè)泛白的標題數(shù)字，起到了突出產(chǎn)品折扣的目的。
當你在設(shè)計時
1、做時尚搭配的需求時，可以用數(shù)字去引導(dǎo)產(chǎn)品的順序；
2、以用運數(shù)字為元素時，對數(shù)字的大小和字形要進行整體的把控。切不可讓數(shù)字影響主體內(nèi)容，當然如果是以數(shù)字為主的，就要盡量突出數(shù)字的視覺性。
07、動的太大顯得鬧，靜的太死顯得悶
動靜，就是畫面的靜與動。
動的元素在整體靜態(tài)的頁面中更能吸引用戶的眼球。當然這其中包括頁面中有g(shù)if圖、視覺元素的動感表現(xiàn)等。
在實際應(yīng)用中
動的表現(xiàn)可以用人物的動作、產(chǎn)品的動作、gif圖來完成對動的執(zhí)行。但是畫面中同一屏的頁面中，同時動的元素最好不要超過3處或更多，因為每動一處都會引起人們視覺的噪動，如果動的太多，勢必會分散用戶的注意力。使主要內(nèi)容的傳達，弱化。
大家注意細節(jié)：手的動作。
當你在設(shè)計時
- 瞬間讓元素有動感的處理方法：給元素增加動感模糊；給畫面增加飛著的元素如：五彩紙屑、紅包、傾斜著的線等。
- 動的頁面還可以通過用現(xiàn)在較流行的h5、視差滾動等技術(shù)讓頁面中的不同元素根據(jù)用戶的鼠標滾動相應(yīng)的出現(xiàn)；
08、文案設(shè)計想法多，緊扣主題有內(nèi)涵
文案，用文筆引導(dǎo)用戶產(chǎn)生畫面感。
上圖是我在下班的途中拍到的飯店名字，好的名字真的很讓人記憶深刻。
在實際應(yīng)用中
相比較而言，文字雖沒有色彩那么實在，也沒人物動作那么顯而易見，但是它卻是最能走進人們內(nèi)心的形式。
上面兩個案例的詳細做法，都會收錄在我的新書里哦。到時記得買哈。
左圖1：像土豪一樣表白，設(shè)計師完全找到了文案與形象之間的切入點，結(jié)合卡通的表現(xiàn)形式，使得繪制的形象活生生的表現(xiàn)了某些土豪的“豪氣”。
右圖1：五折封頂 不留余力，設(shè)計師通過文案的發(fā)散，繪制了一個正在點燃的機器，像是要引爆全場的感覺。
當你在設(shè)計時
- 好文案往往會聯(lián)想到一些元素的、色彩的、風格的關(guān)鍵字，這樣的好文案往往和圖像的貼合度更高。
- 文案的視覺設(shè)計，往往通過對文案意思具象的、抽象型的表達引起用戶的共鳴。
以上的8點就是我對視覺元素引導(dǎo)的八個方法。
總結(jié)
- 先要有個視覺點，引導(dǎo)眼神靠這些。
- 人物動作設(shè)計多，手眼身腳都要使。
- 上下左右和中間，前面后面和側(cè)面。
- 萬柳叢中一點紅，誘導(dǎo)聚焦和突出。
- 留白設(shè)計空白多，主角旁邊面積大。
- 一二三四五六七，7654321。
- 動的太大顯得鬧，靜的太死顯得悶。
- 文案設(shè)計想法多，緊扣主題有內(nèi)涵。
謝謝閱讀
本文由 @不錯研究室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
好東西 干貨
這些網(wǎng)頁、設(shè)計好棒吧！
里面的規(guī)律這也不錯。
等慢慢的 細致的審閱與發(fā)現(xiàn)，哈哈