تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يمكن أن يساعد تضمين الرسوم التوضيحية والمرئيات الغنية عند تقديم مفاتيح المرور في تخفيف العبء المعرفي على المستخدمين أيضًا، وفي دعم المحتوى الخاص بك مع جعل التجربة أكثر جاذبية وقابلية للفهم.
مكوّنات التصميم
تم تصميم مفاتيح المرور لتحسين منتجك أو خدمتك الحالية، ويجب تقديمها بتنسيق معتاد للمستخدمين على منصتك.
على سبيل المثال، إذا كانت خدمتك تستخدم الإعلانات البينية لنقل آخر الأخبار إلى المستخدمين، على غرار الطريقة التي تعرّف بها "حسابات Google" المستخدمين على مفاتيح المرور أثناء تسجيل الدخول، ننصحك باستخدام تنسيق إعلان بيني لتعريف المستخدمين على مفاتيح المرور.
أنشئ صفحة إعلانية بينية لمفتاح مرور في تطبيق Trailblazer.
بدلاً من ذلك، إذا كانت منصتك تُعلم المستخدمين عادةً بالتغييرات في الحسابات من خلال نوافذ مشروطة منبثقة أو أشرطة إشعارات أو أنماط تنبيه أخرى، استخدِم طرق الإشعارات المألوفة هذه لتقديم مفهوم مفاتيح المرور. يضمن هذا النهج تقديم تجربة متّسقة وسهلة الاستخدام عند طرح ميزة مفتاح المرور الجديدة.
نافذة منبثقة لإنشاء مفتاح مرور في تطبيق مصرفي
إنشاء طلب وصفي لمفتاح المرور
بالنسبة إلى الإجراءات المتعلّقة بمفاتيح المرور، بدلاً من مجرد أزرار تتضمّن عبارة تحث المستخدم على اتخاذ إجراء،
يمكنك إنشاء طلبات غنية بالوصف يمكنها نقل المزيد من المعلومات إلى المستخدمين.
ويمكن أن تشمل هذه العناصر رسومات توضيحية وعنوانًا ورسائل وعبارة تحث المستخدم على اتخاذ إجراء.
على سبيل المثال، لإنشاء مفتاح مرور لحسابات Google، بدلاً من زر "إنشاء مفتاح مرور" فقط، تظهر صفحة بينية تتضمّن عبارة تحثّ المستخدم على اتّخاذ إجراء "تبسيط عملية تسجيل الدخول"، وشرحًا موجزًا لمفاتيح المرور، ورسمًا توضيحيًا يتضمّن رمز مفتاح المرور وطرقًا مختلفة لفتح قفل شاشة الجهاز.
صفحة إنشاء مفتاح مرور في "حسابات Google"
استخدام رمز مفتاح المرور الأساسي
أنشأ تحالف FIDO رمزًا لمفتاح المرور يجب استخدامه عند تمثيل مفاتيح المرور. سيساعد استخدامها بشكل متّسق المستخدمين في التعرّف على مفاتيح المرور وتبسيط الإجراءات ذات الصلة بمفاتيح المرور.
استخدِم رمز مفاتيح المرور في واجهة المستخدم:
لتمثيل مفهوم مفتاح المرور في عملية الإعداد أو الطلبات الأخرى لتشجيع المستخدمين على إنشاء مفاتيح مرور أو الترقية إلى مفتاح مرور من أجل تسجيل الدخول بشكل أكثر أمانًا
في الأزرار أو الروابط التي تسمح للمستخدمين بتسجيل الدخول باستخدام مفتاح مرور
ضمن الإعدادات للمساعدة في تحديد مفاتيح المرور التي يمكن تعديلها أو حذفها
يمكن تغيير لون الرمز ليتوافق مع نظام الألوان الخاص بمنتجك أو علامتك التجارية أو واجهة المستخدم.
عرض "بطاقات مفاتيح المرور" ضمن إعدادات الحساب
على عكس كلمات المرور التي تتألف من مجموعات ملموسة من الأحرف والأرقام والرموز، لا يمكن للمستخدمين رؤية مفاتيح المرور إلى حد كبير. تخصيص مساحة لبطاقة مفاتيح المرور في إعدادات الحساب داخل البطاقة، أدرِج رمز مفتاح المرور
ومعلومات عن مفتاح المرور، مثل وقت إنشائه والنظام الأساسي الذي تم إنشاؤه عليه، ووقت آخر استخدام له، وخيارات لإدارة مفتاح المرور. إذا كان لدى المستخدم مفتاحا مرور أو أكثر، يجب أن يكون لكل مفتاح مرور بطاقته الخاصة.
تعرض إعدادات مفتاح المرور ضمن صفحة إعدادات الأمان في Trailblazer معلومات مفصّلة عن كل مفتاح مرور.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eWhen introducing passkeys, incorporate visuals and illustrations to enhance user understanding and engagement.\u003c/p\u003e\n"],["\u003cp\u003eMaintain design consistency by introducing passkeys using familiar UI elements like interstitials, modals, or notification bars commonly used in your platform.\u003c/p\u003e\n"],["\u003cp\u003eInstead of simple buttons, use descriptive prompts with visuals and clear messaging to guide users through passkey-related actions.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the standardized passkey icon provided by the FIDO alliance for consistent representation across your UI elements.\u003c/p\u003e\n"],["\u003cp\u003eProvide a dedicated "passkeys card" within account settings to display information about each passkey, including its origin, last used date, and management options.\u003c/p\u003e\n"]]],[],null,["# Passkeys user interface design\n\n| **Note:** This article is a part of a series about designing passkeys user experiences on the web that includes [Passkeys user journeys](/identity/passkeys/ux/user-journeys) and [Communicating passkeys to users](/identity/passkeys/ux/communicating-passkeys).\n\nIncorporating illustrations and rich visuals when introducing passkeys can help\nlighten the cognitive load on users also, and help support your content while\nmaking the experience more engaging and understandable.\n\nDesign components\n-----------------\n\nPasskeys are intended as an enhancement to your existing product or service and\nyou should introduce them using a format that users are already accustomed to\non your platform.\n\nFor example, if your service uses interstitials to convey updates to users,\nsimilar to how Google Accounts introduce users to passkeys during sign in,\nconsider using an interstitial format to introduce passkeys.\n\n\u003cbr /\u003e\n\nCreate a passkey interstitial in the Trailblazer app. \n\n\u003cbr /\u003e\n\nAlternatively, if your platform typically informs users of account changes\nthrough pop-up modals, notification bars, or other alert styles, then employ\nthose familiar notification methods to introduce the concept of passkeys. This\napproach ensures a consistent and user-friendly experience as you roll out the\nnew passkey feature.\n\n\u003cbr /\u003e\n\nCreate a passkey pop-up in a banking app.\n\n\u003cbr /\u003e\n\nCreate a descriptive passkey prompt\n-----------------------------------\n\nFor passkeys related actions, instead of just buttons with a call to action,\ncreate rich descriptive prompts that can convey more information to users.\nThese can include illustrations, a headline, messaging, and a call to action.\n\nFor example, for creating a passkey for\nGoogle Accounts, instead only a \"Create passkey\" button there is an\ninterstitial with a call to action to \"Simplify your sign in\", a brief\nexplanation of passkeys and an illustration that includes the passkey icon and\nvarious methods of unlocking a device screen.\n\n\u003cbr /\u003e\n\nPasskey creation page on Google Accounts\n\n\u003cbr /\u003e\n\nUse the canonical passkey icon\n------------------------------\n\n[FIDO alliance has created a passkey icon](https://media.fidoalliance.org/wp-content/uploads/2022/09/Passkey-Style-Guide.zip) you should use when representing passkeys. Using it consistently will help users recognize passkeys and streamline the passkeys related actions.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUse the passkeys icon in your UI:\n\n- To represent the passkey concept in onboarding or other prompts to encourage users to create passkeys or upgrade to a passkey for a more secure sign-in.\n- In buttons or links allowing users to sign in with a passkey.\n- Within settings to help identify passkeys that can be edited or deleted.\n\nIcon color can be changed to match the color scheme of your product, brand, or\nuser interface.\n\nDisplay \"passkeys cards\" within account settings\n------------------------------------------------\n\nUnlike passwords, which are tangible combinations of letters, numbers, and\nsymbols, passkeys are largely invisible to people. Dedicate space for a\npasskeys card in the account settings. Inside the card include the passkey\nicon, information about the passkey such as when and which ecosystem it was\ncreated on, when was it last used, and options for managing the passkey. If\nsomeone has two or more passkeys, each passkey should have its own card.\n\n\u003cbr /\u003e\n\nPasskey settings within Trailblazer security settings page show detailed information about each passkey.\n\n\u003cbr /\u003e"]]
