แนวทางการออกแบบการตั้งค่า Android

เอกสารนี้เน้นถึงหลักการและแนวทางปฏิบัติสำหรับผู้ที่กำลังออกแบบการตั้งค่าแพลตฟอร์ม Android, การตั้งค่าหลักของ GMS (การตั้งค่า Google) หรือนักพัฒนาซอฟต์แวร์ที่ออกแบบการตั้งค่าสำหรับแอป Android ของตน

หลักการออกแบบ

ให้ภาพรวมที่ดี

ผู้ใช้ควรสามารถดูหน้าจอการตั้งค่าและทำความเข้าใจการตั้งค่าแต่ละรายการและค่าต่างๆ ทั้งหมดได้

รูปที่ 1 การตั้งค่าและค่าปัจจุบันจะแสดงที่หน้าจอระดับบนสุด

จัดระเบียบรายการอย่างสังหรณ์ใจ

วางการตั้งค่าที่ใช้บ่อยที่ด้านบนของหน้าจอ จำกัดจำนวนการตั้งค่าในหน้าจอเดียว การแสดงมากกว่า 10-15 รายการสามารถครอบงำได้ สร้างเมนูที่ใช้งานง่ายโดยย้ายการตั้งค่าบางอย่างไปยังหน้าจอแยกต่างหาก

รูปที่ 2 การตั้งค่าทั่วไปอยู่ที่ด้านบนของหน้าจอ

ทำให้ค้นหาการตั้งค่าได้ง่าย

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

สำหรับการตั้งค่าที่ซ้ำกัน ให้สร้างหน้าจอแยกต่างหากสำหรับการตั้งค่าและมีจุดเริ่มต้นจากที่ต่างๆ

รูปที่ 3 & 4 "เสียงแจ้งเตือนเริ่มต้น" ปรากฏขึ้นทั้งบนหน้าจอ "การแจ้งเตือน" และ "เสียง"

ใช้ชื่อและสถานะที่ชัดเจน

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

ชื่อเรื่องควร:

  • ใส่ข้อความที่สำคัญที่สุดในฉลากของคุณก่อน
  • เปลี่ยนคำเชิงลบเช่น "ไม่" หรือ "ไม่เคย" เป็นคำที่เป็นกลางเช่น "บล็อก"
  • ใช้ป้ายกำกับที่ไม่มีตัวตน เช่น "การแจ้งเตือน" แทน "แจ้งเตือนฉัน" ข้อยกเว้น: หากจำเป็นต้องอ้างอิงถึงผู้ใช้เพื่อทำความเข้าใจการตั้งค่า ให้ใช้บุคคลที่สอง ("คุณ") แทนบุคคลที่หนึ่ง ("I")

ชื่อควรหลีกเลี่ยง:

  • ข้อกำหนดทั่วไป เช่น กำหนด เปลี่ยนแปลง แก้ไข จัดการ ใช้ เลือก หรือเลือก
  • คำซ้ำจากตัวแบ่งส่วนหรือชื่อหน้าจอย่อย
  • ศัพท์แสงทางเทคนิค

ประเภทหน้า

รายการการตั้งค่า

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

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

รูปที่ 5. ตัวอย่างรายการการตั้งค่า

มุมมองรายการ

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

รูปที่ 6 ตัวอย่างมุมมองรายการ

หน้าจอเอนทิตี

หน้าจอเอนทิตีใช้เพื่อนำเสนอการตั้งค่าของรายการที่แตกต่างกัน เช่น แอป บัญชี อุปกรณ์ เครือข่าย Wi-Fi เป็นต้น

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

รูปที่ 7. ตัวอย่างหน้าจอ Entity ที่ใช้ใน App info

รูปที่ 8 ตัวอย่างหน้าจอ Entity ที่ใช้ใน Storage

การตั้งค่าหลัก

การตั้งค่าหลักจะใช้ดีที่สุดเมื่อสามารถเปิดหรือปิดคุณสมบัติทั้งหมดได้ เช่น Wi-Fi หรือ Bluetooth ด้วยการใช้สวิตช์ที่ด้านบนของหน้าจอ ผู้ใช้จะสามารถควบคุมคุณสมบัตินี้ได้อย่างง่ายดาย การใช้การตั้งค่าหลักเพื่อปิดใช้งานคุณลักษณะนี้จะปิดใช้งานการตั้งค่าอื่นๆ ที่เกี่ยวข้องทั้งหมด

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

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

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

รูปที่ 10. ตัวอย่างการตั้งค่าหลักที่ใช้ในหน้าจอการแจ้งเตือนของแอพโดยปิดการสลับหลัก

หน้าจอการเลือกปุ่มตัวเลือก

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

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

รูปที่ 11 ไม่ควรใช้ปุ่มตัวเลือกในรายการการตั้งค่า

รูปที่ 12. นี่คือวิธีการใช้ปุ่มตัวเลือกอย่างถูกต้องในการตั้งค่า

ส่วนประกอบ

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

สำหรับแถบเครื่องมือที่ไม่มีการดำเนินการเฉพาะหน้าจอ แสดงการดำเนินการค้นหาและช่วยเหลือ

รูปที่ 13 แถบเครื่องมือพร้อมการดำเนินการค้นหาและช่วยเหลือ

สำหรับแถบเครื่องมือที่มีการดำเนินการเดียว : นำเสนอการดำเนินการก่อนการค้นหา

รูปที่ 14. แถบเครื่องมือที่มีการดำเนินการเดียวก่อนการดำเนินการค้นหาและช่วยเหลือ

สำหรับแถบเครื่องมือที่มีการทำงานมากกว่า 1 อย่าง : ให้พิจารณาวางการทำงานหลักก่อนการค้นหา ขณะที่ใส่การทำงานขั้นสูงในเมนูรายการเพิ่มเติม

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

รูปที่ 15. แถบเครื่องมือพร้อมเมนูรายการเพิ่มเติมสำหรับการดำเนินการ

ส่วนหัวของเอนทิตี

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

รูปที่ 16. ส่วนหัวของเอนทิตี

ส่วนไอคอนและส่วนหัว (App1) จะเลื่อนไปใต้ส่วนหัว (ข้อมูลแอป)

รูปที่ 17. ชื่อข้อมูลแอพที่นี่เป็นส่วนหนึ่งของแถบเครื่องมือ ในขณะที่ส่วนที่เหลือของหน้าจอจะเลื่อนไปด้านล่าง

ชื่อเรื่องเป็นข้อบังคับ คุณควรแสดงข้อความย่อยที่เน้นสถานะของการตั้งค่า การใช้ไอคอนเป็นทางเลือก

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

ตัวอย่าง:

รูปที่ 18. ลิงค์เมนูพร้อมไอคอน ชื่อ และคำบรรยาย

รูปที่ 19. ลิงค์เมนูพร้อมชื่อเรื่องและคำบรรยาย

รูปที่ 20. ลิงค์เมนูที่มีชื่อเท่านั้น

ลิงค์เมนูพร้อมไอคอน ชื่อเรื่อง ข้อความย่อย และเป้าหมาย Hit แยกต่างหากทางด้านขวา

เป้าหมายการแตะอื่นๆ ควรใช้สีของธีม

รูปที่ 21. ตัวอย่างเมนูเป้าหมายด้วยการแตะสองครั้ง

ลิงก์เมนูพร้อมไอคอน ชื่อ ข้อความย่อย และสถิติ/หมายเลข/ไอคอนแจ้งเตือน

สามารถแสดงค่าตัวเลข เช่น เปอร์เซ็นต์และเวลาทางด้านขวาพร้อมกับข้อความย่อย ขณะที่แสดงกราฟแท่งด้านล่าง

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

รูปที่ 22. ตัวอย่างเมนูพร้อมไอคอน ชื่อ สถิติ และกราฟ

การจัดกลุ่มและตัวแบ่ง

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

หากการตั้งค่าในกลุ่มมีความเกี่ยวข้องกันอย่างใกล้ชิด คุณสามารถเพิ่มส่วนหัวของกลุ่มได้ หากคุณใช้ส่วนหัวของกลุ่ม คุณควรใส่ตัวแบ่งเสมอ

รูปที่ 23. การตั้งค่าที่จัดกลุ่มด้วยตัวแบ่ง

สวิตช์

สลับด้วยไอคอน ชื่อ และคำบรรยาย

รูปที่ 24. สลับด้วยไอคอน ชื่อ และคำบรรยาย

สลับกับชื่อเรื่องและคำบรรยาย

รูปที่ 25. สลับกับชื่อเรื่องและคำบรรยาย

สลับกับชื่อเรื่องเท่านั้น

ชื่อเรื่องสามารถมาพร้อมกับไอคอนทางด้านซ้าย

รูปที่ 26. สลับกับชื่อเรื่องเท่านั้น

รายการ + สวิตช์

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

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

รูปที่ 27. รายการและสวิตช์

ตัวเลื่อน

ไอคอนเป็นตัวเลือกในแถบเลื่อน

รูปที่ 28. ตัวเลื่อน

ปุ่มบนหน้าจอ

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

รูปที่ 29. ปุ่มสีเทาสำหรับ "ถอนการติดตั้ง" และ "บังคับหยุด"

รูปที่ 30. ปุ่มสีน้ำเงินสำหรับ "Turn on now"

การเปิดเผยแบบก้าวหน้า (ขั้นสูง)

ควรซ่อนการตั้งค่าที่ไม่ค่อยได้ใช้ ใช้ "ขั้นสูง" เฉพาะเมื่อมีอย่างน้อย 3 รายการที่จะซ่อน

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

รูปที่ 31. ขั้นสูงที่ใช้ในหน้าจอ "Display"

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

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

รูปที่ 32. เมนูแบบเลื่อนลง

ช่องทำเครื่องหมาย

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

สามารถใช้ช่องทำเครื่องหมาย:

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

รูปที่ 33. ช่องทำเครื่องหมายถูกใช้เพื่อลดจำนวนสวิตช์บนหน้าจอนี้

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

รูปที่ 34. ลิงค์ที่ใช้ในการตั้งค่า

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

รูปที่ 35. ข้อความส่วนท้าย

รูปแบบ

ข้อมูล

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

ข้อมูลอื่นๆ ที่สำคัญน้อยกว่าสามารถนำเสนอได้โดยใช้มุมมองรายการปกติ

รูปที่ 36. ตัวอย่างแสดง Storage

รูปที่ 37. ตัวอย่างแสดง Network

การศึกษาของผู้ใช้

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

รูปที่ 38. การตั้งค่าโดยใช้ภาพเคลื่อนไหวและข้อความส่วนท้าย

แบบฟอร์ม

หากแบบฟอร์มมีช่องใส่ข้อมูลเดียว ให้ใช้กล่องโต้ตอบปกติ นี่เป็นวิธีที่ง่ายสำหรับผู้ใช้ในการป้อนข้อมูลเดียว

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

รูปที่ 39. แบบฟอร์มพร้อมไดอะล็อกปกติ

ผลการค้นหา

ผลการค้นหาแสดงชื่อเรื่อง ข้อความย่อย (ถ้ามี) และตำแหน่งของการแสดงเส้นทางของการตั้งค่า

รูปที่ 40. ผลการค้นหา