第1章 淺談電商設計

1.1 電商設計與平面、網頁設計的區別

電商設計作為一個新興的設計門類，在現在的互聯網社會中占據著非常重要的地位。但作為設計的一個門類，究其根源它是從平面設計發展而來的。而現在的平面設計包括了很多分支，例如，書籍設計、包裝設計、網頁設計、電商設計，甚至UI設計也離不開平面設計的基礎理論。下面我們就來分別談談它們的區別。

1.1.1 平面設計

平面設計也稱為視覺傳達設計，是以“視覺”作為溝通和表現的方式，通過多種方式來創造和結合符號、圖片、文字，借此做出用來傳達想法或信息的視覺表現。平面設計主要包括VI企業形象設計、書籍裝幀設計、平面廣告設計、海報設計和包裝設計等，如圖1-1所示。就業趨向：報紙、雜志、圖書等大眾傳播媒體和廣告公司等相關行業。其中VI、廣告、包裝是平面設計最主要的幾個分類，也是應用最為廣泛的領域。

圖1-2所示是書籍裝幀設計的效果展示。其實，作為平面設計師需要懂得的知識和網頁設計師不太一樣，其中最主要的區別是要懂得印刷知識，包括紙張的種類和特性、油墨印刷的方式和特種印刷的種類等。因此，平面設計師在完成設計后往往需要去印刷廠與印刷人員當面溝通，尤其是選紙和小樣校色的時候。由于印刷品出來后不可修改的特性，設計師必須反復檢查設計稿和印刷小樣。

圖1-3所示是包裝設計的效果展示。在軟件的使用上，平面設計師也與網頁設計師和電商設計師不同，最常用的軟件是Photoshop、Illustrator和Corel DRAW（一般來說，這兩種矢量軟件北方用Illustrator的居多，南方用Corel DRAW的居多。但是隨著Adobe公司的發展，現在越來越多的設計師開始用Illustrator，主要還是因為Illustrator與Photoshop的兼容性和穩定性是Corel DRAW替代不了的），除此之外，還需要熟悉排版軟件In Design，這個軟件學起來非常簡單，也很專業，如果是畫冊或圖書的排版，它是再合適不過的了。

平面設計已經發展了400多年（不只是做名片和宣傳冊），所有電商設計能用到的技術、理念、方法其實就是平面設計中的一小部分，所以，把電商設計當成平面設計的一個應用方向，就會有無限放大的可能。掌握好平面設計基礎，會發現電商設計中每次用到的排版方式、字體、顏色和布局在茫茫平面設計史中都能找到源頭。

1.1.2 網頁設計

圖1-4所示是網頁設計的效果展示。網頁設計的涉及范圍非常廣，包括Web設計、App設計、界面設計和交互設計等。最開始的互聯網設計大多局限于企業官方網站的業務宣傳和品牌宣傳，隨著大平臺裝修后臺越來越開放和品牌商城、App之類自營平臺的發展，互聯網技術會更加融入電商。

網頁設計是技術與藝術的緊密結合，具體表現在以下幾個方面。

1.交互性與持續性

即時的交互性是Web成為熱點的主要原因，是網頁不同于傳統媒體之處，也是網頁設計時必須考慮的問題。

2.多維性

多維性主要體現在網頁設計中對導航的設計上。由于超級鏈接的呈現，多維性源于超級鏈接，網頁的組織結構更加豐富，瀏覽者可以在各種主題之間自由跳轉，從而打破了以前人們接收信息的線性方式。

3.媒體的綜合性

隨著網絡寬帶的增加、芯片處置速度的提高及跨平臺的多媒體文件格式的推廣，目前網頁中使用的多媒體視聽元素主要有文字、圖片、聲音和視頻等。

4.版式的靈活性

隨著技術的發展，響應式的網頁逐漸增多，這也為設計師的排版和交互設計提供了新的思路，如圖1-5和圖1-6所示。

網頁設計師不僅需要了解設計的相關知識，還需要了解前端類的知識。例如，頁面布局、DIV、CSS和H5等，這些知識看似與設計沒什么關系，但是了解它們對設計師的工作會有非常大的幫助。而頁面的交互設計更需要設計師對前端知識有所了解。當然，如果你是一個純粹的視覺設計師，可以不用掌握這些知識，但是必須了解。從軟件上看，除了Photoshop、Illustrator，還需要掌握Dreamweaver和Flash的使用。

1.1.3 電商設計

電商設計是UI（User Interface）設計中的一個分支，它是傳統平面設計和網頁設計的結合體，是具有互聯網屬性的設計，是互聯網時代的產物。它最大的特點就是“快”，這也是電商設計與平面設計最大的區別。例如，平面設計中完成地產公司的一個廣告設計時間需要3～6個月，而電商的專題頁面設計時間是7天，最長時間是14天，更新頻率非常快，一些專題頁面如圖1-7和圖1-8所示。

電商設計主要分為網站及詳情頁設計、活動專題頁面設計和Banner設計。這樣的結構也與平面設計和網頁設計不同，因為電商設計的主要目的就是“賣產品”，而讓客戶更加清晰地看到商品細節和盡可能多地瀏覽網站商品，盡可能長時間地讓客戶停留觀看才是電商設計的最終目的。電商設計的另一個特色就是“快、準、狠”，按傳統的平面設計的思考過程肯定來不及，其商業目標單一明確，產品促銷成為重點，兼顧品牌，表現需要更加直白和更強的沖擊力。專題頁面設計如圖1-9所示，Banner設計如圖1-10所示。

電商設計也應該隨著互聯網的發展而有新的突破，不能只停留于單一畫面內的技術，可以放眼到整個網頁、整個店鋪、購物體驗等的設計。從早期的Flash到響應式設計、動效設計，計算機的技術創新使設計更加生動有趣、富有創意，整個購物體驗也會更加豐富友好。所以，電商設計如果跟上互聯網技術的步伐，也會有無限的可能。響應式網頁設計如圖1-11所示。