fbpx
logo
手機體驗稱王的世代,如何讓你的文章更適合用手機閱讀
這篇文章會簡單分享,如何提供更良好的閱讀體驗給讀者,暫不考慮內容與讀者類型,先以閱讀體驗為主。

我是一位設計師,成立一間設計工作室,叫 BORING Design Lab專注於打造品牌與數位體驗,我們不只是一間設計研究室,同時開發自己的品牌與產品。同時,我會去咖啡廳&公園散步來整理思緒,並用文字的方式記錄在 LATTE & PARK ,分享設計、廣告與科技議題給有興趣的人。

我們從三月開始經營 Back to 24 ,從圖文內容到平台設計,每個月都會進行檢討,以提供更優質的體驗給讀者。在優化內容的過程中,我們發現文章「跳出率 ( Bounce rate )」偏高的時候,團隊開始去思考是哪裡出了問題,內容不合讀者胃口嗎?文字排版上的問題嗎? 還是讀者類型跟預設不ㄧ樣。這篇文章會簡單分享,如何提供更良好的閱讀體驗給讀者,暫不考慮內容與讀者類型,先以閱讀體驗為主。

73% 用手機閱讀我們的文章

人們用手機看影片、文章的比例已經遠遠超過電腦, CNBC 預估,到 2025 年全球將有四分之三的地區僅使用智慧型手機瀏覽網頁, Boring 的後台數據也顯示現在讀者有 73% 是使用手機來閱讀文章,因此文章的排版也要因應趨勢做出改變

手機與電腦的使用差異

我們很習慣交互使用電腦與手機,但其實兩者在許多使用習慣上是有差異的,最顯而易見的就是手機的螢幕更小,能呈現的內容更有限。 此外使用手機與電腦最大的差異就是「環境的穩定性」,舉凡上下班的捷運上、排隊結帳中、運動的休息時間,這些瑣碎的時間空擋通通都能使用手機,因此用戶看到一半就被打斷是很正常的 ( 有可能保持在一直移動的狀態 ) ,另外如果排版讓讀者看著不舒服,就很有可能導致讀者馬上離開頁面而增加「跳出率 ( Bounce rate )」。為了因應這些狀況,內容平台或是文字創作者要盡可能的讓讀者能更直覺的閱讀,也因此後續我們對內容版面、字體以及顏色都做了修正。

響應式網站 Response Web Design ( RWD )

響應式網站的主要目的也在解決「移動端用戶的閱讀體驗」,以往的傳統網站因為尺寸是固定的,僅能滿足某些螢幕解析度的用戶,但是現在有數十種智慧型手機、平板等不同的解析度規格,只用固定的尺寸格式,會大大影響他們的使用體驗,一但讀者覺得你的版面不好閱讀,那他們一定很快就會沒耐心的想離開。所以這時響應式網站的作用就很重要,響應式網站 ( RWD ):網頁本身隨著螢幕的大小去調整變化,自動適應在不同的解析度下改變網頁排版,可以確保不管是用什麼解析度的設備,都可以在最舒服的狀況下閱讀。

字體選擇與大小的調整 

雖然大多數的讀者都分不出來字型大小或是字體到底差在哪裡,但卻能夠感覺到閱讀文章的體驗是否直覺舒適,為了減輕小螢幕給眼睛帶來的壓力,我們在字體的選擇與大小也做了調整。因為過去一直是使用英文字體的規範,但是發現把英文規範套用到中文字體,好像行不通,所以我們也進行了許多測試。

字體的選擇

網站的字體原本是使用英文系字體,所以顯示出來的中文字會有點怪怪的,同時會產生 Tofu ,也就是錯亂字,一個框框裡面有一個叉叉,就是代表不支援字體。這次我們把內文字體換成 Google 製作的 Noto Sans TC ,但同時在網站的其他頁面也有使用英文字體,剛好 Noto Sans TC 有同時支援中文字體與英文字體。當時本來也在考慮 Source Han Serif ,最後還是選擇 Noto Sans TC 。此外,字型的選擇也是一門學問,最好要配合自己的網站、文章風格進行調整。

標題的調整 

為了更舒適的閱讀體驗,過去在手機版本的標題跟內文大小有點相似,有時候會讓讀者誤會還在上一個段落,為了讓讀者能快速區分段落,我們也把標題的字變大。此外也搭配另一個方式凸顯標題,選擇在標題與內文各自使用不同的字體,吸引讀者注意。

內文的調整

我們設想使用手機閱讀文章的讀者是在不穩定的環境上,像是上下班的捷運上、移動的電扶梯上這些破碎的空檔,因此我們把內文的字體從 14px 增加到 16px ,這樣即使在搖晃的車廂間,讀者還是可以看清楚我們的內文。而行距的調整,能讓人很自然的閱讀下去。

版面的調整

我們發現版面的配置對於閱讀體驗的影響也很大,過於複雜的版面會讓整體看起來混亂、抓不到重點,感到煩躁就會導致讀者流失,為了避免這樣的情況,挑選適當的顏色就顯得極為重要。此外適度的留白也是時常被忘記的關鍵,過於擁擠的排版加上手機的小螢幕更容易導致讓人焦躁,留白不僅是為了讓畫面看起來不那麼擁擠,更能藉此襯托出文章的重點,也可以讓讀者在沒接受到新資訊的時間內思考文章想傳遞的內容。

利用顏色來區分訊息輕重

設計上可以選擇同色系為主軸,以較深色為重點去做區分,除了讓讀者看得舒服同時也能讓他們下意識的集中在我們希望讀者注意的重點。我們過去的文章版面的字體都是統一使用黑色,導致在手機體驗下讀者無法知道哪些是重要的訊息,所以我們保持標體與內文使用黑色,而文章種類與 Read more 則換成灰色,讓整個版面有一個對比。利用深色讓讀者先看到標體與內文,而種類不是那麼重要的資訊可以使用淺色。

但全都是同色調也容易讓人感到乏味,適時的使用對比色來強調特殊項目就是個很好的處理方式,比方說「訂閱、購買課程」等等希望讀者特別注意到的重點,或是內文中的 quote 與連結都可以用其他顏色,讓讀者快速的發現重點,而在 Boring 上我們選擇使用我們的代表色「黃色」帶來一絲活力與驚喜。

增加種類分隔線 

大多數的讀者到網站之後,通常都是看完「當前的內容」就跳出了,因為我們希望能讓讀者在我們的網站留久一點,看更多他們可能會感興趣的內容,我們設立標籤將文章分類,為了更快速的找到想要閱讀的相關文章,我們使用種類分隔線,讓讀者知道這個部分是屬於哪些類型的文章? 譬如最新的文章或工作經驗分享等等 。讀者其實是很容易且習慣找到網頁的排版規律的,只要佈置的夠舒適,簡單的一條分隔線就可以讓網站更有結構跟層次。

橫式收納文章

以往我們的文章,就是放在新文章下面直直的一排,但隨著每週四出一篇文章的速度,很快我們便發現文章堆疊會導致讀者滑不見底的窘境,這樣根本無法有效地找到想看的文章,於是我們決定使用橫式收納的方式來儲存文章。一般在手機上常見的格式就是「直式」與「橫式」兩種,而其實直式的文案更適合展示分類,而橫式適合將各種分類詳細展開,不管是 Android 系統的 Google play 商店或是 ios 的 Apps Store 都選擇了這樣的型式,這能幫助讀者更直覺地找到想要的資訊。

如果你也是作者或是創作平台,分享以上一些小技巧給你,不過,版型與字體固然重要,但是文章內容與讀者體驗才是最需要重視的。要記住的是,我們是在為用戶進行設計,「讓讀者能夠直覺不費力的閱讀」是我們進行優化的最大目的,同時身為內容創作者,我們最要留意的仍然是文章內容能帶給讀者什麼價值? 如果想傳達的價值並不是讀者需要的,僅有優良的視覺排版也沒有辦法留下讀者,好的內容配上舒適的版型包裝,才能最大效益的走入讀者的內心。

共同選書

Editor Recommend

行銷 5.0

本書以實用易懂的細節,說明市場、商業和科技三大轉變。全球企業面對疫情蔓延之下,迫使企業在把產品服務推向市場的過程中,還得克服全新的艱鉅挑戰,並且利用科技來滿足顧客的非物質需求。本書共分為三部分,首先分析世代變遷何以造就了全新的顧客行為。第二部分詳細介紹全球企業逐漸採行的新策略方向。第三部分探討了不同領域科技高速發展的現況,包括AI及物聯網等。無論組織規模大小,《行銷5.0》都極適合行銷長、行銷部門經理、主管與員工閱讀;對於身處中小企業、意欲提升行銷能力的人來說,更是不可或缺的參考書。

Editor Recommend

一流的人讀書,都在哪裡畫線?

本書引導讀者學會畫出那翻轉人生的一條線,從「選書」開始傳授獨門訣竅,緊接著是分門別類的「部分閱讀」,勇敢挑戰自己不熟悉、不擅長的領域,由淺入深擴充自己的商業知識,接著才能抓對重點、讀出門道。不論是輕薄近人的暢銷書、還是艱澀厚重的磚頭教科書,每個優秀的讀書人,都能從中抓住有助提升自己的靈感。書末更親自示範作者自己如何「畫線」,精選四十四本商業好書,畫出土井英司獲益匪淺的文句,與讀者分享他獨特的深思考技術。你也可以從中選一本書,拿起紅筆想一想,如果整本書只能選一個重點,能夠改變你人生的文字,是哪一句?

Editor Pick

你拿時間做什麼?一位設計師的高效時間管理訣竅

你拿時間做什麼?一位設計師的高效時間管理訣竅

有一天同事走過來我旁邊說,為什麼你做很「快」 — — 什麼意思?什麼叫快?是做事很快?還是想事情很快? 我們就互相分享自己的workflow,也因此有這個機會分享我的workflow給各位thinker or designer。

more articles

voyage 002 – Personal’s Goal & Lab’s Goal

voyage 002 – Personal’s Goal & Lab’s Goal

前陣子開始,每個禮拜我與每一個在 BORING design lab 的夥伴花半小時的時間來進行一對一談話 ,而這個 one on one 主要是聊聊對方的生活,或者是未來職涯有什麼規劃,甚至是工作上遇到什麼困難等等,而我這邊是否可以調整與修改來協助夥伴。 基本上,目前設計工作室人少,工作流程也很單純,很慶幸沒有太多工作上的問題。但是經過幾次的談話,我也慢慢了解夥伴心中的規劃與想要嘗試的方向,像是有一個夥伴對於插畫非常有興趣,另一個夥伴接觸大量數據分析的專案等等。當然,對於 BORING...

voyage 001 – FFF

voyage 001 – FFF

前陣子在美國時,在 Netflix 看了一部韓劇叫做 Start – Up ,裡面其中講述到 FFF – Friend & Fool & Family 的一個概念,當初沒有什麼共鳴,直到最近特別有感觸。

每一個選擇,都有原因與後果。

每一個選擇,都有原因與後果。

身為人,為什麼要一直做決定? 生命的意義以及為什麼我們想要繼續前進的原因不僅僅是一個想法,身為人類了解自己的時間有限,今天的世界明天將不存在,所以我們在當下做出選擇,有些選擇帶來的後果,需要經過時間的歷練,才會了解這些選擇的意義何在?

如何建立品牌核心

如何建立品牌核心

為什麼每一間公司都會特別放一筆預算去經營品牌形象?對這些商業人士來說,一定是有價值才會願意投資對吧?畢竟都是資本主義的代言者…