陸續(xù)發(fā)表了關于“方塊理論”的兩篇原創(chuàng)文章《純干貨：我的排版套路——“方塊理論”（初探）》、《純干貨：我的排版套路——“方塊理論”（實戰(zhàn)篇）（上集）》，很多朋友表示看不懂，那么，我需要強調(diào)一下，“方塊理論”是“化繁為簡”的東西，因為這是一個新的理論，所以大家不凡多看幾次，相信慢慢就會了解了。它可以讓設計師把復雜的設計理論，系統(tǒng)地講出來，方便設計師與需求方溝通、讓提案更加得心應手，而它更重要的一點是，可以讓設計師快速地提高設計水平。

PS：歡迎大家踴躍留言，多多交流，大家的留言我都會看，同時也希望大家首先把文章看透了，把理論看明白了，我做設計師十多年，不會隨便分享一篇一萬多字的理論去誤導大家的，也沒這必要，所以還是希望大家發(fā)表留言之前先用心把“方塊理論”的三篇文章都看透了、看明白了，然后我們再好好交流，感謝大家！

接著上集的內(nèi)容，我們繼續(xù)通過不同的案例，繼續(xù)深挖“方塊理論”的實戰(zhàn)能力吧。

四、電商：一切為了轉(zhuǎn)化率

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

案例：潤本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

產(chǎn)品詳情頁首圖：兩種方向，一種是基于品牌調(diào)性，以自身大流量去出發(fā)，第二種做成直通車，促銷效果結(jié)合具體數(shù)據(jù)，優(yōu)化設計及文案。

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

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

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

總結(jié)：電商最重要的是轉(zhuǎn)化率，吸引用戶點擊，通過視覺刺激消費，基于手機端的頁面不需要太長，必須基于品牌定位而設計。因為”方塊理論”是跟品牌相關聯(lián)的，因此在設計的時候需要從品牌角度來分析設計，切忌麻木抄襲他人作品。（更多精彩內(nèi)容請關注我的微信訂閱號：種夢）

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

插畫是動漫類別里面的一個類別。它主要有商業(yè)插畫、概念設定、兒童插畫、游戲原畫、涂鴉/潮流、像素畫、插畫習作、其他插畫等。如果大家有興趣可以看看我之前寫的相關文章：《純干貨：優(yōu)秀動漫插畫師養(yǎng)成記》。

商業(yè)插畫是插畫類別中的重要一環(huán)，所謂商業(yè)插畫顧名思義就是具有商業(yè)價值的插畫設計，我早年創(chuàng)作的森林教室系列插畫，最近剛與《潤本》品牌合作推出了一套產(chǎn)品-潤本植物精油防蚊扣，產(chǎn)品一推出市場反應就相當不錯。其實很多時候適當?shù)募尤胍恍┎瀹嬙?，能讓品牌變得有趣變得具有生命力，同時它在傳統(tǒng)平面廣告、網(wǎng)頁、UI、電商、品牌等不同的領域都有涉及。

接下來我們主要分析一下“方塊理論”在卡通角色創(chuàng)作這塊的實用性，一般來說我們會把卡通角色看成是一個主體方塊，把背景看成是輔助方塊。主體方塊一般采用絕對對稱與相對對稱方式組成，主體方塊一般由多個小方塊通過對稱、疊加（減）、重復，破局，使其達致平衡。（更多精彩內(nèi)容請關注我的微信訂閱號：種夢）

案例一：no.系列作品

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

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

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

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

案例二：燈泡仔系列作品

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

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

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

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

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

1、 顛覆

案例一：NESKY

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

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

幾何圖形花朵是品牌的一個重要的元素，它與英文字母有機地結(jié)合著一起，讓字母充滿了靈氣。26個英文字母加10個數(shù)字可以通過組合表達出各種各樣的情感訴求，加上顏色與花朵的有機結(jié)合，品牌在色彩與元素的組合是一次顛覆，而這些看似復雜的花朵都是通過“方塊理論”中的重復、疊加等技巧而來，它在品牌所有的視覺表達中都有涉及，例如品牌VI、品牌官網(wǎng)、品牌創(chuàng)意廣告等等。（延伸閱讀：《純干貨：是時候開始創(chuàng)立你的個人品牌》）

案例二：豪倫詩

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

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

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

總結(jié)：無論是個人品牌還是電商品牌，無論是現(xiàn)在與將來想獲得成功，顛覆都需要基于品牌定位而來，清楚了解品牌的訴求后，首先使用“方塊理論”對品牌關鍵字，例如《豪倫詩》品牌中的關鍵字——“商務”進行關鍵字搜索，找出合適的參考，然后在結(jié)合自身的品牌屬性，創(chuàng)造出屬于自己的東西?！胺綁K理論”是跟品牌相關聯(lián)的，通過它快速的提高審美能力，找到合適的參考，但切忌不要抄襲，而是根據(jù)品牌訴求結(jié)合自己的思路把抽象的想法具像化，從而形成品牌獨特的視覺風格與價值觀。（更多精彩內(nèi)容請關注我的微信訂閱號：種夢）

2、 重塑

案例一：彼得的蜜蜂

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

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

在之前的原創(chuàng)文章《純干貨：我的排版套路——“方塊理論”（初探）》中，我已經(jīng)把《彼得的蜜蜂》作為案例分析過，接下來我再具體分析幾個關鍵要點，希望大家能從中得到啟發(fā)。（更多精彩內(nèi)容請關注我的微信訂閱號：種夢）

1、元素的多樣性

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

2、顏色的多樣性

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

3、顏色的統(tǒng)一性

同樣的對于單個產(chǎn)品來看的話，它會根據(jù)系列的顏色而做設計，但也不會背離品牌的主色調(diào)。簡單來說，無論系列產(chǎn)品有多少種色調(diào)，對于品牌來說，都是輔助顏色，在設計系列作品時，主色調(diào)黃色是始終不會改變的。（更多精彩內(nèi)容請關注我的微信訂閱號：種夢）

案例二：潤本

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

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

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

2、關于品牌主色調(diào)的色彩構(gòu)成

由于《潤本》旗下有幾十個產(chǎn)品，也因部分產(chǎn)品是中藥成分比較重、或者是針對年紀較大的兒童，因此在不同的產(chǎn)品上，綠色的使用會有色相、飽和度、明度上的不同，這就是品牌的核心——色彩構(gòu)成。而這關于品牌色彩構(gòu)成的核心將會延續(xù)到電商設計里（具體的大家可以查看上文關于電商的章節(jié)）。

3、關于產(chǎn)品包裝的用色問題

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