設(shè)計一個電子商務(wù)網(wǎng)站是一項很大的工作。對一個初創(chuàng)公司來說,現(xiàn)在推出網(wǎng)上商店比以前容易了。
像Shopify這樣的軟件,擁有令人驚嘆的可定制模板庫,可以輕松地打造漂亮而且高度沉浸式的電子商務(wù)網(wǎng)站體驗。這里有12個吸引我們眼球的網(wǎng)站設(shè)計,你可以從中吸取頂級網(wǎng)頁設(shè)計靈感。
01.?Drybar
顏色和動畫的巧妙運用
優(yōu)秀的配色搭配微妙的動畫讓這個網(wǎng)站同時具有風(fēng)格和個性。鼠標(biāo)放在吹風(fēng)機(jī)上,它會在繩子上彈跳;鼠標(biāo)懸停到頂部的導(dǎo)航圖標(biāo)上時,一些小動畫會給你提示和反饋。像這樣的觸控操作,會讓訪問這個網(wǎng)站變地有趣,而不會使人不知所措甚至感到厭煩。
啟發(fā)點:在鼠標(biāo)懸停觸控設(shè)計時,恰當(dāng)?shù)剡\用顏色和動效會給用戶提供良好的反饋并且讓人感覺到生動有趣。
02.?Northernism
極簡設(shè)計讓使得該網(wǎng)站對于用戶的要求降低,易于瀏覽使用。
這個網(wǎng)站通過擯棄已建立的電子商務(wù)設(shè)計模式,將圖像和文本放置在感覺不太熟悉的網(wǎng)格上,創(chuàng)造出了一個新的外觀。網(wǎng)站上有大量的空留白并且每個頁面包含幾個簡單的圖像,讓它看起來比其他大多數(shù)網(wǎng)站輕松易懂。
啟發(fā)點:好的攝影作品的使用讓產(chǎn)品感覺很奢侈
03.?Bill Blass
很具創(chuàng)意的布局使得該網(wǎng)站脫穎而出
這家服裝零售商通過把他們的產(chǎn)品放在首頁瀑布流中,打破了在不同的盒子中展示產(chǎn)品的慣例,這讓整個網(wǎng)站看起來像是一張大的圖片。把這種新鮮的方法和好的配色方案以及漂亮的字體結(jié)合在一起,最后的結(jié)果是打造出一個讓人看起來不可以思議的網(wǎng)站。
啟發(fā)點:在產(chǎn)品中放一些有趣的物品,如在產(chǎn)品之間放一個煎雞蛋。
04.?The Practical Man
實用的UI設(shè)計給靠譜的男人
塊狀布局,粗體字體和強(qiáng)烈的色彩搭配讓這個男士運動服零售商的網(wǎng)站呈現(xiàn)出一個獨特的,易于被用戶記憶的風(fēng)格。
啟發(fā)點:粗壯大塊的菜單便于引導(dǎo)并滿足使用。
05.?PRESS
這個漂亮的網(wǎng)站可以讓你體驗到一個愜意舒適的書店
PRESSS是一個書籍物品商店,其網(wǎng)站利用美麗的攝影圖片模仿打造出在一個寧靜的書店里的氣氛。當(dāng)你向下滾動時,產(chǎn)品會出現(xiàn)在醒目的黑白格子中。
啟發(fā)點:巨大的產(chǎn)品拍攝讓你能感受到每本書。
06.?A Book Apart
A Book Apart 的電商網(wǎng)站讓書的封面成為網(wǎng)站的視覺特色
當(dāng)許多電子商務(wù)網(wǎng)站依靠大型美麗的攝影圖片來銷售他們的產(chǎn)品時,A Book Apart而是使用塊狀的顏色封面來生動地展示他們的“為網(wǎng)站創(chuàng)建者提供書籍”系列。這在打包展示他們的整套書籍合集時尤其有效。
啟發(fā)點:主頁巧妙運用CSS過渡的方式處理主要書籍特點,調(diào)整屏幕大小來感受整個的效果。
07.?Ada Blackjack
皮革商品電商網(wǎng)站Ada Blackjack很好地運用了以商品為主體,突出商品的頭圖。
Ada Blackjack是一個手工包和皮革制品的品牌。雖然這個網(wǎng)站雖然在設(shè)計和布局方面相對傳統(tǒng),但它擅長運用富有表現(xiàn)力的突出產(chǎn)品本身的頭圖和簡單干凈的產(chǎn)品攝影。
啟發(fā)點:當(dāng)你在某個產(chǎn)品詳情頁大版本的產(chǎn)品圖時,設(shè)計師選擇通過在頁面中疊加大圖像來摒棄傳統(tǒng)彈出方式。單擊加號圖標(biāo)可查看效果。
08.?Bellroy
錢包制造者Bellory的電商網(wǎng)站用一個有趣的互動演示示范
當(dāng)你登錄錢包制造商Bellory的主頁時,你會看到一個相對簡單的布局。進(jìn)一步深入探究這個電子商務(wù)網(wǎng)站,你會發(fā)現(xiàn)各種各樣非常不同的突出單個產(chǎn)品的設(shè)計頁面。
當(dāng)在線展示您的產(chǎn)品時,整合有趣的演示視頻方面,Bellroy網(wǎng)站是一個很好的例子來展示Shopify是何等的靈活(開篇提到過Shopify擁有可定制的網(wǎng)站模板庫)
啟發(fā)點:幫助錢包瘦身的教程對于不想讓錢包鼓起膨脹的人來說,是一個有趣的并且有意思的指南。它在一些相當(dāng)不錯的產(chǎn)品照片方面做到了極致,并且鏈接到了他們所有的產(chǎn)品。
一個充滿了漂亮產(chǎn)品的電子商務(wù)網(wǎng)站,你從來不知道你想要什么,但是當(dāng)你瀏覽Best Made Company的網(wǎng)站時,你會突然發(fā)現(xiàn)你自己需要的物品。因為它具有非常干凈和極簡的設(shè)計,該設(shè)計方式使得產(chǎn)品攝影,以及所有產(chǎn)品都顯示在白色背景上,讓產(chǎn)品真正成為了頁面的中心部分。
啟發(fā)點:頁面頂部是有創(chuàng)新設(shè)計的菜單部分,當(dāng)訪問者訪問網(wǎng)站的所有區(qū)域時,它是簡單,干凈,易于使用的。
10.?Good as Gold
珠寶電商網(wǎng)站Good as Gold以超大的主頁形象化表達(dá)來引誘用戶
Good as Gold是一家總部設(shè)在新西蘭惠靈頓的時尚商店。他們的電子商務(wù)網(wǎng)站是有名的和令人印象深刻的。大型首頁圖像會吸引你進(jìn)入,同時還可以通過多種不同的方式瀏覽網(wǎng)站,例如:大的下拉菜單或者以按照A—Z列出的每個供應(yīng)商為特點的品牌頁面。
啟發(fā)點:單擊一個鏈接,觀察logo是如何變成加載旋轉(zhuǎn)器??紤]到許多頁面是有很多圖片的,這是一個很好的提示告訴你該頁面正在加載。
11.?Shwood
該網(wǎng)站運用的清晰地視頻
這個完全響應(yīng)的電子商務(wù)網(wǎng)站充分利用視頻,誘使買家了解更多關(guān)于他們的太陽鏡系列。當(dāng)前主頁具有不少于三個不同的視頻可供選擇。該網(wǎng)站還以具有高大上的攝影圖為特點,使得其太陽鏡產(chǎn)品更加閃亮。
啟發(fā)點:當(dāng)點擊商店標(biāo)簽時,產(chǎn)品集合以條帶格式顯示。在這里,訪客能夠通過風(fēng)格過濾,以便快速和容易的訪問特定的風(fēng)格,同時展示他們的范圍類別。
12.?FontShop
該網(wǎng)站的設(shè)計使用戶參與下完成的
當(dāng)FontShop決定在幾年前進(jìn)行再次設(shè)計時,他們在原始狀態(tài)下采取了非常規(guī)的發(fā)布設(shè)計的路線,并邀請用戶參與陪伴網(wǎng)站重新設(shè)計直至完成的旅程。
Fontshop項目經(jīng)理Ivo Gabrowitsch希望客戶測試驅(qū)動器,辯論以及與網(wǎng)站互動,而這些會影響再次設(shè)計將采取的方向。這樣做的結(jié)果是呈現(xiàn)了一個能夠極大程度滿足用戶的需求的夢幻般的網(wǎng)站。
啟發(fā)點:產(chǎn)品試用環(huán)節(jié)是一個試驗場,用于實時地測試網(wǎng)頁字體,并針對你的產(chǎn)品與網(wǎng)站上的其他任何人自由協(xié)作交流,獲得用戶對產(chǎn)品的需求。
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!