STYLE 6

ธรรมชาติ

ดีไซน์ที่ได้แรงบันดาลใจจากธรรมชาติ ใช้โทนสีเขียวป่าและมิ้นท์ รูปทรงออร์แกนิก สร้างบรรยากาศผ่อนคลาย เหมาะสำหรับองค์กรที่เน้นสุขภาวะและความยั่งยืน

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

หลักการและปรัชญาของดีไซน์สไตล์นี้

🌿

ธรรมชาตินำทาง (Nature-Inspired)

ใช้สีสันและรูปทรงจากธรรมชาติ เช่น สีเขียวป่า สีมิ้นท์ รูปทรงออร์แกนิก สร้างความรู้สึกสดชื่นและเป็นมิตร

🍃

รูปทรงออร์แกนิก (Organic Shapes)

มุมโค้งมนที่ไม่สม่ำเสมอ (blob shapes) ให้ความรู้สึกนุ่มนวล ไม่เหลี่ยมตึง แตกต่างจากดีไซน์ทั่วไป

🌱

สุขภาวะ (Wellness)

สีเขียวและมิ้นท์ช่วยลดความเครียด พื้นหลังสีอ่อนสบายตา ลดความเหนื่อยล้าจากการใช้งานต่อเนื่อง

💧

ความสงบ (Calm & Serene)

การเคลื่อนไหวเบาๆ อนิเมชันที่นุ่มนวล ช่วยสร้างบรรยากาศที่ผ่อนคลายและไม่เร่งรีบ

ชุดสี (Color Palette)

สีหลักและสีรองที่ใช้ในระบบ ได้แรงบันดาลใจจากป่าเขียวและธรรมชาติ

Forest
เขียวป่า (Forest)
#1a3c34
Sidebar, พื้นหลังส่วน Header หลัก
Forest Deep
เขียวเข้ม (Forest Deep)
#0f2922
Gradient สำหรับ Sidebar, ข้อความบนพื้นเข้ม
Teal
เขียวอมฟ้า (Teal)
#0d9488
ปุ่มหลัก, ลิงก์, ไอคอนสำคัญ, Focus state
Teal Light
เขียวอมฟ้าอ่อน (Teal Light)
#14b8a6
Active state, ไฮไลท์สำคัญ
Emerald
มรกต (Emerald)
#059669
สถานะสำเร็จ, ปุ่ม Gradient คู่กับ Teal
Amber
อำพัน (Amber)
#f59e0b
แจ้งเตือน, รอดำเนินการ, Notification dot
Danger
อันตราย (Danger)
#ef4444
ข้อผิดพลาด, การลบ, ปฏิเสธ
Sage / Mint BG
พื้นหลังมิ้นท์ (Sage/Mint)
#f0fdf4 / #ecfdf5 / #ccfbf1
พื้นหลังหน้าเว็บ, พื้นหลังอ่อน, Ghost tint
Border
เส้นขอบ (Border)
#d1e7dd / #c6e7d9
ขอบการ์ด, เส้นแบ่ง, กรอบฟอร์ม

ตัวอักษร (Typography)

ฟอนต์และขนาดตัวอักษรที่ใช้ในระบบ

Font Family
Noto Sans Thai
Google Fonts - รองรับภาษาไทยและอังกฤษ น้ำหนักเบา อ่านง่าย
หัวข้อหลัก (H1)
แดชบอร์ดบริหารทรัพยากรบุคคล
26px / Bold (700) / Color: #1a2e2a
หัวข้อรอง (H2)
รายการบุคลากรล่าสุด
20px / Semi-bold (600) / Color: #1a2e2a
หัวข้อย่อย (H3)
ข้อมูลทั่วไป
16px / Semi-bold (600) / Color: #1a2e2a
ข้อความปกติ (Body)
ยินดีต้อนรับกลับมา! นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
14px / Regular (400) / Line-height: 1.6 / Color: #1a2e2a
ข้อความรอง (Secondary)
แสดง 10 รายการจากทั้งหมด 156 รายการ
14px / Regular (400) / Color: #4a6b63
ข้อความเล็ก (Small)
อัปเดตล่าสุด: 5 นาทีที่แล้ว
12px / Regular (400) / Color: #7a9e94

ปุ่ม (Buttons)

รูปแบบปุ่มต่างๆ ที่ใช้ในระบบ ใช้ Gradient จากธรรมชาติ

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

สถานะ (Status Badges)

ป้ายแสดงสถานะต่างๆ มุมโค้งมนแบบ Pill

อนุมัติแล้ว รอดำเนินการ ปฏิเสธ กำลังดำเนินการ

ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มต่างๆ มี Focus ring สีเขียวมิ้นท์

การ์ด (Cards)

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

👥
8,547
บุคลากรทั้งหมด
รายการล่าสุด ดูทั้งหมด →

เนื้อหาของการ์ดจะแสดงที่นี่ การ์ดมี hover effect ที่ยกขึ้นเล็กน้อยพร้อมเงาธรรมชาติ

ระยะห่าง (Spacing)

ระบบระยะห่างที่ใช้ในการออกแบบ

8px
12px
16px
24px
32px
48px

มุมโค้ง (Border Radius)

ระดับความโค้งมนของมุม รวมถึง Organic radius ที่เป็นเอกลักษณ์

6px
Small
10px
ปุ่ม, Input
16px
การ์ด
24px
การ์ดใหญ่
Organic
Logo, Avatar

เงา (Shadows)

ระดับเงาที่ใช้สร้างความลึก โทนเขียวเข้มอ่อนๆ

Small
เงาเบา
Medium
เงาปกติ
Large
เงา Hover
Glow
เงาเรืองแสง

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

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

✅ จุดเด่น

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

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

  • อาจดูไม่เป็นทางการสำหรับหน่วยงานราชการบางแห่ง
  • รูปทรงออร์แกนิกอาจไม่เหมาะกับทุกบริบท
  • โทนสีเขียวอาจไม่ตรงกับเอกลักษณ์บางองค์กร
  • ต้องการการ Maintain ที่ละเอียดเรื่อง Animation
  • ขนาดหน้าจอเล็กอาจทำให้ Organic shapes ดูไม่ชัดเจน

เหมาะสำหรับ