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

更新於 發佈於 閱讀時間約 6 分鐘

近期某個不算寧靜的夜晚,工程獅先生在忙完一切「有格調」的事務後,離開書桌(應該是電腦桌才對),走在自己小窩附近的街巷,提著不起眼的三公斤垃圾袋(不臭,所以不影響心情,但可能超過三公斤,微胖),走路的速度夾帶徐徐夜晚微風,看見黃色的國家動產物後,下意識不留情地將垃圾袋往那動產黑洞一丟,心喊著:「舊的不棄,新的不來!」

這應該就是近期方格子格鬥士們的心聲,雖然大家真滴忙得焦頭爛額,還是希望用剩餘的查克拉,逐步地提升平台體驗,讓不管是身為作者或讀者的格友們,都能夠在一次次的去蕪存菁之中,更順暢、更「有格調」(硬要前後呼應)地寫作和閱讀!

raw-image

相信眼尖的格友們有發現,近期方格子在某個頁面上做了很大的視覺優化!沒錯,今天就是要跟各位聊聊──

方格子的「文章閱讀頁」又改版啦! (⁎⁍̴̛ᴗ⁍̴̛⁎)

文章閱讀頁再次改版動機

繼前陣子我們推出了 AMP 版本的文章閱讀頁後,又經過格鬥士們仔細地討論與評估,希望能再次調整地更好,而有了這次的改版。主要是基於以下兩個核心動機:( ̄^ ̄)ゞ

  1. 讓閱讀更專注:
    在文章閱讀頁上,我們希望作者的創作成果,是讀者優先關注的重點,因此朝沉浸式閱讀方向進行了調整。
  2. 持續優化 SEO:
    不只是頁面設計上的改動,在網頁結構也做了更有利於 SEO 的調整,為好內容爭取更多被 Google 自然曝光的可能。

沉浸式閱讀

更聚焦地閱讀起來

在沉浸式閱讀考量中,首先就是重新檢討過去頁首的專題主視覺區塊。以下圖圖一為例,可以看到專題文章在閱讀頁的頁首,會優先出現置頂的專題主視覺,讓閱讀者眼球容易失焦;同時若使用手機閱讀,加上遇到網路不那麼穩定的狀況時,會需要額外增加等待圖片加載時間,而影響到該次的閱讀體驗......

經過反覆討論後,我們才決定將此區塊移除,希望讀者們在一進入文章閱讀頁的當下,映入眼簾的就是清晰、大方、明確的文章標題,馬上能進入精彩的內容閱讀情境!工程獅先生在執行完這部分的改動後,首先觀看成果後的感覺就是四個字:

通體舒暢 ╮(╯▽╰)╭
raw-image

更一致的閱讀動線

在閱讀動線的部分,我們從文末到頁尾都調了個遍!將色彩豐富的視覺感,更動為更平衡而沈穩的設計,主要調整兩個部分:

  1. 社群分享按鈕區調成灰階,用一致的顏色均化整體分享的概念。
  2. 文章關鍵字標籤的顏色一併淡化。

此兩項的優化,484讓大家讀到後面會多了點輕快愜意,一改以往可能被各種絢麗顏色閃爆你的視網膜?讓我們把要被閃爆視網膜的扣打留給明年的大稻埕煙火! ≧ω≦

再來也有格友發現了,原倒數第二區域的「編輯精選專題」被隱藏了,直接接續「你可能也想看」的文章推薦與「本日熱門」區。

這是為了讓讀者可以在閱讀完一篇文章後,持續閱讀更多精彩的內容,並減少讀者在專題與文章的不同維度切換下而可能產生隱性的干擾(因為精選專題區塊是橫向操作,與其他所有區塊都是上至下的瀑布流動線是相反的)。

作者們別著急

有些作者或許會想:那,我的專題主視覺呢?你說啊!!(╯°□°)╯︵ ┻━┻

莫橘、莫慌、莫害怕!請繼續往下滑~~如下圖圖二所示,我們將過去單一的區域呈現,擴增成為有「作者介紹」「專題介紹」的兩個區域!

這樣的版型可以讓讀者更全面地看到正在閱讀的文章,是來自哪位作者、被收錄在哪個出版專題內,可以直接追蹤、贊助或購買,以行動支持喜愛的作者!

raw-image

持續優化 SEO

工程獅先生平時「有格調」的例行事務其中有一項便是時刻關注 Google 後台數據,持續優化 SEO,來爭取文章能夠更被 Google 喜歡,進而增加自然曝光。

不想理解火星文也沒關係,簡單來說,好的 SEO 代表較可能被 Google 認定為閱讀價值較高的頁面,在同樣的搜尋條件下,Google 會選擇優先展示品質好的頁面,等同你的內容被看見得機會更高了,是不是很像一種正向的能量循環帶動!(⊙o⊙)。

寫到肚子餓總結

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

希望這次的文章閱讀頁全新改版可以帶給大家更輕巧、更有品質、更順暢的閱讀體驗蛤!∠( ᐛ 」∠)_

愛情釀的酒

最後的最後,工程獅先生在下本篇開發誌的標籤時,老靈魂靈光一閃,想到了愛情釀的酒 XD

方格子從開始至今,都是在各方格友們的支持下慢慢成長茁壯,就像愛情長跑一樣,每個功能展現到發酵都是需要經過長時間的醞釀與吸取精華(以及格友們堅定的包容),過程可能百般滋味卻又陳年精華!這次想要分享這首「愛情釀的酒」,因為平台優化沒有結束的一天,而是像一首好歌一樣,不斷傳唱,越陳越香!


大家愉快:)

工程獅先生 敬上 2021-09-04

留言
avatar-img
留言分享你的想法!
avatar-img
方格子 vocus 官方沙龍
396.7K會員
3.4K內容數
哈囉,歡迎來到方格子 vocus 的官方沙龍! 在這裡你可以參與方格子 vocus 的發展旅程,接受到所有關於 vocus 的最新動態,包含平台重大功能更新、活動消息、各房間發佈的最新內容,甚至是徵才資訊等等,現在就按下「加入」,與 vocus 一起展開精彩的創作冒險吧!
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/06/10
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
2022/06/10
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
全新的成就系統來囉~ 更容易被看見的「內容成就」及「會員基本成就」,還有隱藏彩蛋...... 加碼的閱讀頁微整優化,更美觀大方好閱覽!
Thumbnail
全新的成就系統來囉~ 更容易被看見的「內容成就」及「會員基本成就」,還有隱藏彩蛋...... 加碼的閱讀頁微整優化,更美觀大方好閱覽!
Thumbnail
在即將迎來舊曆新年的 2022 年年初,方格子站上又做了一些大型改版,會這麼努力在過年前調整(也不放過自己),為的就是讓大家在使用方格子時能夠感到更順暢啊!也許過年期間,除了大餐吃到飽,你還能在茶餘飯後創作幾篇文章、讀幾個專題,因此度過一個為身心都充飽電的年假! 趕快進來看看我們做了哪些調整吧!
Thumbnail
在即將迎來舊曆新年的 2022 年年初,方格子站上又做了一些大型改版,會這麼努力在過年前調整(也不放過自己),為的就是讓大家在使用方格子時能夠感到更順暢啊!也許過年期間,除了大餐吃到飽,你還能在茶餘飯後創作幾篇文章、讀幾個專題,因此度過一個為身心都充飽電的年假! 趕快進來看看我們做了哪些調整吧!
Thumbnail
因為我們一直想讓各位創作者能夠「被自然曝光的機會」提升,因此從 2021 下半年,我們開啟了「加強 SEO 調校」這項重要專案,至今也做了數不清幾輪的優化。而這項目並沒有結案日,因為一旦踏入搜尋引擎機器人的世界裡,就沒有抽身的那天(咦?),也就是優化會持續 never end 地進行下去⋯⋯
Thumbnail
因為我們一直想讓各位創作者能夠「被自然曝光的機會」提升,因此從 2021 下半年,我們開啟了「加強 SEO 調校」這項重要專案,至今也做了數不清幾輪的優化。而這項目並沒有結案日,因為一旦踏入搜尋引擎機器人的世界裡,就沒有抽身的那天(咦?),也就是優化會持續 never end 地進行下去⋯⋯
Thumbnail
相信眼尖的格友們有發現,近期方格子在某個頁面上做了很大的視覺優化!沒錯,今天就是要跟各位聊聊──方格子的「文章閱讀頁」又改版啦! (⁎⁍̴̛ᴗ⁍̴̛⁎) 這次的改版。主要是基於以下兩個核心動機:「讓閱讀更專注」、「持續優化 SEO」,希望本次的優化可以讓大家更聚焦地閱讀起來...
Thumbnail
相信眼尖的格友們有發現,近期方格子在某個頁面上做了很大的視覺優化!沒錯,今天就是要跟各位聊聊──方格子的「文章閱讀頁」又改版啦! (⁎⁍̴̛ᴗ⁍̴̛⁎) 這次的改版。主要是基於以下兩個核心動機:「讓閱讀更專注」、「持續優化 SEO」,希望本次的優化可以讓大家更聚焦地閱讀起來...
Thumbnail
一回來方格子寫文章,就深刻想起了那天被超不人性化後台支配的恐懼 真的是難用到吐血,非常非常非常有待加強 相信我不孤單,一定有許多作家和我一樣心有戚戚焉(站出來吧!!!) 有一說一,就讓我娓娓道來。 首先我認為有幾個很糟糕的點非常需要改善: 文章無做法批次處理 每個一個動作都需要跳轉一次介
Thumbnail
一回來方格子寫文章,就深刻想起了那天被超不人性化後台支配的恐懼 真的是難用到吐血,非常非常非常有待加強 相信我不孤單,一定有許多作家和我一樣心有戚戚焉(站出來吧!!!) 有一說一,就讓我娓娓道來。 首先我認為有幾個很糟糕的點非常需要改善: 文章無做法批次處理 每個一個動作都需要跳轉一次介
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News