全球展會(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步走

　　01首先考慮用戶旅程

　　在您開始草擬想法之前進(jìn)行研究并考慮主頁結(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ì)頁面的期望，您就可以開始研究信息架構(gòu)了。

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

　　Web page design

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

　　信息架構(gòu) (IA) 就是以清晰、直觀和明智的方式組織網(wǎng)站上的信息。想想您自己瀏覽網(wǎng)頁的經(jīng)歷：登陸一個(gè)計(jì)劃不周且無法在幾秒鐘內(nèi)證明其相關(guān)性的網(wǎng)頁令人沮喪，并且可能會(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è)主要特征：

　　Good navigation has three main characteristics:

　　簡(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)站上的位置。

　　ASOS 通過專為目標(biāo)受眾打造的清晰導(dǎo)航欄，在簡(jiǎn)化用戶購物體驗(yàn)方面做得非常出色。

　　02獲得正確的視覺層次結(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)常掃描頁面以快速判斷我們是否會(huì)在潛入之前找到我們需要的東西。

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

　　使用網(wǎng)格

　　Web page design

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

　　自然掃描模式的設(shè)計(jì)

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

　　F形圖案、Z形圖案

　　作為設(shè)計(jì)師，您可以很好地控制網(wǎng)站訪問者在掃描您的頁面時(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ì)頁面左側(cè)表現(xiàn)出強(qiáng)烈的偏好，而右側(cè)缺少重要內(nèi)容。為防止 F 掃描，您必須以將網(wǎng)站內(nèi)容引導(dǎo)至您認(rèn)為最重要的信息的方式格式化您的網(wǎng)站內(nèi)容。

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

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

　　在前兩段中包含最重要的信息

　　使用標(biāo)題和副標(biāo)題

　　粗體字或短語

　　可視化地對(duì)少量相關(guān)信息進(jìn)行分組

　　經(jīng)常使用項(xiàng)目符號(hào)和編號(hào)列表

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

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

　　Web page design

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

　　1. 尺寸

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

　　2. 顏色

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

　　3. 布局

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

　　4. 間距

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

　　5. 風(fēng)格

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

　　03關(guān)注號(hào)召性用語按鈕

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

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

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

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

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