從UI設計交互界面淺談設計排版

UI設計工作

排版是什麼？

排版是將文字、圖片等元素在版面調整，使版面布局條理化的過程。一般來說，透過來版，讓人們更容易的去閱讀、接受這些提供給他們的信息。

為什麼要提供良好的排版？

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

排版最重要的四個要點

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

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）完形心理學分組是一種組織信息的技巧，將眾多的信息依照特定方式分類為幾組，在同一組的內容相關性較高，不同組內容差異性大，面對龐大信息時，可以利用這個方式減少壓迫感。

其他要點

盡量使用單列版型而不是多列版型

使用良好的預設值而不是給使用者選擇

使用良好的預設值減少使用者的操作

界面要有鮮明的對比讓使用者容易區分

精簡表單的內容

不要在頁面上放太多的連接，這樣會分散使用者的注意力

提供直覺的操作

不要過度使用邊框，這樣會讓界面四分五裂

使用基本元件而不是重新設計

將有關聯的事物進行分組

讓點擊區域大一點

如果提供太多的選擇，使用者反而一個都不會選

使用社群驗證的方式，讓

易讀的標題

易於閱覽的文本

善用留白，營造清爽乾淨的感覺

界面風格一致性很重要

注意文字的密度

突出畫面上重要元素

一圖勝千言

把文字看作是使用者界面（UI）的一部份

盡量不需要scroll就能看到主要的內容

藍色往往是最適合連接的顏色

搜尋框儘可能為27個字元的寬度

留白讓內容更容易被理解

大多數的人視廣告為無物

少即是多

限制頁面內容的長度.

參考設計規範

觀察界面的視覺動線

導航列要放在清楚的位置，如果導航列的項目是網站的核心，請勿必讓導航列出現在每一個畫面上

使用響應式設計

把重要的信息放在列表的最上方

在輸入欄位旁提供提示、示例

在送出表單前進行欄位錯誤的檢查

讓使用者清楚知道點擊哪裡進行下一步

在所有的頁面上顯示你的服務名稱、Logo

避免使用全大寫的英文，除非是特別用來強調的標題內容

為各種設備調整適當的字體大小

你要考慮不同設備的閱讀距離的不同

把你的Logo放在固定的位置上，並確保點擊它能夠返回到最初的頁面

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！