方格子開發誌#10｜「春暖花開換新頁，主題、搜索、閱讀頁」#暖心微苦熱可可

春天終於到來，櫻花齊放的日子 (◕ᴗ◕✿)，獅獅的程式之手終於可以從硬派寒冬中解脫，指尖脈動的鍵觸力道恢復約 80％ 般行雲流水，都是為了迎戰絡繹不決的平台需求，也是為了讓方格子的平台更佳穩定與清新！

談談頁面優化

優化方向

在本次的頁面優化上，獅獅們被賦予了以下幾點任務需要達成：

• 頁面導入統一的版型設計邏輯
• 提升資料載入視覺更順暢度，使頁面穩定性符合 SEO 標準
• 頁面圖卡統一
• 介面操作邏輯更簡潔易用

從以上這幾點優化項目看似簡單，但對前端獅獅來說卻是一個隱形的大任務，除了需要對系統的共用組件進行盤點並擴展，鑑往知來！也要重新好好審視頁面上的資料操作與畫面渲染的程序，並在適當的時機新增過去缺少的拼圖...

給畫面一個穩穩的骨架

拼圖？4 der！在過去的頁面開發上，我們很多時候忽略了在資料載入的過程中給予適當畫面回饋，造成畫面在載入時的體感上會感受到停頓、甚至認為壞掉的體驗！

為了補足這塊拼圖，獅獅再度下水，針對畫面資料載入的狀態控制做了細部的修飾，也將缺漏的部分補足，並且導入 Skeleton （骨架）的介面機制，讓資料在尚未載入以前，可以讓利用 Skeleton 撐著區塊的顯示範圍，並且有明顯的載入動態可以讓使用者得知當前的資料正在載入中，詳見下圖：

有了 Skeleton 大大，可以讓我們在使用體驗上有效地提升以下三個重點：

1. 可以避免空白畫面讓使用者懷疑方格子頁面 走心了，因為不變的事實是我們一直在你們心中（吐）！
2. 使用者能夠第一時間理解畫面處於載入的狀態中，不至於因為空白畫面狀態而感到困惑。
3. 站在 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！
• ....（族繁不及備載）

結論