• 電子商務的格式塔原理：

隨著時間和技術在我們身邊流動， 開設在線商店比以往任何時候都更加容易。 人們傾向于將他們的業務在線上并賦予其電子商務網站的形式，以吸引吸引在線訪問者并提高銷售。

成功的電子商務網站包含多個組成部分，其中網站設計是必不可少的部分。 您的在線商店（包括您的產品， 登陸頁面， 報價， 等等。 是一個關鍵因素，必須引起注意。

在本文中， 我將分享一些電子商務網站設計技巧，以提高您的轉化率。 但是在那之前 讓我告訴您為什么專注于獨特的網站設計至關重要。

您是否知道網站的第一印象是與設計相關的94％，基于網站的整體美觀度對網站信譽的判斷是75％？

這證實了網站設計對信譽的影響， 轉換， 以及您網站的成功。 您幾乎沒有時間給您的網站受眾留下第一印象。 不僅如此 但是良好的網站設計還可以幫助您提高SEO并在SERP上對您的網站進行排名。 我們都知道這是我們不能忽視的一件事。

人們總是會在瀏覽您的網站時根據提供給他們的經驗來判斷您和您的業務。 在數字商業世界中， 您的網站設計是您的客戶代表。

當您經營電子商務業務時， 客戶在您的網站上執行交易。 如果他們不信任你 他們不會向您購買。

是的， 你沒聽錯。

為了轉換訪客， 他們有必要相信你， 網站設計在其中起著至關重要的作用。

讓我分享一些令人大開眼界的電子商務網站設計統計數據：

• 如果設計不當，會有57％的互聯網用戶不會向任何人推薦您的網站， 特別是在移動設備上。
• 38％的人將停止使用網站布局不吸引人的網站。
• 經歷過悲傷的經歷后，有88％的客戶不太可能返回網站。
• 加載速度慢的網頁損失了2美元。零售商每年損失60億美元。
• 75％的人根據網站設計來估計在線業務的信譽。

到目前為止，您必須了解創建高度優化的網站設計的重要性。 所有這些都是為了使您了解，電子商務網站的設計將決定用戶如何看待您的業務。 不良的網站設計可能會成為您企業信譽的潛在敵人。

現在進入文章最重要的部分。 讓我們檢查一些非常重要的電子商務網站提示，以提高轉化次數并抓住潛在客戶：

品牌對您的網站轉化影響很大。 讓我們來看看掌握了品牌塑造技巧的品牌， 蘋果。

蘋果公司在其整個頁面上都很少使用該品牌。 如果您瀏覽他們的網站，就會發現他們在目標網頁上巧妙地展示了品牌元素， 而不會使其用戶感到不知所措。

因此，在這里，我想從Apple的示例中引起您注意的要點：

• 獨特的徽標放置在可見的完美位置，同時又不至于壓倒一切。
• 簡短的文字，描述了組織的目標和目的，并將信息傳達給他們的聽眾。
• 結合時尚的產品形象。

建立品牌就像講一個經常被誤解的故事。 品牌不僅僅是您的徽標， 設計美學， 或公司目標； 而是所有這三個元素的組合。 因此， 將您的業務發展成品牌需要告訴受眾正確的故事， 聽眾想聽和閱讀的東西。

負空格在使您的網站看起來整潔的過程中起著重要作用。 但是，不應以使頁面顯得笨拙的空白的方式來實現空格。 反而， 專注于為您的網站元素提供一些空間。

在MakeWebBetter的主頁上查看以下示例：

您可以看到使用了負空格，以便訪客可以清晰地看到站點元素。 在設計電子商務網站時， 利用頁邊距和填充，讓您的頁面上的元素視覺上呼吸。

以下是將負空格視為獲勝網站設計策略的重要組成部分的一些注意事項：

• 空格使訪問者在創建頁面中斷時可以瀏覽您的頁面。
• 負數的空間 用戶可以磨練網站的特定項目。 您還可以突出顯示網站的集中消息。
• 負空格使網站所有者可以巧妙地控制頁面的流程。
• 最后也是最重要的 空白使您的重要站點元素（如CTA）看起來定義明確。

在電子商務網站設計中， 空格或負空格在影響用戶體驗方面起著重要作用，因此不宜過分考慮。

當用戶訪問您的網站時， 您希望他們采取快速行動。 但是許多網站所有者提供了很多選擇，使他們的用戶不知所措。

讓我們借助希克-海曼定律（Hick-Hyman law）來理解這一理論，該定律描述了一個人由于可能的選擇而做出決策所花費的時間。

根據法律， 我們為用戶提供的選擇更多； 他們決定的時間越長。 因此增加了他們放棄該網站的機會。 我們可以從這條定律得出另一個事實：

人們可以放棄。

是的， 你沒看錯。

當人們對所提供的選擇不知所措時， 他們傾向于放棄，這就是所謂的“分析癱瘓”。 如果您不想讓訪客陷入這種情況， 然后遵循以下技術：

• 限制選項的數量。
• 給出不同的選擇。
• 提出個性化建議。
• 鼓勵制定快速的決策策略。

《三分法則》是一種古老的技術，用于美術和攝影中，用于合成圖像等視覺內容， 電影， 和照片。 但是如今，這些技術已在Web設計人員中變得極為流行。

這一切都始于在設計站點時疊加兩條水平線和兩條垂直線，這些線均勻地間隔開。

點是指觀看場景時用戶的眼睛自然發生漂移的點， 無論是景觀還是網站。 現在，您知道了將重要的站點元素放置在何處，以便可以充分利用它們。

因此， 可以在任何類型的網站上實施這種組合策略。

組成是網站設計中的重要元素。 如果將字體和圖像以凌亂的形式呈現給用戶，那么您對字體和圖像的創造性有多大無關緊要。 因此， 三分法則是組織網頁總體布局的支持理論。

讓我們看一下Adamas：

在上面的示例中， 主頁和折頁上方的部分是應用第三規則的關鍵區域。 其背后的原因-折疊上方的部分是站點主要信息的存儲位置。

僅僅創建出色的網站設計還不夠。 您不僅必須創建一個令人印象深刻的網站，而且還要關注其性能。 快速加載頁面對于避免跳出率并允許訪問者停留在您的網站上非常重要。

人們討厭頁面加載緩慢，并且觀眾對此類網站失去了興趣。 因此， 讓他們對您的銷量下降負責。 您可以通過Google的Page Speed Insights了解您的網頁效果。

電子商務網站的主要目標是促進轉化，為此， 您需要減少頁面加載時間。 諸如壓縮圖像之類的基本內容可能是一個很好的救星。

其他一些頁面加載優化技術是：

• 投資快速，可靠的托管服務。
• 借助內容分發網絡（CDN）分發您的內容負載。
• 在您的網站上使用最少的彈出窗口。
• 通過刪除編碼錯誤的HTML來最大限度地減少代碼， CSS， 和您網頁上的JavaScript
• 減少重定向和斷開鏈接的數量。

始終在上載之前壓縮圖像，并使它們的大小不超過屏幕要求的大小。

您可以選擇任何免費或高級輕量級插件。

您是否在郵件或地鐵站中看到過招牌， 說“你在這里”？ 面包屑充當網站訪問者的招牌。

面包屑是網站所有者使用的一種導航方案，用于顯示訪問者在網站中的位置。

面包屑使訪問者可以根據到達的方式靈活地進入任何頁面， 避免迷路的感覺。 電子商務網站通常有數十個甚至數百個嵌套類別，因此， 增加您的訪客迷路的可能性。

面包屑還可以幫助用戶有效瀏覽產品并最終進行購買。 面包屑通過跨不同的網頁進行巨大的跳躍，可以使客戶無縫地遍歷。

顏色和對比度在使您的網站與其他網站區分開來方面起著重要作用。 對比確實對您的重要站點元素（例如CTA或徽標或什至是重要內容）具有公義。

查看以下示例：

MyProtein使用顏色和對比度的組合來突出顯示重要元素，例如品牌徽標和產品上的重要優惠。

格式塔原理也被稱為分組原理。 法律解釋了這樣一個論點，即頭腦有一種天生的傾向，可以根據某些規則來感知刺激中的模式。 這僅表示人腦傾向于自動將相似的對象分組。

根據交互設計基金會的說法：

人眼傾向于將設計中的相似元素視為完整的圖片， 形狀， 或小組 即使這些元素是分開的。

因此，我們感知到關系中的元素， 將它們與其他設計元素分開。 因此， 人類非常擅長填補“空白”或連接“點”。

能力受大小影響， 形狀， 和顏色。 該原理可以很容易地應用于電子商務網站。 讓我們看看如何。

在開始之前，讓我告訴您，格式塔（Gestalt）是“表格”的德語。 格式塔原理基于人的思維如何感知您網站上的視覺組件，并讓大腦創造出所感知視覺的圖像。

要將這一原理應用于您的電子商務網站，我們需要仔細研究格式塔原理的每個類別：

1。 地圖
人物是可以在視覺上與地面分離的物體。 圖形和地面原理背后的想法是使兩者在視覺上可區分，以避免永久性混淆。

讓我們通過一個真實的例子來理解這一點。 嚴重不加糖 正確遵循了將人物與地面分開的原則。

為了突出他們的產品和內容，他們將它們涂成明亮的顏色并保持白色。 通過保持微妙的背景并突出顯示重要元素，可以使您的在線商店的USP引人注目。

2。 接近
時間或空間上的接近度稱為接近度。 在電子商務環境中， 我們將討論不同元素的分組以創建更大的關聯。 元素分組對于在元素和視覺體驗之間建立無縫關系很重要。

在設計導航欄或您的網站時，鄰近性非常方便， Mashable在其導航欄中所做的事情。

在上面的快照中， 您可以通過將菜單中相同類別元素的緊密排列方式進行分組來查看。

亞馬遜是另一個完美的例子，可以將其元素正確地分組在一起。

亞馬遜在網格框架中列出其產品，其中使用狹窄的空白分隔產品， 微妙而深刻。

鄰近度對于導航欄非常重要， 列出產品， 甚至將信息從最低重要性到最高重要性進行分組，反之亦然。

3。 對稱
人類發現對稱性在美學上令人愉悅。 向您的網站元素添加對稱性可以創造和諧，并使訪客在查看對象時感到舒適。

這是網站對稱排列的一個很好的例子， HvD字體：

該頁面將其業務特征分解為相等的一半，并使用相同的灰度主題以相同的字體書寫。 該頁面不僅包含了圖形和地面原理。

盡管對稱是取悅觀眾的完美而簡單的方法， 您還可以不對稱地抓住用戶。 許多網站使用不對稱性作為平衡所有空白的元素。 類似于Xplode Marketing所做的事情：

Xplode以獨特的方式使用了不對稱性，以非常令人愉悅的方式展現了美學。

4， 相似
接近工作更接近相似性原理。 要么是為了形狀， 顏色， 尺寸， 方向， 或任何其他財產。 在同一附近顯示的對象之間應該具有連接性。

查看Influenster登陸頁面的以下示例：

通過清晰對齊的框可以輕松看到相似之處。 我知道， 每個框中的產品都不同，但是概念是通過整個頁面上一致的文本字段傳達的。

5， 關閉
對人腦進行訓練以填補不完整物體中的空白，因此， 直觀地完成該圖并將其視為一個整體。 這就是所謂的封閉原理。 正負空間接近一個，并形成一個整體。

讓我們通過一個例子來理解這個概念， 崇拜：

即使文字拼寫不清楚，但人腦仍可以輕松感知所寫內容。 由于封閉中文本的排列和對齊，即使字母不完整，也很容易解密。

6， 連續性
最終格式塔原理是連續性原理。 連續性對于生成可被裸眼跟隨并導致一致路徑的圖案是必不可少的。

讓我們看一下OscilloScope網站：

它使用連續性原理為網絡訪問者提供360度的視角，以便訪問者可以導航到所需部分。

我們作為人類有期望。 還， 有時，在某些情況下或某些地方，我們會有一些明顯的期望。 例如， 當您去餐廳時， 您期望獲得一些好食物來滿足您的饑餓感。

相似地， 消費者期望您的在線商店的某些頁面元素。 簡單的“立即購買產品頁面上的按鈕或價格。

嘗試使用您的CTA一直被認為是一種好習慣，但是在保持網頁相關性時要遵循基本原則。 它會影響您的訪客的購買決定。

創建登錄頁面時， 首先想到的是：

“用戶背景及其目標是什么？”

每個互聯網搜索者都是不同的，并且具有不同的搜索意圖和目標。 他們可能正在網上搜索相同的產品，但一個人可能有購買的目標，而另一個人則想探索并了解它。

推薦的技巧之一是針對具有不同目標網頁的付費訪問者和自然訪問者。

讓我給你看一個保險公司的例子：

您在下面看到的第一個屏幕截圖是由于搜索廣告而為訪問者創建的登錄頁面。

現在，這是來自同一域但針對不同受眾群體的另一個屏幕截圖。

付費受眾的內容要簡短明了， 以直接轉換為目標。 在第二個示例中 您會看到單詞數增加了， 打算對該頁面進行排名并吸引自然訪問者。

記住： 為您啟動的每個廣告系列設置不同的著陸頁。 這將為目標用戶創建唯一的上下文。

沒有滿意的訪問者，創建成功的網站設計策略是不完整的。 為了提高轉化率， 您需要給聽眾他們想要的東西。

以上幾點只是創建不違反任何規則的網頁的開始步驟。 但是，只有與真正的訪問者一起測試，才能確定成功。

為了創建用戶友好的頁面， 開始從訪問者及其行為數據中學習。 熱圖之類的基本工具可以使您了解用戶如何使用內容。

借助HotJar之類的工具， 您可以輕松地收集訪問者數據，例如點擊次數， 卷軸， 并移動。 您甚至可以直觀地查看訪問者在訪問您的電子商務商店時執行的活動。

記住， 您的電子商務結帳設計和流程也非常關鍵。 您應遵循電子商務結帳優化的最佳做法，以獲得最佳結果。

因此，這些是創建電子商務網站設計以在2020年促進轉化的一些基本技巧。 這些提示可以幫助您了解網頁設計的精髓，這是不可忽視的。 但是請記住，這些是通用步驟； 為制定最適合您的在線商店的特定策略， 您必須開始分析用戶行為。

這些提示可以為您提供一個起點，但涵蓋了整個旅程， 必須進行定期測試。 在我的經驗中， 通過測試和學習得出的觀察結果可以幫助您驗證自己的直覺并以指數方式提高轉化率。

客座作者

為DevriX博客寫作 我們的博客現在有800多個帖子，并且其受眾正在增長。 Here are our blog post submission guidelines[link] Contact us to propose your posts, 如果符合這些準則，我們將很高興發布您的內容。