11個網(wǎng)站設計技巧，可提高在線商店的轉(zhuǎn)化率

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

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

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

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

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

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

人們總是會在瀏覽您的網(wǎng)站時根據(jù)提供給他們的經(jīng)驗來判斷您和您的業(yè)務。 在數(shù)字商業(yè)世界中， 您的網(wǎng)站設計是您的客戶代表。

當您經(jīng)營電子商務業(yè)務時， 客戶在您的網(wǎng)站上執(zhí)行交易。 如果他們不信任你 他們不會向您購買。

是的， 你沒聽錯。

為了轉(zhuǎn)換訪客， 他們有必要相信你， 網(wǎng)站設計在其中起著至關(guān)重要的作用。

讓我分享一些令人大開眼界的電子商務網(wǎng)站設計統(tǒng)計數(shù)據(jù)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

根據(jù)法律， 我們?yōu)橛脩籼峁┑倪x擇更多； 他們決定的時間越長。 因此增加了他們放棄該網(wǎng)站的機會。 我們可以從這條定律得出另一個事實：

人們可以放棄。

是的， 你沒看錯。

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

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

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

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

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

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

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

讓我們看一下Adamas：

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

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

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

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

其他一些頁面加載優(yōu)化技術(shù)是：

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

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

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

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

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

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

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

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

查看以下示例：

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

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

根據(jù)交互設計基金會的說法：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們看一下OscilloScope網(wǎng)站：

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

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

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

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

創(chuàng)建登錄頁面時， 首先想到的是：

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

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

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

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

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

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

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

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

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

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

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

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

記住， 您的電子商務結(jié)帳設計和流程也非常關(guān)鍵。 您應遵循電子商務結(jié)帳優(yōu)化的最佳做法，以獲得最佳結(jié)果。

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

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

客座作者

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