با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
گنجاندن تصاویر و تصاویر غنی هنگام معرفی کلیدهای عبور می تواند به کاهش بار شناختی کاربران نیز کمک کند و به پشتیبانی از محتوای شما کمک کند و در عین حال تجربه را جذاب تر و قابل درک تر می کند.
اجزای طراحی
کلیدهای عبور به عنوان بهبود محصول یا خدمات موجود شما در نظر گرفته شده است و شما باید آنها را با استفاده از قالبی که کاربران قبلاً در پلتفرم شما به آن عادت کرده اند معرفی کنید.
به عنوان مثال، اگر سرویس شما برای انتقال به‌روزرسانی‌ها به کاربران از موارد بینابینی استفاده می‌کند، مشابه روشی که حساب‌های Google هنگام ورود به سیستم، کاربران را با کلیدهای عبور آشنا می‌کند، برای معرفی کلیدهای عبور از یک قالب بینابینی استفاده کنید.
در برنامه Trailblazer یک رمز عبور ایجاد کنید.
از طرف دیگر، اگر پلتفرم شما معمولاً از طریق مدال‌های بازشو، نوارهای اعلان یا سایر سبک‌های هشدار، تغییرات حساب را به کاربران اطلاع می‌دهد، سپس از آن روش‌های اطلاع رسانی آشنا برای معرفی مفهوم کلیدهای عبور استفاده کنید. این رویکرد یک تجربه سازگار و کاربرپسند را در حین استفاده از ویژگی رمز عبور جدید تضمین می کند.
یک پنجره بازشو کلید رمز در یک برنامه بانکی ایجاد کنید.
یک اعلان رمز عبور توصیفی ایجاد کنید
برای اقدامات مربوط به کلیدهای عبور، به جای دکمه‌هایی با فراخوان برای اقدام، اعلان‌های توصیفی غنی ایجاد کنید که می‌تواند اطلاعات بیشتری را به کاربران منتقل کند. اینها می توانند شامل تصاویر، عنوان، پیام و دعوت به عمل باشند.
به عنوان مثال، برای ایجاد یک رمز عبور برای حساب‌های Google، به جای آن فقط دکمه «ایجاد کلید عبور» وجود دارد که یک فراخوان برای اقدام برای «ساده کردن ورود به سیستم»، توضیح مختصری درباره کلیدهای عبور و تصویری که شامل نماد کلید عبور و روش‌های مختلف باز کردن قفل صفحه دستگاه است، وجود دارد.
صفحه ایجاد رمز عبور در حساب‌های Google
از نماد رمز عبور متعارف استفاده کنید
اتحاد FIDO یک نماد رمز عبور ایجاد کرده است که باید هنگام نمایش کلیدهای عبور از آن استفاده کنید. استفاده مداوم از آن به کاربران کمک می کند تا کلیدهای عبور را تشخیص دهند و اقدامات مربوط به کلیدهای عبور را ساده کنند.
از نماد کلیدهای عبور در رابط کاربری خود استفاده کنید:
برای نشان دادن مفهوم رمز عبور در ورود یا سایر اعلان‌ها برای تشویق کاربران به ایجاد کلیدهای عبور یا ارتقا به کلید عبور برای ورود ایمن‌تر به سیستم.
دکمه‌ها یا پیوندهایی که به کاربران اجازه می‌دهند با یک کلید عبور وارد سیستم شوند.
در تنظیمات برای کمک به شناسایی کلیدهای عبور قابل ویرایش یا حذف.
رنگ نماد را می توان تغییر داد تا با طرح رنگ محصول، برند یا رابط کاربری شما مطابقت داشته باشد.
نمایش "کارت های کلیدهای عبور" در تنظیمات حساب
برخلاف رمزهای عبور، که ترکیبی ملموس از حروف، اعداد و نمادها هستند، کلیدهای عبور تا حد زیادی برای افراد نامرئی هستند. در تنظیمات حساب، فضایی را برای کارت رمز عبور اختصاص دهید. داخل کارت شامل نماد رمز عبور، اطلاعاتی در مورد رمز عبور مانند زمان و کدام اکوسیستم ایجاد شده، آخرین بار استفاده از آن، و گزینه‌هایی برای مدیریت رمز عبور است. اگر شخصی دو یا چند کلید عبور داشته باشد، هر رمز عبور باید کارت مخصوص به خود را داشته باشد.
تنظیمات Passkey در صفحه تنظیمات امنیتی Trailblazer اطلاعات دقیقی را در مورد هر رمز عبور نشان می دهد.
تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی."],[[["\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"]]
