電子商務網站設計的最重要特徵

你有一個在線銷售的計劃。 你已經決定了你要賣什麼，你已經決定使用 WooCommerce，現在你需要設計你的商店。

這個階段可能很困難。 找到完美的主題，甚至選擇了解您目標的設計師，可能會佔用您沒有的時間。 如果您以前從未在網上銷售過，您可能會覺得自己在尋找“看起來不錯”的東西，而沒有牢牢把握真正重要的東西。

為了幫助您了解什麼是重要的，什麼不是，您應該知道商店設計中最重要的特徵實際上是什麼。 這將幫助您將“看起來不錯”的設計與性能良好的設計區分開來。

讓我們看一下您的 WooCommerce 商店設計中最重要的功能，以便您可以開始下一個關鍵階段。

易於理解的導航

導航很可能是商店設計中最重要的部分。 良好的導航有助於新購物者輕鬆找到他們想要的東西。 另一方面，糟糕的導航會讓他們感到沮喪，甚至可能導致他們放棄您的商店。

那麼，問題是什麼實際上構成了良好的導航。 主要思想是提供從登錄頁面到結帳的清晰路徑。 無論訪問者最初登陸哪個頁面，他們都應該能夠快速在您的網站上找到自己的方式，而不必問“我該怎麼做……？”

大多數情況下，這將構成在您的主導航中僅顯示最重要的類別或頁面，並將不太重要的目的地委託給下拉菜單或網站頁腳。

HUMAN 有一個簡單的頂部導航，其中包含非常基本的類別，下拉菜單將其進一步細分：

Kohl's，一家更大的商店，也做了類似的事情：他們最重要的類別位於頂部，下拉菜單有明確標記的部門，有助於引導導航到正確的（通常更具體的）位置。

如果您有很多產品並且導航變得棘手，您可以將內置的分層導航小部件添加到您的 WooCommerce 商店 - 就像 Kohl's 一樣，這將允許客戶按顏色、大小或您的其他標準過濾他們的搜索結果指定。

使用清晰的標籤展示廣泛和狹窄的選項，讓客戶可以按照他們的意願瀏覽您的商店。 如果他們更願意完全避免您的導航，那麼您只需單擊一下即可進行搜索。

兼容所有設備和屏幕尺寸

隨著我們繼續看到僅使用移動設備的購物者的增加，重要的是要意識到您的客戶使用的許多不同的設備和屏幕尺寸。

響應式設計是一種網頁設計方法，可以自動向上或向下縮放網站的外觀以匹配查看它的屏幕尺寸。 在過去幾年中，它迅速成為網站的標準，部分原因是谷歌將網站的移動友好性視為排名因素，並建議將響應能力作為最佳遵守方式。

隨著越來越多的購物者選擇使用他們的移動設備進行購物，您的商店的設計絕對應該能夠與瀏覽它的屏幕相匹配。 如果沒有，您可能會發現您的客戶正在放棄他們的購物車（如果他們甚至做到了那麼遠）。

好消息：我們網站上所有可用的 WooCommerce 主題都是開箱即用的響應式（包括 Storefront 及其許多子主題）。 而且由於響應能力已成為一種標準，因此您在 WordPress.org 上找到的幾乎所有與 WooCommerce 兼容的主題也都適合移動設備。

如果您正在其他地方尋找主題，請留意描述或標籤中的“響應式”一詞。 確定要使用的主題後，請在您自己的所有設備上對其進行測試，以確保它真正適合移動設備使用。

如果您打算與開發人員合作從頭開始創建響應式設計，請查看此 Google 指南以優先考慮移動設備友好性 - 它會為您提供一些具體提示，以便在您一起集思廣益時牢記。

每個頁面的快速加載時間

一個有趣的事實：如果加載時間超過三秒，大約 40% 的在線購物者會放棄網站。 無論您的商店多麼漂亮，如果速度慢，您的跳出率就會上升，而您的轉化率會急劇下降。

為避免失去大部分客戶，您的目標應該是實施一種能夠快速加載所有資產的設計。 否則，您將看到高反彈率和退出率。

不用擔心：完全有可能實現漂亮的商店設計，而不會讓所有訪客不耐煩地跺腳。 在壓縮工具、內容交付網絡以及特定於平台的調整和插件之間，您可以確保即使是最大的圖像和圖形元素也能立即加載。

這裡有一些提示可以幫助您防止您的設計陷入您的網站：

• 壓縮大圖像文件。 Kraken.io 和 TinyPNG 等免費服務可讓您在幾秒鐘內完成此操作！
• 確保您的主機適合- 如果事情看起來有點緩慢，請考慮與您的主機聊天以升級您的計劃。
• 研究像 CloudFlare 這樣的內容交付網絡，它從本地服務器向訪問者提供商店的緩存版本。

使用清晰、漂亮的圖像

你最近注意到商店裡所有的大屏幕圖片了嗎？ 例如，Moment 主頁上主要是這張在 iPhone 上使用鏡頭的精美照片：

這些大而醒目的圖像不僅漂亮：它們會立即將訪問者的注意力引向關鍵的號召性用語。

再看看 Moment 主頁。 美麗的背景照片立即顯示了產品是什麼，而疊加的文字有一個明確的號召性用語：本質上，“點擊這裡獲取這個鏡頭”。

像這樣的大圖像，結合號召性用語，可以很好地解釋您的產品或讓您的客戶看到特定的東西。 大面積讓您可以非常詳細地突出產品，而正確的照片可以從第一秒開始為您銷售商品。

當然，您的網站設計不應只關注主頁上的一兩個大圖像。 您還應該在整個設計中使用清晰的產品圖像，無論是將購物者引導到特定頁面還是只是為了炫耀您的能力。

上面是 New Balance 商店的一個很好的例子。 這些圖像是簡單地通過在背景上覆蓋現有產品照片來創建的——bam，即時主頁推廣。 它們具有吸引力、激勵性，並向那些剛接觸品牌的人展示了 New Balance 所銷售的產品。

您沒有理由將產品圖像的使用限制在其各個頁面上。 開始在您的整個設計中使用它們，您將有更好的機會將全新的客戶一直引導到訂單確認屏幕。

行業和客戶的匹配

最後，雖然到目前為止我們為您提供的提示旨在幫助您找到具有您喜歡的品質的商店設計，但並不總是與您有關。 您還需要考慮客戶對該設計的期望。

您應該只選擇您認為與您的商店行業和客戶需求相匹配的設計。 如果您選擇一個功能良好但不適合您的公司的主題，從長遠來看，它甚至可能會傷害您。

如果您銷售的是高端時尚配飾，您選擇的設計應該是優雅時尚的，以體現這一點。 但是，如果您銷售的是運動鞋，那麼相同的設計在您的商店中可能會顯得格格不入——而且您不會喜歡它與您品牌的其他部分聯繫在一起的方式，這可能會導致快速重新設計。

看看這篇關於各個行業的適當主頁設計的帖子，以了解更多關於我們在談論尋找合適的匹配時的意思。 當您看到它時，您通常會知道它。

如何為您的 WooCommerce 商店選擇主題

考慮到這些提示，您應該做好更好的準備，以找到滿足您的需求並適合您的客戶的設計。 但是，您可能仍然不確定從哪裡開始尋找完美的 WooCommerce 主題。

如果您需要指導，這裡有一些建議：

• 從這裡開始。 我們的店面主題是免費的，並且與 WooCommerce 100% 兼容。 還有許多針對特定行業和商店類型的兒童主題。
• 進行搜索。 有很多網站提供免費或價格合理的主題——你可能只需要四處看看就可以找到它們。
• 聯繫 WooExpert。 如果您更願意走這條路，我們的許多 WooExperts 都可以為您定制主題，甚至從頭開始設計一個主題。 憑藉他們對 WooCommerce 的了解，他們成為了很好的合作夥伴！
• 閱讀最新趨勢和最佳實踐。 這份關於為什麼設計 UX 很重要的指南是一本很好的讀物。
• 最後，如果你真的有野心……試著設計你自己的主題。 我們的教育合作夥伴不只是教授 WooCommerce——他們中的許多人還提供 HTML、CSS 和網站設計課程，這些課程將幫助您定製或創建您喜歡的設計。

我們希望本指南能幫助您更好地掌握真正重要的設計功能。 有任何問題嗎？ 借給您知道，我們將很樂意為您提供幫助。