17 KiB

Raw Blame History

สไตล์แอปธนาคารของคุณด้วย 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 custom properties สำหรับการจัดการธีมที่ง่าย
ฟีเจอร์ CSS ขั้นสูง เช่น Grid, Flexbox หรือแอนิเมชัน CSS
การพิจารณาประสิทธิภาพ เช่น CSS ที่ปรับให้เหมาะสมและขนาดไฟล์ที่เล็กที่สุด
การทดสอบข้ามเบราว์เซอร์ เพื่อให้แน่ใจว่าความเข้ากันได้ในเบราว์เซอร์ต่างๆ

💡 เคล็ดลับมือโปร: เริ่มต้นด้วยการออกแบบสำหรับมือถือก่อน จากนั้นจึงปรับปรุงสำหรับหน้าจอที่ใหญ่ขึ้น วิธีการที่เน้นมือถือเป็นหลักนี้ช่วยให้แอปของคุณทำงานได้ดีบนทุกอุปกรณ์และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บสมัยใหม่

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

17 KiB Raw Blame History