大家好，最近想寫(xiě)關(guān)于美工的一系列專題，還望大家多多捧場(chǎng)。O(_)O哈哈~

【導(dǎo)讀】：

一個(gè)成功的專題頁(yè)面，大部分會(huì)具有以下幾個(gè)出彩的要素：色彩丶構(gòu)圖丶風(fēng)格創(chuàng)意，細(xì)節(jié)等。一個(gè)頁(yè)面從無(wú)到有，設(shè)計(jì)師需要對(duì)整個(gè)頁(yè)面有全盤(pán)的設(shè)計(jì)和把控，良好的畫(huà)面分割能夠讓用戶第一眼看到這個(gè)頁(yè)面就能被視覺(jué)吸引，甚至不用瀏覽具體內(nèi)容就能了解這個(gè)頁(yè)面的很多信息。同樣的素材，同樣的配色，不同的構(gòu)圖能夠讓頁(yè)面出來(lái)的效果有天壤之別。如果你還抱著一個(gè)專題就是一個(gè)出色的頭圖，下面的內(nèi)容按部就班的填進(jìn)去，那你就OUT了。

好的頁(yè)面構(gòu)圖能夠讓你頁(yè)面更出彩，也能讓你做設(shè)計(jì)更事半功倍。下面，我們就來(lái)看看一些好的專題都是怎么構(gòu)圖的。

1.幾何切割

在現(xiàn)實(shí)生活與自然界中，我們隨處可見(jiàn)幾何圖形的存在，簡(jiǎn)單的三角形丶正方形丶長(zhǎng)方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當(dāng)?shù)漠?huà)面切割能夠給頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感。加入幾根線條，幾個(gè)塊面就能令頁(yè)面起到意想不到的效果。

實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過(guò)復(fù)雜和花哨，一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。

A.簡(jiǎn)單切割

　用一個(gè)形狀或者素材切分整個(gè)頁(yè)面，畫(huà)面瞬時(shí)變得有趣生動(dòng)起來(lái)，內(nèi)容區(qū)域也能得到有效劃分。

　這類構(gòu)圖方式對(duì)內(nèi)容沒(méi)有過(guò)多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來(lái)處理，也是現(xiàn)在專題頁(yè)面用得最多，最普遍的一種構(gòu)圖方式

B.對(duì)稱切割

這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對(duì)立關(guān)系的情況下，比如說(shuō)：對(duì)戰(zhàn)，男女，冷熱等等。頁(yè)面一分為二，內(nèi)容劃分明確也更加具有視覺(jué)沖擊力。

C.組合切割

集中而規(guī)律的排列，從整體上抓住人們的視覺(jué)。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專題，例如示例中的幾個(gè)功能點(diǎn)和分類，都是屬于同一級(jí)的內(nèi)容，所占的比例也相同，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意

D.多重切割

不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，不規(guī)則的構(gòu)圖方式，避免了畫(huà)面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來(lái)的視覺(jué)效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感，科技感，與鋒利感覺(jué)的專題，例如時(shí)裝，家電，以及游戲戰(zhàn)斗類的專題等等

2.主體輪廓

　活動(dòng)的專題年年做，沒(méi)有新意，想更與眾不同？那就這樣處理吧，根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個(gè)邊界或外形線，形成一個(gè)大的輪廓，將專題內(nèi)容

巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁(yè)面更有設(shè)計(jì)感，生動(dòng)且活潑。需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化，加以強(qiáng)調(diào)突出，主體不需要太具象，舍棄一些繁瑣的丶次要的元素，以免影響用戶閱讀內(nèi)容。從個(gè)人經(jīng)驗(yàn)來(lái)說(shuō)，小懶一般會(huì)在拿到需求的時(shí)候先進(jìn)行腦暴發(fā)散聯(lián)想，提取出一些有用的信息，再?gòu)闹刑暨x出適合元素去尋找一些圖片，通過(guò)圖片素材來(lái)激發(fā)創(chuàng)意

這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確以及具象，能夠用物品或輪廓直接代表，比如:中秋可以用月餅丶玉兔；會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來(lái)進(jìn)行嘗試

3.放射及透視

通過(guò)整體放射狀加透視構(gòu)圖，使畫(huà)面呈現(xiàn)立體與空間感，視覺(jué)焦點(diǎn)明確，畫(huà)面沖擊力強(qiáng)，富有動(dòng)感。需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會(huì)較多的使用這種構(gòu)圖，突出動(dòng)感

4丶整體場(chǎng)景

專題內(nèi)容不多，要突出趣味性，又怕用戶無(wú)聊，那就設(shè)計(jì)成一副美妙的插畫(huà)吧！讓用戶迅速置身在搭建的場(chǎng)景中，帶動(dòng)情緒，參與互動(dòng)，直觀獲取有用信息。這種處理方式會(huì)使頁(yè)面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁(yè)面氛圍當(dāng)中。不過(guò)需要注意的是場(chǎng)景搭建對(duì)素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會(huì)搭配動(dòng)畫(huà)一起實(shí)現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候，對(duì)專題內(nèi)容頭腦里要有畫(huà)面感，先搭建大的畫(huà)面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容，切記場(chǎng)景不要搶了內(nèi)容的視覺(jué)焦點(diǎn)，在適當(dāng)?shù)臅r(shí)候做些減法

5.流程圖

　如果你拿到的專題是漸進(jìn)以及流向又或者是展示各節(jié)點(diǎn)的內(nèi)容，用別的形式總感覺(jué)不夠具象，那何不干脆做成一個(gè)個(gè)性化的流程圖？俗話說(shuō)，千言萬(wàn)語(yǔ)不如一張圖，專題運(yùn)用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系，各個(gè)節(jié)點(diǎn)以及整體流向展示清楚，配合圖片展示，一個(gè)枯燥的流程瞬間變得個(gè)性十足，用戶瀏覽簡(jiǎn)單又明了，并且充滿了趣味性

在網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越注重個(gè)性丶趣味性以及視覺(jué)沖擊力的今天，專題頁(yè)面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見(jiàn)的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點(diǎn)也不盡相同，上面列舉出來(lái)的方法也可以搭配使用，在拿到需求的時(shí)候，先不著急下手，構(gòu)思的時(shí)候可以大膽嘗試，考慮內(nèi)容和風(fēng)格，先確定構(gòu)圖，再往里面添加內(nèi)容，充分考慮到內(nèi)容的排版，盡量做到讓一個(gè)專題有大創(chuàng)意的同時(shí)又具有小細(xì)節(jié)，實(shí)現(xiàn)整體形式感的完美和諧的統(tǒng)一。

總結(jié)：所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫(huà)面相應(yīng)的區(qū)域，形成視覺(jué)感受，達(dá)到設(shè)計(jì)意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候要注意在追求創(chuàng)意構(gòu)圖的同時(shí)也別影響到用戶閱讀內(nèi)容

很多新手剛剛轉(zhuǎn)入電商設(shè)計(jì)這一行業(yè)的時(shí)候，總是苦惱如何開(kāi)始自己的設(shè)計(jì)生涯，不知從何下手，是先學(xué)技術(shù)，理論還是直接實(shí)操，反正從哪一方面都覺(jué)得自己無(wú)從下手，想成為一個(gè)好的美工，好的設(shè)計(jì)師，有這個(gè)決心就被一道無(wú)形的墻堵住了自己的前路。別擔(dān)心，下面我們就一起來(lái)理清一下思路，告訴你如何快速走進(jìn)設(shè)計(jì)之路。

首先，我想先和大家說(shuō)一下，思維方式永遠(yuǎn)都是我們致勝的關(guān)鍵所在，如果你還不會(huì)思考，那么先學(xué)會(huì)思考就是你的首要任務(wù)。你一門心思的想要做好，太過(guò)雜亂的思維往往會(huì)帶你走入一個(gè)無(wú)法走出的困境，于是有人去了去了培訓(xùn)班，但是說(shuō)實(shí)話，效果真的不會(huì)很大，培訓(xùn)班所能教你的只是一個(gè)技術(shù)，如果你不是學(xué)美術(shù)專業(yè)出身，那么僅僅去了培訓(xùn)班，你所設(shè)計(jì)出來(lái)的東西往往也是差強(qiáng)人意，而且培訓(xùn)班的價(jià)格真的是不敢恭維。所以，在我們開(kāi)始設(shè)計(jì)之前，我們先來(lái)理清一下我們的思路，這樣你才能做得更好，就跟我們接下來(lái)所要講的構(gòu)圖方法也是一樣的，如何從模仿別人的設(shè)計(jì)開(kāi)始自己的設(shè)計(jì)生涯，這就是你入行電商設(shè)計(jì)的一個(gè)捷徑。下面我們就一起來(lái)分析一下吧：

我們來(lái)理解一下思路，為什么我會(huì)這樣說(shuō)呢？我們先從一個(gè)好的設(shè)計(jì)是如何構(gòu)成的去分析我們?nèi)脒@一行需要走的路有哪些，如下圖：

Sonice!看到上圖的時(shí)候，你的感觀是不是觸動(dòng)了，就像是看到了一個(gè)黑長(zhǎng)直的美女一樣，叫你忍不住的想多看一眼！那么，美女美在哪里你應(yīng)該知道吧？如果你不知道，那只能說(shuō)你真的瞎了，雖然每個(gè)的眼光都不一樣，但是共同的美的感觀肯定還是存在的，那么我們就一起來(lái)分析一下吧，上圖如此高大上是怎么做到的！

通過(guò)上圖我們可以看到的一個(gè)設(shè)計(jì)可以分為幾個(gè)元素組成：

?產(chǎn)品，就是你要圍繞著它為主題來(lái)設(shè)計(jì)的東西，是整個(gè)設(shè)計(jì)的主心骨（當(dāng)然這個(gè)不一定，主次關(guān)系，可能因?yàn)椴煌男枨髞?lái)把控，但是我們首先把它定位在第一位先）

?背景，背景就是為了襯托出產(chǎn)品的價(jià)值，以為整個(gè)設(shè)計(jì)的氛圍的一個(gè)元素，它是整個(gè)設(shè)計(jì)中好像最不顯眼卻最重要的一個(gè)元素，也是讓人非常頭疼的一個(gè)東西，但是你記住，它終究是配角，不能讓它占了主人的位置

?顏色，在電商設(shè)計(jì)中，顏色可以說(shuō)是重中之重，它是體現(xiàn)一個(gè)設(shè)計(jì)水平的重要條件，因?yàn)轭伾珟в懈星椋苡绊懭说那榫w，所以如何用色，如何布局顏色也是一個(gè)重要的課程

?排版，一個(gè)好的排版，能讓人的視覺(jué)得到舒緩，不易疲勞，且看起來(lái)很舒服，所以一個(gè)好的排版也是構(gòu)成一個(gè)好設(shè)計(jì)的重要元素之一

?感情，這個(gè)概念有點(diǎn)模糊，上面我們也說(shuō)了，顏色可以影響我們的情感，但是我為何要分開(kāi)這一部分來(lái)說(shuō)呢？因?yàn)楦星槌祟伾膺€有另外一層的意思，下面我們就會(huì)講到。

現(xiàn)在我們來(lái)總結(jié)一下如何去入行電商設(shè)計(jì)：

首先實(shí)操就是必不可少的，其次就是理解設(shè)計(jì)的一個(gè)思路，（今天我會(huì)把模仿構(gòu)圖講完，請(qǐng)大家耐心看完），然后我們必須要掌握的設(shè)計(jì)基礎(chǔ)技能（有很多人說(shuō)，技能那么多，我應(yīng)該從何學(xué)起，那么你平時(shí)練習(xí)就必不可少了，不知道從何學(xué)起，就從模仿人的設(shè)計(jì)開(kāi)始，哪個(gè)效果不會(huì)就在網(wǎng)上找教程，及時(shí)練習(xí)即時(shí)學(xué)就是提升最快的一種方式，平時(shí)多交流，分享自己的心得，有助于你提高自己的能力），必須要掌握色彩理論，還有構(gòu)圖的技巧。

總之一句話，如果你真的不知道應(yīng)該怎么辦，那就先去模仿別人的設(shè)計(jì)，什么不會(huì)就現(xiàn)學(xué)什么？現(xiàn)在網(wǎng)絡(luò)傳播如此強(qiáng)大，基本上想學(xué)的東西都應(yīng)有盡有，放開(kāi)你的心來(lái)去做吧，別怕自己設(shè)計(jì)的東西不好，都需要一個(gè)過(guò)程，慢慢就會(huì)好了。

下面我們就來(lái)分析一下，如何時(shí)去模仿一個(gè)好的設(shè)計(jì)，我們還是拿上圖來(lái)分析一下：

首先我們要正確理解一下，我們說(shuō)的模仿不是讓你抄，其實(shí)是讓你理解，其實(shí)我們抄的只是作者的想法，用色關(guān)系和布局，而不是叫你完全的把它抄下來(lái)，那么我一起來(lái)看一下下圖:

首先整個(gè)圖的設(shè)計(jì)，我們先來(lái)大概的分析一下，是一件夏天穿的圓點(diǎn)連衣裙，主題是波爾卡圓，輕松感，那么我們很快就可以發(fā)現(xiàn)作者需要突出的一個(gè)氛圍就是輕松感。

由于是現(xiàn)在是夏季，所以藍(lán)天白云打造的氛圍是最好不過(guò)的一個(gè)輕松氛圍了，于是剛好黃色與藍(lán)色成對(duì)比色，這樣黃色就容易突出了，產(chǎn)品的視覺(jué)點(diǎn)也就有了，于是背景用藍(lán)色，但是我們來(lái)看看，如果大面積的使用藍(lán)色的話，肯定會(huì)造成一個(gè)視覺(jué)疲勞，太刺眼了，我們想像一個(gè)藍(lán)天白云是什么樣子的？

當(dāng)我們想到藍(lán)天的時(shí)候，白云總是不可缺少的一個(gè)元素之一，如果單單只有藍(lán)色，肯定會(huì)造成的我們的視覺(jué)疲勞，所以我們用白色來(lái)輔助一下的話就會(huì)達(dá)到更好的效果，而且還能營(yíng)造出靜謐輕松的感覺(jué)來(lái)，所以我們看到上圖使用了比較大面積的白色來(lái)襯托藍(lán)色。

我們來(lái)理清一下配色思路，因?yàn)楫a(chǎn)品（這里我要把產(chǎn)品看作是坐在椅子上的模特）本身橙色與黃色占的面積較大，所以取了藍(lán)色大面積來(lái)壓制一下，同時(shí)作到一個(gè)突出的效果，由于藍(lán)色太刺眼，而且我們需要營(yíng)造一種輕松的氣氛，所以通過(guò)藍(lán)天白云的構(gòu)想，使用白色(略帶點(diǎn)粉)玫瑰來(lái)點(diǎn)綴背景，使藍(lán)色與白色結(jié)色營(yíng)造出輕松的氣氛。

那么我們?cè)谂渖臅r(shí)候，我們也可以通過(guò)這一種思路來(lái)進(jìn)行配色，首先取我們首要突出的顏色，然后對(duì)其進(jìn)行分析，得出我們需要用到的其它顏色。

接下來(lái)我們來(lái)看設(shè)計(jì)的布局，通過(guò)上面的布局，我們可以畫(huà)出一個(gè)布局圖來(lái)：

我把布局用數(shù)字標(biāo)示出來(lái)，也是方便大家理解布局思路，主次突出的順序分別從1-3，所以我們來(lái)看一下，產(chǎn)品在頁(yè)面占的位置大概是占了整個(gè)頁(yè)面的3分，（以黃金分割比例來(lái)說(shuō)，我們大概把內(nèi)容的主次分成3/7，也就是說(shuō)重點(diǎn)和非重點(diǎn)之間的一個(gè)關(guān)系，）我們用一個(gè)比較直觀的圖來(lái)分析一下，其實(shí)這個(gè)圖的布局相對(duì)也是非常簡(jiǎn)單的：

我們?cè)谀７略O(shè)計(jì)的時(shí)候，也可以這樣把內(nèi)容分開(kāi)一下，容易理解一個(gè)設(shè)計(jì)的布局是怎樣形成的，同時(shí)我們平時(shí)有時(shí)間的時(shí)候，也可以把一些好的設(shè)計(jì)拿出來(lái)分析一下布局，并存好檔，這樣當(dāng)我們?cè)谛枰O(shè)計(jì)的時(shí)候，就可以通過(guò)平時(shí)的積累來(lái)豐富我們的設(shè)計(jì)，例：

我們?cè)賮?lái)看一下文案排版，由于需要突出的產(chǎn)品元素是圓點(diǎn)，那么為了突出這一個(gè)元素，他把圓這個(gè)元素融入到了文字當(dāng)中，通過(guò)文字更直面的表達(dá)出這個(gè)元素，于是把字體改用準(zhǔn)圓體并把文字的圓的的正四方改成了一個(gè)加圓，同時(shí)用一個(gè)曲線來(lái)勾勒其形狀，達(dá)到一個(gè)優(yōu)雅的效果，（產(chǎn)品本身的效果就是優(yōu)雅，高貴），所以當(dāng)我們?cè)谑褂米煮w的時(shí)候，要注意與產(chǎn)品的情感結(jié)合在一起，而不是盲目的使用自己喜歡的字體。

剛才我也說(shuō)了，這個(gè)設(shè)計(jì)出發(fā)點(diǎn)是突出夏天的靜謐氣氛，但同時(shí)我們也不能忽略了產(chǎn)品本身的氣質(zhì)，在選取配色的時(shí)候，我們選用了藍(lán)天白云的這個(gè)概念，但是產(chǎn)品是優(yōu)雅高貴系列的，如果我們用白云的話，就略顯調(diào)皮了，所以用了一朵玫瑰花來(lái)代替白云，白中帶點(diǎn)淡淡的粉色，襯托出優(yōu)雅高貴的氣質(zhì)，并用了陰影色來(lái)點(diǎn)綴玫瑰花，增加了對(duì)比與靜謐的感覺(jué)，這里就是我之前所提到的感情元素，例如：

上圖中的綠葉，這樣的一種動(dòng)感效果，帶給我們一種春天的氣息一樣的感覺(jué)，代表了一種純凈美感

圖中的玫瑰花，帶給我們不一樣的視覺(jué)感受，同時(shí)也影響了我們的情感，這其實(shí)主是一種視覺(jué)情感，由靜到動(dòng)的一種引導(dǎo)

聊到這里，我們大概也理清了思路，其實(shí)本文我講得很長(zhǎng)，實(shí)際總結(jié)出來(lái)，也不過(guò)就是一兩句話的事情，重要的還是學(xué)會(huì)從哪些方面去分析一個(gè)好的設(shè)計(jì)。

【總結(jié)】：產(chǎn)品：顏色黑白橙黃（這里我們把椅子也當(dāng)成是產(chǎn)品的一部分）要突出夏天的靜謐的感覺(jué)于是我們得出顏色（采用夏天的天空）藍(lán)色為背景主色，用白色來(lái)輔助產(chǎn)品亮點(diǎn)是波爾卡圓點(diǎn)，于是把字體定位成準(zhǔn)圓體，并對(duì)其進(jìn)行修飾，突出圓點(diǎn)這個(gè)概念元素產(chǎn)品本身是優(yōu)雅高貴的氣質(zhì)，于是我們摒棄了白云這個(gè)元素，改用玫瑰花來(lái)點(diǎn)綴(白色帶點(diǎn)淡粉色的玫瑰花本身就有高貴靜謐的感覺(jué)，再加上陰影的襯托，對(duì)比感覺(jué)使得這個(gè)元素帶來(lái)的感覺(jué)更加直觀)注意留白，來(lái)大家足夠的思維空間來(lái)創(chuàng)造他需要賦予這個(gè)設(shè)計(jì)的情感，別總是把設(shè)計(jì)堆得滿滿的，讓人的眼睛都不知道往哪里放，在看官看到一個(gè)元素后，要給他足夠的空間去思考，創(chuàng)造他自己的情感，千萬(wàn)不能讓他情緒急躁了。

關(guān)于構(gòu)圖這一塊，想說(shuō)的東西太多了，說(shuō)上來(lái)有些長(zhǎng)篇大論的感覺(jué)，可能會(huì)有一些講得不到位的地方，大家看完后，麻煩把自己的感想告訴我一下吧，我看看還有什么要補(bǔ)充和改進(jìn)的，請(qǐng)多多與我交流，我希望大家能我一起共同交流成長(zhǎng)，共同創(chuàng)造出我們行業(yè)的價(jià)值。

下篇會(huì)跟大家來(lái)聊聊色彩搭配丶敬請(qǐng)期待~~