ที่จริงแล้ว Cards UI มันมีมาตั้งนานแล้วครับ ถ้านึกไม่ออกว่า Cards UI เป็นยังไงก็ให้นึกถึง Pinterest, Facebook ครับ หลายคนคงเคยออกแบบเว็บที่เป็น Cards UI มาแล้ว แต่ไม่รู้ว่ามันเรียกว่าอะไร วันนี้จะมาพูดถึงเรื่อง Cards UI กันครับ
Cards ก็คือ
ไพ่ นามบัตร บัตรต่างนี่แหละครับ ซึ่ง Cards UI ก็อิงคุณสมบัติของการ์ดมาด้วยเหมือนกันคือ
- การ์ดแต่ละใบ ให้ข้อมูลที่จำเป็นในพื้นที่จำกัด
- การ์ดแต่ละใบ ให้ข้อมูลที่แตกต่างกัน
- การ์ดแต่ละใบ มีสองด้าน (ทำให้เกิด UI แบบพลิกไปด้านหลังได้)
จากคุณสมบัติดังกล่าว จึงทำให้เกิดการออกแบบเพื่อให้แสดงผลในเว็บไซต์ เพราะในเว็บไซต์ที่เป็น Social มีข่าวอัพเดท เกือบจะตลอดเวลา คงไม่มีใครมานั่งอ่านเต็มๆทั้งหมด จริงมั้ยครับ
เหมือนตอนโดนคุณตำรวจเรียก ขอดูใบขับขี่ พอคุณตำรวจหยิบใบขับขี่ขึ้นมาก็รู้แล้วว่า เราชื่ออะไร อยู่ที่ไหน ไม่ต้องเอาเลขประจำตัวไปค้นหาข้อมูล
ใครนำ CardsUI ไปใช้บ้าง
ตอนนี้เว็บดังๆ ก็เริ่มนำ Cards UI มาใช้กันแล้วนะครับ มาดูกันใครใช้บ้าง
#1: Google cards UI
#2: Twitter card UI design
#3: Pinterest card UI design
#4: Trello card UI design
#5: Amazon card UI design
ผมยกตัวอย่างมาแค่ 5 เว็บเท่านั่น สามารถดูข้อมูลเพิ่มเติมได้ที่ http://smashinghub.com/9-inspirational-cards-ui-design-example.htm
สรุป
จะเห็นได้ว่าการออกแบบของ CardsUI นั้นจะแสดงข้อมูลที่จำเป็นจริงๆเท่านั้น เพื่อให้สามารถเข้าใจข้อมูลได้ง่าย และเร็ว (เหมือนตอนโดนตำรวจเรียกดูใบขับขี่)
สำหรับใครที่ต้องการจะออกแบบ CardsUI แบบใหม่ สามารถค้นหาแรงบันดาลใจจาก Pinterest ได้นะครับ http://www.pinterest.com/flexewebs/cards-ui/
reference1 : http://www.designil.com/card-user-interface-design.html
reference2 : http://smashinghub.com/9-inspirational-cards-ui-design-example.htm