|
|
# 使用現代 CSS 美化您的銀行應用程式
|
|
|
|
|
|
## 專案概述
|
|
|
|
|
|
將您的功能性銀行應用程式轉變為視覺吸引且專業的網頁應用程式，使用現代 CSS 技術。您將建立一個一致的設計系統，提升使用者體驗，同時維持無障礙與響應式設計原則。
|
|
|
|
|
|
此作業挑戰您應用當代網頁設計模式，實現一致的視覺識別，創造出吸引且直觀易用的使用者介面。
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
### 第 1 步：設定您的樣式表
|
|
|
|
|
|
**建立您的 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;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 第 2 步：設計系統需求
|
|
|
|
|
|
**實作以下核心設計元素：**
|
|
|
|
|
|
#### 色彩調色盤
|
|
|
- **主色調**：選擇專業色彩用於按鈕與重點標示
|
|
|
- **次色調**：互補色用於點綴和次要操作
|
|
|
- **中性色**：灰色用於文字、邊框和背景
|
|
|
- **成功/錯誤色彩**：綠色表示成功狀態，紅色表示錯誤
|
|
|
|
|
|
#### 字體排版
|
|
|
- **標題層級**：清楚區分 H1、H2 和 H3 元素
|
|
|
- **正文文字**：可讀字體大小（最小 16px）與適當行高
|
|
|
- **表單標籤**：清晰且易讀的文字樣式
|
|
|
|
|
|
#### 版面配置與間距
|
|
|
- **一致的間距**：使用間距刻度（8px、16px、24px、32px）
|
|
|
- **格線系統**：表單與內容區域的有序布局
|
|
|
- **響應式設計**：採用行動優先策略與斷點
|
|
|
|
|
|
### 第 3 步：組件樣式
|
|
|
|
|
|
**設計以下特定組件樣式：**
|
|
|
|
|
|
#### 表單
|
|
|
- **輸入欄位**：專業邊框、聚焦狀態與驗證樣式
|
|
|
- **按鈕**：滑鼠懸停效果、禁用狀態與載入指示
|
|
|
- **標籤**：清晰定位及必填欄位標示
|
|
|
- **錯誤訊息**：可見的錯誤樣式與友善提示
|
|
|
|
|
|
#### 導航
|
|
|
- **頁首**：簡潔且具有品牌風格的導航區域
|
|
|
- **連結**：清楚的懸停狀態與作用中指示
|
|
|
- **商標/標題**：獨特的品牌元素
|
|
|
|
|
|
#### 內容區域
|
|
|
- **區塊分隔**：不同區域間明確的視覺分隔
|
|
|
- **卡片**：若使用卡片式佈局，包含陰影與邊框
|
|
|
- **背景**：適度留白和細膩背景運用
|
|
|
|
|
|
### 第 4 步：進階功能（選擇性）
|
|
|
|
|
|
**可考慮實作以下進階功能：**
|
|
|
- **深色模式**：亮色與暗色主題切換
|
|
|
- **動畫效果**：細微的過渡與微互動
|
|
|
- **載入狀態**：表單提交時的視覺回饋
|
|
|
- **響應式圖片**：針對不同螢幕尺寸優化的圖片
|
|
|
|
|
|
## 設計靈感
|
|
|
|
|
|
**現代銀行應用程式特徵：**
|
|
|
- **乾淨、簡約設計**，大量留白
|
|
|
- **專業色彩方案**（藍色、綠色或高雅中性色）
|
|
|
- **清楚視覺層級**，具有醒目的動作呼籲按鈕
|
|
|
- **無障礙對比度** 符合 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 與檔案大小
|
|
|
- **跨瀏覽器測試**，確保各瀏覽器兼容性
|
|
|
|
|
|
> 💡 **專家秘訣**：先從行動裝置設計開始，再針對較大螢幕強化。此行動優先策略確保您的應用在所有裝置上良好運作，並符合現代網頁開發最佳實踐。
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的來源。對於重要資訊，建議聘請專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯不承擔任何責任。
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
