# 使用現代 CSS 美化您的銀行應用程式

## 專案概覽

將您功能完善的銀行應用程式轉化為視覺上吸引、專業外觀的網頁應用程式，使用現代 CSS 技巧。您將建立一套一致的設計系統，提高使用者體驗，同時維持可及性與響應式設計原則。

此任務挑戰您應用當代網頁設計模式，實施一致的視覺識別，並打造用戶既喜愛又直覺易用的介面。

## 指示

### 第一步：設置您的樣式表

**建立您的 CSS 基礎：**

1. **建立** 一個名為 `styles.css` 的新檔案於您的專案根目錄
2. **在** `index.html` 檔案中連結此樣式表：   ```html
   <link rel="stylesheet" href="styles.css">
   ```
3. **開始** 使用 CSS 重設與現代預設值：
   ```css
   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   ```

### 第二步：設計系統需求

**實作這些基本設計元素：**

#### 顏色調色盤
- **主色**：選擇專業的顏色用於按鈕和重點元素
- **次要色**：用於強調及次要動作的互補色
- **中性色**：用於文字、邊框及背景的灰色系
- **成功/錯誤色**：成功狀態使用綠色，錯誤狀態使用紅色

#### 排版
- **標題階層**：清晰分辨 H1、H2 及 H3 元素
- **正文字體**：易讀字體大小（最小 16px）及適當行高
- **表單標籤**：清晰且可及的文字樣式

#### 版面配置與間距
- **一致間距**：使用間距刻度（8px、16px、24px、32px）
- **格線系統**：有組織的表單及內容區塊佈局
- **響應式設計**：以行動裝置為起點的斷點設計

### 第三步：元件樣式

**為這些特定元件設計樣式：**

#### 表單
- **輸入欄位**：專業邊框、聚焦狀態與驗證樣式
- **按鈕**：懸停效果、禁用狀態及載入指示
- **標籤**：清楚定位及必填欄位指示
- **錯誤訊息**：顯著錯誤樣式與有用的提示訊息

#### 導航
- **頁首**：乾淨且具品牌識別的導航區域
- **連結**：明顯的懸停狀態與啟用指示
- **標誌/標題**：具特色的品牌元素

#### 內容區域
- **區塊**：不同區域間清晰的視覺分隔
- **卡片**：若使用卡片式佈局，包含陰影及邊框
- **背景**：適當運用空白及細膩背景

### 第四步：進階功能（選擇性）

**考慮實作這些高級功能：**
- **暗模式**：可在亮/暗主題間切換
- **動畫**：細緻過渡與微互動效果
- **載入狀態**：表單提交時的視覺反饋
- **響應式圖片**：針對不同螢幕尺寸做優化的圖片

## 設計靈感

**現代銀行應用特色：**
- **乾淨、極簡設計**搭配豐富的空白
- **專業色彩方案**（藍色、綠色或精緻的中性色）
- **明確視覺階層**與顯著的行動呼籲按鈕
- **達到 WCAG 準則的可及對比**
- **適用所有裝置的響應式佈局**

## 技術需求

### CSS 組織架構
```css
/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */
```

### 可及性需求
- **色彩對比**：確保普通文字至少有 4.5:1 對比度
- **聚焦指標**：鍵盤導覽可見的聚焦狀態
- **表單標籤**：正確與輸入欄位關聯
- **響應式設計**：適用寬度從 320px 至 1920px 的螢幕

## 評分標準

| 評分標準 | 優秀 (A) | 稱職 (B) | 有待發展 (C) | 需改進 (F) |
|----------|----------|----------|--------------|------------|
| **設計系統** | 實施完整設計系統，色彩、排版與間距一致 | 使用一致樣式，有明確設計模式及良好視覺階層 | 基本樣式，有些一致性問題或設計元素缺失 | 樣式極少且不一致，設計衝突 |
| **使用者體驗** | 建立直覺、專業介面，具優異可用性與視覺吸引力 | 提供良好體驗，導航清楚，內容易讀 | 基本可用，需加強 UX | 可用性差，難以導航或閱讀 |
| **技術實作** | 使用現代 CSS 技巧，程式結構有組織，遵守最佳實踐 | 有效運用 CSS，組織良好且技術適當 | CSS 正常運作，但組織或現代技術不足 | CSS 實作差，含技術問題或瀏覽器相容性問題 |
| **響應式設計** | 完全響應，適用所有裝置尺寸且效果優良 | 響應良好，部分畫面大小有輕微問題 | 基本響應，部分佈局存在問題 | 無響應或行動裝置嚴重問題 |
| **可及性** | 達 WCAG 標準，具優秀鍵盤導覽及讀屏支援 | 良好可及性，對比及聚焦指標適當 | 基本可及性考量，有少部分缺失 | 可及性差，行動不便使用者難以使用 |

## 提交指南

**提交內容包含：**
- **styles.css**：您的完整樣式表
- **更新後的 HTML**：您所修改的任何 HTML 檔
- **截圖**：展示桌面與行動裝置上設計的圖片
- **README**：簡述您的設計選擇與色彩調色盤

**加分項目：**
- **CSS 自訂屬性**，以維持可維護的主題化
- **進階 CSS 功能**，如 Grid、Flexbox 或 CSS 動畫
- **效能考量**，如優化 CSS 與檔案大小
- **跨瀏覽器測試**，確保不同瀏覽器相容性

> 💡 **專家提示**：先從行動裝置設計開始，再為大螢幕增強功能。此行動優先 (mobile-first) 方法確保您的應用程式在所有裝置上均良好運行，並遵循現代網頁開發最佳實踐。

---

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