這次分享主要是總結(jié)網(wǎng)頁設(shè)計中一些實用的配圖技巧，讓設(shè)計稿擁有更好的視覺引導(dǎo)，從而使大家快速解決工作中問題。
文章重點梳理
· 利用配圖建立視覺焦點
· 配圖模特的動作、眼神引導(dǎo)
· 配圖中隱形“線條”的引導(dǎo)
· 配圖色彩的引導(dǎo)
· 配圖的心理暗示
一. 利用配圖建立視覺焦點
讓網(wǎng)頁中配圖產(chǎn)生對比關(guān)系（大小、形狀、顏色等），從而建立視覺焦點。
圖①：加大某一產(chǎn)品配圖的面積大小，再加上突出的藍色色塊，從而引導(dǎo)用戶視線首先聚集到右上的鞋子產(chǎn)品上；
圖②：整體以手繪風(fēng)格為主，部分輔以原色實物，由此形成強烈對比而產(chǎn)生視覺焦點，讓用戶跟隨原色實物的引導(dǎo)進行瀏覽；
圖③：典型的居中式布局，除產(chǎn)品、文案外沒有其他視覺干擾，視覺焦點更好的聚集到產(chǎn)品配圖上；
圖④：巧妙利用插畫配圖的形狀分布形成一個居中的視覺焦點，使用戶能第一時間關(guān)注到正中央的文字內(nèi)容。
*利用配圖建立視覺焦點是最基礎(chǔ)的方法（至于排版基礎(chǔ)方面此處不多詳說，推薦大家觀看《寫給大家看的設(shè)計書》一書），再結(jié)合下面幾點技巧更可靈活運用，讓網(wǎng)頁有更多的表現(xiàn)形式。
二. 配圖模特動作、眼神引導(dǎo)
配圖的模特人物，利用其眼神、身體動作、整體造型等形成視覺引導(dǎo)：
圖①：根據(jù)配圖模特的眼神方向進行文字排版，把用戶引導(dǎo)到文案信息上；
圖②：利用配圖模特身體的動作造型、眼神配合形成功能按鈕與文案的視覺引導(dǎo)；
圖③：整體利用配圖模特的動作進行視覺引導(dǎo)，使用戶能很好地隨之而從左往右、從上往下閱讀，有著舒適流暢的閱讀體驗。
這是一個簡單的套路案例：為什么說是套路？正常工作中，很多時候我們可能并沒有那么多的時間去好好發(fā)揮，客戶或者領(lǐng)導(dǎo)可能就提供了幾個文案就讓我們?nèi)プ鰣D。
這時候，我們唯有從網(wǎng)上尋找各種素材圖片來拼，肯定很多設(shè)計師都遇到過這樣的問題，既苦于找不到好的高清素材，又擔心版權(quán)問題；站酷海洛正好解決了我們這個問題，那我們先來看看從站酷海洛上找來的兩個素材圖片：
先把模特素材置于畫布中，根據(jù)其眼睛視線，將其放置在最左邊的位置（圖A），這里引入一個小技巧，利用填充內(nèi)容識別，自動把右側(cè)缺失的地方智能補充（圖B）。
根據(jù)模特眼睛視線的位置，我們將甜甜圈的素材摳出，置于右側(cè)（這里解釋一下，為什么會選用黑人的模特素材？
這里由于黑人的膚色與白色甜甜圈正好形成強烈的對比，再加上，模特人物的表情較為喜感，更增添趣味性）。
再配上文案，加上字體效果，大功告成！？但總感覺還缺了點細節(jié)。
再根據(jù)甜甜圈上的糖果粒顏色、形狀，找到類似的紋理素材，再豐富點綴下整體畫面。
現(xiàn)在真大功告成了！一個banner就這樣快速完成。
三. 配圖中隱形“線條”的引導(dǎo)
運用配圖中隱藏的“線條”（整體造型、方向性的指示等）來形成視覺引導(dǎo)：
圖①：配圖中面包具有指引性作用，引導(dǎo)用戶繼續(xù)往下滾動瀏覽；
圖②：巧妙利用配圖本身造型而形成“箭頭式”的指引，引導(dǎo)用戶快速找到信息，既流暢舒適，也增添節(jié)奏感；
圖③：有些配圖“線條”不容易看出，比如此示例中，隱形的“線條”引導(dǎo)恰到好處，不刻意，整體視覺非常流暢自然，渾然天成。
我們來做一個簡單的手表產(chǎn)品頁面練習(xí)，先大致畫好整體版式：
大致的布局畫好：為什么這么處理呢？上文中也提到，為了建立視覺焦點需要產(chǎn)生對比關(guān)系，所以定了最上方的塊最大，然后下面2個相對小點的塊組成，形成一個大小關(guān)系的對比，然后我們再去找3個手表的圖片素材進行分別填充3個塊；
先來處理最上面大banner：
為了繼續(xù)增強對比，把底色調(diào)整為黑色，然后把其中一個手表素材摳圖置入其中，巧妙利用手表指針的方向性指示來進行視覺引導(dǎo)。
這里手表素材僅保留其特寫細節(jié)部分，大膽地再繼續(xù)加強對比（使大的點變得更大），這樣視覺更具張力，使人更印象深刻。
然后再把另外兩個手表的素材，根據(jù)其外型結(jié)構(gòu)特征分別置入下面兩個塊，這里面隱形的“線條”正巧妙地起到視覺引導(dǎo)的作用。
四. 配圖色彩的引導(dǎo)
整體去調(diào)整各配圖的色彩，提取其中突出的顏色（產(chǎn)生大的對比），讓用戶眼睛主動跟隨色彩，從而引導(dǎo)快速獲取信息。
圖①、圖②：均提取配圖中突出色彩作為引導(dǎo)，用戶眼睛會不自覺地跟隨主要色彩進行移動瀏覽，既確保了瀏覽的舒適度，亦使網(wǎng)頁統(tǒng)一了色調(diào)、風(fēng)格。
圖③、圖④：另外還可以采用不同顏色的色塊來產(chǎn)生強烈對比，使用戶眼睛跟隨這些色塊進行瀏覽，也使畫面增色不少。
這個案例我們先來看看最終的成品：
此案例不僅利用不同色塊進行引導(dǎo)，而且還利用模特的動作造型動作作為視覺引導(dǎo)，用戶的眼睛會隨著左右放置的色塊從左往右、由上至下進行跳躍式閱讀，模特破格出畫面的設(shè)計也讓整個設(shè)計動起來，更為有趣。
下面來詳細地分析一下：先來看看找到的素材原圖；
從圖片中模特的衣著，提取出以下顏色；
先把布局版式排好，然后把模特素材按上文提到的“配圖模特動作、眼神引導(dǎo)”按照一定規(guī)律大致放置，看下是否視覺引導(dǎo)是否正確，還有是否有具有美感。
（小貼士：通常我們在做提案時候總會擔心購買了素材，若最終效果不滿意豈不是浪費，這樣先把小圖大致放到版式中比對確定好大方向是最好的解決方法）。
然后，我們把所有人物素材摳好，控制好模特與對應(yīng)色塊的位置、面積關(guān)系，并統(tǒng)一調(diào)色。（模特素材做破格出畫面的設(shè)計，既活躍了畫面氛圍，亦更好的進行視覺引導(dǎo)）。
五. 配圖的心理暗示
配圖的內(nèi)容總會給人產(chǎn)生不同的心理暗示，結(jié)合電影里蒙太奇手法，進行配圖，能巧妙地做出能讓客戶過稿的設(shè)計。
我們先來看以下一組圖，同時采用同一個面無表情的模特，再分別與三個不同的配圖放到一起：
與一碗湯的圖片搭配，我們會看到模特眼中充滿了對食物的饑渴。
與趴在棺材上的女人圖片搭配，我們會看到模特眼中充滿了同情和悲痛。
與抱著玩具熊的小女孩圖片搭配，我們會看到模特眼中充滿了慈祥的父愛。
通過上面3組圖，我們可以看出不同圖片的搭配，可以使人產(chǎn)生不同的感受，那么怎樣將其應(yīng)用于網(wǎng)頁設(shè)計中？請往下看：
圖①：利用多組具有連續(xù)關(guān)聯(lián)性的配圖（模特臉部特寫，舞者全身，練習(xí)場景、服裝特寫等），讓用戶有著猶如觀看電影般的感受，既通過配圖作為信息傳達的引導(dǎo)，亦表現(xiàn)出芭蕾舞者的專業(yè)。
圖②：不同于一般單純展示單獨的產(chǎn)品，這里每組產(chǎn)品均加入了同色系的兩張配圖作為搭配，在突出產(chǎn)品氣質(zhì)的同時，也讓用戶感受到產(chǎn)品原料源于天然（此處若用單純只用文案來表達則少了幾分味道，但通過配圖的方法來傳達出這一感受可謂巧妙）。
這里引入一個比較接地氣的案例，我在做某個網(wǎng)頁設(shè)計提案時候的一個小彩蛋。
可能大家第一眼看，這版設(shè)計整體并沒有什么大問題，確定？
設(shè)計之初，banner的城市與立交橋的視覺引導(dǎo)確實是比較巧妙，使用戶更好地把視線移向內(nèi)容信息，同時這樣的素材搭配也非常符合題材。
心想，這肯定一稿過，升職加薪，當上設(shè)計總監(jiān)，出任ceo，迎娶白富美，走上人生巔峰，想想還有點小激動。
可是萬萬沒想到，客戶所看到的是：這貌似象征著咱們公司要走下坡路的感覺，萬萬不可啊。這神馬理由?。看藭r，我的內(nèi)心是崩潰的，心里一萬只神獸奔過。
此時又不想全部推翻重新設(shè)計，那告訴大家一個快速改稿的方法：我們先找來一個汽車的素材：
角度一定要跟立交橋的透視大致一致，可能大家這時候已經(jīng)想到，我要合成一輛車進畫面，沒錯，是的。
汽車素材的搭配結(jié)合，雖然只是小小的改動變化，導(dǎo)致的結(jié)果便大大的不一樣了。
一方面汽車頭的方向，迎面而來：暗示著這是一個“上坡路”，完美解決了客戶提出“下坡路”的刁鉆問題；另一方面，汽車與立交橋的配合更有了一個準確的方向指示，視覺引導(dǎo)更明顯了。
綜合這5點配圖技巧，再來一個綜合的案例演示：
這是一個跟大數(shù)據(jù)有關(guān)的公司官網(wǎng)，首先我們根據(jù)客戶提供的文案、資料，進行大致的布局排版。
再根據(jù)品牌色來定主體配色風(fēng)格，同時以紅色為點綴色作為“點”，進行視覺上的引導(dǎo)，這樣用戶在瀏覽網(wǎng)頁時可以跟隨紅色“點”的部分進行跳躍式閱讀。
以經(jīng)驗來看大多數(shù)情況，中小企業(yè)項目的客戶都比較欠缺高質(zhì)量的圖片素材，這項目也一樣，在對其網(wǎng)頁設(shè)計提案時，大多都需要搜集一些圖片，根據(jù)“大數(shù)據(jù)”等關(guān)鍵詞，搜集到一些相關(guān)圖片素材。
對圖片素材進行整體的調(diào)色，可用PS或者LR（這個根據(jù)自己的使用習(xí)慣）,整體調(diào)色風(fēng)格偏電影感，讓藍色更顯通透感。
圖①、圖②、圖③根據(jù)蒙太奇的手法進行搭配：
圖①男模特看著電腦的數(shù)據(jù)圖；
圖②模特手按鍵盤；
圖③女模特看著電腦的數(shù)據(jù)圖。
這3圖除了色彩的統(tǒng)一，也存在著一定的聯(lián)系，像看電影一樣，這樣的搭配讓用戶有著親臨其境的沉浸式體驗，亦顯行業(yè)的專業(yè)性，也更好地傳達出品牌氣質(zhì)。
另外，圖①、圖②模特人物向左、向右的眼神視線把用戶引導(dǎo)到相應(yīng)的信息上。
沒錯，站酷海洛也能找到完成度極高的整套圖標素材，當然不能就這么直接使用，也需要結(jié)合該項目的品牌顏色加以修改調(diào)整即可，紅色的部分，既包含了品牌色，也呼應(yīng)了版面的紅色部分來進行視覺引導(dǎo)，更好抓住用戶視線。
再把其他3個圖片素材置入“公司動態(tài)”中，圖片之間形成一條無形的“線條”進行視覺引導(dǎo)，這樣整體搭配舒適富有美感，極具流暢性。
最終完成頁面：
最后總結(jié)：
對于網(wǎng)頁設(shè)計中配圖其實并不是我們想象中那么復(fù)雜，只有我們合理地靈活運用以上五點技巧（利用配圖建立視覺焦點、配圖模特的動作、眼神引導(dǎo)、配圖中隱形“線條”的引導(dǎo)、配圖色彩的引導(dǎo)、配圖的心理暗示），舉一反三，便可延展出更多新的形式。
希望大家通過這五點總結(jié)，能更好地運用到自己的作品中，快速滿足日常商業(yè)工作中的視覺設(shè)計。
作者：梁敏亮
