Card UI เรียนรู้ User Interface ที่ทำง่ายถูกใจผู้ใช้งาน

Update

Card UI มีมานานแล้ว ?

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

Card ui บน facebook
Card ui บน facebook

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

User Interface (UI) คือ

UI Design
UI Design

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

 

แล้ว Card UI ละ ?

ก็คือการออกแบบ UI ในรูปแบบหนึ่งที่นำเอาลักษณะของบัตรมาใช้งานนั้นเอง ซึ่งสิ่งที่เราหยิบจากบัตรมาใช้งานก็มีหลายส่วน

  • บัตรมีข้อมูลแตกต่างกัน
  • บัตรแสดงข้อมูลบนพื้นที่จำกัด

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

UI by IAMSAIJO
UI by IAMSAIJO

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

 

วิธีใช้ Card UI

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

UI by HIMA VINCENT
UI by HIMA VINCENT

 

Awwwards

เว็บไซต์ Awwwards
เว็บไซต์ Awwwards

เว็บไซต์ที่นักออกแบบเว็บไซต์ทุกคนจะต้องเคยเข้าไปดูอย่างเว็บ Awwwards ก็ออกแบบเว็บไซต์มาในรูปแบบของ Card ได้อย่างลงตัว มีการจัดเรียงข้อมูลได้เรียบง่าย ข้อมูลบนหน้าเว็บที่เป็นรายละเอียดของเว็บไซต์แต่ละเว็บที่มี

  • รูปภาพ
  • ชื่อเว็บไซต์
  • เว็บไซต์โดยใคร
  • วันที่
  • User ที่มีการ Active

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

 

Facebook

Facebook UI
Facebook UI

Facebook ที่เราเล่นอยู่ทุกวันก็ใช้การออกแบบ UI ที่เรากำลังเรียนรู้กันอยู่ มองแบบง่ายและรวดเร็วคือบนโพสต์แต่ละโพสต์นั้นเหมือนกับบัตรแต่ละใบนั้นเอง จะมีข้อมูลคือ

  • ภาพผู้โพสต์
  • ชื่อผู้โพสต์
  • ข้อความ
  • ปุ่ม Call to action ต่างๆ

 

ทำ Responsive ก็ง่าย

เพราะเราออกแบบทุกอยากให้อยู่ในบัตรหนึ่งใบ ทำให้ข้อมูลในแต่ละบัตรเมื่อมีการ Responsive เราสามารถที่จะจัดการแสดงผลข้อมูลออกมาได้ง่ายมากขึ้น เพราะข้อมูลก็จะไม่ล้นออกไปจากบัตรของเราอย่างแน่นอน และถ้าเราออกแบบให้ตรงตาม GRID SYSTEM ด้วย UI ตัวนี้ก็สามารถทำให้การทำ Responsive เป็นไปอย่างไม่ยากนัก

สรุปกันเลยดีกว่า

สรุปว่าเป็น UI ที่ดีสามารถนำมาปรับใช้งานกับเว็บไซต์ได้หลากหลาย ไม่ว่าจะเป็นเว็บไซต์บทความ ขายสินค้า Social Media หรือแม้แต่เว็บไซต์องค์กรก็นำมาปรับใช้งานได้อย่างไม่ยาก จริงแล้วเป็น UI ซ่อนอยู่ใน UI ต่างๆ ที่เราทำอยู่เพียงแต่เราไม่ได้สนใจว่ามันเรียกว่าอะไรนั้นเอง