寫在前面：

電子商務(wù)經(jīng)過了幾年的發(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è)方面來講一下如何做極簡(jiǎn)的設(shè)計(jì)是辕，每個(gè)里面都有一些具體的知識(shí)點(diǎn)囤热。

目錄

一、極致的版式

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

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

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

二获三、精致的顏色

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

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

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

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

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

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

B、控制顏色的層次

三贞谓、考究的字體

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

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

3. “牛叉”的中文字體

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

這是錘子T1的頁面設(shè)計(jì)限佩，雖然好多人都不喜歡老羅，但是我覺得他有對(duì)設(shè)計(jì)特有的一種完美主義的偏執(zhí)裸弦，無論是手機(jī)的外型（各種對(duì)稱）還是系統(tǒng)UI的設(shè)計(jì)祟同，我覺得作為設(shè)計(jì)師我還應(yīng)該多向他學(xué)習(xí)一下±砀恚回到頁面設(shè)計(jì)本身晕城，我們來分析一下這個(gè)頁面的設(shè)計(jì)。

一窖贤、極致的版式

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

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

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

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

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

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

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

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

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

A藻茂、視覺聚焦；

B玫恳、強(qiáng)化頁面統(tǒng)一性和條理性辨赐；

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

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

作為簡(jiǎn)潔乃至極簡(jiǎn)的設(shè)計(jì)來說掀序，對(duì)比非常重要，對(duì)比可以讓人非巢研觯快速的閱讀到重要信息不恭，也可以讓版面的設(shè)計(jì)有節(jié)奏感，讓畫面看起來不乏味财饥。

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

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

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

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

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

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

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

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

二弥虐、精致的顏色

在電商設(shè)計(jì)中扩灯，對(duì)顏色的把控非常重要，在某種情況下對(duì)顏色控制的好壞直接影響著頁面的停留時(shí)間霜瘪。一些經(jīng)驗(yàn)不足的設(shè)計(jì)師往往會(huì)對(duì)顏色的把握非常頭痛珠插，顏色臟、配色不好看颖对、用色過多等都是經(jīng)常出現(xià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)的頁面里训堆，顏色往往用的非常謹(jǐn)慎描验，而我們第一步就需要選擇主色調(diào)。

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

A坑鱼、黑白灰主色調(diào)+亮色輔色膘流；

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

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

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

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

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

C窃肠、使用的顏色不要超過3種包个。

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

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

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

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

A吴叶、? 統(tǒng)一明度和飽和度阐虚；

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

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

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

B马绝、控制顏色的層次；

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

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

三哪怔、考究的字體

文字在電商設(shè)計(jì)中的位置極其重要，它承擔(dān)著直觀信息傳播的用途向抢，例如活動(dòng)頁面的折扣信息认境、商品宣傳頁面的賣點(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ì)加分不少鸠姨。

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

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

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

來看看下圖筒饰，感覺是不是差了很多缴啡？

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

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

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

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

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

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

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

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

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

3.“牛叉”的中文字體

這里說中文字體“牛叉”，不僅僅因?yàn)槲沂侵袊硕然拢覀兛梢詳?shù)數(shù)中國有多少種字體踢匣，每種字體都有自己的歷史背景，例如隸書戈抄，平民是不能用的离唬，魏碑是專門刻在碑上的字體等。而且中文也是唯一一種成為藝術(shù)的文字——書法划鸽∈漭海可能有些人覺得中文字體或書法字體看起來很老舊，不現(xiàn)代裸诽，下面我們用實(shí)例來證明這是錯(cuò)的嫂用。

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

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

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

總結(jié)

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

作者：蒸個(gè)饅頭