การออกแบบการยืนยันที่ได้รับการคุ้มครอง

ส่วนต่อประสานผู้ใช้ (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 โดยใช้ปุ่มซอฟต์แวร์

เค้าโครงการออกแบบซอฟต์แวร์ 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