商業(yè)網(wǎng)站設(shè)計應(yīng)遵循的三大步驟

　　設(shè)計一個網(wǎng)頁，將美學美感與信息傳遞相結(jié)合，幾乎達到了魔幻般的壯舉，需要將藝術(shù)與科學完美融合。秘訣在于給予自己一點創(chuàng)作自由-同時堅持經(jīng)過驗證的結(jié)構(gòu)。聽起來不可能?不用擔心，我們將為商業(yè)網(wǎng)站建設(shè)提供可提升轉(zhuǎn)化率的網(wǎng)站布局的快速指南。

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

　　第一步：首先考慮用戶的旅程

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

　　一個不關(guān)注可訪問性或缺乏出色用戶體驗的網(wǎng)站吸引大量流量的機會要微乎其微。畢竟，UX和SEO并駕齊驅(qū)。研究用戶需求和期望的方法有很多，但是卡片分類可能是最受歡迎的方法。在深入了解目標受眾對頁面的期望后，就可以開始研究信息體系結(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)站有多華麗都沒關(guān)系。

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

　　簡單

　　明晰

　　一致性

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

　　步驟2：正確獲得視覺層次

　　優(yōu)秀的網(wǎng)站都會做得這點。強大的視覺層次結(jié)構(gòu)使網(wǎng)站布局設(shè)計(引導(dǎo)用戶執(zhí)行您希望他們采取的行動)與看上去美觀的網(wǎng)站有所不同。人類是極其令人難以置信的視覺生物，當涉及到在線消費內(nèi)容時，我們經(jīng)常瀏覽頁面以快速辨別我們是否會在點擊之前找到所需的東西。

　　作為網(wǎng)站建設(shè)公司，我們必須確保用戶看到最重要的信息并吸引用戶。如果沒有清晰的視覺層次結(jié)構(gòu)，頁面上的所有內(nèi)容就顯得同樣重要，從而使其變得不堪重負。

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

　　使用網(wǎng)格

　　網(wǎng)格提供了強大的自定義功能，可用于在頁面上的不同元素之間創(chuàng)建連接，并使布局設(shè)計井然有序。網(wǎng)格顯示頁面上所有元素的交互方式，并確保您具有響應(yīng)式設(shè)計，該結(jié)構(gòu)使用清晰的結(jié)構(gòu)來強調(diào)正確的信息。

　　自然瀏覽圖案設(shè)計

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

　　F形圖案

　　Z字形

　　作為網(wǎng)站設(shè)計公司，我們可以完全控制網(wǎng)站訪問者在瀏覽您的頁面時的外觀，因此，至關(guān)重要的是要為他們設(shè)置正確的路徑以供他們遵循。我們經(jīng)常在博客和新聞網(wǎng)站等文本繁多的網(wǎng)站上遇到F形圖案。

　　值得注意的是，最新研究表明：F形模式實際上對用戶和企業(yè)不利，應(yīng)該避免。

　　如果用戶以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)鍵元素的網(wǎng)站。著陸頁通常利用Z形圖案來引導(dǎo)用戶進行轉(zhuǎn)換。

　　在視覺上對關(guān)鍵元素進行優(yōu)先級排序

　　使用五個基本的設(shè)計構(gòu)建基塊，可以一目了然地使用HTML和CSS構(gòu)造可視層次結(jié)構(gòu)：

　　1.尺寸

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

　　2.顏色

　　請記住，配色方案可以充當設(shè)計中的組織工具以及品牌/個性工具。

　　3.布局

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

　　4.間距

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

　　5.風格

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

　　應(yīng)用三分法則

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

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

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

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

　　確保按鈕看起來可點擊

　　這聽起來似乎很明顯，但是您會感到驚訝，網(wǎng)站設(shè)計師經(jīng)常放棄功能和清晰度，而轉(zhuǎn)向創(chuàng)造力或一些怪異的JavaScript新趨勢。為確保用戶理解元素是按鈕，請使用標準的視覺提示來幫助他們確定可單擊性，例如形狀，陰影和高光。

　　清楚地標記所有按鈕

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

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

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

　　您還想了解網(wǎng)站設(shè)計嗎?

　　我們渴望在網(wǎng)站設(shè)計這一領(lǐng)域更加深入地研究，那么在評論中讓我們知道您還想學習什么!我們會按你們的需求來撰寫新內(nèi)容。