<!--
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้