แนวทางปฏิบัติแนะนำในการออกแบบแอป

เพิ่มประสิทธิภาพสำหรับเลย์เอาต์แนวตั้ง

ลดความซับซ้อนของการออกแบบแอปโดยใช้เลย์เอาต์แนวตั้ง ซึ่งช่วยให้ผู้ใช้เลื่อนในทิศทางเดียวเพื่อไปยังส่วนต่างๆ ของเนื้อหาได้

จัดการ

เป้าหมายของแอปนี้คือการนำผู้ใช้จากจุด ก ไปยังจุด ข

อย่าทำเช่นนี้

ใช้ทั้งการเลื่อนแนวตั้งและแนวนอน เนื่องจากอาจทำให้ประสบการณ์การใช้งานแอปสับสน

แสดงเวลา

แสดงเวลา (การวางซ้อน) ที่ด้านบน เนื่องจากเป็นตำแหน่งที่ผู้ใช้ดูเวลาได้อย่างสอดคล้องกัน

จัดการ

แสดงเวลาที่ด้านบนของการวางซ้อน เนื่องจากเป็นตำแหน่งที่ผู้ใช้ดูเวลาได้อย่างสอดคล้องกัน

อย่าทำเช่นนี้

แสดงเวลาในกล่องโต้ตอบชั่วคราว การวางซ้อนการยืนยัน หรือเครื่องมือเลือก เช่น ผู้ใช้มีแนวโน้มที่จะเห็นหน้าจอยืนยันเพียงระยะเวลาสั้นๆ

จุดแรกเข้าในบรรทัดที่มีให้เข้าถึง

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

จัดการ

ใช้ทั้งไอคอนและป้ายกำกับเมื่อเป็นไปได้

อย่าทำเช่นนี้

ใช้ไอคอนเพียงอย่างเดียวเพื่อแจ้งให้ผู้ใช้ดำเนินการ

ใช้ป้ายกำกับเพื่อบอกทิศทางแก่ผู้ใช้

สำหรับกล่องโต้ตอบที่ยาวขึ้น ให้ช่วยแนะนำผู้ใช้ด้วยป้ายกำกับขณะที่ผู้ใช้เลื่อนดูเนื้อหา

จัดการ

ใช้การแบ่งส่วน ป้ายกำกับ และตัวช่วยอื่นๆ เพื่อจัดระเบียบเนื้อหาและช่วยให้ผู้ใช้ทราบตำแหน่งขณะเลื่อนดูมุมมองที่ยาวขึ้นซึ่งมีเนื้อหาแบบผสม

อย่าทำเช่นนี้

เพิ่มป้ายกำกับสำหรับกล่องโต้ตอบที่มีเนื้อหาประเภทเดียว

ยกระดับการดําเนินการหลัก

ทําให้ผู้ใช้ดําเนินการในแอปได้ง่ายโดยดึงการดําเนินการหลักไปไว้ที่ด้านบนของการวางซ้อน

จัดการ

ยกระดับการกระทําหลักที่ไม่คลุมเครือขึ้นไว้ที่ด้านบน

อย่าทำเช่นนี้

วางการดําเนินการหลักที่ด้านล่างของหน้าเว็บที่ยาวมาก

แสดงแถบเลื่อนบนหน้าจอที่เลื่อน

ใช้ตัวบ่งชี้การเลื่อนในหน้าจอที่เลื่อนได้เท่านั้นเพื่อไม่ให้ผู้ใช้คาดหวังการโต้ตอบที่ไม่ถูกต้อง ในทํานองเดียวกัน อย่าลืมเพิ่มตัวบ่งชี้การเลื่อนในหน้าจอที่เลื่อนเพื่อระบุจุดที่คุณกําลังดูบนหน้าจอ

จัดการ

แสดงตัวบ่งชี้การเลื่อนหากทั้งมุมมองเลื่อน

อย่าทำเช่นนี้

แสดงตัวบ่งชี้การเลื่อนในมุมมองที่ไม่มีการเลื่อน หรือไม่แสดงแถบเลื่อนในมุมมองที่เลื่อน

ออกแบบให้ปรับเปลี่ยนตามขนาดหน้าจอที่ใหญ่ขึ้น

ตรวจสอบว่าคอมโพเนนต์ที่คุณใช้เต็มความกว้างที่มีและพิจารณาความสูงในเลย์เอาต์แบบไม่เลื่อน

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

จัดการ

ตรวจสอบว่าเนื้อหามีความกว้างและความสูงเต็มพื้นที่ที่มี และองค์ประกอบแบบเต็มหน้าจอ (ProgressIndicators, TimeText ฯลฯ) ปรับเปลี่ยนตามเลย์เอาต์แบบไม่เลื่อน

อย่าทำเช่นนี้

ใช้คอมโพเนนต์ที่มีความกว้างคงที่ซึ่งไม่ปรับขนาดให้เต็มหน้าจอตามขนาดหน้าจอหรือไม่ได้ปรับลักษณะการทำงานของเนื้อหาให้เต็มพื้นที่ว่าง

ใช้ระยะขอบแบบปรับเปลี่ยนตามพื้นที่โฆษณา (เปอร์เซ็นต์)

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

จัดการ

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

อย่าทำเช่นนี้

คอมโพเนนต์ไม่ควรปรับขนาดให้เต็มพื้นที่ว่างโดยไม่มีระยะขอบเพิ่มเติม