剁手節(jié)雙十一剛剛過(guò)去，雙十二又要來(lái)了。世界范圍內(nèi)線上購(gòu)物一再增長(zhǎng)，中國(guó)的增速尤其明顯。雖然淘寶、京東和亞馬遜這樣的主流電商平臺(tái)依然占據(jù)著主流地位，小型的電商購(gòu)物平臺(tái)的生存空間也不小，新興的電商平臺(tái)的增長(zhǎng)一樣不容忽視。如何設(shè)計(jì)出令人興奮的視覺(jué)搞，怎樣搞定流暢的購(gòu)物體驗(yàn)，是所有電商人都需要考慮，進(jìn)一步完善的事情。

走心的視覺(jué)設(shè)計(jì)，走腎的價(jià)格策略，走腦的文案內(nèi)容，是應(yīng)對(duì)不斷增長(zhǎng)的用戶(hù)需求的必備品，它們構(gòu)成了用戶(hù)感知產(chǎn)品、選擇平臺(tái)的價(jià)值核心?？辗旱拿枋隹倳?huì)讓人不知所措，不如從下面45個(gè)優(yōu)秀電商網(wǎng)站中尋找答案吧。

01. 大膽用色+產(chǎn)品大圖

Bose 的官網(wǎng)采用了大膽的水平式布局，高清細(xì)膩的 產(chǎn)品圖和絢麗的背景用色，讓產(chǎn)品和網(wǎng)站都顯得個(gè)性十足，視覺(jué)優(yōu)先式的布局讓產(chǎn)品看起來(lái)誘人無(wú)比。

02. 少即是多

ETQ Amsterdam 是著名的鞋類(lèi)品牌，優(yōu)雅、永恒和品質(zhì)是這個(gè)品牌的三大核心價(jià)值，而他們的網(wǎng)站也同樣采用了這樣的設(shè)計(jì)理念。整個(gè)網(wǎng)站的設(shè)計(jì)充滿(mǎn)了現(xiàn)代式的簡(jiǎn)約美，簡(jiǎn)潔的排版，清爽的配色方案，大量的圖像和微妙的動(dòng)畫(huà)共同營(yíng)造出少即是多的美感。

03. 使用漂亮的超大字體

木材車(chē)床公司 Brdr. Krüger 將產(chǎn)品名稱(chēng)和重要的信息制作成為漂亮的超大字體置于網(wǎng)站首頁(yè)上，這種充滿(mǎn)沖擊力的字體設(shè)計(jì)在移動(dòng)端上看起來(lái)尤其明顯。

04. 使用柵格框架來(lái)設(shè)計(jì)

Chris Niedenthal 使用了柵格系統(tǒng)來(lái)展現(xiàn)他們多年來(lái)的工作成果，柵格系統(tǒng)強(qiáng)大的擴(kuò)展性和整個(gè)網(wǎng)站的內(nèi)容協(xié)調(diào)地在一起工作。

05. 實(shí)驗(yàn)性的表單和功能

誰(shuí)說(shuō)菜單設(shè)計(jì)一定是單調(diào)無(wú)聊的？Chickenbot 作為一家意大利雞肉外賣(mài)服務(wù)商，就使用了華麗的全屏式的列表漢堡菜單，來(lái)呈他們的獨(dú)到之處。相比于沉悶的下拉式菜單和傳統(tǒng)的側(cè)邊欄設(shè)計(jì)，Chickenbot的設(shè)計(jì)也算的上是獨(dú)樹(shù)一幟了。

06. 極簡(jiǎn)導(dǎo)航

My Deejo 為用戶(hù)提供了自定義產(chǎn)品的服務(wù)，用戶(hù)無(wú)需離開(kāi)頁(yè)面就可以搞定一切。用戶(hù)只需要通過(guò)托拽和多選框選擇就可以完成自定義設(shè)定，一旦完成，便可下單了。

07. 創(chuàng)建互動(dòng)

Emporium Pies 是一家在線銷(xiāo)售烘培類(lèi)食品的網(wǎng)站，當(dāng)用戶(hù)將光標(biāo)懸停在不同的餡餅或者面包上的時(shí)候，相關(guān)的信息會(huì)呈現(xiàn)出來(lái)。創(chuàng)建出令人愉悅的交互能讓用戶(hù)駐足更久。

08. 做好產(chǎn)品介紹

國(guó)內(nèi)電商設(shè)計(jì)師對(duì)于電商網(wǎng)站詳情頁(yè)設(shè)計(jì)有這豐富的經(jīng)驗(yàn)，但是靜態(tài)的產(chǎn)品介紹并不夠。加拿大家居制造商 JM & Sons 在他們的產(chǎn)品介紹部分，用戶(hù)可以360度全方位查看他們的家具的細(xì)節(jié)，滿(mǎn)足用戶(hù)的全部好奇心。這也會(huì)有效緩解到手之后“官圖無(wú)限好”的感受。

09. 使用大量的留白

Best Made Co 是一個(gè)專(zhuān)門(mén)銷(xiāo)售戶(hù)外用的服裝的在線電商，網(wǎng)頁(yè)中使用了大量的留白，營(yíng)造出干凈整潔的感覺(jué)，即使產(chǎn)品很多也并未將頁(yè)面空間堆滿(mǎn)。

10. 使用字體設(shè)計(jì)

Leather Head Sports 是一家提供皮質(zhì)體育用品的在線電商網(wǎng)站，網(wǎng)站的頂部使用了單獨(dú)設(shè)計(jì)的英文字體，這些微妙的字體設(shè)計(jì)會(huì)讓網(wǎng)站看起來(lái)更加優(yōu)雅有品味，也足夠個(gè)性化。

11. 用色彩高亮重要文本

用色彩來(lái)高亮文本本不是特別的設(shè)計(jì)手法，但是結(jié)合網(wǎng)站配色和UI來(lái)設(shè)定高亮文本的色彩，倒是常常能收到奇效。Longboard Living 則在網(wǎng)站文本高亮設(shè)計(jì)上非常用心，從側(cè)邊欄到正文部分都采用了這樣的設(shè)計(jì)技巧，配合動(dòng)效，兼顧到了美觀和功能。

12. 讓網(wǎng)站更加易于導(dǎo)航

導(dǎo)航、搜索、篩選是方便用戶(hù)尋找想要內(nèi)容的重要手段，也是用戶(hù)獲取有用信息的必要途徑。LEIF 的網(wǎng)站不僅提供了常用的搜索功能，而且提供了相應(yīng)的篩選功能，讓用戶(hù)很快定位并獲取想要的東西。

13. 使用信息化的標(biāo)題

視頻公司 Graze 在網(wǎng)頁(yè)設(shè)計(jì)上同樣有獨(dú)到之處。我們熟知的淘寶當(dāng)中，專(zhuān)業(yè)的賣(mài)家會(huì)在標(biāo)題中加入大量相關(guān)的文案，確保能能容易被搜索到。但是這還不夠。Graze 還讓產(chǎn)品的標(biāo)題更加視覺(jué)化，根據(jù)每種小吃的色彩和特征來(lái)定制相應(yīng)的字體，讓標(biāo)題的視覺(jué)信息更加豐富，看起來(lái)“更好吃”，用戶(hù)可以更加快速地定位想要的食品。

14. 更好的客戶(hù)支持

對(duì)于新興的電商網(wǎng)站而言，客戶(hù)支持是非常重要的事情。讓用戶(hù)能在網(wǎng)站中快速找到客服入口，是很有必要的。在Farmdrop 的網(wǎng)站中，右側(cè)下方的常駐聊天對(duì)話圖標(biāo)會(huì)讓用戶(hù)可以隨時(shí)同客服進(jìn)行溝通，頂部的“更進(jìn)一步溝通”也是常駐的入口。

15. 有趣的插畫(huà)

毛巾制造商 Vertty 在自己的官網(wǎng)著陸頁(yè)上放滿(mǎn)了毛巾的插畫(huà)，每個(gè)產(chǎn)品都有對(duì)應(yīng)的插畫(huà)。這些插畫(huà)不僅代表了產(chǎn)品，而且讓整個(gè)網(wǎng)站顯得更加俏皮有趣。

16. 卡片式布局

多產(chǎn)品展示型電商網(wǎng)站同卡片式布局有著先天的契合，Oliver Bonas 的網(wǎng)站就使用卡片展示不同的產(chǎn)品和信息。不同的卡片相互組合成有機(jī)的整體，圍繞著品牌，讓網(wǎng)站總體上看起來(lái)協(xié)調(diào)而統(tǒng)一。

17. 補(bǔ)充視頻影像

Bellroy 和360度細(xì)節(jié)展示一項(xiàng)，補(bǔ)充視頻影像資料會(huì)讓用戶(hù)更好地了解他們將要購(gòu)買(mǎi)的產(chǎn)品的細(xì)節(jié)，滿(mǎn)足他們的好奇心。

18. 使用紋理背景

潮流歸潮流，紋理的使用并未過(guò)時(shí)。Dollar Shave Club 網(wǎng)頁(yè)中的拇指紋理賦予整個(gè)頁(yè)面以質(zhì)感和陽(yáng)剛的氣息，這不僅符合產(chǎn)品的定位，而且在視覺(jué)上有著突出的效果。

19. 折疊大量文本

將頁(yè)面用大量的信息堆滿(mǎn)不僅過(guò)時(shí)，而且難看。Hand Graft 同樣需要在網(wǎng)頁(yè)中呈現(xiàn)他們產(chǎn)品的全部細(xì)節(jié)，但是要為大量文本而犧牲美觀似乎不現(xiàn)實(shí)。所以設(shè)計(jì)師將文字折疊起來(lái)，這樣不僅擁有漂亮的外觀，而且保持了界面的清爽干凈。

20. 用視頻背景替代Banner大圖

動(dòng)態(tài)的視頻背景無(wú)疑可以承載遠(yuǎn)超單一圖片的信息，如果你不想將網(wǎng)站制作成長(zhǎng)滾動(dòng)單頁(yè)，那么使用視頻背景是非常不錯(cuò)的選擇。漂亮的視頻背景不僅讓整個(gè)頁(yè)面鮮活起來(lái)，還很好地起到了產(chǎn)品展示的功能。

譯者@陳子木 ?來(lái)源：優(yōu)設(shè)網(wǎng)

原文地址：https://designschool.canva.com/blog/ecommerce-website/

版權(quán)聲明：若該文章涉及版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們主編，QQ：419297645