เอกสารนี้เน้นหลักการและหลักเกณฑ์สำหรับผู้ที่ออกแบบการตั้งค่าแพลตฟอร์ม Android, การตั้งค่าหลักของ GMS (การตั้งค่า Google) หรือนักพัฒนาซอฟต์แวร์ที่ออกแบบการตั้งค่าสำหรับแอป Android ของตน
หลักการออกแบบ
ให้ภาพรวมที่ดี
ผู้ใช้ควรเห็นหน้าจอการตั้งค่าและเข้าใจการตั้งค่าแต่ละรายการและค่าต่างๆ ทั้งหมด
รูปที่ 1 การตั้งค่าและค่าปัจจุบันจะแสดงในหน้าจอระดับบนสุด
จัดระเบียบรายการต่างๆ ได้ง่ายๆ
วางการตั้งค่าที่ใช้บ่อยไว้ที่ด้านบนของหน้าจอ จำกัดจำนวนการตั้งค่า ในหน้าจอเดียว การแสดงสินค้ามากกว่า 10-15 รายการอาจเป็นการยุ่งยาก สร้างเมนูที่ใช้งานง่ายด้วยการย้ายการตั้งค่าบางอย่างไปยังหน้าจอแยกต่างหาก
รูปที่ 2 การตั้งค่าทั่วไปจะอยู่ที่ด้านบนของหน้าจอ
ทำให้ค้นหาการตั้งค่าได้ง่าย
ในบางกรณี การทำซ้ำการตั้งค่าแต่ละรายการในหน้าจอที่ต่างกัน 2 หน้าจออาจเป็นประโยชน์ สถานการณ์ต่างๆ สามารถกระตุ้นให้ผู้ใช้เปลี่ยนการตั้งค่า ดังนั้นการรวมการตั้งค่าไว้ในที่ต่างๆ จะช่วยให้ผู้ใช้พบรายการนี้ได้
สำหรับการตั้งค่าที่ซ้ำกัน ให้สร้างหน้าจอแยกสำหรับการตั้งค่าและมีจุดแรกเข้าจากที่ต่างๆ
 |
 |
รูปที่ 3 และ 4 "เสียงการแจ้งเตือนเริ่มต้น" ปรากฏขึ้นทั้งในหน้าจอ "การแจ้งเตือน" และ "เสียง"
ใช้ชื่อและสถานะที่ชัดเจน
ตั้งชื่อการตั้งค่าให้สั้นกระชับและมีความหมาย หลีกเลี่ยงการใช้ชื่อที่คลุมเครือ เช่น "การตั้งค่าทั่วไป" ใต้ชื่อจะแสดงสถานะเพื่อไฮไลต์ค่าของการตั้งค่า แสดงรายละเอียดที่เฉพาะเจาะจงแทนที่จะอธิบายแค่ชื่อ
ชื่อวิดีโอควรมีลักษณะดังนี้
- ป้อนข้อความที่สำคัญที่สุดของป้ายกำกับก่อน
- ปรับเปลี่ยนคำเชิงลบ เช่น "อย่า" หรือ "ไม่เคย" เป็นคำกลางๆ เช่น "บล็อก"
- ใช้ป้ายกำกับที่บ่งบอกถึงตัวตน เช่น "การแจ้งเตือน" แทน "แจ้งเตือนฉัน" ข้อยกเว้น: หากจำเป็นต้องพูดถึงผู้ใช้เพื่อทำความเข้าใจการตั้งค่านี้ ให้ใช้บุคคลที่ 2 ("คุณ") แทนบุคคลแรก ("ฉัน")
ชื่อควรหลีกเลี่ยงสิ่งต่อไปนี้
- คำทั่วไป เช่น ตั้งค่า เปลี่ยนแปลง แก้ไข ปรับเปลี่ยน จัดการ ใช้ เลือก หรือเลือก
- การใช้คำซ้ำจากตัวแบ่งส่วนหรือชื่อหน้าจอย่อย
- ศัพท์เทคนิค
ประเภทหน้าเว็บ
รายการการตั้งค่า
นี่เป็นหน้าจอประเภทที่ใช้กันมากที่สุด ทำให้สามารถวางการตั้งค่า ไว้ด้วยกันได้ รายการการตั้งค่าอาจเป็นการผสมผสานระหว่างการควบคุมต่างๆ เช่น สวิตช์ เมนู และแถบเลื่อน
หากมีการตั้งค่าหลายรายการในหมวดหมู่เดียว คุณสามารถจัดกลุ่มไว้ด้วยกันได้ ดู การจัดกลุ่มและเส้นแบ่งสำหรับรายละเอียดเพิ่มเติม
รูปที่ 5 ตัวอย่างรายการการตั้งค่า
มุมมองรายการ
มุมมองรายการจะใช้เพื่อแสดงรายการต่างๆ เช่น แอป บัญชี อุปกรณ์ และอื่นๆ เพิ่มตัวควบคุมเพื่อกรองหรือจัดเรียงลงในหน้าจอได้
รูปที่ 6 ตัวอย่างมุมมองรายการ
หน้าจอเอนทิตี
หน้าจอเอนทิตีใช้เพื่อแสดงการตั้งค่ารายการต่างๆ เช่น แอป บัญชี อุปกรณ์ เครือข่าย Wi-Fi ฯลฯ
ชิ้นงานจะปรากฏที่ด้านบนพร้อมไอคอน ชื่อ และคำบรรยาย การตั้งค่าทั้งหมดในหน้าจอนี้ต้องเกี่ยวข้องกับเอนทิตีนี้
รูปที่ 7 ตัวอย่างหน้าจอเอนทิตีที่ใช้ในข้อมูลแอป
รูปที่ 8 ตัวอย่างหน้าจอเอนทิตีที่ใช้ในพื้นที่เก็บข้อมูล
การตั้งค่าหลัก
คุณควรใช้การตั้งค่าหลักเมื่อเปิดหรือปิดฟีเจอร์ทั้งหมดได้ เช่น Wi-Fi หรือบลูทูธ ผู้ใช้ควบคุมฟีเจอร์นี้ได้โดยใช้สวิตช์ที่ด้านบนของหน้าจอ การใช้การตั้งค่าหลักเพื่อปิดใช้งานฟีเจอร์นี้จะเป็นการปิดใช้งานการตั้งค่าอื่นๆ ที่เกี่ยวข้องทั้งหมด
หากฟีเจอร์ต้องการคำอธิบายข้อความที่ยาวขึ้น คุณจะใช้การตั้งค่าหลักได้เนื่องจากหน้าจอประเภทนี้รองรับข้อความส่วนท้ายที่ยาวขึ้น
หากจำเป็นต้องทำซ้ำการตั้งค่าหรือลิงก์จากหลายหน้าจอ ให้ใช้การตั้งค่าหลัก เนื่องจากการตั้งค่าหลักเป็นหน้าจอแยกต่างหาก คุณจึงหลีกเลี่ยงการมีสวิตช์หลายตัวในที่ต่างๆ สำหรับการตั้งค่าเดียวกัน
รูปที่ 9 ตัวอย่างการตั้งค่าหลักที่ใช้ในหน้าจอการแจ้งเตือนของแอป การปิดตัวสลับหลักจะปิดฟีเจอร์ทั้งหมดสำหรับแอปนี้
รูปที่ 10 ตัวอย่างการตั้งค่าหลักที่ใช้ในหน้าจอการแจ้งเตือนของแอปโดยที่ ปุ่มสลับหลักปิดอยู่
หน้าจอการเลือกปุ่มตัวเลือก
โดยจะใช้หน้าจอนี้เมื่อผู้ใช้ต้องเลือกการตั้งค่า ปุ่มวิทยุอาจแสดงในกล่องโต้ตอบหรือในหน้าจอแยกต่างหากก็ได้ ไม่ควรใช้ปุ่มตัวเลือกข้างแถบเลื่อน เมนู หรือสวิตช์
หน้าจอปุ่มตัวเลือกมีรูปภาพข้อความด้านบนและส่วนท้ายที่ด้านล่างได้ ปุ่มตัวเลือกแต่ละปุ่มอาจมีข้อความย่อยและชื่อหนังสือได้
รูปที่ 11 ไม่ควรใช้ปุ่มตัวเลือกในรายการการตั้งค่า
รูปที่ 12 นี่คือวิธีใช้ปุ่มตัวเลือกในการตั้งค่าอย่างถูกต้อง
คอมโพเนนต์
ส่วนหัว
ตั้งแต่ Android 8.0 เป็นต้นไป แถบเครื่องมือการดำเนินการจะแสดงการค้นหาและความช่วยเหลือ รวมถึงการทำงานอื่นๆ ที่เกี่ยวข้อง เราไม่แนะนำเมนูรายการเพิ่มเติมเนื่องจากผู้ใช้อาจไม่พบการดำเนินการที่ซ่อนอยู่ในเมนูเหล่านี้
สำหรับแถบเครื่องมือที่ไม่มีการดำเนินการเฉพาะหน้าจอ แสดงการดำเนินการค้นหาและความช่วยเหลือ
รูปที่ 13 แถบเครื่องมือที่มีการดำเนินการค้นหาและความช่วยเหลือ
สำหรับแถบเครื่องมือที่มีการดำเนินการเดียว: นำเสนอการดำเนินการก่อนการค้นหา
รูปที่ 14 แถบเครื่องมือที่มีการทำงาน 1 รายการก่อนการค้นหาและการดำเนินการช่วยเหลือ
สำหรับแถบเครื่องมือที่มีการดำเนินการมากกว่า 1 รายการ: ให้พิจารณาวางการดำเนินการหลักก่อนการค้นหา ขณะใส่การทำงานขั้นสูงในเมนูรายการเพิ่มเติม
หากการดำเนินการทั้งหมดเป็นการดำเนินการขั้นสูงหรือมีประโยชน์สำหรับผู้ใช้กลุ่มเล็กๆ เท่านั้น ให้พิจารณาวางการดำเนินการทั้งหมดในเมนูรายการเพิ่มเติม
รูปที่ 15 แถบเครื่องมือที่มีเมนูรายการเพิ่มเติมสำหรับการดำเนินการ
ส่วนหัวของเอนทิตี
ส่วนหัวของเอนทิตีจะแสดงเฉพาะส่วนหัวเท่านั้น หรือส่วนหัวที่มีข้อความย่อย (อนุญาตให้ใช้หลายบรรทัดสำหรับข้อความย่อย) การดำเนินการด้านล่างไม่บังคับ คุณสามารถมีการดำเนินการ ได้สูงสุด 2 อย่าง
รูปที่ 16 ส่วนหัวของเอนทิตี
ส่วนไอคอนและส่วนหัว (App1) จะเลื่อนไปใต้ส่วนหัว (ข้อมูลแอป)
รูปที่ 17 ชื่อข้อมูลแอปที่นี่เป็นส่วนหนึ่งของแถบเครื่องมือ ในขณะที่ส่วนที่เหลือของหน้าจอจะเลื่อนอยู่ด้านล่าง
ลิงก์เมนู
จำเป็นต้องระบุชื่อ นอกจากนี้ คุณยังควรแสดงข้อความย่อยที่ไฮไลต์สถานะของการตั้งค่า คุณจะใช้ไอคอนหรือไม่ใช้ก็ได้
พยายามใช้ข้อความชื่อที่กระชับ หากชื่อยาว ก็สามารถไปอยู่ในบรรทัดถัดไปได้โดยไม่ต้องตัดทอน อย่าเปิดใช้เมนูหรือการทำงานเมื่อกดค้าง
ตัวอย่าง
รูปที่ 18 ลิงก์เมนูที่มีไอคอน ชื่อ และข้อความย่อย
รูปที่ 19 ลิงก์เมนูพร้อมชื่อและข้อความย่อย
รูปที่ 20 ลิงก์เมนูที่มีชื่อเท่านั้น
ลิงก์เมนูที่มีไอคอน ชื่อ ข้อความย่อย และเป้าหมาย Hit แยกต่างหากทางด้านขวา
เป้าหมายการแตะอื่นๆ ควรใช้สีของธีม
รูปที่ 21 ตัวอย่างเมนูเป้าหมายแบบแตะ 2 ครั้ง
ลิงก์เมนูที่มีไอคอน ชื่อ ข้อความย่อย และไอคอนสถิติ/ตัวเลข/การแจ้งเตือน
ค่าตัวเลข เช่น เปอร์เซ็นต์และเวลา จะแสดงทางด้านขวาพร้อมกับข้อความย่อยได้ ส่วนกราฟแท่งจะแสดงด้านล่างนี้
โดยปกติแล้ว ค่าที่เป็นตัวเลขจะแสดงอยู่ทางด้านขวา เพื่อให้ผู้ใช้สามารถดูและเปรียบเทียบค่าได้อย่างง่ายดาย
รูปที่ 22 ตัวอย่างเมนูที่มีไอคอน ชื่อ สถิติ และกราฟ
การจัดกลุ่มและตัวแบ่ง
หากหน้าจอมีการตั้งค่าหลายอย่าง คุณจะจัดกลุ่มและแยกหน้าจอต่างๆ ด้วยตัวแบ่งได้ ตอนนี้จะใช้ตัวแบ่งเพื่อจัดกลุ่มการตั้งค่าในกลุ่มแทนการแยกการตั้งค่าแต่ละรายการ ซึ่งต่างจาก Android เวอร์ชันเก่า
หากการตั้งค่าในกลุ่มเกี่ยวข้องกันอย่างใกล้ชิด คุณจะเพิ่มส่วนหัวของกลุ่มได้ หากใช้ส่วนหัวกลุ่ม คุณควรใส่ตัวแบ่งเสมอ
รูปที่ 23 การตั้งค่าที่จัดกลุ่มตามเส้นแบ่ง
เปลี่ยน
เปลี่ยนโดยใช้ไอคอน ชื่อ และข้อความย่อย
รูปที่ 24 สลับกับไอคอน ชื่อ และข้อความย่อย
เปลี่ยนโดยใช้ชื่อและข้อความย่อย
รูปที่ 25 สลับด้วยชื่อและข้อความย่อย
เปลี่ยนเป็นชื่อเท่านั้น
ชื่อสามารถแสดงร่วมกับไอคอนทางด้านซ้าย
รูปที่ 26 สลับโดยใช้ชื่อเท่านั้น
รายการและสวิตช์
คุณรวมชุดรายการเข้ากับสวิตช์ได้ การแตะด้านซ้ายของเส้นแนวตั้งจะทำหน้าที่เหมือนลิงก์และนำผู้ใช้ไปยังหน้าจอถัดไป ด้านขวาก็จะทำงานเหมือนสวิตช์มาตรฐาน
ส่วนรายการทางด้านซ้ายจำเป็นต้องมีชื่อ ไอคอนและข้อความย่อยจะมีหรือไม่มีก็ได้
รูปที่ 27 รายการและสวิตช์
Slider
ไอคอนจะมีหรือไม่มีก็ได้ในแถบเลื่อน
รูปที่ 28 Slider
ปุ่มบนหน้าจอ
การดําเนินการเชิงบวกจะใช้สีธีม ส่วนการดําเนินการเชิงลบจะเป็นสีเทา การกระทำเชิงบวกอาจรวมถึงการเปิดแอป การติดตั้งแอป การเพิ่มรายการใหม่ ฯลฯ การกระทำเชิงลบได้แก่ การล้างข้อมูล การถอนการติดตั้งแอป การลบรายการ ฯลฯ
รูปที่ 29 ปุ่มสีเทาสำหรับ "ถอนการติดตั้ง" และ "บังคับให้หยุด"
รูปที่ 30 ปุ่มสีน้ำเงินสำหรับ "เปิดเลย"
การเปิดเผยข้อมูลแบบต่อเนื่อง (ขั้นสูง)
คุณควรซ่อนการตั้งค่าที่ไม่ค่อยได้ใช้ ใช้ "ขั้นสูง" เฉพาะเมื่อมี มีอย่างน้อย 3 รายการที่จะซ่อน
ข้อความย่อยจะแสดงชื่อของการตั้งค่าที่ซ่อนไว้ โดยข้อความย่อย ควรมีเพียงบรรทัดเดียว ข้อความเพิ่มเติมจะถูกตัดด้วยจุดไข่ปลา
รูปที่ 31 ใช้ขั้นสูงในหน้าจอ "Display""
เมนูแบบเลื่อนลง
มีเมนูแบบเลื่อนลงให้ใช้งาน แต่โดยหลักการแล้วคุณควรใช้หน้าจอเลือกกล่องโต้ตอบหรือปุ่มตัวเลือกแทน ขอแนะนำให้ใช้วิธีนี้เพื่อให้การตั้งค่าง่ายขึ้น เนื่องจากการเลือกรายการเดียวจะมีอยู่ 3 รูปแบบด้วยกัน
หากจำเป็น คุณสามารถใช้เมนูแบบเลื่อนลงในกรณีที่การตั้งค่ามีตัวเลือกง่ายๆ
รูปที่ 32 เมนูแบบเลื่อนลง
ช่องทำเครื่องหมาย
ใช้สวิตช์สลับช่องทำเครื่องหมายเมื่อเป็นไปได้
ช่องทำเครื่องหมายที่ใช้ได้มีดังนี้
- สำหรับการดำเนินการเชิงลบ เช่น การจำกัดแอปหรือบล็อกบริการ
- เพื่อหลีกเลี่ยงไม่ให้มีสวิตช์มากเกินไปบนหน้าจอ
รูปที่ 33 ช่องทำเครื่องหมายใช้เพื่อลดจำนวนสวิตช์บนหน้าจอนี้
ลิงก์
ไม่แนะนำให้ใช้ลิงก์ในการตั้งค่า ให้ใช้ลิงก์เมื่อจำเป็นเท่านั้น ลิงก์ควรใช้สีเฉพาะจุดโดยไม่มีขีดเส้นใต้
รูปที่ 34 ลิงก์ที่ใช้ในการตั้งค่า
ส่วนท้าย
สามารถใช้ข้อความส่วนท้ายเพื่อเพิ่มเนื้อหาอธิบายได้ ส่วนท้ายควรมี ตัวแบ่งที่ด้านบนเสมอ ส่วนท้ายจะปรากฏที่ด้านล่างของหน้าจอ ส่วนท้ายมีลิงก์ได้ หากจำเป็น
รูปที่ 35 ข้อความส่วนท้าย
รูปแบบ
ข้อมูล
ข้อมูลที่สำคัญอาจแสดงเป็นกราฟ เช่น แผนภูมิแท่งหรือแผนภูมิวงกลม ข้อมูลนี้อาจแสดงในส่วนหัวของเอนทิตีได้ ตัวอย่างเช่น อินเทอร์เน็ตมือถือและพื้นที่เก็บข้อมูล
ข้อมูลที่สำคัญน้อยกว่าอื่นๆ สามารถนำเสนอได้โดยใช้มุมมองรายการปกติ
รูปที่ 36 ตัวอย่างที่แสดงพื้นที่เก็บข้อมูล
รูปที่ 37 ตัวอย่างที่แสดงเครือข่าย
การให้ความรู้แก่ผู้ใช้
บางฟีเจอร์อาจต้องการคำอธิบายหรือให้ความรู้เกี่ยวกับผู้ใช้ คุณสามารถใช้ภาพเคลื่อนไหวหรือรูปภาพ ร่วมกับข้อความได้ ภาพเคลื่อนไหวหรือรูปภาพควรแสดงอยู่ที่ด้านบนของหน้าจอ ส่วนข้อความส่วนท้ายจะใช้เพื่อเพิ่มคำอธิบายได้
รูปที่ 38 การตั้งค่าโดยใช้ภาพเคลื่อนไหวและข้อความส่วนท้าย
แบบฟอร์ม
หากแบบฟอร์มมีช่องป้อนข้อมูลเดียว ให้ใช้กล่องโต้ตอบปกติ ซึ่งเป็นวิธีง่ายๆ ที่ผู้ใช้จะป้อนข้อมูลทีละรายการ
แต่หากแบบฟอร์มมีหลายช่อง ให้ลองใช้กล่องโต้ตอบแบบเต็มหน้าจอ ซึ่งจะช่วยให้มีพื้นที่หน้าจอมากขึ้นในการจัดเรียงช่องในรูปแบบที่ชัดเจน
รูปที่ 39 แบบฟอร์มที่มีกล่องโต้ตอบปกติ
ผลการค้นหา
ผลการค้นหาจะแสดงชื่อ ข้อความย่อย (หากมี) และตำแหน่งเบรดครัมบ์ของการตั้งค่า
รูปที่ 40 ผลการค้นหา