好讀的排版指南

更新 發佈閱讀 6 分鐘
善用好讀的排版指南,提高使用者持續閱讀的意願。

主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。

先前的文章〈如何創造視覺層級〉提到:

視覺層級除了能讓畫面的視覺編排精緻好看,更重要的功能,是能讓畫面有效地被組織,讓觀者更容易理解。視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心。

而此篇文章則是將視覺層級運用在文字排版上。


舒適的閱讀體驗

舒服的文字排版,可以提高閱讀者繼續閱讀的意願,為內容加分。

過去在學習文字排版時,容易拘泥在一些數值或是規則中。但是當我理解為何使用這樣的方式時,越能體會出什麼樣的排版是舒適的,甚至是什麼樣的排版是自己會喜歡的。

連最了解的自己都無法好好閱讀的排版,就別說是自己以外的閱讀者了。

反過來想想,不舒適的閱讀體驗雖然無法讓使用者喜歡,卻能夠利用反感、不舒適感等,引起他人的注意,依據想傳達給閱讀者的感覺,來安排符合內容的方式來呈現,也能達到另一種效果。

水逆是什麼?多數為諸事不順的感覺,而溺水又是什麼一回事?那令人不舒服的感覺,以及被淹沒的諧音感。

而聽到有人稱呼「變態」或是大喊「變態」內心多少會有重擊的感受,那就直接了當地表現吧。


字距、行距,分清楚

字距太小了,文字好擠!行距太小,分不清楚行的方向。

在此之前,你知道何謂字距?何謂行距?

  • 字距:字與字的距離
  • 行距:行與行的距離

就是這麼簡單!

這兩者的距離都會影響閱讀的感覺,尤其是行距,太近的時候會讓人不好區分到底哪個才是行?而字距則是在能表現出獨特的節奏感。

我個人常用的比例是文字的 1.5 至 2 倍之間,依據使用的字體與整體的感覺做點微調。


閱讀媒介與方向、順序

以文字呈現為準,當實體書與螢幕呈現互相比較時,我們可以像書蟲一樣,花上更多時間閱讀實體書,卻無法長時間閱讀滿是文字的螢幕。

因為螢幕會讓視覺疲勞,也傷眼,越亮的螢幕越不耐讀,所以可見到金融業或長時間需要看盤的畫面,多數以深色底為主。

儘管如此,我們依然希望使用者願意看完文章(咦?

閱讀時多以Z字型的方式移動視線軌跡,在書本上也能見到。就是看完一行以後,接續找到下一行繼續重複動作。


那麼寬的距離,你要眼睛到哪裡去

在螢幕上的呈現多數為橫書的方式。當文字的字數越長,眼睛移動的軌跡就越寬,就越容易疲勞。

試著假裝閱讀幾段圖中的文字,你會發現第一行的尾(最右)閱讀完之後,馬上回到左邊的第二行的頭(最左)

雖然圖的寬度很小,好像沒什麼感覺,試著想像你用大螢幕(或像是電影院的螢幕)閱讀時,視線要不斷從畫面中的最兩側來回移動,挺累人的啊!

現在多數的部落格,都能見到文字集中在中央,而兩側保持著留白,一來讓你視覺集中,二來能更專心地閱讀內容。

兩側留白也有好處,可為不同裝置做增減,這題外話,以後有機會再說。

跟折返跑練習一樣,來回跑得距離過長,就會變成在練中短跑;適中的距離可同時練習折返與直線,並保持一個頻率;太短就只是反覆地跳躍。


閱讀層級是流暢的關鍵

雖然圖左的早安圖很詭異,但是在觀看的時候,會有個基本順序,因為他用大小來區分,不過因為橫直式的混搭,讓人搞不清楚該從哪裡開始閱讀好呢?但我相信大部分人不是注意「早安」,就是注意「一個人生的故事與您分享」。

為何閱讀會感到不舒服?除了沒有意義的廢文之外,加上大小比例混亂、直橫式混搭、沒有邏輯的編排,導致閱讀不流暢,易讀性也很差。


對齊就能美美的

善用位置的排列,讓畫面更有邏輯。

兩張圖都會先看到最大標,其次是打招呼,再來才是內容,更細心的讀者則是會細看 Hashtag 寫了什麼東西。

對齊是讓內容更一致,單純呈現文字時,不需浮華刻意也能成就舒適的閱讀體驗,也是最安全保守的作法之一。


統一格式

統一標點符號

使用全形標點符號,讓每個字塊一致,否則在分段時,會出現參差不齊的狀況,讓整體感下降。

適當斷行

行距斷開的位子不適當,每一行的長度都不同,就算使用全形的標點符號,畫面依然參差不齊。

適當斷句

在描述一件事情時,若使用的句子極長,沒有在該斷句的時候使用標點符號隔開,閱讀起來會讓人無法喘息,斷句就是為了讓句子變得有節奏。

不適當斷句
迷因是文化資訊傳承時的單位。迷因目前比較公認的定義是一個想法行為或風格從一個人到另一個人的文化傳播過程。
適當斷句
迷因,是文化資訊傳承時的單位。迷因目前比較公認的定義是:一個想法、行為或風格,從一個人到另一個人的文化傳播過程。


留白造就版面的節奏感

有時候會想將畫面塞好塞滿,想讓使用者感受滿滿的誠意。沒有適當的留白,會讓使用者閱讀時充滿壓力。

這麼滿的字,沒有呼吸的空間,更沒有抑揚頓挫。

就算用字遣詞句句到位,也很難讓閱讀者願意耐住性子,一口氣看完大量的文字敘述。

當然不僅是運用段落來留白,有時候我們也會使用圖片來營造留白的效果,讓使用者停下來,可以讓他思考或者是沉浸在這節奏裡。


不過度強調,自然就是美

為了吸引閱讀者的眼球,也許會刻意將標題過度強調,或者將文字加粗等等,但是這些強調適當即可,過頭的話會造成反效果,造成閱讀上的突兀。

比較圖左與圖右,哪一個適合短暫閱讀?哪一個適合長時閱讀?

運用在資訊圖表時,因為要短時間抓住目光,必須強調重點,但是內容的資訊是經過整理且脈絡化了,所以句句都是重點。

篇幅較長的文章,適合讓使用者靜下心來閱讀,應該避免在文章中劃大量的重點,劃越多重點並不會越讓人印象深刻,而你認為的重點也並不等同於對方所認為的。

而文字排版的作用,就是營造舒適的閱讀體驗,提高使用者持續閱讀的意願,甚至是透過減少文字的焦點,讓使用者將焦點放在資訊上。

這就是為什麼,越單純的文字內容,越容易被長時間閱讀,因為耐看不突兀。


最後的碎碎唸

但是內容本身也必須具有一定的乘載與邏輯,並不只是單純將文字表達出來就好了,思考內容是否能確實傳達給使用者。

保持閱讀,多觀看不同作者的文章,也能夠提升文章排版和思維。

留言
avatar-img
Deerlight Design 曝鹿設計
72會員
45內容數
換帳號唷
2024/08/23
透過適當的版面安排、組織元素,有效地傳達訊息。排版設計的用意是傳達訊息,而我們如何吸引人觀看,以及讓人願意停留,這些都是影響訊息是否能有效傳達的因素。提出幾個技巧與觀念,設計好讀也好看的排版。
Thumbnail
2024/08/23
透過適當的版面安排、組織元素,有效地傳達訊息。排版設計的用意是傳達訊息,而我們如何吸引人觀看,以及讓人願意停留,這些都是影響訊息是否能有效傳達的因素。提出幾個技巧與觀念,設計好讀也好看的排版。
Thumbnail
2024/08/21
將完形心理運用在畫面中,能有效引導視覺動線。格式塔理論也稱「完形心理學」,是心理學家對於知覺組織的一種看法。將完形心理運用在畫面中,能有效引導視覺動線。
Thumbnail
2024/08/21
將完形心理運用在畫面中,能有效引導視覺動線。格式塔理論也稱「完形心理學」,是心理學家對於知覺組織的一種看法。將完形心理運用在畫面中,能有效引導視覺動線。
Thumbnail
2024/08/20
如果約束使設計更易於使用,並降低出錯的可能性。日常中有不少約束設計的例子,它在生活中佔有一席之地,舉凡紅綠燈、電梯上下行的限制等等。
Thumbnail
2024/08/20
如果約束使設計更易於使用,並降低出錯的可能性。日常中有不少約束設計的例子,它在生活中佔有一席之地,舉凡紅綠燈、電梯上下行的限制等等。
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
創業者常因資金困境而無法抓住機會,利用房產活化讓二胎房貸成為財務策略的有力夥伴。 諮詢國峯厝好貸的二胎房貸服務,讓你的房子成為你最強力的天使投資人,推動事業成長。
Thumbnail
創業者常因資金困境而無法抓住機會,利用房產活化讓二胎房貸成為財務策略的有力夥伴。 諮詢國峯厝好貸的二胎房貸服務,讓你的房子成為你最強力的天使投資人,推動事業成長。
Thumbnail
希望透過條列和簡介,可以更方便讀者選讀自己偏好的主題。
Thumbnail
希望透過條列和簡介,可以更方便讀者選讀自己偏好的主題。
Thumbnail
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
Thumbnail
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
Thumbnail
隨著年齡的增長,人們對閱讀的態度可能會發生改變。這篇文章著重於從務實派者的角度出發,探討閱讀與學習需求之間的關係,並提出了一些有效的閱讀技巧,分享了作者個人的閱讀心得和轉變。
Thumbnail
隨著年齡的增長,人們對閱讀的態度可能會發生改變。這篇文章著重於從務實派者的角度出發,探討閱讀與學習需求之間的關係,並提出了一些有效的閱讀技巧,分享了作者個人的閱讀心得和轉變。
Thumbnail
本文分享「每日一章」系統化閱讀法,透過拆解章節、轉化關鍵字並重述重點,將資訊深度內化。此法助您建構知識體系,讓閱讀如同順勢交易,在長期堅持下獲得驚人的知識複利。
Thumbnail
本文分享「每日一章」系統化閱讀法,透過拆解章節、轉化關鍵字並重述重點,將資訊深度內化。此法助您建構知識體系,讓閱讀如同順勢交易,在長期堅持下獲得驚人的知識複利。
Thumbnail
閱讀對人們的好處包括還原概念本來面目、獲取豐富的選擇、增長知識、自我突破、創造無限時間。另外,也整理出作者從24種不同的角度,介紹各類好書及對自身的好處,並提供了相應的閱讀節錄與整理。
Thumbnail
閱讀對人們的好處包括還原概念本來面目、獲取豐富的選擇、增長知識、自我突破、創造無限時間。另外,也整理出作者從24種不同的角度,介紹各類好書及對自身的好處,並提供了相應的閱讀節錄與整理。
Thumbnail
閱讀書籍: 讀書變現的創作法則 提升閱讀量的技巧 了解全貌: 閱讀前,花費時間先將目錄前言看完,並且快速翻閱,找出書中的標題、粗體字或是圖表,將不熟的觀念、有幫助的觀念再圈起來。 判斷書籍是值得精讀: 透過了解全貌後,找出閱讀目標,並且判斷全書的難度,如果只是簡單的生活輔導書籍,就快速閱讀
Thumbnail
閱讀書籍: 讀書變現的創作法則 提升閱讀量的技巧 了解全貌: 閱讀前,花費時間先將目錄前言看完,並且快速翻閱,找出書中的標題、粗體字或是圖表,將不熟的觀念、有幫助的觀念再圈起來。 判斷書籍是值得精讀: 透過了解全貌後,找出閱讀目標,並且判斷全書的難度,如果只是簡單的生活輔導書籍,就快速閱讀
Thumbnail
要把「認識」化為「行動」,還有好大一段路要走。閱讀與實踐,著實沒有想像中來得輕鬆、簡單。
Thumbnail
要把「認識」化為「行動」,還有好大一段路要走。閱讀與實踐,著實沒有想像中來得輕鬆、簡單。
Thumbnail
讀完書後什麼也沒記住,是因為人家怎麼寫,你就怎麼讀。
Thumbnail
讀完書後什麼也沒記住,是因為人家怎麼寫,你就怎麼讀。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News