زبان رابط واحد

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

زبان رابط یکپارچه (NEI) یک سیستم مشترک از مفاهیم، قوانین بصری و تعاملات مشترک بین طراحان، مهندسان، تحلیلگران و نویسندگان محتوا است.

• سازگاری - اجزاء و شرایط مشابه در محصولات و تیم ها.
• سرعت: ساخت سریع، holivars کمتر، سریع تر onboarding.
• کیفیت: الگوهای UX سازگار، در دسترس بودن «به طور پیش فرض».
• مقیاس پذیری: تکامل ایمن بدون شکستن به یک «باغ وحش UI».

2) لایه های یک زبان واحد

1. نشانه ها (رنگ، تایپوگرافی، ابعاد، سایه ها، تورفتگی ها، شعاع ها، انیمیشن ها).
2. اجزاء (دکمه ها، زمینه های ورودی، جداول، نمودارها، مدال ها، تست ها، زبانه ها).
3. الگوها (فرم ها، اعتبار سنجی، جادوگران گام به گام، لیست ها/جداول، اطلاعیه ها).
4. محتوا (میکرو copywriting، اصطلاحات، پیام های خطا).
5. پیکرنگاری و تصاویر (خانواده، سبک، ابعاد و خطوط).
6. در دسترس بودن و i18n/RTL (قوانین A11y، قابلیت ترجمه، مکان ها).
7. فرآیندها (نسخه ها، راهنماها، بررسی ها، خطوط، ویترین ها و نمونه ها).

3) نشانه های طراحی (اساس بیان)

توکن ها ارزش هایی هستند که در همه محصولات استفاده می شوند.

3. 1 ساختار توکن (مثال)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 نامگذاری نشانه ها

از عمومی به خاص: "رنگ. لهجه است. «اصلی»، не «آبی اولیه».
بدون اینکه به یک نام تجاری در نامگذاری وابسته باشد (نام تجاری یک موضوع است، نه یک نام نشانه).
درجه بندی: FG. خاموش، FG. اصلی '، FG. برعکس. روشنایی را در نام («blue500») بدون سیستم رمزگذاری نکنید.

3. نشانه های تم 3

نور، تاریکی، تضاد: تغییر ارزش ها، نه نام ها.
تم ها - لایه لغو، UI سازگار است.

4) قطعات: قرارداد، ایالات، در دسترس بودن

کامپوننت = ویژوال + رفتار + قرارداد Props + A11y.

4. 1 مثال قرارداد دکمه

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

حالت ها: «پیش فرض/شناور/فعال/تمرکز/غیر فعال/بارگیری».
در دسترس بودن: حلقه تمرکز، اندازه هدف ≥ 40-48 پیکسل، «aria-pressed» برای تغییر.

4. 2 جزء تضمین می کند

ابعاد پایدار (ارتفاع خط، paddings).
دسترسی خارج از جعبه (نقش/آریا، صفحه کلید، کنتراست).
ثابت: خطا در داخل میدان همیشه در پایین و با «aria-descedby».

5) الگوهای UX (منطق قابل تکرار)

فرم ها: برچسب چپ/بالا، نگهدارنده ≠ برچسب، در کنار هم + خطاهای خلاصه، ماسک های ورودی و اعلان ها.
Modals: یک CTA اصلی، «Esc» بسته می شود، تمرکز تله، تمرکز بازگشت.
جداول/لیست ها: مرتب سازی، هدر چسبنده، صفحه بندی، صادرات.
فیلترها: صریح درخواست دکمه، تنظیم مجدد، ایستگاه از پیش تنظیم ذخیره شده.
اطلاعیه ها: تست ≤ 3-5 ثانیه، مکث در تمرکز، "نقش =" وضعیت/هشدار ".
داشبورد: بینش بالا → زمینه → گرافیک → CTA.

6) اصطلاحات مشترک و میکرو copywriting

6. 1 واژه نامه

حفظ یک واژه نامه واحد از شرایط کسب و کار و UX. هر مقاله رابط آن را ارجاع می دهد.
برای doublets - یک کلمه را انتخاب کنید («کیف پول» در مقابل «تعادل»)، دوم - به عنوان مترادف در جستجو.

6. 2 قوانین متن

به طور خلاصه و در مورد ؛ اجتناب از اصطلاحات مخصوص یک صنف.
خطاها - توضیح دهید که چه کاری باید انجام دهید: «تاریخ را در فرمت YYYY-MM-DD مشخص کنید».
عنوان ها اسم هستند ؛ دکمه ها - افعال («ذخیره»، «لغو»).
واحدهای سازگار: تاریخ/زمان در UTC یا محلی، ارزهای با کد (EUR، USD).

7) پیکرنگاری و تصاویر

خانواده ایزومورفیک است: زاویه تک، ضخامت خط، شبکه 24 × 24.
وضعیت و معانی: رنگ - ثانویه ؛ شکل/آیکون + متن - اولیه.
مقیاس بندی: پیکتوگرام ها در تراکم های مختلف «شناور» نیستند (1 ×/2 ×/3 ×).

8) در دسترس بودن (A11y) و محلی سازی (i18n/RTL)

قطعات تحت WCAG AA: کنتراست، ناوبری صفحه کلید، تمرکز، «ترجیح کاهش حرکت».
رشته های ترجمه شده - در منابع، نه در کد. متغیرهایی و فرمت شماره/تاریخ قابل محلی سازی هستند.
RTL: آیکون های آینه ای، ترتیب صحیح تب، منطق DnD از صفحه کلید.

9) شماره ها، تاریخ ها، ارزها و فرمت ها

تاریخ/زمان: ISO-8601، زمان واقعی - UTC ؛ کاربر - محلی

ارز: واحدهای کوچک/رشته های اعشاری ؛ همیشه یک کد را مشخص کنید (به عنوان مثال، "€12. 34 "یا" 12 " 34 یورو" - توسط محلی).
علاقه: 12. 3٪ و نقاط + 1. 2 pp 'clearly تشخیص.
گرد کردن: به ارقام قابل توجه ؛ «k/m» برای اعداد بزرگ.

10) حکومت: نقش ها، مصنوعات، کانال ها

شورای زبان طراحی (DLC): صاحبان توکن/جزء، ادعاهای RFC.

• مرکز محتوا (Figma/Code) + کاتالوگ زنده با نمونه ها.
• مستندات: راهنماها، الگوها، A11y، راهنمای محتوا.
• تغییرات با تاریخ، سطح (اضافه شده/تغییر/حذف/حذف/ثابت).
• کانال ها: سینک طراحی هفتگی، کانال Slack، ویترین پیاده سازی.

11) نسخه و تکامل

SemVer برای بسته بندی جزء: 'MAJOR. جزئی است. پچ.
MINOR - افزودنی: نشانه های جدید، پروکسی با پیش فرض، اجزای جدید.
MAJOR - شکستن: از بین بردن غرفه، تغییر معانی → راهنماهای مهاجرت.
کاهش: هشدارها، ≥ پنجره 90 روز، پرچم سازگاری.

12) خطوط و چک های اتوماتیک

UI-linter: رنگ های ممنوع در خارج از نشانه ها، ضد الگوهای (دکمه دیوا، طرح غیر فعال شده).
A11y-checks: کنتراست، نقش/آریا، تمرکز، صفحه کلید.
i18n-linter: خطوط «سخت» در کد، متغیرهایی نادرست.
تست اسکرین شات: رگرسیون بصری اجزاء.
قراردادهای تجسم API (در صورت وجود): انواع داده ها، محدوده ها، امضاها.

13) ویترین کامپوننت (کتاب داستان/ماسهبازی)

نمونه های زنده با کنترل های پروکسی، کد، ایالت ها، A11y-checker.
«دستور العمل»: فرم ثبت نام، مرحله 3 جادوگر، جدول + فیلتر، modalka + نان تست.
«Sandbox of locales»: تغییر زبان/فرمت/RTL.

14) الگوهای نامگذاری و ساختار

14. 1 قطعات (BEM/معناشناسی، مثال CSS)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

در کد - نامهای یکنواخت props: «size», «kind», «disabled», «onClick».

14. 2 ساختار فایل کتابخانه

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15) ضد الگوهای

«آزاد» رنگ/تورفتگی خارج از نشانه.
اجزای تکراری: «ButtonV2,» «PrimaryButtonNew».
Placeholder به عنوان تنها برچسب فیلد.
غیرفعال کردن طرح کلی و دکمه های div.
شناور غیر قابل پیش بینی/فعال/غیر فعال است.
اصطلاحات ترجمه شده به جای ترجمه عادی.
کمبود راهنماهای مهاجرت در طول به روز رسانی.

16) معیارهای کیفیت تک زبان

پوشش - نسبت صفحه نمایش با استفاده از کتابخانه محتوا.
شاخص سازگاری: استفاده مجدد از نشانه ها در مقابل سبک های «دستی».
A11y نرخ عبور - درصد از قطعات عبور WCAG AA.
نقص فرار: نقص UI/محتوا در فروش 1K مرتکب شده است.
زمان به کشتی - زمان برای پیاده سازی یک صفحه نمایش معمولی قبل/بعد از DLS.
تصویب: ویترین DAU، شماره PR با اجزای/الگوهای.

17) چک لیست صفحه نمایش

• نشانه استفاده می شود (رنگ/فاصله/شعاع)، ارزش های سخت نیست.
• بخش هایی از کتابخانه ؛ سفارشی - فقط RFC.
• دسترسی: صفحه کلید/تمرکز/کنتراست/نقش/آریا.
• واحد: تاریخ/ارز/درصد - در هر راهنمای فرمت.
• Microcopies: دکمه ها = افعال، خطاها = عمل برای اصلاح.
• locales/RTL طرح را شکستن نیست.
• ایالات: بارگیری/خالی/خطا ارائه شده است.
• تست های رگرسیون بصری به روز شد.

18) برنامه پیاده سازی (3 تکرار)

تکرار 1 - بنیاد (2-3 هفته)

نشانه ها (رنگ/تایپوگرافی/فاصله/حرکت)، اجزای اصلی (دکمه، ورودی، انتخاب، راهنمای ابزار، معین)، راهنمای محتوا (تن، برچسب ها، خطاها).
Showcase (کتاب داستان) و A11y-checker، token linter.

تکرار 2 - الگوهای و محلی سازی (3-4 هفته)

الگوهای فرم ها/جداول/فیلترها، آیکون بسته 24 × 24، RTL/i18n sandbox، قوانین برای اعداد/تاریخ/ارز.
SemVer، changelog، فرآیند RFC/مهاجرت، خودکار (بصری + A11y).

تکرار 3 - مقیاس و تکامل (مداوم)

اجزای ترکیبی (جادوگر، DataGrid، نمودار اولیه)، temization (نور/تاریک/کنتراست)، گزارش معیارهای کیفیت، ممیزی UX به طور منظم.

19) مینی سوالات متداول

آیا «همه در یک زمان» لازم است ؟

نه، اينطور نيست با نشانه ها و اجزای پایه شروع کنید، سپس الگوها و فرایندها را اضافه کنید.

چگونه تیم ها را برای استفاده از YEI متقاعد کنیم ؟

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

با صفحه نمایش میراث چه کنیم ؟

طرح مهاجرت، سبک های پل از طریق نشانه ها، صفحه نمایش اولویت - اول.

مجموع

یک زبان رابط تنها یک کتابخانه جزء نیست. این یک سیستم از قوانین و فرآیندها است که در آن نشانه ها بیان، اجزای رفتار و در دسترس بودن، الگوها - تکرارپذیری تصمیمات، و حاکمیت و معیارها - تکامل پایدار را تعیین می کنند. زبان خود را روشن، قابل تایید و قابل گسترش کنید - و محصولات خود را به طور یکنواخت، سریع و قابل اعتماد نگاه کنید و کار کنید.