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

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

1.定義

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

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

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

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

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

試著把自己當作首次使用頁面的用戶，并且回答兩個問題：

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

2.觀看的前幾分鐘，你能否對頁面展示的信息類型有清晰的認知？

如果你不能保證以上兩個問題都是肯定回答，那可能是時候該去考慮一下如何增強頁面的可瀏覽行了，這點是值得投入時間的，因為可瀏覽行高的頁面在以下幾方面更高效：

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

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

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

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

5.提高用戶留存

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

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

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

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

1.”Z”型

這種模式對于具有規(guī)整的信息展示和弱化視覺層級的網(wǎng)頁來說，是非常典型的。

2.曲線型（多個”Z“型）

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

3.”F“型

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

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

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

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

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

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

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

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

另一方面，如果看到龐大而冗長的文章沒有被分成幾個模塊，用戶會感到害怕，因為他們不知道閱讀這篇文章要花費多長時間以及這篇文章是否值得傾注時間和精力。

下面列舉了一些輔助建立視覺層級的重要因素：

A.尺寸

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

B.顏色

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

下面的例子，有沒有發(fā)現(xiàn)視覺重心被有色彩的地方先吸引過去了，并且層次也有了，這樣對用戶來說就有了一個閱讀的先后次序。

C.對比

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

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

D.接近

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

E.負空間

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

F.重復

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

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

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

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

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

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

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

3.保持負空間平衡

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

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

4.確保號召性元素立刻被看到

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

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

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

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

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

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

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

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

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

7.一個段只說明一個觀點

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

8.使用編號和項目符號列表

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

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

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

10.使用圖像和插圖

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

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

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

原文鏈接

名稱欄目：用戶體驗設(shè)計的實踐：如何使網(wǎng)站頁面更易于瀏覽
分享鏈接：http://muchs.cn/news15/218865.html

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

廣告

聲明：本網(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)