Style 3

สไตล์วิชาการมหาวิทยาลัย

ดีไซน์ที่สะท้อนความเป็นสถาบันการศึกษาชั้นนำ ผสมผสานความคลาสสิกของสถาบันวิชาการกับความทันสมัย ใช้สีแดงธรรมศาสตร์และสีทองเป็นหลัก เหมาะสำหรับมหาวิทยาลัยและสถาบันการศึกษา

school แนวคิดการออกแบบ

หลักการออกแบบที่ผสมผสานความเป็นวิชาการกับความทันสมัย

auto_stories

Scholarly Elegance

ใช้ฟอนต์ Serif สำหรับหัวข้อเพื่อสร้างความรู้สึกวิชาการและน่าเชื่อถือ เหมือนหนังสือตำราและเอกสารวิชาการ

palette

TU Brand Colors

สีแดงธรรมศาสตร์และสีทองเป็นสีประจำมหาวิทยาลัย สร้างเอกลักษณ์ที่ชัดเจนและจดจำได้ง่าย

light_mode

Warm & Inviting

พื้นหลังสีครีมอบอุ่นเหมือนกระดาษหนังสือ สร้างบรรยากาศที่เป็นมิตรและสบายตา

verified

Professional Trust

การออกแบบที่ดูน่าเชื่อถือ เหมาะสำหรับระบบงานที่ต้องการความน่าเชื่อถือสูง

palette ชุดสี (Color Palette)

สีประจำมหาวิทยาลัยธรรมศาสตร์และสีเสริม

สีหลัก (Primary Colors)
TU Red
แดงธรรมศาสตร์ (TU Red)
#8B0000
Sidebar, ปุ่มหลัก, ไฮไลท์สำคัญ
TU Gold
ทองธรรมศาสตร์ (TU Gold)
#C9A227
เส้นตกแต่ง, Badge, ปุ่มรอง
Parchment
สีกระดาษ (Parchment)
#FAF8F5
พื้นหลังหลัก
สีเสริม (Secondary Colors)
Library Blue
น้ำเงินห้องสมุด
#1E3A5F
ข้อมูล, ลิงก์
Forest
เขียวป่า (Forest)
#355E3B
สถานะสำเร็จ, ปฏิบัติงาน
Ink
สีหมึก (Ink)
#2C1810
ข้อความหลัก

text_fields ตัวอักษร (Typography)

ระบบฟอนต์ที่ผสมผสานความคลาสสิกกับความทันสมัย

Display Font (หัวข้อ)
Crimson Pro
ฟอนต์ Serif สำหรับหัวข้อหลัก - ดูคลาสสิกและวิชาการ
Thai Display (หัวข้อไทย)
Noto Serif Thai
ฟอนต์ไทย Serif สำหรับหัวข้อภาษาไทย
Body Font (เนื้อหา)
Source Sans 3
ฟอนต์ Sans-serif สำหรับเนื้อหา - อ่านง่าย
Thai Body (เนื้อหาไทย)
Kanit
ฟอนต์ไทยสำหรับเนื้อหาทั่วไป
หัวข้อหน้า (Page Title)
แดชบอร์ดบริหารงานบุคคล
Crimson Pro / 32px / Semi-bold (600)
หัวข้อรอง (Section Title)
ความเคลื่อนไหวบุคลากรล่าสุด
Crimson Pro / 18px / Semi-bold (600)
ข้อความหลัก (Body)
ยินดีต้อนรับกลับมา ดร.สมชาย นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
Source Sans 3 / 15px / Regular (400) / Line-height: 1.6
Label (ป้ายกำกับ)
เมนูหลัก
10px / Bold (600) / Uppercase / Letter-spacing: 1.5px

smart_button ปุ่ม (Buttons)

รูปแบบปุ่มสำหรับการดำเนินการต่างๆ

ปุ่มหลัก (Primary Actions)
ปุ่มรอง (Secondary Actions)

label สถานะ (Status Badges)

ป้ายแสดงสถานะของบุคลากรและการดำเนินการ

check_circle ปฏิบัติงาน schedule รอดำเนินการ event เกษียณ info กำลังดำเนินการ

dashboard การ์ด (Cards)

รูปแบบการ์ดที่ใช้แสดงข้อมูล

groups
3,847
บุคลากรทั้งหมด
school
1,245
สายวิชาการ
badge รายการล่าสุด ดูทั้งหมด

การ์ดมีเงาอ่อนๆ และ hover effect ที่ยกขึ้น สร้างความรู้สึกเหมือนหนังสือบนโต๊ะ

edit_note ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มสำหรับการกรอกข้อมูล

layers เงาและความลึก (Shadows)

ระดับเงาที่สร้างความลึกให้กับองค์ประกอบ

Book Shadow
เงาปกติ
Elevated
เงา Hover

category ไอคอน (Icons)

ใช้ Material Icons Outlined สำหรับไอคอนทั้งหมด

dashboard
dashboard
badge
badge
school
school
payments
payments
military_tech
military_tech
analytics
analytics

compare ข้อดี-ข้อควรพิจารณา

สรุปจุดเด่นและข้อควรพิจารณาของสไตล์วิชาการ

จุดเด่น

  • สะท้อนความเป็นสถาบันการศึกษาชั้นนำ
  • ใช้สีประจำมหาวิทยาลัยธรรมศาสตร์
  • ดูคลาสสิก น่าเชื่อถือ แต่ยังทันสมัย
  • ฟอนต์ Serif สร้างความรู้สึกวิชาการ
  • พื้นหลังสีครีมสบายตา ใช้งานได้นาน
  • มีระบบองค์ประกอบครบถ้วน
  • เหมาะกับการแสดงข้อมูลเชิงวิชาการ

ข้อควรพิจารณา

  • อาจเฉพาะเจาะจงเกินไปสำหรับบางหน่วยงาน
  • ต้องโหลดฟอนต์หลายตัว
  • การใช้สีแดงเข้มต้องระวังเรื่อง Accessibility
  • อาจต้องปรับสีถ้าใช้กับมหาวิทยาลัยอื่น

recommend เหมาะสำหรับ