ระดับ 2 - ปรับอัตโนมัติให้เหมาะสม

แอปที่เพิ่มประสิทธิภาพจะรองรับหน้าจอทุกประเภทและสถานะของอุปกรณ์ทั้งหมดอย่างเต็มที่ รวมถึงการเปลี่ยนสถานะ

ภาพระดับคุณภาพ 3 ระดับเป็นเลเยอร์ที่ซ้อนกันในแนวตั้ง โดยไฮไลต์ระดับกลาง

หลักเกณฑ์

สร้างแอปให้ปรับเปลี่ยนตามขนาดการแสดงผลและสถานะอุปกรณ์ทั้งหมด

ส่วนติดต่อผู้ใช้

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

แอปมีเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์และปรับเปลี่ยนได้ซึ่งออกแบบมาสำหรับหน้าจอทุกขนาด เลย์เอาต์ทั้งหมดเป็นแบบที่ปรับเปลี่ยนตามอุปกรณ์ (ดูย้ายข้อมูล UI ไปยังเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์) การใช้งานเลย์เอาต์แบบปรับขนาดได้จะกำหนดโดยคลาสขนาดหน้าต่าง

UI ของแอปอาจมีสิ่งต่อไปนี้

  • แถบนำทางที่ล้ำสมัยซึ่งจะขยายเป็นแผงนำทางแบบเต็มเมื่อหน้าต่างมีขนาดใหญ่ขึ้น
  • เลย์เอาต์ตารางกริดที่ปรับจำนวนคอลัมน์ให้เหมาะกับการเปลี่ยนแปลงขนาดหน้าต่าง
  • คอลัมน์ข้อความบนหน้าจอขนาดใหญ่
  • แผงขอบท้ายที่เปิดอยู่โดยค่าเริ่มต้นในขนาดหน้าจอเดสก์ท็อป และปิดอยู่บนหน้าจอขนาดเล็ก

สร้างเลย์เอาต์แบบหลายบานหน้าต่าง (หากเหมาะสม) เพื่อใช้ประโยชน์จากพื้นที่หน้าจอขนาดใหญ่ ดูเลย์เอาต์ Canonical

การฝังกิจกรรมช่วยให้แอปที่อิงตามกิจกรรมสร้างเลย์เอาต์แบบหลายแผงได้โดยการแสดงกิจกรรมแบบเคียงข้างกัน

UI_Secondary_Elements T-Layout_Flow

โมดอล เมนูบริบท และองค์ประกอบรองอื่นๆ ได้รับการจัดรูปแบบอย่างถูกต้องในหน้าจอทุกประเภทและสถานะอุปกรณ์ทั้งหมด เช่น

  • แผ่นด้านล่างไม่เต็มความกว้างในหน้าจอขนาดใหญ่ (ใช้ความกว้างสูงสุดเพื่อหลีกเลี่ยงการยืด) ดูลักษณะการทำงานใน ชีต: ด้านล่าง
  • ปุ่มไม่เต็มความกว้างบนหน้าจอขนาดใหญ่ ดูลักษณะการทำงานในปุ่ม
  • ช่องข้อความและกล่องไม่ขยายจนเต็มความกว้างบนหน้าจอขนาดใหญ่ ดูลักษณะการทำงานในช่องข้อความ
  • เมนูแก้ไขหรือโมดอลขนาดเล็กจะไม่ครอบคลุมทั้งหน้าจอและจะรักษาบริบทสำหรับผู้ใช้ให้มากที่สุด ดูเมนู
  • เมนูตามบริบทจะปรากฏข้างรายการที่ผู้ใช้เลือก ดูหัวข้อ "เมนูตามบริบท" ในเมนู
  • แถบนำทางจะแทนที่แถบนำทางเพื่อให้เหมาะกับการใช้งานบนหน้าจอขนาดใหญ่มากขึ้น ดูแถบนำทางด้านข้าง
  • เราได้อัปเดตลิ้นชักการนำทางเป็นแถบนำทางแบบขยาย ดูลิ้นชักการนำทาง
  • กล่องโต้ตอบได้รับการอัปเดตเป็นคอมโพเนนต์ Material ล่าสุด ดูกล่องโต้ตอบ
  • รูปภาพจะแสดงที่ความละเอียดที่เหมาะสมและจะไม่ยืดหรือครอบตัด
Touch_Targets T-Touch_Targets เป้าหมายการสัมผัสมีขนาดอย่างน้อย 48dp ดูหลักเกณฑ์เลย์เอาต์และการพิมพ์ของ Material Design
Drawable_Focus T-Drawable_Focus สร้างสถานะโฟกัสสำหรับ Drawable ที่กำหนดเองซึ่งโต้ตอบได้ Drawable ที่กำหนดเองคือองค์ประกอบ UI ที่มองเห็นได้ซึ่งไม่ได้มาจากเฟรมเวิร์ก Android หากผู้ใช้โต้ตอบกับ Drawable ที่กำหนดเองได้ Drawable ต้องโฟกัสได้เมื่ออุปกรณ์ไม่ได้อยู่ในโหมดแตะ และต้องมีการบ่งชี้ด้วยภาพของสถานะที่โฟกัสอย่างชัดเจน

แป้นพิมพ์ เมาส์ และแทร็กแพด

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation โฟลว์งานหลักในแอปจะรองรับการนำทางด้วยคีย์บอร์ด ซึ่งรวมถึงการนำทางด้วยปุ่ม Tab และปุ่มลูกศร ดูสร้างแอปที่รองรับการช่วยเหลือพิเศษมากขึ้น
Keyboard_Shortcuts T-Keyboard_Shortcuts แอปนี้รองรับแป้นพิมพ์ลัดสำหรับการดำเนินการที่ใช้บ่อย เช่น เลือก ตัด คัดลอก วาง เลิกทำ และทำซ้ำ ดูความเข้ากันได้ของอินพุต
Keyboard_Media_Playback T-Keyboard_Media_Playback คุณใช้แป้นพิมพ์เพื่อควบคุมการเล่นสื่อได้ เช่น Spacebar จะเล่นและหยุดสื่อชั่วคราว
Keyboard_Send T-Keyboard_Send ปุ่ม Enter บนแป้นพิมพ์จะทำหน้าที่ส่งในแอปการสื่อสาร
Context_Menus T-Context_Menus คุณเข้าถึงเมนูตามบริบทได้โดยใช้การคลิกขวาด้วยเมาส์และแทร็กแพดตามปกติ (ปุ่มเมาส์รองหรือการแตะรอง)
Content_Zoom T-Content_Zoom คุณสามารถซูมเนื้อหาของแอปได้โดยใช้ปุ่มลูกกลิ้งของเมาส์ (ร่วมกับการกดปุ่ม Control หรือ Ctrl) และท่าทางสัมผัสการบีบนิ้วบนแทร็กแพด
Hover_States T-Hover_States องค์ประกอบ UI ที่ดำเนินการได้จะมีสถานะการวางเมาส์ (ในกรณีที่เหมาะสม) เพื่อระบุให้ผู้ใช้เมาส์และแทร็กแพดทราบว่าองค์ประกอบนั้นโต้ตอบได้

การทดสอบ

โปรดทำการทดสอบต่อไปนี้เพื่อให้มั่นใจว่าแอปได้รับการเพิ่มประสิทธิภาพและตอบสนองต่อการกำหนดค่าการแสดงผลทั้งหมด

ส่วนติดต่อผู้ใช้

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

เรียกใช้แอปในอุปกรณ์ที่มีขนาดหน้าจอหลากหลาย รวมถึงโทรศัพท์ โทรศัพท์จอพับ แท็บเล็ตขนาดเล็กและขนาดใหญ่ และอุปกรณ์เดสก์ท็อป เรียกใช้แอปในโหมดหลายหน้าต่างบนอุปกรณ์

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

สำหรับแอปที่ใช้การฝังกิจกรรม ให้ทดสอบว่ากิจกรรมแสดงแบบเคียงข้างกันบนหน้าจอขนาดใหญ่หรือซ้อนกันบนหน้าจอขนาดเล็ก

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

แป้นพิมพ์ เมาส์ และแทร็กแพด

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation ไปยังส่วนประกอบที่โฟกัสได้ของแอปโดยใช้ปุ่ม Tab และปุ่มลูกศรของแป้นพิมพ์ภายนอก
T-Keyboard_Shortcuts Keyboard_Shortcuts ใช้แป้นพิมพ์ลัดในแป้นพิมพ์ภายนอกเพื่อดำเนินการเลือก ตัด คัดลอก วาง เลิกทำ และทำซ้ำ
T-Keyboard_Media_Playback Keyboard_Media_Playback ใช้แป้นพิมพ์ภายนอกเพื่อเริ่ม หยุดชั่วคราว กรอกลับ และกรอไปข้างหน้าในการเล่นสื่อ
T-Keyboard_Send Keyboard_Send ใช้แป้น Enter ของแป้นพิมพ์ภายนอกเพื่อส่งหรือส่งข้อมูล
T-Context_Menus Context_Menus ใช้ปุ่มรองของเมาส์หรือความสามารถในการแตะรองของแทร็กแพดเพื่อเข้าถึงเมนูตามบริบทขององค์ประกอบแบบอินเทอร์แอกทีฟ
T-Content_Zoom Content_Zoom ใช้ปุ่มลูกกลิ้งบนเมาส์ (ร่วมกับปุ่ม Control หรือ Ctrl) และท่าทางสัมผัสการบีบบนแทร็กแพดเพื่อซูมเนื้อหาเข้าและออก
T-Hover_States สถานะการวางเมาส์ วางเคอร์เซอร์เมาส์หรือแทร็กแพดเหนือองค์ประกอบ UI ที่ดำเนินการได้เพื่อเปิดใช้งานสถานะการวางเมาส์ขององค์ประกอบ