說在前面：

在上家公司工作的時候，發現有些設計上的朋友會有困惑，有時不知道從何下手去做一個店鋪首頁，總是停留在抄襲別家店鋪的階段，一直無法突破。后來，就想總結一下個人的經驗，一直沒時間寫，現在終于碼字碼上來了。以下也有很多不足之處，僅代表個人的經驗，不喜勿噴哦~

------------------------------------------------------------------------------------------

下面，我們先來看兩張淘寶上的海報（如有原作者看到請見諒，僅僅是技術交流，無抨擊之意）

從元素、排版、配色上講一下這張海報存在哪些問題：

1、背景的選擇無依據。根據背景顯示應該是找了一張餐廳的背景，那么與產品本身并沒有什么聯系，即不是表達的產品的食用場景，也不是從產品本身的賣點出發，所以這張背景的選擇是欠斟酌的。其次，背景的顏色太花，色調不統一，這樣就會打亂整個畫面的調子，這也是沒有注意到的。

2、產品的視角與背景的視角不符合。產品是仰角拍攝的，而找的背景卻是平視的背景，視覺上就產生了錯亂，消費者看到后第一反應自然是不舒服。

3、文字排版無規則，造成空間浪費。文字的排版要講究以點成線、以線成面的原則，而上圖只是打了兩行字，也無重點側重。再者文字的配色也是有問題的，先不講字體的選擇是否合理，單第二行文字的配色就超過了三種，真是亮瞎了我的鈦合金雙眼。

由于我膽子小，擔心選的問題海報太多，被原作者們追著打，下面還是給大家分析一下優秀的海報作品吧。

這么一對比，是不是瞬間覺得這張海報簡直太**“高大上”了？

1、色調統一，采用的是手繪風格的背景元素，模特圖片的融合上也毫無違和感

2、左右排版，對稱統一又不失變化，請注意上圖左邊的兩顆小樹和右邊的單棵小樹，作者在這故意做了一些變化，用數量的變化來增加了畫面的韻律感。

3、元素的視覺引導，右邊的那只小鳥嘴巴所指向的位置，正是海報中需要突出的促銷賣點，合理的對消費者進行視覺引導，突出重點。

好了，聽我BB了這些，是不是也該講點干貨了呢？下面我們進入主題：“如何做出高大上的天貓店鋪首頁”

我個人總結了以下五點：

一.定基調二.分塊面三.定元素四.找素材五.整體制作

一.定基調

1、決定整體頁面色調，根據節點、主題來制定首頁的色調（什么節點用什么顏色這類基礎的就不贅述了），更具整體色調再進行拓展相近色，而不是任意去使用色彩。

2、小習慣:可以在軟件中畫出已經定好的色塊放于最頂上，從明度漸變上制作3-5個色塊，以便隨時吸色填充，也可定義到顏色庫中，個人比較喜歡放于頁面上，為什么這么做呢？這樣比較方便(懶而已~)。

3、合理的利用補色（即為輔助色）豐富畫面，補色的用處從字面上理解的話即為補充顏色、豐富色彩。色調既要統一，又要有變化。消費者在瀏覽頁面的時候，如果色調過于統一，就容易使其產生視覺疲勞，找不到重點。這時候就需要我們對其進行引導，突出重點，補色的用處就來了。在畫面中，主色調可以占70%，然后加上30%的補色（科學的來說），實際情況更具畫面而定。

（對照著色環看是不是更容易理解了呢？）

二.分塊面

（黃金分割比例是不是又忘了呢？幫助大家復習一下~）

1.店招是150px的高度，天貓的上框架在200px，首焦的高度控制在750px以內為佳，最大不超過一屏的高度910px。

2.優惠券常規的尺寸高度在150px，也可根據畫面風格決定高度， 盡量去嘗試不同的形狀和排版。(人都是視覺動物，注意點永遠會停留在差異化、突出的焦點之上，所以就需要我們對優惠券或是其它模塊時不時的進行一些變化，突破之前的死板的形式，這樣才會吸引到消費者的目光)，產品在一屏中出現兩行為佳，多則亂，少則空。

三.定元素

設計頁面時候元素多則不易，在于精。

根據主題進行思維拓展，聯想與頁面主題相關的元素。開始的時候，可以先打個草稿，寫出相關的名詞，多多益善，然后結合頁面設計的實際情況，進行取舍，然后再深入刻畫。

四.找素材

素材可以是一張很小的圖，也可以是PSD的，也可以是百度上的右擊復制，當然還可以是其它店鋪的截圖。

五.整體制作

關鍵是如何把素材和自己的頁面結合，讓他們融進自己的作品，這里就需要我們平時的積累和所下的功夫了。摳圖、模糊、調色、混合選項、透明度等等，這時候考驗的就是一個設計師如何綜合去運用自己所掌握的技能了，不要嫌麻煩，多花時間去試，就會有意想不到的效果。

好吧，碼字真的挺累的，先分享這些吧，有人喜歡聽我BB的話，下回咱再繼續哈~