หากจำเป็นต้องลงชื่อเข้าใช้สำหรับแอปของคุณ คุณจะต้องจัดให้มีขั้นตอนการลงชื่อเข้าใช้ซึ่งแสดงวิธีการลงชื่อเข้าใช้ที่แนะนำอย่างน้อย 1 วิธี
คุณสร้างขั้นตอนนี้ได้โดยปรับเปลี่ยนโค้ดตัวอย่างที่ให้ไว้ กระบวนการมีขั้นตอนดังนี้
- การเลือกวิธีลงชื่อเข้าใช้หลัก (และวิธีสำรองทั้งหมด)
- การปรับเนื้อหาของหน้าจอลงชื่อเข้าใช้
- การปรับแต่งการจัดรูปแบบภาพ
คุณสามารถดูโค้ดตัวอย่างได้ในแอป Universal Android Music Player (UAMP) Automotive โค้ดนี้ออกแบบมาเพื่อปรับเข้ากับหน้าจอหลากหลายขนาด คุณจึงไม่จำเป็นต้องตอบคำถามเกี่ยวกับโหมดแนวตั้งหรือโหมดแนวนอน
ขณะที่คุณปรับเปลี่ยนโค้ดตัวอย่างสำหรับแอปของคุณ หลักเกณฑ์ที่ให้ไว้ที่นี่จะช่วยให้คุณมั่นใจได้ว่าประสบการณ์ในการลงชื่อเข้าใช้ของคุณยังคงมีประสิทธิภาพต่อยานพาหนะ หากต้องการค้นหาวิธีที่ผู้ใช้จะใช้การลงชื่อเข้าใช้ของคุณ โปรดไปที่การลงชื่อเข้าใช้ การตั้งค่า และการค้นหา
เลือกวิธีการลงชื่อเข้าใช้
ขั้นตอนแรกในการปรับโค้ดตัวอย่างคือตัดสินใจว่าจะเสนอวิธีลงชื่อเข้าใช้แบบใดจาก 3 วิธีให้เลือกใช้
| วิธีการลงชื่อเข้าใช้ | วิธีการทำงาน |
|---|---|
|
ตอบ) Google Sign-In
(แนะนำอย่างยิ่ง) |
ป้อนบัญชี Google และรหัสผ่าน |
|
ข) การลงชื่อเข้าใช้ทางโทรศัพท์
(แนะนำให้ใช้เป็นตัวเลือกสำรองหรือตัวเลือกหลักหากแอปไม่รองรับ Google Sign-In) |
ป้อนรหัส PIN จากหน้าจอของรถยนต์ในโทรศัพท์ หรือในทางกลับกัน |
|
ค) การลงชื่อเข้าใช้แบบมาตรฐาน
(เป็นตัวเลือกสำรองที่ดีที่สุด) |
ป้อนชื่อผู้ใช้ (หรืออีเมล) และรหัสผ่านสำหรับแอป |
Google Sign-In เป็นตัวเลือกหลักหากแอปของคุณรองรับเนื่องจากเป็นวิธีที่ง่ายที่สุดสำหรับผู้ใช้ หากแอปของคุณไม่รองรับ Google Sign-In การลงชื่อเข้าใช้ทางโทรศัพท์เป็นตัวเลือกที่ดีที่สุดลำดับถัดไปเป็นตัวเลือกหลัก
ขั้นตอนการลงชื่อเข้าใช้ในโค้ดตัวอย่างจะแสดงหน้าจอของทั้ง 3 วิธี เมื่อตัดสินใจได้แล้วว่าจะรองรับตัวเลือกใดบ้าง (ทั้งตัวเลือกหลักและตัวเลือกสำรองที่คุณอาจต้องการสนับสนุน) คุณสามารถปิดใช้ตัวเลือกที่เหลืออยู่ในโค้ดตัวอย่าง และมุ่งเน้นที่การปรับแต่งหน้าจอที่เหลือได้
ก) การลงชื่อเข้าใช้ Google
หากแอปของคุณรองรับ Google Sign-In และ Google Sign-In พร้อมให้ใช้งานในระบบ คุณควรทำให้วิธีนี้เป็นตัวเลือกหลักในขั้นตอนการลงชื่อเข้าใช้ ซึ่งทำได้ง่ายเนื่องจากผู้ใช้เพียงต้องยืนยันบัญชี Google ที่มีอยู่
หากคุณเสนอการลงชื่อเข้าใช้ทางโทรศัพท์หรือการลงชื่อเข้าใช้แบบมาตรฐาน ตัวเลือกเหล่านั้นควรจะปรากฏเป็นตัวเลือกสำรองที่พร้อมใช้งานจากลิงก์ข้อความที่ด้านล่างของหน้าจอ Landing Page
ขั้นตอนการลงชื่อเข้าใช้ Google
เมื่อใช้ Google Sign-In หน้า Landing Page จะเป็นหน้าจอเดียวที่คุณต้องออกแบบ เว้นแต่ว่าคุณจะเสนอตัวเลือกสำรองไว้ด้วย การลงชื่อเข้าใช้โทรศัพท์และการลงชื่อเข้าใช้แบบมาตรฐานจะสรุปหน้าจอและขั้นตอนสำหรับตัวเลือกเหล่านั้น
ข) การลงชื่อเข้าใช้โทรศัพท์
หากแอปของคุณไม่รองรับ Google Sign-In คุณควรเสนอการลงชื่อเข้าใช้ทางโทรศัพท์เป็นตัวเลือกหลักในขั้นตอนการลงชื่อเข้าใช้ (การลงชื่อเข้าใช้โทรศัพท์เป็นตัวเลือกสำรองสำหรับการลงชื่อเข้าใช้ Google ได้ด้วย) เมื่อใช้การลงชื่อเข้าใช้ทางโทรศัพท์ ผู้ใช้จะไม่จำเป็นต้องจำชื่อผู้ใช้หรือรหัสผ่าน แต่จะป้อน PIN ที่ได้รับไปแทน
การลงชื่อเข้าใช้โทรศัพท์ทำได้ 2 วิธีดังนี้
- ผู้ใช้จะเห็น PIN บนหน้าจอของรถและป้อน PIN ดังกล่าวในโทรศัพท์
- ผู้ใช้ค้นหา PIN ในโทรศัพท์และป้อนลงในหน้าจอของรถ
หากได้เสนอชื่อผู้ใช้และรหัสผ่านแบบมาตรฐานด้วย ก็ควรเสนอเป็นตัวเลือกสำรองได้จากลิงก์ข้อความที่ด้านล่างของหน้าจอ Landing Page
ขั้นตอนการลงชื่อเข้าใช้โทรศัพท์
ด้วยการลงชื่อเข้าใช้ทางโทรศัพท์ คุณสามารถเลือกหน้า Landing Page ได้สองแบบคือ รูปแบบที่แสดง PIN สำหรับการเข้าสู่โทรศัพท์ และรูปแบบที่ให้ผู้ใช้ป้อน PIN ที่มีให้ในโทรศัพท์
มีเพียงหน้าจอสำหรับหน้า Landing Page ที่คุณต้องออกแบบ เว้นแต่ว่าคุณจะเสนอการลงชื่อเข้าใช้แบบมาตรฐานเป็นตัวเลือกสำรองด้วย
ค) การลงชื่อเข้าใช้แบบมาตรฐาน
การลงชื่อเข้าใช้แบบมาตรฐานสําหรับแอปกำหนดให้ผู้ใช้ป้อนชื่อผู้ใช้ (หรืออีเมล) ในหน้า Landing Page จากนั้นป้อนรหัสผ่านในหน้าถัดไป
การลงชื่อเข้าใช้แบบมาตรฐานเป็นตัวเลือกสำรองในการลงชื่อเข้าใช้ Google หรือโทรศัพท์ หรือถ้าไม่มีการสนับสนุนอีก 2 ตัวเลือกนี้ ตัวเลือกนี้ก็สามารถเป็นตัวเลือกการลงชื่อเข้าใช้หลักได้ อย่างไรก็ตาม เราไม่แนะนำให้ลงชื่อเข้าใช้แบบมาตรฐานเป็นตัวเลือกหลัก เนื่องจากมีขั้นตอนหลายขั้นตอนและต้องทำการจำชื่อผู้ใช้และรหัสผ่าน
เนื่องจากผู้ใช้อาจจำชื่อผู้ใช้และรหัสผ่านไม่ได้ คุณจึงควรเสนอตัวเลือกในการเรียกหรือรีเซ็ตรหัสผ่าน ตัวเลือกเหล่านี้ควรนำเสนอผ่านลิงก์ข้อความที่ด้านล่างของหน้าจอทางเข้า เพื่อไม่ให้แย่งความสนใจจากการทำงานหลักของการป้อนชื่อผู้ใช้และรหัสผ่าน
ขั้นตอนการลงชื่อเข้าใช้แบบมาตรฐาน
ขั้นตอนสำหรับการลงชื่อเข้าใช้แบบมาตรฐานจะเป็นแบบต่อเนื่องกัน 2 หน้าจอ (การป้อนชื่อผู้ใช้และการป้อนรหัสผ่าน) พร้อมตัวเลือกเส้นทางด้านข้างไปยังอีก 2 หน้าจอ คุณต้องใช้เวอร์ชันของทั้ง 4 หน้าจอ
ปรับเนื้อหาของหน้าจอ
เมื่อคุณกำหนดวิธีการลงชื่อเข้าใช้ที่แอปของคุณจะรองรับแล้ว คุณจะทราบว่าหน้าจอใดจะอยู่ในขั้นตอนการลงชื่อเข้าใช้ของคุณ คุณอาจมีหน้าจอจำนวน 1 ถึง 6 หน้าจอที่กำหนดเนื้อหา (และการจัดรูปแบบ ตามที่กล่าวไว้ในปรับแต่งการจัดรูปแบบ) โดยขึ้นอยู่กับสิ่งที่เลือกรองรับ
หากเลือก Google Sign-In หรือลงชื่อเข้าใช้ทางโทรศัพท์โดยไม่มีตัวเลือกสำรอง คุณจะมีหน้าจอลงชื่อเข้าใช้ 1 หน้าจอให้สร้าง ในทางกลับกัน หากเลือกการลงชื่อเข้าใช้ Google โดยมีทั้ง 2 ตัวเลือกเป็นข้อมูลสำรอง คุณจะมี 6 หน้าจอ (1 หน้าจอสำหรับ Google Sign-In, 1 หน้าจอสำหรับการลงชื่อเข้าใช้ทางโทรศัพท์ และ 4 หน้าจอสำหรับการลงชื่อเข้าใช้แบบมาตรฐาน)
ตัวอย่างหน้าจอเหล่านี้จะแสดงในส่วน Google Sign-In, การลงชื่อเข้าใช้ทางโทรศัพท์ และการลงชื่อเข้าใช้แบบมาตรฐาน หากคุณกำลังทำงานจากโค้ดตัวอย่าง คุณสามารถแก้ไขเวอร์ชันของหน้าจอเหล่านี้ที่สร้างในโค้ดได้ หากไม่ได้ใช้โค้ดตัวอย่าง คุณก็ควรใช้ตัวอย่างเหล่านี้เป็นโมเดลได้
คุณจะต้องทำการปรับเปลี่ยนบางอย่างกับเนื้อหาของหน้าจอเหล่านี้ ซึ่งรวมถึงสิ่งต่อไปนี้
- แทนที่โลโก้สำหรับแอป Aural สมมติด้วยโลโก้แอปของคุณ
- แก้ไขข้อความและลิงก์เพื่ออ้างอิงแอปของคุณและเนื้อหาที่เกี่ยวข้อง
- ปรับตรรกะที่แสดง PIN
จะมีการอธิบายเกี่ยวกับการแทนที่โลโก้และการแสดง PIN ในรายละเอียดเพิ่มเติมด้านล่าง
แทนที่โลโก้แอป
หลังจากนำหน้าจอที่ไม่จำเป็นออกจากโค้ดตัวอย่างแล้ว คุณจะต้องตรวจสอบว่าหน้าจอที่เหลือแสดงโลโก้แอปแทนโลโก้สำหรับแอป Aural ที่สมมติขึ้น การแทนที่นี้อาจส่งผลต่อการออกแบบหน้าเว็บในด้านอื่นๆ ตามที่อธิบายไว้ด้านล่าง
การแทนที่โลโก้อาจนําคุณไปยังการปรับแต่งอื่นๆ เช่น การปรับแต่งสีขององค์ประกอบอื่นๆ ของหน้าเว็บ หรือการปรับพื้นที่ว่างรอบโลโก้
การปรับแต่งสีให้เข้ากับโลโก้
คุณปรับแต่งโค้ดลงชื่อเข้าใช้เพื่อใช้สีเฉพาะจุดได้ เพื่อให้โลโก้แอปกลมกลืนกับองค์ประกอบของหน้าโดยรอบ เราจะกล่าวถึงการปรับแต่งการจัดรูปแบบในขั้นตอนถัดไป นั่นคือปรับแต่งการจัดรูปแบบ
การปรับพื้นที่โลโก้
หลังจากแทนที่โลโก้ Aural ด้วยโลโก้ของแอป ซึ่งจะมีการปรับขนาดเป็นขนาดเดียวกับโลโก้ Aural ให้ตรวจสอบระยะห่างรอบๆ โลโก้ หากพื้นที่ว่างไม่ตรงตามหลักเกณฑ์การใช้แบรนด์ คุณจะเพิ่มพื้นที่รอบๆ ขอบของโลโก้ในไฟล์โลโก้ได้
อีกวิธีหนึ่งคือการปรับระยะห่างบนหน้าจอ แต่เมื่อใช้วิธีนี้ คุณจะต้องปรับระยะห่างรอบๆ โลโก้แยกกันสำหรับแต่ละเลย์เอาต์ ด้วยเหตุนี้ การเพิ่มพื้นที่ภายในไฟล์โลโก้จึงเป็นวิธีที่ง่ายที่สุดในการเพิ่มพื้นที่รอบโลโก้
ปรับตรรกะการแสดง PIN
ตัวอย่างขั้นตอนการลงชื่อเข้าใช้จะสร้างรหัส PIN แบบสุ่มโดยใช้ฟังก์ชัน RAND ง่ายๆ หากต้องการใช้วิธีการสร้าง PIN ตามตรรกะทางธุรกิจที่มีประสิทธิภาพยิ่งขึ้น คุณต้องแก้ไขโค้ดที่เกี่ยวข้องใน PinCodeSignInFragment.kt ซึ่งเป็นส่วนหนึ่งของแอป Universal Android Music Player (UAMP) Automotive
เพื่อป้องกันไม่ให้ผู้ใช้สร้างความสับสนมากเกินไป
ปรับแต่งการจัดรูปแบบ
หลังจากปรับเนื้อหาของหน้าจอลงชื่อเข้าใช้แล้ว คุณสามารถใช้การจัดรูปแบบส่วนกลางที่เหมาะสมกับแบรนด์กับด้านต่างๆ ของ UI ที่ส่งผลกระทบต่อหลายหน้าจอ
คุณอาจต้องปรับแต่งรายการใดรายการหนึ่งหรือทั้งหมดต่อไปนี้เพื่อแสดงถึงสไตล์ของแบรนด์
- รูปแบบช่องการป้อนข้อมูล: เติมขอบ เติมขอบ หรือขีดเส้นใต้
- รูปแบบของปุ่ม: โค้งมนหรือสี่เหลี่ยมผืนผ้า
- สี: การเน้นเสียง การใส่ปุ่มและข้อความ การกรอกแบบฟอร์มและเส้นโครงร่าง ข้อผิดพลาดของแบบฟอร์ม
- การพิมพ์: แบบอักษร ขนาดข้อความ
ตัวอย่างของตัวเลือกการกำหนดเองเหล่านี้ได้แก่ โปรดทราบว่าการจัดรูปแบบที่กำหนดเองจะต้องคงคอนทราสต์ ขนาดขั้นต่ำสำหรับข้อความและเป้าหมายการสัมผัส ตลอดจนข้อกำหนดอื่นๆ ที่อธิบายไว้ในหลักเกณฑ์สำหรับหน้าจอที่กำหนดเอง
ช่องและปุ่มอินพุต
ตัวอย่างขั้นตอนการลงชื่อเข้าใช้จะใช้ช่องป้อนข้อมูลที่มีเส้นขอบและปุ่มวงกลมเป็นรูปแบบเริ่มต้น ดำเนินการต่อและเปลี่ยนรูปแบบเริ่มต้นเหล่านี้หากใช้สไตล์อื่น เช่น ปุ่มสี่เหลี่ยมผืนผ้าแทนปุ่มทรงกลม จะแสดงแบรนด์ของคุณได้ดีกว่า
สีสัน
การปรับแต่งสีเฉพาะจุดและสีสถานะข้อผิดพลาดที่ใช้ในแบบฟอร์มและปุ่มต่างๆ เป็นวิธีที่ดีในการแสดงแบรนด์ของคุณตลอดขั้นตอนการลงชื่อเข้าใช้ การปรับแต่งสีเหล่านี้ยังเป็นสิ่งสำคัญสำหรับการตรวจสอบว่าช่องป้อนข้อมูล ปุ่ม และลิงก์ดูดีในหน้าเดียวกับโลโก้แอปของคุณ แทนที่จะทับซ้อนกับโลโก้
ตรวจสอบว่าสีที่คุณระบุคงอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 ระหว่างองค์ประกอบหน้าเว็บที่อยู่ติดกัน หากต้องการคําแนะนําเพิ่มเติมเกี่ยวกับสีและรายละเอียดเกี่ยวกับชุดสีที่ใช้ใน Android Automotive OS โปรดดูรากฐานภาพ: สี
การพิมพ์
แม้ว่าการพิมพ์ตัวอักษรในขั้นตอนการลงชื่อเข้าใช้ตัวอย่างจะสามารถปรับแต่งได้ แต่โปรดระมัดระวังเมื่อทำการเปลี่ยนแปลงที่อาจส่งผลต่อการอ่านค่า โปรดดูข้อมูลเกี่ยวกับแบบอักษร ขนาดประเภทขั้นต่ำ และข้อควรพิจารณาอื่นๆ เกี่ยวกับความอ่านได้ง่ายของข้อความบนหน้าจอรถยนต์ในพื้นฐานของภาพ: การพิมพ์
หลักเกณฑ์การลงชื่อเข้าใช้
หลักเกณฑ์ในส่วนนี้เกี่ยวข้องกับวิธีการทำงานของการลงชื่อเข้าใช้ใน Android Automotive OS เพื่อให้ใช้งานได้ดีที่สุด ตัวอย่างขั้นตอนการลงชื่อเข้าใช้ที่มีอยู่ในแอป Universal Android Music Player (UAMP) ส่วนใหญ่แล้วจะเป็นไปตามหลักเกณฑ์เหล่านี้ แต่ไม่ได้ให้วิธีสร้างบัญชี เนื่องจากจะต้องใช้ตรรกะเฉพาะแอป
หากคุณได้ปฏิบัติตามกระบวนการปรับแต่งที่อธิบายไว้ในส่วนนี้ และไม่ได้เปลี่ยนแปลงวิธีการทำงานของโค้ด ขั้นตอนการลงชื่อเข้าใช้ของคุณควรอยู่ในสถานะที่ดีตามหลักเกณฑ์ด้านล่าง อย่างไรก็ตาม อย่าลืมตรวจสอบว่าการจัดรูปแบบที่กำหนดเองเป็นไปตามข้อกำหนดทั่วไปที่ระบุไว้ในหลักเกณฑ์สำหรับหน้าจอที่กำหนดเอง
หากคุณได้ทำการเปลี่ยนแปลงที่สำคัญมากขึ้นในหน้าจอหรือโค้ดลงชื่อเข้าใช้นอกเหนือจากที่อธิบายไว้ในส่วนนี้ ให้ตรวจสอบขั้นตอนการลงชื่อเข้าใช้ตามหลักเกณฑ์สำหรับหน้าจอที่กำหนดเองทั่วไป และหลักเกณฑ์การลงชื่อเข้าใช้ที่เฉพาะเจาะจงด้านล่าง
| ระดับความต้องการ | หลักเกณฑ์ |
|---|---|
| ควร |
นักพัฒนาแอปควรทำดังนี้
|
| พ.ค. |
นักพัฒนาแอปอาจทำสิ่งต่อไปนี้
|
จุดประสงค์
ประสบการณ์การรับชมสื่อที่สม่ำเสมอ หน้าจอลงชื่อเข้าใช้ที่ออกแบบมาสำหรับแอปสื่อแอปหนึ่งควรมอบประสบการณ์การใช้งานที่สอดคล้องกับหน้าจอลงชื่อเข้าใช้สำหรับแอปสื่ออื่นๆ อย่างกว้างขวาง
รูปลักษณ์และความรู้สึกที่สอดคล้อง หน้าจอลงชื่อเข้าใช้ควรรองรับหลักการออกแบบพื้นฐานและรากฐานของภาพสำหรับ Android Automotive OS