網頁電商設計中的排版套路和技巧有哪些「電商和主播的套路」

四、電商：一切為了轉化率

當我在做公司合伙人的時候就開始接觸電商行業了，當時天貓還是叫“淘寶商城”，所以我的電商設計經驗相對來說較為豐富。電商最注重的往往是轉化率、交易量，這些都是所見即所得的。跟UI設計相同的是，兩者都是數據驅動，但不同點在于電商更注重推銷產品本身，需要的是即時的變現。而隨著市場對于電商品牌的要求越來越高，更多品牌創始人、投資人的品牌意識逐漸增強，而電商已經慢慢從純碎的賣貨轉型到賣品牌了。

案例：潤本

《潤本》品牌已經有超過十年以上的歷史，在天貓母嬰產品中排名前三位。我們首先從品牌角度分析一下，色彩構成部分：綠色是主色調，與近鄰色黃色相搭配，黃色選擇使用偏棕色的金色，從而提升其品質感。為了體現品牌自然、安全的特點，配以大量的白色作為輔助色。

另外，由于《潤本》旗下有幾十個產品，因此在不同的產品上，綠色的使用會有色相、飽和度、明度上的不同，這就是品牌的核心——色彩構成。而這關于品牌色彩構成的核心將會延續到電商設計里。

電商銷售玩法多，而作為設計師我們最主要是要做好以下幾個關鍵的設計。

1、品牌首頁：PC端口是品牌門面工程一般會玩一下視覺與特效，手機端是最主要的流量入口，一般出名的品牌，首頁都有較高的固定流量。設計時主要注意品牌與銷售的相互結合；

2、產品詳情頁：產品落地頁，是最受數據影響的頁面設計之一，一般前三版與后三版流量較大，信息最為重要；

3、產品詳情頁首圖：兩種方向，一種是基于品牌調性，依靠其自身品牌的大流量突出品牌視覺創意或品牌精神，第二種類似于直通車，促銷氛圍較濃；

4、活動頁（品牌團）與相關配套圖片：基于電商平臺的大流量入口，有時需配合平臺或其他合作品牌優化修改設計，注重點在于保持品牌基調的情況下加入大量的促銷效果，留白面積相對較少（移至下文可查看關于留白的詳細說明）。

5、直通車：計費的電商平臺大流量入口，與活動頁配圖類似，根據及時的數據做出視覺與文字上的優化處理。

6、鉆展圖：同樣計費的電商平臺大流量入口，在根據及時的數據做出視覺與文字上的優化處理的基礎上，更偏向于品牌基調的塑造。

電商設計主要注意兩點，第一點是品牌調性，第二點是促銷氛圍，兩點都與平面設計息息相關，大家要記住設計是共通的，所以要學會獨立思考。接下來我們結合“方塊理論”具體的分析一下。

首先是《潤本》的品牌首頁，我們以天貓平臺為例結合”方塊理論”進行分析。主要講述的是天貓平臺的PC端與手機端，而其他端口如ipad等，都是大同小異，這里就不再張開分析了。而在實際工作中，一般情況下我們是先設計PC端，然后在PC端的基礎下設計手機端。這個主要是為了提高工作效率，如果先設計手機端然后再改成PC端相對來說就麻煩一點，因為大尺寸改小尺寸相對來說簡單一點。

以往PC端是電商設計中的重要一環，但是隨著近幾年移動端購物的興起，移動端已經成為了主力，而PC端更多的是扮演著品牌門面工程的角色。從”方塊理論”分析，頂部導航欄次主體方塊B與之前的《彼得的蜜蜂》類似都是以輕為其主要設計思路。

在主體方塊A中主要是左右排版，左邊是產品，右邊是產品文案，這跟之前多個案例類似，主要考驗的是設計師的平面設計基礎。次主體方塊C在視覺上是主體方塊A與次主體方塊D的過渡，而從銷售角度它是能刺激用戶消費的方塊。其他的次主體方塊使用的排版方式在之前的案例都有提及，這里就不再重復講述了，大家具體看一下規劃圖，學會自己獨立思考加以分析。

而手機端的首頁就是在PC端的基礎下作減法，簡明扼要地做出一塊一塊的內容，排版方式跟PC段類似。由于手機端的顯示面積小，所以無論是畫面與字體都要進行多次的測試，調整其大小以達致最好的視覺效果。值得一提的是，PC端與手機端都使用了”方塊理論”中的“技巧與細節”，畫面中多重復、疊加品牌元素，通過葉子前后關系形成景深效果，增加空間感。

產品詳情頁：首先把整體畫面中多個方塊，逐個看成是獨立的方塊，而各個方塊既是獨立的，同時各個方塊也形成了上下互動關系，從色彩構成上分析，整體色調是基于品牌結合銷售為目的而做的，一般情況下，色調需與品牌主色調保持一致。就《潤本》這個例子中，破局在于大量的留白，達致畫面的平衡，另外要注意，頁面長度不要過長，做手機端設計的時候，要進行多手機的測試，要確定其左右邊際的安全范圍，以達致最佳的視覺效果。同時在實際的工作中，建議頁面上線一段時間后，結合實際的運營數據進行優化設計，以達致更佳的銷售效果。

產品詳情頁首圖：兩種方向，一種是基于品牌調性，以自身大流量去出發，第二種做成直通車，促銷效果結合具體數據，優化設計及文案。

活動頁（品牌團與配套圖片）：在基于品牌調性的情況下，作出強烈的銷售效果，配套圖片一般數量較多，所以盡量在前期把其模版化，為后期提高工作效率。具體創意跟平面設計的創意廣告相類似。

直通車：結合數據做出及時的調整，以上有兩個案例，左邊是設計師的第一稿，右邊是結合運營數據優化后的設計，通過運營的數據做出及時的反映，以達致更佳的銷售效果。要時刻記住作品是為品牌服務的，一切都以數據說話，視覺固然重要，但更加重要的是觀察銷售數據上的變化，切忌為設計而設計。

鉆展圖：與直通車相類似，一般情況下同樣是結合數據做出及時的調整，不同的是，有時為了維護品牌調性，并不完全基于數據去優化，但而無論如何多測試也是好事。

總結：電商最重要的是轉化率，吸引用戶點擊，通過視覺刺激消費，基于手機端的頁面不需要太長，必須基于品牌定位而設計。因為”方塊理論”是跟品牌相關聯的，因此在設計的時候需要從品牌角度來分析設計，切忌麻木抄襲他人作品。

五、插畫：色彩美學的極致與平衡

插畫是動漫類別里面的一個類別。它主要有商業插畫、概念設定、兒童插畫、游戲原畫、涂鴉/潮流、像素畫、插畫習作、其他插畫等。

商業插畫是插畫類別中的重要一環，所謂商業插畫顧名思義就是具有商業價值的插畫設計，我早年創作的森林教室系列插畫，最近剛與《潤本》品牌合作推出了一套產品-潤本植物精油防蚊扣，產品一推出市場反應就相當不錯。其實很多時候適當的加入一些插畫元素，能讓品牌變得有趣變得具有生命力，同時它在傳統平面廣告、網頁、UI、電商、品牌等不同的領域都有涉及。

接下來我們主要分析一下“方塊理論”在卡通角色創作這塊的實用性，一般來說我們會把卡通角色看成是一個主體方塊，把背景看成是輔助方塊。主體方塊一般采用絕對對稱與相對對稱方式組成，主體方塊一般由多個小方塊通過對稱、疊加（減）、重復，破局，使其達致平衡。

案例一：no.系列作品

no.1 你可以看到它是由上中下結構的一個個圓形組成的，即花朵、頭部、身體三個部分，圓形中有疊加交錯的部分，圓形之前會有左右對稱，這些都是基礎的技巧性內容。還有其他一些元素，如花朵、手、腳等，都是做成對稱形式的。對稱的好處在于，畫面讓人看上去比較整齊舒服的，缺點是會讓人覺得沉悶，因此需要在畫面中做一些破局。因此在作品中，我會在左右兩邊設計一些不對稱的元素。例如左邊的小旗幟就是為了打破畫面的絕對對稱。插畫作品中的背景是之前所提到的肌理或背景元素，與畫面相結合。這個作品中，no.1的角色設定是害怕閃電的，因此在背景中用對角線的顏色變化制造出閃電的意向。

no.2 是非常平衡的一個作品，破局的地方是人物頭頂上的花朵，頭發也沒有完全對齊。其他的平面構成也是跟no.1是一致的，在這里就不再重復了。背景所用的黃色和藍色，也是使用對角線劃分的，顯得更加生動有趣。

no.3同樣也是左右對稱，但有一些小細節不同。像左上角的圓圈，顏色是藍紅藍，而右邊的圓圈是紅藍紅，這些細微的區別會讓畫面更有趣。故此，我建議你在做插畫的時候，盡量做左右對稱的畫面，然后在細節上做一點點的改變，打破原有的對稱布局，這樣會讓作品更加具有靈氣從而更加平衡。

no.4 跟no.1是有互動關系的，no.1的小旗幟是偏左的，no.4的小圍巾是偏右的，兩者形成了一個對角。另外，no.4衣服上有一個小舌頭也是稍微偏右的，這些都是為了打破絕對對稱的小細節，讓畫面達致平衡有又具有靈氣。

案例二：燈泡仔系列作品

燈泡1號是上下結構的，因為燈泡仔手部動作的原因，畫面中上部是相對對稱的，因此即使底座是絕對對稱，也不會有很沉悶的感覺。

燈泡2號是左右結構的，為了做出那個手部動作，左邊給人感覺是特別重的，而為了打破沉悶達致平衡，在嘴部笑容的細節處理上采用不同顏色區分，線條也是有點不一樣的，因此看上去會覺得這個燈泡比較有趣。

總結：雖然畫畫理論上是很隨意的事情，創作卡通人物時一般使用左右對稱的方式進行造型的創作，而為了打破造型上的呆板，一般情況下我會使用絕對對稱與相對對稱混合使用，加上破局等細節，而無論你使用哪種技巧，最終都是為了達致畫面的平衡。（更多精彩內容請關注我的微信訂閱號：種夢）

六、品牌VI視覺重塑：制定與顛覆

我一直強調，所有作品都是為品牌服務的，在這一部分，我會著重強調思考品牌層面的內容，而不詳細解釋設計執行的細節。當然，在設計執行上，你必須有比較好是設計基礎，才能將品牌的觀點表現出來，否則，就算你有再多的品牌觀點和理論，也是沒有用的。

1、 顛覆

案例一：NESKY

我的原創品牌《NESKY》的顛覆在于色彩與元素的組合。首先從品牌起源來說，有一次我在旅行時，突然就有一個想法：相同的風景和事物，不同的人能看到不同的結果，有的人看到新奇的風景，有的人看到兒時的回憶，有的人看到相愛的痕跡……也許我們可以通過一只大眼睛看到不一樣的世界。《NESKY》品牌就這樣誕生了。

品牌LOGO：跟很多品牌類似的是，《NESKY》的品牌LOGO也是相對對稱的，用不同的圖形疊加而形成。而在品牌主視覺畫面中用了跟《彼特的蜜蜂》相類似的手法，在畫面中把LOGO居中處理，而不同的是它的輔助方塊使用了與品牌相關的原創幾何圖形花朵。

幾何圖形花朵是品牌的一個重要的元素，它與英文字母有機地結合著一起，讓字母充滿了靈氣。26個英文字母加10個數字可以通過組合表達出各種各樣的情感訴求，加上顏色與花朵的有機結合，品牌在色彩與元素的組合是一次顛覆，而這些看似復雜的花朵都是通過“方塊理論”中的重復、疊加等技巧而來，它在品牌所有的視覺表達中都有涉及，例如品牌VI、品牌官網、品牌創意廣告等等。

案例二：豪倫詩

《豪倫詩》是一個地地道道的電商品牌，需求方需要一種高端、男士、商務的感覺。這個品牌是2012年建立的，當時電商平臺的品牌意識相對薄弱，不像現在處處都在說品牌。而就在這時我接手了這個項目，從零開始創立品牌，從品牌的定位開始，一步步地幫它構建起了品牌名稱、品牌VI、品牌主視覺、品牌官網等等。

我們先從品牌LOGO說起：它是絕對對稱的左右結構，雖然比較保守，但是這個是較為符合品牌高端、男士、商務的品牌訴求的。所以建議大家在進行商業化設計時更多的是從品牌角度出發，要清楚了解品牌的定位與訴求，切忌為設計而設計。

另外品牌的主視覺在當時也是下了比較大的功夫。從平面構成上它是，主體方塊與次主體方塊的結合。從色彩構成上它是基于品牌訴求的顏色而來的，使用了較為深色的棕色，與品牌的高端、男士、商務的關鍵字相呼應。在立體構成上分散的物體擁有統一的視平線與視中線，根據前后關系形成了景深效果，為畫面增強了空間感。

總結：無論是個人品牌還是電商品牌，無論是現在與將來想獲得成功，顛覆都需要基于品牌定位而來，清楚了解品牌的訴求后，首先使用“方塊理論”對品牌關鍵字，例如《豪倫詩》品牌中的關鍵字——“商務”進行關鍵字搜索，找出合適的參考，然后在結合自身的品牌屬性，創造出屬于自己的東西。“方塊理論”是跟品牌相關聯的，通過它快速的提高審美能力，找到合適的參考，但切忌不要抄襲，而是根據品牌訴求結合自己的思路把抽象的想法具像化，從而形成品牌獨特的視覺風格與價值觀。

2、 重塑

案例一：彼得的蜜蜂

這個品牌在重塑之前是完全沒有品牌概念的，它只有一個LOGO。在進行品牌重塑的時候，需求方主要的訴求是希望突出“養蜂人”這個概念，自然、安全、簡約、有趣是其品牌關鍵字，通過使用“方塊理論”快速審美，我找到了合適的字體，我使用了名為BREATHE REGULAR與Arial Narrow Regular的英文字體作為LOGO（使用可以免費商業的字體，會減少以后很多不必要的麻煩）。

LOGO在排版上使用了相對對稱的上下結構方式。而本次重塑中最大的亮點在于重新定義了品牌概念，在品牌的視覺表達上成功加入了采蜂人這個概念，并且結合其他相關的原創的品牌元素，應用到了品牌方方面面的視覺中，形成了一個獨特的品牌價值觀。并且得到了相當不錯的市場銷量與口碑。

1、元素的多樣性

在品牌數十個產品包裝與其他設計上，靈活地使用了多種變化的輔助原創元素進行產品的劃分，在細節技巧上采用了重復、疊加、元素、肌理、破局等達致畫面平衡。

2、顏色的多樣性

同樣是為了對產品進行劃分，使用了多種的輔助顏色，為其進一步更加趣味性，這與品牌的概念，自然、安全、簡約、有趣息息相關。

3、顏色的統一性

同樣的對于單個產品來看的話，它會根據系列的顏色而做設計，但也不會背離品牌的主色調。簡單來說，無論系列產品有多少種色調，對于品牌來說，都是輔助顏色，在設計系列作品時，主色調黃色是始終不會改變的。

案例二：潤本

因為這個品牌已經有十年的歷史，很多元素都不能隨意改動，因此我在品牌LOGO上，進行圖形的延伸設計，延伸后的圖形成功應用到了品牌方方面面的視覺中。例如：品牌VI、產品包裝、品牌電商官網、品牌創意廣告圖等等。接下來我會從三點關鍵點分析一下，希望大家能從中得到啟發。

1、關于品牌LOGO的圖形延伸

通過使用“方塊理論”對其進行分析，分析發現它的層級關系特別多，造型特別的復雜，并不適合廣泛使用。發現問題后，我將LOGO最外面的兩層元素去掉，只保留了圓形部分。然后在其基礎上，延伸出了上圖的圖形，延伸出來的圖形很好地補充了LOGO在使用上的不足之處。

2、關于品牌主色調的色彩構成

由于《潤本》旗下有幾十個產品，也因部分產品是中藥成分比較重、或者是針對年紀較大的兒童，因此在不同的產品上，綠色的使用會有色相、飽和度、明度上的不同，這就是品牌的核心——色彩構成。而這關于品牌色彩構成的核心將會延續到電商設計里

3、關于產品包裝的用色問題

《潤本》的包裝設計與《彼得的蜜蜂》有類似的地方，也是相對比較考究的。由于品牌的產品較多，所有在色彩構成上，主要是通過不同深淺的綠色進行產品劃分，深綠色主要是針對中藥草本屬性的產品，淺綠色主要是針對自然健康屬性的產品。值得注意的是，綠色在印刷時，成色特別不穩定，建議要找專門的設計人員前往印刷廠進行對色。還有，潤本產品包裝的背景色，并沒有使用純白色而是使用了淺黃色，這其實是品牌屬性決定的，它與與品牌的主色調綠色是相互呼應的近鄰色。

總結：在案例中雖然我說的兩個都是電商品牌，但是無論是什么性質的品牌，想獲得成功，在重塑的過程中就得注意，什么東西需要去掉，什么東西需要保留，什么東西需要優化，這是一個斷與舍的選擇問題，你可以通過“方塊理論”對其進行系統的快速的分析，找到問題所在。其實“方塊理論”并沒有想象中那么復雜，而且在多個領域上都可以靈活應用。

關于“方塊理論”的補充說明

1、留白與方塊

留白就是設計中最為常用的技巧也是最為重要的技巧之一。而方塊顧名思義就是”方塊理論”的方塊，通過之前的文章與上文，相信大家都已經對方塊有比較深刻的理解了，而什么是留白？為什么要留白？留白與方塊又有什么關系？

·所謂留白，就是為畫面留出靈氣留出空間感，讓畫面能呼吸能聚焦主視覺。而不同的品牌，不同的主題留白的面積互不相同，例如我們熟悉的品牌蘋果，它就喜歡使用大量的留白增加靈氣，而在電商平臺的促銷活動中，大多數品牌都喜歡增加促銷感，而相對地把產品堆滿文字放大，因此留白的面積相對小一些，所以同樣是留白，也有明顯的分別。

·為什么留白？其實道理很簡單，我舉一個生活中的例子大家想象一下，假如你有一套房子，你是希望它東西堆積如山，連工作休息的位置都沒有。還是希望它干凈整潔有空間感，工作休息都各有分區互不干擾，物品排列整理呢？答案已經很明顯了，后者就是我們想要的，而房子正正就是你設計的畫面。

·留白與方塊又有什么關系？我們接著上文的例子說，留白是干凈整潔有空間感，而方塊就是分區的劃分，讓物品排列整齊。通過這個生活中的例子想必大家應該明白兩者的關系了。我再簡單的總結一下，在一個畫面中會出現多處的留白，它是為了畫面留出靈氣留出空間感，讓畫面能呼吸能聚焦主視覺而存在的。它是畫面中“虛”的部分。而在一個畫面中，方塊也許有一個或許有多個，它們之間相互作用，為畫面劃分主次從而達致畫面平衡，它是畫面中“實”的部分。而虛與實的結合并沒有固定的比例，它會根據品牌的調性，活動的主題而定。但無論留白面積多或少，畫面中有多少個方塊，它們最終都是為了達致畫面的平衡而存在的。

2、方塊的主次之分

在”方塊理論”中，主體方塊與它所在的畫面面積并沒有直接關系，大家不要誤以為面積大的就是主體方塊，在一個畫面中主體方塊所指的是畫面中視覺的中心位置。次主體方塊一般是與主體方塊相互作用的，是畫面中的次視覺中心。而輔助方塊一般以紋理（肌理）、小元素居多，大家可以把它看作是房子里面的軟裝部分去理解，它是為了增加畫面氛圍而存在的，大家在使用“方塊理論”對畫面進行分析或者在創作畫面時，務必要明確地找出畫面中的主次輔方塊，這樣才能有助于幫助你創作出更加優秀的作品。