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

## 概覽

現在你已經建立了碳足跡瀏覽器擴充功能的 HTML 結構，是時候讓它變得更加美觀和易用。出色的設計能提升使用者體驗，使你的擴充功能顯得更專業、更吸引人。

你的擴充功能已附帶基本的 CSS 樣式，但此作業挑戰你創造獨特的視覺識別，反映你的個人風格，同時維持優良的使用性。

## 指示

### 第一部分：分析現有設計

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

1. **定位** 擴充功能專案中的 CSS 檔案
2. **檢閱** 目前的樣式方法與配色方案
3. **辨識** 版面、排版和視覺層次結構可改進之處
4. **考量** 設計如何支持使用者目標（輕鬆完成表單與清晰資料顯示）

### 第二部分：設計你的自訂風格

建立一個統一的視覺設計，其中包含：

**配色方案：**
- 選擇反映環保主題的主色調
- 確保足夠的對比度以符合可及性（可使用 WebAIM 的對比度檢查工具）
- 考慮不同瀏覽器主題下顏色的呈現效果

**排版：**
- 選擇在擴充功能小尺寸視窗下仍易讀的字型
- 建立明確的層次，設定合適的字體大小與字重
- 確保文字在明暗兩種瀏覽器主題中皆清晰可讀

**版面與間距：**
- 改善表單元素與資料呈現的視覺組織
- 加入適當內距與外距增進可讀性
- 考慮針對不同螢幕尺寸的響應式設計原則

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

修改 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 */
```

**主要樣式區域：**
- **表單元素**：輸入欄位、標籤與送出按鈕
- **結果顯示**：資料容器、文字樣式與載入狀態
- **互動元素**：滑鼠懸停效果、按鈕狀態與過渡動畫
- **整體版面**：容器間距、背景色彩與視覺層次

### 第四部分：測試與調整

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 -->