設計-電商設計中的極簡設計！

WWW.BANSHIART.COM

歡迎進入版式設計網：專業提供國外雜誌、報紙、畫冊、 InDesign Illustrator Photoshop 優秀版式設計素材源文件，分享國內外優秀版式設計作品。

來源:「ChrisAvril」

寫在前面：

電子商務經過了幾年的發展已經逐漸成熟，並且已經發展出了自己的模式和風格。但是對於電商的設計風格大多數人還停留在最初的用商品堆砌+文字信息+各種亂七八糟的效果。而這兩年各個電商公司已經非常重視設計了，而且設計風格也逐步走向簡潔乃至極簡的風格。這種變化是隨著電商的不斷發展，更加重視產品的品質而進化的。

下面從3個方面來講一下如何做極簡的設計，每個裡面都有一些具體的知識點。

先看一下極簡設計的案例：

這是鎚子T1的頁面設計，雖然好多人都不喜歡老羅，但是我覺得他有對設計特有的一種完美主義的偏執，無論是手機的外型（各種對稱）還是系統UI的設計，我覺得作為設計師我還應該多向他學習一下。回到頁面設計本身，我們來分析一下這個頁面的設計。

可能大家開始畫畫的時候就接觸和學習構圖了，而構圖就是版式設計的基礎。但我們往往忽略了對於構圖和版式的極致追求，一般我們總會說，差不多看著舒服就行，可是對於設計師的能力晉陞我們還需要更加重視版式的設計。

下面是幾個版式設計的技巧：

1.對齊——最基礎但也最重要

上面圖A、B、C是對頁面重新排版，圖D是原有的設計。雖然總體看起來都還可以，但是我們仍然可以很直觀的看出來，圖A的構圖有些頭重腳輕，讓人感覺中心偏下；圖B的手機主體物有種對文案的擠壓感，讓人覺得壓抑；圖C的手機和文案成為90°的夾角，讓人覺得有種阻礙感，不順滑；圖D的設計很好的協調了主體圖與文案的關係，並且給人一種從遠及近的中距離縱深感。整個畫面中間對齊更能最大限度的突出主體——手機。從鎚子的網頁設計中我們可以觀察到，這種排版方式是中間對齊，無論是橫向還是豎向。

再看幾個中間對齊的例子：

上面的設計家也是用的中間對齊方式，大寫的V視覺衝擊力非常強，而左上角的Logo信息和右下角的信息成為對角形式，讓人感覺畫面非常平衡而又穩定。

小米2015年的新品發布會海報也採用了中間對齊的形式，讓關看者很容易的就聚焦到中間「新年禮物」的重要信息上。

下面的圖例是左右排版方式：

由此我們總結出對齊的版式的幾個特點和作用：

A、視覺聚焦；

B、強化頁面統一性和條理性；

C、對視覺的導向作用。

2.對比——讓畫面不再平凡

作為簡潔乃至極簡的設計來說，對比非常重要，對比可以讓人非常快速的閱讀到重要信息，也可以讓版面的設計有節奏感，讓畫面看起來不乏味。

上面的設計是小牛N1和一加3的設計，這兩個設計是典型的左右排版。右側放商品圖片，左側排列簡單而有用的基本文案信息。而左右兩邊的圖片和文案信息的大小對比要要根據商品的屬性來決定的。例如，一加手機主要體現手機的外型和質感，所以放置2個佔比面積較大的手機，搭配最基本的文案信息（只有手機名字、價格和購買按鈕）。

上圖是文案與商品的面積對比。

這個設計則與一加和小牛相反，文案面積很大，但是我們的視覺中心依然是手錶，因為實物的照片往往會更加吸引人，這就是對比。但是還有一個對比不知道大家看出來沒有，就是文案里的對比，標題選用大而粗的字體，其他信息則放的很小，大能又快有準的看清標題的內容，另外因為字體大小和粗細的變化讓人感覺有節奏感。

3. 有「氣質」的留白

極簡設計里的留白非常重要，最典型的是無印良品的設計，它是把留白應用到現在設計里最好的典範，但是我覺得我們人才是留白的「老祖宗」，國畫就是非常典型的例子。

下面我們來做個對比，我們把圖上的一些不必要的複雜背景和文案給去除。主要是讓產品主體和主要信息展示的更加清晰和明確。

再做更進一步的精簡，增加留白的面積，使產品和產品信息更加清晰的傳達出來。

下面是其他一些案例我們可以試著自己分析一下，注意留白不一定就是白色。

在電商設計中，對顏色的把控非常重要，在某種情況下對顏色控制的好壞直接影響著頁面的停留時間。一些經驗不足的設計師往往會對顏色的把握非常頭痛，顏色臟、配色不好看、用色過多等都是經常出現的問題。在極簡的設計中更需要對顏色做減法，並且不斷的調節細微的明度、飽和度和顏色的搭配，正是這些細節的調節才會讓極簡的設計更加耐看。

2.讓設計快速出「彩」的方法

在極簡的頁面里，顏色往往用的非常謹慎，而我們第一步就需要選擇主色調。

這裡有幾種選擇顏色的方法：

A、黑白灰主色調+亮色輔色；

通過提取出的顏色我們可以看到，上面的頁面設計中採用了黑白灰做為主色調，使用亮黃色為輔色，雖然亮黃色為輔色，但是人們第一眼往往會注意亮黃色，而設計師把70%off的折扣信息的字體顏色選為亮黃色也是對摺扣信息的強調。

耐克和小牛電動車的頁面設計的顏色選擇都是使用了這個方法，並且小牛為是讓畫面不單調，背景使用了素色黑白灰的一些圖形元素，這樣既讓畫面豐富起來又不會使顏色過多而顯得雜亂。

B、選擇商品主色調作為整體畫面的主色調；

上面的圖是Motox的網頁設計，頁面的主色調（背景色）使用了手機背殼的顏色，這樣可以強調商品色彩，給購買者留下非常深刻的印象。

耐克的設計同樣是採用這個方法，一般來說廠商想要特意退爆款會選擇一種爆款的顏色或配色，而耐克這樣設計的頁面也是更好的展示了這個商品的獨特的特點，讓人們在任何地方看到這種顏色都會回想起耐克的這款鞋。

C、使用的顏色不要超過3種。

通過上面的案例我們發現，這些設計師所用的顏色都不會超過3種，而做為極簡設計有時候只使用2種顏色，甚至只用黑白灰的變化來進行設計。

2.看似很複雜的顏色搭配其實很簡單

在極簡設計中，顏色的搭配需要非常用心，因為畫面的顏色搭配簡單時，即使稍微有點不協調也會被放大很多，因此我們需要了解顏色的幾個屬性：色相、飽和度、明度，還有對比色、相近色等概念。

對於極簡設計的配色也有幾個方法：

A、 統一明度和飽和度；

下圖中的明度和飽和度非常協調，既不覺得哪個顏色過亮也不覺得哪個顏色過暗。雖然是不同的顏色，但是整個畫面也是非常協調統一的，我們現在分析一下畫面的顏色。

我們來看一下，上面4個圓形中的顏色是我從圖片中提取出來的，下面4幅圖是顏色的位置和參數，主要看顏色的位置，就是每幅圖的圓圈位置。

我們看到圖中有兩條線，這兩條線就是代碼這4個顏色的明度，可以看到綠色和橘色的明度位置非常相近，黃色和深藍色的明度位置也很相近，綠色和橘色占整個畫面的絕大面積，因此整個畫面看起來是非常協調的。

而飽和度就是越接近色板的右上角飽和度就越高，我們看到除了深藍色，其他3種顏色都處於飽和度比較高的位置，並且位置比較靠近。

大家可以用這兩幅設計來實驗一下，自己親手解構一下配色的明度和飽和度。而我覺得做為設計師對於顏色的細緻理解是非常有必要的。

B、控制顏色的層次；

所謂顏色的層次我們依然用小牛電動車的圖來分析，可以看到所有的顏色都提取出來后圓形中的顏色。

這樣我們很容易的就能看出來顏色的層次，灰色系有7個層次，而紅色系有4個層次，正因為這樣的層次讓整個設計顯得非常豐富，並且有立體感而不至於太「平」。

文字在電商設計中的位置極其重要，它承擔著直觀信息傳播的用途，例如活動頁面的折扣信息、商品宣傳頁面的賣點信息、商品的優惠價格、文案內容的表現等。而在極簡設計中，字體的選擇更為講究。

1.選用符合整體設計風格的字體

字體也是有自己的外貌、性格和風格的，當字體的風格與設計完美的融合在一起的時候，會給整個設計加分不少。

上面的兩張圖是「什麼值得買」的閃屏頁面，我們來仔細觀察一下眼鏡、相機與字體（文案）的關係。眼鏡和相機的款式都是非常復古的，有種民國時代的感覺，因此設計師選用了一種仿古字體來配合圖案，給人非常統一的感覺，配上精彩的文案就會給人一個民國時期的場景，這也可以叫帶入感。如果我們把圖中的字體換成非常現代的藝術字會怎麼樣？

換了字體后可以看出，雖然每個字體單獨看都不錯，但是與配圖放在一起就感覺非常的不搭，立刻失去了文案和圖片想要傳達的那種「工匠」的感覺。

英文的選擇也是如此，看上圖，英文Animal Prints是動物圖案的意思，你會發現右側的女性人物應該是穿著一條連衣裙的，因此我猜測這是賣女性服裝的一個Banner，而且是屬於比較成熟的那種（看模特身材就能看出來），因此在選擇字體的時候應該選擇偏細膩柔美的字體，而不是黑粗體。

來看看下圖，感覺是不是差了很多？

下面再來看幾組圖例，試著自己分析一下。

2.選用字形結構簡單的字體

這幾年出現了一些結構複雜，字形極其誇張的字體，個人認為盡量少用甚至可以不用。字體是一門非常專業的門類，很多設計師還不能很好的駕馭一些字體，無論是普通的電商設計還是極簡設計最好使用字形和結構都相對簡單的字體。

這個設計可以看到整體就是以文字為主來組合設計的，無論英文還是中文，都使用了字形非常簡單的字體，加上字體本身的大小粗細使畫面非常有節奏感，而且不會覺得全是字。從這我們可以引出另一個理論，在某些情況下字體即是信息傳達的載體，又是一種藝術圖形。

下面來個反面教材：

這裡我們先不說這個專題設計的構圖、顏色，只說一下文字，除了9.9元比較明顯的突出了賣點以外，其他基本都非常雜亂，字體的字形被改的面目全非。因此提醒大家，在沒有能力把握字形的時候千萬不要自行修改甚至設計字體。

下面再來看看現在爭相模仿的蘋果：

蘋果比較「牛」，為了自己的產品設計了一套字體，剛開始有些人說各種丑，但是還是被大多數人接受了並且獲得好評，原因無非就是簡單好用。這也是現在這個快速發展的社會最需要的，尤其是電商行業。

自帶6種粗細字體完全滿足一般需要

3.「牛叉」的中文字體

這裡說中文字體「牛叉」，不僅僅因為我是人，我們可以數數有多少種字體，每種字體都有自己的歷史背景，例如隸書，平民是不能用的，魏碑是專門刻在碑上的字體等。而且中文也是唯一一種成為藝術的文字——書法。可能有些人覺得中文字體或書法字體看起來很老舊，不現代，下面我們用實例來證明這是錯的。

上面的頁面是真功夫的設計，很明顯，中文的書法字體是做為一種藝術圖形來傳達和表現的，並且結合一些相關元素（辣椒、調料、蔬菜、糧食等）突出「味道」的主題，並且很容易就能看出是美食類的頁面。

英文也可以設計成書法體，表現更有張力，更加符合勇士的感覺。

小米電飯煲的「新國貨」也採用了書法字體，讓平淡的頁面有了生機，並且這種字體也透漏這一種做成新國貨的「野心」

總結

其實極簡設計是設計發展進程中的必然結果，這是一種優化的過程，也就是做減法，把不必要的，干擾信息傳達的元素刪除掉，保留最基本最為有用的東西，我這次的教程也從排版、顏色、字體三個方面來具體的講解了怎樣做極簡的設計，同樣這些內容也適用於一般電商的設計。其歸根結底，好的設計的基本原理是不會變的。