You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
17 KiB
166 lines
17 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
|
"translation_date": "2025-10-23T21:14:54+00:00",
|
|
"source_file": "7-bank-project/2-forms/assignment.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# สไตล์แอปธนาคารของคุณด้วย 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 custom properties** สำหรับการจัดการธีมที่ง่าย
|
|
- **ฟีเจอร์ CSS ขั้นสูง** เช่น Grid, Flexbox หรือแอนิเมชัน CSS
|
|
- **การพิจารณาประสิทธิภาพ** เช่น CSS ที่ปรับให้เหมาะสมและขนาดไฟล์ที่เล็กที่สุด
|
|
- **การทดสอบข้ามเบราว์เซอร์** เพื่อให้แน่ใจว่าความเข้ากันได้ในเบราว์เซอร์ต่างๆ
|
|
|
|
> 💡 **เคล็ดลับมือโปร**: เริ่มต้นด้วยการออกแบบสำหรับมือถือก่อน จากนั้นจึงปรับปรุงสำหรับหน้าจอที่ใหญ่ขึ้น วิธีการที่เน้นมือถือเป็นหลักนี้ช่วยให้แอปของคุณทำงานได้ดีบนทุกอุปกรณ์และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บสมัยใหม่
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |