1、精華！頁面排版學習筆記要點本文轉自UI中國，作者：奧革士排版是什么？排版是將文字、圖片等元素在版面調整，使版面布局條理化 的過程。一般來說，透過來版，讓人們更容易的去閱讀、接 受這些提供給他們的資訊。為什么要提供良好的排版？一個良好的資訊傳遞需要幾個要素來達成，分別是對的內容 與對的方式以及對的人，唯有這三個要素都成立的時候，資 訊就能夠有效率的被使用者給接受。排版扮演著內容與使用 者之間溝通的橋梁，良好的版面設計讓使用者不需要特別的 努力、訓練就可以瞭解提供的內容；相反，糟糕的排版可能 會讓使用者拒絕接受這些內容。排版最重要的四個要點 排版設計中有非常多需要注意的細節，各種細節也會因為不 同

2、的情境、需求而不同，底下列出了四項排版最重要的要點， 如下：對齊(Alignment)任何東西都不能隨意擺放，每一個元素之間都有某種視覺關 系。利用對齊建立一個清楚整齊的外觀。親密(Proximity)彼此相關的內容應靠在一起，反之不相關的內容保持距離。 利用親密性，強調畫面的組織與架構。重復(Repetition)重復視覺要素的顏色、字體、大小、空間等，增強條理性， 也增強了整體一致性。對比(Contrast)避免頁面上元素太過相似，如果它們不同，哪就讓他們截然 不同。讓重要的內容引人注目，讓使用者間看到它們。參考資料：寫給大家看的設計書、完形心理學文字排版要點 文字是內容的本質，人們透過文

3、字、句子來闡述知識，讓我 們透過瞭解文字排版，讓文字更容易被閱讀、被接受：使用適合閱讀的字體字體大小與使用者螢幕大小、使用距離有關，清楚瞭解使用 者使用的環境與習慣后，選擇一個適當的大小。選用適當的字體有些中文字體的英文版本其實是不合適的，挑選與中文字體 相對應的英文字體作為搭配的字體。設定恰當的行高也就是“文字密度”，太擠的文字在換行時，眼睛不容易找 到下一行的起點，較不容易閱讀。設定恰當的段距清楚的段落區分，讓讀者可以清楚地瞭解現在正在閱讀的段 落。注意段落的寬度 注意文字最后顯示的設備大小，太寬或太窄的段落寬度都會 造成閱讀上的困難，一行文字以45字元75字元是比較恰當 的。清楚的區分標

4、題與內文使用對比的方式(例如顏色、大小、位置)將內文與標題清 楚的區分開來。從認知心理學看排版人們會將鄰近的事物視 為一體紅色跟藍色放在一起容易疲勞大寫文字難以閱讀閱讀與理解是截然不同的兩件事如果人們感覺這個字體不易閱讀，他們會把這種困難的感覺 轉化至文意本身，并因此覺得文章所談到的內容難以執行或 難以理解。較長的欄寬能提高閱讀效率，但人們偏好較短的欄寬。適時的應用進階展開，減少一次顯示的資訊數量分類資訊提供明顯的線索參考資料：瞭解人，你才知道怎么設計從設 計法則學習排版80/20法則不要對設計中所有的元素一視同仁。應該利用80/20法則來 評估各元素的價值、鎖定重新設計與最佳化。希克定律(H

5、ick s law)當選項增加了，下決定的時間也增加。倒金字塔法則以重要性遞減的順序呈現資訊。先呈現最重要的資訊，之后 才是附加的詳細資料。當呈現資料的效率很重要時，就使用 倒金字塔法則。提高信噪比同一顯示中，相關資訊與不相關資訊的比例，在不影響功能 的原則下，必要元素應該盡量減到最少。使用基本元素，讓 使用者安心人們在數為世界的心智模型，常常是建立在對這些基本元素 的瞭解，不管是網頁或者是App，畫面中的某些常見元素早 已變成基本構成要素，使用者渴望或者預期他們能夠在網頁 上看到些元素，已完成特定的任務，有安心的感受。易視性 只使用者于使用產品的過程中，能夠順利達成特定目標的容 易程度，讓使

6、用者可以看清楚產品的狀態，并且輕松推薦可 以采取的動作。易視性決定了 app該呈現的關鍵內容是什么。 進階展開(Progressive Disclosure)進階展開主要強調提供給使用者當下所需要的內容，其他沒 有助益的內容、控制項暫時不提供，直到使用者在各類別做 選擇后，才展開更多的相關細節。利用進階展開的方式，可以減少使用者的認知負擔。把資訊內容歸納于少數幾個選項，在分階段漸漸釋出細節， 簡要呈現當下所需的資訊，不只能降低使用者認知負擔，更 可以避免豐富的選擇堵塞使用者的思緒。分組(Grouping ) 完形心理學分組是一種組織資訊的技巧，將眾多的資訊依照特定方式分 類為幾組，在同一組的內

7、容相關性較高，不同組內容差異性 大，面對龐大資訊時，可以利用這個方式減少壓迫感。參考 資料：設計法則從遙控器上學習排版DVD遙控器是一個極度復雜的工具，上頭除了電源、播放、 暫停等基本功能外，還會參雜著其他各式各樣的功能，零零 種種加起來大約有40多個按鈕，每個按鈕對應各種功能 我們可以從以下幾種方式，來簡化復雜的遙控器：-刪除 -去掉不必要的按鈕-組織-按照有意義的方式分組 -隱藏-隱藏不必要的按鈕-轉移-轉移不必要的 功能到其他地方其他要點80/20法則不要對設計中所有的元素一視同仁。應該利用80/20法則來 評估各元素的價值、鎖定重新設計與最佳化。希克定律(Hick s law)當選項增

8、加了，下決定的時間也增加。倒金字塔法則以重要性遞減的順序呈現資訊。先呈現最重要的資訊，之后 才是附加的詳細資料。當呈現資料的效率很重要時，就使用倒金字塔法則。提高信噪比同一顯示中，相關資訊與不相關資訊的比例，在不影響功能 的原則下，必要元素應該盡量減到最少。使用基本元素，讓使用者安心人們在數為世界的心智模型，常常是建立在對這些基本元素 的瞭解，不管是網頁或者是App，畫面中的某些常見元素早 已變成基本構成要素，使用者渴望或者預期他們能夠在網頁 上看到些元素，已完成特定的任務，有安心的感受。易視性只使用者于使用產品的過程中，能夠順利達成特定目標的容 易程度，讓使用者可以看清楚產品的狀態，并且輕松推薦可 以采取的動作。易視性決定了 app該呈現的關鍵內容是什么。進階展開(Progressive Disclosure)進階展開主要強調提供給使用者當下所需要的內容，其他沒 有助益的內容、控制項暫時不提供，直到使用者在各類別做 選擇后，才展開更多的相關細節。利用進階展開的方式，可以減少使用者的認知負擔。把資訊內容歸納于少數幾個選項，在分階段漸漸釋出細節， 簡要呈現當下所需的資訊，不只能降低使用者認知負擔，更 可以避免豐富的選擇堵塞使用者的思緒。分組