|
|
# 使用現代 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 --> |
