DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> Web界面設計:Web可讀性的三個層次
Web界面設計:Web可讀性的三個層次
編輯:關於網頁技巧     

可讀性(Readability)是web用戶體驗的的重要指標,因為訪客上網很大程度就是為了獲取信息,用戶習慣“掃視”而不是閱讀。同時,發生交互行為之前,也必須有個獲取信息引導“交互”的前提。所以,可讀性的重要顯而易見,且毋庸置疑。

具體分析web可讀性的構成,首先我認為一部分是信息本身的質量,寫的好不好或者用的對不對;還有一部分是信息與設計結合的附加值,可以通過展示的design來提升。前者應該是各行各業內容工作者需要掌握的基礎,而後者則需要web設計師來優化提升。比如一部小說的可讀性如何,首先是內容層面的小說結構、章節段落組織、遣詞造句是否可讀,其次才是排版和印刷質量等表現層是否可讀。也就是說,文學和文化功底會影響可讀性,但與design關系不大,他們之間完全可以從技術層面分離。所以,我認為研究Web可讀性不必深究內容質量本身的“可讀性”問題。

繼續總結我發現,各種語言這麼多年在“信息本身的質量”話題上已經積累了很多研究,並且都形成固定規范。另外,互聯網上的Web界面有個特點,語言和字符構成復雜,中文、英文、數字和各種符號經常混合在一起。因此,我認為可以把Web可讀性分三個層次來理解:

  1. 完全用錯了
  2. 沒有符合既定規范
  3. 表現形式欠佳

2007年10月UCDChina群博曾寫過注意界面上的文字這個專題,雖然內容比較散亂,但復習總結還是大部分都有關可讀性。已經積累了很多有關可讀性的案例,現在面臨個分類整理的問題,毫無頭緒,具體下文分情況來探討。

完全用錯了

涵蓋內容比較廣,錯誤語法、錯誤字和詞語、錯誤標點、錯誤符號等等都包括在內。

錯誤語法主要表現在一些文案上,某些規劃不嚴謹的頁面裡,很多文案都是工程師隨手加的。還有些過度修飾和搞怪風格的語言,用戶也不一定喜歡。另外,翻譯的文案也是問題熱點,因為很多做翻譯的同事並不懂專業領域知識,難免在遣詞造句上有欠缺。

錯誤字(錯別字)和詞語在界面上也很多,比較典型的是“登錄”還是“登陸”的案例(“登錄”正確),類似的還有“帳號”和“賬號”(“帳號”正確)。現在已經很少能找到產品證明,但討論時還是很容易誤錄入。

錯誤標點太常見了,尤其在與朋友的聊天,以及郵件中。我認為在網絡上最常見的問題是中英文標點混用,也許是大家懶得切換輸入法。對於成年人來說,絕大多數標點符號的使用正確與否,都不會給表達造成大誤解,網絡上加標點減標點的文字游戲段子都是笑談。用好標點主要是加強溝通,免得多費口舌解釋,有利於雙方。

錯誤符號也有很好的例子,比如當年經常有人分不清楚@和©(@是郵件分隔符,©指版權所有的意思)。甚至有內容上把星號“*”用成了乘號“×”,或者用小寫字母“x”來代替。還有關於¥和¥的爭論,總的來說,字符都受字體定義的嚴重影響,有時候在某種環境下看起來差不多,但本質上卻有根本的不同。

沒有符合既定規范

以中文語境為例,主要包括漢語書寫規范、英文書寫規范、數字書寫規范。

漢語書寫規范可能比較陌生,難道每天用的語言還有規范?估計我們這些經常寫blog的網友能意識到,專有術語縮寫詞在文章首次出現時,應該寫全稱並括號說明。中國干支紀年和夏歷月日,應該使用漢字;相鄰的兩個數字並列連用表示概數,應該使用漢字等等。

英文書寫規范主要是大小寫問題,除句首字母、人物姓名、稱呼頭銜、國家地名、年月日等單詞都需要大寫首字母,而特殊縮寫詞字母都需要大寫,比如CSS或HTML。還有中英文地址書寫習慣正好相反,先是門牌號,最後是國家。

數字書寫規范相對簡單,大家能分的比較清楚,但有些問題還是容易忽略。比如年份是不能簡寫的,98年能明白,2012年不能簡稱12年吧?另表達如2010.5.11的公歷年月日時,正確應該給一位數加“0”成為“2010.05.11”。數字的特殊造型,通常在中文傳達中占盡優勢,但也不能隨便用。比如表達約數的“30多種”並不規范,正確應該為“三十多種”。

表現形式欠佳

表現指用戶能夠直觀看到的效果,具體情況具體分析,但我們能夠以用戶習慣為基准,總結出部分通用准則。歐美學術界已經有了不少研究成果,通過科學的定量分析能夠用軟件計算出大概可讀性參考數。

應該說鋪墊了這麼多,最後才進入本文核心主題,也就是屬於web design可控范圍之內的“表現層”可讀性影響因素。基本只涉及web的結構和表現,相對改進提升用戶體驗的成本較低。大概總結為字符、鏈接、表格、表單四部分,具體細則和案例以後陸續調整補充。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved