方格精選

方格子開發誌#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
方格子 vocus 官方沙龍
488.2K會員
3.5K內容數
哈囉,歡迎來到方格子 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
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
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