先從熟悉的設計工作開始
把一張海報，變成一場可以走動的展覽
設計海報時，你會安排主標、圖片和報名資訊。網頁也需要這些判斷，只是讀者還能往下捲、點連結，或換一支手機來看。
想像要做一個設計師作品集：入口有招牌，開場先介紹自己，接著展示作品，最後留下聯絡方式。這些位置各有工作，也各有常用名稱。
這篇先認識七個零件。你不必先會寫程式；看得出哪裡要改、說得清楚原因，就能開始和 AI 溝通。
01 · 看圖認識
選一個零件，看它在哪裡
下面是虛構的「小島設計」作品集。點選縮圖，右邊就會框出對應位置；接著看下方的用途與說明。這是教學示意，不是作者實際客戶案例。
網頁零件 PAGE PARTS
位置預覽 首屏主區 Hero
被好好看見。看作品 ↗
圖中的文字與入口是位置示意。下方實作區的「看作品」可以實際操作。
你正在認識
首屏主區 · Hero
像展覽開場的主海報。
- 負責什麼
- 先說明你是誰、提供什麼，以及訪客接下來可以做什麼。
- 看圖找位置
- 介紹、主視覺與「看作品」一起被框起來。
- 設計時記得
- 不一定要佔滿整個螢幕；先讓主訊息與下一步清楚。
可以跟 AI 說首屏放一句服務介紹、一張代表作品，以及「看作品」連結。
七個零件文字版：隨時展開查閱
- 頁首 · Header
- 像展覽入口的招牌。 讓人知道自己來到誰的網站，通常也放主要導覽。 適合放品牌識別與常用入口，別把所有介紹都塞在這一條。
- 導覽 · Navigation
- 像展場裡指向不同展區的路標。 幫人前往作品、服務或聯絡資訊；它可以放在頁首裡。 名稱直接說明目的地，讓讀者不用猜。
- 首屏主區 · Hero
- 像展覽開場的主海報。 先說明你是誰、提供什麼，以及訪客接下來可以做什麼。 不一定要佔滿整個螢幕；先讓主訊息與下一步清楚。
- 內容區塊 · Section
- 像展覽中各自有主題的展區。 把相關內容放在一起，例如精選作品、服務方式或聯絡資訊。 一區處理一個主題，用標題說明這一區在講什麼。
- 卡片 · Card
- 像每件作品旁的介紹小卡。 把同一項目的圖片、名稱與簡介組合成容易掃讀的單位。 適合列出多個可比較的項目；長篇文章不必每段都包成卡片。
- 行動引導 · CTA
- 像海報上的「進場看展」指示。 告訴訪客下一步可以做什麼，例如看作品、報名或聯絡。 CTA 是目的，不是固定造型。前往別處可用連結，執行操作可用按鈕。
- 頁尾 · Footer
- 像看完展覽後的資訊站。 在頁面最後收好聯絡、版權或補充入口，讓人知道還能去哪裡。 重要聯絡方式也能出現在其他位置，不必只藏在最下面。
Header、Navigation、Section、Footer 可以對應 HTML 的結構元素；Hero、Card 和 CTA 則是設計上常用的說法。你不需要找到一個叫「hero」的 HTML 標籤，才能做首屏。
02 · 別把不同層級混在一起
先說「放什麼」，再說「怎麼排」
「我要 Hero」和「我要左右分欄」可以同時成立。前者在說這一區的用途，後者在說內容的排列方式。
版型是安排內容的方法，例如單欄或左右分欄；風格是視覺呈現的方向，例如極簡或描邊。同一個首屏，可以有不同版型與風格。
所以下次看參考網站，先問：「我喜歡的是它的內容安排、字體配色，還是某個操作效果？」拆開描述，才知道要保留哪個部分。
03 · 親手換個排列
同一個 Hero，三種開場方式
這次固定文字、圖片與顏色，只改它們的排列。切到窄畫面，看看空間變少時，內容如何重新安排。
排列方式 LAYOUT
左右分欄：介紹在左、圖片在右；可用空間較窄時改為上下排列。
窄畫面是版面練習，不是完整手機模擬器；在手機上，「寬畫面」也只會使用目前可用空間。選擇不會保存，重新整理會回到預設。
選版型時，先想讀者要先看什麼
左右分欄：文字與圖片可以互相配合。置中堆疊：適合把短主張集中呈現。圖片在前：讓視覺作品先建立印象，再接介紹。它們都可能好看，關鍵是是否符合你的內容與閱讀順序。
漂亮不是部件越多越好。先確定一個主要訊息、一個清楚的下一步，再決定要加哪些輔助內容。
04 · 把觀察變成需求
你已經可以說得比「漂亮一點」更清楚
試著回答：訪客已看懂你是誰，你希望他接著去看作品。最直接該檢查的是哪一個零件？
選一個答案，看看理由。
直接看答案與理由
優先檢查 CTA。把入口寫成「看作品」，並確定它真的連到作品區，能直接回應這個目標；首屏高度和頁尾裝飾無法代替這一步。
帶走一段可修改的需求
下面這段是練習範例。換成你的服務與作品，就能開始和 AI 討論。你改的內容只留在目前頁面，不會送出，重整後會還原。
完成後，先檢查三件事：看不看得懂你提供什麼、找不找得到作品、手機上讀起來順不順。再來微調字體、色彩與細節，會更有方向。
版型選擇 → 字體與留白 → 品牌視覺 → 元件狀態 → 手機重排 → 動效 → 和 AI 協作。第二篇版型比較已發布，其餘篇章製作中，本篇可獨立閱讀。
參考與延伸閱讀
這篇的設計語彙與選項面板方向，來自作者提供的影片；作品集示例、中文比喻、圖解與互動練習由本站延伸製作，並非影片逐字翻譯。
結構資料查閱：2026.10.29。本文沒有引用影片原話；影片的具體時間碼未於本輪重新核對。