เอกสารนี้เน้นถึงหลักการและแนวทางปฏิบัติสำหรับผู้ที่กำลังออกแบบการตั้งค่าแพลตฟอร์ม 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. ผลการค้นหา