|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
|
|
"translation_date": "2025-10-22T22:51:08+00:00",
|
|
|
"source_file": "7-bank-project/2-forms/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 使用現代 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 功能**，如網格、Flexbox 或 CSS 動畫
|
|
|
- **效能考量**，如優化 CSS 和最小化檔案大小
|
|
|
- **跨瀏覽器測試**，確保在不同瀏覽器上的相容性
|
|
|
|
|
|
> 💡 **專業提示**：先從行動裝置設計開始，然後再針對較大螢幕進行增強。這種行動優先的設計方法可確保您的應用程式在所有裝置上都能良好運作，並符合現代網頁開發的最佳實踐。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
