先把問題說清楚
畫面很漂亮，為什麼還是不知道你在做什麼？
想像你走過一家店，招牌只寫「讓生活更美好」。你可能喜歡它的字體，卻還不知道裡面賣咖啡、家具，還是設計服務。網站也可能遇到同樣的問題。
Hero 是網站開場的主訊息區。它不一定要全螢幕，也不一定要有大照片；先讓人看懂服務與下一步，比把第一屏塞滿更重要。
這次用一間虛構的「小島設計」做練習。它想服務剛起步的餐飲品牌。先固定版型、字體和顏色，只改訊息，就能看出每一項調整的作用。
01 · 一次改一件事
同一個首屏，從模糊到具體
先切換其中一項，看看什麼改了、什麼沒變。想比較兩個版本，就按「固定目前作對照」，再修改目前版本。兩邊的圖片和文字都可以保留成不同選擇。
先選一個零件，觀察變化
目前是比較籠統的版本。它有視覺風格，但還沒有交代主要服務對象、具體範圍與入口目的地。
尚未固定對照。每次切換只改所選的零件。
固定對照
目前版本
四項都使用比較籠統的版本
範例作品：山間咖啡
假想練習：讓杯身、紙袋和菜單使用一致的識別。這是教學設定，並非真實客戶、實績或成果證明。
你已到達這個版本的示範作品區。數字是設計者安排的閱讀提示，不是眼動測試結果，也不是所有人都會照著看的保證。對照欄比較窄，可能提早上下重排；手機上的兩份預覽依序顯示。設定只留在目前頁面，重整會還原。
02 · 四個零件，四個問題
每一塊都要有自己的工作
你不必把這四項塞成固定公式。文字可以簡短，圖片也可以省略；重要的是，留下來的內容能幫讀者理解。
01 · Headline
主標：這裡提供什麼、適合誰？
像店門口的招牌：先讓路過的人知道這是一間什麼店。
- 比較模糊的版本
- 讓美好，從此不同。
- 這次調整的版本
- 為剛起步的餐飲品牌，設計一眼記得住的形象。
「美好」沒有交代服務。加入「餐飲品牌」和「設計形象」，讓讀者有資訊可以判斷是否與自己有關。
先寫出具體服務，再刪多餘的字。不要為了短，就刪掉讓人理解的關鍵。
02 · Supporting copy
補充說明：具體會幫我做哪些事？
像招牌旁的小菜單：補足範圍，不把整本菜單搬上來。
- 比較模糊的版本
- 我們以熱情與創意，創造無限可能。
- 這次調整的版本
- 從標誌、菜單到外帶包裝，整理一致的視覺，讓客人認得你的店。
補上標誌、菜單、包裝這些具體交付，讀者比較能想像合作內容，而不是再讀一次漂亮形容詞。
補充主標沒有說完的事。詳細流程、所有服務和完整故事可以放到後面的區塊。
03 · Hero visual
主視覺：圖片幫我理解了什麼？
像店門口的樣品：讓人看到你說的東西長什麼樣子。
- 比較模糊的版本
- 抽象幾何圖形
- 這次調整的版本
- 咖啡品牌杯身與包裝示意
兩張圖都可以建立風格，但作品示意能補充「餐飲品牌設計」的意思。圖片不只是填滿另一半畫面。
依目的選圖：作品、產品畫面、服務成果或有意義的示意圖。抽象圖並非錯誤，只是比較依賴文字交代服務。
04 · Call to action
主要行動：接下來可以去哪裡？
像展場入口的箭頭：告訴你下一步會看到什麼。
- 比較模糊的版本
- 了解更多
- 這次調整的版本
- 看餐飲品牌作品
這次只換入口文字，兩個版本都去同一個示範作品區。具體名稱讓讀者在點之前就知道目的地。
「看作品」「預約諮詢」都可能合理，依讀者此刻的需求選一個主要行動，不必讓每個連結一樣搶眼。
有意義的圖片需要相應的文字替代，讓看不到圖片的人也能理解重點；純裝飾圖則依用途處理。不能把重要說明只做在圖片裡。
03 · 決定先後順序
首屏先開門，不必一次講完整個故事
先放讀者需要做第一個判斷的資訊：服務是什麼、適合誰、下一步能看什麼。完整案例、合作流程、FAQ 和詳細介紹，可以接在後面。
用標題大小、位置與留白，讓主要介紹容易被看見。
用一兩句說明和相關圖片，補足範圍與具體樣子。
讓主要行動容易找到；若還有其他入口，用較輕的呈現方式。
可信度要靠真實資訊
如果你有可公開的實際作品、客戶評語或成果，可以挑與主張相關的證據。沒有就先展示自己的練習與過程，清楚標示是自主提案；不要填入虛構客戶標誌、評價或數字。
本篇的咖啡包裝是教學示意，只用來解釋「相關圖片」的角色，不是工作室的真實案例，也不能拿來證明服務品質。
手機上看不到下一步，怎麼辦？
不要只把所有東西縮小。先縮短重複文字，檢查圖片是否佔掉太多篇幅，再安排上下順序。重要內容要清楚可讀，而不是為了硬塞一屏而變得難看清楚。
具體不等於一定帶來更多詢問。這些調整提供更清楚的資訊，實際效果仍要請目標讀者試看與操作。
04 · 把判斷帶回自己的網站
先寫一句，再做一張
假設一個網站主標寫「創造無限可能」，訪客不知道這家公司提供什麼。最值得先試哪個修改？
選一個答案，看看理由。
直接看答案與理由
先讓主標說明服務與對象。這個問題出在資訊不夠具體，加動畫或放大圖片，未必能補上缺少的意思。
用四個問題整理你的內容
- 我提供什麼？誰最需要它？
- 還要補哪一句，對方才知道具體範圍？
- 哪張圖能支持我說的事？
- 我希望對方接著看什麼或做什麼？
你輸入的文字不會送給 AI，也不會儲存；重整後還原範例。
完成後找一位不熟悉你工作的人，請他用自己的話說：「這個網站在做什麼？適合誰？下一步去哪？」這比你自己盯著畫面猜更有幫助。
下一篇將介紹字體、字級與留白，繼續調整同一份內容的閱讀感。後續篇章製作中。
參考與延伸閱讀
本篇的工作室、圖例與前後比較由本站製作。設計建議是可測試的起點，不是固定版型規則或已證實的轉換效果。
官方資料查閱：2026.10.29。影片沿用使用者指定來源，本篇未引用影片原話。