سیستم های طراحی و مستندات آنها

1) سیستم طراحی چیست و چرا مورد نیاز است

یک سیستم طراحی یک منبع واحد از حقیقت برای یک رابط است: مجموعه ای از نشانه ها، اجزای، شیوه ها و اسناد که قابلیت پیش بینی UX، سرعت توسعه و مقیاس پذیری را فراهم می کند.

• سازگاری لایه بصری و رفتاری در تمام محصولات.
• سرعت: استفاده مجدد از قطعات، هزینه های بررسی کمتر.
• کیفیت: الگوهای A11y عمومی، محلی سازی، تست ها، استانداردهای محتوا.
• قابلیت مدیریت: مسئولیت روشن، انتشار، نقشه راه.

2) معماری سیستم طراحی (لایه ها)

1. نشانه های طراحی (پایه): رنگ ها، تایپوگرافی، ابعاد، شعاع، سایه ها، تورفتگی ها، حالت ها، و همچنین نشانه های معنایی («رنگ»). سطح. هشدار، فضا. (XS ')

2. اجزای UI: دکمه ها، زمینه های ورودی، پنجره های معین، کشویی ها، جداول، تست ها، آگهی ها، هشدارها، حالت های خالی، اسکلت ها.
3. الگوها و ترکیبات: فرم های KYC، جریان پرداخت، نتایج صفر، گام کارشناسی ارشد، کارت های محتوا.
4. راهنمای محتوا (میکروکپی): تن، فرهنگ لغت اصطلاحات، الگوهای خطا/موفقیت، فشار/آگهی ها.
5. زیرساخت: راهنمای A11y، آزمایش، محلی سازی، نسخه ها، مشارکت کنندگان (مشارکت).

3) نشانه های طراحی: اصول

معناشناسی> سبک «خام». استفاده از رنگ متن. به جای «# 6B7280»

موضوع سازی و سکوها نشانه های منبع → نقشه های پلت فرم (وب، iOS، آندروید، ایمیل).
تم روشن/تاریک و کنتراست WCAG در سطح نشانه.
مقیاس های جهانی و متنی: فضا. 2، شعاع. MD، ارتفاع. 1، کدورت. از کار افتاده.
نسخه توکن: تغییرات - از طریق سیاست کاهش ارزش و یادداشت های مهاجرت.

4) اجزاء: الزامات و ترکیب صفحه در مستندات

• توصیف و هدف چه زمانی استفاده کنیم/استفاده نکنیم
• انواع/ایالت ها ابعاد، انواع (اولیه/ثانویه/شبح)، غیر فعال، بارگیری، مخرب.
• قابلیت دسترسی نقش، ناوبری صفحه کلید، «aria-»، کنتراست، حلقه تمرکز.
• متن میکروکپی و مثالها برچسب های معتبر/متغیرهایی، اشتباهات، کمک.
• مثال های کد API های حداقل، کنترل شده/کنترل نشده.
• ادغام با فرم ها و i18n. موارد طولانی خط، اعداد/ارز/تاریخ.
• ضد مثال ها الگوهای استفاده اشتباه
• ماتریس تست عکس های تصویری، واحد/تعامل، خوانندگان صفحه نمایش.

5) الگوهای ترکیب (دستور العمل)

فرم های ثبت نام/CUS: جادوگر گام به گام، پیشرفت، اعتبار سنجی درون خطی + خلاصه، الگوهای خطا.
جریان پرداخت: انتخاب روش، هزینه ها، تاریخ ها، قانون همان روش، تایید و وضعیت.

وضعیت های خالی: context + value + CTA, zero search results

پیام های موفقیت/خطا: سلسله مراتب وضعیت، نشانه های بصری، تست/آگهی ها/مدال ها.
ناوبری و فیلترها: جستجوی جهانی، ایستگاه از پیش تنظیم سریع، برچسب ها.
صفحات الگو باید ترکیبی از اجزای آماده برای کپی کردن را با میکروکپی و یادداشت های A11y نشان دهند.

6) راهنمای محتوا (صدا و تن، میکرو)

صدا: حرفه ای، روشن ؛ تن بستگی به زمینه (onboarding، پرداخت، امنیت).
فرهنگ لغت یکپارچه از شرایط: پرداخت، پاداش، محدودیت ها، KYC - یک ارزش در هر محصول.
قالب ها: CTA، خطاها، هشدارها، موفقیت ها، حالت های خالی، اعلان ها.
محلی سازی - اول: سهام برای طول خطوط، اعداد/ارز/تاریخ بر اساس منطقه.
A11y-vocabulary: برچسب های روشن، توضیحات آریا، بدون ابهام.

7) قابلیت دسترسی (A11y) به عنوان یک استاندارد سیستم

معیارهای اصلی: WCAG 2. 1 AA برای کنتراست، تمرکز همیشه قابل مشاهده است، ناوبری صفحه کلید.
نقش ها و ویژگی ها: مؤلفه ها «نقش»، «آریا برچسب»، «آریا توصیف»، مناطق زنده برای تست ها/هشدارها را توصیف می کنند.
خوانندگان روی صفحه نمایش: نمونه هایی از عبارات، نظم خواندن، وضعیت صحیح («قاطعانه/مودبانه»).
روش های تست: چک های اتوماتیک + اسکریپت های دستی.

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

کلیدهای i18n در کنار کد کامپوننت + توضیحات زمینه.
شماره/ارز/تاریخ از طریق قالب بندی آب و برق ؛ متن hardcode در قالب نیست.
تست طول: «طولانی آلمانی»، «باریک تلفن همراه»، انواع RTL.
تن در زبان: تن نقشه برای مراحل مهم (پرداخت/امنیت).

9) مستندات: ساختار و ناوبری

1. مقدمه: ماموریت، اصول، زمینه های مسئولیت.

2. نشانه ها: رنگ ها، تایپوگرافی، شبکه، ابعاد، سایه ها، حالت ها، تم ها.

3. قطعات: کاتالوگ با فیلتر (توسط نقش، توسط پلت فرم، توسط A11y).

4. الگوها: سناریوها (فرم ها، پرداخت ها، حالت های خالی، موفقیت/خطاها).

5. راهنمای محتوا: صدا و تن، فرهنگ لغت، قالب های میکروکپی.

6. قابلیت دسترسی: استانداردها، چک لیست ها، موارد آزمون.

7. محلی سازی: اصول، نمونه ها، واژه نامه ها بر اساس بازار.

8. ادغام و کد: نصب، نسخه ها، نمونه ها، نحوه مهاجرت.

9. مشارکت: فرآیندهای مشارکتی، بررسی طراحی، بررسی کد، تعریف انجام شده.

10. Changelog و نقشه راه: انتشار، استهلاک، برنامه توسعه، مسائل شناخته شده.

10) مدیریت و فرآیندها

نقش ها: مالک سیستم (پلت فرم DesignOps/UX)، نگهدارنده ها (طراحی/FE)، مشاوران (BE، A11y، محلی سازی).
کمیته تغییر: درخواست ارزیابی، اولویت بندی، API/Token Reconciliation.
فرآیندها: RFC برای اجزای جدید، فرم های مسئله داخلی، SLA برای اشکالات.
تعریف انجام شده: طراحی (Figma) کد ↔ (بسته UI) ↔ داک (مثال + راهنمای) تست های ↔.

11) مشارکت: نحوه اضافه کردن/تغییر

RFC الگو: مشکل → گزینه → تصمیم انتخاب → A11y → i18n → مهاجرت → خطرات.
روابط عمومی جریان: بررسی طراحی → بررسی کد → کپی رایت UX → بررسی A11y → یادداشت های انتشار.
قوانین سازگاری عقب: جزئی/پچ برای غیر مخرب، عمده - با استهلاک و مهاجرت خودکار، در صورت امکان.

12) نسخه، انتشار، مهاجرت

SemVer برای بسته ها («@ company/ds-core»، «@ company/ds-forms»، «@ company/ds-charts»).
یادداشتهای انتشار: تغییرات نشانه، API های جزء، رفتار پیش فرض، تغییرات شکستن، راهنماهای مهاجرت.
استهلاک: نشانه های بارانداز، قوانین لینتر، مودهای کد برای جایگزینی جرم.
خط لوله طراحی-نشانه: تک منبع (JSON/YAML) → ساخت پلت فرم (CSS vars، iOS، آندروید).

13) تست کیفیت

تست واحد رفتار و شرایط.
عکس های فوری بصری (موضوع/رگرسیون دولت).
تست های A11y: خودکار + اسکریپت دستی از خواننده صفحه نمایش.
موارد E2E برای جریان بحرانی (ثبت نام، پرداخت، KYC).
بودجه های Perf: محدودیت های بسته بندی/رندر و ممنوعیت اعتیاد سنگین.

14) معیارهای بلوغ سیستم طراحی

پذیرش:٪ صفحه نمایش/مخازن با استفاده از DS.
سرعت: زمان از طرح تا تحویل.
کیفیت: نقص UI/A11y تا 1 نسخه.
سازگاری: تعداد قطعات/سبک های «یکبار مصرف» در خارج از DS.
اسناد: پوشش جزء بارانداز، NPS مخاطبان داخلی (طراحان/توسعه دهندگان/تحلیلگران).

15) ضد الگوهای

نشانه ها به عنوان یک پالت بدون معانی («فقط رنگ»).
اجزای بدون مستندات و بدون نمونه هایی از موارد شدید.
نادیده گرفتن A11y (بدون تمرکز، کنتراست کم، بدون «aria»).
شکستن نسخه بدون استهلاک و راهنمای مهاجرت.
منطق پنهان در اجزای سازنده (قوانین کسب و کار به جای رفتار UI).
تکثیر اجزاء برای موارد باریک به جای گسترش API.

16) چک لیست

• نام های معنایی و هدف.
• تضاد AA در هر دو موضوع.
• اسناد و مدارک استفاده می شود.

• گزینه ها/ایالت ها پوشش داده می شوند.
• A11y-description، «aria-»، تمرکز کنید.
• نمونه های میکرو کپی (برچسب ها، خطاها، نکات).
• نمونه کد و موارد لبه (خطوط طولانی، بار، خالی).
• تست Unit/visual/A11y سبز است.

• انتشار یادداشت ها با قبل/بعد از نمونه.
• راهنمای مهاجرت и تخفیف.
• به روز شده داستان/دموی، لینک در حوض.

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

• دکمه های اصلی مختلف: رنگ/شعاع/تورفتگی مطابقت ندارد ؛ پیام های مختلف CTA

• 'دکمه' تنها با نشانه: 'size = md', 'variant = primary', 'radius = lg', 'spacing = md', text in the style «action + object».

• پیام های فنی، بدون دستورالعمل.

• کامپوننت فرمت تاریخ نامعتبر است. استفاده از DD MM.YYYY. '+ فوکوس خودکار.

18) قالب صفحه کامپوننت (اسکلت)

نام: دکمه

توضیحات: شروع یک عمل ؛ 1 اصلی در هر صفحه نمایش.

گزینه ها: اولیه، ثانویه، شبح، مخرب ؛ ابعاد sm/md/lg

ایالات: شناور، تمرکز، فعال، بارگیری، غیرفعال.
A11y: در دسترس از صفحه کلید ؛ «aria-pressed» برای قابل تعویض.

میکروکپی: «Save changes»، «Continue verification». اجتناب از «OK»

کد (به عنوان مثال API): «دکمه {نوع، اندازه، آیکون، بارگذاری}».
ضد نمونه: دو اولیه در همان سطح سلسله مراتب.
تست ها: عکس های فوری بصری، کنتراست، حلقه تمرکز.

19) playbook پیاده سازی سیستم طراحی (پخش)

1. ممیزی رابط: موجودی رنگ/تایپوگرافی/اجزای/الگوهای.
2. نشانه های MVP و اجزای اصلی: دکمه، ورودی، انتخاب، مودال، هشدار، EmptyState، نان تست.
3. مستندات و کتاب داستان: نمونه های زنده، قطعه کد، راهنماها.
4. محصول آزمایشی: جایگزینی ویجت ها، جمع آوری بازخورد.
5. راهنمای مهاجرت: کدها، قوانین استهلاک.
6. گسترش مجموعه: جداول، صفحه بندی، فرم انجمن ها، مراحل جادوگر.
7. مقیاس بندی: الگوهای محصول (پرداخت، KYC)، ادغام با تجزیه و تحلیل و A/B.
8. پشتیبانی: کانال سوال، SLA، کارگاه های داخلی.

20) قالب مستندات سریع

• نام: «رنگ» مرز. هشدار دادن
• هدف: قاب هشدار دهنده و آگهی ها توجه/هشدار
• کنتراست: AA در برابر رنگ. سطح. عیب دارد
• انجام ندهید: برای متن کوچک استفاده کنید
• مطلب مرتبط: رنگ سطح. هشدار، آیکون. هشدار دادن

الگوی الگو: حالت خالی (noResults)

هدف: برای اصلاح یک پرس و جو بدون احساس «اشتباه»

ترکیب: عنوان (عمده فروشی)، متن (1-2 جمله)، CTA، CTA ثانویه، نماد/تصویر

میکروکپی: "هیچ چیز توسط "{query}" یافت نشد تنظیم مجدد فیلترها یا اصلاح پرس و جو"

A11y: 'role = «status»', 'aria-live = «مودبانه»'

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

نشانه های معنایی + نظم و انضباط A11y = پایه.
صفحات کامپوننت کامل: هدف، انواع، A11y، میکروکپی، کد، تست ها.
Patterns = ترکیب اجزاء با متون و قوانین آماده.
اسناد - محصول: نسخه، انتشار، مهاجرت، روند مشارکت.
اندازه گیری بلوغ: تصویب، سرعت، نقص، سازگاری، NPS دستورات داخلی.