🃏 Card ไม่ได้มีไว้แค่โชว์ข้อมูล! รู้จัก 20 ประเภท Card ที่นิยมใช้ใน UX/UI

Card เป็นหนึ่งใน UI Component ที่ได้รับความนิยมมากที่สุด เพราะช่วยจัดกลุ่มข้อมูลให้เป็นระเบียบ อ่านง่าย และรองรับการใช้งานได้ทั้ง Web App, Mobile App และ Dashboard

หากเลือกใช้ Card ให้เหมาะกับประเภทข้อมูล จะช่วยให้ผู้ใช้ค้นหา เปรียบเทียบ และตัดสินใจได้เร็วขึ้น

💡 ผู้ใช้จะได้อะไร?

- ✅ เลือก Card ให้เหมาะกับแต่ละประเภทข้อมูล

- ✅ ออกแบบ UI ที่เป็นระเบียบและสวยงาม

- ✅ เพิ่มประสบการณ์ใช้งาน (UX)

- ✅ นำไปประยุกต์ใช้กับ Web App, Dashboard และ Mobile App ได้ทันที

🃏 20 ประเภท Card ที่นิยมใช้

1️⃣ Basic Card

Card พื้นฐานสำหรับแสดงข้อมูลทั่วไป

2️⃣ Image Card

เน้นรูปภาพเป็นหลัก เหมาะกับ Portfolio, Gallery หรือ Blog

3️⃣ Product Card

แสดงสินค้า เช่น รูป ราคา รีวิว และปุ่มซื้อ

4️⃣ Profile Card

ข้อมูลผู้ใช้ เช่น รูปโปรไฟล์ ชื่อ ตำแหน่ง และช่องทางติดต่อ

5️⃣ Dashboard Card (Statistic Card)

แสดง KPI, ตัวเลข หรือสถิติสำคัญ เช่น ยอดขาย ผู้ใช้งาน หรือรายได้

6️⃣ Feature Card

อธิบายฟีเจอร์หรือจุดเด่นของผลิตภัณฑ์

7️⃣ Pricing Card

แสดงแพ็กเกจ ราคา และสิทธิประโยชน์

8️⃣ Service Card

แสดงบริการของบริษัทหรือองค์กร

9️⃣ Team Card

แนะนำสมาชิกในทีม พร้อมตำแหน่งและข้อมูลสั้น ๆ

🔟 Article Card

แสดงบทความ พร้อมรูปภาพ หมวดหมู่ และวันที่เผยแพร่

1️⃣1️⃣ Course Card

แสดงคอร์สเรียน เช่น ผู้สอน ระยะเวลา และระดับความยาก

1️⃣2️⃣ Game Card

แสดงข้อมูลเกม เช่น ภาพปก ประเภทเกม และปุ่มเล่น

1️⃣3️⃣ Prompt Card

แสดง Prompt AI พร้อมปุ่ม Copy และหมวดหมู่

1️⃣4️⃣ Material Card

แสดงเอกสาร เช่น Worksheet, PDF หรือสื่อการสอน

1️⃣5️⃣ File Card

แสดงไฟล์ พร้อมประเภทไฟล์ ขนาด และปุ่มดาวน์โหลด

1️⃣6️⃣ Notification Card

แสดงการแจ้งเตือน พร้อมเวลาและสถานะการอ่าน

1️⃣7️⃣ Activity Card

แสดงกิจกรรมล่าสุด เช่น การแก้ไขไฟล์ การเข้าสู่ระบบ หรือประวัติการใช้งาน

1️⃣8️⃣ Social Card

แสดงโพสต์ รูปภาพ วิดีโอ พร้อมยอด Like และ Comment

1️⃣9️⃣ Expandable Card

แตะหรือคลิกเพื่อขยายรายละเอียดเพิ่มเติม โดยไม่เปลี่ยนหน้า

2️⃣0️⃣ Interactive Card

ทั้ง Card สามารถกดได้ รองรับ Hover, Ripple และ Animation เพื่อเพิ่มความลื่นไหลในการใช้งาน

🎨 UX/UI Best Practice

- ใช้ Visual Hierarchy จัดลำดับข้อมูล เช่น รูปภาพ → หัวข้อ → รายละเอียด → ปุ่ม Action

- จำกัดข้อมูลใน Card ให้กระชับ ไม่อัดแน่นจนอ่านยาก

- ใช้ Grid Layout และกำหนดระยะห่าง (Spacing) ให้สม่ำเสมอ

- ออกแบบให้รองรับ Responsive ทั้ง Desktop และ Mobile

- หาก Card กดได้ ควรมี Hover, Active และ Focus State เพื่อให้ผู้ใช้รับรู้ว่ามีการโต้ตอบ

- ใช้รูปภาพและไอคอนที่มีสัดส่วนสม่ำเสมอ เพื่อให้ทุก Card ดูเป็นระบบเดียวกัน

💬 คุณใช้ Card ประเภทไหนบ่อยที่สุดในโปรเจกต์ของคุณ? มีประเภทไหนที่คิดว่าน่าสนใจและอยากนำไปใช้บ้าง? มาแลกเปลี่ยนความคิดเห็นกันได้เลย!

#CreatifyX #UXUI #CardDesign #WebDesign #Dashboard

📌 ติดตาม CreatifyX

รวมเครื่องมือ AI • Digital • Graphic Design • Productivity ที่ใช้งานได้จริง อัปเดตทุกสัปดาห์ 🚀