網(wǎng)頁設(shè)計：每個設(shè)計師都應(yīng)該遵循的3個步驟

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

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

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

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

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

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

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

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

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

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

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

信息架構(gòu) (IA) 就是以清晰、直觀和明智的方式組織網(wǎng)站上的信息。想想您自己瀏覽網(wǎng)頁的經(jī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)站有多華麗也沒關(guān)系。

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

簡單明晰一致性

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

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

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

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

作為設(shè)計師，您可以確保看到最重要的信息并吸引用戶。如果沒有清晰的視覺層次結(jié)構(gòu)，頁面上的所有內(nèi)容似乎都同樣重要，讓人難以抗拒。各種設(shè)計原則有助于創(chuàng)建強大的視覺層次結(jié)構(gòu)。

使用網(wǎng)格

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

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

F形圖案Z形圖案

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 尺寸

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

2. 顏色

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

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

3. 布局

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

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

4. 間距

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

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

5. 風(fēng)格

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

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

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

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

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

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

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

確保您的按鈕看起來可點擊

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

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

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

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

關(guān)于聚頁建站

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

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

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

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

廣告

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