Skip to main content
0
UX/UI

เจาะลึก Design Platform Airbnb Update Summer 2022

แอปพลิเคชัน 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://www.airbnb.com/resources/hosting-homes/a/the-airbnb-2022-summer-release-what-hosts-need-to-know-525

https://mobbin.com/apps/airbnb-ios-e62cd3cf-0432-4936-903f-b9c01124e2bb/7de33fd8-ff64-4935-af8e-c922c1e7bfb4/screens?sidebar=true

https://ux.shopify.com/content-hierarchy-in-action-84a9529da33a

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า