• Telegram
  • Google Plus
  • Linked In

تأیید اعتبار از طریق اثرانگشت در طراحی متریال

تأیید اعتبار از طریق اثرانگشت در طراحی متریال

تاریخ درج: خلاصه

طراحی وب سایت، آموزش متریال دیزاین، سیستم اعتبار سنجی با اثر انگشت، سیستم تأیید اعتبار

تأیید اعتبار از طریق اثرانگشت در طراحی متریال

اثرانگشت

فقط در اندروید

سیستم تشخیص اثرانگشت میتواند برای باز کردن قفل دستگاه، ورود به یک برنامه و تصدیق خریدهای انجام شده توسط Google Play و بعضی برنامه های ثانویه استفاده شود.
جهت تأیید خرید با استفاده از اثرانگشت، دیالوگ تأیید اثرانگشت را نمایش دهید.
اثرانگشت به اندازه یک PIN یا پسورد قوی، امن نمی باشد. روش های تأیید دیگر شامل پسورد حساب کاربری، PIN یک برنامه و اختیارات برنامه میباشد.

زمان استفاده

در زمان باز کردن برنامه
در جریان خرید برنامه
در تنظیمات برنامه
بعد از ثبت نام

آیکون

سایز آیکون اثرانگشت : 24dp
دایره اطراف آیکون : 40dp


ثبت نام

قبل از فراخوانی اثرانگشت، باید از کاربر برای استفاده از اثرانگشت به عنوان یک روش جایگزین برای تصدیق اعتبارشان، تأیید بگیرید.
مواقعی که میتوان کاربر را به استفاده از اثرانگشت دعوت نمود :
• در زمان باز کردن برنامه
• در جریان خرید برنامه
• در تنظیمات برنامه
• بعد از ثبت نام

باز کردن برنامه



بلافاصله بعد از LOGIN از کاربر درخواست میشود که اثرانگشت خود را وارد نماید.



بلافاصله بعد از ایجاد حساب کاربری از کاربر درخواست میشود که اثرانگشت خود را وارد نماید.

در جریان خرید برنامه


بلافاصله بعد از خرید با یک حساب کاربری موجود از کاربر درخواست میشود که اثرانگشت خود را وارد نماید.

در تنظیمات برنامه




انتخاب تأیید اعتبار با اثرانگشت در تنظیمات برنامه

تأیید اعتبار

کاربران برنامه شما میتوانند تنظیمات را در حالت ورود یا تصدیق خرید با استفاده از اثرانگشت قرار دهند.
زمانی که کاربر نیاز به تأیید شدن دارد، دیالوگ تأیید اثرانگشت را در محل صفحه ورودی یا log in نمایش دهید.

عنوان

از عنوانی استفاده کنید که عملیات در حال انجام را شرح دهد مانند sign in . این عنوان نباید جهت معرفی اثرانگشت استفاده شود.

متن ثانویه

از عبارت "Confirm fingerprint" به معنای تأیید اثرانگشت استفاده نمایید. این عبارت با تنظیمات اندروید هماهنگی دارد.
همچنین میتوانید عبارت بالا را با متن دیگری که مربوط به عملیات کاربر میباشد ترکیب نمایید مانند "جهت تکمیل خرید اثرانگشت را تأیید نمایید" (confirm fingerprint to complete purchase).

دیالوگ تأیید اثرانگشت


مشخصات دیالوگ تأیید اثرانگشت
padding چپ و راست دیالوگ : 24dp
padding بالای دیالوگ : 24dp
حاشیه پایین عنوان : 20dp
حاشیه پایین عنوان ثانویه : 28dp
حاشیه راست آیکون اثرانگشت : 16dp
ارتفاع سنسور لمسی : 40dp
ارتفاع کانتینر دکمه : 52dp
padding پایین کانتینر دکمه : 8dp
ارتفاع دکمه : 36dp
padding راست و چپ دکمه : 8dp


رفتار

حالت پیش فرض

از کاربر درخواست کنید که انگشت خود را بر روی سنسور قرار دهد.


حالت پیش فرض که از کاربر درخواست میکند انگشت خود را روی سنسور قرار دهد.

حالت موفقیت

زمانی که اثرانگشت تشخیص داده شد، به جای دیالوگ یک پیام موفقیت نمایش دهید و تصویر را به یک آیکون اثرانگشت با علامت تیک تبدیل نمایید.

مشخصات :

• از رنگ اصلی برنامه خود برای متن موفقیت و آیکون استفاده کنید یا Teal 500 ((#009688

حالت های نادرست در موفقیت:

• نمایش دو حالت موفقیت به طور همزمان
• تغییرات وسیع در انتقال از حالت پیش فرض به موفقیت


حالت موفقیت که شناخته شدن اثرانگشت را نشان میدهد.

حالت شکست

در صورت عدم موفقیت، با استفاده از آیکون خطا همراه با پیام خطا یا بدون پیام خطا به طور واضح مشخص نمایید که که اثرانگشت کاربر شناخته نشده و باید دوباره امتحان کند.

مشخصات :

• رنگ برنامه خود را که برای خطاها استفاده میشود، به کار ببرید یا Deep Orange 600 (#F4511E)

حالت های نادرست در عدم موفقیت:

• تغییرات و تفاوت های وسیع بین دو حالت پیش فرض و عدم موفقیت


حالت عدم موفقیت که عدم تأیید اثرانگشت را نشان میدهد.

خروج

مسیرها و روش های جایگزین برای خروج از دیالوگ قرار دهید. حداقل، یک دکمه cancel برای بستن دیالوگ قرار دهید.

جایگزین های تأیید اعتبار

اثرانگشت نباید تنها راه برای تأیید اعتبار باشد. روش های جایگزین دیگری برای تأیید اعتبار ارائه دهید مانند :
• پسورد حساب کاربری
• PIN برنامه
• اختیارات برنامه

آیکون اثرانگشت

کاربرد و اندازه

آیکون اثرانگشت باید در سایز استاندارد آیکون در سیستم یعنی 24dp و در داخل یک دایره به سایز 40dp نمایش داده شود.


دایره سایز 40dp


آیکون سیستمی سایز 24dp

آیکون پیش فرض

مشخصات :
• رنگ پس زمینه دایره : #607D8B
• در زمینه های سفید کارآیی دارد.


آیکون پیش فرض


دیالوگ و آیکون پیش فرض

آیکون رنگی

دایره دور آیکون میتواند با رنگ دلخواهی که دارای کنتراست مناسب با خطوط آیکون اثرانگشت باشد، رنگ آمیزی شود.


کنتراست و آیکون های رنگی


هرگز از یک آیکون چند رنگ برای اثرانگشت استفاده نکنید !

رابط های کاربری با پس زمینه های روشن

اثرانگشت را به همراه یک دایره با پس زمینه تیره به کار ببرید.
مشخصات :
• رنگ : #FFFFFF
• شفافیت : 100%


دایره با پس زمینه تیره و آیکون اثرانگشت برای زمینه های روشن

رابط های کاربری با پس زمینه تیره

اثرانگشت را به همراه یک دایره با پس زمینه روشن به کار ببرید.
مشخصات :
• رنگ : #000000
• شفافیت : 54%

آیکون بدون دایره در پس زمینه

برنامه هایی که نیاز به آیکون متنوع تری دارند میتوانند از دایره برای پس زمینه استفاده نکنند.


آیکون بدون دایره


دیالوگ با آیکون بدون دایره


هرگز آیکون اثرانگشت را نچرخانید !

تأیید اعتبار مجدد

تأیید اعتبار مجدد زمانی اتفاق می افتد که کاربر قبل از ادامه عملیات نیاز به تأیید اعتبار دارد.

کاربردهای تأیید اعتبار مجدد :

• جهت جلوگیری از مشاهده کردن اطلاعات حساس بدون تأیید
• جهت جلوگری از خریدهای نامعتبر
• زمانی که کلیدهای پنهانی منقضی شده و از کاربر درخواست میشود تا مجددا تأیید اعتبار نماید.


دیالوگ تأیید اعتبار مجدد
اگر کاربر تأیید اثرانگشت را فراموش نماید، میتوانید از کاربران بخواهید که از پسوردهای بک آپ خود استفاده نمایند و دفعه بعد گزینه تأیید اثرانگشت را به آن ها یادآوری نمایید.


دیالوگ که از کاربر پسورد بک آپش را درخواست میکند.



مطلب بعدی -> حرکات (gestures)

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In