6.2 KiB

Raw Permalink Blame History Unescape Escape

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

專案概覽

將您功能完善的銀行應用程式轉化為視覺上吸引、專業外觀的網頁應用程式，使用現代 CSS 技巧。您將建立一套一致的設計系統，提高使用者體驗，同時維持可及性與響應式設計原則。

此任務挑戰您應用當代網頁設計模式，實施一致的視覺識別，並打造用戶既喜愛又直覺易用的介面。

指示

第一步：設置您的樣式表

建立您的 CSS 基礎：

建立一個名為 styles.css 的新檔案於您的專案根目錄
在 index.html 檔案中連結此樣式表： ```html ```

開始使用 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 組織架構

/* 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) 方法確保您的應用程式在所有裝置上均良好運行，並遵循現代網頁開發最佳實踐。

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

6.2 KiB Raw Permalink Blame History Unescape Escape