1. 程式人生 > >一組走心又走腎的優質電商網站設計例項(下)

一組走心又走腎的優質電商網站設計例項(下)

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

40_CH_1-662x402

41_CH_3-662x402

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

42_Everlane_1-662x402

43_Everlane_2-662x402

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

44_Helmut_Lang_1-662x402

45_Helmut_Lang_2-662x402

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

46_Groovemade_1-662x402

47_Groovemade_2-662x402

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

48_Munchery_1-662x402

49_Munchery_2-662x402

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

51_Harrys_1-662x402

52_Harrys_2-662x402

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

53_BeoPLay_1-662x402

54_BeoPLay_2-662x402

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

55_Pencil_1-662x402

56_Pencil_2-662x402

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

57_Aark_1-662x402

58_Aark_2-662x402

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

59_Bagigia_1-662x402

60_Bagigia_2-662x402

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

61_Diesel_1-662x402

62_Diesel_2-662x402

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

63_Vanmoof_1-662x402

64_Vanmoof_2-662x402

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

65_The_Horse_1-662x402

66_The_Horse_2-662x402

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

67_Mr_Porter_1-662x402

68_Mr_Porter_2-662x402

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

69_Travel_Alberta_1-662x402

70_Travel_Alberta_2-662x402

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

71_Nike_Jordan_1-662x402

72_Nike_Jordan_2-662x402

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

73_Warby_and_Parker_1-662x402

74_Warby_And_Parker_2-662x402

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

75_Coin_1-662x402

76_Coin_2-662x402

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

77_Capellos_1-662x402

78_Capellos_2-662x402

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

79_ECC_1-662x402

80_ECC_2-662x402

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

81_Deliveroo_1-662x402

82_Deliveroo_2-662x402

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

83_Maple_1-662x402

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

85_VSCO_1-662x402

84_VSCO_2-662x398

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

86_Le_Coq_Sportif_1-662x402

87_Le_Coq_Sportif_3-662x402

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

88_Hunter_Wines_11-662x402

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