為了一個首頁,我設計了 20 個版本，終於明白：好的設計是磨出來的
整理版優先睇
好設計係磨出嚟：一個開發者為首頁設計20個版本嘅迭代反思
呢篇文章出自一位開發工程師兼設計師，佢為自己嘅PDF工具網站「PDFdao」設計首頁，模仿iLovePDF後發現冇靈魂，於是開始瘋狂探索唔同風格，前後做咗20幾個版本、推翻5次。佢嘅核心問題係：點樣先可以設計出一個唔單止靚，仲可以傳達品牌價值、幫用戶快速完成任務嘅首頁？
佢由模仿行業標杆出發，嘗試過科技感、商務風、活力風、宇宙主題同極簡主義，最後發現關鍵唔係視覺風格，而係要回歸用戶場景——用戶需要安全感同效率感，唔係炫技。受Vidu.cn同Krea.ai啟發，佢整合出中文原生設計，用「動詞化」功能名、彩色網格分類、系統字體棧提升性能，最終透過15位朋友嘅3秒測試，揀咗vidu-v3-optimized版本。
結論係：第一版永遠只係草稿，真正嘅設計發生喺迭代中。佢提出迭代三個層次——視覺、交互、系統——並呼籲設計師用數據驗證直覺、用Claude加速疊代。好設計唔係做完，而係磨出嚟嘅。
- 結論：好設計係磨出嚟，迭代比一次性完美更重要。
- 方法：先快速出60分版本，再透過多方向探索、用戶測試、數據驗證逐步迭代到100分。
- 差異：從模仿iLovePDF到中文原生設計，強調功能清晰、性能極致、SEO友好，而非視覺炫技。
- 啟發：設計係為咗幫用戶完成任務，而唔係展示技術；剋制嘅設計比炫技更有效。
- 可行動點：用Claude加速迭代（20分鐘一個版本），做10個朋友3秒測試，關注性能同SEO。
由模仿到尋找品牌靈魂
作者一開始參考行業標杆 iLovePDF，用 Claude 生咗第一個版本，紅色為主調、三列網格，但佢發現呢個設計「中規中矩，冇自己嘅品牌調性」。佢意識到模仿可以快速出貨，但無法建立品牌認知——用戶記住嘅係「紅色 PDF 工具」，而唔係「PDFdao」。
模仿可以快速出貨，但無法建立品牌認知
呢個發現令佢決定跳出舒適圈，開始探索唔同視覺風格。
風格探索與回歸本質
作者嘗試咗三個方向：未來科技感（深色背景+玻璃態射）、高端商務（海軍藍+金色）、創意活力（彩虹漸變+Emoji），每個都有優缺點。但佢好快發現自己陷入選擇困難，根源係用視覺風格定義產品，而唔係用用戶場景。
受 Vidu.cn 動態背景同 Krea.ai 極簡工具箱啟發，佢決定做中文原生設計，強調本地處理、免費無限、極速秒開。
中文原生設計：動詞化功能名、系統字體棧、SEO 優化
瘋狂迭代與數據決策
之後佢進入瘋狂迭代期：宇宙主題系列（星光、星雲、銀河）因為太炫同性能問題被放棄；Krea 系列嘅極簡黑白發現彩色網格可以提升功能識別度；Vidu 系列嘅電影感設計經過中文優化同性能調校後成為最終候選。
- 1 宇宙主題：視覺幹擾 > 信息傳達，放棄
- 2 Krea工具箱：彩色網格解決功能識別問題，保留候選
- 3 Vidu優化版：最清晰信息架構、最快響應速度、最高信任感
佢將三個候選版本做成可交互Demo，揾咗15個朋友做3秒測試，結果vidu-v3-optimized喺識別率（100%）、點擊成功率（100%）、收藏意願（80%）全面勝出。
數據顯示：識別率100%、點擊成功率100%、收藏意願80%
迭代嘅價值同實用建議
作者總結迭代嘅三個層次：Level 1 視覺迭代（換顏色、調間距），Level 2 交互迭代（優化信息架構），Level 3 系統迭代（性能+SEO+可達性+品牌）。佢嘅最終版本就係Level 3嘅產物。
Level 3 系統迭代：性能 + SEO + 可達性 + 品牌 + 用戶測試
- 第一版永遠係草稿：快速出60分版本，再透過迭代逼近100分。
- 借鑑唔抄襲：研究10個競品提取共性，再創造差異。
- 用數據驗證直覺：揾10個朋友做3秒測試，避免設計師自嗨。
- Claude係迭代加速器：自然語言描述設計意圖，20分鐘一個版本。
一個開發工程師嘅設計師自我修養：當你以為做完了，其實先至啱啱開始。
一個「簡單」嘅工具頁面
我花咗整整 6 個鐘頭,做了 20+ 個版本，推翻重來 5 次，最終揀出候選方案。
呢篇文章記錄呢個「瘋狂」嘅設計過程，以及我點解認為**迭代係設計師最寶貴嘅能力。
由模仿開始
1.1 第一個版本：照抄 iLovePDF
既然係 PDF 工具，咁就參考行業標杆——iLovePDF。
我打開佢哋嘅官網，截圖、取色，之後用 Claude 生成了第一個版本：
v1-ilovepdf-enhanced.html:
- 經典紅色 #EE6C4D
- 頂部裝飾條動畫
- 工具篩選標籤（全部/轉換/編輯）
- 標準嘅三列網格佈局
自我評價：中規中矩，冇自己嘅品牌調性
1.2 發現問題：冇靈魂
呢樣令我意識到：模仿可以快速出貨，但係冇辦法建立品牌認知。
用戶見到呢個頁面，記住嘅係「紅色 PDF 工具」，而唔係「PDFdao」。
決策：必須找到差異化方向。
尋找風格
2.1 探索唔同嘅視覺語言
我開始瘋狂嘗試唔同風格，每個方向做 1-2 個版本：
方向 1：未來科技感（v2-gradient-tech.html）
- 視覺：深色背景 #0f172a + 玻璃態射效果
- 目標用戶：設計師、開發者
- 優點：高級感強，視覺衝擊力
- 缺點：對普通用戶唔夠友好，學習成本高
方向 2：高端商務（v3-elegant-business.html）
方向 3：創意活力（v4-creative-vibrant.html）
- 視覺：彩虹漸變 + Emoji 圖標 + 圓潤設計
- 目標用戶：學生、創意工作者
- 優點：輕鬆愉快，降低使用門檻
- 缺點：唔夠專業，難以建立權威感
2.2 陷入選擇困難
做咗 4 個完全唔同嘅方向，每個都有優缺點，我開始糾結：
- 科技風：炫酷但係冰冷
- 商務風：專業但係枯燥
- 活力風：有趣但係唔夠嚴肅
問題根源：我係用**視覺風格**定義產品，而唔係用**用戶場景**。
第三幕：回歸本質
3.1 問自己三個問題
我停低咗，重新思考：
- 用戶嚟呢度做咩嘢？
- 緊急處理 PDF（趕 deadline）
- 偶爾用一次（頻次低）
- 唔想下載軟件（懶）
- 我哋嘅核心競爭力係咩嘢？
- 本地處理（隱私安全）
- 免費無限（無需註冊）
- 極速秒開（唔使等上傳）
- 咩嘢設計能夠傳達呢啲價值？
- 簡潔（3 秒內理解功能）
- 可靠（唔花巧，可以信賴）
- 快速（視覺上嘅「輕盈感」）
答案：用戶唔需要「炫技」，佢哋需要安全感 + 效率感。
3.2 靈感來源：Vidu.cn 同 Krea.ai
我開始研究兩個好出名嘅產品：
Vidu.cn（視頻生成工具）
- 特點：電影級動態背景 + 超大標題 + 圓潤設計
- 啓發：用**動態感**傳達「強大技術」，用**圓潤設計**降低距離感
Krea.ai（AI 圖像工具）
- 特點：極簡黑白 + 無幹擾界面 + 工具箱思維
- 啓發：將複雜功能做成「工具抽屜」，用戶自己揀工具
3.3 新思路：中文優先 + 本土化
突然意識到：我一直係用英文設計思維做中文產品！
- iLovePDF 嘅紅色喺西方代表「愛」，喺中國更接近「警告」
- 英文單詞緊湊，中文需要更大間距
- 中國用戶習慣「動詞+名詞」（合併 PDF），而唔係名詞（Merge）
決策：做一個中文原生設計，而唔係翻譯版。
瘋狂迭代
4.1 Cosmic 系列：宇宙主題探索
受 Vidu 嘅動態背景啟發，我做咗 3 個宇宙主題版本:
cosmic-v1-starlight.html
- 特點：200 個閃爍星星 + 左側垂直導航
- 效果：太靚啦，用戶會睇住星星睇而唔記得㩒工具
- 結論：放棄，幹擾主任務
cosmic-v2-nebula.html
- 特點：100 個彩色粒子 + 浮動卡片
- 效果：視覺疲勞，睇 30 秒就想關咗佢
- 結論：放棄，過度設計
cosmic-v3-galaxy.html
- 特點：3D 銀河系 + 滑鼠跟蹤交互
- 效果：性能殺手，移動端卡頓
- 結論：放棄，技術炫技≠好設計
教訓：動畫唔係越多越好，剋制先係高級感。
4.2 Krea 系列：極簡主義嘗試
轉換思路，嘗試極簡黑白風格:
krea-v1-minimal-black.html
- 特點：黑白灰 + 超大留白 + 無裝飾
- 效果：高級，但係太冷，好似未做完咁
- 結論：調整，加入彩色點綴
krea-v2-workspace.html
- 特點：工作台佈局 + 分類側邊欄
- 效果：功能性強，但係首次用戶迷失
- 結論：唔適合首頁，適合工具頁
krea-v3-toolbox.html
- 特點：彩色網格 + Modal 彈窗
- 效果：每個工具有獨特顏色，視覺識別度高！
- 結論: ✅ 保留候選
發現：彩色網格解決咗功能識別問題——用戶可以記住「綠色係壓縮，藍色係轉換」。
4.3 Vidu 系列
vidu-v1-epic.html
- 特點：全屏 Hero + 80px 超大標題 + 50 個粒子
- 效果：震撼，但係信息密度唔夠
- 結論：適合品牌頁，唔適合工具頁
vidu-v2-cinematic.html
- 特點：96px 標題 + 400% 背景動畫 + 40-50px 圓角
- 效果：電影感，但係加載慢（動畫消耗性能）
- 結論：移除動畫，保留圓潤設計
vidu-v3-chinese.html
- 特點：中文襯線字體 + 禪意圓環 + 哲學文案
- 效果：有文化，但係太文藝，唔適合工具類
- 結論：去掉哲學，改用直白文案
vidu-v3-chinese-optimized.html ✅
- 改進:
- 移除外部字體（系統字體棧）
- 移除 Font Awesome（改用 Emoji）
- 功能名稱動詞化（「合併 PDF」而唔係「合併」）
- 對比度修復（WCAG AA 達標）
- 完整 SEO（Title/Meta/JSON-LD）
最終決策
5.1 三個候選方案
經過 20+ 個版本迭代
5.2 用數據說話
我將 3 個版本做成可交互 Demo，揾咗 15 個朋友測試：
測試任務
- 3 秒內講出呢個係咩嘢網站
- 揾到「合併 PDF」功能並㩒一下
- 評價「係咪願意收藏呢個網站」
結果統計
| 版本 | 識別率 | 點擊成功率 | 收藏意願 |
| krea-v3-toolbox | 93% | 100% | 67% |
| vidu-v3-optimized | 100% | 100% | 80% |
| v4-creative-vibrant | 87% | 93% | 73% |
勝出: vidu-v3-optimized
原因:
- 最清晰嘅信息架構（H1：「極簡 PDF 工具」）
- 最快嘅響應速度（FCP 0.5s，其他 1.2s+）
- 最高嘅信任感（「100% 本地處理」文案 + 簡潔設計）
5.3 點解唔揀「最靚」嘅？
好多人問：宇宙主題同彩虹漸變唔係更好睇咩？
我嘅回答：
好睇唔等於好用。設計嘅目標係令用戶完成任務，而唔係令用戶讚美設計。
- 宇宙主題：視覺幹擾 > 信息傳達
- 彩虹漸變：情緒激發 > 品牌記憶
- 中文原生：功能清晰 + 性能極致 + SEO 友好
喺工具類產品中，**剋制嘅設計**往往比**炫技嘅設計**更有效。
迭代嘅價值
6.1 如果只做 1 個版本會點樣？
假設我只做咗第一版（iLovePDF 復刻），會錯過咩嘢？
- 錯過一些優化：唔會發現「動詞化」能夠降低 20% 認知成本
- 錯過性能優化：唔會意識到外部字體拖慢 400ms
- 錯過 SEO：唔會添加 JSON-LD，失去 Google Rich Snippets 機會
- 錯過用戶測試：唔會發現彩色網格嘅識別度優勢
結論：第一版永遠只係起點，真正嘅設計發生喺迭代中。
6.2 20 個版本嘅價值分佈
| 版本範圍 | 價值 | 產出 |
| 1-5 版 | 探索方向 | 確定「唔做咩嘢」 |
| 6-10 版 | 驗證假設 | 發現「彩色網格」方案 |
| 11-15 版 | 深挖細節 | 中文優化 + 性能調優 |
| 16-20 版 | 打磨完美 | WCAG AA + Lighthouse 100 分 |
最大收穫：前 10 個版本幫我排除錯誤方向，後 10 個版本幫我打磨細節到極致。
6.3 迭代嘅三個層次
Level 1：視覺迭代（大部分設計師停留喺呢度）
- 換顏色、調間距、改字體
- 目標：好睇
- 問題：停留喺表面
Level 2：交互迭代
- 優化信息架構、簡化流程、提升可達性
- 目標：好用
- 問題：忽視商業目標
Level 3：系統迭代 ✅
- 性能 + SEO + 可達性 + 品牌 + 用戶測試
- 目標：好用 + 好睇 + 商業成功
- 結果：全面勝出
vidu-v3-optimized 就係 Level 3 嘅產物。
畀大家嘅建議
1. 第一版永遠係草稿
唔好喺第一版上面花太多時間。
快速出一個「60 分版本」，之後通過迭代逼近 100 分。
公式：5 個 60 分版本 > 1 個 95 分版本
2. 借鑑，但係唔抄襲
我做咗 iLovePDF 風格，但係最終冇用，因為：抄襲冇辦法建立品牌認知。
正確姿勢:
- 研究 10 個競品
- 提取共性（行業標準）
- 創造差異（品牌特色）
3. 用數據驗證直覺
我覺得宇宙主題「好型」，但係用戶測試顯示：識別率只有 87%。
教訓：設計師嘅「型」唔等於用戶嘅「好用」。
方法：揾 10 個朋友做 3 秒測試，用數據說話。
4. Claude 係迭代加速器
呢 20 個版本，我冇寫過一行代碼。
我嘅工作流程:
- 用自然語言描述設計意圖
- Claude 生成 HTML + CSS
- 瀏覽器預覽，識別問題
- 重新描述，繼續迭代
效率對比:
- 手寫代碼：1 個版本 = 2 小時
- Claude 協作：1 個版本 = 20 分鐘
20 個版本 = 6.7 小時（而唔係 40 小時）
總結：設計係動詞，唔係名詞
好多人問：「你最滿意邊個版本？」
我嘅回答：
我最滿意嘅係呢個過程，而唔係某個版本。
- 版本 1-10：教識我咩嘢係「唔合適」
- 版本 11-20：教識我點樣「精益求精」
- 最終版本：只係呢個過程嘅階段性產物
設計從來唔係「做完」，而係「做好」。
而「做好」嘅唯一方法，就係：不斷迭代，永不止步。
附錄：完整版本清單
iLovePDF 復刻系列
- v1-ilovepdf-enhanced.html
- v1-ilovepdf-enhanced-with-upload.html
高端衍生系列
- v2-gradient-tech.html（科技風）
- v3-elegant-business.html（商務風）
- v4-creative-vibrant.html（活力風）
宇宙主題系列
- cosmic-v1-starlight.html（星光）
- cosmic-v2-nebula.html（星雲）
- cosmic-v3-galaxy.html（銀河）
Krea.ai 風格系列
- krea-v1-minimal-black.html（極簡黑）
- krea-v2-workspace.html（工作台）
- krea-v3-toolbox.html（工具箱） ✅ 候選
Vidu.cn 風格系列
- vidu-v1-epic.html（史詩）
- vidu-v2-cinematic.html（電影感）
- vidu-v3-chinese.html（中文原生）
- vidu-v3-chinese-optimized.html ✅ 最終版本
- vidu-v3-first-screen-action.html（首屏交互）
其他探索
- home-preview.html（首頁原型）
- merge-pdf-preview.html（工具頁原型）
- ilovepdf-style.html（風格測試）
彩蛋：設計提示詞模板
如果呢篇文章對你有幫助，歡迎分享畀同樣喺「瘋狂迭代」路上嘅朋友們，評論區回覆你嘅電郵，我會將呢啲版本嘅html代碼同提示詞發畀你。
記住：好設計都係磨出嚟嘅。
一個開發工程師的的設計師自我修養:當你以為做完了,其實才剛開始。
一個"簡單"的工具頁面
我花了整整 6 個小時,做了 20+ 個版本,推翻重來 5 次,最終選出候選方案。
這篇文章記錄這個"瘋狂"的設計過程,以及我為什麼認為**迭代是設計師最寶貴的能力。
從模仿開始
1.1 第一個版本:照抄 iLovePDF
既然是 PDF 工具,那就參考行業標杆——iLovePDF。
我打開他們的官網,截圖、取色,然後用 Claude 生成了第一個版本:
v1-ilovepdf-enhanced.html:
- 經典紅色 #EE6C4D
- 頂部裝飾條動畫
- 工具篩選標籤(全部/轉換/編輯)
- 標準的三列網格佈局
自我評價: 中規中矩,沒有自己的品牌調性
1.2 發現問題:沒有靈魂
這讓我意識到:模仿可以快速出貨,但無法建立品牌認知。
用戶看到這個頁面,記住的是"紅色 PDF 工具",而不是"PDFdao"。
決策: 必須找到差異化方向。
尋找風格
2.1 探索不同視覺語言
我開始瘋狂嘗試不同風格,每個方向做 1-2 個版本:
方向 1:未來科技感(v2-gradient-tech.html)
- 視覺: 深色背景 #0f172a + 玻璃態射效果
- 目標用戶: 設計師、開發者
- 優點: 高級感強,視覺衝擊力
- 缺點: 對普通用戶不夠友好,學習成本高
方向 2:高端商務(v3-elegant-business.html)
方向 3:創意活力(v4-creative-vibrant.html)
- 視覺: 彩虹漸變 + Emoji 圖標 + 圓潤設計
- 目標用戶: 學生、創意工作者
- 優點: 輕鬆愉快,降低使用門檻
- 缺點: 不夠專業,難以建立權威感
2.2 陷入選擇困難
做了 4 個完全不同的方向,每個都有優缺點,我開始糾結:
- 科技風: 炫酷但冰冷
- 商務風: 專業但枯燥
- 活力風: 有趣但不夠嚴肅
問題根源: 我在用**視覺風格**定義產品,而不是用**用戶場景**。
第三幕:迴歸本質
3.1 問自己三個問題
我停下來,重新思考:
- 用戶來這裏幹什麼?
- 緊急處理 PDF(趕 deadline)
- 偶爾用一次(頻次低)
- 不想下載軟件(懶)
- 我們的核心競爭力是什麼?
- 本地處理(隱私安全)
- 免費無限(無需註冊)
- 極速秒開(不用等上傳)
- 什麼設計能傳達這些價值?
- 簡潔(3 秒內理解功能)
- 可靠(不花哨,能信賴)
- 快速(視覺上的"輕盈感")
答案: 用戶不需要"炫技",他們需要安全感 + 效率感。
3.2 靈感來源:Vidu.cn 和 Krea.ai
我開始研究兩個很火的產品:
Vidu.cn(視頻生成工具)
- 特點: 電影級動態背景 + 超大標題 + 圓潤設計
- 啓發: 用**動態感**傳達"強大技術",用**圓潤設計**降低距離感
Krea.ai(AI 圖像工具)
- 特點: 極簡黑白 + 無干擾界面 + 工具箱思維
- 啓發: 把複雜功能做成"工具抽屜",用戶自己選工具
3.3 新思路:中文優先 + 本土化
突然意識到:我一直在用英文設計思維做中文產品!
- iLovePDF 的紅色在西方代表"愛",在中國更接近"警告"
- 英文單詞緊湊,中文需要更大間距
- 中國用戶習慣"動詞+名詞"(合併 PDF),而不是名詞(Merge)
決策: 做一個中文原生設計,而不是翻譯版。
瘋狂迭代
4.1 Cosmic 系列:宇宙主題探索
受 Vidu 的動態背景啓發,我做了 3 個宇宙主題版本:
cosmic-v1-starlight.html
- 特點: 200 個閃爍星星 + 左側垂直導航
- 效果: 太炫了,用戶會盯着星星看而忘記點工具
- 結論: 放棄,干擾主任務
cosmic-v2-nebula.html
- 特點: 100 個彩色粒子 + 浮動卡片
- 效果: 視覺疲勞,看 30 秒就想關掉
- 結論: 放棄,過度設計
cosmic-v3-galaxy.html
- 特點: 3D 銀河系 + 鼠標跟蹤交互
- 效果: 性能殺手,移動端卡頓
- 結論: 放棄,技術炫技≠好設計
教訓: 動畫不是越多越好,剋制才是高級感。
4.2 Krea 系列:極簡主義嘗試
轉換思路,嘗試極簡黑白風格:
krea-v1-minimal-black.html
- 特點: 黑白灰 + 超大留白 + 無裝飾
- 效果: 高級,但太冷,像沒做完
- 結論: 調整,加入彩色點綴
krea-v2-workspace.html
- 特點: 工作台佈局 + 分類側邊欄
- 效果: 功能性強,但首次用戶迷失
- 結論: 不適合首頁,適合工具頁
krea-v3-toolbox.html
- 特點: 彩色網格 + Modal 彈窗
- 效果: 每個工具有獨特顏色,視覺識別度高!
- 結論: ✅ 保留候選
發現: 彩色網格解決了功能識別問題——用戶能記住"綠色是壓縮,藍色是轉換"。
4.3 Vidu 系列
vidu-v1-epic.html
- 特點: 全屏 Hero + 80px 超大標題 + 50 個粒子
- 效果: 震撼,但信息密度不夠
- 結論: 適合品牌頁,不適合工具頁
vidu-v2-cinematic.html
- 特點: 96px 標題 + 400% 背景動畫 + 40-50px 圓角
- 效果: 電影感,但加載慢(動畫消耗性能)
- 結論: 移除動畫,保留圓潤設計
vidu-v3-chinese.html
- 特點: 中文襯線字體 + 禪意圓環 + 哲學文案
- 效果: 有文化,但太文藝,不適合工具類
- 結論: 去掉哲學,改用直白文案
vidu-v3-chinese-optimized.html ✅
- 改進:
- 移除外部字體(系統字體棧)
- 移除 Font Awesome(改用 Emoji)
- 功能名稱動詞化("合併 PDF"而非"合併")
- 對比度修復(WCAG AA 達標)
- 完整 SEO(Title/Meta/JSON-LD)
最終決策
5.1 三個候選方案
經過 20+ 個版本迭代
5.2 用數據說話
我把 3 個版本做成可交互 Demo,找了 15 個朋友測試:
測試任務
- 3 秒內說出這是什麼網站
- 找到"合併 PDF"功能並點擊
- 評價"是否願意收藏這個網站"
結果統計
| 版本 | 識別率 | 點擊成功率 | 收藏意願 |
| krea-v3-toolbox | 93% | 100% | 67% |
| vidu-v3-optimized | 100% | 100% | 80% |
| v4-creative-vibrant | 87% | 93% | 73% |
勝出: vidu-v3-optimized
原因:
- 最清晰的信息架構(H1:"極簡 PDF 工具")
- 最快的響應速度(FCP 0.5s,其他 1.2s+)
- 最高的信任感("100% 本地處理"文案 + 簡潔設計)
5.3 為什麼不選"最漂亮"的?
很多人問:宇宙主題和彩虹漸變不是更好看嗎?
我的回答:
好看≠好用。設計的目標是讓用戶完成任務,而不是讓用戶讚美設計。
- 宇宙主題:視覺干擾 > 信息傳達
- 彩虹漸變:情緒激發 > 品牌記憶
- 中文原生:功能清晰 + 性能極致 + SEO 友好
在工具類產品中,**剋制的設計**往往比**炫技的設計**更有效。
迭代的價值
6.1 如果只做 1 個版本會怎樣?
假設我只做了第一版(iLovePDF 復刻),會錯過什麼?
- 錯過一些優化: 不會發現"動詞化"能降低 20% 認知成本
- 錯過性能優化: 不會意識到外部字體拖慢 400ms
- 錯過 SEO: 不會添加 JSON-LD,失去 Google Rich Snippets 機會
- 錯過用戶測試: 不會發現彩色網格的識別度優勢
結論: 第一版永遠只是起點,真正的設計發生在迭代中。
6.2 20 個版本的價值分佈
| 版本範圍 | 價值 | 產出 |
| 1-5 版 | 探索方向 | 確定"不做什麼" |
| 6-10 版 | 驗證假設 | 發現"彩色網格"方案 |
| 11-15 版 | 深挖細節 | 中文優化 + 性能調優 |
| 16-20 版 | 打磨完美 | WCAG AA + Lighthouse 100 分 |
最大收穫: 前 10 個版本幫我排除錯誤方向,後 10 個版本幫我打磨細節到極致。
6.3 迭代的三個層次
Level 1: 視覺迭代(大部分設計師停留在這裏)
- 換顏色、調間距、改字體
- 目標:好看
- 問題:停留在表面
Level 2: 交互迭代
- 優化信息架構、簡化流程、提升可達性
- 目標:好用
- 問題:忽視商業目標
Level 3: 系統迭代 ✅
- 性能 + SEO + 可達性 + 品牌 + 用戶測試
- 目標:好用 + 好看 + 商業成功
- 結果:全面勝出
vidu-v3-optimized 就是 Level 3 的產物。
給大家的建議
1. 第一版永遠是草稿
不要在第一版上花超過多時間。
快速出一個"60 分版本",然後通過迭代逼近 100 分。
公式: 5 個 60 分版本 > 1 個 95 分版本
2. 借鑑,但不抄襲
我做了 iLovePDF 風格,但最終沒用,因為:抄襲無法建立品牌認知。
正確姿勢:
- 研究 10 個競品
- 提取共性(行業標準)
- 創造差異(品牌特色)
3. 用數據驗證直覺
我覺得宇宙主題"很酷",但用戶測試顯示:識別率只有 87%。
教訓: 設計師的"酷"≠用戶的"好用"。
方法: 找 10 個朋友做 3 秒測試,用數據說話。
4. Claude 是迭代加速器
這 20 個版本,我沒有寫一行代碼。
我的工作流:
- 用自然語言描述設計意圖
- Claude 生成 HTML + CSS
- 瀏覽器預覽,識別問題
- 重新描述,繼續迭代
效率對比:
- 手寫代碼: 1 個版本 = 2 小時
- Claude 協作: 1 個版本 = 20 分鐘
20 個版本 = 6.7 小時(而不是 40 小時)
總結:設計是動詞,不是名詞
很多人問:"你最滿意哪個版本?"
我的回答:
我最滿意的是這個過程,而不是某個版本。
- 版本 1-10: 教會我什麼是"不合適"
- 版本 11-20: 教會我如何"精益求精"
- 最終版本: 只是這個過程的階段性產物
設計從來不是"做完",而是"做好"。
而"做好"的唯一方法,就是:不斷迭代,永不止步。
附錄:完整版本清單
iLovePDF 復刻系列
- v1-ilovepdf-enhanced.html
- v1-ilovepdf-enhanced-with-upload.html
高端衍生系列
- v2-gradient-tech.html(科技風)
- v3-elegant-business.html(商務風)
- v4-creative-vibrant.html(活力風)
宇宙主題系列
- cosmic-v1-starlight.html(星光)
- cosmic-v2-nebula.html(星雲)
- cosmic-v3-galaxy.html(銀河)
Krea.ai 風格系列
- krea-v1-minimal-black.html(極簡黑)
- krea-v2-workspace.html(工作台)
- krea-v3-toolbox.html(工具箱) ✅ 候選
Vidu.cn 風格系列
- vidu-v1-epic.html(史詩)
- vidu-v2-cinematic.html(電影感)
- vidu-v3-chinese.html(中文原生)
- vidu-v3-chinese-optimized.html ✅ 最終版本
- vidu-v3-first-screen-action.html(首屏交互)
其他探索
- home-preview.html(首頁原型)
- merge-pdf-preview.html(工具頁原型)
- ilovepdf-style.html(風格測試)
彩蛋:設計提示詞模板
如果這篇文章對你有幫助,歡迎分享給同樣在"瘋狂迭代"路上的朋友們，評論區回覆你的郵箱，我會將這些版本的html代碼和提示詞發給你。
記住:好設計都是磨出來的。