寫在前面：

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

目錄

1.極致的版式

1.1對齊——最基礎(chǔ)但也最重要

1.2對比——讓畫面不再平凡

1.3有“氣質(zhì)”的留白

2.精致的顏色

2.1讓設(shè)計快速出“彩”的方法

A、黑白灰主色調(diào)+亮色輔色

B、選擇商品主色調(diào)作為整體畫面的主色調(diào)

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

2.2看似很復(fù)雜的顏色搭配其實很簡單

A、統(tǒng)一明度和飽和度

B、控制顏色的層次

3.考究的字體

3.1選用符合整體設(shè)計風(fēng)格的字體

3.2選用字形結(jié)構(gòu)簡單的字體

3.3“牛叉”的中文字體

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

先看一下極簡設(shè)計的案例：

這是錘子T1的頁面設(shè)計，雖然好多人都不喜歡老羅，但是我覺得他有對設(shè)計特有的一種完美主義的偏執(zhí)，無論是手機的外型(各種對稱)還是系統(tǒng)UI的設(shè)計，我覺得作為設(shè)計師我還應(yīng)該多向他學(xué)習(xí)一下?；氐巾撁嬖O(shè)計本身，我們來分析一下這個頁面的設(shè)計。

一、極致的版式

可能大家開始畫畫的時候就接觸和學(xué)習(xí)構(gòu)圖了，而構(gòu)圖就是版式設(shè)計的基礎(chǔ)。但我們往往忽略了對于構(gòu)圖和版式的極致追求，一般我們總會說，差不多看著舒服就行，可是對于設(shè)計師的能力晉升我們還需要更加重視版式的設(shè)計。

下面是幾個版式設(shè)計的技巧：

1.對齊——最基礎(chǔ)但也最重要

上面圖A、B、C是對頁面重新排版，圖D是原有的設(shè)計。雖然總體看起來都還可以，但是我們?nèi)匀豢梢院苤庇^的看出來，圖A的構(gòu)圖有些頭重腳輕，讓人感覺中心偏下;圖B的手機主體物有種對文案的擠壓感，讓人覺得壓抑;圖C的手機和文案成為90°的夾角，讓人覺得有種阻礙感，不順滑;圖D的設(shè)計很好的協(xié)調(diào)了主體圖與文案的關(guān)系，并且給人一種從遠及近的中距離縱深感。整個畫面中間對齊更能最大限度的突出主體——手機。從錘子的網(wǎng)頁設(shè)計中我們可以觀察到，這種排版方式是中間對齊，無論是橫向還是豎向。

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

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

小米2015年的新品發(fā)布會海報也采用了中間對齊的形式，讓關(guān)看者很容易的就聚焦到中間“新年禮物”的重要信息上。

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

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

A、視覺聚焦;

B、強化頁面統(tǒng)一性和條理性;

C、對視覺的導(dǎo)向作用。

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

作為簡潔乃至極簡的設(shè)計來說，對比非常重要，對比可以讓人非?？焖俚拈喿x到重要信息，也可以讓版面的設(shè)計有節(jié)奏感，讓畫面看起來不乏味。

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

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

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

3. 有“氣質(zhì)”的留白

極簡設(shè)計里的留白非常重要，最典型的是無印良品的設(shè)計，它是把留白應(yīng)用到現(xiàn)在設(shè)計里最好的典范，但是我覺得我們中國人才是留白的“老祖宗”，國畫就是非常典型的例子。

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

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

二、精致的顏色

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

2.讓設(shè)計快速出“彩”的方法

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

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

A、黑白灰主色調(diào)+亮色輔色;

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

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

B、選擇商品主色調(diào)作為整體畫面的主色調(diào);

上面的圖是Motox的網(wǎng)頁設(shè)計，頁面的主色調(diào)(背景色)使用了手機背殼的顏色，這樣可以強調(diào)商品色彩，給購買者留下非常深刻的印象。

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

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

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

2.看似很復(fù)雜的顏色搭配其實很簡單

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

對于極簡設(shè)計的配色也有幾個方法：

A、 統(tǒng)一明度和飽和度;

下圖中的明度和飽和度非常協(xié)調(diào)，既不覺得哪個顏色過亮也不覺得哪個顏色過暗。雖然是不同的顏色，但是整個畫面也是非常協(xié)調(diào)統(tǒng)一的，我們現(xiàn)在分析一下畫面的顏色。

我們來看一下，上面4個圓形中的顏色是我從圖片中提取出來的，下面4幅圖是顏色的位置和參數(shù)，主要看顏色的位置，就是每幅圖的圓圈位置，我們看到圖中有兩條線，這兩條線就是代碼這4個顏色的明度，可以看到綠色和橘色的明度位置非常相近，黃色和深藍色的明度位置也很相近，綠色和橘色占整個畫面的絕大面積，因此整個畫面看起來是非常協(xié)調(diào)的。而飽和度就是越接近色板的右上角飽和度就越高，我們看到除了深藍色，其他3種顏色都處于飽和度比較高的位置，并且位置比較靠近。

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

B、控制顏色的層次;

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

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

三、考究的字體

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

1.選用符合整體設(shè)計風(fēng)格的字體

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

上面的兩張圖是“什么值得買”的閃屏頁面，我們來仔細觀察一下眼鏡、相機與字體(文案)的關(guān)系。眼鏡和相機的款式都是非常復(fù)古的，有種民國時代的感覺，因此設(shè)計師選用了一種仿古字體來配合圖案，給人非常統(tǒng)一的感覺，配上精彩的文案就會給人一個民國時期的場景，這也可以叫帶入感。如果我們把圖中的字體換成非常現(xiàn)代的藝術(shù)字會怎么樣?

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

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

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

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

2.選用字形結(jié)構(gòu)簡單的字體

這幾年出現(xiàn)了一些結(jié)構(gòu)復(fù)雜，字形極其夸張的字體，個人認為盡量少用甚至可以不用。字體是一門非常專業(yè)的門類，很多設(shè)計師還不能很好的駕馭一些字體，無論是普通的電商設(shè)計還是極簡設(shè)計最好使用字形和結(jié)構(gòu)都相對簡單的字體。

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

下面來個反面教材：

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

下面再來看看現(xiàn)在爭相模仿的蘋果：

蘋果比較“牛”，為了自己的產(chǎn)品設(shè)計了一套字體，剛開始有些人說各種丑，但是還是被大多數(shù)人接受了并且獲得好評，原因無非就是簡單好用。這也是現(xiàn)在這個快速發(fā)展的社會最需要的，尤其是電商行業(yè)。

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

3.“牛叉”的中文字體

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

上面的頁面是真功夫的設(shè)計，很明顯，中文的書法字體是做為一種藝術(shù)圖形來傳達和表現(xiàn)的，并且結(jié)合一些相關(guān)元素(辣椒、調(diào)料、蔬菜、糧食等)突出“味道”的主題，并且很容易就能看出是美食類的頁面。

英文也可以設(shè)計成書法體，表現(xiàn)更有張力，更加符合勇士的感覺。

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

總結(jié)

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

文章結(jié)束，以上就是關(guān)于設(shè)計師詳解電商設(shè)計中的極簡設(shè)計風(fēng)格的全部內(nèi)容，文章來源于 站酷，感謝作者 聶聶咯咯 給我們帶來經(jīng)精彩的文章！更多精彩，盡在腳本之家網(wǎng)站！