|
|
# 使用现代 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) |
|
|
|
|------------------|----------------------------|----------------------------|----------------------------|----------------------------|
|
|
|
| **设计系统** | 全面实现，颜色、排版及间距一致 | 使用一致样式，设计模式清晰，视觉层次良好 | 基础样式，存在一致性问题或缺失设计元素 | 样式极少，设计不一致或冲突 |
|
|
|
| **用户体验** | 创造直观专业界面，极佳可用性与美观性 | 提供良好用户体验，导航清晰，内容易读 | 基本可用，用户体验有待提升 | 可用性差，难以导航或阅读 |
|
|
|
| **技术实现** | 使用现代 CSS 技术，代码结构良好，符合最佳实践 | 有效实现 CSS，组织合理，技术适当 | CSS 功能正常，缺少组织或现代方法 | CSS 实现差，存在技术或浏览器兼容问题 |
|
|
|
| **响应式设计** | 设计完全响应，适用于所有设备尺寸 | 响应表现良好，部分屏幕尺寸有轻微问题 | 基础响应设计，存在部分布局问题 | 不响应或移动端存在明显问题 |
|
|
|
| **无障碍** | 遵循 WCAG 指南，键盘导航和屏幕阅读器支持优秀 | 良好无障碍实践，对比和焦点明显 | 基本考虑无障碍，部分元素缺失 | 无障碍差，残障用户难以使用 |
|
|
|
|
|
|
## 提交指南
|
|
|
|
|
|
**提交内容包括：**
|
|
|
- **styles.css**：完整样式表
|
|
|
- **更新后的 HTML**：所有修改的 HTML 文件
|
|
|
- **截图**：桌面及移动端设计效果图
|
|
|
- **README**：简述设计选择及配色方案
|
|
|
|
|
|
**加分项：**
|
|
|
- **CSS 自定义属性**，便于维护主题
|
|
|
- **高级 CSS 功能**，如 Grid、Flexbox 或 CSS 动画
|
|
|
- **性能考量**，如优化 CSS 及文件大小最小化
|
|
|
- **跨浏览器测试**，确保兼容多种浏览器
|
|
|
|
|
|
> 💡 **专业小贴士**：从移动端设计开始，再增强大屏体验。移动优先策略确保应用在所有设备上表现良好，并符合现代网页开发最佳实践。
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**免责声明**：
|
|
|
本文件由人工智能翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译。虽然我们力求准确，但请注意，自动翻译可能存在错误或不准确之处。应以原文作为权威来源。对于重要信息，建议采用专业人工翻译。因使用本翻译而产生的任何误解或误释，我们不承担任何责任。
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
