搭建企業(yè)網(wǎng)站布局好才能提升用戶的轉(zhuǎn)化率

設(shè)計一個網(wǎng)頁，將美學美感與信息傳遞相結(jié)合，幾乎達到了魔幻般的壯舉，需要將藝術(shù)與科學完美融合。秘訣在于給予自己一點創(chuàng)作自由-同時堅持經(jīng)過驗證的結(jié)構(gòu)。

這是為任何企業(yè)網(wǎng)站構(gòu)建可提升轉(zhuǎn)化率的網(wǎng)頁布局的快速指南。

設(shè)計商業(yè)網(wǎng)站布局的3個步驟

步驟1：首先考慮用戶的訪問體驗

在甚至開始草繪想法之前，進行研究并考慮主頁結(jié)構(gòu)是至關(guān)重要的。在進行研究時，請確保不停的關(guān)注潛在客戶的期望。畢竟，在不了解目標用戶期望的情況下，設(shè)計提供出色用戶體驗的商業(yè)網(wǎng)站幾乎是不可能的。

無法提供出色用戶體驗的網(wǎng)站吸引大量流量的機會要少得多-畢竟，UX和SEO齊頭并進。有些用戶使用粗心的UX仍會吸引大量用戶。但是，擁有更好用戶體驗的公司，例如Uber，Airbnb和Slack，則更有可能重塑自己的行業(yè)。

研究用戶需求和期望的方法有很多，但是采訪和卡片分類可能是最受歡迎的方法。一旦深入了解目標受眾對頁面的期望，就可以開始研究信息體系結(jié)構(gòu)。

信息體系結(jié)構(gòu)（IA）旨在以一種清晰，直觀和明智的方式來組織網(wǎng)站上的信息。考慮一下您自己瀏覽網(wǎng)站的體驗：在計劃不周，幾秒鐘內(nèi)沒有證明其相關(guān)性的網(wǎng)頁上登陸令人不滿，并且很可能使您立即單擊關(guān)閉或返回按鈕。

好的IA會創(chuàng)建一個強調(diào)最重要元素的層次結(jié)構(gòu)，并保持訪客的參與度。如果沒有堅實的“骨架”可以建立，那么您將為失敗做好準備。

導(dǎo)航是您應(yīng)該盡早考慮的IA的關(guān)鍵方面之一。如果用戶找不到自己的網(wǎng)站，您的網(wǎng)站有多華麗都沒什么用。

良好的導(dǎo)航具有三個主要特征：

1. 簡單
2. 明晰
3. 一致性

您的目標應(yīng)該是引導(dǎo)用戶以盡可能少的點擊獲得他們正在尋找的信息。您可以在導(dǎo)航欄中使用清晰，簡潔，有用的語言，并在整個站點中采用一致的設(shè)計來實現(xiàn)這一目標。添加諸如面包屑導(dǎo)航功能還可以極大地提高您網(wǎng)站的可用性，從而幫助訪問者隨時了解他們在網(wǎng)站上的位置。

步驟2：正確獲得視覺層次結(jié)構(gòu)

強大的視覺層次結(jié)構(gòu)使引導(dǎo)用戶采取行動的網(wǎng)站布局設(shè)計與看上去美觀的網(wǎng)站有所不同。人類是極其令人難以置信的視覺生物，當涉及到在線消費內(nèi)容時，我們經(jīng)常掃描頁面以快速辨別是否在關(guān)閉之前就能找到所需的東西。

作為設(shè)計師，您可以確保看到最重要的信息并吸引用戶。

如果沒有清晰的視覺層次結(jié)構(gòu)，頁面上的所有內(nèi)容似乎都同樣重要，從而使其難以承受。

各種設(shè)計原則有助于創(chuàng)建強大的視覺層次。

使用網(wǎng)格

網(wǎng)格提供了一種強大的方法來創(chuàng)建頁面上不同元素之間的連接，并使布局設(shè)計有條理。網(wǎng)格顯示頁面上所有元素的交互方式，并確保您使用清晰的結(jié)構(gòu)來強調(diào)正確的信息。

自然圖案設(shè)計

人們可以使用兩種主要的眼動瀏覽模式來快速瀏覽內(nèi)容塊：

1. F形圖案
2. Z形圖案

作為設(shè)計師，您對用戶瀏覽頁面時的外觀有很多控制權(quán)，因此為用戶設(shè)置正確的路徑至關(guān)重要。我們經(jīng)常在博客和新聞網(wǎng)站等文本繁多的網(wǎng)站上遇到F形圖案。

值得注意的是如果用戶以F模式掃描您的網(wǎng)站，則意味著他們在頁面左側(cè)顯示出強烈的偏好，而在右側(cè)則丟失了重要內(nèi)容。為防止F掃描，您必須格式化網(wǎng)站上的內(nèi)容，以將其定向到您認為最重要的信息。

以下是幾種引導(dǎo)訪客閱讀您最重要內(nèi)容的方法：

• 在前兩段中包含最重要的信息
• 使用標題和副標題
• 大膽的重要單詞或短語
• 可視地分組少量相關(guān)信息
• 經(jīng)常使用項目符號和編號列表
  

阻止F形掃描的設(shè)計很適合于文本豐富的網(wǎng)站，例如博客和新聞網(wǎng)站。Z形圖案更適合于復(fù)制量最少且設(shè)計一些關(guān)鍵元素以吸引用戶注意的站點。登陸頁面經(jīng)常利用Z形圖案來引導(dǎo)用戶進行轉(zhuǎn)換。

視覺上優(yōu)先考慮關(guān)鍵要素

使用五個基本的設(shè)計構(gòu)建基塊來構(gòu)建直觀的視覺層次結(jié)構(gòu)：

1.尺寸

在任何設(shè)計中，將大小與重要性相關(guān)聯(lián)非常重要-最重要的信息應(yīng)該在頁面上最大，并且需要最多的關(guān)注。

2.顏色

請記住，顏色在設(shè)計中既可以充當組織工具，又可以充當品牌/個性工具。

3.布局

良好的格式會鼓勵訪問者在整個頁面上參與內(nèi)容，并更快地找到最重要的信息。

4.間距

空格和間距是設(shè)計人員用來吸引人們注意最重要的UI元素的工具

5.風格

選擇與您的品牌相匹配并突出您的品牌的樣式將有助于您更有效地傳達您的信息。

應(yīng)用三分法則

該原理要求您將設(shè)計分成三部分（三行三列），以查看線條相交的位置并找出設(shè)計的重點。這是一種有效的技術(shù)，可以啟動您的網(wǎng)站組成，并選擇元素的位置和框架。使用網(wǎng)格是將此技術(shù)應(yīng)用于任何設(shè)計的最簡單方法。

步驟3：專注于號召性用語按鈕

沒有號召性用語按鈕（CTA），任何網(wǎng)站都不完整。實際上，營銷人員會說它們是頁面上最重要的元素，所有努力都應(yīng)集中在讓人們點擊上。戰(zhàn)略性地使用設(shè)計良好的CTA可以極大地改善頁面的流程并引導(dǎo)用戶進行轉(zhuǎn)換，因此正確地進行此操作至關(guān)重要。

設(shè)計按鈕時，請記住以下幾點。

確保按鈕看起來可點擊

這聽起來似乎很明顯，但是您會感到奇怪的是，網(wǎng)頁設(shè)計師經(jīng)常拋棄清晰性而轉(zhuǎn)向創(chuàng)造力或一些古怪的新趨勢（是的，我是在談?wù)撃歉静恢滥茳c擊的按鈕）。為了確保用戶將元素理解為按鈕，請使用標準的視覺提示來幫助他們確定可單擊性，例如形狀，陰影和高光。

清楚標記所有按鈕

那里的按鈕告訴用戶下一步該做什么。如果副本含糊不清，那么人們就會思考而不是行動。與用戶明確一下，如果他們單擊將會發(fā)生什么。這是Netflix的一個聰明例子。

直觀地突出顯示最重要的CTA

設(shè)計獨特的CTA涉及三個重要方面：顏色，對比度和位置。使用醒目的顏色和足夠的對比度來幫助主按鈕突出顯示，并將其放置在用戶不會錯過的醒目位置。