5.7 KiB

Raw Permalink Blame History Unescape Escape

Assignment: 重新設計你的瀏覽器擴充功能

概覽

現在你已經建立了碳足跡瀏覽器擴充功能的 HTML 結構，是時候讓它在視覺上更具吸引力且更友善給使用者。優秀的設計能提升用戶體驗，使你的擴充功能更專業且更吸引人。

你的擴充功能附帶了基本的 CSS 樣式，但這次作業挑戰你創造一個獨特的視覺識別，反映你的個人風格，同時保持優秀的可用性。

指示

第 1 部分：分析目前設計

在進行更改之前，檢視現有的 CSS 結構：

定位擴充功能專案中的 CSS 檔案
檢閱目前的樣式方法和配色方案
找出佈局、排版和視覺層次的改進空間
考慮設計如何支持使用者目標（如輕鬆填寫表單及清晰呈現數據）

第 2 部分：設計你的自訂樣式

創建一套統一的視覺設計，包括：

配色方案：

選擇與環保主題相符的主色調
確保足夠的對比度以達成無障礙性（可使用 WebAIM 的對比度檢查工具）
考慮顏色會如何在不同瀏覽器主題下呈現

排版：

選取在小尺寸擴充功能顯示下仍可讀的字型
建立明確的層次結構，搭配適當字型大小和字重
確保文字在亮/暗瀏覽器主題下皆清晰可讀

佈局與間距：

改善表單元素與數據顯示的視覺組織
添加適當的內邊距與外邊距以提升易讀性
考量不同螢幕尺寸的響應式設計原則

第 3 部分：實作你的設計

修改 CSS 檔案以實現你的設計：

/* Example starting points for customization */

.form-data {
    /* Style the configuration form */
    background: /* your choice */;
    padding: /* your spacing */;
    border-radius: /* your preference */;
}

.result-container {
    /* Style the data display area */
    background: /* complementary color */;
    border: /* your border style */;
    margin: /* your spacing */;
}

/* Add your custom styles here */

主要需要設計的區域：

表單元素：輸入欄位、標籤及送出按鈕
結果顯示：資料容器、文字樣式和載入狀態
互動元件：滑鼠懸停效果、按鈕狀態和過渡動畫
整體佈局：容器間距、背景色及視覺層次

第 4 部分：測試與修正

使用 npm run build 建置你的擴充功能
載入更新後的擴充功能到瀏覽器
測試所有視覺狀態（表單輸入、載入、結果顯示、錯誤狀態）
使用瀏覽器開發者工具驗證無障礙性
根據實際使用狀況調整你的樣式

創意挑戰

基礎等級

更新顏色和字型，打造一致的主題
改善介面中的間距與排列
為互動元素加入細微的懸停效果

中階等級

設計自訂圖示或圖形作為擴充功能特色
實現不同狀態間的平滑過渡
創造專屬 API 呼叫的載入動畫

進階等級

設計多種主題選項（明亮/暗色/高對比）
實現對不同瀏覽器視窗大小的響應式設計
加入微互動功能，提升使用者體驗

提交準則

完成的作業應包含：

修改後的 CSS 檔案，呈現你的自訂樣式
截圖，顯示擴充功能於不同狀態（表單、載入、結果）
簡短描述（2-3 句），說明你的設計選擇及如何提升使用者體驗

評分標準

標準	優秀 (4)	良好 (3)	進階中 (2)	初學 (1)
視覺設計	創意且統一的設計，增強可用性並反映出強烈的設計原則	良好的設計選擇，有一致的樣式與清晰層次	基本設計改進但存在一致性問題	樣式變動很少或設計不一致
功能性	所有樣式在不同狀態及瀏覽器環境下均完美運作	樣式運作良好，邊緣情況有少許問題	大多數樣式可用但有些顯示錯誤	具重大樣式問題影響可用性
程式碼品質	CSS 清晰、組織良好，使用有意義的類別與高效選擇器	CSS 結構良好，適當使用選擇器與屬性	CSS 可接受但有些組織問題	CSS 結構不佳或樣式過於複雜
無障礙性	優秀的色彩對比、可讀字型，並考慮障礙使用者需求	良好無障礙實踐，有少數可改進之處	基本無障礙考量但有些問題	對無障礙需求注意有限

成功秘訣

💡 設計提示：從細微的更改開始，逐步建立更戲劇性的樣式。排版與間距的小改進往往對品質感受有很大影響。

最佳實務建議：

在明亮和暗色瀏覽器主題中測試擴充功能
使用相對單位（em, rem）以利擴展性
使用 CSS 自訂屬性維持一致的間距
考慮不同視覺需求使用者對設計的感受
驗證 CSS 語法正確無誤

⚠️ 常見錯誤：不要為了美觀犧牲可用性。你的擴充功能應該既美觀又實用。

切記：

保持重要資訊易於閱讀
確保按鈕和互動元素易於點擊
維持用戶操作的明確視覺反饋
用真實資料測試設計，而非僅用佔位文字

祝你成功打造一個功能強大且視覺驚艷的瀏覽器擴充功能！

免責聲明：
本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤釋負責。

5.7 KiB Raw Permalink Blame History Unescape Escape