用戶體驗設計的實踐：如何使網站頁面更易于瀏覽

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

1.定義

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

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

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

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

3.如何辨別一個網站是否易于瀏覽？

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

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

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

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

1.用戶可以更快的完成任務，實現目標

2.用戶在搜索需要的內容時，少犯錯

3.用戶可快速理解網頁的結構和布局

4.降低網站跳出率

5.提高用戶留存

6.網站的外觀和使用體驗更可靠

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

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

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

1.”Z”型

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

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

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

3.”F“型

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

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

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

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

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

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

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

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

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

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

A.尺寸

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

B.顏色

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

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

C.對比

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

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

D.接近

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

E.負空間

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

F.重復

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

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

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

2.將核心導航放置在網頁頂部

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

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

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

3.保持負空間平衡

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

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

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

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

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

5.測試內容的可讀性

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

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

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

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

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

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

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

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

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

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

9.突出顯示文本中的關鍵信息

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

10.使用圖像和插圖

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

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

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

原文鏈接

名稱欄目：用戶體驗設計的實踐：如何使網站頁面更易于瀏覽
分享鏈接：http://www.bm7419.com/news15/218865.html

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

廣告

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