TUHR Design Preview Gallery

เลือกสไตล์ดีไซน์
สำหรับระบบ TUHR

ตัวอย่างหน้าจอระบบ HRIS สำหรับมหาวิทยาลัยธรรมศาสตร์ จำนวน 7 สไตล์ พร้อม Style Guide ระบุสี ตัวอักษร และองค์ประกอบ UI ของแต่ละแบบ เพื่อใช้ประกอบการพิจารณาคัดเลือกแนวทางออกแบบ

7 สไตล์ดีไซน์
14 หน้าจอตัวอย่าง
โครงการ TUHR · มหาวิทยาลัยธรรมศาสตร์

สไตล์ 1 — ตัวเลือก Sidebar (สว่างขึ้น)

ปรับให้สว่างขึ้นจากเวอร์ชันเดิม · เลือกได้ 3 แบบ
UPDATE
ลูกค้าเลือก สไตล์ 1 — Modern Professional แล้ว แต่ขอให้ปรับ Sidebar ให้สว่างขึ้น เนื่องจากเวอร์ชันเดิมเข้มเกินไป ทีมงานจึงนำเสนอ 3 ทางเลือกดังนี้ (เนื้อหาส่วนอื่นยังคงเดิม)
1A Cloud · Pure White สีขาวสว่าง

Cloud — สีขาวสว่าง

Plain ColorWhiteMinimal

Sidebar สีขาวบริสุทธิ์ ตัวอักษรเทา-น้ำเงินเข้ม เมนูที่กำลังใช้งานเป็นพื้นฟ้าอ่อน (sky-50) พร้อมแถบสีฟ้าด้านซ้าย — สะอาด อ่านง่าย เป็นมืออาชีพแบบ Linear/Notion

ดูตัวอย่าง
1B Aurora · Soft Gradient เกรเดียนต์อ่อน

Aurora — เกรเดียนต์อ่อน

GradientSky → Lavender → BlushGlassy

Sidebar ไล่เฉดอ่อน ๆ จาก ฟ้า → ม่วงลาเวนเดอร์ → ชมพูอ่อน เมนูที่กำลังใช้งานเป็นการ์ดสีขาวกึ่งโปร่งแสง (frosted-glass) มีเงา — ดูทันสมัย มีบุคลิก แต่ยังคงสบายตา

ดูตัวอย่าง
1C Cerulean · Brand Tint ฟ้าอ่อนตามแบรนด์

Cerulean — สีฟ้าอ่อนตามแบรนด์

Plain ColorSky-100Brand

Sidebar สีฟ้าอ่อน (sky-100) ซึ่งเข้ากับสี Accent หลักของระบบ ตัวอักษรน้ำเงินเข้ม (sky-900) เมนูที่กำลังใช้งานเป็นการ์ดสีขาวที่มีเงาฟ้า — ให้ความรู้สึก "แบรนด์" ชัดเจน แต่ยังคงสบายตา

ดูตัวอย่าง

สไตล์ดีไซน์ทั้งหมด

คลิกการ์ดเพื่อชมตัวอย่าง