用戶體驗(yàn)設(shè)計(jì)的實(shí)踐：如何使網(wǎng)站頁(yè)面更易于瀏覽

每一天，我們都會(huì)被線上、線下充斥的大量信息壓得喘不過(guò)氣來(lái)?；谛碌募夹g(shù)和快速的互聯(lián)網(wǎng)連接，人們生產(chǎn)出遠(yuǎn)大于他們消費(fèi)能力的內(nèi)容。面對(duì)眾多的網(wǎng)站和應(yīng)用，用戶會(huì)選擇瀏覽頁(yè)面，找到對(duì)他們的有用之處，而不是逐字逐句的閱讀頁(yè)面的所有內(nèi)容。因此，可瀏覽性是現(xiàn)階段網(wǎng)站可用性的重要因素之一。今天這篇文章會(huì)對(duì)“使數(shù)字化產(chǎn)品易于瀏覽的方法”進(jìn)行探討，并且提出建議。

1.定義

動(dòng)詞“scan”應(yīng)用到頁(yè)面或屏幕時(shí)，表示掃一眼、翻頁(yè)或草草的閱讀。因此，可瀏覽行是將內(nèi)容和導(dǎo)航元素展現(xiàn)為一種易于瀏覽的布局方式。在訪問(wèn)網(wǎng)站時(shí)（尤其是第一次訪問(wèn)），用戶會(huì)快速瀏覽頁(yè)面來(lái)判斷是否有他們需要的內(nèi)容：多單字、句子、圖像或動(dòng)畫(huà)，內(nèi)容頁(yè)面的任何一個(gè)部分都可能引起用戶的注意。

順便說(shuō)一句，”瀏覽“并不是新出現(xiàn)的一種行為：幾十年來(lái)，人們?cè)趯?zhuān)心閱讀文章之前，經(jīng)常會(huì)做同樣的事情-瀏覽新雜志或報(bào)紙。而且，從屏幕上閱讀比在紙上閱讀更容易感到疲憊，所以只要用戶愿意，他們可以隨時(shí)隨地的訪問(wèn)網(wǎng)站。

2.可瀏覽性為什么如此重要？

大約十年前，對(duì)于”人們?cè)诰W(wǎng)站頁(yè)面上是如何閱讀的“這一問(wèn)題，雅各布·尼爾森（Jacob Nielsen）做了簡(jiǎn)潔的回答：”他們不閱讀。人們只會(huì)瀏覽頁(yè)面并挑出有用的單字和句子，幾戶不會(huì)逐字逐句的閱讀。“從那時(shí)起，這一情況并沒(méi)有很大的改變：如果不確定網(wǎng)站是否符合需求，那就不要花費(fèi)時(shí)間和精力去開(kāi)發(fā)它。在前幾分鐘的瀏覽中，若沒(méi)有能夠吸引到客戶的內(nèi)容，那么他們離開(kāi)的風(fēng)險(xiǎn)是很高的。不論什么類(lèi)型的網(wǎng)站，可瀏覽性質(zhì)都是本質(zhì)上對(duì)用戶友好的重要因素之一。

3.如何辨別一個(gè)網(wǎng)站是否易于瀏覽？

試著把自己當(dāng)作首次使用頁(yè)面的用戶，并且回答兩個(gè)問(wèn)題：

1.前幾分鐘看到的內(nèi)容，是否符合目標(biāo)受眾對(duì)此頁(yè)面的預(yù)期？

2.觀看的前幾分鐘，你能否對(duì)頁(yè)面展示的信息類(lèi)型有清晰的認(rèn)知？

如果你不能保證以上兩個(gè)問(wèn)題都是肯定回答，那可能是時(shí)候該去考慮一下如何增強(qiáng)頁(yè)面的可瀏覽行了，這點(diǎn)是值得投入時(shí)間的，因?yàn)榭蔀g覽行高的頁(yè)面在以下幾方面更高效：

1.用戶可以更快的完成任務(wù)，實(shí)現(xiàn)目標(biāo)

2.用戶在搜索需要的內(nèi)容時(shí)，少犯錯(cuò)

3.用戶可快速理解網(wǎng)頁(yè)的結(jié)構(gòu)和布局

4.降低網(wǎng)站跳出率

5.提高用戶留存

6.網(wǎng)站的外觀和使用體驗(yàn)更可靠

7.搜索引擎優(yōu)化率受正面影響

界面設(shè)計(jì)師要考慮的最重要的內(nèi)容是眼動(dòng)瀏覽模式，它能顯示出用戶在最初幾秒是如何網(wǎng)頁(yè)進(jìn)行交互的。當(dāng)明白了用戶是如何瀏覽頁(yè)面或屏幕的，你就可以確定內(nèi)容的優(yōu)先級(jí)，并且將用戶需要的內(nèi)容放在最顯眼的區(qū)域。尼爾森·諾曼集團(tuán)支持這一用戶研究領(lǐng)域，使設(shè)計(jì)師和可用性專(zhuān)家對(duì)用戶行為和交互有更好的理解。

通過(guò)對(duì)不同用戶眼部追蹤的實(shí)驗(yàn)數(shù)據(jù)收集、分析，得出訪問(wèn)者通常會(huì)沿著集中典型的模式瀏覽頁(yè)面：

1.”Z”型

這種模式對(duì)于具有規(guī)整的信息展示和弱化視覺(jué)層級(jí)的網(wǎng)頁(yè)來(lái)說(shuō)，是非常典型的。

2.曲線型（多個(gè)”Z“型）

另一個(gè)模式的特點(diǎn)是曲線型，通常用于視覺(jué)上被內(nèi)容模塊劃分的頁(yè)面。讀者的視線時(shí)從左到右的，由左上角開(kāi)始，從整個(gè)頁(yè)面上移動(dòng)到右上角，瀏覽初始交互區(qū)域的信息。

3.”F“型

由尼爾森·諾曼集團(tuán)的探索活動(dòng)提出，該模式表明用戶經(jīng)常演示以下交互流程：

A.橫向閱讀。 用戶首先通常在內(nèi)容區(qū)域的上部橫向移動(dòng)，這一初始元素構(gòu)成字母”F“上面的一橫。

B.縱向?yàn)g覽、再橫向?yàn)g覽。此次橫向?yàn)g覽的覆蓋區(qū)域比之前的要小，這一補(bǔ)充元素構(gòu)成了字母”F“下面的一橫。

C.縱向?yàn)g覽頁(yè)面左側(cè)的內(nèi)容。有時(shí)，這是一種比較緩慢的、系統(tǒng)的瀏覽，在眼部熱追蹤圖上表現(xiàn)為實(shí)心條紋；有時(shí)，用戶瀏覽的較快，那么生成的時(shí)點(diǎn)狀熱圖。最后這一元素構(gòu)成了字母”F“的根莖。

1.優(yōu)先考慮視覺(jué)層級(jí)的內(nèi)容

基本上，視覺(jué)層級(jí)是一種遵循人類(lèi)的感知、以最自然的方式來(lái)排列和組織頁(yè)面內(nèi)容的方法，其背后的主要目標(biāo)是讓用戶了解每個(gè)內(nèi)容的重要程度。因此，如果應(yīng)用了視覺(jué)層次機(jī)構(gòu)這一方式，用戶將首先看見(jiàn)關(guān)鍵內(nèi)容。

通過(guò)比較這兩版設(shè)計(jì)方案，可以看出有圖的方案層級(jí)更加明確，通過(guò)字號(hào)、字色、字重等屬性區(qū)分主次信息，達(dá)到快速獲取有用內(nèi)容的目的。

比如：我們看博客里的文章時(shí)，首先看到的時(shí)標(biāo)題，其次是副標(biāo)題，然后才是內(nèi)容副本，這難道意味著副本里的信息不重要嗎？當(dāng)然不是，但是這種方式會(huì)使用戶注意到標(biāo)題和副標(biāo)題，從而了解這篇文章是否有趣、有用而不必讀完全篇內(nèi)容；再者，如果標(biāo)題和副標(biāo)題設(shè)計(jì)合理并告知用戶文章的結(jié)構(gòu)和內(nèi)容，這將是促進(jìn)用戶繼續(xù)閱讀的因素。

另一方面，如果看到龐大而冗長(zhǎng)的文章沒(méi)有被分成幾個(gè)模塊，用戶會(huì)感到害怕，因?yàn)樗麄儾恢篱喿x這篇文章要花費(fèi)多長(zhǎng)時(shí)間以及這篇文章是否值得傾注時(shí)間和精力。

下面列舉了一些輔助建立視覺(jué)層級(jí)的重要因素：

A.尺寸

根據(jù)界面元素的大小屬性，一些想要突出的元素放大顯示，因?yàn)榇蟮脑貢?huì)首先吸引人們的閱讀視線。如下圖：主標(biāo)題”邀請(qǐng)函“三個(gè)字放大顯示，用戶可以快速理解主題，層次關(guān)系更明朗，界面的觀感上有很大的提升。

B.顏色

顏色的選擇和組合對(duì)視覺(jué)層級(jí)至關(guān)重要，他們可以幫助用戶區(qū)分核心元素。顏色有自己的層次結(jié)構(gòu)，這是由影響用戶心智的模型來(lái)決定的。大膽的顏色，如紅色和橙色，很容易被注意到，所以設(shè)計(jì)師常用這種方法來(lái)突出顯示或設(shè)置對(duì)比度。

下面的例子，有沒(méi)有發(fā)現(xiàn)視覺(jué)重心被有色彩的地方先吸引過(guò)去了，并且層次也有了，這樣對(duì)用戶來(lái)說(shuō)就有了一個(gè)閱讀的先后次序。

C.對(duì)比

對(duì)比的核心思想是避免頁(yè)面上的元素過(guò)于相似。通過(guò)對(duì)比，我們需要讓頁(yè)面上重要的元素首先引起注意，而不是整體都十分的平庸，讓用戶感覺(jué)無(wú)從下手。

一般情況下我們可以通過(guò)上述提到的字體、粗細(xì)、大小、色彩的對(duì)比方式，突出頁(yè)面的重要信息、增加頁(yè)面的節(jié)奏感。

D.接近

距離較短或互相接近的部分容易組成整體；人眼對(duì)距離臨近的信息更容易先去關(guān)注。在視覺(jué)手法上，元素距離上一個(gè)焦點(diǎn)近的，視覺(jué)層級(jí)高。如下圖，第一層級(jí)的頭圖（焦點(diǎn)圖）和左下側(cè)的小圖比較臨近，實(shí)現(xiàn)容易往左下角運(yùn)動(dòng)。

E.負(fù)空間

負(fù)空間（留白）不僅是設(shè)計(jì)元素之間的區(qū)域，實(shí)際上是每個(gè)視覺(jué)構(gòu)圖的核心部分，能讓界面元素引起用戶的注意。此外，負(fù)空間有助于強(qiáng)調(diào)用戶需要高度關(guān)注的特定元素，是創(chuàng)建視覺(jué)層次結(jié)構(gòu)的有效工具，因此設(shè)計(jì)師需要平衡使用。如下圖：盡管沒(méi)有分割線，也可以通過(guò)負(fù)空間的方式將各個(gè)模塊清晰的區(qū)分，做到各自獨(dú)立、整體獨(dú)立、準(zhǔn)確傳遞信息的效果。

F.重復(fù)

在不同頁(yè)面采用重復(fù)的頁(yè)面布局，使用戶形成一定的閱讀習(xí)慣，快速有效的查詢需要的信息。

下圖為淘寶首頁(yè)&店鋪寶貝頁(yè)面，他們都采用了相同的頁(yè)面布局和版式設(shè)計(jì)，減少用戶的學(xué)習(xí)成本。

以上這幾點(diǎn)因素有利于設(shè)計(jì)師將元素、鏈接、圖像的集合轉(zhuǎn)化為和諧的、可瀏覽的頁(yè)面布局系統(tǒng)。

2.將核心導(dǎo)航放置在網(wǎng)頁(yè)頂部

上述提到的所有的眼動(dòng)瀏覽模式都表明，特定用戶無(wú)論遵循哪種模式，其瀏覽過(guò)程都會(huì)從頁(yè)面頂部的水平區(qū)域開(kāi)始。頂部導(dǎo)航，是顯示交互和品牌的關(guān)鍵區(qū)域，也可支持雙方的策略，這是用戶體驗(yàn)設(shè)計(jì)師、內(nèi)容運(yùn)營(yíng)及市場(chǎng)營(yíng)銷(xiāo)專(zhuān)家將網(wǎng)頁(yè)頂部設(shè)計(jì)視為重要內(nèi)容的根本原因。

另一方面，頂部導(dǎo)航要簡(jiǎn)潔清晰：太多信息會(huì)讓人無(wú)法集中精力。如果將所有內(nèi)容都放置在頁(yè)面頂部，會(huì)造成頁(yè)面布局混亂。因此，在每種情況下，都必須分析核心受眾的目標(biāo)、他們?nèi)绾闻c網(wǎng)站背后的業(yè)務(wù)目標(biāo)交叉以及基于這些，能提煉出哪些信息或者導(dǎo)航作為最重要的部分放置在頂部。

例如：如果是大型電子商務(wù)網(wǎng)站，那么搜索功能必須立即可見(jiàn)，并且能經(jīng)常在頂部找到，以便從任意交互點(diǎn)進(jìn)行訪問(wèn)；對(duì)于小型企業(yè)而言，不需要搜索功能，但立即見(jiàn)到產(chǎn)品的鏈接是至關(guān)重要的。

3.保持負(fù)空間平衡

負(fù)空間（通常稱(chēng)為留白區(qū)）指的是頁(yè)面布局中的留白區(qū)域，不僅存在于布局中對(duì)象的周?chē)?，而且存在于他們之間的內(nèi)部。負(fù)空間是頁(yè)面或屏幕上所有對(duì)象的呼吸空間，它定義了對(duì)象的界限，根據(jù)格式塔原理創(chuàng)建了他們之間的必要的紐帶，并且建立了有效的視覺(jué)效果。

在網(wǎng)站和移動(dòng)應(yīng)用程序的界面設(shè)計(jì)中，負(fù)空間是提高界面可瀏覽性的一個(gè)重要因素：沒(méi)有足夠的留白，布局中的元素不適宜被閱讀，因此用戶也可能錯(cuò)過(guò)他們真正需要的信息。盡管很多用戶不能明確的闡述問(wèn)題，到那時(shí)負(fù)空間不平衡可能就是造成眼睛和大腦緊張的重要原因，而他們的合理比重（尤其是微空間），解決了這一問(wèn)題并且使整個(gè)瀏覽過(guò)程更加的自然。

4.確保號(hào)召性元素立刻被看到

顯然，大多數(shù)的網(wǎng)站針對(duì)的是用戶必須完成的特定操作。包含了號(hào)召性用語(yǔ)的元素（通常為按鈕）應(yīng)該立刻被用戶看到，從而明白在這個(gè)頁(yè)面上會(huì)有什么操作。

良好的測(cè)試方法之一，是在黑白模糊的情況下檢查頁(yè)面。如果在這兩種情況下，你都可以快速的辨別出號(hào)召性元素，那么說(shuō)明這一點(diǎn)做的很成功。例如：面包店網(wǎng)站的頁(yè)面上，相對(duì)于其他元素，將號(hào)召行元素按鈕信息添加到主列表中，更容易被看到。

5.測(cè)試內(nèi)容的可讀性

可讀性指人們閱讀文字、句子和內(nèi)容的難以程度；易讀性衡量的是用戶如何快速、直觀地區(qū)分特定字體中的單字。尤其在頁(yè)面充滿文本的情況下，這些屬性應(yīng)該仔細(xì)考慮。

背景色、內(nèi)容周?chē)目臻g占比、字距、行距、字型和字體搭配，上述所有因素都影響著快速瀏覽文本和獲取內(nèi)容的能力。

為了給用戶提供更良好的體驗(yàn)，設(shè)計(jì)師需測(cè)試頁(yè)面是否遵循了排版規(guī)則，選擇的字體能否常規(guī)的視覺(jué)層級(jí)和可讀性；用戶測(cè)試將有助于檢測(cè)用戶感知到文本的速度和邊界便捷程度。

6.使用阿拉伯?dāng)?shù)字（如：1、2、3……），而不是中文數(shù)字（如：一、二、三……）

這條建議是基于尼爾森·諾曼集團(tuán)的另一個(gè)調(diào)查，他們分享了一個(gè)很重要的發(fā)現(xiàn)：眼部追蹤研究表明，在瀏覽網(wǎng)站頁(yè)面的過(guò)程中，數(shù)字通常會(huì)使用戶漫游的視線停下來(lái)并吸引注視；甚至當(dāng)嵌入大量文字中時(shí)，如果沒(méi)有數(shù)字，那么這些文字就會(huì)被忽略。

我們下意識(shí)的將數(shù)字與真相、統(tǒng)計(jì)數(shù)據(jù)、尺寸和距離（可能有用的數(shù)據(jù)）聯(lián)系在一起，因此包含在內(nèi)容中的數(shù)字會(huì)吸引讀者的注意，而文本數(shù)字可能會(huì)在大部分副本中被遺漏。再者。數(shù)字比文本數(shù)字更緊湊、內(nèi)容更簡(jiǎn)明扼要、瀏覽更省時(shí)。

7.一個(gè)段只說(shuō)明一個(gè)觀點(diǎn)

在可瀏覽性方面處理內(nèi)容，盡量控制內(nèi)容的長(zhǎng)度，萬(wàn)一信息對(duì)讀者沒(méi)有價(jià)值，那么簡(jiǎn)短的段落看起來(lái)更易于理解、可以輕松跳過(guò)。因此，遵守一段只表達(dá)一個(gè)想法的宗旨，新的想法可以另起一段。

8.使用編號(hào)和項(xiàng)目符號(hào)列表

另一個(gè)使內(nèi)容更易瀏覽的好方法時(shí)使用編號(hào)或符號(hào)的列表，他們有利于清晰地組織數(shù)據(jù)、吸引用戶的視線。因此，這些信息一般在內(nèi)容中不會(huì)被遺漏。

9.突出顯示文本中的關(guān)鍵信息

粗體、斜體和顏色突出顯示時(shí)有些老套的方法，但仍然可以很好的使用。這樣，你可能會(huì)注意到段落中包含的重要思想、定義、引用或其他類(lèi)型的特定數(shù)據(jù)。而且，文本中可點(diǎn)擊的部分（鏈接到其他頁(yè)面）必須在視覺(jué)上做標(biāo)記，我們習(xí)慣于用下劃線來(lái)突出顯示，但增加一些顏色、字重的強(qiáng)調(diào)方式會(huì)更高效。

10.使用圖像和插圖

在網(wǎng)站的用戶界面設(shè)計(jì)中，圖像對(duì)于營(yíng)造氛圍或者傳遞信息有很大的促進(jìn)作用，他們是內(nèi)容豐富、在情感上具有吸引力的內(nèi)容；在原始插圖中，突出的英雄橫幅、引人入勝的照片可以輕松吸引用戶的注意，而且插圖支持一般的風(fēng)格概念。

此外，插圖和圖像在建立視覺(jué)層級(jí)上發(fā)揮著重要的作用，二者的結(jié)合使內(nèi)容更易于理解。人們對(duì)于圖像的感知速度比文字更快，這是提高可瀏覽性的一個(gè)重要因素。

隨著網(wǎng)頁(yè)的可瀏覽性不斷提高，設(shè)計(jì)師和內(nèi)容創(chuàng)作者對(duì)網(wǎng)站用戶表現(xiàn)出了真正的尊重：通過(guò)提供有條理、和諧、有價(jià)值和吸引力的內(nèi)容為用戶節(jié)省時(shí)間和精力。

原文鏈接

分享名稱(chēng)：用戶體驗(yàn)設(shè)計(jì)的實(shí)踐：如何使網(wǎng)站頁(yè)面更易于瀏覽
網(wǎng)頁(yè)鏈接：http://www.bm7419.com/news/218865.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)目有用戶體驗(yàn)等

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)