ปรับแต่งประสบการณ์การตั้งค่า

หน้านี้อธิบายวิธีการสร้างขั้นตอนสำหรับตัวช่วยตั้งค่า (SUW) การสร้างคำบรรยาย และการระบุขั้นตอนที่จำเป็นและขั้นตอนเสริม

คุณสามารถปรับแต่งหน้าจอต่อไปนี้ได้:

การปรับแต่งที่จำกัด: โมดอลเนื้อหา	การปรับแต่งที่จำเป็น: เทมเพลตที่ Google จัดเตรียมไว้ให้
ข้อกำหนดในการให้บริการของ Google ลงชื่อเข้าใช้ Google กูเกิล เจมินี กูเกิลเพลย์	หน้าจอต้อนรับ การเลือกภาษา การเชื่อมต่อและการตั้งค่า Wi-Fi การสร้างโปรไฟล์ (ตั้งชื่อโปรไฟล์) หน้าจอสรุป การตั้งค่าอุปกรณ์บลูทูธ การป้องกันโปรไฟล์ (การตั้งค่าการล็อกโปรไฟล์) หน้าจอโหลด

ปรับแต่งโมเดลเนื้อหา

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

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

• แถบนำทาง: คุณสามารถเลือกวางแถบนำทางไว้ด้านบนหรือด้านข้างของหน้าต่างป๊อปอัพได้ นอกจากนี้ คุณยังสามารถปรับแต่งไอคอนนำทาง (รูปภาพ ขนาด สี ตำแหน่ง) พื้นหลัง (รูปภาพ ความโปร่งใส สี) ความกว้างหรือความสูง (ขึ้นอยู่กับตำแหน่ง) ได้อีกด้วย

• การตั้งค่าโมดอล: ความกว้างของพื้นที่เนื้อหาต้องมากกว่า 1224 dp เพื่อให้หน้าจอของ Google แสดงผลในแนวนอนได้ นอกจากนี้ คุณสามารถปรับแต่งความกว้าง ความสูง ตำแหน่งบนหน้าจอ มุมโค้งมน และรูปแบบขอบของโมดอลได้ แนะนำให้ใช้การแสดงผลแบบเต็มหน้าจอเมื่อไม่สามารถรับประกันระยะขอบที่เพียงพอรอบโมดอลได้

• พื้นหลังโมดอล: รูปภาพหรือสี ความโปร่งใส

ตัวอย่างการปรับแต่งโมดอลเนื้อหา

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

ตัวอย่างการปรับแต่งโมดอลเนื้อหาแสดงอยู่ในรูปที่ 3 และรูปที่ 4

ปรับแต่งหน้าจอที่ Google จัดเตรียมไว้ให้

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

มุมมองแบบดื่มด่ำเทียบกับมุมมองแบบไม่ดื่มด่ำ

คุณมีสองตัวเลือกสำหรับการแสดงผล SuW:

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

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

ปรับแต่งเค้าโครงภูมิทัศน์

องค์ประกอบที่สามารถปรับแต่งได้ในโหมดแนวนอนมีดังต่อไปนี้:

เค้าโครงและพื้นหลัง

1. แถบนำทาง: แถบนำทางนี้มีปุ่มย้อนกลับ คุณสามารถปรับแต่งเค้าโครงและพื้นหลังของแถบ รวมถึงไอคอนนำทาง (รูปภาพ ขนาด สี และตำแหน่ง) พื้นหลัง (รูปภาพ ความโปร่งใส สี) และความกว้างได้
2. แถบคำสั่ง: แถบคำสั่งคือกรอบที่อยู่ด้านล่างของหน้าเว็บ ซึ่งประกอบด้วยปุ่มคำสั่ง (call-to-action buttons) ที่โปร่งใสตามค่าเริ่มต้น คุณสามารถปรับแต่งความสูงและระยะห่างของแถบ รวมถึงรูปภาพ ความโปร่งใส และสีของพื้นหลังได้
3. การจัดวางหน้ากระดาษ: อัตราส่วนคอลัมน์และระยะขอบหน้ากระดาษ
4. พื้นหลังของหน้าเว็บ: สีพื้นหลังหรือภาพพื้นหลัง

ส่วนประกอบ

5. ภาพประกอบหลัก: รูปภาพ ขนาด และตำแหน่งการจัดวาง
6. เมนู แบบเลื่อนลง: แบบอักษร (ตระกูล ขนาด สี), ไอคอน (รูปภาพ ขนาด สี) และเส้นแบ่ง
7. ปุ่ม: แบบอักษร (ตระกูล ขนาด สี), พื้นหลัง (รูปภาพ ความโปร่งใส สี), ขนาดปุ่ม (ความกว้าง ความสูง), ตำแหน่ง, ระยะห่างภายใน, มุมโค้งมน (การจัดสไตล์สำหรับการกระทำหลักและรอง รวมถึงสถานะปุ่มที่แตกต่างกัน)

8. ส่วนหัวของหน้า: แบบอักษร (ตระกูล ขนาด และสี), ตำแหน่งของชื่อเรื่องและหัวข้อย่อย, ข้อความ และไอคอนของหน้า (ว่าจะแสดงไอคอนหรือไม่ และรูปภาพ ขนาด และสีของไอคอน)
9. รายการ: แบบอักษร (ตระกูล ขนาด และสี), ไอคอน (รูปภาพ ขนาด และสี ไอคอนของ Google ไม่สามารถปรับแต่งได้), ตำแหน่ง, ระยะห่างภายใน, ความสูงของรายการ และเส้นแบ่ง หากต้องการเปลี่ยนแปลงข้อความ คุณต้องขออนุมัติจาก Google ก่อน

หน้าจอโหลด

10. แอนิเมชัน: (ไม่ระบุ) หรือรูปภาพ ขนาด ตำแหน่ง
11. องค์ประกอบข้อความ: แบบอักษร (ตระกูล ขนาด และสี), ตำแหน่งการจัดวาง และข้อความอื่นๆ

ตัวอย่างการจัดวางภูมิทัศน์แบบกำหนดเอง

วิธีหนึ่งในการปรับแต่งหน้าจอต้อนรับหรือหน้าจอสรุปคือการใช้เทมเพลตที่ Google จัดเตรียมไว้ให้

ปรับแต่งโหมดภาพบุคคล

ต่อไปนี้คือองค์ประกอบที่สามารถปรับแต่งได้ในโหมดแนวตั้ง

เค้าโครงและพื้นหลัง

1. แถบนำทาง: แถบนำทางนี้มีปุ่มย้อนกลับ คุณสามารถปรับแต่งเค้าโครงและพื้นหลังของแถบ รวมถึงไอคอนนำทาง (รูปภาพ ขนาด สี และตำแหน่ง) พื้นหลัง (รูปภาพ ความโปร่งใส สี) และความกว้างได้
2. แถบคำสั่ง: แถบคำสั่งคือกรอบที่อยู่ด้านล่างของหน้าเว็บ ซึ่งประกอบด้วยปุ่มคำสั่ง (call-to-action buttons) ที่โปร่งใสตามค่าเริ่มต้น คุณสามารถปรับแต่งความสูงและระยะห่างของแถบ รวมถึงรูปภาพ ความโปร่งใส และสีของพื้นหลังได้
3. การจัดวางหน้ากระดาษ: ระยะขอบหน้ากระดาษ
4. พื้นหลังหน้าเว็บ: สีพื้นหลังหรือภาพพื้นหลัง

ส่วนประกอบ

5. ภาพหลัก: รูปภาพ ขนาด ตำแหน่งการจัดวาง
6. เมนู แบบดรอปดาวน์: แบบอักษร (ตระกูล ขนาด สี), ไอคอน (รูปภาพ ขนาด สี), เส้นแบ่ง
7. ปุ่ม: แบบอักษร (ตระกูล ขนาด สี), พื้นหลัง (รูปภาพ ความโปร่งใส สี), ขนาดปุ่ม (ความกว้าง ความสูง), ตำแหน่ง, ระยะห่างภายใน, มุมโค้งมน คุณควรกำหนดรูปแบบที่แตกต่างกันสำหรับการกระทำหลักและการกระทำรอง รวมถึงสถานะต่างๆ ของปุ่ม

8. ส่วนหัวของหน้า: แบบอักษร (ตระกูล ขนาด สี), ตำแหน่งของชื่อเรื่องและหัวข้อย่อย, ข้อความ, ไอคอนของหน้า (ว่าจะแสดงไอคอนหรือไม่ และรูปภาพ ขนาด และสีของไอคอน)
9. รายการ: แบบอักษร (ตระกูล ขนาด และสี), ไอคอน (รูปภาพ ขนาด และสี ไอคอนของ Google ไม่สามารถปรับแต่งได้), ตำแหน่ง, ระยะห่างภายใน, ความสูงของรายการ และเส้นแบ่ง หากต้องการเปลี่ยนแปลงข้อความ คุณต้องขออนุมัติจาก Google ก่อน

หน้าจอโหลด

10. แอนิเมชัน: แอนิเมชัน (ไม่ระบุ) หรือภาพ ขนาด ตำแหน่ง
11. การตั้ง ค่าข้อความ: แบบอักษร (ตระกูล ขนาด สี) ตำแหน่งการจัดวาง ข้อความ

ตัวอย่างการจัดวางภาพบุคคลแบบกำหนดเอง