<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "b6897c02603d0045dd6d8256e8714baa",
  "translation_date": "2025-10-22T22:57:49+00:00",
  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
  "language_code": "mo"
}
-->
# 作業：重新設計您的瀏覽器擴充功能

## 概述

現在您已經完成了碳足跡瀏覽器擴充功能的 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，確保語法正確

> ⚠️ **常見錯誤**：不要為了視覺吸引力而犧牲可用性。您的擴充功能應該既美觀又實用。

**請記住：**
- **保持**重要信息易於閱讀
- **確保**按鈕和互動元素易於點擊
- **維持**清晰的視覺反饋以反映使用者操作
- **使用真實數據測試**您的設計，而不僅僅是佔位文字

祝您成功創建一個既功能強大又視覺驚艷的瀏覽器擴充功能！

---

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。