แอปพลิเคชัน Airbnb ถือว่าเป็นตัวอย่างที่ดีที่ใช้สำหรับการศึกษาเรื่องของ Design ทั้ง UX / UI และ แอปพลิเคชัน Airbnb สามารถใช้หลักการร่วมกันทั้งใน Website และ Mobile ที่มีความเหมือนกันทั้งสอง Platform แบบไร้ที่ติ
และ ในช่วง Summer ที่ผ่านมา แอปพลิเคชัน Airbnb ได้มีการอัพเดตใหญ่ของ UI ทั้งใน เว็บไซต์ และ แอปพลิเคชัน โดยการออกแบบ แอปพลิเคชัน Airbnb จะมีการใช้หลักคือ Grid Design และ ยังมีอีก 4 Cores หลักการที่เห็นได้ใน แอปพลิเคชัน Airbnb มีความน่าสนใจอย่างมากเป็นตัวอย่างที่ดีสำหรับการศึกษาดังนี้
เขียนโดย
Waranyu Khongchai
Internship @ borntoDev
Responsiveness
Explore Screen Application Airbnb
Explore Screen Website Airbnb
โดยภายในหน้าของ UI แอปพลิเคชัน Airbnb นั้นจะประกอบไปด้วยองค์ประกอบต่าง ๆ ที่สามารถแสดงเนื้อหาตามขนาดของหน้าจอได้อย่าง flexible และ ส่วนประกอบหลักของ แอปพลิเคชัน Airbnb คือ Widget ที่สามารถตอบสนองได้ในทั้งหน้าจอคอมพิวเตอร์ และ หน้าบนอุปกรณ์เคลื่อนที่มีขนาดต่างกันไป โดยจะทำงานตามการใช้งานที่ผู้ใช้นั้นกดใช้ในแต่ละเมนู หรือ Widget
ตัวอย่างการขยายเมนูค้นหาที่ผู้ใช้งานนั้นเลือกใช้
ตัวอย่างการขยายเมนูที่พักที่ผู้ใช้งานนั้นเลือกใช้
Content Hierarchy
ตัวอย่างของการเรียงลำดำความสำคัญของเนื้อหาภายในหน้าของรายละเอียดที่พัก
มีการเรียงลำดับความสำคัญของเนื้อหาที่ผู้ใช้งานนั้นสามารถรู้เส้นทางว่าเนื้อหาจะต้องไหลไปเส้นทางไหน และ มีรูปแบบการอ่านที่เป็นธรรมชาติ
โดยตำแหน่งขององค์ประกอบในตัวอย่าง
-
ชื่อที่พัก
-
รายละเอียดเบื้องต้นของที่พัก
-
รูปภาพประกอบที่พัก
-
คำบรรยายรายละเอียดหลักของที่พัก
-
เมนูการจองที่พัก
Breathable
ภายใน UI ของ แอปพลิเคชัน Airbnb จะมีการเว้นช่องว่างที่เรียกว่าช่องว่างอากาศระหว่างองค์ประกอบที่สม่ำเสมอ ไม่มีการยัดเนื้อหาที่มากเกินไปทั้งในเว็บไซต์ และ บนอุปกรณ์เคลื่อนที่ โดยการเว้นองค์ประกอบที่สม่ำเสมอยังทำให้ผู้ใช้งานสามารถอ่านเนื้อหาได้ง่ายจาก ซ้ายไปขวา หรือ บนลงล่างได้อย่างสบายตา
Predictable Layouts
ย้อนกลับไปยังหัวข้อ Breathable ที่มีการออกแบบให้มีช่องว่างระหว่างองค์ประกอบที่สม่ำเสมอ ยังมีการใช้การออกแบบโครงสร้างแบบตารางที่สอดคล้องกันเมื่อมีการรวมองค์ประกอบด้วยกันและโครงสร้างแบบตารางจะออกมาได้ Layout ที่มีความเรียบง่าย และ คาดเดาได้ง่าย ซึ่งจะทำให้ผู้ใช้งานนั้นอ่อนไหว และ อยากจะลองสำรวจใช้งานทุก ๆ องค์ประกอบภายใน UI
สรุปโดยจากการออกแบบของแอปพลิเคชัน Airbnb เป็นการออกแบบที่ดีมีความยืดหยุ่นตอบสนองต่อผู้ใช้งานได้อย่างดี และ เป็น Case Study ที่ใช้สำหรับการออกแบบ UX / UI ได้อย่างดีเช่นกันสามารถลองเล่น แอปพลิเคชัน Airbnb ได้ผ่านทั้งเว็บไซต์ และ แอปพลิเคชัน Airbnb
🦖 borntoDev – สร้างการเรียนรู้ที่ดี สำหรับสายไอทีในทุกวัน
ที่มา
https://ux.shopify.com/content-hierarchy-in-action-84a9529da33a
หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?
อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้
-
Sale!
-
Sale!
-
Sale!
-
Sale!
