我們探索和利用視覺結構​ ·《認知與設計》筆記3

• 2019 年 10 月 7 日
• 筆記

重點

筆記

信息呈現方式越是結構化和精鍊，人們就越能更快、更容易地瀏覽和理解。

要讓信息能夠被快速地瀏覽，僅僅把它們變得精鍊、結構化和不重複還不夠，它們還必須遵從圖形設計的規則。

結構提高了用戶瀏覽長數字的能力

數據專用控件提供了更多的結構

採用控件分割輸入字段固然優化了視覺結構，但這種方式打斷了輸入的連貫性。對於填寫一個長表單來說，使用菜單等控件使用戶被迫將手從鍵盤上移至鼠標，將視線轉移至光標位置。這種思維的打斷時常發生，用戶在填寫長表單時時常感到煩躁。事實上，許多用戶都不知道使用 tab / ⇥ 與 shift + tab / ⇧ + ⇥ 可以在表單文本框之間跳躍。

8.18 對於移動端來說，在屏幕上點按的效率非常高，而且可以保持視線與手勢一致。因此需要在移動網頁設計中減少不必要的輸入，比如日期、地點（行政區劃），而在電腦網頁端提供文本框 + 選擇控件並排顯示，用戶按需選擇輸入方式。

8.18 採用上圖所示的方式，通過六個框（相似性）來告訴用戶需要輸入六個數字，而每輸入一個數字後，激活框會自動移至下一個，也是一個很好的方案

視覺層次讓人專註於相關的信息

可視化信息顯示的最重要目標之一，是提供一個視覺層次，即信息的布置安排能夠：

• 將信息分段，把大塊整段的信息分割為各個小段；
• 顯著標記每個信息段和子段，以便清 晰地確認各自的內容；
• 以一個層次結構來展示各段及其子段，使得上層的段能夠比下層得到更重點的展示。

在現在寫作系統中，Markdown 一度被用戶高度推崇。它不提供所見即所得（WSYIWYG）的編輯系統，而使用符號標記來表示段落或文本樣式，這是一種寫作與排版分離的模式，在寫作時，只使用鍵盤與顯示器，注意力不會被迫轉移，而排版在導出文檔之後完成，就這樣，Markdown 擁有了如下幾個顯著的優點：

• Markdown 編寫的文檔格式樣式更統一，結構更清晰。因為 Markdown 中採用 # 作為標記標題層級的方式，寫作大綱清晰明了。而 Word 中多數用戶排版隨意性很強，就連簡單的標題層級都顯得很沒有章法，甚至有人使用 Word / Page 從不使用樣式；
• Markdown 寫作時不受排版等情緒干擾，同時不需要依賴鼠標，注意力不會被迫轉移；
• Markdown 語法簡潔，學習成本低。以人為本的設計使得它與 HTML 等標記語言產生了巨大差異，也使其擁有了遠高於 TeX 的編寫效率。

由阿里開發的語雀綜合了兩種方式的優點，即提供所見即所得的同時允許用戶使用快捷鍵迅速更改樣式，而且將各層級的標題以大綱的形式顯示在文章右側。讀者可以迅速的找到自己想要的內容（以只瀏覽標題的形式），而正文部分也如同書中所述的那樣，擁有結構清晰、層次分明而且始終統一的樣式