the-best-ecommerce-website-2-1

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

21. 提供多級側邊欄

40_CH_1-662x402

41_CH_3-662x402

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

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

42_Everlane_1-662x402

43_Everlane_2-662x402

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

23. 使用簡明的布局

44_Helmut_Lang_1-662x402

45_Helmut_Lang_2-662x402

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

24. 用輪播圖做頁頭

46_Groovemade_1-662x402

47_Groovemade_2-662x402

Groovemade 是著名的數碼設備配件制造商,他們為Apple 的數碼產品提供優雅的木質外設。而他們的網站也采用了同樣的優雅設計,精心拍攝的動態輪播圖會讓用戶快速了解他們的產品,整欄式的高清大圖能給用戶極致的視覺沖擊力,無需更多文案,一圖勝千言。

25. 高大上的俯拍圖

48_Munchery_1-662x402

49_Munchery_2-662x402

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

26. 用網站來補充配色

51_Harrys_1-662x402

52_Harrys_2-662x402

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

27. 信息化的產品簡介

53_BeoPLay_1-662x402

54_BeoPLay_2-662x402

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

28. 提供滾動式交互

55_Pencil_1-662x402

56_Pencil_2-662x402

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

29. 用產品制作圖案

57_Aark_1-662x402

58_Aark_2-662x402

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

30. 360度全景展示

59_Bagigia_1-662x402

60_Bagigia_2-662x402

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

31. 稍加調整的經典柵格系統

61_Diesel_1-662x402

62_Diesel_2-662x402

Diesel 基于傳統的對稱式柵格系統來展示他們的產品,不過他們在經典的柵格系統上稍稍做了點調整,覆蓋上了白色的紋理。如何使用經典的方案設計出現代的風格?這是一個不錯的案例。

32. 整合社交媒體與分享

63_Vanmoof_1-662x402

64_Vanmoof_2-662x402

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

33. 重新設計下拉菜單

65_The_Horse_1-662x402

66_The_Horse_2-662x402

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

34. 使用印刷式排版

67_Mr_Porter_1-662x402

68_Mr_Porter_2-662x402

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

35. 采用堆棧式界面

69_Travel_Alberta_1-662x402

70_Travel_Alberta_2-662x402

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

36. 使用動態產品圖

71_Nike_Jordan_1-662x402

72_Nike_Jordan_2-662x402

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

37. 使用超大尺寸產品圖

73_Warby_and_Parker_1-662x402

74_Warby_And_Parker_2-662x402

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

38. 順滑無縫的購物體驗

75_Coin_1-662x402

76_Coin_2-662x402

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

39. 鮮明的色彩對比

77_Capellos_1-662x402

78_Capellos_2-662x402

Capellos 所提供的產品是各種面點,從包裝到網頁設計都采用的是強對比的黑白色,搭配點綴的紅色,整體散發出一種協調而鮮明的視覺效果,協調而對比強烈。

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

79_ECC_1-662x402

80_ECC_2-662x402

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

41. 基于模板的設計

81_Deliveroo_1-662x402

82_Deliveroo_2-662x402

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

42. 講故事

83_Maple_1-662x402

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

43. 用視覺形象代表產品

85_VSCO_1-662x402

84_VSCO_2-662x398

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

44. 讓產品便于定制

86_Le_Coq_Sportif_1-662x402

87_Le_Coq_Sportif_3-662x402

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

45. 一頁搞定所有問題

88_Hunter_Wines_11-662x402

Hunters Wine Shop 的網頁設計走的就是一頁搞定所有問題的路線,你可以在瀏覽完之后直接在頁面內完成購買環節。易于瀏覽和簡約設計是它們的突出之處。

【那些充滿異域風情的網頁設計】

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

原文地址:designschool
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

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

點贊
收藏 2

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏