دستورالعمل UX و استانداردهای رابط

1) اصول

شفافیت قبل از زیبایی معنی و عمل در 1-2 ثانیه واضح است.
یک هدف در هر صفحه هر چیز دیگری ثانویه یا پنهان است.

انسجام. الگوهای یکسان = انتظارات یکسان

در دسترس بودن پیش فرض. کنتراست، تمرکز، صفحه کلید، صدای بازیگری.
زمینه سازی. نکات و متون دقیقا در جایی هستند که مورد نیاز هستند.
محلي سازي اول. طول خط، فرمت ها، فرهنگ - در طراحی در ابتدا.
برگشت پذیری هر گونه اقدام خطرناک می تواند لغو/تایید شود.
قابلیت اندازه گیری هر قانون با یک متریک (تبدیل گام، زمان، اشتباهات) است.

2) شبکه، تورفتگی و ریتم

شبکه: زمین 4/8-pt ؛ ستون ها: 12 (دسکتاپ)، 6 (قرص)، 4 (تلفن همراه).
اجزای داخلی داخلی: چند برابر 4 ؛ خارجی - 8/ 12/16/24.
ریتم عمودی: عنوان → زیرنویس → محتوای عمل (CTA).
مرزها و تقسیمات: اقتصادی ؛ ترجیح می دهند «هوا» و سلسله مراتب تایپوگرافی.

3) تایپوگرافی

مقیاس پین: 12/14/ 16/20/24/32/40 (بدن 16).

ارتفاع ردیف: 1. 4–1. 6 برای متن، 1. 2–1. 3 برای عنوان ها

طول خط: 45-75 کاراکتر (دسکتاپ)، 35-55 (تلفن همراه).
برجسته کردن: برجسته برای لهجه های معنایی ؛ کلاه - فقط در برچسب.
قابلیت خواندن با صدای بلند: متون باید طبیعی باشند.

4) رنگ و کنتراست

معناشناسی: «success/info/warning/error/neutral».

کنتراست: WCAG حداقل 2. 1 AA (متن/پس زمینه ≥ 4. 5:1; بزرگ ≥ 3:1)

رنگ تنها علامت ≠. یک آیکون/متن/فرم اضافه کنید.
حلقه تمرکز: همیشه قابل مشاهده است (در CSS غیرفعال نکنید).

5) ناوبری و معماری اطلاعات

مسیر کاربر: "من کجا هستم ؟ چي اينجاست ؟ بعدش چی ؟" - معلومه که -

سلسله مراتب منو: ≤ 2 سطح در ناوبری اصلی.
Breadcrumbs: برای بخش های عمیق.
جستجو: در سراسر جهان در دایرکتوری های پیچیده موجود است ؛ کلید میانبر «/».
ناوبری بیان می کند: برگه/صفحه فعال با نشانه ها برجسته شده است.

6) قطعات و الگوهای

ما از اجزای سیستم طراحی (بدون «خانگی») استفاده می کنیم.
یک CTA اولیه در هر صفحه نمایش ؛ بقیه ثانویه/ثانویه هستند.
ایالات: به طور پیش فرض/شناور/تمرکز/فعال/غیر فعال/در حال بارگذاری - اجباری برای هر تعاملی.
حالات خالی: context + value + CTA (+ secondary link).
هشدارهای مشترک: یک هشدار صفحه در هر صفحه + پیشنهادات درون خطی محلی.

7) فرم ها، اعتبار سنجی و خطاها

برچسب اجباری است. Placeholder نمونهای از یک فرمت است، نه یک جایگزین.
اعتبار سنجی درون خطی برای تاری، خطاهای خلاصه برای ارسال.
پیام خطا: چه چیزی اشتباه است + چگونه رفع + محدودیت/فرمت.
پیمایش خودکار و تمرکز روی خطای اول ؛ «آريا-نامعتبر»، «آريا-توصيف شده توسط».
ماسک ها و فرمت ها: سریع، اما ورودی را خراب نکنید (paist امکان پذیر است).
امنیت داده ها: در هنگام راه اندازی مجدد/خطا چیزی را از دست ندهید.

8) شرایط و بازخورد

موفقیت: تست 2-4 ثانیه، لحن خنثی مثبت، CTA «چه چیزی بعدی».
اطلاعات/اطلاعیه: بنر نرم/نوع، جریان را مسدود نمی کند.
هشدار/خطا/بحرانی: سلسله مراتب بصری/معنایی ؛ انتقادی - مدال/بنر با عمل صریح.
در حال بارگذاری: اسکلت> اسپینر ؛ ارزیابی زمان انتظار> 3 s.

9) محتوا و میکرو کپی

قانون سه پاسخ: چه اتفاقی می افتد، چرا چه کاری باید انجام شود

CTA: action verb + object («Save changes», «Pass verification»).
شماره/تاریخ/ارز: فرمت های محلی.
تن: دوستانه ؛ در مراحل استرس زا (پرداخت/امنیت) - خنثی.

10) در دسترس بودن (A11y)

ناوبری صفحه کلید کامل ؛ نظم منطقی tabbing.
نقش ها و «آریا-» برای مناطق تعاملی و زنده برای تست ها/وضعیت ها.
کنتراست، حلقه تمرکز، اندازه های تعاملی ≥ 44 × 44 پیکسل.
گزینه های متن برای آیکون ها/تصاویر ؛ جداول با «th »/« scope».
چک: خودکار (linter/اسکنر) + اسکریپت دستی از خواننده صفحه نمایش.

11) محلی سازی و بین المللی سازی

تمام رشته ها در زمینه i18n کلید هستند.
تست «زبان های طولانی» (DE/TR)، حالت RTL.
اعداد/ارز/زمان - قالب بندی آب و برق.
Tone-map: درجه رسمی/احساسات توسط سناریو (onboarding/پرداخت/امنیت).

12) پاسخگویی و †

نقطه توقف: 360/768/1024/1280 +.
Mobile-first: مسیر بحرانی موجود با یک دست، CTA در ناحیه انگشت شست.
حرکات و صفحه کلید: حرکات با دکمه ها تکرار می شوند ؛ بر روی دسکتاپ - کلید های میانبر.
تراکم: در دسکتاپ - «هوا»، در تلفن همراه - صرفه جویی عمودی بدون به خطر انداختن قابلیت کلیک.

13) موضوع تاریک

کنتراست توسط WCAG حفظ می شود ؛ اجتناب از «سیاه خالص» برای پس زمینه (خاکستری تیره).
درخشش/سایه ها - ضعیف ؛ تمرکز کنتراست حلقه.
تصاویر و آرم ها - با نسخه های معکوس.
سیاست انتقال: صرفه جویی در انتخاب کاربر (سیستم/نور/تاریک).

14) انیمیشن ها و حرکت

مدت زمان: 120-200 ms (کوچک)، 200-300 ms (انتقال).
توابع شتاب طبیعی هستند (مکعب bezier با کاهش سرعت کمی).
انیمیشن ها نباید جریان را مسدود کرده و خوانایی را مختل کنند.
احترام «ترجیح کاهش حرکت».

15) عملکرد

≤ LCP 2 5S، TTI/TBT در سبز ؛ کد پیرایش ؛ بارگذاری رسانه های تنبل.
مجازی سازی لیست های طولانی ذخیره سازی داده ها.
اسکلت برای درک سرعت ؛ به حداقل رساندن طرح «آشغال».

16) امنیت و حریم خصوصی در UI

توضیحات روشن از دلایل درخواست (دوربین, KYC, جغرافیایی).
مهلت شفاف/کمیسیون/محدودیت ؛ بدون «لحظه ای» اگر تاخیر امکان پذیر است.
اطلاعات محرمانه - پوشش، صریح «نمایش/پنهان کردن».
تأییدیه برای اقدامات غیر قابل برگشت ؛ ورود به سیستم فعالیت/ورود به سیستم اطلاعیه ها.

17) معیارهای کیفیت UX

مرحله تبدیل و زمان برای تکمیل.
میزان خطا بر اساس فیلدها/مراحل و زمان برای رفع.
CTR توسط CTA و تکرارپذیری سناریو.
رها کردن پس از خطا/پس از بارگذاری> N ثانیه.
پشتیبانی از تماس های موضوعی (قبل/بعد از تغییرات).
A11y-defects برای انتشار (هدف - 0 بحرانی).

18) چک لیست

صفحه قبل از انتشار

• یک هدف اصلی و یک CTA اولیه.

جهت يابي و جايگاهي که من دارم کاملا مشخصه

• محتوای کوتاه: 1-2 جمله در هر بلوک.
• ایالات: بارگیری/خالی/خطا/موفقیت پوشش داده می شود.
• A11y: کنتراست AA، تمرکز قابل مشاهده، «aria» در تعاملی.
• محلی سازی: طول رشته/فرمت/RTL بررسی شده است.
• عملکرد: بدون نیاز به بلوک های «سنگین».

فرم قبل از انتشار

• برچسب ها و فرمت های نمونه وجود دارد.
• اعتبار سنجی درون خطی + خلاصه برای ارسال.
• به اولین خطا بروید، در جعبه تمرکز کنید.
• پیام ها: چه/چگونه/چرا ؛ بدون 500/400 کد برای کاربر.
• داده ها در خطاها/راه اندازی مجدد از بین نمی روند.

19) ضد الگوهای

«OK» به عنوان CTA در مراحل معنایی.

نگه دارنده به جای برچسب

رنگ به عنوان تنها سیگنال وضعیت.
اسپینر بدون برآورد زمان و بدون جایگزین.
پنجره های مودال بدون تله فوکوس و بسته شدن ESC.
مخلوط کردن سبک ها/آیکون ها، تکثیر اجزای خارج از سیستم طراحی.
طنز/ایموجی در سناریوهای بحرانی (پرداخت/امنیت).

20) قبل/بعد از نمونه

خطای فرم

قبل از: «خطای 400»

پس از: "قالب تاریخ نامعتبر است. استفاده از DD MM. YYYY"

حالت خالی

پیش از آن: «اینجا خالی است»

پس از: "تاریخ عملیات پس از اولین دوباره پر کردن در اینجا ظاهر خواهد شد. [بالا به بالا]"

پیام موفقیت

به: انجام شده

پس از: "پرداخت پذیرفته شده است. تعادل به روز شد [مشاهده تاریخ]"

ناوبری

قبل: مشخص نیست که کاربر کجاست

پس از: برگه فعال + خرده نان + عنوان صفحه صریح

21) قالب برای بررسی طراحی

قاب صفحه نمایش

Title → short description → content/list → feedback/statuses → actions.

قاب قالب

سربرگ → اعلان → فیلد (برچسب + یاور + خطا) → CTA → اقدامات ثانویه → یادداشت ها.

قالب میکروکپی

عنوان (سابق)

1-2 جملات: زمینه + گام بعدی

CTA: عمل + شیء

پیوند ثانویه: کمک/قوانین

22) فرآیندها و نگهداری استانداردها

تعریف انجام شده (UX): طرح + متون + ایالات + A11y + i18n + معیارها.
بررسی UX در روابط عمومی: چک لیست از بخش های 18-21.
مستندات: هر ویژگی اضافه می کند/به روز رسانی یک راهنمای به ویکی/Storybook.
حسابرسی یک بار در سه ماهه: محتوا، A11y، عملکرد، سازگاری.

ورق تقلب نهایی

یک هدف، یک CTA اصلی.
ایالات و بازخورد در پیش طراحی شده است.
A11y و محلی سازی - از ابتدا، نه «بعد».
رنگ های کمتر - معانی و ریتم بیشتر.
اندازه گیری: تبدیل، خطاها، زمان، معکوس.
همه از طریق سیستم طراحی: همان قوانین → همان انتظارات → UX قابل پیش بینی است.

من می توانم این راهنما را با قالب های آماده برای سناریوهای کلیدی خود (ثبت نام/CUS، سپرده/خروج، پاداش/مسابقات) تکمیل کنم و چک لیست ها را برای روند بررسی خود جمع آوری کنم.