|
|
<!--
|
|
|
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) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
