一組走心又走腎的優質電商網站設計執行個體(上)

 　　剁手節雙十一剛剛過去，雙十二又要來了。世界範圍內線上購物一再增長，中國的增速尤其明顯。雖然淘寶、京東和亞馬遜這樣的主流電商平台依然佔據著主流地位，小型的電商購物平台的生存空間也不小，新興的電商平台的增長一樣不容忽視。如何設計出令人興奮的視覺搞，怎樣搞定流暢的購物體驗，是所有電商人都需要考慮，進一步完善的事情。

　　走心的視覺設計，走腎的價格策略，走腦的文案內容，是應對不斷增長的使用者需求的必備品，它們構成了使用者感知產品、選擇平台的價值核心。空泛的描述總會讓人不知所措，不如從下面45個優秀電商網站 中尋找答案吧。

　　01. 大膽用色+產品大圖

　　Bose 的官網採用了大膽的水平式布局，高清細膩的 產品圖和絢麗的背景用色，讓產品和網站都顯得個性十足，視覺優先式的布局讓產品看起來誘人無比。

　　02. 少即是多

　　ETQ Amsterdam 是著名的鞋類品牌，優雅、永恒和品質是這個品牌的三大核心價值，而他們的網站也同樣採用了這樣的設計理念。整個網站的設計充滿了現代式的簡約美，簡潔的排版，清爽的色彩配置，大量的映像和微妙的動畫共同營造出少即是多的美感。

　　03. 使用漂亮的超大字型

　　木材車床公司 Brdr. Krüger 將產品名稱和重要的資訊製作成為漂亮的超大字型置於網站首頁上，這種充滿衝擊力的字型設計在移動端上看起來尤其明顯。

　　04. 使用柵格架構來設計

　　Chris Niedenthal 使用了柵格系統來展現他們多年來的工作成果，柵格系統強大的擴充性和整個網站的內容協調地在一起工作。

　　05. 實驗性的表單和功能

　　誰說菜單設計一定是單調無聊的?Chickenbot 作為一家意大利雞肉外賣服務商，就使用了華麗的全屏式的列表漢堡菜單，來呈他們的獨到之處。相比於沉悶的下拉式菜單和傳統的側邊欄設計，Chickenbot的設計也算的上是獨樹一幟了。

　　06. 極簡導航

　　My Deejo 為使用者提供了自訂產品的服務，使用者無需離開頁面就可以搞定一切。使用者只需要通過托拽和多選框選擇就可以完成自訂設定，一旦完成，便可下單了。

　　07. 建立互動

　　Emporium Pies 是一家線上銷售烘培類食品的網站，當使用者將游標懸停在不同的餡餅或者麵包上的時候，相關的資訊會呈現出來。建立出令人愉悅的互動能讓使用者駐足更久。

　　08. 做好產品介紹

　　國內電商設計師對於電商網站 詳情頁設計有這豐富的經驗，但是靜態產品介紹並不夠。加拿大家居製造商 JM & Sons 在他們的產品介紹部分，使用者可以360度全方位查看他們的傢具的細節，滿足使用者的全部好奇心。這也會有效緩解到手之後“官圖無限好”的感受。

　　09. 使用大量的留白

　　Best Made Co 是一個專門銷售戶外用的服裝的線上電商，網頁中使用了大量的留白，營造出乾淨整潔的感覺，即使產品很多也並未將頁面空間堆滿。

　　10. 使用字型設計

　　Leather Head Sports 是一家提供皮質體育用品的線上電商網站，網站的頂部使用了單獨設計的英文字型，這些微妙的字型設計會讓網站看起來更加優雅有品味，也足夠個人化。

　　11. 用色彩高亮重要文本

　　用色彩來高亮文本本不是特別的設計手法，但是結合網站配色和UI來設定高亮文本的色彩，倒是常常能收到奇效。Longboard Living 則在網站文本高亮設計上非常用心，從側邊欄到本文部分都採用了這樣的設計技巧，配合動效，兼顧到了美觀和功能。

　　12. 讓網站更加易於導航

　　導航、搜尋、篩選是方便使用者尋找想要內容的重要手段，也是使用者擷取有用資訊的必要途徑。LEIF 的網站不僅提供了常用的搜尋功能，而且提供了相應的篩選功能，讓使用者很快定位並擷取想要的東西。

　　13. 使用資訊化的標題

　　視頻公司 Graze 在網頁設計上同樣有獨到之處。我們熟知的淘寶當中，專業的賣家會在標題中加入大量相關的文案，確保能能容易被搜尋到。但是這還不夠。Graze 還讓產品的標題更加視覺化，根據每種小吃的色彩和特徵來定製相應的字型，讓標題的視覺資訊更加豐富，看起來“更好吃”，使用者可以更加快速地定位想要的食品。

　　14. 更好的客戶支援

　　對於新興的電商網站而言，客戶支援是非常重要的事情。讓使用者能在網站中快速找到客服入口，是很有必要的。在Farmdrop 的網站中，右側下方的常駐聊天對話表徵圖會讓使用者可以隨時同客服進行溝通，頂部的“更進一步溝通”也是常駐的入口。

　　15. 有趣的插畫

　　毛巾製造商 Vertty 在自己的官網著陸頁上放滿了毛巾的插畫，每個產品都有對應的插畫。這些插畫不僅代表了產品，而且讓整個網站顯得更加俏皮有趣。

　　16. 卡片式布局

　　多產品展示型電商網站同卡片式布局有著先天的契合，Oliver Bonas 的網站就使用卡片展示不同的產品和資訊。不同的卡片相互組合成有機的整體，圍繞著品牌，讓網站總體上看起來協調而統一。

　　17. 補充視頻影像

　　Bellroy 和360度細節展示一項，補充視頻影像資料會讓使用者更好地瞭解他們將要購買的產品的細節，滿足他們的好奇心。

　　18. 使用紋理背景

　　潮流歸潮流，紋理的使用並未過時。Dollar Shave Club 網頁中的拇指紋理賦予整個頁面以質感和陽剛的氣息，這不僅符合產品的定位，而且在視覺上有著突出的效果。

　　19. 摺疊大量文本

　　將頁面用大量的資訊堆滿不僅過時，而且難看。Hand Graft 同樣需要在網頁中呈現他們產品的全部細節，但是要為大量文本而犧牲美觀似乎不現實。所以設計師將文字摺疊起來，這樣不僅擁有漂亮的外觀，而且保持了介面的清爽乾淨。

　　20. 用視頻背景替代Banner大圖

　　動態視頻背景無疑可以承載遠超單一圖片的資訊，如果你不想將網站製作成長滾動單頁，那麼使用視頻背景是非常不錯的選擇。漂亮的視頻背景不僅讓整個頁面鮮活起來，還很好地起到了產品展示的功能。