2019 年 35 個漂亮的電子商務網站，激發您的靈感
已發表: 2019-07-24設計博客或個人網站是一回事。 您仍然需要擔心一般設計方面、可用性和網站功能，但不像設計電子商務網站時那樣擔心。
電子商務商店需要類似於真正的實體店。 這意味著一切都應該自然流動； 一切都應該易於訪問和導航。 在過去的幾年裡，創建一個壯觀的電子商務商店已經不再是一個問題。 在 Colorlib，我們廣泛介紹了電子商務：WooCommerce 用戶的最佳電子商務主題，以及使用 Bootstrap 構建的 WordPress 最佳電子商務主題的免費集合。 此外，還有一系列電子商務 PSD 模板可供您使用預先啟發的設計自由地從頭開始編寫自己的設計。
雖然它本身非常重要，但只有高質量的產品照片並不能解決問題。 您需要確保瀏覽您商店的客戶能夠通過無縫的表單提交來完善和探索他們的製作選項，就像數字目錄一樣。 設計您的商店，使搜索欄永遠不會隱藏並始終清晰顯示； 人們喜歡尋找他們獲得新想法的事物。 您還應該始終提及物品的可用性； 對於某些人來說，結帳並收到“缺貨”消息可能會非常令人沮喪。
問問自己這樣做的原因是什麼，它會給設計帶來什麼好處。 不要忘記結合搜索引擎優化的良好做法。 我們可以繼續講幾個小時，但今天，我們將概述一些來自流行電子商務商店的最鼓舞人心、精心設計和吸引人的網頁設計。
馬哈比斯
服從服裝
Obey Clothing 系列成功地吸引了大量千禧一代的注意力，在大多數人還處於早期階段的時候問世。 自該系列成立以來，它已發展成為一個由創意藝術家和街頭藝術愛好者組成的大規模運動，為滑板和朋克搖滾界服務。 OBEY 適合那些喜歡獨特而熱情地表達自己的人。 Obey 在線商店的設計並不復雜。 這是一種將產品置於消費者眼中並毫不費力地完成銷售的簡約方法。 對於物理 OBEY 地點，情況並非如此，這些地點往往更加活潑和時尚。 這裡的黑白設計非常有效。 最後，在結帳頁面中，您可以選擇一些尺寸和顏色； 結帳按鈕相當簡單。
馬球方吉奧
Polo Fangio 製作了一些非常噁心的 Polo 衫，都是為男士設計的！ Fangio 是另一個家庭品牌，服務於那些喜歡低成本但奢華的舒適和設計的人。 帶有流暢導航集成的翻卡設計看起來有點煩人，但這只是因為沒有多少在線商店使用它。 這家商店的所有東西都經過組織，以反映特定的方吉奧馬球系列，產品頁面被構建為每件襯衫的單獨主頁，讓您可以在真實世界中體驗它們在真實世界中的樣子。 結帳按鈕底部的每件襯衫也有許多劇照。 誰知道真正的黑暗設計可以這麼好用。
法爾
歡迎來到法爾！ 一個英國設計和瑞士工程手錶品牌，迎合那些喜歡手錶經典感覺的自由創意人士。 Farer 手錶價格合理，贏得了成千上萬手錶愛好者的讚賞。 他們的系列包括經典手錶，對於擁有時尚氛圍的人來說，這將是絕佳的禮物。
我們真正喜歡 Farer 的設計的地方在於，它的構建直接支持品牌信息。 一切都回到對手錶代表什麼的解釋上，產品登陸頁面在另一個層面上——非常詳細地描述了特定的手錶是關於什麼的，手錶所具有的規格的簡明綱要，以及有關的關鍵信息運費和退貨政策。 這就是產品登陸頁面需要的樣子，客戶想知道當他們花費超過 500 美元時，他們實際上會得到某種形式的保護，以防不喜歡產品的外觀。 他們還出售肩帶，甚至對於肩帶產品頁面，所有內容都經過仔細概述，以支持客戶購買產品的決定。
死亡願望咖啡公司
Death Wish 咖啡被稱為最強的咖啡品牌之一，但這些人因許多不同的原因而聞名。 他們的社區參與保證了未來許多年的成功。 他們甚至贏得了一場有獎比賽，保證了他們在超級碗期間的廣告位。 自然地，為了讓自己暴露在如此高的流量中，他們需要有一個可以處理業務的網站，而他們確實做到了！ 他們的設計理念很簡單，製作了一個巨大的介紹性框架，展示了咖啡包裝的樣子，並直接讓客戶從他們降落的同一窗口購買； 天才！
以下容器談論產品，具有非常簡潔的描述，然後是一個巨大的滑塊，概述了最佳客戶評論。 當然，他們有一個導航菜單。 但它已隱藏在您在移動設備上看到的流行漢堡菜單下。 從這裡可以清楚地看出，99% 的重點是在用戶打開網站時直接銷售產品。 這種策略可能有助於您的個人產品銷售嗎？
全鳥
Allbirds 起源於新西蘭，這是一個以羊群而聞名的國家，這是 Allbirds 所有者開始用這種華麗的材料製作鞋子的關鍵靈感點。 許多年後，Allbirds 是一個全球品牌，提供一些地球上最舒適的鞋子！ Allbirds 以簡約而自豪，他們選擇在他們的產品上不使用太浮華的標誌和品牌形象，而是讓人們可以自由選擇擁有一款能夠真正成為鞋子的鞋子。
他們的在線商店有很多動畫內容，這就是為什麼我們想指出這種設計，以及您作為品牌產品的所有者如何使用演示動畫和視頻向您的客戶解釋您的產品成為自己品牌大使的內容。 哦，還有最重要的櫻桃——如果您在 4 週內不滿意，Allbirds 將為您全額退款。 優秀！
下一位
Robin 是智能手機設備的未來，它也使用 Frickin Android！ Robin 希望通過提供具有無限存儲空間的全新革命性智能手機概念來改變手機領域！ 是的，你聽到的是對的。 無限存儲來自云服務與手機的深度集成。 這將直接將您現有的所有內容同步到這些雲平台上，以幫助您實現近乎無限的存儲能力。
他們的產品主頁分為兩個不同的容器。 第一個容器顯示手機，並添加了一些一般信息。 下一頁提到了產品的價格，並提供了操作系統的另一個預覽。 雖然很簡單，但所有其他重要的產品詳細信息都列在一個單獨的頁面中，可以從菜單訪問。 這是另一個很好的例子，說明單一產品品牌如何從將產品放在首位並將詳細信息放在單獨的頁面中受益。 那些真正感興趣的客戶會找到一種方法來了解有關您的產品的更多信息。 但首先——讓他們可以選擇立即購買。
兔爸爸
兔爸爸專注於許多不同領域的產品，其中大部分是作為禮物。 廚房用品、嬰兒用品、家居裝飾品、浴室用品、教育產品、園藝工具、臥室和洗衣房，許多類別在未來都可以成為很棒的禮物。 兔子爸爸為這麼多產品的設計仍然在很大程度上依賴於簡單性，有一個很大的導航菜單，可以精確定位所有主要類別及其子類別。 多才多藝的排版將“兔爸爸”網站的優雅聯繫在一起，產品頁面具有豐富的視覺內容，文字內容將徹底談論您購買的商品，對於經營大量產品的在線商店的人來說，這是另一個鼓舞人心的路標賣。
廷克手錶
歡迎來到 Tinker Watches，該品牌可讓您打造自己的手錶。 那是多麼令人興奮啊！ 主頁有一個巨大的內容滑塊，上面有幾張圖片，展示了產品並概述了其最突出的功能。 但是，一旦您單擊“構建手錶”操作按鈕，您就可以通過三個簡單的步驟完成構建您自己的手錶的過程； 證明了 JavaScript 在前端網頁設計中的強大功能。 為新手錶選擇所有功能後，將出現一個產品描述頁面，您可以在其中更改數量、查看手錶外觀並完成購買。 設計簡單，但在讓客戶從單個網頁構建自己的產品方面非常強大。
愛爾蘭設計店
愛爾蘭設計商店提供禮品、廚房、戶外、珠寶和書籍相關產品。 就設計而言，他們的主要賣點是使用清晰的圖像，以及易於導航的產品頁面，其中顯示了“添加到購物車”按鈕並為顏色添加了額外的重量。 頁腳不會脫離主頁網格的其餘部分，使所有內容看起來都像是在一張紙上繪製的，而且很可能確實如此。 從簡單優雅的設計如何滿足重視設計的精緻品牌的需求中汲取靈感。
為用戶體驗而戰
UX 和 UI（用戶體驗和用戶界面）是每一個偉大設計的背後。 這兩個關鍵字構成了所有網站的設計，並且使它們都正確對於您的在線業務的成功至關重要。 Fight for UX 銷售與網頁設計相關的海報，讓您和您的設計師同事受到啟發，繼續創造偉大的事物。 所有 5 張海報在主頁佈局中都有自己獨立的網格框，為每張海報命名，以及海報中將要展示的照片。 您可以單擊 5 張海報中的任何一張跳轉到產品頁面，了解更多關於海報代表什麼的信息，當然還有 - 如何購買。
我們希望加入 Fight for UX，因為它展示了美學設計如何在您銷售您真正熱衷的產品的情況下發揮良好作用。 右側欄上的展開菜單只有幾個簡單的選擇，再次為簡單化提供了空間。
狀態音頻耳機
Status Audio 誕生於一項研究，該研究得出了專業耳機的外觀、感覺和外觀，以便為喜歡在耳機後隨身攜帶音樂的一代音樂愛好者提供服務。 耳機市場也是一個很難打入的市場，Beats by Dre 等流行品牌在該行業運營。 很難告訴客戶您的產品比其他人似乎評論的要好。
這家初創公司成功打造了世界一流的耳機，讓世界各地的音樂藝術家都欽佩不已，他們對簡單設計的信念也體現在他們的網站設計上。 你點擊你想要的東西，它會帶你完成最終銷售的過程。 一些漂亮的添加可能是銷售頁面中的自動產品圖像滑塊。 此外，滾動到產品頁面的第一個元素下方，您可以更詳細地了解耳機、它們的技術方面以及包括視頻評論在內的客戶評論。 反饋是電子商務設計的一個重要方面，這些人已經把它歸結為一門關於如何讓客戶反饋成為設計一部分的科學。
LilGadgets 耳機
LilGadgets 專注於兒童耳機，他們的設計與我們在之前的商店中看到的一樣出色。 也許多一點顏色，但話又說回來 - 缺乏審查系統是顯而易見的。 彌補這一點的是對每種耳機型號的更詳細描述，以及它們將如何幫助您的孩子獲得最美妙的音樂體驗。 是時候激勵您的孩子成為自己的小藝術家了！
肥皂公司
您如何使銷售肥皂的品牌以其產品脫穎而出？ 你絕對不想設計一個會拋出大圖像和其他聳人聽聞的功能的設計，你想在顧客來到你的商店時立即列出產品，在這種情況下可以看到。 您打開 Soap Co. 商店，首先看到的是實際產品，因此是購物的時候了。 這些設計通常是在擁有產品的情況下構建的，但也有一個簡潔的營銷策略，可以吸引已經有點熟悉該品牌的客戶，並且只需要一種快速的方法來補充他們用完的肥皂訂閱. 我們一直推薦最小的設計。
Yeezy 供應
由 Kanye West 設計的 Yeezy's 是世界上最負盛名的鞋履系列之一。 獲得一雙新的 Yeezy 鞋將花費你一分錢。 除非，你真的很幸運在鞋子出來時在商店裡買到鞋子。 拿到一雙真的很難，而且看起來這個過程不會很快變得更簡單。 該網站負責少量銷售，但Yeezy的大部分都是直接在實體店銷售。
Yeezy 網站是一個簡單的標誌，上面寫著 YEEZY，左角有一個小導航圖標，點擊後會展開 5 個單獨的鏈接：男士、女士、電影、Kanye 的主頁和條款。 這裡的兩個重要鏈接是Men和Women，它們是產品的實際收藏鏈接。 單擊其中一個將在非常黑暗的背景上展開產品線，Kanye 似乎非常喜歡這種顏色。 即使要預覽產品信息，您也必須單擊單獨的按鈕，這可能是 UX 缺陷，但很可能是因為 Yeezy 品牌在現實世界中的運作方式。
事物產業
當兩位可愛的設計師走到一起並決定是時候建造一些獨特的東西來回饋世界時，Thing Industries 就誕生了； 一些獨特的東西屬於以下物品：香蕉枕頭、小熊地毯、鳥舍書架、帶有動物的奶酪板、祭祀椅、章魚鉤、室內凳子、磚層毯子，以及其他一些很酷的創意物品！ 他們從一開始就堅持自己的原始創造力。 打開任何產品的任何頁面，您將獲得一張精美的封面照片，了解您所購買的產品，以及一個易於瀏覽的購買過程。
在菜單項列表中，您會找到：主頁鏈接、商店目錄、關於他們的願景、一個單獨的新聞頁面，用於展示任何重要的新聞報導（其中有很多）、聯繫我們頁面、庫存商和新聞通訊客戶可以訂閱新產品更新。 這就是您經營小型創意品牌業務的方式。
Bootstrap 主題
我們非常清楚，我們希望包括一些與實際可用技術相關的在線商店，其中之一是 Bootstrap。 我們決定從框架的創建者那裡預覽官方 Bootstrap 主題“商店”的樣子。 我們喜歡通過使用 if 圖像、元素框和易於理解的描述來告訴客戶整體產品是什麼的簡單方法。 它繼續為樣式創建的參與者預覽實際的個人資料卡。 這使您可以更靈活地了解有關這些作者正在做的其他工作的更多信息。 這就是 GitHub 的美妙之處：能夠探索其他人公開的工作！
軟體動物衝浪店
軟體動物是您對沖浪公司/品牌所期望的一切。 這些人來自當地有機資源，並不斷參與藝術、手工藝、音樂、電影等創意領域。Mollusk 因創造了那種勾勒出衝浪者傳統的全休閒風格的服裝系列而享有盛譽愛穿。 他們宣傳的衝浪板都是由當地的傢伙建造的，所以錢不斷地回到當地經濟中。 他們的商店專注於兩個重要方面； 左側的導航菜單可讓任何人探索類別及其子類別。 同時，圖像目錄顯示所有項目。 單擊任何產品，您可以看到它的全尺寸，並可以選擇更改尺寸並立即購買。
Langly 相機包
到目前為止，Langly 很可能是我們電子商務設計靈感系列中最具體的品牌。 這些人專注於為那些喜歡徒步旅行的冒險人士生產相機包，並沿著危險和令人興奮的路徑拍攝那些令人驚嘆的照片。 這些包旨在作為多合一工具以非常有效的方式攜帶您的相機裝備。 有用於鏡頭、不同相機類型的插槽，以及用於放置任何其他單個相機裝備的大量隔間，否則這些裝備最終會變得雜亂無章。 價格非常合理，因為這是一種獨特的產品，而且它本身就有很大的用途。
Langly 手袋的靈感來自自由攝影師和游牧專業人士的生活，他們尋求以時尚和輕鬆的方式保護他們的裝備。 無論您是在執行任務還是執行任務，Langly 都能確保您的裝備安全且貼近。 對於攜帶配件和必需品等類似物品，您可能無法攜帶所有物品，但您有足夠的空間存放所需的一切。
黑色牛奶衣
Black Milk 背後的故事是真實的，從沒有錢投資材料，到獲得你能獲得的東西並從中創造出獨特的東西。 這是一條時尚系列，深受喜歡通過服裝風格表達自由和自由思想精神的人的歡迎。 令人驚訝的是，一個由創意藝術家從頭打造的時尚系列如何能夠吸引完全相同的人群，因為他們有同樣的感覺。
散景生活
請記住，一些品牌之所以選擇經營在線商店，只是因為少數客戶提出了要求，或者因為他們了解擁有在線商店的一些含義。 Bokeh Life 的網站很簡單，它有四種樣式的大寫字母，可以使用 jQuery 導航進行導航。 單擊帽子，會出現一個新模式，顯示幾個戴著帽子的模特，還有一個漂亮的購買按鈕，可幫助您將這頂帽子直接運送到您家門口。 這個網頁設計中的優雅風格是 Bokeh 融入他們的帽子的優雅的終極反映。
InVision 市場
InVision 被談論了很多。 它是全球數百萬設計師使用的設計工作流程工具！ 有些設計公司會推出自己的平台和商業頁面版本，例如電子商務商店。 這讓你想知道，接下來這些人會想出什麼？
InVision Marketplace 是一家免費商店，粉絲可以在那里為自己購買襯衫以幫助推廣品牌。 他們還可以充當品牌大使，告訴全世界您熱愛設計。 T 卹當然不僅僅是 InVision； 該系列中實際上有一些非常出色和獨特的襯衫。 作為一名設計師，您肯定會發現自己被其中的不少所吸引。 以市場為例。 它非常適合設計，從產品到結賬是設計的無縫交互。
冒犯
Afends 了解良好的設計可以具有的鎮靜作用。 就像你需要讓你的肩膀變得更有存在感一樣，你需要一個通過視覺外觀直接與客戶交談的設計； 與現實世界元素相結合的那種，使設計可以看到它的盛開。 我們也喜歡 Afends 如何使用其網站底部的 Instagram 小部件來顯示使用其服裝的人的最新 Instagram 帖子。
Lunet 眼鏡
如果您經營的品牌擁有許多人已經知道的產品，那麼製作一個可以快速銷售產品的網站會容易得多。 這就是 Lunet Eyewear 所走的道路； 他們的在線電子商務商店由一個簡單的導航標題和一個產品展示位置組成，為您提供清晰的產品信息以及如何購買。 他們還使用 jQuery 通知彈出窗口告訴歐洲客戶他們在歐洲提供免費送貨服務。 正是像這樣的小部件對網站的用戶體驗產生了很大的影響。
花園
花園編輯重新劃定了與購物和花園相關的傳統界限。 他們通過匯集體現功能性、永恆性和美感的現代產品系列來做到這一點。 約翰的根源可以追溯到倫敦，那裡的風格和熱情受到高度讚賞。 他已經將自己的園藝技能變成了一項成熟的業務。 倫敦地區的任何人都可以訂購約翰準備的一束鮮花，以及他非凡的園藝技巧。 他還出售園藝工具，所有這些工具都非常現代，適合創意園丁的空間。 顯然，在一個頁面上列出數百種產品實際上是非常有益的——五顏六色的產品展示讓客戶保持參與，誰知道他接下來會渴望什麼。
生態蜂
Ecobee 出售帶有傳感器的家庭套件，可以測量區域溫度，以及在任何特定時刻房子裡的人數。 他們的銷售方法是黑白分明，盡可能多地提供有關產品的詳細信息。 他們的主要銷售頁面回到主頁。 在那裡，他們使用 HTML5 來創建單獨的元素框，以討論產品最重要的功能。
22號自行車公司
在商店裡賣自行車很容易，不是嗎？ 你展示了這個東西，如果客戶真的有興趣購買專業的自行車件，他們可以試一試。 但是這個結果也可以在網站上實現，儘管不是整個“試乘”的事情。 22號有幾款專業自行車出售。 他們的方法是為每輛自行車創建單獨的主頁並討論它們的適當規格，同時也包括有關自行車的重要幾何信息。 此外，購買過程涉及選擇自行車的配置、尺寸和顏色偏好。
按
PRESS 是一家專業書籍和物品商店，專注於絕版和初版藝術、時尚、設計、工藝和反文化書籍、小型獨立出版社出版的新書以及來自世界各地的獨特文具產品。 它還與圖書行業有著密切的聯繫，這使他們能夠以高價出版令人驚嘆的產品。 旗艦產品包括攝影、藝術、時尚、工藝品、設計和書籍本身。
斯諾
搬進新房子？ 您可能想要儲備一些獨特的餐具和眼鏡，讓您的客人感覺他們已經走進了獨特的體驗。 但是品牌如何在網絡上銷售這些東西呢？ 第一步是使用良好的視覺展示內容，在所有可能的情況下展示產品。 這就是斯諾的方法。 除此之外，他們所有的產品賣點仍然是傳統的：描述、產品細節和用例。
W+K Studio Goodness
Goodness 專注於可穿戴設備（襯衫）、禮品卡和普通賀卡。 所有的設計都是手工製作的，並提供非常獨特的設計體驗。 您可以單獨選擇產品並查看它們的特寫圖像； 如果它真的對你說話，只需從產品頁面本身完成銷售。 W+K Studio 還允許“快速購物”選項直接跳轉到結帳頁面。
巴塔哥尼亞規定
在線銷售食品需要承諾。 有這麼多討厭的品牌出售蹩腳食品，需要一套特殊的工具才能將您的有機產品賣給那些能欣賞它的人。 從表面上看，巴塔哥尼亞已經很好地解決了所有問題。 他們以一種向您保證它們不含人工成分的方式談論他們的產品和成分，並且與它們來時一樣有機。 提供大量圖片、視頻和說明。 他們談論他們從哪裡採購這些東西，以及生產過程。 這些是客戶在網上購買美味有機食品時想知道的事情。
Wocket 智能錢包
歡迎使用 Wocket Wallet，您可以放入口袋的最智能錢包！ 他們使用網站上的第一個標題空間通過背景視頻來宣傳錢包，該視頻顯示不同的人直接在購物體驗中使用它。 然後，當您向下滾動主頁時，所有其他元素開始添加。 您實際上將看到購買的每個步驟，以及購買錢包後如何重新創建相同的體驗。 您分享的產品詳細信息越多，客戶對購買的興趣就越大。 Wocket 智能錢包也是現代技術如何帶您獲得驚人體驗的絕佳設計示例； 它可以使您看起來好像已經擁有該產品。
360飛
360 度全景相機的發展勢頭強勁。 頂級 YouTube 博主和品牌正在使用 360 度為他們的品牌體驗添加特殊元素； 360fly 可能是您最終在自己的營銷工作中使用的工具。 他們的設計是另一個例子，說明用令人驚嘆的視覺內容和易於掌握的描述來談論緊迫的產品點是多麼重要。 此外，頁面的頁腳已專門用於產品的完整技術規格； 另一個可以融入您自己的電子商務設計的好元素。
一本書分開
當然......如果所有其他方法都失敗了，那麼你可以來看看A Book Apart。 它是討論網頁設計和一般創意設計的書籍的著名資源。 A Book Apart 在他們談論他們的產品的同一頁面內開設了一家直接的在線商店。 令人愉悅的設計，如果不是為了你自己，書籍會滿足你的設計感官。 為您的設計師團隊獲取這些。 因為他們需要所有這些知識來複製我們在本綜述中經歷的一些令人著迷的設計。
電子商務設計靈感
我們真的全力以赴。 一個地方的鼓舞人心的設計數量是前所未有的。 我們的重點是設計美學，以及通過網頁設計談論您的品牌或產品的能力，讓用戶感覺他正在成為更大事物的一部分。 嘿！ 電子商務店主，我們希望看到您自己的商店設計。 因此，請留下您自己鼓舞人心的設計的評論； 我們很想檢查一下！