Design Guidelines
Wiki หน้านี้มีไว้เพื่อบันทึกหลักการต่างๆ ที่ใช้ในการออกแบบ UX/UI ของ CU Get Reg เวอร์ชั่นปัจจุบัน เพื่อช่วยรักษา consistency ในการออกแบบฟีเจอร์ใหม่ๆ ต่อไป รายละเอียดในไฟล์ Figma สามารถดูประกอบกับเนื้อหาใน Wiki นี้ได้
หลักการดีไซน์เพิ่มเติมสามารถศึกษาและอ้างอิงได้จาก Material Design ซึ่งเป็น Design System ที่ CU Get Reg ใช้อ้างอิงอยู่
ทั้งนี้ หลักการสามารถเปลี่ยนแปลงได้ตามเวลาและตามที่ทีมงานเห็นสมควร ถ้ามีการเปลี่ยนแปลงอะไรอย่าลืมบันทึกรายละเอียดและเหตุผลเอาไว้ด้วยนะ
- การใช้สีเพื่อสื่อความหมาย
-
ส่วนประกอบของ Component ต่างๆ
-
Card
- Course Card (Course Search Page)
- Sec Card (Course Detail Page)
- Selected Course Card (Course Schedule Page)
- Chip
-
Dialog/Modal
- Course Cart
- Search Filter (Mobile)
- Schedule
-
Card
- ระบบ Grid และ Spacing
- Clickability
CU Get Reg มีสี Accent/Highlight ทั้งหมด 9 สี ได้แก่
- Pink
- Red
- Orange
- Yellow (เป็นสี Secondary ด้วย)
- Green
- Teal
- Blue
- Indigo
- Purple
แต่ละสีมี 3 ระดับ คือ
- 300: Light Variant
- 500: Medium Variant
- 700: Dark Variant
ยกเว้นสี Yellow ที่มีการเลือกใช้ต่างออกไปเพื่อให้อ่านข้อความได้ ดังนี้
- 100: Light Variant
- 500: Medium Variant
- 900: Dark Variant
(อ้างอิงโค้ดสีจาก Figma เท่านั้น)
เป้าหมายของการ Color Code คือเพื่อให้กวาดตามองแล้วสามารถแยกแยะข้อมูลต่างๆ ได้รวดเร็วขึ้น
| หมวด | สี |
|---|---|
| วิทย์ (SC) | Yellow |
| สังคม (SO) | Green |
| มนุษย์ (HU) | Pink |
| สหฯ (IN) | Purple |
- GenEd Chip ใช้ที่ Card ต่างๆ, Course Cart เป็นต้น
- ที่
og:image(ภาพ Thumbnail ที่ปรากฎเมื่อแชร์ลิงก์ทางข้อความและสื่อโซเชียล) ของหน้า Course Detail - ในตารางเรียน วิชาที่เป็น GenEd จะมีสี default เป็นสีประจำหมวดนั้นๆ (ปัจจุบันผู้ใช้สามารถเปลี่ยนสีได้)
ใช้สีตามวันในสัปดาห์ของคนไทย
| หมวด | สี |
|---|---|
| จันทร์ | Yellow |
| อังคาร | Pink |
| พุธ | Green |
| พฤหัสบดี | Orange |
| ศุกร์ | Blue |
| เสาร์ | Purple |
| อาทิตย์ | Red |
- Day Chip ใช้ที่ Card ต่างๆ
- ที่
og:image(ภาพ Thumbnail ที่ปรากฎเมื่อแชร์ลิงก์ทางข้อความและสื่อโซเชียล) ของหน้า Course Detail
มี 9 สี ได้แก่สี Primary และ Highlight ทุกสียกเว้นสีแดง (ยกเว้นสีแดงไว้เพื่อไม่ให้สับสนกับ Error State) โดยเมื่อเลือกวิชาครั้งแรก ในกรณีที่ไม่ใช่ GenEd สีจะถูกสุ่มขึ้นจาก 9 สีดังกล่าว ในกรณี GenEd จะเป็นสีของหมวดนั้นๆ จากนั้นผู้ใช้จะสามารถเลือกสีใหม่ได้เอง
- ในตารางเรียนและตารางสอบ
ใช้ Red สำหรับแสดงข้อมูลเมื่อเกิดข้อผิดพลาด ไม่สำเร็จ ไม่อนุญาต เป็นต้น
ใช้ Blue สำหรับการแสดงข้อมูลที่เป็นการแจ้งให้ทราบ
- ใช้ Green กับข้อมูลและ action ในทาง Positive: การทำสำเร็จ ว่าง หรือการทำได้
- ใช้ Red กับข้อมูลและ action ในทาง Negative: การลบ การทำลาย เต็ม ปิด หรือการทำไม่ได้
- บนเว็บไซต์ ให้ใช้สี Secondary (Yellow) เป็นหลัก
- ในสื่อกราฟิก อาจพิจารณาใช้สีอื่นๆ เพื่อความสดใส ให้ตัดสินใจเป็นกรณีไป
บน Mobile จะเป็น Dialog
เป็น 8dp grid (Grid ที่ขนาดและการจัดวางทุกอย่างเป็นพหุคูณของ 8dp/px) แบบไม่เคร่งมากนัก เนื้อความใน Card หรือ Component ต่างๆ อาจไม่ตรง Grid ได้
- 12 column grid
- Gutter (ระยะระหว่างคอลัมน์) 32px
- Margin (ระยะซ้ายขวาข้างๆ คอลัมน์) 216px
- 12 Column Grid
- Gutter (ระยะระหว่างคอลัมน์) 8px
- Margin (ระยะซ้ายขวาข้างๆ คอลัมน์) 16px
- Horizontal padding 32px
- Vertical padding 24px / 32px
- Horizontal padding 24px
- Vertical padding 32px (Desktop) / 16px (Mobile)
- บริเวณที่กดได้ (Touch target) ควรมีขนาดอย่างน้อย 48px x 48px เพื่อให้นิ้วสามารถกดได้บน Mobile
- ทุกสิ่งที่กดได้ควรจะต้องมี Hover state เสมอ