5.7 KiB

Raw Permalink Blame History Unescape Escape

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

概覽

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

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

指示

第一部分：分析現有設計

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

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

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

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

配色方案：

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

排版：

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

版面與間距：

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

第三部分：實作你的設計

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

主要樣式區域：

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

第四部分：測試與調整

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