Card UI มีมานานแล้ว ?
Card UI นั้นมีมานานและปรับใช้งานกับเว็บไซต์หลายเว็บมาเป็นเวลานานหลายปีมาแล้ว แต่ตลอดระยะเวลาที่ผ่านมานั้นยังเป็น UI ก็ยังได้รับความนิยมใช้งานบนเว็บไซต์ทั้งเล็กและใหญ่มากมาย เชื่อว่าในแต่ละวันทุกคนจะเห็นเว็บไซต์ที่ออกแบบโดยใช้ Card ผ่านตากันมากมายโดยที่เราไม่รู้ตัวอย่างแน่นอน

เว็บไซต์หลายเว็บที่กล่าวถึงและใช้การออกแบบ User Interface แบบ Card ก็มีทั้ง Facebook Pinterest และอีกหลายเว็บไซต์ที่เลือกหยิบมาใช้งาน
User Interface (UI) คือ

ก่อนจะรู้จักกับ Card เรามาทำความเข้าใจกับคำว่า User Interface หรือที่เรียกกันแบบสั้นๆ ว่า UI กันก่อนดีกว่า สำหรับ UI นั้นความหมายของมันคือ ส่วนต่อประสานกับผู้ใช้หมายถึงสิ่งที่มีเอาไว้ให้ผู้ใช้งานกระทำกับระบบ เครื่องจักรที่อาจจะเป็นคอมพิวเตอร์ก็ได้ เครื่องจักรก็ดีหรืออุปกรณ์เครื่องใช้ไฟฟ้า ลองอ่าน 3 เทคนิค ช่วยกราฟิกดีไซน์เนอร์ ออกแบบ UI & UX DESIGN ให้โดนใจผู้ใช้ เพื่อดูเทคนิคการทำได้เพิ่มเติม หรือถ้าใครนำมาผสมกับ FLAT DESIGN เรียนรู้วิธีออกแบบสไตล์เรียบง่ายที่ไม่มีวันตาย ได้ก็จะมีความเรียบง่ายของข้อมูลมากขึ้น
แล้ว Card UI ละ ?
ก็คือการออกแบบ UI ในรูปแบบหนึ่งที่นำเอาลักษณะของบัตรมาใช้งานนั้นเอง ซึ่งสิ่งที่เราหยิบจากบัตรมาใช้งานก็มีหลายส่วน
- บัตรมีข้อมูลแตกต่างกัน
- บัตรแสดงข้อมูลบนพื้นที่จำกัด
ด้วยข้อดีของบัตรที่มีทำให้การจัดเรียงข้อมูลแบบบัตรนั้นทำให้ผู้ใช้งาน ใช้งานระบบของเราได้ง่ายขึ้นเนื่องจากมีการจัดวางข้อมูลเป็นกลุ่มก้อนไม่จำเป็นจะต้องกวาดสายตาไปมาก็ได้รับข้อมูลสำคัญได้อย่างครบถ้วนนั้นเอง

ตัวอย่าง UI ที่เกี่ยวกับการเข้าสู่ระบบ ในพื้นที่สีเท่าเปรียบเสมือนบัตร 1 ใบที่มีเฉพาะข้อมูลการเข้าสู่ระบบแสดงผลอยู่ ทำให้ผู้ใช้งานสามารถโฟกัสเฉพาะสิ่งที่กำลังปฏิสัมพันธ์อยู่ได้ โดยที่ไม่ต้องกวาดสายตาไปมาเพื่อจะเข้าสู่ระบบ
วิธีใช้ Card UI
วิธีใช้งานเจ้า UI ตัวนี้เราสามารถนำมาปรับใช้ได้หลากหลายรูปแบบมากไม่ว่าจะเป็นเว็บไซต์ชนิดไหนก็นำมาใช้งานได้ทั้งหมด ขั้นตอนสำคัญคือการจัดวางข้อมูลให้แยกออกเป็นกลุ่มๆ

Awwwards

เว็บไซต์ที่นักออกแบบเว็บไซต์ทุกคนจะต้องเคยเข้าไปดูอย่างเว็บ Awwwards ก็ออกแบบเว็บไซต์มาในรูปแบบของ Card ได้อย่างลงตัว มีการจัดเรียงข้อมูลได้เรียบง่าย ข้อมูลบนหน้าเว็บที่เป็นรายละเอียดของเว็บไซต์แต่ละเว็บที่มี
- รูปภาพ
- ชื่อเว็บไซต์
- เว็บไซต์โดยใคร
- วันที่
- User ที่มีการ Active
ข้อมูลทั้งหมดถูกจัดเรียงลงบนบัตรแต่ละใบได้อย่างเรียบง่าย ตามที่เคยกล่าวว่าบัตรมีข้อมูลแตกต่างกันและบัตรแสดงข้อมูลบนพื้นที่จำกัด ซึ่งก็คือข้อมูลเว็บไซต์ในแต่ละเว็บซึ่งแสดงผลออกมาเป็นบัตรแต่ละใบนั้นเอง

Facebook ที่เราเล่นอยู่ทุกวันก็ใช้การออกแบบ UI ที่เรากำลังเรียนรู้กันอยู่ มองแบบง่ายและรวดเร็วคือบนโพสต์แต่ละโพสต์นั้นเหมือนกับบัตรแต่ละใบนั้นเอง จะมีข้อมูลคือ
- ภาพผู้โพสต์
- ชื่อผู้โพสต์
- ข้อความ
- ปุ่ม Call to action ต่างๆ
ทำ Responsive ก็ง่าย
เพราะเราออกแบบทุกอยากให้อยู่ในบัตรหนึ่งใบ ทำให้ข้อมูลในแต่ละบัตรเมื่อมีการ Responsive เราสามารถที่จะจัดการแสดงผลข้อมูลออกมาได้ง่ายมากขึ้น เพราะข้อมูลก็จะไม่ล้นออกไปจากบัตรของเราอย่างแน่นอน และถ้าเราออกแบบให้ตรงตาม GRID SYSTEM ด้วย UI ตัวนี้ก็สามารถทำให้การทำ Responsive เป็นไปอย่างไม่ยากนัก
สรุปกันเลยดีกว่า
สรุปว่าเป็น UI ที่ดีสามารถนำมาปรับใช้งานกับเว็บไซต์ได้หลากหลาย ไม่ว่าจะเป็นเว็บไซต์บทความ ขายสินค้า Social Media หรือแม้แต่เว็บไซต์องค์กรก็นำมาปรับใช้งานได้อย่างไม่ยาก จริงแล้วเป็น UI ซ่อนอยู่ใน UI ต่างๆ ที่เราทำอยู่เพียงแต่เราไม่ได้สนใจว่ามันเรียกว่าอะไรนั้นเอง