Hello 大家好，我是 Jerry！
歡迎回到我的 Design Review 系列！在上一篇中，我們聊了如何優化首頁的導航與定位，但對於招募主管來說，真正的「主菜」其實是 Project Page（作品詳情頁）。
很多設計師（包括過去的我）常陷入一個誤區：想把所有的研究過程、訪談筆記、設計草圖通通塞進頁面，深怕少寫一點就顯得專業度不足。但換位思考後才發現，過長的文字與混亂的層級，反而成了閱讀者的負擔。
這一篇，我將延續《Don't Make Me Think》與《Practical UI》的核心精神，以我的 Side Project「Nut Habit App」為例，拆解我如何透過建立設計系統與視覺層級，將一個原本厚重的 Case Study，轉化為流暢、易讀且具備說服力的作品網頁。
Project Page Overview
這是我 2025 年初趁假期完成的個人 UI/UX side project，主題是用遊戲化的方式幫助很少運動的新手培養運動的習慣，叫 Nut Habit App 意思是使用者可以藉由每一次運動累積獎勵（一個堅果）去培養建立自己的運動習慣。
進入頁面的 Hero Section，可能有幾個小的易用性問題：
缺乏明確的視覺層級與引導，除了標題以外的字都太小了，下面的按鈕也不知道是否重要。
下面的按鈕和文字與圖片的排版不符，把版面切割成三個區塊了
最好在下面加上一個箭頭去引導使用者去下滑觀看內容
沒有 highlight 出這是一個簡化版的作品展示，去提示不同使用者（招募HR與設計主管）是否要去下載完整的 Case Study。應加上一個說明提示
接下來是比較嚴重的易用性問題：
文字過多、沒辦法立刻看到重點
缺乏視覺階層難以掃視，讓使用者覺得很難閱讀
表格設計過大、同時文字內容又很小讓人覺得很雜亂
文字占滿整個版面，使得換行時顯得閱讀吃力
Problem Statement
作品頁面的問題論述非常直接了當：
「過多的文字、缺乏視覺階層、無系統化的排版與間距設計使得使用者難以掃描閱讀內容與資訊，造成閱讀與使用上的不便」
好吧！那就來優化它吧！
Before & After
在網頁上往往人的耐心有限、寫的落落長一大串反而招募主管滑一下就帶過了。試想，他們一天要看近百個作品集，怎麼有時間一行行去讀你的文字呢？
我借用《Don't Make Me Think》和《Practical UI》這兩本書的觀念去提升整體設計一致性、視覺階層與易用性，詳細方法如下：
(Design System) 打造一致的設計系統
建立設計系統的好處是可以維持設計的一致性，能夠減低認知負載、讓人覺得自己是待在同一個視覺空間、不容易感到視覺疲乏。現在看到幾個很大的問題包含按鈕色、文字排版間距與字體大小沒有系統化等等。
Before：卡片與內文的間距缺乏系統、按鈕顏色太黑、字體大小過小或是過大
解決方法很簡單，就是和自己的作品一樣去建立一個簡單的設計系統：
下面左方是原本的內文與標題，右方是加上設計系統的內文與標題：
看起來就差很多了。同時我也運用《Practical UI》這本書的觀念，去將文字像右邊這樣做一個短區塊處理，優點在於使用者不需要在閱讀換行時有一個很大的跳躍才回到下一段，更加提升閱讀的易用性
進入 Framer 後，Framer 的 Stack（有點像是 Figma 的 Auto-Layout）以及下壓 option 鍵去微調元素間的距離，也能有效的建立一定的間距層級
但我覺得看個人習慣，如果說一個頁面真的太長，我還是習慣把所有的排版做好再一次導入 Framer 做微調
回來 Checklist 看看：
建立一個簡單有效的設計系統
維持設計的一致性
(Usability) 建立有效的視覺層級、精簡並格式化文字使其易於掃描
首先是專案的 Hero Section，這部分應該是最重要的一個頁面，務求傳遞出整個專案的理念與閱讀體驗
我把按鈕與標題排在靠左的一直線，讓整體呈現兩個區塊。同時，把標題副標題放大使得更好閱讀以及建立層級。因為我為了讓招募人資與設計主管看的內容有所區別，所以我將完整的設計流程放進 CTA 按鈕的連結上，下方只呈現短版的設計流程，為不同使用者做客製化的閱讀體驗。最後，將 CTA 上產品的主色去強調重要性，畢竟我還是會希望招募者能夠花時間好好閱讀我的完整設計流程的！
再來是設計挑戰與背景，這個部分是第二重要的Section，基本上招募主管主要看的就是這個 section和最後的 outcome，務求簡單大方並清楚好懂易導航。我這裡的做法是將兩者各自放大成一個 Section
接著是研究與設計流程，這裡的重要性次於前者、是主要給設計主管閱讀的區域，但因為篇幅長、細節多，導航與整體排版也有很大的優化空間。我的做法是放入一個步驟圖並以數字與顏色去引導使用者觀看，讓他們在閱讀大量資訊的過程中不容易失焦與迷路。
最後是每一個 Section 的排版，我以《Don't Make Me Think》中易於掃描的設計原則去重新規劃版面，大幅刪除不必要的文字以及良好運用圖片以及說明去解釋重點，讓每一個細節都具有邏輯上的意義而非只是裝飾性的元素。我也運用《Practical UI》中提到建立一致的設計系統概念去整合整份文件，使其輕巧、乾淨、好閱讀。
雖然還有很多細微調整的空間，但我認為已經達到我的需求（易於閱讀與傳達內容）
回來看看我的checklist：
利用約定習俗的傳統
建立有效的視覺層級
將頁面分成清楚定義的區塊
群組相近的資訊與內容
消除讓人分心的雜訊
讓可點擊的地方更明顯
精簡並格式化文字使其易於掃描
最後的點綴
既然是個網頁的線上作品集，如果自己的作品有創作的logo我認為也是需要放上去的！這一步是為了把自己的創作理念與核心展現出來給招募主管，讓對方更了解自己。
在 Hero Section 我放上了自己的 logo 與 logo story 的連結
在最下面多出一個 section 放上自己的 logo story 連結，讓有興趣了解你的 logo 設計過程的招募主管可以慢慢閱讀你設計上的用心。
因為我是 3D 動畫與視覺特效背景，我打算將自己過去創作的角色 IP 放上 Hero Section，在點擊頭像時會出現四隻角色出來和使用者打招呼～
我認為在這個 AI 時代裡，在自己的作品集裡充分表現出自已的創意反而是展現身為人的靈魂給使用你的網站的使用者們。即使是不斷跨領域（像我）的人也是需要用自己的方式向閱覽你的網站的人做一個自我介紹，這蠻重要的。
新舊網站的差異
Before: Jerry Chu Design 2025
After: Jerry Chu Design 2026
作品集設計技巧分享
這裡可以分享一些做 UI/UX 作品集的技巧，我知道我大多數的設計師朋友都不是像我這樣用 Figma 做稿再匯到 Framer 裡微調這抹搞剛，大部分用 Framer 的模板套就很有效了。我個人覺得就要看你願不願意花時間去了解 Framer 的細節以及自己去玩他的功能。
如果是願意自己動手設計作品集的朋友，在這裡推薦我整套流程：
找喜歡的設計師線上作品集去參考版型、配色、互動方式
在 Figma 設計網頁版的設計稿
在設計稿上加上自己的創意（這一步是靈魂）
接著可以先拿去給 mentor 或是設計師朋友 review 設計稿，不急著放上 Framer
等到作品頁面的內容經過修訂後完整，包含了 UX 的研究流程（這一步是腦）、MVP 的設計過程（這一步是肌肉）、UI 的設計系統等等（這一步是骨骼），再去放上 Framer（裝上心臟）
在 Framer 裡調整響應式與互動、動畫（這一步是循環系統）
再進入反覆多次的迭代與修改微調（這一步是慢慢生長出皮膚與器官的過程）
最後才是細節的 polish 與整個視覺體驗的建立（穿上服飾與配件）
你的產品（線上作品集）就誕生囉！
結語
在這裡邀請各位讀者們一起來看《Don't Make Me Think》和《Practical UI》這兩本書，非常推薦！
和大家交流交流～我是 Jerry，Thanks for reading！