你有沒有想過是什么造就了一個(gè)世界級(jí)別的展會(huì)/會(huì)議官網(wǎng)？是否希望有一個(gè)定制？這篇文章是建立促進(jìn)轉(zhuǎn)化的商業(yè)網(wǎng)站的快速指南。

全球展會(huì)主辦方的網(wǎng)站和會(huì)議研討會(huì)，86%的網(wǎng)站在美感和SEO架構(gòu)上是極為糟糕的。

設(shè)計(jì)一個(gè)世界級(jí)別的網(wǎng)站，將美學(xué)與信息的沖擊力相結(jié)合，實(shí)現(xiàn)近乎神奇的設(shè)計(jì)，需要將藝術(shù)與科學(xué)很好地結(jié)合起來。秘訣在于給自己一點(diǎn)創(chuàng)作自由——同時(shí)堅(jiān)持一個(gè)經(jīng)過驗(yàn)證的結(jié)構(gòu)。

設(shè)計(jì)商業(yè)網(wǎng)站布局的 3步走：

■第1步：首先考慮用戶旅程

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

一個(gè)不關(guān)注可訪問性或缺乏良好用戶體驗(yàn)的網(wǎng)站，吸引大量流量的機(jī)會(huì)要小得多——畢竟，用戶體驗(yàn)和搜索引擎優(yōu)化是齊頭并進(jìn)的。粗心的用戶體驗(yàn)仍然吸引了大量用戶。但優(yōu)步、Airbnb 和 Slack 等擁有更好用戶體驗(yàn)的公司更有機(jī)會(huì)重塑他們的行業(yè)。

研究用戶需求和期望的方法有很多，但訪談和卡片分類可能是最流行的方法。一旦您更深入地了解目標(biāo)受眾對(duì)頁(yè)面的期望，您就可以開始研究信息架構(gòu)了。

使用卡片設(shè)計(jì)網(wǎng)站內(nèi)容布局

卡片分類練習(xí)可以為您提供獨(dú)特的見解，這些見解將指導(dǎo)您在設(shè)計(jì)網(wǎng)站設(shè)計(jì)的整體結(jié)構(gòu)及其導(dǎo)航時(shí)做出決定。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖1

信息架構(gòu) (IA) 就是以清晰、直觀和明智的方式組織網(wǎng)站上的信息。想想您自己瀏覽網(wǎng)頁(yè)的經(jīng)歷：登陸一個(gè)計(jì)劃不周且無法在幾秒鐘內(nèi)證明其相關(guān)性的網(wǎng)頁(yè)令人沮喪，并且可能會(huì)讓您立即點(diǎn)擊關(guān)閉或返回按鈕。

好的 IA 將創(chuàng)建一個(gè)強(qiáng)調(diào)最重要元素并保持訪問者參與的層次結(jié)構(gòu)。如果沒有一個(gè)堅(jiān)實(shí)的骨架可以建立，基本上就是失敗。

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

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

簡(jiǎn)單明晰一致性

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

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖2

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

最好的網(wǎng)站都能做到這一點(diǎn)。強(qiáng)大的視覺層次結(jié)構(gòu)在引導(dǎo)用戶采取您希望他們采取的行動(dòng)的網(wǎng)站布局設(shè)計(jì)和看起來不錯(cuò)的網(wǎng)站之間產(chǎn)生了差異。人類是令人難以置信的視覺動(dòng)物，當(dāng)談到在線消費(fèi)內(nèi)容時(shí)，我們經(jīng)常掃描頁(yè)面以快速判斷我們是否會(huì)在潛入之前找到我們需要的東西。

作為設(shè)計(jì)師，您可以確?？吹阶钪匾男畔⒉⑽脩?。如果沒有清晰的視覺層次結(jié)構(gòu)，頁(yè)面上的所有內(nèi)容似乎都同樣重要，讓人難以抗拒。各種設(shè)計(jì)原則有助于創(chuàng)建強(qiáng)大的視覺層次結(jié)構(gòu)。

使用網(wǎng)格

網(wǎng)格提供了強(qiáng)大的自定義功能，可以在頁(yè)面上的不同元素之間創(chuàng)建連接，并為您的布局設(shè)計(jì)提供一種秩序感。網(wǎng)格顯示頁(yè)面上的所有元素如何相互交互，并確保您的響應(yīng)式設(shè)計(jì)使用清晰的結(jié)構(gòu)來突出正確的信息。

自然掃描模式的設(shè)計(jì)人們使用兩種主要的眼睛掃描模式來快速掃描內(nèi)容塊：

F形圖案Z形圖案

作為設(shè)計(jì)師，您可以很好地控制網(wǎng)站訪問者在掃描您的頁(yè)面時(shí)將看到的位置，因此為他們?cè)O(shè)置正確的路徑至關(guān)重要。我們經(jīng)常在博客和新聞網(wǎng)站等文字較多的網(wǎng)站上遇到 F 形圖案。

值得注意的是，2006 年發(fā)現(xiàn)這種閱讀模式的 Nielsen-Norman 小組最近重新審視了他們的研究并澄清了圍繞它的一些誤解：F 形模式實(shí)際上對(duì)用戶和企業(yè)不利，應(yīng)該避免。

值得注意的是，2006 年發(fā)現(xiàn)這種閱讀模式的 Nielsen-Norman 小組最近重新審視了他們的研究并澄清了圍繞它的一些誤解：F 形模式實(shí)際上對(duì)用戶和企業(yè)不利，應(yīng)該避免。

如果用戶以 F 模式掃描您的網(wǎng)站，則意味著他們對(duì)頁(yè)面左側(cè)表現(xiàn)出強(qiáng)烈的偏好，而右側(cè)缺少重要內(nèi)容。為防止 F 掃描，您必須以將網(wǎng)站內(nèi)容引導(dǎo)至您認(rèn)為最重要的信息的方式格式化您的網(wǎng)站內(nèi)容。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖3

阻止 F 形掃描的設(shè)計(jì)非常適合博客和新聞網(wǎng)站等文本較多的網(wǎng)站。 Z 形圖案更適合具有最少副本和一些旨在吸引用戶注意力的關(guān)鍵元素的網(wǎng)站。 著陸頁(yè)通常利用 Z 形圖案來引導(dǎo)用戶沿著轉(zhuǎn)化路徑前進(jìn)。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖4

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

在前兩段中包含最重要的信息使用標(biāo)題和副標(biāo)題粗體字或短語可視化地對(duì)少量相關(guān)信息進(jìn)行分組經(jīng)常使用項(xiàng)目符號(hào)和編號(hào)列表

努力為您的用戶做艱苦的工作，以盡量減少分心并阻止他們走捷徑。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖5

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

使用五個(gè)基本的設(shè)計(jì)構(gòu)建塊來構(gòu)建一個(gè)一目了然的 HTML 和 CSS 視覺層次結(jié)構(gòu)：

1. 尺寸

在任何設(shè)計(jì)中，將大小與重要性關(guān)聯(lián)起來很重要——最重要的信息應(yīng)該是頁(yè)面上大的信息，并且需要最多的關(guān)注。

2. 顏色

請(qǐng)記住，配色方案可以作為組織工具以及設(shè)計(jì)中的品牌/個(gè)性工具。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖6

3. 布局

良好的格式可以鼓勵(lì)訪問者參與整個(gè)頁(yè)面的內(nèi)容并更快地找到最重要的信息。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖7

4. 間距

白色空間或負(fù)空間是設(shè)計(jì)人員用來吸引人們注意最重要的 UI 元素的設(shè)計(jì)工具

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖8

5. 風(fēng)格

選擇與您的品牌相匹配并突出您的品牌的風(fēng)格將幫助您更有效地傳達(dá)您的信息。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖9

■第 3 步：關(guān)注號(hào)召性用語按鈕

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

以下是您在設(shè)計(jì)按鈕時(shí)需要牢記的內(nèi)容。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖10

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖11

確保您的按鈕看起來可點(diǎn)擊

這聽起來很明顯，但你會(huì)驚訝于網(wǎng)頁(yè)設(shè)計(jì)師放棄功能和清晰度以支持創(chuàng)造力或一些古怪的新 JavaScript 趨勢(shì)的頻率。為確保用戶理解元素是按鈕，請(qǐng)使用標(biāo)準(zhǔn)視覺提示來幫助他們確定可點(diǎn)擊性，例如形狀、陰影和高光。

聚頁(yè)建站 - 展會(huì)網(wǎng)站設(shè)計(jì)及開發(fā)配圖12

以視覺方式突出顯示最重要的 CTA

設(shè)計(jì)一個(gè)獨(dú)特的 CTA 有三個(gè)重要方面：顏色、對(duì)比度和位置。 使用具有足夠?qū)Ρ榷鹊男涯款伾珌韼椭靼粹o脫穎而出——并將它們放置在用戶不會(huì)錯(cuò)過的顯眼位置。

關(guān)于聚頁(yè)建站

matchPages 聚頁(yè)建站SaaS平臺(tái)，從設(shè)計(jì)創(chuàng)意開始的建站軟件服務(wù)。產(chǎn)品和服務(wù)包括品牌建站軟件產(chǎn)品、全球展會(huì)營(yíng)銷發(fā)布平臺(tái)、品牌策劃和數(shù)字營(yíng)銷廣告等一站式數(shù)字廣告的整體解決方案，是中國(guó)出海企業(yè)的數(shù)字營(yíng)銷增長(zhǎng)服務(wù)商。尤其擅長(zhǎng)為外貿(mào)企業(yè)和展會(huì)主辦方定制品牌建站和服務(wù)流程。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："網(wǎng)頁(yè)設(shè)計(jì)：每個(gè)設(shè)計(jì)師都應(yīng)該遵循的3個(gè)步驟"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

本文名稱：網(wǎng)頁(yè)設(shè)計(jì)：每個(gè)設(shè)計(jì)師都應(yīng)該遵循的3個(gè)步驟
文章轉(zhuǎn)載：http://aaarwkj.com/news19/313219.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、做網(wǎng)站、搜索引擎優(yōu)化、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)