設計師教你如何制作具有“視覺引導”的網頁

學設計的人應該都知道，視覺引導在設計中是很重要的，優秀的作品通常都具有良好的視覺引導能力。這里，設計師不得不說在網站設計中視覺引導尤為重要！做把“視覺引導”做好了，往往能打造一個很棒的網站。那么我們如何制作具有“視覺引導”網頁呢？下面來分享幾個科技設計師在“視覺引導”網頁設計方面的技巧：
一、先要有個視覺點，靠這些點指引或者聚集視線
點的形狀并非都是圓，或者是某種具象的元素。
比如：在整張頁面中出現的大小對比關系，那么小的元素可以稱之為點。大的元素也可稱之為點。 它是一種相對而言的說法。其實，在頁面中出現一點時，就 可以很快吸引住用戶的眼球。當再出現一點時，此刻用戶觀察畫面時的注意力就分散了。
當遇到大小不同的點同時出現時，用戶首先會關注較大的那個點，再接著是 較小的點。

在實際應用中又可分為 ：
焦點：第一時間吸引人眼球的那個元素。畫面中的點有著明顯的大小、顏色、形狀的對比。
亮點：是指畫面中點的形狀或者細節區別于其他元素，成為畫面中的主視覺。

當你在設計時
1、畫面元素的對比不明顯，整體視覺很平均時：
你可以根據設計需要和活動目的，對設計元素調整大小、或者顏色等形式，使要突出的點對比更為突出。
2、當版式中的文字太多時，用戶不知道先看什么?
這時你可以嘗試把主要文案的字形、顏色等進行處理，使用戶視線有個聚焦點。亦或者你可以嘗試對文字的層次進行調整，使該突出的突出，該弱化的弱化。
二、人物動作設計多，手眼身腳都要使!
動作，舉止的指向性。
這種指向可以通過模特擺出的各種姿勢去體現，也可以通過調整模特元素的方向、位置、和排版共同完成對指定內容的指向。在做一些以模特類為主要元素的設計時，可以好好利用下模特的一舉一動。

實際應用中
如在表現一些運動活動專題時：動感、活力是這類需求的主要切入點。
在人物動作的挑選上，就盡量找一些動作幅度較大、夸張的模特，來完成對于“動”起來的基本訴求。

當你在設計時
1､ 選擇大片模特時，首先要考慮到使用模特做為主視覺元素時，模特的動作是否要去結合文案需要、構圖需要等需求。然后再去挑選或者去拍攝適合活動目的并帶有指向的動作素材;
2､ 在使用模特素材時，充分利用好模特的動作、表情和眼神的視覺指向，按著瀏覽軌跡安排合適的販內容到正確的位置上。
眼神
眼神的作用，暗示出模特所指的具體內容中，它有著明確的方向指向。
當你看我、當我看你，當你看它時，隨著人們注意視線的移動，人們關注的焦點也會做出相應的調整。

在實際應用中
當你用不同的眼神觀察事物時，其實你的眼神中，就帶有了指向目的的作用。
人們會隨著你的眼神所指，朝你眼神所示的方向關注過去。它會暗示用戶的眼睛，跟隨模特或者元素的指引方向，關注到指定的信息。這是一種利用模特眼神，引起用戶關注的一個方法。

當你在設計時
1､ 跟著模特臉的方向、眼神所指的方向，安排重要、次要信息到相應的位置上。這會暗示用戶的眼球朝所示的方向看過去。
2､ 不要忽略模特的表情哦，它其實也很重要哦。試想一下，一個要表達天真無邪，充滿童趣的畫面時，你選的模特表情僵硬、目光呆滯，像欠了500工資一樣，是不是顯得傻了一些呢?
三、上下左右和中間，前面后面和側面!
方向，用于提示某種位置。
箭頭、直線、斜線都具有明確的指向性，它們是引導用戶視線的好元素。它不僅有著明確的指向性，而且還可以對畫面進行分隔，對信息進行層次的間隔。
在一些場景中，指示方向最多的元素當屬各式方向的箭頭了。它是提示用戶、并暗示行動的一種設計元素。

在實際應用中
如果要給用戶點明要關注的內容，最好的方法就是利用線、箭頭元素的指向，可以很方便的對用戶眼睛，進行方向上的引導。

當你在設計時
1､ 在做時尚類、服裝類的設計需求中，靈活運用小短線元素可以幫你加強文字層次，修飾畫面細節，和提示標重的地方中。不同的線，有著不同的視覺感覺。例如：粗線給人男人、有力的印象;曲線給人柔美、飄逸的感受;
2､ 在使用線、短線、箭頭元素時，一定要加在要進行明確指向的目的上。不要為了加，而加。
四、萬柳叢中一點紅，誘導聚焦和突出
萬柳叢中一點紅，從這句話中折射出了色彩所具有的指向性。
它的優點是直接讓主體從萬千元素干擾中，非常突出并且馬上抓住用戶視覺。

在實際應用可分為二種情況
誘導
在面對大幅面文字、元素、圖像信息時，人的眼睛是需要引導的，而色彩是最為直白的形式之一。
通過對色彩的合理運用著重突出最主要的信息，把色彩的反差最大化。如果在色彩的引導上，加配以元素的指向、動作的指向，那么色彩指向將會更加的具有沖擊力。

色彩誘導的作用類似于，色彩方案中的點睛色。把你要做突出的內容，用對比色、互被色進行表現。
聚集
當畫面出現多二種顏色時，用戶的眼神首先會聚焦在那些對比性強、面積大的突出的顏色上，然后再找另外一種顏色，然后全部瀏覽完成。

色彩聚集的核心作用就是把你要突出的內容突出化、對比化、聚焦化，讓用戶的視線停留于此，閱讀你想要傳達給他們的信息。
當你在設計時
1､ 用反差比較強烈的互補色去突出主要內容時，這種聚焦的處理方法更有效;
2､ 如果畫面中的顏色較多時，可以利用色彩的面積大小，去給頁面出現的所有信息進行重要層次的分級。
3、留白設計空白多，主角旁邊面積大
五、留白，常見的逼格神器，突出主角的必備招數。
如果說上述的幾種方法是在做加法的設計，那么留白其實是在做減法的設計。當主角元素四周的留白很多時，人眼的視線首先會從整頁復雜的環境中，優先發現那個沒有任何障礙物的設計元素。

在實際應用中
留白就是留出主角、空白、層次、逼格的一種簡潔的設計方法。
留白的”白”指的不是顏色的”白”，而是空白的”白”，留白指的是某一區域無多余元素、四周處于大面積空白的狀態。

當你在設計時
1、有效的留白可以提升畫面的逼格，而且可以使要突出的主角更突出;
2、敢留白：大量留白會使頁面有空間感，不會因為頁面內容密密麻麻而產生厭惡。
3、使用最精簡的元素：不添加無謂的設計元素，給用戶帶去視覺干擾，只保留核心和必要的關鍵關素，并且對關鍵元素進行細節的刻畫。
4、一二三四五六七，7654321
六、數字指向，順序的指向性。
一般人都會有這樣的體驗，當看到數字1時，就要去尋找數字2。有些需求里，在需要用視覺牽引用戶眼睛時，把數字當標頭，使用戶視線在頁面中合理跳躍。

在實際應用中
數字元素的運用往往出現在以目錄頁、發展歷程、或者產品排列展示中。

當你在設計時
1、做時尚搭配的需求時，可以用數字去引導產品的順序;
2、以用運數字為元素時，對數字的大小和字形要進行整體的把控。切不可讓數字影響主體內容，當然如果是以數字為主的，就要盡量突出數字的視覺性。
3、動的太大顯得鬧，靜的太死顯得悶
七、動靜，就是畫面的靜與動。
動的元素在整體靜態的頁面中更能吸引用戶的眼球。當然這其中包括頁面中有gif圖、視覺元素的動感表現等。

在實際應用中
動的表現可以用人物的動作、產品的動作、gif圖來完成對動的執行。但是畫面中同一屏的頁面中，同時動的元素最好不要超過3處或更多，因為每動一處都會引起人們視覺的噪動，如果動的太多，勢必會分散用戶的注意力。使主要內容的傳達，弱化。

大家注意細節：手的動作。
當你在設計時
1､ 瞬間讓元素有動感的處理方法：給元素增加動感模糊;給畫面增加飛著的元素如：五彩紙屑、紅包、傾斜著的線等。
2､ 動的頁面還可以通過用現在較流行的h5、視差滾動等技術讓頁面中的不同元素根據用戶的鼠標滾動相應的出現;
八、文案設計想法多，緊扣主題有內涵
文案，用文筆引導用戶產生畫面感。 

在實際應用中
相比較而言，文字雖沒有色彩那么實在，也沒人物動作那么顯而易見，但是它卻是最能走進人們內心的形式。 

當你在設計時
1､好文案往往會聯想到一些元素的、色彩的、風格的關鍵字，這樣的好文案往往和圖像的貼合度更高。
2､文案的視覺設計，往往通過對文案意思具象的、抽象型的表達引起用戶的共鳴。
以上就是給大家的分享，最后，做一下總結：　
先要有個視覺點，引導眼神靠這些。
人物動作設計多，手眼身腳都要使。
上下左右和中間，前面后面和側面。
萬柳叢中一點紅，誘導聚焦和突出。
留白設計空白多，主角旁邊面積大。
一二三四五六七，7654321。
動的太大顯得鬧，靜的太死顯得悶。
文案設計想法多，緊扣主題有內涵。