方格子開發誌#6|「文章閱讀頁」改版啦! #愛情釀的酒

更新於 發佈於 閱讀時間約 5 分鐘
近期某個不算寧靜的夜晚,工程獅先生在忙完一切「有格調」的事務後,離開書桌(應該是電腦桌才對),走在自己小窩附近的街巷,提著不起眼的三公斤垃圾袋(不臭,所以不影響心情,但可能超過三公斤,微胖),走路的速度夾帶徐徐夜晚微風,看見黃色的國家動產物後,下意識不留情地將垃圾袋往那動產黑洞一丟,心喊著:「舊的不棄,新的不來!」
這應該就是近期方格子格鬥士們的心聲,雖然大家真滴忙得焦頭爛額,還是希望用剩餘的查克拉,逐步地提升平台體驗,讓不管是身為作者或讀者的格友們,都能夠在一次次的去蕪存菁之中,更順暢、更有格調(硬要前後呼應)地寫作和閱讀!
相信眼尖的格友們有發現,近期方格子在某個頁面上做了很大的視覺優化!沒錯,今天就是要跟各位聊聊──
方格子的「文章閱讀頁」又改版啦! (⁎⁍̴̛ᴗ⁍̴̛⁎)

文章閱讀頁再次改版動機

繼前陣子我們推出了 AMP 版本的文章閱讀頁後,又經過格鬥士們仔細地討論與評估,希望能再次調整地更好,而有了這次的改版。主要是基於以下兩個核心動機:( ̄^ ̄)ゞ
  1. 讓閱讀更專注:
    在文章閱讀頁上,我們希望作者的創作成果,是讀者優先關注的重點,因此朝沉浸式閱讀方向進行了調整。
  2. 持續優化 SEO:
    不只是頁面設計上的改動,在網頁結構也做了更有利於 SEO 的調整,為好內容爭取更多被 Google 自然曝光的可能。

沉浸式閱讀

更聚焦地閱讀起來

在沉浸式閱讀考量中,首先就是重新檢討過去頁首的專題主視覺區塊。以下圖圖一為例,可以看到專題文章在閱讀頁的頁首,會優先出現置頂的專題主視覺,讓閱讀者眼球容易失焦;同時若使用手機閱讀,加上遇到網路不那麼穩定的狀況時,會需要額外增加等待圖片加載時間,而影響到該次的閱讀體驗......
經過反覆討論後,我們才決定將此區塊移除,希望讀者們在一進入文章閱讀頁的當下,映入眼簾的就是清晰、大方、明確的文章標題,馬上能進入精彩的內容閱讀情境!工程獅先生在執行完這部分的改動後,首先觀看成果後的感覺就是四個字:
通體舒暢 ╮(╯▽╰)╭
圖一:頁首的調整,讓讀者一進入閱讀頁就能閱讀起來!

更一致的閱讀動線

在閱讀動線的部分,我們從文末到頁尾都調了個遍!將色彩豐富的視覺感,更動為更平衡而沈穩的設計,主要調整兩個部分:
  1. 社群分享按鈕區調成灰階,用一致的顏色均化整體分享的概念。
  2. 文章關鍵字標籤的顏色一併淡化。
此兩項的優化,484讓大家讀到後面會多了點輕快愜意,一改以往可能被各種絢麗顏色閃爆你的視網膜?讓我們把要被閃爆視網膜的扣打留給明年的大稻埕煙火! ≧ω≦
再來也有格友發現了,原倒數第二區域的「編輯精選專題」被隱藏了,直接接續「你可能也想看」的文章推薦與「本日熱門」區。
這是為了讓讀者可以在閱讀完一篇文章後,持續閱讀更多精彩的內容,並減少讀者在專題與文章的不同維度切換下而可能產生隱性的干擾(因為精選專題區塊是橫向操作,與其他所有區塊都是上至下的瀑布流動線是相反的)。

作者們別著急

有些作者或許會想:那,我的專題主視覺呢?你說啊!!(╯°□°)╯︵ ┻━┻
莫橘、莫慌、莫害怕!請繼續往下滑~~如下圖圖二所示,我們將過去單一的區域呈現,擴增成為有「作者介紹」「專題介紹」的兩個區域!
這樣的版型可以讓讀者更全面地看到正在閱讀的文章,是來自哪位作者、被收錄在哪個出版專題內,可以直接追蹤、贊助或購買,以行動支持喜愛的作者!
圖二:淡化區塊色調、優化作者與專題的專注感呈現。

持續優化 SEO

工程獅先生平時有格調的例行事務其中有一項便是時刻關注 Google 後台數據,持續優化 SEO,來爭取文章能夠更被 Google 喜歡,進而增加自然曝光。
不想理解火星文也沒關係,簡單來說,好的 SEO 代表較可能被 Google 認定為閱讀價值較高的頁面,在同樣的搜尋條件下,Google 會選擇優先展示品質好的頁面,等同你的內容被看見得機會更高了,是不是很像一種正向的能量循環帶動!(⊙o⊙)。

寫到肚子餓總結

在這次的文章閱讀頁改版上,相信大家應該都可以強烈感受到,整體閱讀體驗感相較過去更輕盈,「文章本位」的思維更強化,能夠讓讀者更沉浸在文章中舒適地閱讀,讓閱讀的深化成為可能;而整體脈絡上也因為色塊的色調沉穩化區塊內容的專注化,讓整個頁面從頭到腳像是一系列的排毒過程(以前是有多毒?),不會充斥著太多的內容層次與維度相互干擾。
希望這次的文章閱讀頁全新改版可以帶給大家更輕巧、更有品質、更順暢的閱讀體驗蛤!∠( ᐛ 」∠)_

愛情釀的酒

最後的最後,工程獅先生在下本篇開發誌的標籤時,老靈魂靈光一閃,想到了愛情釀的酒 XD
方格子從開始至今,都是在各方格友們的支持下慢慢成長茁壯,就像愛情長跑一樣,每個功能展現到發酵都是需要經過長時間的醞釀與吸取精華(以及格友們堅定的包容),過程可能百般滋味卻又陳年精華!這次想要分享這首「愛情釀的酒」,因為平台優化沒有結束的一天,而是像一首好歌一樣,不斷傳唱,越陳越香!
大家愉快:)
工程獅先生 敬上 2021-09-04
為什麼會看到廣告
avatar-img
290.1K會員
3.0K內容數
哈囉,歡迎來到方格子 vocus 的官方沙龍! 在這裡你可以參與方格子 vocus 的發展旅程,接受到所有關於 vocus 的最新動態,包含平台重大功能更新、活動消息、各房間發佈的最新內容,甚至是徵才資訊等等,現在就按下「加入」,與 vocus 一起展開精彩的創作冒險吧!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
嗨囉,各位格友們: 感受到這兩週方格子的速度了嗎 🚀🚀🚀? (轟隆隆隆~ 引擎發動!) 工程獅先生睽違數週的開發誌更新!
嗨溜~各位格友們! 相信今日每個人的眼神,是迷樣又迷媚的眼神,外面下著被颱風放鴿的細雨,心中卻是淺淺的微笑!沒錯,又到了美麗的週五時光 (確認過眼神)(⁎⁍̴̛ᴗ⁍̴̛⁎)
一週又和平地過去了,這禮拜本獅也消滅了許多 Bug,請容我來向各位讀者報告。
在這美麗的禮拜五,來記錄一下最近咱們工程師做了哪些好事!
格友們午安,方格子最近完成了一道秘密裝潢,不知道大家有沒有發現呢? 沒錯,經過我們的一番嘔心瀝血、敲敲打打後,終於翻新了登入頁面,以及整個註冊流程。一進到新的登入頁面,即可一覽整個方格子城市,是不是很美呢?工程獅先生在收到設計圖的那瞬間深深被感動 ⋯⋯ ( •̥́ ˍ •̀ू )
方格子主題頁全新改版!「主題」是全新的概念,用以承接過去對讀者們溝通的「策展」以及對作者們溝通的「徵文」,主題將會以一個更宏觀的角度來集合、解釋作者與讀者的角度,並且發展出不同的主題來驅動雙邊使用者的寫作與閱讀,激發彼此創作靈感,持續翻攪、昇華!
嗨囉,各位格友們: 感受到這兩週方格子的速度了嗎 🚀🚀🚀? (轟隆隆隆~ 引擎發動!) 工程獅先生睽違數週的開發誌更新!
嗨溜~各位格友們! 相信今日每個人的眼神,是迷樣又迷媚的眼神,外面下著被颱風放鴿的細雨,心中卻是淺淺的微笑!沒錯,又到了美麗的週五時光 (確認過眼神)(⁎⁍̴̛ᴗ⁍̴̛⁎)
一週又和平地過去了,這禮拜本獅也消滅了許多 Bug,請容我來向各位讀者報告。
在這美麗的禮拜五,來記錄一下最近咱們工程師做了哪些好事!
格友們午安,方格子最近完成了一道秘密裝潢,不知道大家有沒有發現呢? 沒錯,經過我們的一番嘔心瀝血、敲敲打打後,終於翻新了登入頁面,以及整個註冊流程。一進到新的登入頁面,即可一覽整個方格子城市,是不是很美呢?工程獅先生在收到設計圖的那瞬間深深被感動 ⋯⋯ ( •̥́ ˍ •̀ू )
方格子主題頁全新改版!「主題」是全新的概念,用以承接過去對讀者們溝通的「策展」以及對作者們溝通的「徵文」,主題將會以一個更宏觀的角度來集合、解釋作者與讀者的角度,並且發展出不同的主題來驅動雙邊使用者的寫作與閱讀,激發彼此創作靈感,持續翻攪、昇華!
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
方格子的創作者們、格友們,應該已經在昨天(2024/08/08)的方格子 vocus官方公告,知道討論區即將改版的事情。在八月下旬,沙龍的討論區就會有巨大的變化,且很可能帶動方格子生態大幅轉變。 而我個人認為,這一次的更新,對於小眾創作者有更大的影響與助益。
Thumbnail
方格子官方最近宣佈改善原有的討論區功能,將其轉型為房間模式。
陸續使用過痞客邦和Blogger紀錄閱讀心得,後來覺得痞客邦廣告太多、Blogger功能太少(而且似乎都沒更新),搜尋了一下便選了方格子,其實方格子給我的感覺有點太正式了,用來隨意寫些閱讀心得有些小題大作,還是想分享~ 這裡不是書評,純粹是閱讀當下的感受和想法,或是與過去的連結。會先搬運一些舊文章。
Thumbnail
這篇文章宣布由於忙碌,發文頻率將從每天一篇調整為兩天一篇。作者回顧在方格子平台的發文歷程,共發表了63篇文章。雖然追蹤者不多,但作者表示此平台是佛系經營,重在紀錄和分享。最後,作者宣傳了一個遊戲創作交流的Discord群組,並邀請有興趣的讀者加入。
Thumbnail
眼尖的格友們發現了嗎?在今日的 vocus 更新中,閱讀頁變得稍微不一樣了!即日起,只要創作者有在發佈工具為內容設定「下一篇」,粉絲瀏覽完該篇內容時,只要將頁面向下捲動,即可無縫瀏覽下一篇內容,享有更加滑順的使用體驗。
Thumbnail
大家在討論瀏覽量的時候,都會提到方格子首頁的通透度的問題,在這個問題上提了很多次,但是仔細看方格子的首頁,其實沒有太大的問題,如果你是會員的話。首頁基本上是對你開放的,你要怎麼瀏覽都可以,對會員這個閱讀者來講,他是感到方便自在的。可以往下拉,看推薦的文章。也可以直接搜尋,他想要找的搜尋。也可以透過探
Thumbnail
 前兩週心情有受到瀏覽數而影響,但這兩個禮拜持續觀察後台和搜尋關鍵字有一些些想法後,我目前的概念分成兩個面向。
Thumbnail
方格子沙龍初體驗:向大家報告最近我使用方格子在以下兩方面的改變,(1)閱讀格友的文章和與格友互動,及(2)準備和發放自己的文章。這些體驗讓我反思如何分配時間並適應這新的互動模式。
Thumbnail
在方格子已經投入四年光陰,前面三年半可以說是毫無章法地在寫,直到2023下半年開始穩定產出,改變撰文方式,才找到了一個初步的方向,這其中創造了兩篇熱門文章,也認識了不少新寫手。 這篇就回顧一下2023年我做了什麼改變,2024年又有什麼期許。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
方格子的創作者們、格友們,應該已經在昨天(2024/08/08)的方格子 vocus官方公告,知道討論區即將改版的事情。在八月下旬,沙龍的討論區就會有巨大的變化,且很可能帶動方格子生態大幅轉變。 而我個人認為,這一次的更新,對於小眾創作者有更大的影響與助益。
Thumbnail
方格子官方最近宣佈改善原有的討論區功能,將其轉型為房間模式。
陸續使用過痞客邦和Blogger紀錄閱讀心得,後來覺得痞客邦廣告太多、Blogger功能太少(而且似乎都沒更新),搜尋了一下便選了方格子,其實方格子給我的感覺有點太正式了,用來隨意寫些閱讀心得有些小題大作,還是想分享~ 這裡不是書評,純粹是閱讀當下的感受和想法,或是與過去的連結。會先搬運一些舊文章。
Thumbnail
這篇文章宣布由於忙碌,發文頻率將從每天一篇調整為兩天一篇。作者回顧在方格子平台的發文歷程,共發表了63篇文章。雖然追蹤者不多,但作者表示此平台是佛系經營,重在紀錄和分享。最後,作者宣傳了一個遊戲創作交流的Discord群組,並邀請有興趣的讀者加入。
Thumbnail
眼尖的格友們發現了嗎?在今日的 vocus 更新中,閱讀頁變得稍微不一樣了!即日起,只要創作者有在發佈工具為內容設定「下一篇」,粉絲瀏覽完該篇內容時,只要將頁面向下捲動,即可無縫瀏覽下一篇內容,享有更加滑順的使用體驗。
Thumbnail
大家在討論瀏覽量的時候,都會提到方格子首頁的通透度的問題,在這個問題上提了很多次,但是仔細看方格子的首頁,其實沒有太大的問題,如果你是會員的話。首頁基本上是對你開放的,你要怎麼瀏覽都可以,對會員這個閱讀者來講,他是感到方便自在的。可以往下拉,看推薦的文章。也可以直接搜尋,他想要找的搜尋。也可以透過探
Thumbnail
 前兩週心情有受到瀏覽數而影響,但這兩個禮拜持續觀察後台和搜尋關鍵字有一些些想法後,我目前的概念分成兩個面向。
Thumbnail
方格子沙龍初體驗:向大家報告最近我使用方格子在以下兩方面的改變,(1)閱讀格友的文章和與格友互動,及(2)準備和發放自己的文章。這些體驗讓我反思如何分配時間並適應這新的互動模式。
Thumbnail
在方格子已經投入四年光陰,前面三年半可以說是毫無章法地在寫,直到2023下半年開始穩定產出,改變撰文方式,才找到了一個初步的方向,這其中創造了兩篇熱門文章,也認識了不少新寫手。 這篇就回顧一下2023年我做了什麼改變,2024年又有什麼期許。