ibaurr/world-class-website-design

世界級網站設計

目的

透過以研究為主導的設計流程和細心的實作，創造出獨特、深思熟慮且達到生產品質的網站。

此技能適用於以下兩種情況：

• 重新設計： 改善現有網站，同時保留其身份、定位、內容、路由和現有功能，除非有明確的理由需要更改它們。
• 新網站： 根據產品、受眾和需求建立原創的創意方向，而不是預設使用通用模板。

目標不是模仿設計圖庫。而是產出一个連貫、令人難忘且工藝精湛的體驗。

核心原則

1. 在改變之前先理解。 了解產品或公司的業務、服務對象，以及網站需要達成的目標。
2. 在設計之前先研究。 審查相關參考資料，並識別有用的設計決策；不要複製版面或視覺識別。
3. 賦予每個專案獨特的識別。 不要在不相關的專案之間重複使用相同的視覺方向、主圖佈局、章節順序或裝飾風格。
4. 有目的地設計。 每個章節、動畫、圖片和互動都應支援溝通、可用性或品牌特色。
5. 平衡原創性與清晰度。 在視覺上敢於創新，但不要讓網站變得令人困惑或難以使用。
6. 建置、檢查並完善。 在實際的實作經過真實的視口尺寸審查之前，設計不算完成。

工作流程

1. 探索專案

在編輯檔案之前：

• 檢查儲存庫結構、框架、套件管理員、依賴項、腳本和現有慣例。
• 盡可能執行現有專案，並檢查目前渲染的網站。
• 審查所有相關頁面、路由、導航、表單、行動呼籲和互動狀態。
• 了解產品、受眾、定位、價值主張、品牌聲音和轉換目標。
• 識別現有資產、字型、顏色、設計標記、元件和整合。
• 對於重新設計，將現有網站和專案資料視為事實來源。未經正當理由，不要虛構產品聲明或移除重要內容和功能。

如果無法獲得基本資訊，請做出保守的假設，並清楚地區分它們與已驗證的事實。只有在缺少的資訊阻礙了有意義的進展時才提出問題。

2. 研究視覺參考

當可以進行瀏覽器存取或網路研究時，請審查各種高品質網站。有用的發現來源包括：

• https://www.awwwards.com/websites/
• https://www.siteinspire.com/
• https://www.siteofsites.co/
• https://curated.design/
• https://land-book.com/
• https://recent.design/
• https://minimal.gallery/
• https://www.landingfolio.com/
• https://saaslandingpage.com/
• https://www.lapa.ninja/
• https://www.framer.com/startups/ycombinator

盡可能審查實際頁面和互動，而不僅僅是縮圖或搜尋片段。

研究：

• 藝術指導和品牌表達。
• 構圖、網格、間距和視覺節奏。
• 字體排印、階層和可讀的行長。
• 色彩、對比、邊框、表面和紋理。
• 主圖區塊和第一印象體驗。
• 導航和資訊架構。
• 產品展示和視覺敘事。
• 攝影、插圖、3D 和其他資產。
• 動態、轉場和互動細節。
• 響應式行為。

出於特定原因選擇參考。在內部解釋每個參考的用處，以及如何將該想法應用於當前專案。不要完全複製其他網站的獨特設計。

如果無法進行外部瀏覽，請不要聲稱已審查過這些圖庫。根據可用的專案背景進行工作，並在相關時說明此限制。

3. 建立創意方向

在實作之前，形成一個適合此特定品牌和受眾的清晰設計方向。

定義：

• 預期的感受和個性。
• 視覺概念和藝術指導。
• 字體排印方法和階層。
• 色彩調色板和對比策略。
• 版面與網格原則。
• 圖片和插圖方向。
• 元件和表面語言。
• 動態原則。
• 品牌表達與可用性之間的關係。

對於重新設計，以現有識別為起點。當現有品牌元素仍然有效時，保留可識別的品牌元素，但改善薄弱或不一致的執行。

避免預設使用：

• 通用的 SaaS 登陸頁面結構。
• 無緣無故的漸層和發光效果。
• 重複的便當網格。
• 裝飾性的色塊和通用的 AI 圖像。
• 過多的卡片、膠囊、邊框和陰影。
• 隨意 oversized 的字體排印。
• 延遲或遮蔽資訊的動畫。

這些模式並非完全禁止；只有在它們真正適合專案時才使用它們。

4. 規劃體驗

在開始建置前，規劃頁面或網站結構。

• 優先考慮使用者的問題和任務。
• 建立清晰的階層和邏輯的內容流程。
• 讓價值主張能被快速理解。
• 賦予每個章節獨特的目的。
• 在保持連貫性的同時使用視覺變化。
• 保持行動呼籲清晰且位置得當。
• 在重新設計中，保留重要的現有路由、內容、整合和使用者旅程。

不要僅僅為了讓頁面更長而添加章節。不要僅僅為了實現極簡主義而移除有用的內容。

5. 設計與實作

除非使用者要求單獨的原型，否則直接在現有程式碼庫中工作。

• 遵循專案的框架、慣例和套件管理員。
• 在合理的情況下重複使用並改善現有元件。
• 為重複出現的模式建立可重複使用的元件和設計標記。
• 使用語意化的 HTML 和可訪問的互動模式。
• 在可能的情況下使用真實的專案資產；不要虛構推薦、客戶標誌、統計數據、獎項或產品功能。
• 謹慎選擇依賴項，避免不必要的套件。
• 確保連結、按鈕、表單、選單和其他控制項執行其預期動作。
• 保持響應式行為是刻意的，而不僅僅是縮小桌面版佈局。
• 優化圖片、字型和載入行為。

不要用靜態模型取代正在運作的應用程式。除非已經實作並測試過，否則不要聲稱某個整合或互動是有效的。

動態與滾動標準

全域平滑/緩動滾動

平滑、緩動的滾動是網站專案的預設偏好。

目標是讓移動感覺流暢、可控且自然：

• 在適當的地方使用平滑/緩動滾動。
• 調整緩動和持續時間，使頁面能響應使用者的輸入。
• 支援滑鼠滾輪、觸控板、鍵盤導航和觸控輸入。
• 保持錨點導航平滑，不會造成混亂的跳躍。
• 避免過度的平滑處理、人為延遲，或感到頁面與使用者輸入脫節。
• 保留預期的瀏覽器行為，避免不必要的滾動鎖定。
• 確保實作能與粘性元素、動態內容和路由變更配合使用。

在選擇實作之前，檢查現有的技術棧。像 Lenis 這樣的函式庫可能合適，但並非強制。當原生瀏覽器功能滿足設計和可及性要求時，優先使用。不要為了添加滾動函式庫而添加。

尊重 prefers-reduced-motion。提供減少動態的體驗，並確保核心內容和導航在沒有動畫的情況下仍然可用。

可選的章節特定滾動技術

在這些技術能改善敘事或理解時，選擇性地使用：

• 固定區塊： 在內容變化的同時，將一個區塊或視覺元素固定住。
• 滾動驅動動畫： 將動畫進度與滾動位置綁定。
• 粘性敘事： 在相關文字或數據變化時，保持視覺元素固定。
• 視差效果： 透過分層移動創造剋制的深度感。
• 水平序列： 在直覺的情況下，將垂直滾動映射到水平內容移動。
• 章節轉場： 用有目的的轉場連接場景或章節。
• 微互動： 為懸停、焦點、按壓和狀態變化提供響應式回饋。

不要將平滑滾動與劫持滾動混淆。

避免控制整個頁面的滾動行為。使用者絕不能感到被困住。保留直覺的滾動、鍵盤存取、觸控行為、瀏覽器歷史記錄，以及直接到達內容的能力。如果使用了固定或滾動控制的區塊，請提供合理的行動版和減少動態的替代方案。

動作品質

• 動態應傳達階層、狀態、連續性或品牌個性。
• 使用一致的時間和緩動。
• 避免為每個元素都加上動畫。
• 避免版面位移和阻礙閱讀或互動的動畫。
• 在適用的情況下，優先使用 transform 和 opacity 來實現高效效果。
• 如果動畫失敗或停用，保持核心內容可見且可用。

品質保證

不要在第一個實作完成後就結束。

當工具和環境允許時：

1. 使用現有腳本執行專案。
2. 在瀏覽器中檢查渲染的網站。
3. 審查所有相關頁面和重要狀態。
4. 測試桌面版、平板版和行動版視口尺寸。
5. 測試導航、連結、表單、選單和行動呼籲。
6. 使用滑鼠滾輪、觸控板、觸控和鍵盤測試平滑滾動。
7. 檢查固定區塊和滾動動畫是否有卡住、抖動或版面問題。
8. 檢查減少動態的行為。
9. 檢查主控台錯誤和失敗的網路資產。
10. 完善間距、字體排印、對齊、響應式版面與動態。

如果無法進行瀏覽器檢查或特定測試，請說明原因，而不是聲稱其通過。

完成定義

當以下條件滿足時，專案才算準備就緒：

• 其設計方向符合實際品牌和受眾。
• 視覺階層和內容流程清晰。
• 體驗在所有頁面和視口尺寸中連貫一致。
• 全域平滑/緩動滾動感覺精緻，且不會影響控制。
• 可選的動態技術增加了價值而非摩擦。
• 現有的基本功能保持完整。
• 互動元素按預期運作。
• 已考慮可及性和減少動態的行為。
• 已在可能的情況下執行並進行了視覺審查。
• 已知的限制已被揭露。

最終回覆

總結：

• 變更了什麼。
• 創意方向和關鍵設計決策。
• 重要的動態和滾動行為。
• 更新了哪些頁面或元件。
• 實際執行了哪些測試。
• 任何剩餘的問題或限制。

沒有證據的情況下，不要聲稱具有獲獎資格、完美品質或成功的測試。