電子商務(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)化的。
本文引用地址：//tengku.com.cn/ui/518.html
下面從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ì)稱(chēng))還是系統(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ì)齊的形式，讓關(guān)看者很容易的就聚焦到中間“新年禮物”的重要信息上
下面的圖例是左右排版方式：
由此我們總結(jié)出對(duì)齊的版式的幾個(gè)特點(diǎn)和作用：
A、視覺(jué)聚焦;
B、強(qiáng)化頁(yè)面統(tǒng)一性和條理性;
C、對(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)按鈕)。
3. 有“氣質(zhì)”的留白
極簡(jiǎn)設(shè)計(jì)里的留白非常重要，典型的是無(wú)印良品的設(shè)計(jì)，它是把留白應(yīng)用到現(xiàn)在設(shè)計(jì)里好的典范，但是我覺(jué)得我們?nèi)瞬攀橇舭椎?ldquo;老祖宗”，國(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ì)更加耐看。
讓設(shè)計(jì)快速出“彩”的方法
在極簡(jiǎn)的頁(yè)面里，顏色往往用的非常謹(jǐn)慎，而我們第一步就需要選擇主色調(diào)。
這里有幾種選擇顏色的方法：
A、黑白灰主色調(diào)+亮色輔色;
通過(guò)提取出的顏色我們可以看到，上面的頁(yè)面設(shè)計(jì)中采用了黑白灰做為主色調(diào)，使用亮黃色為輔色，雖然亮黃色為輔色，但是人們第一眼往往會(huì)注意亮黃色，而設(shè)計(jì)師把70%off的折扣信息的字體顏色選為亮黃色也是對(duì)折扣信息的強(qiáng)調(diào)。
耐克和小牛電動(dòng)車(chē)的頁(yè)面設(shè)計(jì)的顏色選擇都是使用了這個(gè)方法，并且小牛為是讓畫(huà)面不單調(diào)，背景使用了素色黑白灰的一些圖形元素，這樣既讓畫(huà)面豐富起來(lái)又不會(huì)使顏色過(guò)多而顯得雜亂。
B、選擇商品主色調(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ì)回想起耐克的這款鞋。
C、 使用的顏色不要超過(guò)3種。
總結(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ì)變的，剩下的部分我將在下一篇博文中為大家展開(kāi)，謝謝。
熱點(diǎn)新聞
課程問(wèn)答
