ส่วนต่อประสานผู้ใช้ (UI) การยืนยันที่ได้รับการป้องกันประกอบด้วยองค์ประกอบที่จำเป็นหกองค์ประกอบ องค์ประกอบบางอย่างสามารถปรับแต่งได้ แต่มีข้อกำหนดที่ต้องปฏิบัติตาม ใช้แนวทางต่อไปนี้เมื่อปรับแต่ง UI และตรวจสอบให้แน่ใจว่าเป็นไปตามข้อกำหนด หากองค์ประกอบถูกทำเครื่องหมายด้วย ข้อกำหนด: องค์ประกอบนั้นต้องใช้คุณสมบัติที่ระบุไว้
หลักเกณฑ์ต่อไปนี้ใช้ตระกูลแบบอักษร Roboto ซึ่งคุณสามารถดาวน์โหลดได้จาก fonts.google.com
UI พร้อมปุ่มฮาร์ดแวร์
Android Protected Confirmation สามารถใช้ปุ่มฮาร์ดแวร์บนอุปกรณ์เพื่อยืนยันและยกเลิกการป้อนข้อมูล
ไอคอน
ไอคอนโล่
ไอคอน | |
---|---|
ดาวน์โหลด | โล่รักษาความปลอดภัย |
ขนาดไอคอน | 32dp |
ไอคอนแอร์โรว์
ไอคอน | |
---|---|
ดาวน์โหลด | ลูกศรแป้นพิมพ์ไปทางขวา |
ขนาดไอคอน | 24dp |
รัศมีมุมตู้คอนเทนเนอร์ | 4dp |
ป้อนข้อความ
มีสองประเภทอินพุตที่ใช้ในการยืนยันที่ได้รับการป้องกัน: ยืนยันและยกเลิก
สตริงการยืนยัน
ข้อความนี้จะต้องระบุว่าปุ่มใดที่ใช้เป็นการยืนยัน
ข้อความ | กดสองครั้ง (ปุ่ม) เพื่อยืนยัน |
---|---|
ความยาวสูงสุด | ความต้องการ: ข้อความยืนยันต้องมีความยาวไม่เกินสองบรรทัด |
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 14sp |
ความสูงของเส้น | ความต้องการ: 20dp |
ยกเลิกสตริง
ข้อความยกเลิกจะต้องมองเห็นได้ชัดเจนและแยกแยะได้ง่ายจากปุ่มยืนยัน ใช้คุณสมบัติต่อไปนี้พร้อมกับคำเดียว Cancel
ข้อความ | ยกเลิก |
---|---|
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 14sp |
ความสูงของเส้น | ความต้องการ: 20dp |
ข้อความส่วนหัว
รวมข้อความส่วนหัว Android Protected Confirmation ใน UI ที่เชื่อถือได้เพื่อระบุคุณลักษณะ ใช้คุณสมบัติต่อไปนี้สำหรับข้อความส่วนหัว
ข้อความ | ข้อกำหนด: การยืนยันการป้องกันของ Android |
---|---|
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ปกติ |
ขนาดตัวอักษร | ความต้องการ: 22sp |
ความสูงของเส้น | ความต้องการ: 28dp |
ข้อความเนื้อหา
ใช้คุณสมบัติต่อไปนี้เมื่อนำองค์ประกอบข้อความเนื้อหาไปใช้ ข้อความจริงเขียนโดยนักพัฒนา API (ผู้พัฒนาแอป)
ข้อความ | ข้อความเนื้อหาจัดทำโดยนักพัฒนาแอปที่เรียกการยืนยันที่ได้รับการป้องกัน |
---|---|
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ปกติ |
ขนาดตัวอักษร | ความต้องการ: 16sp |
ความสูงของเส้น | ความต้องการ: 24dp |
ข้อความส่วนหัวย่อย
ใช้ข้อความส่วนหัวย่อยเพื่ออธิบายว่าทำไมผู้ใช้จึงเห็นหน้าจอการยืนยันที่ได้รับการป้องกัน วางข้อความนี้ที่ด้านล่างของหน้าจอและใช้คุณสมบัติต่อไปนี้
ข้อความ | ข้อกำหนด: การยืนยันนี้ให้การรักษาความปลอดภัยอีกชั้นพิเศษสำหรับการดำเนินการที่คุณกำลังจะทำ |
---|---|
ความยาวสูงสุด | ความต้องการ: ข้อความยืนยันต้องมีความยาวไม่เกินสี่บรรทัด |
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ปกติ |
ขนาดตัวอักษร | ความต้องการ: 14sp |
ความสูงของเส้น | ความต้องการ: 20dp |
UI พร้อมปุ่มซอฟต์แวร์
Android Protected Confirmation สามารถใช้ปุ่มซอฟต์แวร์เพื่อยืนยันและยกเลิกการป้อนข้อมูลได้ แนวทางต่อไปนี้จะอธิบาย UI โดยใช้ปุ่มซอฟต์แวร์
ไอคอนโล่
ดาวน์โหลดเนื้อหาไอคอนที่ ไอคอนโล่ยืนยันการป้องกันของ Android วางไอคอนที่ด้านบนของหน้าจอ
ไอคอนโล่ยืนยันที่ได้รับการป้องกันเป็นองค์ประกอบที่จำเป็น สีของโล่สามารถปรับแต่งได้แต่ต้องมองเห็นได้ชัดเจน
ป้อนข้อมูล
ใช้รูปแบบของปุ่มหลักและรองเพื่อยืนยันและยกเลิกการป้อนข้อมูล
ป้ายปุ่ม | ใช้ตัวพิมพ์ประโยคสำหรับป้ายกำกับปุ่ม |
---|---|
รัศมีของปุ่ม | 4dp |
สีเน้น | #1a73e8 |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 14sp |
ข้อความส่วนหัว
รวมข้อความส่วนหัว Android Protected Confirmation ใน UI ที่เชื่อถือได้เพื่อระบุคุณลักษณะ ใช้คุณสมบัติต่อไปนี้สำหรับข้อความส่วนหัว
ข้อความ | ข้อกำหนด: การยืนยันการป้องกันของ Android |
---|---|
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 24sp |
ความสูงของเส้น | ความต้องการ: 20dp |
ข้อความเนื้อหา
ใช้คุณสมบัติต่อไปนี้เมื่อนำองค์ประกอบข้อความเนื้อหาไปใช้ ข้อความจริงเขียนโดยนักพัฒนาแอป
ข้อความ | ข้อความเนื้อหาจัดทำโดยนักพัฒนาแอปที่เรียกการยืนยันที่ได้รับการป้องกัน |
---|---|
สี | #000000 87% |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 16sp |
ความสูงของเส้น | ความต้องการ: 24dp |
ข้อความส่วนหัวย่อย
ใช้ข้อความส่วนหัวย่อยเพื่ออธิบายว่าทำไมผู้ใช้จึงเห็นหน้าจอการยืนยันที่ได้รับการป้องกัน วางข้อความนี้ที่ด้านล่างของหน้าจอและใช้คุณสมบัติต่อไปนี้
ข้อความ | ข้อกำหนด: การยืนยันนี้ให้การรักษาความปลอดภัยอีกชั้นพิเศษสำหรับการดำเนินการที่คุณกำลังจะทำ |
---|---|
ความยาวสูงสุด | ความต้องการ: ข้อความยืนยันต้องมีความยาวไม่เกินสี่บรรทัด |
สี | #000000 54% |
ใบหน้าแบบอักษร | Roboto-ขนาดกลาง |
ขนาดตัวอักษร | ความต้องการ: 14sp |
ความสูงของเส้น | ความต้องการ: 20dp |
รองรับหลายภาษา
คุณสามารถค้นหาการแปลสำหรับส่วนประกอบที่อธิบายไว้ในการดำเนินการ C-contained ในตัวของตารางการค้นหาซึ่งเป็นส่วนหนึ่งของ AOSP