WEB表單設計-2清晰的瀏覽線

圖1.1所示,簡單表單的眼動跟蹤數據圖突出了清晰瀏覽線的重要性。本例中,標簽、輸入框及主要動作按鈕構成主要垂直軸,提供了貫穿表單的單一路徑。

圖1.1? Etre提供的綜合眼動軌跡圖(熱點圖),表明人們填寫一個簡單表單時所看到的表單內容

為了進一步說明這一點,考慮下面兩種表單之間的差別。第二張表單中,從第一個信息點開始一直到主要動作結束,都有清晰的瀏覽線,人們可以看清所用需要快速回顧的信息。第一張則采用不同的視覺處理,完成過程變成了“之”字眼動運動。通過統一布局,采用單一路徑更容易處理表單所提問題。人們關注執行任務,看見表單所用問題并作出答復,從而提高完成率。


圖1.2?? 第一個表單設計中,內容組之間采用有意義的區分,但第二個PayPal表單提供了清晰的完成路徑,人們只需要遵循一條向下的直線

設計良好的瀏覽線能恰當設置問題之間的視覺空間,滿足每對標簽/輸入框之間的平衡。視線能在表單中舒適移動,而不會錯過任何重要信息。空間間隔合適,很大程度上取決于表單風格。但一般而言,最好采用輸入框高度約50%~75%作為問題之間的間隔。

圖1.3問題有節奏的流動需要之間有合適的間隔
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,321評論 1 41
  • 簡介網絡瀏覽器很可能是使用最廣的軟件。在這篇入門文章中,我將會介紹它們的幕后工作原理。我們會了解到,從您在地址欄輸...
    wengjq閱讀 2,071評論 2 15
  • 本書一共14章,講了三部分內容:表單結構、表單元素、表單交互。表單是橫在用戶和企業之間的一道障礙, 沒有任何人喜歡...
    2c5994723157閱讀 3,258評論 0 16
  • 一. 表單設計的影響與原則 1.1 表單的產生 由內而外,網站根據自身信息存儲格式要求,從數據庫映射成表單。 由外...
    曉夢蟬君閱讀 12,195評論 1 30
  • 在影片《康熙王朝》中,康熙有個很喜歡的女兒叫藍齊兒,康熙當時想把藍齊兒嫁給自己喜歡的漢臣李光地。 我在從平凡到卓越...
    大師兄繆瑋76閱讀 670評論 3 4