本節書摘來異步社群《衆妙之門——國際頂級web設計師成功法則》一書中的第1章,第1.3節,作者: 【德】smashing magazine 譯者: 寒武紀 責編: 趙軒, 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
衆妙之門——國際頂級web設計師成功法則
眼球追蹤
眼球追蹤(eye-tracking)是對聚焦點(我們所看的地方),或者說眼球相對頭部移動進行測量的過程。眼球追蹤儀記錄了每一次眼球移動,并且突出顯示頁面上最活躍的區域。眼球追蹤研究能幫助評估使用者對于正在浏覽的網頁的舒适度以及他們對背後的架構及系統的了解速度。

眼球追蹤。
網頁折疊
網頁折疊(fold)線是螢幕可見區域網頁的最底部。當然,折疊線位置取決于訪客的螢幕分辨率。折疊線上方的區域(也稱網頁可見區)指的是不用拖動滾動條就能看到的網頁内容。基于折疊線位置不用拖動滾動條就能直接看到内容,它便常常被視為能夠帶來最高廣告點選率和利潤回報的區域。不過,折疊區域并沒有那麼重要。
中心凹區
中心凹區(foveal area)是人類眼睛獲得敏銳的中心視力的重要部分,人們閱讀、看電視或電影、開車,以及從事其他任何非常需要視覺細節的活動都離不開它。中心凹區是眼睛所聚焦的小而寬的空間,也是你的雙眼能夠看到最多細節的唯一一個地方。它相當于兩度的視野,或是放在你眼前的兩個縮略圖大小的緊湊區域,是你向訪客傳遞最重要資訊的地方。
中心凹區之是以重要,是因為在螢幕上這個小而寬的區域之外,訪客看待網頁的方式迥然不同。也隻有在這裡,你的眼睛不需要上下左右掃描。
注釋
注釋(gloss)是一個自動的行為,它提示并概要顯示連結的内容,以及一旦點選後使用者會到達哪裡。提示可以通過連結的标題特征來提供。從可用性的角度來看,使用者希望對網站上正在發生的一切事情擁有絕對的控制權。配上完整的連結文字,精準地對内外部連結進行解釋,能夠提高網站的可用性。
優雅降級
優雅降級(graceful degradation)是指一個網站即使在它的部件(部分或完全)已經無法顯示或者無效的情況下還能展示内容和基本功能的能力。在實踐中,這意味着網站在每一個可能“出錯”的情況下顯示内容,并在使用者任何可能的配置下(浏覽器、插件、連接配接、作業系統,等等)被使用。為“進階使用者”提供的仍然是完整的、增強的頁面版本。例如,為多媒體内容提供可替代的檔案,以確定在圖檔無法顯示的時候網站内容仍然可以顯示。
粒度
粒度(granularity)是指将某個龐雜的資料組或資訊分割成更小機關的程度。
熱區
熱區(hotspot)是網站上可以點選的區域。點選該區域時,其形式或(和)外觀就會發生改變。例如,當連結或網站上的任何其他元素被點選時産生的焦點效應。
易讀性
易讀性(legibility)指的是文本在視覺上的清晰度。
掃雷
掃雷(mine sweeping)是指使用者為識别網站上的連結而與網頁進行的互動行為。多數情況下,掃雷是可用性問題中一個明确的預警信号。通常,掃雷行為包括使用者在頁面上迅速移動滑鼠光标或指針,看光标或者指針是否變形,進而得知有沒有連結出現。
漿糊式導航
網頁術語“漿糊式導航”描述的是使用者在一團漿糊般的網頁中難以辨識導航連結或者确定連結在哪裡的設計。
實體一緻性
實體一緻性(physical consistency)描述的是網站外觀的一緻性,例如logo、導航的位置、圖形元素與版式的使用。實體一緻性對于更好地進行定位和有效的網站導航至關重要。
逐漸強化
逐漸強化(progressive enhancement)是指将網站按照多層次方式進行設計的設計方略——從适合所有浏覽器的基本功能到現代浏覽器附加的增強屬性。逐漸強化最主要的優勢在于“普遍可用性”——也就是說,它允許所有使用者通過所有浏覽器或網絡連接配接接觸到網頁的基礎内容和功能,但同時給那些擁有更好的網絡寬帶或使用更進階浏覽器的使用者提供增強版的網頁。
可讀性
可讀性(readability)是指文字的可了解程度,它取決于句子的複雜程度和詞彙的難度。這意味着無論年紀和受教育程度,所有人都能很容易地了解文章的意思。可讀性不是易讀性。
以使用者為中心的設計
以使用者為中心的設計(ucd)是一種設計思路,也就是以使用者的需求、興趣和行為作為基礎,來設計網站結構、導航和内容。ucd被視為現代網絡應用的标準方式,尤其是在使用者網絡自創内容興起的情況下。在web 2.0網站中,必須讓訪客積極主動參與互動,而這就需要分析和優化他們的需求。
警惕(持續關注)
警惕(vigilance)是指在漫長而單調的任務中始終保持注意力的能力,比如,查找文字拼寫錯誤、約會提醒、文檔自動儲存,等等。在現代網絡應用中,警惕任務通常是背景自動操作,進而提高服務的可用性。
走來即用設計
走來即用設計(walk-up and use design)非常直覺明白,是以新手使用者或者一次性使用者即使沒有任何相關知識或教育訓練,也能容易上手。
線框圖
線框圖(wire frame)是個基礎結構,是網站的骨架,它介紹了網站的創意、概念和架構。線框圖可以設計成示範圖,用來解釋網站的設計原理、所具備功能以及使用者如何實作自己的目的。線框圖通常沒什麼視覺要素或完整的頁面布局,它們常常是設計師畫在紙上的初稿或草圖。