設(shè)計(jì)友好網(wǎng)站用戶(hù)體驗(yàn)的9條基本原則

當(dāng)我們想到平面設(shè)計(jì)，我們通常會(huì)跳到表面：顏色，形狀，大小。

但網(wǎng)站的設(shè)計(jì)和重新設(shè)計(jì)遠(yuǎn)不止這些。

從我過(guò)去作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的經(jīng)驗(yàn)來(lái)看，我有時(shí)可能會(huì)過(guò)于關(guān)注這些視覺(jué)元素，但作為一個(gè)經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員和入站營(yíng)銷(xiāo)人員，我知道，要讓你的網(wǎng)站成為和好的，在形式和功能上都很美，這不僅僅是美學(xué)的問(wèn)題。

你還需要考慮可用性和用戶(hù)體驗(yàn)。

88%的在線消費(fèi)者表示，在經(jīng)歷了糟糕的體驗(yàn)之后，他們不太可能再回到某個(gè)網(wǎng)站。

還是覺(jué)得用戶(hù)體驗(yàn)不重要？看看這30個(gè)讓人大開(kāi)眼界的用戶(hù)體驗(yàn)統(tǒng)計(jì)數(shù)據(jù)?？紤]到這些因素，這里有9條設(shè)計(jì)友好用戶(hù)體驗(yàn)（UX）的基本原則，可以幫助您和您的設(shè)計(jì)師增加現(xiàn)場(chǎng)時(shí)間，提高轉(zhuǎn)化率，等等。

1.視覺(jué)層次引導(dǎo)眼睛

什么是視覺(jué)層次？這是有效的網(wǎng)頁(yè)設(shè)計(jì)和良好的用戶(hù)體驗(yàn)背后重要的原則之一。

正如我在我的文章“視覺(jué)層次結(jié)構(gòu)的15項(xiàng)重要原則”中所述，“在Luke Wroblewski與視覺(jué)層次結(jié)構(gòu)的交流中，他解釋說(shuō)，視覺(jué)層次結(jié)構(gòu)的目標(biāo)是快速與訪問(wèn)者進(jìn)行以下交流：

這是什么？（有用） 如何使用？（可用性） 我為什么要在乎？（理想）?！?p>在網(wǎng)站中以正確的方式使用視覺(jué)層次結(jié)構(gòu)時(shí)，您將向用戶(hù)顯示他們下一步需要去哪里以及他們需要做什么。它向他們顯示了什么是重要的，哪些不是那么重要的-無(wú)需漫無(wú)目的地思考或徘徊。

團(tuán)隊(duì)合作的Project主頁(yè)在他們網(wǎng)站上使用視覺(jué)層次結(jié)構(gòu)方面做得很好。

標(biāo)頭很大，可以準(zhǔn)確地告訴用戶(hù)他們的產(chǎn)品是什么，然后下面的描述性段落為您提供了更多詳細(xì)信息。閱讀有關(guān)他們的工作和項(xiàng)目管理應(yīng)用程序的信息后，“免費(fèi)入門(mén)”可以清楚地說(shuō)明團(tuán)隊(duì)合作接下來(lái)要做什么。

2.留白保持焦點(diǎn)

我知道您會(huì)說(shuō)：“我們是否應(yīng)該盡我們所能保持盡可能多的優(yōu)勢(shì)？”

答案是肯定的，但這并不意味著您應(yīng)該在該區(qū)域內(nèi)塞滿(mǎn)盡可能多的信息。有效的設(shè)計(jì)從空白中受益匪淺。它可以幫助您的設(shè)計(jì)通透。

用網(wǎng)站設(shè)計(jì)的術(shù)語(yǔ)來(lái)說(shuō)，留白是指“圖形，列，圖像，文本，邊距和其他元素之間的空間?！辈灰欢ㄊ前咨?。它也可以是在空白區(qū)域中使用的顏色或圖案，以幫助分解布局。

Invision的首頁(yè)非常出色，可以使用空格來(lái)幫助區(qū)分和關(guān)注產(chǎn)品的每個(gè)功能。

間距可以幫助您區(qū)分一個(gè)部分的結(jié)尾和另一部分的開(kāi)頭，同時(shí)還可以幫助您專(zhuān)注于手頭的描述，而不會(huì)被無(wú)關(guān)的部分所干擾。

3.導(dǎo)航應(yīng)該反映用戶(hù)的旅程

登陸您的網(wǎng)站不應(yīng)該像追蹤藏寶圖一樣。您不希望別人迷失方向而感到沮喪或挫?。ɡ纾?qǐng)求咨詢(xún)，注冊(cè)免費(fèi)試用版，請(qǐng)求演示等等）。因此，您需要確保導(dǎo)航非常清晰。

將您的導(dǎo)航視為一系列路牌。如果您的信號(hào)不清楚，不準(zhǔn)確和直接，那么潛在客戶(hù)將如何了解您的產(chǎn)品或服務(wù)？他們?cè)趺粗涝谀睦锟梢哉业剿麄兿胍臇|西？

建立導(dǎo)航時(shí)，請(qǐng)牢記買(mǎi)家角色的用戶(hù)歷程，并盡可能輕松地完成此過(guò)程。使用他們會(huì)識(shí)別并引起共鳴的詞，并將決策過(guò)程中重要的頁(yè)面浮出水面。不要藏起來(lái)。

4.響應(yīng)式是必須的

如果您的網(wǎng)站現(xiàn)在沒(méi)有響應(yīng)式，則需要繼續(xù)進(jìn)行網(wǎng)站重新設(shè)計(jì)。

越來(lái)越多的人在移動(dòng)設(shè)備上進(jìn)行搜索，因?yàn)樗麄円恢痹诼猛局小?shí)際上，UX Measure的信息圖表指出：“ 52％的用戶(hù)表示，糟糕的移動(dòng)體驗(yàn)使他們與公司互動(dòng)的可能性降低?！?/p>

確保網(wǎng)站具有移動(dòng)響應(yīng)能力，并且經(jīng)過(guò)完全跨瀏覽器和多設(shè)備測(cè)試，以確保您的用戶(hù)無(wú)論在何處或如何瀏覽您的網(wǎng)站都擁有出色的體驗(yàn)。

Google的算法還為移動(dòng)友好型網(wǎng)站提供了豐厚的回報(bào)。

5. 一致性可以避免混淆

一致性是營(yíng)銷(xiāo)中幾乎所有事情的關(guān)鍵，特別是對(duì)于網(wǎng)站的可用性和用戶(hù)體驗(yàn)。作為一個(gè)市場(chǎng)營(yíng)銷(xiāo)人員，你希望你的網(wǎng)站有一致的外觀和感覺(jué)，從顏色，字體，大小，甚至布局和語(yǔ)氣。

這種一致性有助于從一個(gè)頁(yè)面到另一個(gè)頁(yè)面創(chuàng)建流暢、有凝聚力的體驗(yàn)，最小化混亂，使您的站點(diǎn)更容易導(dǎo)航。

6.有些事情永遠(yuǎn)都不會(huì)改變

每個(gè)人都想成為不斷變化的網(wǎng)站世界的領(lǐng)跑者，是的，這聽(tīng)起來(lái)不錯(cuò)，但并沒(méi)有疏遠(yuǎn)觀眾的風(fēng)險(xiǎn)。在將近30年的時(shí)間里，互聯(lián)網(wǎng)已成為我們生活的主流，消費(fèi)者在瀏覽網(wǎng)站時(shí)抱有一定的期望。

例如，當(dāng)他們點(diǎn)擊導(dǎo)航角上的logo時(shí)，他們希望訪問(wèn)您的主頁(yè)。在設(shè)計(jì)網(wǎng)站時(shí)，請(qǐng)不要偏離這些約定，因?yàn)樗鼈冏罱K會(huì)使您的用戶(hù)困惑并帶來(lái)負(fù)面的體驗(yàn)。

如果您想嘗試新的東西，請(qǐng)先對(duì)其進(jìn)行A / B測(cè)試，然后查看其性能，然后再全面推廣。您可以使用HubSpot的A / B測(cè)試來(lái)執(zhí)行此操作，或者如果您不在HubSpot上，請(qǐng)嘗試使用Optimizely。

7.樹(shù)立現(xiàn)實(shí)期望建立信任

您要做的*一件事是誤導(dǎo)潛在客戶(hù)。忠實(shí)于您的產(chǎn)品或服務(wù)的功能，并通過(guò)向訪問(wèn)者確切展示他們所得到的東西來(lái)設(shè)定切合實(shí)際的期望。

如果您銷(xiāo)售軟件，則可以通過(guò)顯示屏幕快照（包括實(shí)際產(chǎn)品的不同角度的照片）或制作視頻來(lái)進(jìn)行截圖。根據(jù)UX Measure的信息圖表，視頻有助于說(shuō)服73％的人購(gòu)買(mǎi)產(chǎn)品或服務(wù)。因此，如果您的公司中沒(méi)有一個(gè)，則開(kāi)始集思廣益可能是明智的。

您還可以通過(guò)誠(chéng)實(shí)和坦誠(chéng)面對(duì)服務(wù)條款，條件和價(jià)格等方面來(lái)設(shè)置切合實(shí)際的期望。如果您需要幫助來(lái)創(chuàng)建一個(gè)很棒的定價(jià)頁(yè)面，Talia Wolf會(huì)有一篇很棒的文章26 Pricing Page Examples and Best Practices，它將幫助您朝正確的方向發(fā)展。

7. 設(shè)定現(xiàn)實(shí)的期望可以建立信任

你最不想做的事情就是誤導(dǎo)客戶(hù)。忠于你的產(chǎn)品或服務(wù)的功能，通過(guò)向你的訪客展示他們所得到的東西來(lái)設(shè)定現(xiàn)實(shí)的期望。

如果你銷(xiāo)售一款軟件，你可以通過(guò)顯示屏幕截圖，包括不同角度的照片(如果是實(shí)物產(chǎn)品)，或者制作視頻來(lái)做到這一點(diǎn)。根據(jù)UX Measure的信息圖表，視頻幫助73%的人購(gòu)買(mǎi)產(chǎn)品或服務(wù)。所以，如果你的公司沒(méi)有這樣的計(jì)劃，那么開(kāi)始頭腦風(fēng)暴也許是明智的。

你也可以通過(guò)誠(chéng)實(shí)和坦率地對(duì)待服務(wù)條款、條件和價(jià)格來(lái)設(shè)定現(xiàn)實(shí)的期望。

8. 測(cè)試是你的朋友

當(dāng)你設(shè)計(jì)你的網(wǎng)站并構(gòu)建你的網(wǎng)站結(jié)構(gòu)時(shí)，你應(yīng)該像你的訪問(wèn)者一樣思考他們將如何與之互動(dòng)。不幸的是，即使你的出發(fā)點(diǎn)再好，有時(shí)你還是會(huì)犯錯(cuò)。

要想知道你的訪問(wèn)者是如何真正參與到你的網(wǎng)站中來(lái)的，做一些用戶(hù)測(cè)試，并通過(guò)熱圖和錄音收集一些數(shù)據(jù)。這些數(shù)據(jù)將幫助您為用戶(hù)提供他們所需要的內(nèi)容，并全面提高站點(diǎn)的性能。

9. 簡(jiǎn)單

確保你的網(wǎng)站是簡(jiǎn)單的，不會(huì)讓你的訪問(wèn)者想太多。你的網(wǎng)站的目標(biāo)應(yīng)該是讓你的訪客轉(zhuǎn)化成為一個(gè)客戶(hù)，讓他們更容易找到他們想要的答案。

從用戶(hù)體驗(yàn)的角度來(lái)看，我們HubSpot的朋友們建議你牢記以下幾點(diǎn):

顏色——少即是多。CrazyEgg說(shuō):“借用室內(nèi)和時(shí)尚設(shè)計(jì)，60-30-10規(guī)則規(guī)定了三種顏色應(yīng)該在不同程度上使用(60%，30%，10%)來(lái)創(chuàng)造友好的和諧。“你*可以超過(guò)三個(gè)，但我不會(huì)超過(guò)五個(gè)。

字體——就像顏色一樣，看你用了多少。就我個(gè)人而言，我會(huì)堅(jiān)持最多兩個(gè)，一個(gè)用于網(wǎng)站的大部分，第二個(gè)用于標(biāo)題。只要確保無(wú)論你選擇什么，它都是易于閱讀的。

設(shè)計(jì)值

當(dāng)你在設(shè)計(jì)中質(zhì)疑一個(gè)設(shè)計(jì)元素時(shí)，把這個(gè)問(wèn)題放在腦后是很重要的:“這個(gè)設(shè)計(jì)元素能帶來(lái)任何價(jià)值嗎?”

這是我們?cè)诔啥紕?chuàng)新經(jīng)常問(wèn)自己的問(wèn)題。

僅僅因?yàn)樗芸?，或者看起?lái)很棒，并不意味著它是你的領(lǐng)導(dǎo)一代或銷(xiāo)售祈禱的答案。設(shè)計(jì)的每個(gè)方面都需要帶來(lái)一些東西，幫助您創(chuàng)建一個(gè)整體難忘的用戶(hù)體驗(yàn)。

文章題目：設(shè)計(jì)友好網(wǎng)站用戶(hù)體驗(yàn)的9條基本原則
URL地址：http://www.bm7419.com/news/208447.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有用戶(hù)體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)