謝承邑個人網站設計：提升部落格內容的探索體驗(2025)

2025年度的謝承邑個人網站再設計，以「提升部落格內容的探索體驗」為主軸展開。隨著個人品牌定位聚焦、文章日益豐富，傳統部落格版面佈局不僅內容展示單一、侷限，更會因為新文章推出，導致舊文章的站內能見度急遽下降。數位內容的優勢，本應在於不受流行、載體限制而歷久彌新，但現有設計卻與理想情況背道而馳，因而催生了本次的再設計。

※ 本專案為個人專案。

※ 專案製作時間：2025年8月~9月。

現行設計的痛點

「部落格」是自2022年網站上線之初就有的頁面。當時，考慮到個人品牌定位尚未明確、文章數量又少，所以我選擇了最傳統、穩妥的部落格版面設計。採用這種版面設計不僅不易出錯，還只需要相對少的內容就可讓版面看起來豐富。

傳統的部落格設計將版面分割為「左大右小」的兩個區域：左側是文章列表區，以大面積縮圖輔以文章摘要呈現序列；右側則為功能欄，用來放置作者介紹、搜尋框、分類篩選與近期文章等模組。在 Blogger、WordPress 模板以及眾多內容網站中，都能看到這類佈局的身影。

然而三年過去，隨著文章數量大幅增加，這種版型的優勢反而逐漸變為限制，成為影響內容能見度的主因。具體而言，目前的設計面臨以下四個問題：

1. 主區塊佔用大量空間，卻顯示內容有限：左側的文章序列中的大面積縮圖雖然吸引目光，但空間利用效率極低。整個區塊佔據了相當多滾動高度，卻僅能呈現少量文章，導致使用者需要頻繁滑動才能瀏覽更多內容。
2. 功能欄易被捲動遮蔽，導致視覺空洞：由於左側文章區遠比右側功能欄長，一旦向下捲動至一定位置，右側模組便會「消失」，留下整片空白，整體視覺平衡與功能導覽體驗皆受到影響。
3. 內容重複造成版面浪費：功能欄中的「近期更新」模組原意在於快速呈現最新文章，然而左側區塊本身也依發佈時間排序，結果就是在第一頁時兩區內容高度重疊，資訊不但未加乘，反而冗餘。
4. 舊文章幾乎無曝光機會：這是目前設計中影響最大的問題。以「發佈時間排序」結合「大面積文章序列」的設計，會使得舊文章極易被快速推到後面頁面。當使用者光是滾動完第一頁就已經十分吃力，後頭的內容也就難以被看見。

回頭檢視自己過去的寫作主題——從設計觀察、語言學習、工具推薦到日常生活紀錄，這些主題其實並不依賴「資訊即時性」。因此，單一依時間排序的邏輯，只能讓首頁最新發佈的前10篇文章獲得關注，而其他同樣具價值的舊文卻幾乎被埋沒。

正因如此，我啟動了這次針對「部落格」頁面的再設計，目標是重新思考資訊組織方式，打造更友善的內容探索體驗。

桌面研究

在桌面研究中，我從「不以時間排序為唯一邏輯」的部落格網站著手，觀察它們如何透過分類架構、排版設計與導覽方式來管理龐大的內容量，同時兼顧資訊的能見度與探索體驗。我特別聚焦於參考大型企業的品牌部落格，因為這類網站多採用量身打造的版型而非單純地套版，因而較能觀察到其背後的設計思維與策略。

最終，我歸納出以下幾點洞察：

1. 部落格首頁被定義為「資訊總覽」入口：多數部落格會在首頁最上方設置「最新文章」區塊，幫助訪客快速掌握當期內容動態。這些區塊常採用大標題 + 簡短摘要（甚至省略）的排版方式，配合大面積的圖片或底色以強化視覺聚焦效果。這個區塊的設計重點不在於深入閱讀，而是讓使用者快速掃過多篇標題，找到感興趣的文章。
2. 首頁下半部為品牌導向的模組拼接區：緊接在「最新文章」之後的版面，通常會配置多種目的導向的內容模組，如：熱門精選文章、主題分類引導、電子報訂閱、推薦資源等。這些區塊的排序明顯與品牌想傳達的優先順序有關。愈是希望被使用者看到的資訊，愈會被安排在頁面靠前的位置。
3. 同類型資訊區塊也會套用不同版型，以創造層級與視覺變化：即使同樣是文章展示區，不同模組間仍會採用不同的視覺設計：有些以清單式呈現、有些使用卡片排版，甚至圖文比例與排版方式也會有所差異。這種設計不僅讓整體版面更有變化、有趣，也有助於傳遞資訊的主次關係。

擬定設計策略

基於上述洞察，我擬定了幾項改版策略，目的是為了改善現有架構中「舊內容能見度低、探索動線單一」的問題。部落格頁面不再是線性的時間軸，而是能主動引導使用者探索多元內容的入口。

部落格頁面重新定位為「內容探索入口」

在目前的資訊架構中，部落格是層級最高的頁面，負責以時間軸的方式顯示過往所有文章。而這個頁面之下，則設有「搜尋結果頁」以及每個文章類別各一頁的「類別頁」。

在新版資訊架構中，部落格頁面被重新定位為「內容探索入口」，以主題式概覽展示文章。原先以時間軸顯示過往所有文章的任務，被移動到了新設立、層級在其之下的「典藏頁」中。至於「搜尋結果頁」和「類別頁」的層級沒有變更。

導入多種模組，豐富探索動線

除了既有的「搜尋」與「分類篩選」功能，本次再設計也導入了多種模組，強化使用者的探索路徑與互動機會，包含：

• 最新文章概覽：以精簡排版呈現近期更新內容，幫助訪客快速掌握部落格的最新動態。
• 精選內容推薦：手動挑選具代表性、長期流量好的文章作為再曝光機制，讓舊文也能持續發揮價值。
• 註冊電子報：導入電子報功能，將原本一次性的文章訪客，轉化為長期關注的忠實讀者群。透過主動推播新內容，不僅強化與讀者之間的關係，也讓每篇新文章在發佈當下就擁有基本的曝光流量。

設計亮點

豐富亮眼的內容探索入口

進入重新設計後的部落格頁面，首先映入眼簾的是「最新文章」區塊。這個區塊以大面積圖像搭配標題構成，呈現近期內容更新。

這種圖像主導的排版，不僅有助於使用者快速瀏覽多篇文章，也放大了我作為設計師的優勢——每篇封面圖都是我親自設計的作品。給予圖像更多空間，能更完整地展現視覺細節與風格，也讓整個區塊如同一座精緻的小型美術館，在頁面的一開始就樹立強烈的品牌識別。

這個區塊還蘊含著一處巧思——背景融合了最新文章的封面圖像，讓每次新文章發佈時，整個區塊的光影氛圍都會隨之細微地轉換，為頁面注入持續變化的視覺生命力。同時，這個效果實際上是由極低解析度的圖像模糊而成，因此儘管最終效果華麗，卻仍能使網頁輕盈、快速地載入。

搜尋與篩選

原先位於右側功能欄的「搜尋」與「文章篩選」功能，現在被移動到最新文章下方的位置，獲得更高的視覺層級。這個區塊的設計並未有太多改動，只有「熱門關鍵字」的外觀設計配合整體版面做了視覺上的簡化。

具備高靈活度的精選專欄

在搜尋列下方，緊接著的是「精選專欄」區塊。這些專欄由 WordPress 的標籤（Tag）機制驅動，與文章的主要分類（Category）相互獨立，可靈活依據當前熱門議題或選題策略調整展示內容。此區塊總共會顯示兩個專欄，每次載入頁面時，都會從預先設定好的多組專欄中隨機抽取展示，使得訪客每次造訪時都能感受到意料之外的驚喜。

由個人品牌定位驅動的分類區塊

分類區塊則以分門別類的方式，展示每個主題分類下的近期文章，讓使用者能根據興趣快速探索特定內容。隨著網站經營進入第三年，個人品牌的內容方向也逐漸清晰。透過觀察文章表現與讀者回饋，我歸納出幾個最受歡迎的核心主題：深度設計知識、泰語學習、設計師的日常生活、好用軟體推薦。這些主打分類沿用了與首頁中相同的卡片版型：先以封面圖吸引目光，再透過摘要文字讓讀者快速理解文章內容。

至於其他較冷門或更新頻率較低的分類，則採用更精簡的列表式排版，在維持資訊完整性的同時，也讓整體頁面節奏更加清晰、視覺層次更有重點。

值得一提的是，這兩類排版皆來自網站既有版型的再利用。這樣的做法不僅維持了整體視覺與使用體驗的一致性，也有效降低了開發成本與後續維護的複雜度。

透過電子報將一次性訪客轉換為未來的忠實讀者群

「電子報」功能是本次改版中實驗性引入的一項新系統。在重新設計前，我透過 Google Analytics 分析部落格頁面的使用者行為，發現大多數訪客的典型路徑為：從搜尋引擎點進某篇文章 → 閱讀該文章，持續一段時間 → 再瀏覽 0～1 篇文章 → 離開網站。

這樣的行為模式顯示出，讀者雖然對內容具有高度專注與滿意度，但在閱讀一篇長文後可能因資訊飽和或疲勞而選擇離開。這使得原本有潛力成為忠實讀者的訪客，很可能只與網站短暫接觸一次就流失，錯失了後續再訪的機會。

因此，我希望透過電子報這個模組，建立一條能與讀者持續連結的管道，不依賴搜尋引擎或社群平台的被動流量，而是主動經營一批對內容真正感興趣的長期讀者群。

統一典藏、搜尋、類別、標籤頁面設計，創造一致的瀏覽體驗

確立首頁為內容的多元探索入口後，其餘如「典藏」、「搜尋」、「類別（Category）」與「標籤（Tag）」等頁面，便能回歸其本質角色——作為文章資料庫的瀏覽介面。因此，我統一這些頁面的設計，皆採用一致的預設文章卡片排版，兼顧資訊密度與閱讀效率，讓使用者能在查找特定內容時獲得一致、穩定的瀏覽體驗。

設計系統

你可能已經發現，在本次再設計中，完全沒有任何與「設計系統」相關的段落。這是因為，這部分的基礎早已於2024年的再設計專案「HCYDS」中奠定。當時，我以 Tailwind CSS 為基底，打造出一套結合個人品牌調性的設計系統，涵蓋從色彩、文字層級到空間規則的完整架構。

其中，為了RWD需求而自行設計的文字層級、空間Token，可根據根據裝置尺寸自動調整並維持視覺層級架構，所以幾乎完全免去了針對每種版面手動微調的作業。此外，所有 Token 均依循無障礙標準設計，並結合 OKLCH 色彩模型，讓介面在支援深色模式的同時，仍能保持良好的對比與可讀性。

這套系統化的設計思維甚至延伸到了第三方服務的整合上——即使電子報訂閱表單是採用外部平台（Kit）製作，我依然能快速將其樣式調整為符合本站風格，確保設計的一致性不被破壞。

換言之，這次的部落格再設計不只是單一專案的成果，更是多年來我對個人品牌、部落格經營與設計方法論持續投入與累積的體現。正是有了這套設計系統作為後盾，讓我能把更多精力聚焦在使用者體驗、內容架構與問題本身的解決上。

總結

經過重新設計後，部落格頁面中可供展示的文章版位從原本的 10 個擴充至 39 個，透過主題式導覽與多模組排版，大幅提升了單一頁面的資訊承載量與使用效率。使用者不再只能沿著時間軸線性地滑動，而能依照自身興趣主動探索更多內容，舊有文章也因此重新獲得曝光的機會。

雖然這次改版起因於現有版型在內容規模擴張後所暴露的設計痛點，但實際上，它是我在過去三年中不斷耕耘個人品牌、持續創作內容所累積的成果。內容的多元與深度，讓原有架構逐漸失靈，也促使我調整策略，思考內容經營與品牌未來發展的整體策略規劃。像是本次首次導入的電子報系統，便是我開始主動經營讀者關係、試圖建立長期互動的第一步。

未來，我會持續觀察這些模組的實際使用情況，透過點擊行為與閱讀路徑的數據，進一步調整排序邏輯與評估是否需要額外的改動。這次的成果不僅是視覺與架構上的優化，更建立在我長期投入設計系統、內容策略與品牌思維的基礎之上。也正因如此，我得以在這樣一個牽扯許多環節的設計問題中，把心力聚焦在單一問題上，打造極致優異的體驗。