คำแนะนำเกี่ยวกับการออกแบบ

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

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

เลย์เอาต์สำหรับหน้าจอขนาดใหญ่

หากคุณพัฒนาแอปสำหรับโทรศัพท์มือถือและต้องการปรับปรุงการออกแบบใน ChromeOS และรูปแบบอื่นๆ ของอุปกรณ์หน้าจอขนาดใหญ่ ให้เริ่มด้วยการปรับเลย์เอาต์ แบบอักษร และระยะห่างเล็กน้อย สําหรับแท็บเล็ตขนาด 7 นิ้วหรือเกมที่มี Canvas ขนาดใหญ่ การปรับเหล่านี้อาจเป็นสิ่งที่คุณต้องการ

สำหรับจอแสดงผลขนาดใหญ่ คุณสามารถออกแบบ UI บางส่วนใหม่เพื่อแทนที่ UI ที่ "ยืดออก" ด้วย UI แบบหลายบานหน้าต่างที่มีประสิทธิภาพ การนำทางที่ง่ายขึ้น และเนื้อหาเพิ่มเติม การศึกษาเกี่ยวกับ Material ของทีม Material Design มีตัวอย่างให้ดูว่าการออกแบบลักษณะนี้เป็นอย่างไร เช่น ดูว่าปุ่มตอบปรับเปลี่ยนตามขนาดหน้าจอต่างๆ อย่างไร

คำแนะนำมีดังต่อไปนี้

• ระบุเลย์เอาต์ที่กำหนดเองสำหรับหน้าจอขนาดใหญ่ขึ้นเหล่านี้ คุณทำได้โดยใช้ขนาดที่สั้นที่สุดของหน้าจอ หรือความกว้างและความสูงขั้นต่ำที่ใช้ได้
• ลองนึกถึงวิธีที่ UX และเลย์เอาต์ของคุณทำงานในสภาพแวดล้อมที่เน้นแนวนอนเป็นหลัก เช่น ChromeOS ปรับเลย์เอาต์ให้ดูดีและทำงานได้ดีในแนวนอนเหล่านี้ตามขนาดหน้าต่าง หรือระบุเลย์เอาต์แนวนอนโดยใช้ตัวระบุทรัพยากร land ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับขนาดหน้าต่างแบบไดนามิกและข้อควรพิจารณาอื่นๆ สำหรับหน้าจอขนาดใหญ่ได้ที่หน้าการจัดการหน้าต่าง
• แถบนำทางด้านล่างจะปรับขนาดได้ไม่ดีนักเมื่อแอปขยายให้กว้าง ลองย้ายการนำทางไปที่เมนูด้านซ้ายเพื่อให้เข้าถึงได้ง่ายขึ้นและแสดงตัวเลือกเพิ่มเติมได้ ตัวอย่างการตอบกลับแสดงให้เห็นถึงเรื่องนี้ได้เป็นอย่างดี
• อย่างน้อยที่สุด ให้ปรับแต่งขนาดต่างๆ เช่น ขนาดแบบอักษร ระยะขอบ และระยะห่างสำหรับหน้าจอขนาดใหญ่ขึ้น เพื่อปรับปรุงการใช้พื้นที่และความสามารถในการอ่านเนื้อหา พิจารณาว่าสิ่งต่างๆ อาจมีลักษณะอย่างไรเมื่อผู้ใช้อยู่ห่างจากอุปกรณ์มากขึ้น เช่น อุปกรณ์ ChromeOS หรือสภาพแวดล้อมเดสก์ท็อปอื่นๆ
• ปรับตำแหน่งของตัวควบคุม UI เพื่อให้ผู้ใช้เข้าถึงได้เมื่อใช้เมาส์หรือถือแท็บเล็ต เช่น ไปทางด้านข้างและห่างจากกึ่งกลาง
• โดยปกติแล้ว ระยะห่างขององค์ประกอบ UI ควรมีขนาดใหญ่กว่าใน ChromeOS และอุปกรณ์หน้าจอขนาดใหญ่อื่นๆ มากกว่าในโทรศัพท์มือถือ ขอบและระยะห่างควรปรับตามขนาดหน้าจอต่างๆ
• เว้นที่ว่างรอบเนื้อหาข้อความอย่างเหมาะสมเพื่อไม่ให้ข้อความชิดขอบหน้าจอโดยตรง ใช้ระยะห่างขั้นต่ำ 16dp รอบเนื้อหาที่อยู่ใกล้ขอบหน้าจอ

โดยเฉพาะอย่างยิ่ง ตรวจสอบว่าเลย์เอาต์ไม่ได้ "ยืด" ทั่วทั้งหน้าจอ

• บรรทัดข้อความไม่ควรยาวเกินไป โดยควรเพิ่มประสิทธิภาพให้มีความยาวสูงสุด 100 อักขระต่อบรรทัด และผลลัพธ์ที่ดีที่สุดจะอยู่ระหว่าง 50 ถึง 75 อักขระ
• รายการและเมนูไม่ควรใช้ความกว้างแบบเต็มหน้าจอ
• ใช้ระยะห่างเพื่อจัดการความกว้างขององค์ประกอบบนหน้าจอ หรือเปลี่ยนไปใช้ UI แบบหลายบานหน้าต่างสำหรับอุปกรณ์หน้าจอขนาดใหญ่ (ดูส่วนถัดไป)

ใช้ประโยชน์จากพื้นที่หน้าจอเพิ่มเติม

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

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

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

คำแนะนำสำหรับแอปมีดังนี้

• แบรนด์ของคุณจะเป็นตัวกำหนดทิศทางที่คุณควรใช้เมื่อคิดถึงขนาดหน้าจอต่างๆ เหล่านี้ การตัดสินใจว่าจะจัดลําดับความสําคัญและแสดงอะไรให้ผู้ใช้เห็นขึ้นอยู่กับประเภทเส้นทางของผู้ใช้ที่มีอยู่และฟีเจอร์ที่ใช้กันมากที่สุด หากต้องการแรงบันดาลใจ โปรดดูการศึกษาเกี่ยวกับ Material และดูว่าผลิตภัณฑ์แต่ละรายการตอบสนองต่อหน้าจอขนาดใหญ่ขึ้นอย่างไร
• พิจารณาว่าการออกแบบแอปควรทำงานอย่างไรโดยใช้ระบบตารางกริดที่ตอบสนองตามอุปกรณ์ และเนื้อหา การนำทาง และตัวเลือกควรเคลื่อนที่อย่างไรเมื่อคุณมีพื้นที่หน้าจอมากขึ้น
• กำหนดขนาดหน้าจอที่จะใช้เลย์เอาต์อื่น จากนั้นระบุเลย์เอาต์อื่นในกลุ่มขนาดหน้าต่างที่เหมาะสม (เช่น ขนาดใหญ่/ใหญ่พิเศษ) หรือความกว้างหน้าต่างขั้นต่ำ (เช่น sw600dp/sw720) โปรดทราบว่าเมื่อคุณไปที่เลย์เอาต์เหล่านี้ บริบทโดยรวมที่ผู้ใช้อยู่ไม่ควรเปลี่ยนแปลง และคุณควรพยายามรักษาสถานะของผู้ใช้ทั้งหมดไว้ขณะเปลี่ยนจากเลย์เอาต์หนึ่งไปยังอีกเลย์เอาต์หนึ่ง (ตำแหน่งการเลื่อน ข้อความที่กำลังเขียน ฯลฯ)

ใช้ชิ้นงานที่ออกแบบมาสำหรับหน้าจอที่มีความหนาแน่นสูงขึ้นและมีขนาดใหญ่ขึ้น

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ VectorDrawable และชิ้นงานเวกเตอร์ใน Android ได้ในบล็อกโพสต์นี้โดย Nick Butcher

ปรับขนาดแบบอักษรและเป้าหมายการสัมผัส

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

โปรดดูข้อควรพิจารณาต่อไปนี้

• ข้อความไม่ควรมีขนาดใหญ่หรือเล็กเกินไปในหน้าจอที่มีขนาดใหญ่ขึ้นและความหนาแน่นสูงขึ้น ตรวจสอบว่าป้ายกำกับมีขนาดเหมาะสมกับองค์ประกอบ UI ที่เกี่ยวข้อง และตรวจสอบว่าไม่มีการขึ้นบรรทัดใหม่ที่ไม่เหมาะสมในป้ายกำกับ ชื่อ และองค์ประกอบอื่นๆ
• ขนาดเป้าหมายการสัมผัสที่แนะนำสำหรับองค์ประกอบบนหน้าจอคือ 48dp ซึ่งอาจต้องมีการปรับเปลี่ยนบางอย่างใน UI ของหน้าจอขนาดใหญ่ อ่านเพิ่มเติมเกี่ยวกับวิธีการเว้นวรรคเพื่อดูข้อมูลเกี่ยวกับเป้าหมายการสัมผัสและการเว้นวรรคระหว่างรายการเมื่อขนาดหน้าจอเปลี่ยนแปลง คำแนะนำเหล่านี้ยังเป็นไปตามหลักเกณฑ์ด้านการช่วยเหลือพิเศษขั้นต่ำด้วย
• หากเป็นไปได้ สำหรับไอคอนขนาดเล็ก ให้ขยายพื้นที่ที่แตะได้ให้มากกว่า 48dp โดยใช้ TouchDelegate หรือเพียงแค่จัดกึ่งกลางไอคอนภายในปุ่มโปร่งใส