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

## 概覽

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

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

## 指示

### 第 1 部分：分析目前設計

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

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

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

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

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

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

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

### 第 3 部分：實作你的設計

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

```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 部分：測試與修正

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

## 創意挑戰

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

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

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

## 提交準則

完成的作業應包含：

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

## 評分標準

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

## 成功秘訣

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

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

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

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

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

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：  
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->