Design Guidelines

Wiki หน้านี้มีไว้เพื่อบันทึกหลักการต่างๆ ที่ใช้ในการออกแบบ UX/UI ของ CU Get Reg เวอร์ชั่นปัจจุบัน เพื่อช่วยรักษา consistency ในการออกแบบฟีเจอร์ใหม่ๆ ต่อไป รายละเอียดในไฟล์ Figma สามารถดูประกอบกับเนื้อหาใน Wiki นี้ได้

หลักการดีไซน์เพิ่มเติมสามารถศึกษาและอ้างอิงได้จาก Material Design ซึ่งเป็น Design System ที่ CU Get Reg ใช้อ้างอิงอยู่

ทั้งนี้ หลักการสามารถเปลี่ยนแปลงได้ตามเวลาและตามที่ทีมงานเห็นสมควร ถ้ามีการเปลี่ยนแปลงอะไรอย่าลืมบันทึกรายละเอียดและเหตุผลเอาไว้ด้วยนะ

Table of Contents

• การใช้สีเพื่อสื่อความหมาย
  • การใช้สีเพื่อ Color Code
    • หมวดวิชา GenEd
    • วันในสัปดาห์
    • สีประจำวิชา
  • การใช้สีเพื่อบอกข้อมูล
    • Error
    • Info
    • Positive & Negative
• ส่วนประกอบของ Component ต่างๆ
  • Card
    • Course Card (Course Search Page)
    • Sec Card (Course Detail Page)
    • Selected Course Card (Course Schedule Page)
  • Chip
    • Outlined
    • Filled
  • Dialog/Modal
    • Course Cart
    • Search Filter (Mobile)
  • Schedule
    • Subject in Schedule
    • Exam Card
• ระบบ Grid และ Spacing
  • Desktop Layout
  • Mobile Layout
  • Card Padding
  • Dialog Padding
• 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

เป้าหมายของการ Color Code คือเพื่อให้กวาดตามองแล้วสามารถแยกแยะข้อมูลต่างๆ ได้รวดเร็วขึ้น

หมวดวิชา GenEd

หมวด	สี
วิทย์ (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 จะเป็นสีของหมวดนั้นๆ จากนั้นผู้ใช้จะสามารถเลือกสีใหม่ได้เอง

ตัวอย่างการใช้สี

• ในตารางเรียนและตารางสอบ

การใช้สีเพื่อบอกข้อมูล

Error

ใช้ Red สำหรับแสดงข้อมูลเมื่อเกิดข้อผิดพลาด ไม่สำเร็จ ไม่อนุญาต เป็นต้น

ตัวอย่างการใช้สี

Info

ใช้ Blue สำหรับการแสดงข้อมูลที่เป็นการแจ้งให้ทราบ

ตัวอย่างการใช้สี

Positive & Negative

• ใช้ Green กับข้อมูลและ action ในทาง Positive: การทำสำเร็จ ว่าง หรือการทำได้
• ใช้ Red กับข้อมูลและ action ในทาง Negative: การลบ การทำลาย เต็ม ปิด หรือการทำไม่ได้

ตัวอย่างการใช้สี

การใช้สี Accent โดยที่ไม่ได้ต้องการสื่อความหมายใดเป็นพิเศษ

• บนเว็บไซต์ ให้ใช้สี Secondary (Yellow) เป็นหลัก
• ในสื่อกราฟิก อาจพิจารณาใช้สีอื่นๆ เพื่อความสดใส ให้ตัดสินใจเป็นกรณีไป

ส่วนประกอบของ Component ต่างๆ

Card

Course Card

Sec Card

Selected Course Card

Chip

Outlined

Filled

Dialog

Course Cart

Search Filter

บน Mobile จะเป็น Dialog

Schedule

Subject in Schedule

Exam Card

ระบบ Grid และ Spacing

เป็น 8dp grid (Grid ที่ขนาดและการจัดวางทุกอย่างเป็นพหุคูณของ 8dp/px) แบบไม่เคร่งมากนัก เนื้อความใน Card หรือ Component ต่างๆ อาจไม่ตรง Grid ได้

Desktop Layout

• 12 column grid
• Gutter (ระยะระหว่างคอลัมน์) 32px
• Margin (ระยะซ้ายขวาข้างๆ คอลัมน์) 216px

Mobile Layout

• 12 Column Grid
• Gutter (ระยะระหว่างคอลัมน์) 8px
• Margin (ระยะซ้ายขวาข้างๆ คอลัมน์) 16px

Card Padding

• Horizontal padding 32px
• Vertical padding 24px / 32px

Dialog Padding

• Horizontal padding 24px
• Vertical padding 32px (Desktop) / 16px (Mobile)

Clickability

• บริเวณที่กดได้ (Touch target) ควรมีขนาดอย่างน้อย 48px x 48px เพื่อให้นิ้วสามารถกดได้บน Mobile
• ทุกสิ่งที่กดได้ควรจะต้องมี Hover state เสมอ