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

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

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

走心的視覺設計,走腎的價格策略,走腦的文案內容,是應對不斷增長的使用者需求的必備品,它們構成了使用者感知產品、選擇平臺的價值核心。空泛的描述總會讓人不知所措,不如從下面45個優秀電商網站中尋找答案吧。

01_New_From_Bose_1-662x402

02_New_From_Bose_2-662x402

Bose 的官網採用了大膽的水平式佈局,高清細膩的 產品圖和絢麗的背景用色,讓產品和網站都顯得個性十足,視覺優先式的佈局讓產品看起來誘人無比。

03_ETQ_1-662x402

04_ETQ_2-662x402

ETQ Amsterdam 是著名的鞋類品牌,優雅、永恆和品質是這個品牌的三大核心價值,而他們的網站也同樣採用了這樣的設計理念。整個網站的設計充滿了現代式的簡約美,簡潔的排版,清爽的配色方案,大量的影象和微妙的動畫共同營造出少即是多的美感。

05_Kruger_1-662x402

06_Kruger_2-662x402

木材車床公司 Brdr. Krüger 將產品名稱和重要的資訊製作成為漂亮的超大字型置於網站首頁上,這種充滿衝擊力的字型設計在移動端上看起來尤其明顯。

07_Chris_Niedenthal_1-662x402

08_Chris_Niedenthal_2-662x402
Chris Niedenthal 使用了柵格系統來展現他們多年來的工作成果,柵格系統強大的擴充套件性和整個網站的內容協調地在一起工作。

09_Chickenbot_1-662x398

10_Chickenbot_2-662x402

誰說選單設計一定是單調無聊的?Chickenbot 作為一家義大利雞肉外賣服務商,就使用了華麗的全屏式的列表漢堡選單,來呈他們的獨到之處。相比於沉悶的下拉式選單和傳統的側邊欄設計,Chickenbot的設計也算的上是獨樹一幟了。

11_Deejo_1-662x402

My Deejo 為使用者提供了自定義產品的服務,使用者無需離開頁面就可以搞定一切。使用者只需要通過託拽和多選框選擇就可以完成自定義設定,一旦完成,便可下單了。

12_Emporium_Pies_1-662x402

13_Emporium_Pies_2-662x402

Emporium Pies 是一家線上銷售烘培類食品的網站,當用戶將游標懸停在不同的餡餅或者麵包上的時候,相關的資訊會呈現出來。創建出令人愉悅的互動能讓使用者駐足更久。

14_JM_Sons_11-662x402

15_JM_Sons_2-662x402

國內電商設計師對於電商網站詳情頁設計有這豐富的經驗,但是靜態的產品介紹並不夠。加拿大家居製造商 JM & Sons 在他們的產品介紹部分,使用者可以360度全方位檢視他們的傢俱的細節,滿足使用者的全部好奇心。這也會有效緩解到手之後“官圖無限好”的感受。

16_Best_Made_Co_1-662x402

17_Best_Made_Co_2-662x402
Best Made Co 是一個專門銷售戶外用的服裝的線上電商,網頁中使用了大量的留白,營造出乾淨整潔的感覺,即使產品很多也並未將頁面空間堆滿。

18_LeaderHead_11-662x402

19_LeaderHead_2-662x402

Leather Head Sports 是一家提供皮質體育用品的線上電商網站,網站的頂部使用了單獨設計的英文字型,這些微妙的字型設計會讓網站看起來更加優雅有品味,也足夠個性化。

20_Longboard_Living_11-662x402

21_Longboard_Living_2-662x402

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

22_LEIF_11-662x402

23_LEIF_2-662x402

導航、搜尋、篩選是方便使用者尋找想要內容的重要手段,也是使用者獲取有用資訊的必要途徑。LEIF 的網站不僅提供了常用的搜尋功能,而且提供了相應的篩選功能,讓使用者很快定位並獲取想要的東西。

24_Graze_1-662x402

25_Graze_2-662x402

視訊公司 Graze 在網頁設計上同樣有獨到之處。我們熟知的淘寶當中,專業的賣家會在標題中加入大量相關的文案,確保能能容易被搜尋到。但是這還不夠。Graze 還讓產品的標題更加視覺化,根據每種小吃的色彩和特徵來定製相應的字型,讓標題的視覺資訊更加豐富,看起來“更好吃”,使用者可以更加快速地定位想要的食品。

26_Farmdrop_11-662x402

27_Farmshop_2-662x402

對於新興的電商網站而言,客戶支援是非常重要的事情。讓使用者能在網站中快速找到客服入口,是很有必要的。在Farmdrop 的網站中,右側下方的常駐聊天對話圖示會讓使用者可以隨時同客服進行溝通,頂部的“更進一步溝通”也是常駐的入口。

28_Vertty_1-662x402

29_Vertty_2-662x402

毛巾製造商 Vertty 在自己的官網著陸頁上放滿了毛巾的插畫,每個產品都有對應的插畫。這些插畫不僅代表了產品,而且讓整個網站顯得更加俏皮有趣。

30_Oliver_Bonas_1-662x402

31_Oliver_Bonas_2-662x402

多產品展示型電商網站同卡片式佈局有著先天的契合,Oliver Bonas 的網站就使用卡片展示不同的產品和資訊。不同的卡片相互組合成有機的整體,圍繞著品牌,讓網站總體上看起來協調而統一。

32_Bellroy_1-662x402

33_Bellroy_2-662x402
Bellroy 和360度細節展示一項,補充視訊影像資料會讓使用者更好地瞭解他們將要購買的產品的細節,滿足他們的好奇心。

34_Dollar_Shave_1-662x402

35_Dollar_Shave_2-662x402

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

36_Hard_Graft_1-662x402

37_Hard_Graft_2-662x402

將頁面用大量的資訊堆滿不僅過時,而且難看。Hand Graft 同樣需要在網頁中呈現他們產品的全部細節,但是要為大量文字而犧牲美觀似乎不現實。所以設計師將文字摺疊起來,這樣不僅擁有漂亮的外觀,而且保持了介面的清爽乾淨。

38_Cook_Mellow_11-662x402

39_Cook_Mellow_2-662x402

動態的視訊背景無疑可以承載遠超單一圖片的資訊,如果你不想將網站製作成長滾動單頁,那麼使用視訊背景是非常不錯的選擇。漂亮的視訊背景不僅讓整個頁面鮮活起來,還很好地起到了產品展示的功能。