目前國內(nèi)的幾家大型的電商平臺越做越完善，大有集眾家之所長于一身的趨勢。反觀國外的這些優(yōu)質的電商網(wǎng)站，大多有自己的風格和不同于他人的設計方向。這些個性和堅持讓這些網(wǎng)站顯得越發(fā)的獨一無二了。也正是在這樣的設定之下催生了各不相同的設計策略和技巧，而這些正是我們需要重新思考、深入學習的地方。另外，本文的上半部分在此：《潮流酷站！一組走心又走腎的優(yōu)質電商網(wǎng)站設計實例(上)》

21. 提供多級側邊欄

相比于傳統(tǒng)的頂部多級導航欄，側邊欄會讓頁面顯得更加整齊易用。Carolina Herrera 的側邊欄設計則更有意思，它采用的是多級側邊欄，功能上不弱于前者，提升了瀏覽體驗，而視覺上的效果則更加突出。

22.無需跳轉的購物車管理

作為電商網(wǎng)站，編輯管理購物車是重要的功能之一。為了提升整體體驗，Everlane 的設計師允許用戶將鼠標懸停在某個產(chǎn)品上，選擇大小類別，添加到購物車，整個過程無需離開相關頁面。無需跳轉搞定一切，用戶可以更便捷地完成購物環(huán)節(jié)。

23. 使用簡明的布局

Helmut Lang 是以為奧地利時裝設計師，他在維也納創(chuàng)辦了自己的設計工作室。在構建他的在線購物網(wǎng)站之時，Lang將他簡單到無與倫比的設計風格也引入到網(wǎng)頁設計中來，他將他認為最重要也是最關鍵的元素保留下來，而其核心，就是他的收藏。

24. 用輪播圖做頁頭

Groovemade 是著名的數(shù)碼設備配件制造商，他們?yōu)锳pple 的數(shù)碼產(chǎn)品提供優(yōu)雅的木質外設。而他們的網(wǎng)站也采用了同樣的優(yōu)雅設計，精心拍攝的動態(tài)輪播圖會讓用戶快速了解他們的產(chǎn)品，整欄式的高清大圖能給用戶極致的視覺沖擊力，無需更多文案，一圖勝千言。

25. 高大上的俯拍圖

近年來俯拍圖是營造網(wǎng)站設計感的流行手法之一。Munchery 作為一個美食類的網(wǎng)站，自然也不能落于人后，俯拍圖不僅能呈現(xiàn)出美食的全貌，而且能夠營造出整齊而優(yōu)雅的質感。

26. 用網(wǎng)站來補充配色

時尚剃須刀品牌Harry的網(wǎng)站配色方案是參考他們的產(chǎn)品配色來做的，背景色會隨著操作而改變，剃須刀本身的橙色、棕色和深藍色也是貫穿整個網(wǎng)站設計的配色方案。

27. 信息化的產(chǎn)品簡介

Beo Play 在線商店將產(chǎn)品的信息以漂亮的信息圖展現(xiàn)出來，在其他的產(chǎn)品還在簡單展現(xiàn)名稱和價格標簽的同時，Beo Play 更有前瞻性地將圖片展示、版本信息、新系列的相關信息都合理地整合到了一起。

28. 提供滾動式交互

著名的品牌53為iPad 提供的觸控筆Paper Pencil 想必各位不會感到陌生，這款革命性的手寫筆為現(xiàn)在的Apple Pencil 提供了設計靈感。他們的網(wǎng)上商店用無限滾動的交互方式將筆的所有零部件拆開給你看，用漂亮的高清圖片來講述他們的產(chǎn)品設計故事。

29. 用產(chǎn)品制作圖案

Aark Collective 的產(chǎn)品展示方式和傳統(tǒng)的略顯不同，相比于高清大圖、系列特寫，他們更喜歡將自家產(chǎn)品整齊地擺放成不同的圖案。這些漂亮的手表均勻排放著，配合干凈而寧和的配色方案，使得整個網(wǎng)站顯得優(yōu)雅而不同凡響。

30. 360度全景展示

高端手包品牌 Bagigia 源自意大利，他們的網(wǎng)站會將產(chǎn)品以360度全景展示出來，讓用戶可以在網(wǎng)站上了解這些高端手包的全部細節(jié)。網(wǎng)站的配色方案更多的是配合這些產(chǎn)品的配色來進行調(diào)整的，目標非常明確。

31. 稍加調(diào)整的經(jīng)典柵格系統(tǒng)

Diesel 基于傳統(tǒng)的對稱式柵格系統(tǒng)來展示他們的產(chǎn)品，不過他們在經(jīng)典的柵格系統(tǒng)上稍稍做了點調(diào)整，覆蓋上了白色的紋理。如何使用經(jīng)典的方案設計出現(xiàn)代的風格？這是一個不錯的案例。

32. 整合社交媒體與分享

作為一個著名的電商網(wǎng)站，Vanmoof 將社交網(wǎng)絡分享和網(wǎng)站深度整合到一起，讓用戶可以更方便更無縫地分享他們的購物體驗與感受。

33. 重新設計下拉菜單

如果下拉框并不只是一個布局用的控件，那么 The Horse 的頁面設計會給你展示它更多的可能性。這個網(wǎng)站中，下拉列表中不僅僅只有文字條目，還添加了圖標等內(nèi)容，這使得菜單瞬間變得充滿趣味性和設計感。

34. 使用印刷式排版

電商平臺 Mr Porter 很容易讓人聯(lián)想到傳統(tǒng)的報紙雜志排版，加粗的標題和正文對比明顯，導航和頁眉的設計讓人容易想起傳統(tǒng)的報紙頁頭，襯線體和非襯線體的搭配讓網(wǎng)站很容易喚醒用戶對于傳統(tǒng)排版的瀏覽體驗。

35. 采用堆棧式界面

堆棧式界面在iPad 的APP中非常常見，這種結構可以更好地組織樹狀結構的信息，而 Travel Alberta 的頁面中也很好地使用這種界面模式來替代傳統(tǒng)的面包屑。

36. 使用動態(tài)產(chǎn)品圖

作為耐克的重要產(chǎn)品線之一，Nike Jordan 系列以其網(wǎng)站上獨特的動態(tài)產(chǎn)品圖設計而著稱。這些動態(tài)圖片能更好地展示客戶的故事，配合陽剛無比動態(tài)十足的風格，令人印象深刻。

37. 使用超大尺寸產(chǎn)品圖

Warby and Parker 使用超大尺寸的產(chǎn)品圖來呈現(xiàn)產(chǎn)品的每一個令人稱道的系列，不論是在手機還是在桌面上，都足夠有沖擊力。

38. 順滑無縫的購物體驗

如果說 Coin 的網(wǎng)站設計有什么令人難忘的地方，那肯定是它無縫的結帳購買體驗。

39. 鮮明的色彩對比

Capellos 所提供的產(chǎn)品是各種面點，從包裝到網(wǎng)頁設計都采用的是強對比的黑白色，搭配點綴的紅色，整體散發(fā)出一種協(xié)調(diào)而鮮明的視覺效果，協(xié)調(diào)而對比強烈。

40. 以字體排版為中心的設計

高清大圖往往會讓用戶忘記，以字體排版為重心的設計有多么美妙。精致的線條，別具一格的排版，精致的圖片和獨特的柵格，整個網(wǎng)站看起來像是一個高端的畫廊。

41. 基于模板的設計

對于龐雜而繁復的產(chǎn)品類型，基于模板的設計會讓整個網(wǎng)站看起來整飭而清爽，這樣的設計也會極大的提升生產(chǎn)力。

42. 講故事

革命性的紐約餐廳Maple 在網(wǎng)站上用視頻來講述屬于他們自己的故事，那些關于餐廳的細節(jié)會讓用戶更了解他們，了解美食的誕生過程。

43. 用視覺形象代表產(chǎn)品

Visual Supply Co 將他們的產(chǎn)品用不同的色塊來代表，雖然這種手法并不一定適用于所有的電商網(wǎng)站，但是某些特殊類型的產(chǎn)品而言，這種方式也挺不錯。

44. 讓產(chǎn)品便于定制

對于服裝這類具備可定制屬性的產(chǎn)品而言，讓用戶易于定制是非常有必要的。服裝品牌 Le Coq Sportif 就是這么做的，讓每個定制屬性都非常容易選擇和操作。

45. 一頁搞定所有問題

Hunters Wine Shop 的網(wǎng)頁設計走的就是一頁搞定所有問題的路線，你可以在瀏覽完之后直接在頁面內(nèi)完成購買環(huán)節(jié)。易于瀏覽和簡約設計是它們的突出之處。

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

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

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

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

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

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