• 電子商務(wù)的格式塔原理：

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

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

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

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

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

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

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

是的， 你沒聽錯(cuò)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

人們可以放棄。

是的， 你沒看錯(cuò)。

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

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

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

這一切都始于在設(shè)計(jì)站點(diǎn)時(shí)疊加兩條水平線和兩條垂直線，這些線均勻地間隔開。

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

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

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

讓我們看一下Adamas：

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

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

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

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

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

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

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

您可以選擇任何免費(fèi)或高級輕量級插件。

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

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

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

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

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

查看以下示例：

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

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

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

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

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

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

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

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

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

讓我們通過一個(gè)真實(shí)的例子來理解這一點(diǎn)。 嚴(yán)重不加糖 正確遵循了將人物與地面分開的原則。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“用戶背景及其目標(biāo)是什么？”

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

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

讓我給你看一個(gè)保險(xiǎn)公司的例子：

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

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

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

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

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

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

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

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

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

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

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

客座作者

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