方格精選

方格子開發誌#1|全站輔色調整與網頁 SSR 優化

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

大家好,我是方格子的工程獅先生!上週「驚蟄」剛過,原本期待天公作響,卻是在週末下了場場大雨,一點轟隆都沒有,看來我們只能好好待在家中持續冬眠,開個小黃燈,打開方格子文章,搭配雨聲的 ASMR,用最廢的姿勢閱讀你最喜愛的文章,再用這個睡姿睡死在方格子平台面前,何嘗不是件美好的事?

raw-image

相信格友們最近有微微觀察到,平台又有了一點點的不一樣。沒錯,方格子開發團隊在過年吃飽睡足了(並沒有)以後,很快地又回到銀河戰艦上持續優化平台。

從開工以來,我們將目標初步定調為:讓系統更加穩定,並且在整體品牌體驗上減少複雜度。為此,我們在開發上有兩項主要目標,一是將整體的主題顏色做全站性的統整與優化;二則同時在方格子閱讀頁與首頁載入進行速度上的優化!

以下是我們針對上述所做的相關調整項目:

全站輔助色調整

在這次的任務中,我們重新檢視了方格子全站頁面的色彩樣式。在程式中也明確地重新定義顏色的階層關係,希望讓設計端的色彩在套用的同時,就先透過一層介面的層級定義,來引入我們需要的顏色!

除了程式面的介面定義外,設計端也重新整理、設計了全站的視覺輔助色,刪除掉原先較為複雜的輔助色組合搭配,希望讓全站在視覺體驗上變得更加順暢,視覺層級更加清晰;另外也在灰階的部分做了統整與細調,希望讓內容的輕重脈絡更能夠被清楚地定義。

raw-image

這部分的調整規模其實蠻大的,因為是底層顏色引入方式的改變(汗),既要使視覺層級感上更加明確、流暢,又不會太過刺激使用者們的閱讀體驗,用這樣「潛移默化般默默地存在」,把方格子視覺的一致性帶出來。

以下圖閱讀頁為例,原本的「贊助作者」的按鈕在優化後會顯得更加明顯,便是希望利用方格子的主色強調當前頁面「最希望被使用」的按鈕動作,使層級感更加強烈。這就是我們希望在各個頁面能夠帶出的視覺體驗,不知道你有沒有發現這項改變了呢?

raw-image

爆文後的寧靜致遠

近期許多厲害的作者在方格子上創作出很好的文章,為我們帶來許多新讀者的造訪,這也隱隱地說明了我們必須在前端頁面處理上,盡快刪除一些不必要的 Server-Side Rendering (簡稱 SSR)網址頁面,用來減少伺服器的處理負荷;另外,我們也將部份會吃到伺服器資源的頁面,直接在部署的同時生成靜態資源,藉以減輕伺服器資源的利用,進而將資源移給更需要的頁面使用,讓頁面之間的資源運用更平衡,載入的體驗也可以獲得進步。

這樣的好處是,當未來再出現爆文時,方格子伺服器會變得相對穩定,來迎接各位讀者觀看的甜蜜負荷:)。當然,方格子工程獅也會持續關注這方面的調校,並持續優化進步,畢竟好的閱讀體驗,永遠是我們希望提供給使用者的。

除了上述兩大項目的開發,我們還做了許多事情想與格友們分享:

  • 近期我們上版了一個新的關鍵字(tag)頁面唷!呦呼~!現在開始,你可以依照時間、熱門程度、互動程度等指標來瀏覽該關鍵字的相關文章;創作者們甚至可以直接透過搜尋出的關鍵字結果開啟新的創作靈感,直接開始撰寫相關文章唷!歡迎格友們前往試試,希望各位會喜歡:)
raw-image
  • 之前在點擊個人頭像時,偶爾會出現 404 頁面的狀況,在這次的更新中我們也修正掉了這個 Bug。
  • 修改了文章排程功能的時區呈現問題,讓你不論活在北美或南法,都不用再換算,顧及台灣讀者的閱讀時間。

最後,我們不免俗來一下提及一下方格子最近發生的 chill 事:

  1. 最近我們有新的工程師以及新的行銷、營運夥伴們入加方格子團隊,請用你們最 chill 的掌聲歡迎他們!!!(格編想問到底什麼是最 chill 的掌聲?)
  2. 腦闆 David 把自己的帳號不小心 ban 掉了,我們很快速地協助完成復原,將他從懸崖黑洞邊拉回,希望 David 以後不要再手殘~

好啦!以上就是本期的方格子開發誌,工程獅們未來也會不定期向格友們報告開發團隊的各項工作,希望這些大大小小的改變,可以讓大家更喜歡我們的平台服務,也希望各位可以更常上來方格子吃瓜泡茶、持續關注我們的開發動態唷!

你們在平台上的點擊互動,都會像青春的鉛筆,縮向前方的帥哥美女。

(其實我只想表達「怦然心動」的感覺...)


「Bug 當酒飲」的工程獅先生敬上。


延伸閱讀:方格子聊聊#15|42公里的獨跑


留言
avatar-img
留言分享你的想法!
avatar-img
方格子 vocus 官方沙龍
380.4K會員
3.3K內容數
哈囉,歡迎來到方格子 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
方格子官方最近宣佈改善原有的討論區功能,將其轉型為房間模式。
Thumbnail
方格子官方最近宣佈改善原有的討論區功能,將其轉型為房間模式。
Thumbnail
方格子在去年下半年開始讓許多創作者陸續將個人頁面轉型為沙龍Salon,目前也官方宣布今年1月下旬將會全站轉型,因此故且不論創作者現在還是不是,過完農曆年屆時應該會全部升級。 原本對於沙龍顯示頁面意興闌珊的我,又是不知道哪根筋不對,花了一點時間把星貨鋪小小地整修一下。
Thumbnail
方格子在去年下半年開始讓許多創作者陸續將個人頁面轉型為沙龍Salon,目前也官方宣布今年1月下旬將會全站轉型,因此故且不論創作者現在還是不是,過完農曆年屆時應該會全部升級。 原本對於沙龍顯示頁面意興闌珊的我,又是不知道哪根筋不對,花了一點時間把星貨鋪小小地整修一下。
Thumbnail
在方格子即將邁入數位2.0階段之際,總覺得在隨著這艘驟然加速的船艦踏上征途之前,必須先好好認識了解方格子這個團隊,及其過往歷史,否則身為船上成員的自己,心中總不免略有不安。了解方格子團隊目前正忙著全力向前衝刺,無暇回顧,決定還是自己跳下來,從二手資料中,幫忙彙整了一份方格子的歷史回顧。
Thumbnail
在方格子即將邁入數位2.0階段之際,總覺得在隨著這艘驟然加速的船艦踏上征途之前,必須先好好認識了解方格子這個團隊,及其過往歷史,否則身為船上成員的自己,心中總不免略有不安。了解方格子團隊目前正忙著全力向前衝刺,無暇回顧,決定還是自己跳下來,從二手資料中,幫忙彙整了一份方格子的歷史回顧。
Thumbnail
本週的方格子: 一、輕鬆設定內容關鍵字的好功能 二、如何培養出具個人風格的創作影響力 三、勞保喊漲、歐洲版雷曼兄弟危機......
Thumbnail
本週的方格子: 一、輕鬆設定內容關鍵字的好功能 二、如何培養出具個人風格的創作影響力 三、勞保喊漲、歐洲版雷曼兄弟危機......
Thumbnail
格編今天要來跟大家聊聊「閱讀頁」、「主題頁」的那些大事兒!相信每一位來到方格子的新格友與老格友們,都已感受到平台使用體驗的簡潔魅力,但我們從不止步於這樣的魅力而已,於是我們又進行了各種好還要更好的改版(優化是一條永無止盡的道路啊~遠目),期待讓來訪的每位格友們,都能徜徉在輕鬆、自在的瀏覽情境中。
Thumbnail
格編今天要來跟大家聊聊「閱讀頁」、「主題頁」的那些大事兒!相信每一位來到方格子的新格友與老格友們,都已感受到平台使用體驗的簡潔魅力,但我們從不止步於這樣的魅力而已,於是我們又進行了各種好還要更好的改版(優化是一條永無止盡的道路啊~遠目),期待讓來訪的每位格友們,都能徜徉在輕鬆、自在的瀏覽情境中。
Thumbnail
我加入的這一年,方格子一直不斷在挑戰新的東西。 官方積極與創作者們聯繫、提供協助、建立關係、舉辦活動──加入的創作者們在進化,網站本身也不斷地推陳出新。
Thumbnail
我加入的這一年,方格子一直不斷在挑戰新的東西。 官方積極與創作者們聯繫、提供協助、建立關係、舉辦活動──加入的創作者們在進化,網站本身也不斷地推陳出新。
Thumbnail
完了,開始回歸使用後越用就會發現越多可進步空間 基於希望有機會越變越好,如果之後遇到一些創作者的使用覺得能夠更優化的部分,我就會稍微記錄下來,也歡迎大家回饋經驗,或許這些也能變成幫助方格子的養分。 (可以的話也請一起跟團隊反應,畢竟我也不是平台工程師) 不過很慶幸的是方格子很快就聽到我們的聲音了!(
Thumbnail
完了,開始回歸使用後越用就會發現越多可進步空間 基於希望有機會越變越好,如果之後遇到一些創作者的使用覺得能夠更優化的部分,我就會稍微記錄下來,也歡迎大家回饋經驗,或許這些也能變成幫助方格子的養分。 (可以的話也請一起跟團隊反應,畢竟我也不是平台工程師) 不過很慶幸的是方格子很快就聽到我們的聲音了!(
Thumbnail
從開工以來,我們將目標初步定調為:讓系統更加穩定,並且在整體品牌體驗上減少複雜度。為此,我們在開發上有兩項主要目標,一是將整體的主題顏色做全站性的統整與優化;二則同時在方格子閱讀頁與首頁載入進行速度上的優化…
Thumbnail
從開工以來,我們將目標初步定調為:讓系統更加穩定,並且在整體品牌體驗上減少複雜度。為此,我們在開發上有兩項主要目標,一是將整體的主題顏色做全站性的統整與優化;二則同時在方格子閱讀頁與首頁載入進行速度上的優化…
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News