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