網(wǎng)頁配圖之道：首圖的設(shè)計技巧

內(nèi)有大部分設(shè)計師稱之為Banner，但我的概念中Banner圖還是一條長長的橫幅廣告。國外的設(shè)計師把首圖成為Hero圖，Hero字面意義也就是英雄，但直接叫英雄圖片恐怕帶來誤解，不如叫首圖。首圖，地位第一，又位于首頁，意思直達，大家能理解就好。

大概很多設(shè)計師其實已經(jīng)覺察到了，網(wǎng)頁設(shè)計做得好不好，除了網(wǎng)頁本身的布局、配色以外，很大程度上依賴的是配圖的運用技巧。但是就算將千辛萬苦淘來的好圖往網(wǎng)頁上一攤就完事，恐怕也難取得巧妙地效果。因此，如何設(shè)計首圖，又是網(wǎng)頁設(shè)計之中一個非常重要的問題。為此，我們就此特獻出八條設(shè)計技巧，全是來自實際經(jīng)驗，以期和大家共同探討之。
一、雙色冰淇淋漸變
首圖當作全屏出血大圖處理時，你可以將圖片調(diào)色成為雙色漸變，有點像我們吃的雙色冰淇淋球，選一組你認為能激發(fā)心理氛圍的配色，最好是對比色，帶來強烈的視覺落差。由于要作為背景而存在，整體的色彩明度要區(qū)別于文字的顏色。這里推薦的這一方式只需要利用PS中的“漸變映射”工具，就能輕松獲得。
我們不僅采用了這種雙色映射，還利用線條創(chuàng)造了視覺焦點，引導了用戶的視線。
二、線條引流
沒錯，延續(xù)上一個例子所用的方法，這也不失為一種首圖設(shè)計方式。在首圖中讓線條來引導實現(xiàn)去穿越你想要焦點停留的地方。
重點是模特和文字，因此，我們采用了9這個數(shù)字的線條方向，利用這個線條的環(huán)繞運動，最后從上至下游走過文字。這里的心理預期是要把9筆畫完成，因此你沒有可能跳過文字。
三、動態(tài)情景
對于首圖的選擇，你可以焦距到動態(tài)場景。這類動態(tài)場景由于本身模特的動態(tài)造型，會調(diào)動觀眾的運動神經(jīng)，激發(fā)頁面的活力。
大家可以想象，如果將上圖的主角換成一個靜物，效果將是不同的。這里將模特的方向加以改變后重新降低透明度的做法，帶來一定的虛實結(jié)合的感受。
四、謹慎配色
我們希望大家在運用首圖時，盡量不要去觸屏普通的風景圖。自然風光雖然好，但大片風景會表現(xiàn)出一團飽和的顏色堆疊，其實運用在網(wǎng)頁中略顯得沒有重點。因為你要為最終配圖運用以后所出現(xiàn)的顏色負責，色彩盡量控制在三種顏色之內(nèi)，這條道理相信設(shè)計師們都會贊同，因此，這里的配圖的色彩最好也能有所節(jié)制。
如這個設(shè)計中，整個圖片都呈現(xiàn)大片灰白，其實正是對顏色進行管控的技巧。當然你也要來個大花襖也無傷大雅，關(guān)鍵是運用時除了要注意元素的色彩，還要對首圖的色彩本身也足夠警惕。
五、虛擬現(xiàn)實
當然，我們這里談的不是虛擬現(xiàn)實（VR），而是在首圖設(shè)計時，試著將靜物表現(xiàn)得更為“現(xiàn)實”，好像它們就在你的屏幕上，隨手可以取到。但這個表達法，最緊要的是要為虛擬尋找出口，也就是說，不能完全寫實，要讓用戶看出虛擬的破綻，從而讓形象更為立體。這類表達技巧在首圖中有手機，利用APP產(chǎn)品展示等最為常見。
這是我們今年出的一款開源的輕移動口袋雜志，展示這個設(shè)計的時候，我們就運用了虛擬現(xiàn)實的設(shè)計方式，增加背景圖案，并讓咖啡和太陽鏡作為一種“休閑”的視覺提示物件，讓用戶能感受到它們的現(xiàn)實的同時又能從背景中看出“破綻”。
六、文字本身的美
每張首圖也許我們都希望能配上文字，其實文字本身也能成為一種風景，有時候適當運用一些具有圖像風格的文字，更能傳遞文字本身的能量。
如果能將文字看作圖像，書法文字是最合適不過了。書法本身的隨意瀟灑，和普通的印刷字體相比有著不可比擬的個性感。這里，運用了書法作為主角，本身書法作為傳統(tǒng)國粹，在東方傳統(tǒng)的行業(yè)里運用非常應景。當然，這里的書法本身還可以寫得更好。
七、靜止的力量
對稱能帶來一種莊重靜止的力量，因此，在首圖設(shè)計中，你不妨采用對稱的布局方式來設(shè)計首圖。但由于對稱本身略顯得靜止呆板，因此在設(shè)計上更需要多一些匠心，增加一些比較能突破規(guī)則小細節(jié)。
對稱的布局最好采用倒三角的構(gòu)圖，這樣視線會更靈活，從上往下會顯得更流暢，否則就會有一種滯澀不前的感受。
八、左圖右文
首圖的設(shè)計除了全屏展示，還有一種方式是可以放左邊圖片右邊文字的方式，這樣的設(shè)計技巧帶來的好處就是可以分割圖文，特別在圖片信息也同樣重要的時候，如果把圖文混合，雙方都不夠凸顯，不如左右各凸出主角，跟隨先左后右的視線也能傳遞本身的視覺效果。

左右結(jié)構(gòu)的傳達效果更為清晰明確。你不會錯過圖片中美食的細節(jié)，也不會忽略文字的描述。色彩是鮮艷欲滴的橙色，食物和文字背景渾然一體。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標簽：Banner圖設(shè)計,創(chuàng)新互聯(lián),重慶網(wǎng)站建設(shè),成都網(wǎng)頁設(shè)計,成都網(wǎng)站設(shè)計

分享標題：網(wǎng)頁配圖之道：首圖的設(shè)計技巧
當前URL：http://www.muchs.cn/news33/169633.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站制作、品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、響應式網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)