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

走心的視覺設(shè)計，走腎的價格策略，走腦的文案內(nèi)容，是應(yīng)對不斷增長的用戶需求的必備品，它們構(gòu)成了用戶感知產(chǎn)品、選擇平臺的價值核心?？辗旱拿枋隹倳屓瞬恢耄蝗鐝南旅?5個優(yōu)秀電商網(wǎng)站中尋找答案吧。

01. 大膽用色+產(chǎn)品大圖

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

02. 少即是多

ETQ Amsterdam 是著名的鞋類品牌，優(yōu)雅、永恒和品質(zhì)是這個品牌的三大核心價值，而他們的網(wǎng)站也同樣采用了這樣的設(shè)計理念。整個網(wǎng)站的設(shè)計充滿了現(xiàn)代式的簡約美，簡潔的排版，清爽的配色方案，大量的圖像和微妙的動畫共同營造出少即是多的美感。

03. 使用漂亮的超大字體

木材車床公司 Brdr. Krüger 將產(chǎn)品名稱和重要的信息制作成為漂亮的超大字體置于網(wǎng)站首頁上，這種充滿沖擊力的字體設(shè)計在移動端上看起來尤其明顯。

04. 使用柵格框架來設(shè)計

Chris Niedenthal 使用了柵格系統(tǒng)來展現(xiàn)他們多年來的工作成果，柵格系統(tǒng)強大的擴展性和整個網(wǎng)站的內(nèi)容協(xié)調(diào)地在一起工作。

05. 實驗性的表單和功能

誰說菜單設(shè)計一定是單調(diào)無聊的？Chickenbot 作為一家意大利雞肉外賣服務(wù)商，就使用了華麗的全屏式的列表漢堡菜單，來呈他們的獨到之處。相比于沉悶的下拉式菜單和傳統(tǒng)的側(cè)邊欄設(shè)計，Chickenbot的設(shè)計也算的上是獨樹一幟了。

06. 極簡導(dǎo)航

My Deejo 為用戶提供了自定義產(chǎn)品的服務(wù)，用戶無需離開頁面就可以搞定一切。用戶只需要通過托拽和多選框選擇就可以完成自定義設(shè)定，一旦完成，便可下單了。

07. 創(chuàng)建互動

Emporium Pies 是一家在線銷售烘培類食品的網(wǎng)站，當用戶將光標懸停在不同的餡餅或者面包上的時候，相關(guān)的信息會呈現(xiàn)出來。創(chuàng)建出令人愉悅的交互能讓用戶駐足更久。

08. 做好產(chǎn)品介紹

國內(nèi)電商設(shè)計師對于電商網(wǎng)站詳情頁設(shè)計有這豐富的經(jīng)驗，但是靜態(tài)的產(chǎn)品介紹并不夠。加拿大家居制造商 JM & Sons 在他們的產(chǎn)品介紹部分，用戶可以360度全方位查看他們的家具的細節(jié)，滿足用戶的全部好奇心。這也會有效緩解到手之后“官圖無限好”的感受。

09. 使用大量的留白

Best Made Co 是一個專門銷售戶外用的服裝的在線電商，網(wǎng)頁中使用了大量的留白，營造出干凈整潔的感覺，即使產(chǎn)品很多也并未將頁面空間堆滿。

10. 使用字體設(shè)計

Leather Head Sports 是一家提供皮質(zhì)體育用品的在線電商網(wǎng)站，網(wǎng)站的頂部使用了單獨設(shè)計的英文字體，這些微妙的字體設(shè)計會讓網(wǎng)站看起來更加優(yōu)雅有品味，也足夠個性化。

11. 用色彩高亮重要文本

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

12. 讓網(wǎng)站更加易于導(dǎo)航

導(dǎo)航、搜索、篩選是方便用戶尋找想要內(nèi)容的重要手段，也是用戶獲取有用信息的必要途徑。LEIF 的網(wǎng)站不僅提供了常用的搜索功能，而且提供了相應(yīng)的篩選功能，讓用戶很快定位并獲取想要的東西。

13. 使用信息化的標題

視頻公司 Graze 在網(wǎng)頁設(shè)計上同樣有獨到之處。我們熟知的淘寶當中，專業(yè)的賣家會在標題中加入大量相關(guān)的文案，確保能能容易被搜索到。但是這還不夠。Graze 還讓產(chǎn)品的標題更加視覺化，根據(jù)每種小吃的色彩和特征來定制相應(yīng)的字體，讓標題的視覺信息更加豐富，看起來“更好吃”，用戶可以更加快速地定位想要的食品。

14. 更好的客戶支持

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

15. 有趣的插畫

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

16. 卡片式布局

多產(chǎn)品展示型電商網(wǎng)站同卡片式布局有著先天的契合，Oliver Bonas 的網(wǎng)站就使用卡片展示不同的產(chǎn)品和信息。不同的卡片相互組合成有機的整體，圍繞著品牌，讓網(wǎng)站總體上看起來協(xié)調(diào)而統(tǒng)一。

17. 補充視頻影像

Bellroy 和360度細節(jié)展示一項，補充視頻影像資料會讓用戶更好地了解他們將要購買的產(chǎn)品的細節(jié)，滿足他們的好奇心。

18. 使用紋理背景

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

19. 折疊大量文本

將頁面用大量的信息堆滿不僅過時，而且難看。Hand Graft 同樣需要在網(wǎng)頁中呈現(xiàn)他們產(chǎn)品的全部細節(jié)，但是要為大量文本而犧牲美觀似乎不現(xiàn)實。所以設(shè)計師將文字折疊起來，這樣不僅擁有漂亮的外觀，而且保持了界面的清爽干凈。

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

動態(tài)的視頻背景無疑可以承載遠超單一圖片的信息，如果你不想將網(wǎng)站制作成長滾動單頁，那么使用視頻背景是非常不錯的選擇。漂亮的視頻背景不僅讓整個頁面鮮活起來，還很好地起到了產(chǎn)品展示的功能。

【那些充滿異域風(fēng)情的網(wǎng)頁設(shè)計】

《兼容并蓄！20個來自澳大利亞最優(yōu)秀的網(wǎng)頁設(shè)計》
《狂拽酷炫！20個來自美國最優(yōu)秀的網(wǎng)頁設(shè)計》
《KEEP CALM & DESIGN！26個來自英國最優(yōu)秀的網(wǎng)頁設(shè)計》
《嚴謹而浪漫！20個來自德國最優(yōu)秀的網(wǎng)頁設(shè)計》
《情迷西班牙！20個來自西班牙最優(yōu)秀的網(wǎng)頁設(shè)計》
《時尚雅致！25個來自法國最優(yōu)秀的網(wǎng)頁設(shè)計》
《請多關(guān)照！20個來自日本最優(yōu)秀的網(wǎng)頁設(shè)計》

原文地址：egrappler
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量105萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com