ท่าทางและการวางแนว

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

การเปลี่ยนแปลงการวางแนว

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

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

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

ลองใช้แนวทางปฏิบัติในการออกแบบต่อไปนี้สำหรับแนวนอน

• รองรับแถบระบบแบบไร้ขอบ

• เลือกคอมโพเนนต์การนำทางที่รองรับเนื้อหาของคุณได้ดีที่สุด เช่น แถบนำทางแนวนอนหรือแถบข้างนำทาง

• ลองปรับเนื้อหาใหม่หรือเปลี่ยนความหนาแน่น

เลย์เอาต์แนวนอนใช้ UI ขนาดกลางได้

การวางแนวนอนจะใช้ประโยชน์จากความสูงที่ลดลงของแถบนำทางด้านล่างที่วางในแนวนอนได้

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

รูปภาพหลักจะใช้พื้นที่ที่โดดเด่นและติดอยู่ แถบแอปด้านล่าง จะเลื่อนขึ้น

จากแนวตั้งเป็นแนวนอน: การจัดกลุ่มคอนเทนเนอร์ทั้ง 2 แบบจะหมุนในตำแหน่ง

สำหรับชีตตัวกรอง คอมโพเนนต์ชีตจะเปลี่ยนเป็นชีตด้านข้างได้ หากต้องการความสนใจมากขึ้น ชีตจะยังคงเป็นแบบเต็มหน้าจอ แต่จะปรับให้เป็นเลย์เอาต์ 2 คอลัมน์

ท่าทาง

พิจารณากรณีการใช้งานอุปกรณ์รูปแบบพิเศษ เช่น ท่าทางเมื่อพับ (พับ แบน และ วางบนโต๊ะ)

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

คงที่

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

เมื่อพับ

เมื่อปิดอุปกรณ์ที่พับได้ อุปกรณ์จะอยู่ในท่าทางที่พับ ในท่านี้ คุณจะโต้ตอบกับหน้าจอด้านนอกซึ่งมักจะมีขนาดกะทัดรัด

บนโต๊ะ

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

บานพับ

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

หากออกแบบโดยใช้ตารางกริดเลย์เอาต์และบานหน้าต่าง ให้เว้นช่องว่างที่กว้างขึ้นเพื่อรองรับบานพับ เช่น ในเลย์เอาต์รายละเอียดรายการ 2 บานหน้าต่าง

อุปกรณ์พับได้บางรุ่น เช่น อุปกรณ์พับ 3 ส่วน มีบานพับหลายอัน

หน้าปก

โทรศัพท์แบบพับได้บางรุ่นอาจมีหน้าจอฝาพับด้านนอกในสัดส่วนภาพสี่เหลี่ยมจัตุรัส เช่น โทรศัพท์จอพับ

เมื่อออกแบบสำหรับหน้าจอปก ให้ทำตามหลักเกณฑ์ต่อไปนี้

• ตรวจสอบว่าแอปแสดงผลแบบขอบจรดขอบ
• ตรวจสอบว่ารูกล้องไม่ได้บังองค์ประกอบ UI
• มุ่งเน้นที่กรณีการใช้งานและ UI

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

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

โดยปกควรเน้นที่อินพุตเป็นหลัก เช่น เมื่อแป้นพิมพ์ ปรากฏขึ้น ข้อความจะเป็นโฟกัสหลัก

ในหน้าจอขนาดเล็ก เช่น หน้าปก ชีตตัวกรองจะเป็นแบบเต็มหน้าจอ แต่การวางปุ่มและการปรับขนาดจะปรับเปลี่ยนตาม

แม้จะมีขนาดกะทัดรัด แต่แถบนำทางอาจเหมาะกับการใช้งานบนหน้าจอด้านนอกมากกว่า

ส่วนปกขนาดใหญ่จะใช้ประโยชน์จากทั้งการวางแนวการนำทางได้ พิจารณาว่าผู้ใช้ อาจโต้ตอบกับเนื้อหาอย่างไร

แถบนำทางขนาดเล็กจะช่วยหลีกเลี่ยง UI ของระบบและช่องกล้องในขณะที่ยังคง ความสูงที่ย่อไว้