RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間:8:30-18:00
你可能遇到了下面的問題
關閉右側工具欄

技術支持

網站、網頁設計中“可讀性”設計知識
  • 作者:admin
  • 發表時間:2019-09-15 15:31
  • 來源:未知

      如何在web設計中讓內容突出、讓用戶易讀、悅讀?

      由于新技術和互聯網信息的爆炸,在我們周邊每天都會有大量的信息產生,信息量遠遠超過了人們的可閱讀量,在眾多網站,用戶不會仔細的去閱讀所呈現的所有內容。因此,我們在設計網站中,掌握可閱讀性的設計技術,讓關鍵點脫穎而出是至關重要的。

      什么是可讀性?
      在網頁內容設計中, 可讀性是將內容和導航元素呈現為可以讓用戶快帶察覺到關鍵信息點的布局方式。與網站交互,尤其是第一可以,用戶可以快速的查看內容,分析是否是他們需要的內容。任何內容都可能成為這一個過程中的一個hook,如關鍵字、標題、圖像、或動畫。

      其實這種信息瀏覽方式,并不是互聯網誕生后才有的。幾十年前,人們在閱讀報紙和雜志時,就已經開始有選擇性的瀏覽必要的內容。所以重要內容需要在用戶匆匆一瞥時,就Hook住用戶是極其重要的。

      10年前,尼爾森回答了“人們如何在網上閱讀內容?”的問題,簡單的說:“人們是不在網站上閱讀內容的,他們只是快速的掃描內容,挑選個別重要的詞和標題”。因此,如果在介紹網站內容時,第一分鐘內沒有任何內容可以抓住用戶,那么用戶將會離開的風險將會很高。所以,無論網站內容是什么,讓重要內容匆匆一瞥便能讓用戶記住是用戶友好性的重要因素之一。

      如何檢查網站具有可讀性效果?
      讓首次使用者回答如下兩個問題:

      1、你在前幾分鐘看到的內容不否符合受眾用戶對此頁的期望?

      2、你能在第一分鐘和第二分鐘內了解頁面上的信息類型嗎?



      如果連設計都都不能肯定的回答以上兩個問題,就應該加強考慮網站的可讀性的設計了。對網站可讀性的設計是必要的,
  • 用戶完成任務并更快的實現目標
  • 用戶在搜索他們需要的內容時會犯更少的錯誤
  • 用戶可以更快的了解網站的結構和導航
  • 用戶跳出率降低
  • 讓用戶的留存率越來越高
  • 讓網站看起來和感覺更專業、更可信

      提高SEO
      可讀性設計結構模式
      作為界面設計師必須考慮的是用戶的閱讀習慣,把重點放在用戶在最初幾秒內如何與網頁內容交互。當了解用戶是如何瀏覽屏幕時,便可以優先考慮將內容放入最明顯的區域。

      第一種模式:Z形對于具有統一信息呈現和弱視覺層次的網頁而言是非常典型的布局。
      每二種模式:使用Z字多層次布局,讀者視覺范圍從左上角開始從左到右,并在整個頁面上依次瀏覽。最后會在整個頁面上再將視覺移到右上角,察看這個初始交互區域中的信息
      第三種模式:F模式
      用戶首選讀取并水平移動,通常跨越內容區域的上部。這個初始元素構成了F的頂部欄。

      接下來,用戶稍微向下移動頁面,然后在第二個水平移動中讀取,該移動通常覆蓋比先前移動更短的區域。這個額外的元素形成了F的下欄。

      最后,用戶以垂直移動掃描內容的左側。有時這是一個相當緩慢和系統的掃描,在眼動追蹤熱圖上顯示為實心條紋。其他時候用戶移動得更快。最后一個元素構成了F的詞干。

提高可讀性的設計技巧
1、使用可視層次結構對內容進行優先級排序
基本上,視覺層次結構是對人類感知最自然的方式在頁面上排列和組織內容的方式。主要目標是讓用戶了解每個內容的重要性級別。因此,如果應用了可視層次結構,則用戶將首先看到關鍵內容。

例如,當我們在博客中看到該文章時,我們將首先獲得標題,然后是副標題,然后才能看到相關文本內容。這是否意味著文本內容信息重要性是否降低了呢?當然不是,但這樣用戶就可以輕易的掃描標題和副標題,以了解文章是否對他們有用,而不是閱讀所有文本。如果標題和副標題正確完成并告知用戶文章的結構和內容,這將是閱讀內容的重要因素。另一方面,如果用戶看到巨大而長的文本沒有層次區別,他們將會非常害怕,無法理解閱讀本文需要多長時間以及是否值得投入時間和精力。

有助于建立視覺層次結構的相關點:

尺寸、顏色、對比、親密性、負空間、重復。

所有這些都有助于設計人員將元素,鏈接,圖像和文本轉換為和諧的頁面布局

2、將核心導航放入網站標題中
上述提到的所有閱讀模式,無論特定用戶遵循哪一個,掃描過程將從網頁的頂部水平區域開始。用它來展示交互和品牌的關鍵區域。這就是為什么網站的標題設計不僅被UI / UX設計師以及內容管理者和營銷專家認為是一個基本問題的基本原因。

另一方面,標題不應該重載:太多的信息使得無法集中注意力。將所有內容放入頁面頂部的會使布局變得混亂。因此,在每個特定情況下,必須分析核心目標和受眾的目標,它們如何與網站背后的業務目標交叉,并以此為基礎 - 哪些信息或導航應該作為最重要的標題。例如,如果它是一個大型電子商務網站,搜索功能必須立即可見,并且通常可以在標題中找到,可以從任何交互點訪問。對于小型企業網站而言,搜索功能根本不需要,但是直接看到投資鏈接則變得至關重要。
3、保持內容空間與負空間的平衡
負空間即頁面中的留白 - 或者通常稱為空白區域 - 是布局的空白區域,不僅在布局中的對象周圍,而且在它們之間和內部。負空間是頁面或屏幕上所有對象的一種呼吸空間。它定義了對象的界限,根據格式塔原則在它們之間創造了必要的聯系,并建立了有效的視覺表現。在網站和移動應用的UI設計中,負空間是高導航性的重要因素接口:沒有足夠的留白,布局元素突出將不會明顯,因此用戶可能會錯過他們真正需要的東西。這可能是眼睛和大腦緊張的一個強有力的原因,盡管許多用戶將無法解決問題。適量的負空間,特別是微空間,解決了它,使用戶瀏覽的頁面的過程更自然。

4、檢查是否立即看到相關操作按鈕
絕大多數網頁都是針對用戶必須完成的特定操作。包含號召性用語(CTA)的元素(通常是按鈕)應在幾秒鐘內顯示,以便用戶了解他們可以在此頁面上執行的操作。好的測試包括在黑白和模糊模式下檢查頁面。如果在這兩種情況下都可以快速區分CTA元素,那么它們就能很好地完成。例如,在下面顯示的面包店網站的網頁上, 可以很容易地在其他元素中看到將項目添加到列表中的CTA按鈕。

5、測試內容的可讀性
可讀性定義了人們閱讀標題,短語和文本的容易程度。可讀性衡量用戶如何快速直觀地區分特定字體中的文字。應仔細考慮這些特性,尤其是對于填充了大量文本的界面。背景的顏色,文本塊周圍的空間量,字距,縮進,字體類型和字體配對 - 所有這些因素都會影響快速閱讀文本和捕獲令用戶留下的內容的能力。為了防止這個問題,設計人員必須檢查是否遵循排版法則以及所選字體是否支持一般的視覺層次和可讀性。用戶測試將有助于檢查用戶是否能夠快速輕松地感知文本內容。

6、讓數字明顯,而不是標題
這條建議是基于尼爾森諾曼集團的另一項調查。他們分享了一個重要的發現:眼動追蹤研究表明,在掃描網頁的過程中,數字通常會阻止用戶徘徊并吸引注視,甚至嵌入大量可以忽略而無數字的文本中。我們潛意識地將數字與事實,統計數據,大小和距離相關聯 - 這些數據可能是有用的。更重要的是,數字比文本數字更緊湊,因此它使內容更簡潔,更省時。

7、一個段落描述一個內容
盡量不要使文本內容太長。簡短的段落看起來更容易讓用戶消化,如果信息對讀者沒有價值,可以更容易跳過。因此,當在一個段落中提出一個想法并應為另一個段落開始提供指引。

8、使用編號和項目符號列表
使文本易讀的另一個好方法是使用帶有數字或項目符號的列表。它們有助于清晰地組織數據。此外,它們會引起用戶的注意,因此信息不會在一般文本中丟失。

9、突出顯示文本中的關鍵信息
斜體和顏色突出。通過這種方式,您可以將注意力集中在段落中包含的重要想法,引用或其他類型的特定數據上。更重要的是,文本的可點擊部分(鏈接到其他頁面)必須在視覺上標記。我們習慣于看到它們加下劃線,仍然用顏色或更大膽的字體突出顯示它們。

10、使用圖像和插圖
在Web用戶界面設計中,圖像是既有信息又有情感吸引力的內容。原始插圖,引人入勝的照片可以很容易地吸引用戶的注意力。更重要的是,它們在構建視覺層次結構方面發揮了重要作用,并使內容與插圖或照片相結合,更容易讓用戶理解。人們比文字更快地感知圖像。

提高網頁可訊性,設計人員和內容創建者必須做到真正尊重網站用戶。這樣我們就可以節省用戶的時間和精力,為他們提供有組織,和諧,有價值和有吸引力的內容。

360重庆时时彩开奖号码 打麻将单机版小游戏 贵州快三开奖号码 山西扣点点怎么胡牌快 捕鱼达人3在线玩 福建快三遗漏和值走势图 麻将来了有几个版本 怎么学校赚钱的 11选5最常出的三号 河北快3中奖助手 北京单场app 冒险岛那个职业最赚钱 pk10对刷流水不输本金 2015年代理无本赚钱项目 36码期期必中特图 刷照片赚钱的app 开奖查询