6.4 KiB

Raw Blame History Unescape Escape

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

專案概述

將您的功能性銀行應用程式轉變為視覺吸引且專業的網頁應用程式，使用現代 CSS 技術。您將建立一個一致的設計系統，提升使用者體驗，同時維持無障礙與響應式設計原則。

此作業挑戰您應用當代網頁設計模式，實現一致的視覺識別，創造出吸引且直觀易用的使用者介面。

指示

第 1 步：設定您的樣式表

建立您的 CSS 基礎：

建立一個名為 styles.css 的新檔案於您的專案根目錄

在 index.html 文件中連結此樣式表：

<link rel="stylesheet" href="styles.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 組織

/* 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 與檔案大小
跨瀏覽器測試，確保各瀏覽器兼容性

💡 專家秘訣：先從行動裝置設計開始，再針對較大螢幕強化。此行動優先策略確保您的應用在所有裝置上良好運作，並符合現代網頁開發最佳實踐。

免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的來源。對於重要資訊，建議聘請專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯不承擔任何責任。

6.4 KiB Raw Blame History Unescape Escape