介面設計奧革士access_timeAPRIL 7TH, 2015

介面設計排版要瞭解的二三事

那些頁面排版要瞭解的事情 排版是將文字、圖片等元素在版面調整,使版面佈局條理化的過程。透過排版讓人們更容易的去閱讀、接受這些提供給他們的資訊。

排版是什麼?

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

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

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

排版最重要的四個要點

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

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]

 

分享這篇文章

奧革士
奧革設計創辦人,也是一位產品設計顧問 ,平常熱愛研究各種產品的使用者經驗與介面設計,喜歡把將平常所見以及所得加上一些自己的經驗與想法與大家分享。

你可能還會喜歡這些文章

需要 UI / UX 設計上的協助嗎?
我們期待與您聊聊彼此的想法!

聯絡我們

您有專案時程或預算上的問題嗎?查看常見問題問與答

常見問題