方格子開發誌#10｜「春暖花開換新頁，主題、搜索、閱讀頁」#暖心微苦熱可可
春天終於到來，櫻花齊放的日子 (◕ᴗ◕✿)，獅獅的程式之手終於可以從硬派寒冬中解脫，指尖脈動的鍵觸力道恢復約 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
工程獅先生 敬上 之為什麼還有寒流哭哭#
為什麼會看到廣告
289.8K會員
3.0K內容數
哈囉，歡迎來到方格子 vocus 的官方沙龍！
在這裡你可以參與方格子 vocus 的發展旅程，接受到所有關於 vocus 的最新動態，包含平台重大功能更新、活動消息、各房間發佈的最新內容，甚至是徵才資訊等等，現在就按下「加入」，與 vocus 一起展開精彩的創作冒險吧！
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
近期方格子更新了「關於頁面全新升級」功能，格友們使用了嗎？
為搭配這次介面的更新，方格子推出首次的沙龍社群活動，讓你在社群上串連新格友們加入你的沙龍，完成以下簡單的步驟，就有機會獲得方格子的專屬曝光推薦，來看看怎麼參加活動吧～
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧，包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法，鼓勵讀者分享自己的作法與交流。
留住新人怎麼做?
分享格子文章給朋友，人進來看一下就滑出去了...除了創作者，受眾不管上班在家，都滑手機，哪有在用電腦的?所以使用者介面要用手機UI去思考，而不是網頁UI。一個平台好不好用，能不能把使用者留住更多的時間，優化UI是重中之重。格子兼有公域和私域生態，可把變現模式可以更有趣，更多元。
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題，我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法，包括選擇器使用、偽元素的應用以及其他排版技巧，並激勵讀者分享自己的解法。
大家在討論瀏覽量的時候，都會提到方格子首頁的通透度的問題，在這個問題上提了很多次，但是仔細看方格子的首頁，其實沒有太大的問題，如果你是會員的話。首頁基本上是對你開放的，你要怎麼瀏覽都可以，對會員這個閱讀者來講，他是感到方便自在的。可以往下拉，看推薦的文章。也可以直接搜尋，他想要找的搜尋。也可以透過探
創作者的使用上的動作
做完小鈴鐺的分析以後，自然要考慮到整體平台的架構問題。因為平台的架構會影響到利益和收入的問題。這裡就不多做解釋，只針對創作者的使用上所產生的動作來做討論。這樣大致上就可以分析出創作者所需要的工具到底有哪些，然後再跟現有的資料和管理系統做比對，大概就知道有哪些是需要進一步討論的
方格子沙龍初體驗：向大家報告最近我使用方格子在以下兩方面的改變，（1）閱讀格友的文章和與格友互動，及（2）準備和發放自己的文章。這些體驗讓我反思如何分配時間並適應這新的互動模式。
方格子在去年下半年開始讓許多創作者陸續將個人頁面轉型為沙龍Salon，目前也官方宣布今年1月下旬將會全站轉型，因此故且不論創作者現在還是不是，過完農曆年屆時應該會全部升級。
原本對於沙龍顯示頁面意興闌珊的我，又是不知道哪根筋不對，花了一點時間把星貨鋪小小地整修一下。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
近期方格子更新了「關於頁面全新升級」功能，格友們使用了嗎？
為搭配這次介面的更新，方格子推出首次的沙龍社群活動，讓你在社群上串連新格友們加入你的沙龍，完成以下簡單的步驟，就有機會獲得方格子的專屬曝光推薦，來看看怎麼參加活動吧～
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧，包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法，鼓勵讀者分享自己的作法與交流。
留住新人怎麼做?
分享格子文章給朋友，人進來看一下就滑出去了...除了創作者，受眾不管上班在家，都滑手機，哪有在用電腦的?所以使用者介面要用手機UI去思考，而不是網頁UI。一個平台好不好用，能不能把使用者留住更多的時間，優化UI是重中之重。格子兼有公域和私域生態，可把變現模式可以更有趣，更多元。
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題，我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法，包括選擇器使用、偽元素的應用以及其他排版技巧，並激勵讀者分享自己的解法。
大家在討論瀏覽量的時候，都會提到方格子首頁的通透度的問題，在這個問題上提了很多次，但是仔細看方格子的首頁，其實沒有太大的問題，如果你是會員的話。首頁基本上是對你開放的，你要怎麼瀏覽都可以，對會員這個閱讀者來講，他是感到方便自在的。可以往下拉，看推薦的文章。也可以直接搜尋，他想要找的搜尋。也可以透過探
創作者的使用上的動作
做完小鈴鐺的分析以後，自然要考慮到整體平台的架構問題。因為平台的架構會影響到利益和收入的問題。這裡就不多做解釋，只針對創作者的使用上所產生的動作來做討論。這樣大致上就可以分析出創作者所需要的工具到底有哪些，然後再跟現有的資料和管理系統做比對，大概就知道有哪些是需要進一步討論的
方格子沙龍初體驗：向大家報告最近我使用方格子在以下兩方面的改變，（1）閱讀格友的文章和與格友互動，及（2）準備和發放自己的文章。這些體驗讓我反思如何分配時間並適應這新的互動模式。
方格子在去年下半年開始讓許多創作者陸續將個人頁面轉型為沙龍Salon，目前也官方宣布今年1月下旬將會全站轉型，因此故且不論創作者現在還是不是，過完農曆年屆時應該會全部升級。
原本對於沙龍顯示頁面意興闌珊的我，又是不知道哪根筋不對，花了一點時間把星貨鋪小小地整修一下。