大家好，最近想寫關于美工的一系列專題，還望大家多多捧場。O(_)O哈哈~

【導讀】：

一個成功的專題頁面，大部分會具有以下幾個出彩的要素：色彩丶構圖丶風格創意，細節等。一個頁面從無到有，設計師需要對整個頁面有全盤的設計和把控，良好的畫面分割能夠讓用戶第一眼看到這個頁面就能被視覺吸引，甚至不用瀏覽具體內容就能了解這個頁面的很多信息。同樣的素材，同樣的配色，不同的構圖能夠讓頁面出來的效果有天壤之別。如果你還抱著一個專題就是一個出色的頭圖，下面的內容按部就班的填進去，那你就OUT了。

好的頁面構圖能夠讓你頁面更出彩，也能讓你做設計更事半功倍。下面，我們就來看看一些好的專題都是怎么構圖的。

1.幾何切割

在現實生活與自然界中，我們隨處可見幾何圖形的存在，簡單的三角形丶正方形丶長方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現代審美需求，適當的畫面切割能夠給頁面帶來動感與節奏感。加入幾根線條，幾個塊面就能令頁面起到意想不到的效果。

實現的時候需要注意的是素材不適合太過復雜和花哨，一般會是純色大塊搭配漸變，主要突出形狀和區塊。

A.簡單切割

　用一個形狀或者素材切分整個頁面，畫面瞬時變得有趣生動起來，內容區域也能得到有效劃分。

　這類構圖方式對內容沒有過多要求，可隨意安排。具體排版可根據內容來處理，也是現在專題頁面用得最多，最普遍的一種構圖方式

B.對稱切割

這種構圖方式的前提一般是內容分主要兩部分，并且這兩部分是對立關系的情況下，比如說：對戰，男女，冷熱等等。頁面一分為二，內容劃分明確也更加具有視覺沖擊力。

C.組合切割

集中而規律的排列，從整體上抓住人們的視覺。這種構圖方式適合那種每個區塊中的內容屬于平級關系的專題，例如示例中的幾個功能點和分類，都是屬于同一級的內容，所占的比例也相同，用這種組合的排列能夠保持各內容的關系，也能讓布局更有創意

D.多重切割

不規則的構圖，穩定而銳利，干凈的排版，易于識別，不規則的構圖方式，避免了畫面生硬，不易產生審美疲勞。不同的形狀和排列，呈現出來的視覺效果也不一樣。這種構圖方式使用最多的一般是為了體現時尚感，科技感，與鋒利感覺的專題，例如時裝，家電，以及游戲戰斗類的專題等等

2.主體輪廓

　活動的專題年年做，沒有新意，想更與眾不同？那就這樣處理吧，根據專題的主要內容，從整體上構建一個邊界或外形線，形成一個大的輪廓，將專題內容

巧妙的填充進去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁面更有設計感，生動且活潑。需要提醒的是設計的時候將形狀盡量輪廓化，加以強調突出，主體不需要太具象，舍棄一些繁瑣的丶次要的元素，以免影響用戶閱讀內容。從個人經驗來說，小懶一般會在拿到需求的時候先進行腦暴發散聯想，提取出一些有用的信息，再從中挑選出適合元素去尋找一些圖片，通過圖片素材來激發創意

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

3.放射及透視

通過整體放射狀加透視構圖，使畫面呈現立體與空間感，視覺焦點明確，畫面沖擊力強，富有動感。需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字數量較少的情況下選擇此種構圖。一般游戲激戰類的專題會較多的使用這種構圖，突出動感

4丶整體場景

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

5.流程圖

　如果你拿到的專題是漸進以及流向又或者是展示各節點的內容，用別的形式總感覺不夠具象，那何不干脆做成一個個性化的流程圖？俗話說，千言萬語不如一張圖，專題運用這種構圖方式能夠將步驟，關系，各個節點以及整體流向展示清楚，配合圖片展示，一個枯燥的流程瞬間變得個性十足，用戶瀏覽簡單又明了，并且充滿了趣味性

在網頁設計越來越注重個性丶趣味性以及視覺沖擊力的今天，專題頁面的構圖也已經千變萬化，以上只是列舉出了其中較常見的一部分，不同的主題，不同的內容，構圖排版的出發點也不盡相同，上面列舉出來的方法也可以搭配使用，在拿到需求的時候，先不著急下手，構思的時候可以大膽嘗試，考慮內容和風格，先確定構圖，再往里面添加內容，充分考慮到內容的排版，盡量做到讓一個專題有大創意的同時又具有小細節，實現整體形式感的完美和諧的統一。

總結：所謂構圖就是將表現主題的各個構成要素按照主次關系放置在畫面相應的區域，形成視覺感受，達到設計意圖。所有的構圖方式追根究底都是為內容服務，構圖必須要服從主題表現的要求，設計師在設計的時候要注意在追求創意構圖的同時也別影響到用戶閱讀內容

很多新手剛剛轉入電商設計這一行業的時候，總是苦惱如何開始自己的設計生涯，不知從何下手，是先學技術，理論還是直接實操，反正從哪一方面都覺得自己無從下手，想成為一個好的美工，好的設計師，有這個決心就被一道無形的墻堵住了自己的前路。別擔心，下面我們就一起來理清一下思路，告訴你如何快速走進設計之路。

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

我們來理解一下思路，為什么我會這樣說呢？我們先從一個好的設計是如何構成的去分析我們入這一行需要走的路有哪些，如下圖：

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

通過上圖我們可以看到的一個設計可以分為幾個元素組成：

?產品，就是你要圍繞著它為主題來設計的東西，是整個設計的主心骨（當然這個不一定，主次關系，可能因為不同的需求來把控，但是我們首先把它定位在第一位先）

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

?顏色，在電商設計中，顏色可以說是重中之重，它是體現一個設計水平的重要條件，因為顏色帶有感情，能影響人的情緒，所以如何用色，如何布局顏色也是一個重要的課程

?排版，一個好的排版，能讓人的視覺得到舒緩，不易疲勞，且看起來很舒服，所以一個好的排版也是構成一個好設計的重要元素之一

?感情，這個概念有點模糊，上面我們也說了，顏色可以影響我們的情感，但是我為何要分開這一部分來說呢？因為感情除了顏色外還有另外一層的意思，下面我們就會講到。

現在我們來總結一下如何去入行電商設計：

首先實操就是必不可少的，其次就是理解設計的一個思路，（今天我會把模仿構圖講完，請大家耐心看完），然后我們必須要掌握的設計基礎技能（有很多人說，技能那么多，我應該從何學起，那么你平時練習就必不可少了，不知道從何學起，就從模仿人的設計開始，哪個效果不會就在網上找教程，及時練習即時學就是提升最快的一種方式，平時多交流，分享自己的心得，有助于你提高自己的能力），必須要掌握色彩理論，還有構圖的技巧。

總之一句話，如果你真的不知道應該怎么辦，那就先去模仿別人的設計，什么不會就現學什么？現在網絡傳播如此強大，基本上想學的東西都應有盡有，放開你的心來去做吧，別怕自己設計的東西不好，都需要一個過程，慢慢就會好了。

下面我們就來分析一下，如何時去模仿一個好的設計，我們還是拿上圖來分析一下：

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

首先整個圖的設計，我們先來大概的分析一下，是一件夏天穿的圓點連衣裙，主題是波爾卡圓，輕松感，那么我們很快就可以發現作者需要突出的一個氛圍就是輕松感。

由于是現在是夏季，所以藍天白云打造的氛圍是最好不過的一個輕松氛圍了，于是剛好黃色與藍色成對比色，這樣黃色就容易突出了，產品的視覺點也就有了，于是背景用藍色，但是我們來看看，如果大面積的使用藍色的話，肯定會造成一個視覺疲勞，太刺眼了，我們想像一個藍天白云是什么樣子的？

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

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

那么我們在配色的時候，我們也可以通過這一種思路來進行配色，首先取我們首要突出的顏色，然后對其進行分析，得出我們需要用到的其它顏色。

接下來我們來看設計的布局，通過上面的布局，我們可以畫出一個布局圖來：

我把布局用數字標示出來，也是方便大家理解布局思路，主次突出的順序分別從1-3，所以我們來看一下，產品在頁面占的位置大概是占了整個頁面的3分，（以黃金分割比例來說，我們大概把內容的主次分成3/7，也就是說重點和非重點之間的一個關系，）我們用一個比較直觀的圖來分析一下，其實這個圖的布局相對也是非常簡單的：

我們在模仿設計的時候，也可以這樣把內容分開一下，容易理解一個設計的布局是怎樣形成的，同時我們平時有時間的時候，也可以把一些好的設計拿出來分析一下布局，并存好檔，這樣當我們在需要設計的時候，就可以通過平時的積累來豐富我們的設計，例：

我們再來看一下文案排版，由于需要突出的產品元素是圓點，那么為了突出這一個元素，他把圓這個元素融入到了文字當中，通過文字更直面的表達出這個元素，于是把字體改用準圓體并把文字的圓的的正四方改成了一個加圓，同時用一個曲線來勾勒其形狀，達到一個優雅的效果，（產品本身的效果就是優雅，高貴），所以當我們在使用字體的時候，要注意與產品的情感結合在一起，而不是盲目的使用自己喜歡的字體。

剛才我也說了，這個設計出發點是突出夏天的靜謐氣氛，但同時我們也不能忽略了產品本身的氣質，在選取配色的時候，我們選用了藍天白云的這個概念，但是產品是優雅高貴系列的，如果我們用白云的話，就略顯調皮了，所以用了一朵玫瑰花來代替白云，白中帶點淡淡的粉色，襯托出優雅高貴的氣質，并用了陰影色來點綴玫瑰花，增加了對比與靜謐的感覺，這里就是我之前所提到的感情元素，例如：

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

圖中的玫瑰花，帶給我們不一樣的視覺感受，同時也影響了我們的情感，這其實主是一種視覺情感，由靜到動的一種引導

聊到這里，我們大概也理清了思路，其實本文我講得很長，實際總結出來，也不過就是一兩句話的事情，重要的還是學會從哪些方面去分析一個好的設計。

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

關于構圖這一塊，想說的東西太多了，說上來有些長篇大論的感覺，可能會有一些講得不到位的地方，大家看完后，麻煩把自己的感想告訴我一下吧，我看看還有什么要補充和改進的，請多多與我交流，我希望大家能我一起共同交流成長，共同創造出我們行業的價值。

下篇會跟大家來聊聊色彩搭配丶敬請期待~~