方格子開發誌#10｜「春暖花開換新頁，主題、搜索、閱讀頁」#暖心微苦熱可可
閱讀時間約 5 分鐘
春天終於到來，櫻花齊放的日子 (◕ᴗ◕✿)，獅獅的程式之手終於可以從硬派寒冬中解脫，指尖脈動的鍵觸力道恢復約 80％ 般行雲流水，都是為了迎戰絡繹不決的平台需求，也是為了讓方格子的平台更佳穩定與清新！
要說到近期工程獅獅們都在著手做些什麼哩？除了日常平台上的除🐛大清消與例行的需求任務，我們的 UI/UX 獅獅也規劃了一系列的優化迭代，希望讓平台的頁面在使用體驗上可以更趨順暢與易用！
談談頁面優化
優化方向
在本次的頁面優化上，獅獅們被賦予了以下幾點任務需要達成：
- 頁面導入統一的版型設計邏輯
- 提升資料載入視覺更順暢度，使頁面穩定性符合 SEO 標準
- 頁面圖卡統一
- 介面操作邏輯更簡潔易用
從以上這幾點優化項目看似簡單，但對前端獅獅來說卻是一個隱形的大任務，除了需要對系統的共用組件進行盤點並擴展，鑑往知來！也要重新好好審視頁面上的資料操作與畫面渲染的程序，並在適當的時機新增過去缺少的拼圖...
給畫面一個穩穩的骨架
拼圖？4 der！在過去的頁面開發上，我們很多時候忽略了在資料載入的過程中給予適當畫面回饋，造成畫面在載入時的體感上會感受到停頓、甚至認為壞掉的體驗！
為了補足這塊拼圖，獅獅再度下水，針對畫面資料載入的狀態控制做了細部的修飾，也將缺漏的部分補足，並且導入 Skeleton （骨架）的介面機制，讓資料在尚未載入以前，可以讓利用 Skeleton 撐著區塊的顯示範圍，並且有明顯的載入動態可以讓使用者得知當前的資料正在載入中，詳見下圖：
有了 Skeleton 大大，可以讓我們在使用體驗上有效地提升以下三個重點：
- 可以避免空白畫面讓使用者懷疑方格子頁面 走心了，因為不變的事實是我們一直在你們心中（吐）！
- 使用者能夠第一時間理解畫面處於載入的狀態中，不至於因為空白畫面狀態而感到困惑。
- 站在 SEO 的角度而言，可以確保畫面各區塊在資料載入前後的穩定性！
導入統一的版型設計
這部分其實獅獅也是心癢癢、想優化很久了，終於在天時地利人和之際，我們輕輕的拾起這份感動時刻，導入更好的 Grid System 機制（不要看到專有名詞就增加本篇文章的跳出率喔XD ）！
（ꈍ◡ꈍ）
簡單來說，Grid System 就是定義網頁呈現的規格，透過它來掌控頁面在不同裝置尺寸上的呈現，讓頁面不同區塊在不同裝置尺寸的呈現都能獲得控制，有了規則，畫面也就更平衡穩定！詳見下圖：
其實 Grid System 不是什麼新興的技術，但是在導入上，工程獅獅需要細膩地跟設計獅獅對接、衝撞，來統籌出一個適合方格子視覺規範，光聽，獅獅們的切版魂都燃燒起來了！！
ΣΣΣ (」○ ω○ )／
畢竟，做這些為的就是要給格友們更好的體驗RRR！（還有滿足部分切版癮...）
基於以上的理想抱負與壓住戒斷症，獅獅們最近如火如荼，先針對了主題頁/探索頁/閱讀頁做了優化迭代！！！(⁎⁍̴̛ᴗ⁍̴̛⁎) ～
以下工程獅獅們就用組合鍵截圖之直接視覺放閃攻擊來閃你的眼睛你就笑～
截圖式放閃攻擊
(⌐■_■)–︻╦╤─
(⌐■_■)–︻╦╤─
(⌐■_■)–︻╦╤─
攻擊一之一：主題頁
- 新圖卡就是帥氣 BJ4
- 載入的動態優化也是蘇胡 BJ4
- 主題過濾與結果顯示好清楚 BJ4
攻擊一之二：主題內頁
當然拉！主題內頁也有對應的改版更新唷：
- 新文章圖卡就是帥氣 BJ4 combo 2
- 貼心再升級之編輯嚴選區塊，選出符合主題之精選中的精選！！
- 排序再進化，讓你更簡約地瀏覽不同維度文章！
- 版型更平坦大氣，閱讀感舒適不解釋～
攻擊二：搜索頁
- 新圖卡就是帥氣 BJ4 combo 3
- 載入的動態優化也是蘇胡 BJ4 combo 2
- 簡化排序選項更是喜翻 BJ4
攻擊三：閱讀頁
- 嶄新炫砲收縮文章標題 Bar！
- 置底清新整齊社群功能 Bar！
- 極致奢華手機版章節目錄！
- 怎麼那麼漂漂之文底標籤區塊！
- 怎麼那麼亮亮之作者專題介紹區塊！
- 頁尾超懂你之文章推薦區塊！
- 乘坐 G5 般快到心臟停止的網頁載入速度＋潔淨再升級的版面設計！節能環保標章 GET！
- ....（族繁不及備載）
結論
好！希望經過本次三波放閃攻擊，讓你看不見這世界一分鐘，用心體會這世界是多麼美得不真實。
沒錯！美好的事物需要用點滴的時間一一襯托他的沉香，就像工程獅獅喝熱巧克力一樣，喜歡加點自備可可粉，讓巧克力甜中帶酸又帶苦。方格子每一次的優化都不簡單，但只要想到頁面可以像熱巧克力般暖眼暖心暖胃，我們就會持續奮不顧身，任性相投！希望格友們會喜歡這次的優化迭代 (⁎⁍̴̛ᴗ⁍̴̛⁎)
最後讓我為格友們泡一杯獅獅牌熱巧克力，配著新體驗來看看方格子站內好文喔：
後續，我們也會持續針對其他頁面，來跟進這些美麗的修正唷！敬請期待！
(o wO)y
工程獅先生 敬上 之為什麼還有寒流哭哭#
為什麼會看到廣告
273.2K會員
2.9K內容數
哈囉，歡迎來到方格子 vocus 的官方沙龍！
在這裡你可以參與方格子 vocus 的發展旅程，接受到所有關於 vocus 的最新動態，包含平台重大功能更新、活動消息、各房間發佈的最新內容，甚至是徵才資訊等等，現在就按下「加入」，與 vocus 一起展開精彩的創作冒險吧！
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
方格子重新開張，在美國參加的第一場研討會
不知不覺已經四個月沒寫文章了，重新養成寫作習慣大概不容易，希望暑假期間跟學分較少的下學期，能允許我至少兩週一更，今天是復出的第一篇文，決定要來分享自己在美國參加的第一場 Symposium：Neuromodulation Symposium。不過，在主
滴藥散瞳前看煙火，抱歉，來不及等漲停，歡迎潘瑋柏／張韶涵
本蛙不小心又打了酸民一巴掌
現代 這個匆忙時代
雖然少了時間 但千萬不要倦怠
今天的事交給今天去做
因為明天才有很多時間一起去瘋
本想點播What a feeling，怕酸民水準太低，英文有點難……
你好！我是來自香港的 Edmond，這是我第一篇在方格子出的原創文章，請多多指教。這篇文章會講述我為什麼要在方格子開始創作。
本文將公開我兩年半在方格子的訂閱收入，以及 10 招稱霸方格子的方式，順便聊聊我現在在幹什麼？以及未來展望
等2/24解凍，大家是否有搭上方格子WEB3.0的列車呢
方格子團隊對於WEB3.0也著墨很深，使用的是ETH L2的技術Arbitrum鍊，為了未來，並使用tofunft來做為平台搭建展示的場所，在在都顯示團隊的專業，加入方格子Discord，你可以獲得更多關於WEB3.0的知識，非常推薦。
我從 2012 年第一次踏上韓國這塊土地，2015 年畢業後再度來到韓國進修，之後就一直定居在韓國，這一住就住了將近十年的時間，從考試院到樓中樓，幾乎把所有的韓國住屋型態都住過一輪，我想受到韓劇的影響，應該很多聽眾朋友對韓國的房子很好奇吧？這集就要來跟大家分享我的韓國居住進化史。
特以此封月報為你彙整當月創作成果。
一起來看看本月你達成了哪些新成就： ▌ 10月成就總覽
總共發表了40 篇文章
總共累計605 次瀏覽量
比上個月成長 87 %
總共入選了1 次編輯嚴選
總共獲得 5 個追蹤
175 個愛心
37 個收藏
此外，我們也整理了您從開始寫作至今的成就之最：
★ 瀏
方格子的「作者幫助中心」是好工具，如果你跟承熙一樣在方格子寫作，尤其是全職寫作，那我們不該對自己的寫作平台不熟悉。本文整理出作者幫助中心最實用的兩篇文章，將幫助我們高效準確使用寫作平台，讓文字變現更加容易.......
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
方格子重新開張，在美國參加的第一場研討會
不知不覺已經四個月沒寫文章了，重新養成寫作習慣大概不容易，希望暑假期間跟學分較少的下學期，能允許我至少兩週一更，今天是復出的第一篇文，決定要來分享自己在美國參加的第一場 Symposium：Neuromodulation Symposium。不過，在主
滴藥散瞳前看煙火，抱歉，來不及等漲停，歡迎潘瑋柏／張韶涵
本蛙不小心又打了酸民一巴掌
現代 這個匆忙時代
雖然少了時間 但千萬不要倦怠
今天的事交給今天去做
因為明天才有很多時間一起去瘋
本想點播What a feeling，怕酸民水準太低，英文有點難……
你好！我是來自香港的 Edmond，這是我第一篇在方格子出的原創文章，請多多指教。這篇文章會講述我為什麼要在方格子開始創作。
本文將公開我兩年半在方格子的訂閱收入，以及 10 招稱霸方格子的方式，順便聊聊我現在在幹什麼？以及未來展望
等2/24解凍，大家是否有搭上方格子WEB3.0的列車呢
方格子團隊對於WEB3.0也著墨很深，使用的是ETH L2的技術Arbitrum鍊，為了未來，並使用tofunft來做為平台搭建展示的場所，在在都顯示團隊的專業，加入方格子Discord，你可以獲得更多關於WEB3.0的知識，非常推薦。
我從 2012 年第一次踏上韓國這塊土地，2015 年畢業後再度來到韓國進修，之後就一直定居在韓國，這一住就住了將近十年的時間，從考試院到樓中樓，幾乎把所有的韓國住屋型態都住過一輪，我想受到韓劇的影響，應該很多聽眾朋友對韓國的房子很好奇吧？這集就要來跟大家分享我的韓國居住進化史。
特以此封月報為你彙整當月創作成果。
一起來看看本月你達成了哪些新成就： ▌ 10月成就總覽
總共發表了40 篇文章
總共累計605 次瀏覽量
比上個月成長 87 %
總共入選了1 次編輯嚴選
總共獲得 5 個追蹤
175 個愛心
37 個收藏
此外，我們也整理了您從開始寫作至今的成就之最：
★ 瀏
方格子的「作者幫助中心」是好工具，如果你跟承熙一樣在方格子寫作，尤其是全職寫作，那我們不該對自己的寫作平台不熟悉。本文整理出作者幫助中心最實用的兩篇文章，將幫助我們高效準確使用寫作平台，讓文字變現更加容易.......