潮流酷站！一組走心又走腎的優(yōu)質(zhì)電商網(wǎng)站設(shè)計(jì)實(shí)例(下)

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

21. 提供多級側(cè)邊欄

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

22.無需跳轉(zhuǎn)的購物車管理

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

23. 使用簡明的布局

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

24. 用輪播圖做頁頭

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

25. 高大上的俯拍圖

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

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

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

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

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

28. 提供滾動(dòng)式交互

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

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

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

30. 360度全景展示

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

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

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

32. 整合社交媒體與分享

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

33. 重新設(shè)計(jì)下拉菜單

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

34. 使用印刷式排版

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

35. 采用堆棧式界面

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

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

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

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

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

38. 順滑無縫的購物體驗(yàn)

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

39. 鮮明的色彩對比

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

40. 以字體排版為中心的設(shè)計(jì)

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

41. 基于模板的設(shè)計(jì)

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

42. 講故事

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

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

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

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

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

45. 一頁搞定所有問題

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

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

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

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