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