那些頁面排版需要了解的事情

http://blog.ogdesign.tw/na-xie-ye-mian-pai-ban-xu-yao-liao-jie-de-shi-qing

排版是什麼？

排版是將文字、圖片等元素在版面調整，使版面佈局條理化的過程。一般來說，透過來版，讓人們更容易的去閱讀、接受這些提供給他們的資訊。
為什麼要提供良好的排版？

一個良好的資訊傳遞需要幾個要素來達成，分別是對的內容與對的方式以及對的人，唯有這三個要素都成立的時候，資訊就能夠有效率的被使用者給接受。排版扮演著內容與使用者之間溝通的橋樑，良好的版面設計讓使用者不需要特別的努力、訓練就可以了解提供的內容；相反，糟糕的排版可能會讓使用者拒絕接受這些內容。
排版最重要的四個要點

排版設計中有非常多需要注意的細節，各種細節也會因為不同的情境、需求而不同，底下列出了四項排版最重要的要點，如下：
1. 對齊（Alignment）

任何東西都不能隨意擺放，每一個元素之間都有某種視覺關係。利用對齊建立一個清楚整齊的外觀。
2. 親密（Proximity）

彼此相關的內容應靠在一起，反之不相關的內容保持距離。利用親密性，強調畫面的組織與架構。
3. 重複（Repetition）

重複視覺要素的顏色、字體、大小、空間等，增強條理性，也增強了整體一致性。
4. 對比（Contrast）

避免頁面上元素太過相似，如果它們不同，哪就讓他們截然不同。讓重要的內容引人注目，讓使用者間看到它們。

參考資料：寫給大家看的設計書、完形心理學

文字排版要點

文字是內容的本質，人們透過文字、句子來闡述知識，讓我們透過了解文字排版，讓文字更容易被閱讀、被接受：
1. 使用適合閱讀的字體

字體大小與使用者螢幕大小、使用距離有關，清楚了解使用者使用的環境與習慣後，選擇一個適當的大小。
2. 選用適當的字體

有些中文字體的英文版本其實是不合適的，挑選與中文字體相對應的英文字體作為搭配的字體。
3. 設定恰當的行高

也就是「文字密度」，太擠的文字在換行時，眼睛不容易找到下一行的起點，較不容易閱讀。
4. 設定恰當的段距

清楚的段落區分，讓讀者可以清楚地了解現在正在閱讀的段落。
5. 注意段落的寬度

注意文字最後顯示的設備大小，太寬或太窄的段落寬度都會造成閱讀上的困難，一行文字以45字元~75字元是比較恰當的。
6. 清楚的區分標題與內文

使用對比的方式（例如顏色、大小、位置）將內文與標題清楚的區分開來。
從認知心理學看排版

人們會將鄰近的事物視為一體
紅色跟藍色放在一起容易疲勞
大寫文字難以閱讀
閱讀與理解是截然不同的兩件事
如果人們感覺這個字體不易閱讀，他們會把這種困難的感覺轉化至文意本身，並因此覺得文章所談到的內容難以執行或難以理解。
較長的欄寬能提高閱讀效率，但人們偏好較短的欄寬。
適時的應用進階展開，減少一次顯示的資訊數量
分類資訊
提供明顯的線索

參考資料：了解人，你才知道怎麼設計

從設計法則學習排版

80/20法則
不要對設計中所有的元素一視同仁。應該利用80/20法則來評估各元素的價值、鎖定重新設計與最佳化。
希克定律（Hick’s law）
當選項增加了，下決定的時間也增加。
倒金字塔法則
以重要性遞減的順序呈現資訊。先呈現最重要的資訊，之後才是附加的詳細資料。當呈現資料的效率很重要時，就使用倒金字塔法則。
提高信噪比
同一顯示中，相關資訊與不相關資訊的比例，在不影響功能的原則下，必要元素應該儘量減到最少。
使用基本元素，讓使用者安心
人們在數為世界的心智模型，常常是建立在對這些基本元素的了解，不管是網頁或者是App，畫面中的某些常見元素早已變成基本構成要素，使用者渴望或者預期他們能夠在網頁上看到些元素，已完成特定的任務，有安心的感受。
易視性
只使用者於使用產品的過程中，能夠順利達成特定目標的容易程度，讓使用者可以看清楚產品的狀態，並且輕鬆推薦可以採取的動作。易視性決定了app該呈現的關鍵內容是什麼。
進階展開（Progressive Disclosure）
進階展開主要強調提供給使用者當下所需要的內容，其他沒有助益的內容、控制項暫時不提供，直到使用者在各類別做選擇後，才展開更多的相關細節。
利用進階展開的方式，可以減少使用者的認知負擔。
把資訊內容歸納於少數幾個選項，在分階段漸漸釋出細節，簡要呈現當下所需的資訊，不只能降低使用者認知負擔，更可以避免豐富的選擇堵塞使用者的思緒。
分組（Grouping）
完形心理學
分組是一種組織資訊的技巧，將眾多的資訊依照特定方式分類為幾組，在同一組的內容相關性較高，不同組內容差異性大，面對龐大資訊時，可以利用這個方式減少壓迫感。

參考資料：設計法則

從遙控器上學習排版

DVD 遙控器是一個極度複雜的工具，上頭除了電源、播放、暫停等基本功能外，還會參雜著其他各式各樣的功能，零零種種加起來大約有40多個按鈕，每個按鈕對應各種功能…
我們可以從以下幾種方式，來簡化複雜的遙控器：
– 刪除 – 去掉不必要的按鈕
– 組織 – 按照有意義的方式分組
– 隱藏 – 隱藏不必要的按鈕
– 轉移 – 轉移不必要的功能到其他地方
其他要點

儘量使用單列版型而不是多列版型
使用良好的預設值而不是給使用者選擇
使用良好的預設值減少使用者的操作
界面要有鮮明的對比讓使用者容易區分
精簡表單的內容
不要在頁面上放太多的連結，這樣會分散使用者的注意力
提供直覺的操作
不要過度使用邊框，這樣會讓界面四分五裂
使用基本元件而不是重新設計
將有關聯的事物進行分組
讓點擊區域大一點
如果提供太多的選擇，使用者反而一個都不會選
使用社群驗證的方式，讓
易讀的標題
易於閱覽的文本
善用留白，營造清爽乾淨的感覺
界面風格一致性很重要
注意文字的密度
突出畫面上重要元素
一圖勝千言
把文字看作是使用者界面（UI）的一部份
儘量不需要scroll就能看到主要的內容
藍色往往是最適合連結的顏色
搜尋框盡可能為27個字元的寬度
留白讓內容更容易被理解
大多數的人視廣告為無物
少即是多
限制頁面內容的長度.
參考設計規範
觀察界面的視覺動線
導航列要放在清楚的位置，如果導航列的項目是網站的核心，請勿必讓導航列出現在每一個畫面上
使用響應式設計
把重要的資訊放在列表的最上方
在輸入欄位旁提供提示、範例
在送出表單前進行欄位錯誤的檢查
讓使用者清楚知道點擊哪裡進行下一步
在所有的頁面上顯示你的服務名稱、Logo
避免使用全大寫的英文，除非是特別用來強調的標題內容
為各種設備調整適當的字體大小
你要考慮不同設備的閱讀距離的不同
把你的Logo放在固定的位置上，並確保點擊它能夠返回到最初的頁面

Good UI : [https://goodui.org/]
10 Useful usability findings and guidelines [http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/]
How to achieve a good website layout [http://naldzgraphics.net/tips/how-to-achieve-a-good-website-layout/]

關於Label的位置

在表單排版設計中，標簽的位置如何擺放是一個很常見的問題，SitePoint上有一篇文章，完整地分析各種擺放的好處與壞處，非常值得閱讀。

[http://www.sitepoint.com/definitive-guide-form-label-positioning/]

圖片來源 : [https://www.flickr.com/photos/samodrole/5588196735]