電子商務(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)和作用: A、視覺(jué)聚焦; B、強(qiáng)化頁(yè)面統(tǒng)一性和條理性; C、對(duì)視覺(jué)的導(dǎo)向作用。