淺析如何讓網站設計擁有更好(hǎo)的視覺引導以提高用戶體驗？

　　圻谷小編今天大家談下主要是圻谷網絡這(zhè)些年總結網頁設計中一些實用的配圖技巧，讓網站設計擁有更好(hǎo)的視覺引導，從而使更好(hǎo)的提高網站的用戶體驗。

　　一. 利用配圖建立視覺焦點

　　讓網頁中配圖産生對(duì)比關系（大小、形狀、顔色等），從而建立視覺焦點。

　　

　　圖①：加大某一産品配圖的面(miàn)積大小，再加上突出的藍色色塊，從而引導用戶視線首先聚集到右上的鞋子産品上；

　　圖②：整體以手繪風格爲主，部分輔以原色實物，由此形成(chéng)強烈對(duì)比而産生視覺焦點，讓用戶跟随原色實物的引導進(jìn)行浏覽；

　　圖③：典型的居中式布局，除産品、文案外沒(méi)有其他視覺幹擾，視覺焦點更好(hǎo)的聚集到産品配圖上；

　　圖④：巧妙利用插畫配圖的形狀分布形成(chéng)一個居中的視覺焦點，使用戶能(néng)第一時(shí)間關注到正中央的文字内容。

　　二. 配圖模特動作、眼神引導

　　配圖的模特人物，利用其眼神、身體動作、整體造型等形成(chéng)視覺引導：

　　

　　圖①：根據配圖模特的眼神方向(xiàng)進(jìn)行文字排版，把用戶引導到文案信息上；

　　圖②：利用配圖模特身體的動作造型、眼神配合形成(chéng)功能(néng)按鈕與文案的視覺引導；

　　圖③：整體利用配圖模特的動作進(jìn)行視覺引導，使用戶能(néng)很好(hǎo)地随之而從左往右、從上往下閱讀，有著(zhe)舒适流暢的閱讀體驗。

　　

　　這(zhè)是一個簡單的套路案例：爲什麼(me)說(shuō)是套路？正常工作中，很多時(shí)候我們可能(néng)并沒(méi)有那麼(me)多的時(shí)間去好(hǎo)好(hǎo)發(fā)揮，客戶或者領導可能(néng)就(jiù)提供了幾個文案就(jiù)讓我們去做圖。

　　這(zhè)時(shí)候，我們唯有從網上尋找各種(zhǒng)素材圖片來拼，肯定很多設計師都(dōu)遇到過(guò)這(zhè)樣的問題，既苦于找不到好(hǎo)的高清素材，又擔心版權問題；站酷海洛正好(hǎo)解決了我們這(zhè)個問題，那我們先來看看從站酷海洛上找來的兩(liǎng)個素材圖片：

　　

　　先把模特素材置于畫布中，根據其眼睛視線，將(jiāng)其放置在最左邊的位置（圖A），這(zhè)裡(lǐ)引入一個小技巧，利用填充内容識别，自動把右側缺失的地方智能(néng)補充（圖B）。

　　

　　根據模特眼睛視線的位置，我們將(jiāng)甜甜圈的素材摳出，置于右側（這(zhè)裡(lǐ)解釋一下，爲什麼(me)會(huì)選用黑人的模特素材？

　　這(zhè)裡(lǐ)由于黑人的膚色與白色甜甜圈正好(hǎo)形成(chéng)強烈的對(duì)比，再加上，模特人物的表情較爲喜感，更增添趣味性）。

　　

　　再配上文案，加上字體效果，大功告成(chéng)！？但總感覺還(hái)缺了點細節。

　　

　　再根據甜甜圈上的糖果粒顔色、形狀，找到類似的紋理素材，再豐富點綴下整體畫面(miàn)。

　　

　　現在真大功告成(chéng)了！一個banner就(jiù)這(zhè)樣快速完成(chéng)。

　　三. 配圖中隐形“線條”的引導

　　運用配圖中隐藏的“線條”（整體造型、方向(xiàng)性的指示等）來形成(chéng)視覺引導：

　　

　　圖①：配圖中面(miàn)包具有指引性作用，引導用戶繼續往下滾動浏覽；

　　

　　圖②：巧妙利用配圖本身造型而形成(chéng)“箭頭式”的指引，引導用戶快速找到信息，既流暢舒适，也增添節奏感；

　　

　　圖③：有些配圖“線條”不容易看出，比如此示例中，隐形的“線條”引導恰到好(hǎo)處，不刻意，整體視覺非常流暢自然，渾然天成(chéng)。

　　

　　我們來做一個簡單的手表産品頁面(miàn)練習，先大緻畫好(hǎo)整體版式：

　　

　　大緻的布局畫好(hǎo)：爲什麼(me)這(zhè)麼(me)處理呢？上文中也提到，爲了建立視覺焦點需要産生對(duì)比關系，所以定了最上方的塊最大，然後(hòu)下面(miàn)2個相對(duì)小點的塊組成(chéng)，形成(chéng)一個大小關系的對(duì)比，然後(hòu)我們再去找3個手表的圖片素材進(jìn)行分别填充3個塊；

　　

　　先來處理最上面(miàn)大banner：

　　

　　爲了繼續增強對(duì)比，把底色調整爲黑色，然後(hòu)把其中一個手表素材摳圖置入其中，巧妙利用手表指針的方向(xiàng)性指示來進(jìn)行視覺引導。

　　這(zhè)裡(lǐ)手表素材僅保留其特寫細節部分，大膽地再繼續加強對(duì)比（使大的點變得更大），這(zhè)樣視覺更具張力，使人更印象深刻。

　　

　　然後(hòu)再把另外兩(liǎng)個手表的素材，根據其外型結構特征分别置入下面(miàn)兩(liǎng)個塊，這(zhè)裡(lǐ)面(miàn)隐形的“線條”正巧妙地起(qǐ)到視覺引導的作用。

　　

　　四. 配圖色彩的引導

　　整體去調整各配圖的色彩，提取其中突出的顔色（産生大的對(duì)比），讓用戶眼睛主動跟随色彩，從而引導快速獲取信息。

　　

　　圖①、圖②：均提取配圖中突出色彩作爲引導，用戶眼睛會(huì)不自覺地跟随主要色彩進(jìn)行移動浏覽，既确保了浏覽的舒适度，亦使網頁統一了色調、風格。

　　

 

　　圖③、圖④：另外還(hái)可以采用不同顔色的色塊來産生強烈對(duì)比，使用戶眼睛跟随這(zhè)些色塊進(jìn)行浏覽，也使畫面(miàn)增色不少。

　　

　　這(zhè)個案例我們先來看看最終的成(chéng)品：

　　

　　此案例不僅利用不同色塊進(jìn)行引導，而且還(hái)利用模特的動作造型動作作爲視覺引導，用戶的眼睛會(huì)随著(zhe)左右放置的色塊從左往右、由上至下進(jìn)行跳躍式閱讀，模特破格出畫面(miàn)的設計也讓整個設計動起(qǐ)來，更爲有趣。

　　下面(miàn)來詳細地分析一下：先來看看找到的素材原圖；

　　

　　從圖片中模特的衣著(zhe)，提取出以下顔色；

　　

　　先把布局版式排好(hǎo)，然後(hòu)把模特素材按上文提到的“配圖模特動作、眼神引導”按照一定規律大緻放置，看下是否視覺引導是否正确，還(hái)有是否有具有美感。

　　（小貼士：通常我們在做提案時(shí)候總會(huì)擔心購買了素材，若最終效果不滿意豈不是浪費，這(zhè)樣先把小圖大緻放到版式中比對(duì)确定好(hǎo)大方向(xiàng)是最好(hǎo)的解決方法）。

　　

　　然後(hòu)，我們把所有人物素材摳好(hǎo)，控制好(hǎo)模特與對(duì)應色塊的位置、面(miàn)積關系，并統一調色。（模特素材做破格出畫面(miàn)的設計，既活躍了畫面(miàn)氛圍，亦更好(hǎo)的進(jìn)行視覺引導）。

　　五. 配圖的心理暗示

　　配圖的内容總會(huì)給人産生不同的心理暗示，結合電影裡(lǐ)蒙太奇手法，進(jìn)行配圖，能(néng)巧妙地做出能(néng)讓客戶過(guò)稿的設計。

　　我們先來看以下一組圖，同時(shí)采用同一個面(miàn)無表情的模特，再分别與三個不同的配圖放到一起(qǐ)：

　　

　　與一碗湯的圖片搭配，我們會(huì)看到模特眼中充滿了對(duì)食物的饑渴。

　　

　　與趴在棺材上的女人圖片搭配，我們會(huì)看到模特眼中充滿了同情和悲痛。

　　

　　與抱著(zhe)玩具熊的小女孩圖片搭配，我們會(huì)看到模特眼中充滿了慈祥的父愛。

　　通過(guò)上面(miàn)3組圖，我們可以看出不同圖片的搭配，可以使人産生不同的感受，那麼(me)怎樣將(jiāng)其應用于網頁設計中？請往下看：

　　

　　圖①：利用多組具有連續關聯性的配圖（模特臉部特寫，舞者全身，練習場景、服裝特寫等），讓用戶有著(zhe)猶如觀看電影般的感受，既通過(guò)配圖作爲信息傳達的引導，亦表現出芭蕾舞者的專業。

　　圖②：不同于一般單純展示單獨的産品，這(zhè)裡(lǐ)每組産品均加入了同色系的兩(liǎng)張配圖作爲搭配，在突出産品氣質的同時(shí)，也讓用戶感受到産品原料源于天然（此處若用單純隻用文案來表達則少了幾分味道(dào)，但通過(guò)配圖的方法來傳達出這(zhè)一感受可謂巧妙）。

　　

　　這(zhè)裡(lǐ)引入一個比較接地氣的案例，我在做某個網頁設計提案時(shí)候的一個小彩蛋。

　　

　　可能(néng)大家第一眼看，這(zhè)版設計整體并沒(méi)有什麼(me)大問題，确定？

　　設計之初，banner的城市與立交橋的視覺引導确實是比較巧妙，使用戶更好(hǎo)地把視線移向(xiàng)内容信息，同時(shí)這(zhè)樣的素材搭配也非常符合題材。

　　心想，這(zhè)肯定一稿過(guò)，升職加薪，當上設計總監，出任ceo，迎娶白富美，走上人生巅峰，想想還(hái)有點小激動。

　　可是萬萬沒(méi)想到，客戶所看到的是：這(zhè)貌似象征著(zhe)咱們公司要走下坡路的感覺，萬萬不可啊。這(zhè)神馬理由！？此時(shí)，我的内心是崩潰的，心裡(lǐ)一萬隻神獸奔過(guò)。

　　此時(shí)又不想全部推翻重新設計，那告訴大家一個快速改稿的方法：我們先找來一個汽車的素材：

　　

　　角度一定要跟立交橋的透視大緻一緻，可能(néng)大家這(zhè)時(shí)候已經(jīng)想到，我要合成(chéng)一輛車進(jìn)畫面(miàn)，沒(méi)錯，是的。

　　

　　汽車素材的搭配結合，雖然隻是小小的改動變化，導緻的結果便大大的不一樣了。

　　

　　一方面(miàn)汽車頭的方向(xiàng)，迎面(miàn)而來：暗示著(zhe)這(zhè)是一個“上坡路”，完美解決了客戶提出“下坡路”的刁鑽問題；另一方面(miàn)，汽車與立交橋的配合更有了一個準确的方向(xiàng)指示，視覺引導更明顯了。

　　綜合這(zhè)5點配圖技巧，再來一個綜合的案例演示：

　　

　　這(zhè)是一個跟大數據有關的公司官網，首先我們根據客戶提供的文案、資料，進(jìn)行大緻的布局排版。

　　再根據品牌色來定主體配色風格，同時(shí)以紅色爲點綴色作爲“點”，進(jìn)行視覺上的引導，這(zhè)樣用戶在浏覽網頁時(shí)可以跟随紅色“點”的部分進(jìn)行跳躍式閱讀。

　　

　　以經(jīng)驗來看大多數情況，中小企業項目的客戶都(dōu)比較欠缺高質量的圖片素材，這(zhè)項目也一樣，在對(duì)其網頁設計提案時(shí)，大多都(dōu)需要搜集一些圖片，根據“大數據”等關鍵詞，搜集到一些相關圖片素材。

　　

　　對(duì)圖片素材進(jìn)行整體的調色，可用PS或者LR（這(zhè)個根據自己的使用習慣）,整體調色風格偏電影感，讓藍色更顯通透感。

　　

　　圖①、圖②、圖③根據蒙太奇的手法進(jìn)行搭配：

　　圖①男模特看著(zhe)電腦的數據圖；

　　圖②模特手按鍵盤；

　　圖③女模特看著(zhe)電腦的數據圖。

　　這(zhè)3圖除了色彩的統一，也存在著(zhe)一定的聯系，像看電影一樣，這(zhè)樣的搭配讓用戶有著(zhe)親臨其境的沉浸式體驗，亦顯行業的專業性，也更好(hǎo)地傳達出品牌氣質。

　　另外，圖①、圖②模特人物向(xiàng)左、向(xiàng)右的眼神視線把用戶引導到相應的信息上。

　　

　　沒(méi)錯，站酷海洛也能(néng)找到完成(chéng)度極高的整套圖标素材，當然不能(néng)就(jiù)這(zhè)麼(me)直接使用，也需要結合該項目的品牌顔色加以修改調整即可，紅色的部分，既包含了品牌色，也呼應了版面(miàn)的紅色部分來進(jìn)行視覺引導，更好(hǎo)抓住用戶視線。

　　

　　再把其他3個圖片素材置入“公司動态”中，圖片之間形成(chéng)一條無形的“線條”進(jìn)行視覺引導，這(zhè)樣整體搭配舒适富有美感，極具流暢性。

　　最終完成(chéng)頁面(miàn)：

　　

　　最後(hòu)總結：對(duì)于網頁設計中配圖其實并不是我們想象中那麼(me)複雜，隻有我們合理地靈活運用以上五點技巧（利用配圖建立視覺焦點、配圖模特的動作、眼神引導、配圖中隐形“線條”的引導、配圖色彩的引導、配圖的心理暗示），舉一反三，便可延展出更多新的形式。