สมาร์ทวอทช์มีหน้าจอขนาดเล็กกว่าอุปกรณ์มือถือ จึงจำเป็นต้องจัดเรียงและแสดงองค์ประกอบในลักษณะที่ผู้ใช้เข้าถึงได้และใช้พื้นที่หน้าจอที่มีอยู่อย่างมีประสิทธิภาพ ใช้ระยะห่างจากขอบและระยะขอบที่เหมาะสมตามที่ระบุไว้ในหลักเกณฑ์ของ Material เพื่อช่วยในการปรับขนาดรายการให้พอดีกับหน้าจอ
แม้ว่าการออกแบบจะพอดีกับหน้าจอ แต่องค์ประกอบของอินเทอร์เฟซอาจถูกตัดหรือถูกครอบตัดเมื่อผู้ใช้ดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้
- เปลี่ยนภาษาที่แสดง
- เปลี่ยนขนาดข้อความ
- เปิดใช้การตั้งค่าระบบข้อความเป็นตัวหนา
คุณจึงต้องทดสอบการออกแบบโดยคำนึงถึงข้อควรพิจารณาเหล่านี้เพื่อให้แน่ใจว่าการออกแบบจะปรับให้เข้ากับสภาพแวดล้อมของผู้ใช้แต่ละรายได้อย่างราบรื่น
แสดงองค์ประกอบแบบอินเทอร์แอกทีฟให้มองเห็นได้ทั้งหมด
หากอินเทอร์เฟซมีองค์ประกอบแบบอินเทอร์แอกทีฟ ให้ตรวจสอบว่าผู้ใช้สามารถเลื่อนองค์ประกอบเหล่านี้ให้แสดงอย่างเต็มหน้าจอได้ โดยเฉพาะอย่างยิ่งหากวางองค์ประกอบเหล่านี้ไว้ที่ขอบของหน้า หากแอปใช้ไลบรารี Horologist ให้ใช้responsive()
Layout Factory หรือจะใช้ตัวเว้นวรรคและเพิ่มระยะขอบที่ด้านบนและด้านล่างของออบเจ็กต์ ScalingLazyColumn
ก็ได้เพื่อป้องกันไม่ให้ระบบตัดรายการแรกและรายการสุดท้ายของรายการถูกตัดออกเสมอ
ใช้ชิปแทนการ์ดสำหรับเลย์เอาต์ที่หนาแน่น
หากต้องการเลย์เอาต์ที่หนาแน่นขึ้น ให้ใช้ CompactChip
แทนการ์ด พื้นที่ผิวของการ์ดที่ใหญ่ขึ้นทำให้การป้องกันการตัดข้อความและการตัดเนื้อหาทำได้ยากขึ้นมาก
พิจารณาผลกระทบของขนาดหน้าจอต่อการตัดข้อความและการตัดคลิป
คุณมีพื้นที่สำหรับแสดงข้อความและปุ่มเพิ่มเติมได้น้อยหรือมากขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์ Wear OS
ออกแบบให้เหมาะกับระยะขอบแบบเปอร์เซ็นต์ ไม่ใช่ระยะขอบแบบคงที่
หากต้องการสร้างเนื้อหาที่ปรับให้เหมาะกับขนาดหน้าจอของอุปกรณ์ Wear OS ให้ใช้ระยะขอบแบบเปอร์เซ็นต์ โดยขนาดของระยะขอบแต่ละส่วนจะสัมพันธ์กับขนาดหน้าจอ ในกรณีที่รายการอยู่ด้านบนหรือด้านล่างของหน้าจอ ให้ใช้ระยะห่างจากขอบด้านในเพิ่มเติมเพื่อลดการครอบตัดเนื้อหาจากขอบที่โค้งของหน้าจอ ในทางตรงกันข้าม พื้นที่ด้านบนและด้านล่างจะเพิ่มขึ้นเมื่อกลุ่มเนื้อหามีขนาดเล็กพอที่จะแสดงในหน้าจอเดียว
ควรทำ
ไม่ควรทำ
ใช้ขีดจํากัดอักขระที่หน้าจอขนาดเล็กจําเป็น
ในกรณีส่วนใหญ่ หน้าจอขนาดใหญ่จะแสดงข้อความและเนื้อหาได้มากกว่าก่อนที่จะตัดให้สั้นลง แม้ว่าอาจมีพื้นที่แนวนอนมากกว่า แต่ให้ออกแบบสำหรับหน้าจอขนาดเล็กที่สุดเสมอเพื่อสร้างประสบการณ์การใช้งานที่สอดคล้องกันในอุปกรณ์ต่างๆ
ตัวอย่างเช่น ปุ่มอาจมีพื้นที่สำหรับอักขระเพิ่มเติมบนหน้าจอขนาดใหญ่ก่อนที่จะตัด แต่หากเป็นคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่สําคัญต่อประสบการณ์ของผู้ใช้ ให้ใช้ข้อความที่สั้นพอที่จะปรากฏทั้งหมดบนหน้าจอของอุปกรณ์ขนาดเล็กโดยไม่ต้องตัด
หรือหากการ์ดแสดงเนื้อหาแบบผันแปร เช่น ข้อความที่ดึงมาจากเซิร์ฟเวอร์ ให้เตรียมรับมือกับกรณีที่ข้อความนี้ถูกตัดให้สั้นลงบนหน้าจอขนาดเล็ก