設(shè)計師詳解電商設(shè)計中的極簡設(shè)計風格

2024-09-03 19:31:45

字體：大中小

供稿：網(wǎng)友

寫在前面：

電子商務(wù)經(jīng)過了幾年的發(fā)展已經(jīng)逐漸成熟，并且已經(jīng)發(fā)展出了自己的模式和風格。但是對于電商的設(shè)計風格大多數(shù)人還停留在最初的用商品堆砌+文字信息+各種亂七八糟的效果。而這兩年各個電商公司已經(jīng)非常重視設(shè)計了，而且設(shè)計風格也逐步走向簡潔乃至極簡的風格。這種變化是隨著電商的不斷發(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看似很復雜的顏色搭配其實很簡單

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

B、控制顏色的層次

3.考究的字體

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

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

3.3“牛叉”的中文字體

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

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

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

一、極致的版式

可能大家開始畫畫的時候就接觸和學習構(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、對視覺的導向作用。

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

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

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

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

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