實作文章
案例拆解：日文基礎診斷表點由「太花太黑」改到可讀又可轉化
做著陸頁或問卷頁時，最常見唔係「做唔到」，
而係做完之後：畫面好靚但睇唔清字、按鈕唔突出、訪客唔知下一步做咩。
呢篇用一個日文基礎診斷表問卷頁嘅真實改版過程，
示範點樣由「太花、太黑」調到讀得舒服、又肯撳下一步。
你唔使識寫程式先睇得明；下面講嘅都係設計決策同檢查次序，技術同事或 Cursor 可以跟住落地。
先講結論
- 背景圖先解決「對焦喺邊」，再談「清唔清晰」
- 深色遮罩唔係越深越有氣氛；要為文字可讀服務
- 行動按鈕區如果太花，寧願簡化背景，都好過硬撐一致風格
- 桌面同手機要分開試；唔好假設一張圖兩邊都啱
起點問題（當時卡住位）
1）背景圖規格唔確定
- 唔知用幾大先夠
- 擔心上線後模糊，或者重要人物被裁走
2）中間同底部區塊「焦點跑位」
- 橫額區、報名區嘅背景，重要內容被裁到邊角
- 桌面睇 OK，手機一開就唔對
3）全頁偏黑，按鈕區又太搶
- 遮罩太深，成頁沉、累
- 報名區背景太花，反而分散「填表／撳掣」嘅注意力
實作解法（可重用嘅 5 步）
第 1 步：先定背景圖最低規格
唔使一開始就買最貴圖庫。先定：
- 比例用 16:9 起步（例如 1920×1080）
- 格式優先 WebP（檔案細、載入快），其次 JPG
- 主體放中間，四周留空；因為網頁會自動裁切填滿螢幕
驗收： 喺手機同電腦各開一次，睇人物／重點有冇被切走。
第 2 步：先做好「第一屏」，再逐區調
- 先完成打開頁面第一眼嗰區（標題、副題、主按鈕）
- 再處理中間說明區、底部報名區
- 避免一次過改晒成頁，改亂咗都唔知邊區出事
第 3 步：桌面／手機分開調「圖嘅重心」
同一張背景圖，手機窄屏會裁走更多左右。做法係：
- 桌面：橫額區重心略偏上；報名區若用人像，對準人物同按鈕
- 手機：再試偏上或偏中；以「字讀得清、按鈕唔被擋」為準
唔使記複雜參數；用預覽改到啱為止，兩種裝置各截圖留底方便之後對照。
第 4 步：用可讀性決定遮罩深淺
- 若字唔清，就減淡深色半透明層（唔係愈深愈高級）
- 測試方法：請唔識設計嘅朋友讀一次標題同三點賣點，唔使瞇眼先睇到就合格
第 5 步：報名區太花就果斷簡化
- 最終版本：報名區移除背景圖，改用簡單漸層或純色
- 目的好簡單：訪客視線只去填表／撳掣，唔去欣賞背景
成果（由「靚」變成「會轉化」）
- 由「有圖但冇焦點」→「讀到重點 + 睇到下一步」
- 由「每區都想放圖」→「只保留有助說服嘅視覺」
- 建立一套之後做 LP／問卷都可以跟嘅檢查次序
可複製 SOP（給非設計背景）
- 先定背景圖比例同安全邊，唔好先執配色
- 先做第一屏，再做其餘區塊
- 手機、桌面各開一次，檢查裁切
- 遮罩以「字清唔清」為準，唔以氣氛為準
- 報名區優先服務行動，唔服務裝飾
- 上線後用另一部電話、無痕視窗再開一次（避免自己瀏覽器快取睇錯）
常見錯誤
錯誤 1：一開始就追求最高清素材
- 問題：花時間搵圖，轉化未必上升
- 解法：先把對焦、遮罩、文案層次做對
錯誤 2：只喺電腦試，唔試手機
- 問題：手機幾乎必定裁切唔同
- 解法：兩種裝置各驗收一輪
錯誤 3：報名區為咗「全站一致」硬留背景圖
- 問題：風格統一，但唔肯填表
- 解法：報名區先服務點擊，再談視覺一致
常見搜尋問法
- 問卷頁一定要設計師先做嗎？
第一版可以跟「可讀 + 單一下一步」原則自己調；複雜品牌再外包視覺。 - Astro／Cloudflare 同設計有咩關係？
設計決定轉化；技術負責穩定上線同速度；兩邊分開驗收。
下一步
如果你而家個頁都係「有設計但無行動」，可先對照主站完整案例 日文基礎診斷表問卷，再瀏覽 案例目錄 搵同類著陸頁／表單做法，並參考 服務頁 定修改範圍。
常見問題 FAQ
問卷頁背景圖一定要高清大圖先得嗎？
唔一定。先確保構圖同對焦正確，再決定是否升級素材，通常比盲目換圖更有效。
點判斷頁面應該保留背景圖定移除？
以「文字可讀性」同「行動按鈕夠唔夠搶眼」為標準；如果背景干擾閱讀，移除反而更易轉化。
手機版都要單獨調整嗎？
要。桌面同手機螢幕比例唔同，同一張圖喺手機好常會裁到錯重點。
About me
你好，我係阿丸。呢度以數位主權為核心，分享點樣用 AI 幫手整網頁、建立吸客贈品頁、整理內容同上線作品， 目標係幫你用更短時間把內容同網站做成可帶走、可維護嘅自有資產。
我會持續更新可跟做嘅教學、踩坑記錄同流程模板，等你唔使被平台黑盒綁死，亦唔使再由零重複試錯。
同時呢度會多寫一人公司最常遇到嘅訂閱制現實：工具加價、用量隱形成本、平台綁定風險， 同埋點樣用可執行嘅做法，將名單、主站同漏斗慢慢揸返喺自己手度。
你會見到嘅內容包括：支出檢視框架、用量上限與警報、搬遷前準備同主權策略；目標唔係一夜換晒工具， 而係先止血，再建立長期可維護嘅自有資產。
想先攞可跟做模板同檢查清單？
先由免費吸客贈品包開始，將文章做法變成你可即用嘅落地清單，再按需要對照服務範圍安排下一步。
想睇合作模式同交付範圍，可先睇服務與合作方式。