極簡(jiǎn)設(shè)計(jì)是設(shè)計(jì)發(fā)展進(jìn)程中的必然結(jié)果，這是一種優(yōu)化的過(guò)程，也就是做減法，把不必要的，干擾信息傳達(dá)的元素刪除掉，保留最基本最為有用的東西。本文作者將從排版、顏色、字體三個(gè)方面來(lái)具體的講解了怎樣做極簡(jiǎn)的設(shè)計(jì)。

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

下面從3個(gè)方面來(lái)講一下如何做極簡(jiǎn)的設(shè)計(jì)，每個(gè)里面都有一些具體的知識(shí)點(diǎn)。

先看一下極簡(jiǎn)設(shè)計(jì)的案例：

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

一、極致的版式

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

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

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

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

再看幾個(gè)中間對(duì)齊的例子：

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

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

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

由此我們總結(jié)出對(duì)齊的版式的幾個(gè)特點(diǎn)和作用：

（1）視覺(jué)聚焦；

（2）強(qiáng)化頁(yè)面統(tǒng)一性和條理性；

（3）對(duì)視覺(jué)的導(dǎo)向作用。

2.對(duì)比——讓畫(huà)面不再平凡

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

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

上圖是文案與商品的面積對(duì)比。

這個(gè)設(shè)計(jì)則與一加和小牛相反，文案面積很大，但是我們的視覺(jué)中心依然是手表，因?yàn)閷?shí)物的照片往往會(huì)更加吸引人，這就是對(duì)比。但是還有一個(gè)對(duì)比不知道大家看出來(lái)沒(méi)有，就是文案里的對(duì)比，標(biāo)題選用大而粗的字體，其他信息則放的很小，大能又快有準(zhǔn)的看清標(biāo)題的內(nèi)容，另外因?yàn)樽煮w大小和粗細(xì)的變化讓人感覺(jué)有節(jié)奏感。

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

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

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

再做更進(jìn)一步的精簡(jiǎn)，增加留白的面積，使產(chǎn)品和產(chǎn)品信息更加清晰的傳達(dá)出來(lái)。

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

二、精致的顏色

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

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

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

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

（1）黑白灰主色調(diào)+亮色輔色；

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

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

（2）選擇商品主色調(diào)作為整體畫(huà)面的主色調(diào)；

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

耐克的設(shè)計(jì)同樣是采用這個(gè)方法，一般來(lái)說(shuō)廠商想要特意退爆款會(huì)選擇一種爆款的顏色或配色，而耐克這樣設(shè)計(jì)的頁(yè)面也是更好的展示了這個(gè)商品的獨(dú)特的特點(diǎn)，讓人們?cè)谌魏蔚胤娇吹竭@種顏色都會(huì)回想起耐克的這款鞋。

（3）使用的顏色不要超過(guò)3種。

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

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

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

對(duì)于極簡(jiǎn)設(shè)計(jì)的配色也有幾個(gè)方法：

（1） 統(tǒng)一明度和飽和度

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

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

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

（2）控制顏色的層次

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

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

三、考究的字體

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

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

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

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

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

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

來(lái)看看下圖，感覺(jué)是不是差了很多？

下面再來(lái)看幾組圖例，試著自己分析一下。

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

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

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

下面來(lái)個(gè)反面教材：

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

下面再來(lái)看看現(xiàn)在爭(zhēng)相模仿的蘋(píng)果：

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

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

3.“牛叉”的中文字體

這里說(shuō)中文字體“牛叉”，不僅僅因?yàn)槲沂侵袊?guó)人，我們可以數(shù)數(shù)中國(guó)有多少種字體，每種字體都有自己的歷史背景，例如隸書(shū)，平民是不能用的，魏碑是專門(mén)刻在碑上的字體等。而且中文也是唯一一種成為藝術(shù)的文字——書(shū)法?？赡苡行┤擞X(jué)得中文字體或書(shū)法字體看起來(lái)很老舊，不現(xiàn)代，下面我們用實(shí)例來(lái)證明這是錯(cuò)的。

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

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

小米電飯煲的“新國(guó)貨”也采用了書(shū)法字體，讓平淡的頁(yè)面有了生機(jī)，并且這種字體也透漏這一種做成新國(guó)貨的“野心”。

總結(jié)

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

作者：蒸個(gè)饅頭

地址：http://www.zcool.com.cn/article/ZNDI5ODA0.html

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645