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

我們從三月開始經營 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

懂權力,在每個角色上發光

本書顛覆我們以往對權力本質的所有認知,導正對權力的常見誤解,揭示令人耳目一新的實用案例。你的成功、影響力和生活滿意度,與你累積多少權力,或是別人認為你多麼有權力無關,而是因為你能為別人做些什麼。 20多年權力心理學研究權威、史丹佛大學商學院講座教授葛倫費德,首創將演員思維應用到課堂上,與一流表演藝術家共同合作研發創新的權力課,大受好評,而成為最受學生歡迎的選修課。 在本書中,你可以學到如何增強和弱化權力的影響,收放自如地展現權力的兩種姿態,以及藉由靈活地轉換角色、演好主角或配角,有效應對焦慮與不安全感

Editor Recommend

零盲點思維

本書作者茱莉亞.蓋勒芙(Julia Galef)是應用理性中心共同創辦人,同時也是一位人氣講者,她的TED演講「為什麼你會認為你是對的,儘管你是錯的」獲得熱烈回響,並以其中的核心觀點寫成了這本書。蓋勒芙發現,我們內心認為親眼所見的就是事實和真相,這樣的心態限制了我們的判斷力,局限了我們對世界的認知。但是,這種心態是可以改變的。《零盲點思維》不只幫助一般人看清事實、辨析日常判斷、做對決策,對於想要提升推論力和決策力的職場工作者、企業主管,企圖避免做錯決定的人,書中建議的做法也都非常的實用、有效。

More Articles

Shopping cart
There are no products in the cart!
Continue shopping
0