謝承邑 個人網站設計(2022)

我的第一代個人網站於 2021 年初正式上線。然而，一年半後我逐漸發現，網站在功能與設計上已難以滿足使用需求。舉例而言，它缺乏 CMS（內容管理系統），導致每次更新作品都需耗費大量時間進行手動修改；此外，原有的設計風格也無法充分展現我在設計與開發上的專業成長。

隨著需要刊登的作品數量不斷增加，以及開始經營個人品牌、規劃部落格內容，我意識到亟需一個更具延展性與彈性的網站平台。因此，我啟動了「第二代個人網站」的設計與開發專案，期望打造一個更易於管理、契合品牌形象，並具備良好使用體驗與視覺識別的全新網站。

※本專案為個人專案。

※專案製作期間：2022年9月。

釐清設計需求

第一代個人網站是在相對倉促的情況下設計完成的。由於當初欠缺對字型、色彩、樣式等元素的設計知識，因而缺乏相關規劃，導致後續開發階段沒有一致性的設計準則可供參考。最終的結果，便是極度不統一、缺乏效率的設計。

而程式架構方面，因為當時並未導入後台管理系統，所有內容皆直接硬寫於前端頁面中，使得日後維護與新增內容變得十分困難。儘管這部分同樣是受限於當時我的程式能力，所以並未規劃周到，但若考慮未來持續新增作品內容、甚至是經營個人品牌的搜尋排名（SEO），顯然已無法再繼續使用現有架構。

因此，這個專案的需求總結如下：

1. 打造可長期維護的個人品牌網站
   • 架構穩定、具備良好擴充性
   • 有利於日後新增作品、優化結構與持續經營
2. 採用可管理的後台系統
   • 減少依賴手動修改程式碼
   • 提高新增與更新內容的效率，讓重心回到內容與創作本身
3. 優化搜尋引擎友善性（SEO）
   • 使網站具備清晰的資訊架構與語意標記
   • 提升在搜尋引擎中的可見度，有助於個人品牌曝光與長期經營
4. 建立系統化設計規範
   • 對字型、色彩、元件樣式等進行完整規劃
   • 確保網站設計風格一致、具備延展性，提升後續維護效率與視覺一致性
5. 由自身主導設計與開發流程
   • 透過實作累積經驗，作為新作品的一環
   • 不採外包，展現自我解決問題與獨立完成網頁專案的設計/程式能力

擬定設計策略

針對本專案的需求，我擬定了兩大方向的設計策略：

首先，考量到我目前的程式能力尚不足以自行開發一套完整的後台管理系統，因此在網站架構方面，我選擇導入成熟且開源的內容管理系統——WordPress。

根據 WordPress.org 官方網站 的資料，全球有高達 43% 的網站是透過 WordPress 建置，顯示其在網站開發領域中具有高度普及性與穩定性。採用 WordPress 不僅能讓我快速建立可維護的後台管理介面，它還支援多種外掛，可靈活依需求應對 SEO 優化、作品分類、內容管理等多種情境，是一個穩定且可持續發展的解決方案。

其次，為了解決第一代網站缺乏一致性與延展性的問題，我決定建立一套完整的設計系統，從字體、色彩、元件樣式到排版規則進行系統化規劃。這樣能確保整體風格統一，同時在未來新增頁面或功能時，有清晰的設計準則可依循，大幅提升設計與開發效率。

從個人形象發展設計風格

在進行視覺設計之前，我首先問了自己一個最根本的問題：「我希望透過這個網站，讓訪客看見怎樣的我？」。

為了釐清方向，我列出了幾組我認為能代表自己個人特質與風格印象的形容詞，例如「清新」、「輕盈」、「成熟」、「透明」、「穩重」，作爲視覺風格的核心參考。接著，我以這些關鍵字為基礎，蒐集圖像、網頁截圖、字體、攝影風格、配色參考等素材，製作了一份 Mood Board，幫助我確立整體風格調性。透過這個過程，我逐漸發展出屬於想要的視覺方向——乾淨簡約，低彩度卻富有辨識度。

在確立風格後，我從 Mood Board 中擷取出幾個具有代表性的色彩，作為網站的主色調，並延伸為一組色階系統，為後續建立設計系統打下了基礎。

規劃網站的資訊架構

在進行資訊架構規劃時，我回顧了第一代個人網站的資訊架構，並針對其結構鬆散、內容分布不清的問題進行整理。首先，我將所有內容依照性質與使用情境進行分類，再從「訪客的瀏覽路徑」與「品牌訊息的溝通優先順序」兩個角度出發，重新思考整體架構。

經過歸納與調整，最終確立了以下五個主要頁面：

• Home（首頁）：網站的門面與導覽樞紐。設計上以多元內容簡介為主，幫助第一次來訪者快速建立對我個人與作品的初步印象，也作為導向其他頁面的起點。
• About（關於）：深入介紹我的背景、專長與設計理念。目的是讓有興趣進一步了解的訪客能清楚認識我在專業上的定位。
• Work（作品）：我的所有設計與開發專案。
• Blog（部落格）：刊載部落格文章的預留頁面。
• Contact：行動呼籲（Call to Action）頁面，包含聯絡方式與聯絡表單，提供有意聯絡我的訪客多種聯絡方式。

Wireframe 與 Prototype

主頁

在第一代網站中，首頁的第一幀僅顯示一張插畫，沒有任何標題或文字說明。雖然這樣的設計非常吸睛，但訪客卻難以理解這張插畫與我有何關聯，也無法確切感受到這是一個關於「謝承邑」的網站。缺乏明確的語意與導向，讓首頁失去了作為個人品牌起點的功能。

因此在新版設計中，首頁捨棄了抽象的插畫，改以個人形象照作為主視覺，並搭配簡潔有力的姓名與職稱作為大標題，直白地讓訪客知道這個網站的主人是誰、核心專業是什麼。

WORK

在新版網站中，我重新調整了「Work」頁面的編排方式，將原本的三欄式版面縮減為兩欄，同時將作品封面圖由自訂尺寸改為更常見的 16:9 比例。

欄位數減少後，每個作品的封面圖得以以更大的面積呈現，更有效地展現畫面的張力與視覺吸引力，充分利用每張精心設計的封面圖來吸引訪客目光。另一方面，改用 16:9 的比例也讓我能直接套用既有的作品視覺素材，省去為每個專案額外製作封面的時間，在美感與實用性之間取得良好的平衡。

回顧第一代網站的作品頁設計，當時我過度著重於呈現「設計的最終成品」，採用了許多誇張的圖像與視覺元素來強調成果本身。然而，這樣的做法反而忽略了 UI/UX 作品最應該凸顯的重點──設計思考與脈絡。

隨著實務經驗的累積，我逐漸意識到：對一位 UI/UX 設計師而言，與其僅展示完成品，不如更完整地呈現整個設計歷程——從問題定義、設計決策，到最終的驗證與調整。基於這樣的認知，我在新版網站中，將作品頁重新定位為一個說明設計過程的敘事空間。

我參考如 Medium 等內容導向平台的排版邏輯，以「文章」作為主要形式，讓頁面能承載大量文字敘述與層次分明的段落結構。同時，我刻意簡化裝飾性元素、保留適當留白，確保整體視覺風格專注而純粹，使訪客能無干擾地閱讀內容，並聚焦於每個專案背後的設計思維。

Design Guideline

為了解決過去網站設計風格鬆散、缺乏一致性的問題，我在新版網站中建立了屬於自己的設計系統，作為設計與開發的共同語言。這個設計系統不僅針對字體、色彩、間距、元件等常見元素進行統一規範，並進一步導入了 Design Tokens 的概念，建立出兩層次的樣式管理架構：Primitive Tokens 與 Semantic Tokens。

• Primitive Tokens 定義了最基本的設計屬性，例如字體大小、色彩值、間距單位等，這些作為系統的樣式基礎，維持視覺上的整體一致性。
• Semantic Tokens 則是將樣式與用途語意綁定，在製作設計時可以直接根據語意來套用對應的token。

字體系統：兼顧一致性與彈性的動態排版策略

在字體大小方面，我設計了兩套字體尺寸的 Design Token 系統，分別是fb-dynamic 與 fb-static，以應用於不同的情境需求。

• fb-dynamic 是一組具備響應式特性的動態字體 token。這套系統會根據螢幕寬度自動調整字體大小，使每一層級的字體（如 H1、H2、body text 等）在桌機、平板與手機上皆能維持層級一致、比例和諧的閱讀體驗，同時又能因應不同裝置進行彈性調整，確保整體版面在 RWD 環境下具備良好的適應性。
• fb-static 則是一組固定字體大小的 token，適用於希望字體尺寸在所有裝置上皆保持不變的區塊，常見於按鈕、標籤或特定 UI 元件中。這類元件的可辨識性與空間控制更為關鍵，因此使用 static token 能避免因裝置變化導致排版破壞或資訊傳達失衡。

字型策略：在速度與美感之間取得平衡

在字型選用上，我希望網站不只展現出設計質感，也必須兼顧效能與載入速度。因此，我選擇使用 Google Font 提供的 Libre Baskerville 作為主要的英文字體。這款優雅的襯線字體在標題與正文中都能提供良好的可讀性與專業感，是兼具設計美感與實用性的選擇。

然而，網站字型的取捨並不能只看風格。由於我已經載入了一組 Google 英文字型，若再額外加入中文字型，將大幅增加字型資源的體積 —— 尤其中文字型通常包含數千甚至上萬個字形，其檔案大小往往遠高於英文字型，這不僅會拖慢網站載入速度，也會對 SEO 效能造成負面影響。基於這些考量，我選擇在中文顯示上使用系統預設字型 —— 微軟正黑體（Windows）與蘋方體（macOS）。這不僅讓網站在不同系統中能保持穩定的文字呈現，也在美感、效能與搜尋優化三者之間找到最佳平衡點。

間距系統：動態與靜態的空間管理策略

我同樣為間距（spacing）建立了雙套 token 結構：spacing-dynamic 與 spacing-static，用以靈活處理不同情境下的版面空間需求。

• spacing-dynamic 是具備響應式特性的 spacing token。這套系統會根據螢幕尺寸動態調整元件間距，例如欄位間距、段落間距、區塊 padding 等，確保版面在不同裝置寬度下都能維持合適的空白感與視覺節奏。
• spacing-static 則用於對空間比例要求固定、不可隨螢幕變動的區塊，例如按鈕內距、Icon 與文字的間距、特定 UI 元件的 layout 結構等。使用固定 spacing 可確保元件之間的結構穩定、不受響應式影響而走樣。

版面層級規範：建立結構清晰、有秩序的頁面佈局

除了字體與 spacing 的 token 系統，我也為網站建立了一套結構明確的版面層級規範，用以指導整體頁面佈局的邏輯。這套結構從大到小分為：

我在實際佈局時，僅使用這些層級作為建構頁面的基本單位，避免過度複雜與任意堆疊，讓整體結構更一致、易於維護。

這套層級架構再搭配前述的字體大小 token 與 間距 token，可快速組合出具有邏輯性與視覺節奏的界面，不僅提升使用者的閱讀體驗，也讓後續設計擴充與開發實作都能遵循統一的規範。

其他設計規範