這次分享主要是總結(jié)網(wǎng)頁(yè)設(shè)計(jì)中一些實(shí)用的配圖技巧，讓設(shè)計(jì)稿擁有更好的視覺(jué)引導(dǎo)，從而使大家快速解決工作中問(wèn)題。

 

文章重點(diǎn)梳理

 

·     利用配圖建立視覺(jué)焦點(diǎn)
 

·     配圖模特的動(dòng)作、眼神引導(dǎo)

·     配圖中隱形“線條”的引導(dǎo)

·     配圖色彩的引導(dǎo)

·     配圖的心理暗示

 

 

 

一. 利用配圖建立視覺(jué)焦點(diǎn)

 

讓網(wǎng)頁(yè)中配圖產(chǎn)生對(duì)比關(guān)系（大小、形狀、顏色等），從而建立視覺(jué)焦點(diǎn)。

 

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

 

圖②：整體以手繪風(fēng)格為主，部分輔以原色實(shí)物，由此形成強(qiáng)烈對(duì)比而產(chǎn)生視覺(jué)焦點(diǎn)，讓用戶跟隨原色實(shí)物的引導(dǎo)進(jìn)行瀏覽；

 

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

 

圖④：巧妙利用插畫(huà)配圖的形狀分布形成一個(gè)居中的視覺(jué)焦點(diǎn)，使用戶能第一時(shí)間關(guān)注到正中央的文字內(nèi)容。

 

*利用配圖建立視覺(jué)焦點(diǎn)是最基礎(chǔ)的方法（至于排版基礎(chǔ)方面此處不多詳說(shuō)，推薦大家觀看《寫(xiě)給大家看的設(shè)計(jì)書(shū)》一書(shū)），再結(jié)合下面幾點(diǎn)技巧更可靈活運(yùn)用，讓網(wǎng)頁(yè)有更多的表現(xiàn)形式。

 

 

二. 配圖模特動(dòng)作、眼神引導(dǎo)

 

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

 

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

 

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

 

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

 

 

 

這是一個(gè)簡(jiǎn)單的套路案例：為什么說(shuō)是套路？正常工作中，很多時(shí)候我們可能并沒(méi)有那么多的時(shí)間去好好發(fā)揮，客戶或者領(lǐng)導(dǎo)可能就提供了幾個(gè)文案就讓我們?nèi)プ鰣D。

 

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

 

 

 

先把模特素材置于畫(huà)布中，根據(jù)其眼睛視線，將其放置在最左邊的位置（圖A），這里引入一個(gè)小技巧，利用填充內(nèi)容識(shí)別，自動(dòng)把右側(cè)缺失的地方智能補(bǔ)充（圖B）。

 

 

根據(jù)模特眼睛視線的位置，我們將甜甜圈的素材摳出，置于右側(cè)（這里解釋一下，為什么會(huì)選用黑人的模特素材？

 

這里由于黑人的膚色與白色甜甜圈正好形成強(qiáng)烈的對(duì)比，再加上，模特人物的表情較為喜感，更增添趣味性）。

 

 

再配上文案，加上字體效果，大功告成！？但總感覺(jué)還缺了點(diǎn)細(xì)節(jié)。

 

 

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

 

 

現(xiàn)在真大功告成了！一個(gè)banner就這樣快速完成。

 

三. 配圖中隱形“線條”的引導(dǎo)

 

運(yùn)用配圖中隱藏的“線條”（整體造型、方向性的指示等）來(lái)形成視覺(jué)引導(dǎo)：

 

圖①：配圖中面包具有指引性作用，引導(dǎo)用戶繼續(xù)往下滾動(dòng)瀏覽；

 

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

 

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

 

 

 

我們來(lái)做一個(gè)簡(jiǎn)單的手表產(chǎn)品頁(yè)面練習(xí)，先大致畫(huà)好整體版式：

 

 

大致的布局畫(huà)好：為什么這么處理呢？上文中也提到，為了建立視覺(jué)焦點(diǎn)需要產(chǎn)生對(duì)比關(guān)系，所以定了最上方的塊最大，然后下面2個(gè)相對(duì)小點(diǎn)的塊組成，形成一個(gè)大小關(guān)系的對(duì)比，然后我們?cè)偃フ?個(gè)手表的圖片素材進(jìn)行分別填充3個(gè)塊；

 

 

先來(lái)處理最上面大banner：

 

 

為了繼續(xù)增強(qiáng)對(duì)比，把底色調(diào)整為黑色，然后把其中一個(gè)手表素材摳圖置入其中，巧妙利用手表指針的方向性指示來(lái)進(jìn)行視覺(jué)引導(dǎo)。

 

這里手表素材僅保留其特寫(xiě)細(xì)節(jié)部分，大膽地再繼續(xù)加強(qiáng)對(duì)比（使大的點(diǎn)變得更大），這樣視覺(jué)更具張力，使人更印象深刻。

 

 

然后再把另外兩個(gè)手表的素材，根據(jù)其外型結(jié)構(gòu)特征分別置入下面兩個(gè)塊，這里面隱形的“線條”正巧妙地起到視覺(jué)引導(dǎo)的作用。

 

  

 

四. 配圖色彩的引導(dǎo)

 

整體去調(diào)整各配圖的色彩，提取其中突出的顏色（產(chǎn)生大的對(duì)比），讓用戶眼睛主動(dòng)跟隨色彩，從而引導(dǎo)快速獲取信息。

 

圖①、圖②：均提取配圖中突出色彩作為引導(dǎo)，用戶眼睛會(huì)不自覺(jué)地跟隨主要色彩進(jìn)行移動(dòng)瀏覽，既確保了瀏覽的舒適度，亦使網(wǎng)頁(yè)統(tǒng)一了色調(diào)、風(fēng)格。

 

 

圖③、圖④：另外還可以采用不同顏色的色塊來(lái)產(chǎn)生強(qiáng)烈對(duì)比，使用戶眼睛跟隨這些色塊進(jìn)行瀏覽，也使畫(huà)面增色不少。

 

 

 

這個(gè)案例我們先來(lái)看看最終的成品：

 

 

此案例不僅利用不同色塊進(jìn)行引導(dǎo)，而且還利用模特的動(dòng)作造型動(dòng)作作為視覺(jué)引導(dǎo)，用戶的眼睛會(huì)隨著左右放置的色塊從左往右、由上至下進(jìn)行跳躍式閱讀，模特破格出畫(huà)面的設(shè)計(jì)也讓整個(gè)設(shè)計(jì)動(dòng)起來(lái)，更為有趣。

 

下面來(lái)詳細(xì)地分析一下：先來(lái)看看找到的素材原圖；

 

 

從圖片中模特的衣著，提取出以下顏色；

 

 

先把布局版式排好，然后把模特素材按上文提到的“配圖模特動(dòng)作、眼神引導(dǎo)”按照一定規(guī)律大致放置，看下是否視覺(jué)引導(dǎo)是否正確，還有是否有具有美感。

 

（小貼士：通常我們?cè)谧鎏岚笗r(shí)候總會(huì)擔(dān)心購(gòu)買(mǎi)了素材，若最終效果不滿意豈不是浪費(fèi)，這樣先把小圖大致放到版式中比對(duì)確定好大方向是最好的解決方法）。
 

 

 

然后，我們把所有人物素材摳好，控制好模特與對(duì)應(yīng)色塊的位置、面積關(guān)系，并統(tǒng)一調(diào)色。（模特素材做破格出畫(huà)面的設(shè)計(jì)，既活躍了畫(huà)面氛圍，亦更好的進(jìn)行視覺(jué)引導(dǎo)）。

 

 

五. 配圖的心理暗示

 

配圖的內(nèi)容總會(huì)給人產(chǎn)生不同的心理暗示，結(jié)合電影里蒙太奇手法，進(jìn)行配圖，能巧妙地做出能讓客戶過(guò)稿的設(shè)計(jì)。

 

我們先來(lái)看以下一組圖，同時(shí)采用同一個(gè)面無(wú)表情的模特，再分別與三個(gè)不同的配圖放到一起：

 

 

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

 

 

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

 

 

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

 

通過(guò)上面3組圖，我們可以看出不同圖片的搭配，可以使人產(chǎn)生不同的感受，那么怎樣將其應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中？請(qǐng)往下看：

 

圖①：利用多組具有連續(xù)關(guān)聯(lián)性的配圖（模特臉部特寫(xiě)，舞者全身，練習(xí)場(chǎng)景、服裝特寫(xiě)等），讓用戶有著猶如觀看電影般的感受，既通過(guò)配圖作為信息傳達(dá)的引導(dǎo)，亦表現(xiàn)出芭蕾舞者的專業(yè)。

 

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

 

 

 

這里引入一個(gè)比較接地氣的案例，我在做某個(gè)網(wǎng)頁(yè)設(shè)計(jì)提案時(shí)候的一個(gè)小彩蛋。

 

 

可能大家第一眼看，這版設(shè)計(jì)整體并沒(méi)有什么大問(wèn)題，確定？

 

設(shè)計(jì)之初，banner的城市與立交橋的視覺(jué)引導(dǎo)確實(shí)是比較巧妙，使用戶更好地把視線移向內(nèi)容信息，同時(shí)這樣的素材搭配也非常符合題材。

 

心想，這肯定一稿過(guò)，升職加薪，當(dāng)上設(shè)計(jì)總監(jiān)，出任ceo，迎娶白富美，走上人生巔峰，想想還有點(diǎn)小激動(dòng)。

 

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

 

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

 

 

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

 

汽車(chē)素材的搭配結(jié)合，雖然只是小小的改動(dòng)變化，導(dǎo)致的結(jié)果便大大的不一樣了。

 

 

一方面汽車(chē)頭的方向，迎面而來(lái)：暗示著這是一個(gè)“上坡路”，完美解決了客戶提出“下坡路”的刁鉆問(wèn)題；另一方面，汽車(chē)與立交橋的配合更有了一個(gè)準(zhǔn)確的方向指示，視覺(jué)引導(dǎo)更明顯了。

 

 

綜合這5點(diǎn)配圖技巧，再來(lái)一個(gè)綜合的案例演示：

 

 

這是一個(gè)跟大數(shù)據(jù)有關(guān)的公司官網(wǎng)，首先我們根據(jù)客戶提供的文案、資料，進(jìn)行大致的布局排版。

 

再根據(jù)品牌色來(lái)定主體配色風(fēng)格，同時(shí)以紅色為點(diǎn)綴色作為“點(diǎn)”，進(jìn)行視覺(jué)上的引導(dǎo)，這樣用戶在瀏覽網(wǎng)頁(yè)時(shí)可以跟隨紅色“點(diǎn)”的部分進(jìn)行跳躍式閱讀。

 

 

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

 

 

對(duì)圖片素材進(jìn)行整體的調(diào)色，可用PS或者LR（這個(gè)根據(jù)自己的使用習(xí)慣）,整體調(diào)色風(fēng)格偏電影感，讓藍(lán)色更顯通透感。

 

 

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

 

圖①男模特看著電腦的數(shù)據(jù)圖；

 

圖②模特手按鍵盤(pán)；

 

圖③女模特看著電腦的數(shù)據(jù)圖。

 

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

 

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

 

 

 

沒(méi)錯(cuò)，站酷海洛也能找到完成度極高的整套圖標(biāo)素材，當(dāng)然不能就這么直接使用，也需要結(jié)合該項(xiàng)目的品牌顏色加以修改調(diào)整即可，紅色的部分，既包含了品牌色，也呼應(yīng)了版面的紅色部分來(lái)進(jìn)行視覺(jué)引導(dǎo)，更好抓住用戶視線。

 

 

再把其他3個(gè)圖片素材置入“公司動(dòng)態(tài)”中，圖片之間形成一條無(wú)形的“線條”進(jìn)行視覺(jué)引導(dǎo)，這樣整體搭配舒適富有美感，極具流暢性。

 

 

最終完成頁(yè)面：

 

 

 

最后總結(jié)：

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)中配圖其實(shí)并不是我們想象中那么復(fù)雜，只有我們合理地靈活運(yùn)用以上五點(diǎn)技巧（利用配圖建立視覺(jué)焦點(diǎn)、配圖模特的動(dòng)作、眼神引導(dǎo)、配圖中隱形“線條”的引導(dǎo)、配圖色彩的引導(dǎo)、配圖的心理暗示），舉一反三，便可延展出更多新的形式。

 

希望大家通過(guò)這五點(diǎn)總結(jié)，能更好地運(yùn)用到自己的作品中，快速滿足日常商業(yè)工作中的視覺(jué)設(shè)計(jì)。

 

 

作者：梁敏亮