fbpx

利用文字編輯技巧,讓文章更好閱讀,大幅提升使用者體驗

最後修訂日期:2023 年 8 月 21 日

文章導覽

本文於 2023 年 8 月 20 日 第一版發佈

文章導覽

內容看起來專業的關鍵——資訊簡潔

除了實體活動或線上直播可以靠口語表達來展現專業之外,大多數的時候,我們會需要透過視覺內容像是圖卡、簡報、文章等等,向讀者呈現自己的想法,因此能不能在視覺表達的同時,傳遞專業感會是職人品牌經營的重要關鍵。

那要怎麼辦到這件事情呢?其實很容易,讓你的資訊是簡潔的就可以了,因為簡潔本身可以傳遞幾件事情:

  1. 你在意讀者好不好吸收(資訊是整理過的更好讀)
  2. 你是有用心在自己的內容上(資訊的收斂需要內化,換句花說很花時間)
  3. 你在意給讀者良好的體驗(豐富但雜亂的花車vs精緻陳列的精品店,哪個購物起來更舒適?)

因為職人品牌寫的內容,是要給可能買單的客戶看的,先不管你的專業有沒有料,如果讀者連能不能順順看完、理解你在說什麼都沒有辦法滿足,那就很難讓讀者對你產生信任感和行動。

善用文字編輯,就能創造簡潔且舒服的閱讀體驗

人是很容易分心的動物,我們在看東西的時候,除非是像合約這種超重要漏看會發生嚴重後果的內容,不然很少會一個字一個字去讀,取而代之是用掃讀的,從左到右、從上到下,快速的掌握這個內容大概在講什麼。

依循掃讀的習慣,設計師在規劃版面的時候,會用塊狀物來區分,如果能讓讀者輕鬆的辨識區塊群組,就能讓他們更容易用短短的時間,理解我們想要講的事。

規劃版面其實不會很複雜,用文字編輯的技巧,就能不用靠任何設計軟體的協助下,很快的把內容調教成更好讀、更好掃的呈現,提高讀者的閱讀體驗。因為沒做過文字編輯,不太清楚專業編輯們怎麼使用一般工具來排版,以下將用設計師的角度來分享。

建議調整的優先順序:

  • 段落之間的間距
  • 文字大小對比
  • 字、行距調整
  • 全形、半形的使用

優先調整項目- 段落之間的距離調整,加強區塊性

前面提到人們閱讀時是用掃的,所以讓讀者清楚辨別每個塊狀是最值得的調整。

[圖片生產中,請靜候更新💦]

我們會自己腦補哪些資訊是同屬一塊的,用這樣的方式閱讀,我可能用不到 20 秒,就能快速地理解一篇文章大概想講什麼(大多數人是標題黨)。不用強求你的讀者一定要看完,因為現代人的注意力很難集中,先讓他感到有興趣,再回過頭細看。

調整間距時,建議距離可以拉遠一點,讓區塊之間的分隔更明確。不用擔心畫面上有太多的留白,因為沒有主次之分的資訊才是最難讀的!

如果你的內容發佈的地方沒有那麼多的調整彈性(Facebook, instagram 之類的),可以利用換行工具或是特殊符號來留白,一樣可以切割出好辨別的區塊。

調整字的對比,讓段落主次之分更明顯

文字的對比,是要方便讀者判斷哪些資訊是最重要的、哪些是補充說明、哪裡又是新的段落。一般來說創造對比的方式有幾種:

  • 文字大小
  • 文字粗細
  • 文字顏色
  • 特殊樣式

加強對比的方法 1 – 文字大小

比方說標題跟內文字的大小,就可以做很強烈的對比!如果你是寫長文要放部落格,因應內容行銷 SEO 的需求,會把標題分成 H1~H5(大標題、次標題的概念),每個標題會有預設樣式,從大至小。

如果調整彈性夠,建議都可以微幅調整,以內文的字作為基準倍率放大,像是主標題 3 倍、第二標題 2 倍…等等,或是直接邊調邊看,反正夠明顯就好。

加強對比的方法 2 – 文字粗細

除了粗 Bold、標準 Regular、細體 Light 之外,有些字型會支援許多種的字重(Font weight),從 100 ~ 900 不等,簡單來說就是極細、細…到粗、超粗的差別,可以玩玩看 google font,字體的變化相當多元。

但會建議一個版面上,不要用超過 3 種以上的粗細,會讓視覺變得很繁瑣。

※另外補充字體也盡量不要選用超過 2 種字體,一樣的問題,畫面雜。

加強對比的方法 3 – 文字顏色

灰階是最常見的文字用色,建議純黑(色碼 #000000)可以用深灰色取代,我最常用 #202226;夜間模式下純白(色碼 #ffffff)我則是用 #F8F9FA。

為什麼要那麼麻煩不用純黑或純白呢?因為讀者大多用手機或電腦等 3C 產品來閱讀,純黑或純白在發光面板上的對比太強了,很容易有視覺暫留的問題,讀者很容易看到出現殘影。

另外如果你有品牌色規劃,想加強印象,建議就用 1 個顏色即可,就算有輔色也不用通通放到畫面上,因為色彩太多掌握不好,畫面一樣會很花俏,讓人讀不下去。

參考連結 – Say goodbye to pure black and white in UI design

加強對比的方法 4 – 特殊樣式

特殊樣式如文字傾斜、畫底線、背景上色(像螢光筆一樣),也都是幫助你創造對比,強化你想要讓讀者關注的地方。如果你是用 wordpress 之類的部落格,內建許多有變化的樣式可以使用,或者是把你想要的效果 + CSS 當作關鍵字,搜尋如:”螢光筆效果 css”、“動態底線 CSS“,就能找到很多可以直接使用的代碼,貼在網站內即可。

四個方法都可以混合使用,但老話一句,不要做太多的變化,頂多選 2~3 種形式就好,簡潔才是好閱讀的重點。

其他讓人好讀的編輯小撇步

  • 善用字距與行距,因為中文字體的筆畫多、看起來複雜,文字之間離太近會擠成一團,太遠的則會有分裂感,閱讀節奏被打斷。

    如果真的不知道怎麼調,會建議寧可窄不要寬,寬字距一般只會用在想要特別強調的標題,倘若全文都用很寬的字距,你的文章會很像飯粒掉滿地的飯糰,不知從何看起。
  • 如果面向中文讀者,請用全形包含標點符號,全半混合使用顯得很粗糙;如果是寫英文,記得切回半形!全形的英文字像被炸過一樣分很開。

  • 文字夾雜數字或英文時,空間字數許可之下,各留一格半形空白更好讀,因為數字常常是希望讀者注意到的地方。調整方式比如:

我的專業是UI/UX設計,已經有5年的經驗了。

變成 :我的專業是 UI/UX 設計,已經有 5 年的經驗了。


以上幾種方式,讓你用簡單的文字編輯器,就能調整出友善使用者的閱讀環境,幫潛在客戶順順掌握你想説講的事情。

營造良好閱讀的環境之後,怎麼寫出吸引人的內容,吸引他留下來細看文章,那就是另一個內容佈局的課題了!

謝謝你讀到最後,歡迎分享讓更多人知道😎

Janis

技能樹點很雜的品牌成長顧問,擅長使用策展思維,幫助職人專家經營個人品牌,創造網路事業。

因為也是過來人,希望能幫你精準投入預算,不要亂花錢。如果我的分享有幫到你,歡迎寫信跟我說:)

留言回應

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
查看所有留言

推薦閱讀