如何使用設計元素來增加轉化

已發表: 2018-01-03

conversion-design

想要提高您的網站轉化率？明顯的修改將包括你的行動號召，提出更有吸引力和引人入勝的東西。或者，也許是營銷和宣傳材料本身。畢竟，如果您在人們登陸您的網站之前就讓他們感興趣，他們肯定會轉化，對吧？

實際上，您可能會驚訝地發現這一切都始於設計。毫無疑問，您了解作為營銷經理或小企業主的基礎知識。在選擇標誌、顏色和主題以及裝備實體店時，您會處理相同的概念。這一切都歸結為演示文稿和您為訪問者提供的體驗。

近半數消費者（46.1%）感覺設計是決定一個公司或品牌是否可信的最佳方式。除此之外，如果網站醜陋，人們會直接放棄你的網站——總共有 38% 的訪問者，準確的說。

那麼，在確保您的網站具有吸引力的同時提高轉化潛力的最佳方法是什麼？答案是通過尊重設計的基本原則：顏色、尺寸、空間、線條、形狀、質地、價值。

1. 顏色

從根本上說，顏色用於激發情感、增強視覺吸引力並突出關鍵元素。您選擇的顏色會在更內在的層面上產生影響。當然，為一個不相干的主題選擇兩種顏色是不和諧的，但它為訪問者帶來的感受和情緒會阻礙他們的整體體驗。

橙色和紅色等溫暖、活躍的顏色往往會引發更生動的反應。藍色和紫色等冷色和被動色更令人愉悅，這就是為什麼如此多的研究表明藍色是幸福的顏色.

在為背景選擇顏色、其他視覺元素和口音、排版等時，您需要注意這一點。考慮您的網站、產品、服務的基調以及您想要實現的目標。如果你想給人一種更放鬆、更舒緩的印象，像各種深藍色這樣的冷色調會很好用。如果您想吸引註意力，明亮的顏色是明確的選擇，但同樣，您使用的顏色將取決於您產生的注意力。

您可以在這篇詳細的文章中閱讀有關使用色彩心理學提高轉化率的更多信息通過尼爾帕特爾。我喜歡Converter的這個情感輪描述顏色的不同情緒觸發：

clip_image002

如您所知，大小是項目或元素的大小。當談到設計元素時，尺寸通常是關於一件物品與其周圍其他物品的關係。元素越大，它在視覺上就越突出。因此，您可以使用大小來定義重要性、產生視覺興趣、吸引註意力、幾乎像故事情節一樣引導焦點等等。

如果您想確保標題或產品標題立即吸引訪問者的注意力，請使用與頁面上的其他所有內容相比突出的大而有吸引力的字體。這也是在不改變整個設計的情況下增加轉化率的好方法。例如，您的號召性用語可以擴大規模，使其從您的常規內容中脫穎而出。

如果您不熟悉代碼，那麼自己進行此類更改可能會令人生畏。幸運的是，如果您的網站在 WordPress 上運行，那麼有一些插件可以讓您輕鬆更改標題大小。嘗試免費插件自定義.

空間是各種元素周圍的空白區域，包括排版、文本周圍的邊距等等。最小的設計策略有利於使用更多的空間並強調確實存在的視覺組件。在某種程度上，它保持了一個乾淨的界面，可以幫助所有東西脫穎而出，看起來很漂亮。

空格可用於分隔元素或組。它可以分解文本——就像換行和新段落一樣——它甚至可以增加視覺吸引力。更重要的是，空間可以讓觀者的眼睛得到休息。由於它不包括任何重要的或包含的東西，它也可以用來引導觀眾的眼睛或焦點。

在特定對象、圖像或元素周圍放置足夠的空間，您就真正定義了它的重要性。事實上，它是如此重要，以至於它在您網站上的大量文本和內容中獨立存在。

如果您使用 WordPress，請尋找包含頁面構建器的主題。頁面構建器讓您可以更好地控制著陸頁上元素的大小和間距。我最喜歡的主題之一是突出主題.

嚴格來說，一條線是兩個相對點之間的標記。如您所知，線條有很多種，它們的大小和形狀各不相同。你有直線、波浪線、曲線、粗線、細線等。

線條——類似於空間——是現代設計的普遍組成部分. 您可以將它們用於各種事情，從簡單到高級。您可以使用重音線來強調單詞、短語或圖像。您可以使用單個跟踪線將元素連接在一起。當然，它並沒有就此結束。

使用線條來提高轉化率的最佳策略是使用它們來吸引您的 CTA 或潛在客戶表單。在 ConversionXL 發表的一項案例研究中，一家律師事務所拆分測試了許多視覺線索，看看哪一個在眼球追踪研究中表現最好。指向潛在客戶生成表格的箭頭是明顯的贏家。

clip_image004

形狀本質上是分解時高度和寬度的組合。在小學時，通常甚至更早，您就開始使用這些基本構建塊。有三角形、正方形、圓形和球體、六邊形等等。奇怪或不太常見的形狀可以用來吸引註意力——因此，為什麼停車標誌的形狀是這樣的，當然要結合鮮紅色。

形狀可以分為三種基本類型：幾何、自然和抽象。

您可以使用形狀來擴展部分、元素或區域的視覺吸引力。例如，將號召性用語包含在一個按鈕或另一個容器中——它本身就是一個形狀——是一種吸引註意力的好方法。我喜歡 Visual Website Optimizer 的這個例子：

clip_image005

實際上，我們將紋理理解為物品或表面的感覺。它是像混凝土一樣粗糙，還是像拋光的木頭一樣光滑？在設計中，這並不能完全轉化，因為您實際上無法感覺到頁面或屏幕上的元素。但是，您可以通過項目的外觀顯示紋理。

例如，眾所周知的砌磚圖案可用於為平淡的純色增加視覺深度和趣味性。當然，它是隱含的紋理，但它同樣有效，尤其是當您選擇合適的樣式時。

您可以使用磚、混凝土和石頭等紋理來暗示強度或依賴。您可以使用木紋風格來修飾外觀或優雅。這一切都回到了你如何以及在哪裡使用視覺紋理，以及當你查看設計時會引發什麼樣的情緒反應。

在一個案例研究中，一家收集二手手機的慈善機構在其潛在客戶生成表格中應用了紋理豐富的背景，捐款增加了 53%。這是一個可以用 CSS 完成的簡單技巧.

clip_image007

在營銷中，我們將價值定義為某種回饋的東西。產品或組件的內在價值是什麼？

在設計中，價值是通過一個區域的明暗來表示的。漸變——在現代設計中很流行——是最常見的價值呈現方式之一。它通常從暗到亮，或從固體到透明。

像這裡的許多其他組件一樣，您可以使用值或漸變來吸引眼球。更重要的是，它們可以用來強調特定主體或概念的重要性。您可以將您的 CTA 放置在漸變中最生動的部分，或者將您的 CTA 按鈕圍繞在彩色發光中讓它脫穎而出。

在下面的示例中，來自 Denis Absullin 在 Dribbble 上的概念設計，您可以在 CTA 按鈕周圍看到微光，以將產品添加到購物車。

clip_image009

設計是網站成功的關鍵組成部分，但它不必很複雜。只需牢記設計元素，就可以為能夠有效推廣您的品牌的出色網站奠定基礎。