שפת ממשק בודדת

1) מהי שפת ממשק אחת ומדוע היא נחוצה

שפת הממשק המאוחדת (באנגלית: Unified Interface Language, בראשי תיבות: NEI) היא מערכת נפוצה של מושגים, כללים חזותיים ואינטראקציות משותפות בין מעצבים, מהנדסים, אנליסטים וכותבי תוכן.

• עקביות - אותם מרכיבים ומונחים על פני מוצרים וצוותים.
• מהירות: בנייה מהירה, פחות הולוארים, עלייה מהירה יותר.
• איכות: דפוסי UX עקביים, זמינות ”כברירת מחדל”.
• קשקשים: אבולוציה בטוחה מבלי להתפרק לגן חיות.

2) שכבות של שפה אחת

1. אסימונים (צבע, טיפוגרפיה, ממדים, צללים, חריצים, רדיוס, אנימציות).
2. רכיבים (כפתורים, שדות קלט, טבלאות, גרפים, מודלים, טוסט, לשוניות).
3. תבניות (טפסים, אימות, אשפי צעד אחר צעד, רשימות/טבלאות, הודעות).
4. תוכן (מיקרו-קופירייטינג, מינוח, הודעות שגיאה).
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. Moted ',' fg. ראשי ”,” fg. הפוכים ". אין לקודד בהירות בשם (”blue500”) ללא מערכת.

3. 3 אסימוני ערכת נושא

אור, חושך, ניגוד: שינוי ערכים, לא שמות.
נושאים - לעקוף שכבה, UI נשאר עקבי.

4) מרכיבים: חוזה, מדינות, זמינות

רכיב = Visual + Behavior + Props Contract + 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 px, ”אריה לחוץ” עבור toggle.

4. 2 ערבויות רכיב

ממדים יציבים (גובה קו, כפות).
נגישות מתוך התיבה (תפקידים/אריה, מקלדת, ניגודיות).
אינווריאנטים: שגיאה בתוך השדה תמיד בתחתית ועם 'אריה-תיאור'.

5) תבניות UX (לוגיקה ניתנת לחזרה)

צורות: תווית שמאלית/עליונה, תווית מציבה, זה לצד זה + שגיאות סיכום, מסכות קלט ופניות.
מודלים: CTA ראשי אחד, Esc נסגר, מלכודת מיקוד, מיקוד חוזר.
טבלאות/רשימות: מיון, כותרת דביקה, עבודת אלילים, ייצוא.
מסננים: לחצן הפעלה מפורש, אתחל, שמור מראש.
הודעות: טוסט 3-5 S, הפסקה בפוקוס, ”תפקיד =” סטטוס/התראה ””.
לוחות מחוונים: תובנות עליונות = הקשר = = גרפיקה = CTA.

6) מינוח נפוץ ומיקרו ־ קופירייטינג

6. גלוסרי 1

לשמור על גלוסרי אחד של עסקים ומונחי UX. כל מאמר ממשק מפנה אותו.
עבור ספקות - בחר מילה אחת (”ארנק” נגד ”איזון”), השנייה - כמילה נרדפת בחיפוש.

6. 2 כללי טקסט

בקצרה ועל המקרה; הימנע מז 'רגון.
שגיאות - הסבר מה לעשות: ”ציין את התאריך בפורמט YYYY-MM-DD”.
כותרות הן שמות עצם; כפתורים - פעלים (”שמור”, ”ביטול”).
יחידות עקביות: תאריך/זמן ב- UTC או locale, מטבעות עם קוד (EUR, USD).

7) איקונוגרפיה ואיורים

המשפחה היא איזומורפית: זווית יחידה, עובי קו, רשת 24 × 24.
סטטוסים וסמנטיקה: צבעים - משניים; צורה/אייקון + טקסט - עיקרי.
גדלים: פיקטוגרמים אינם ”צפים” בצפיפות שונה (1 × 2 × 3 ×).

8) זמינות (A11y) ולוקליזציה (i18n/RTL)

רכיבים עוברים WCAG AA: ניגודיות, ניווט מקלדת, מיקוד, ”מעדיף-מופחת תנועה”.
מחרוזות מתורגמות במשאבים, לא בקודים. ממלא מקום ופורמט מספר/תאריך ניתן לאיתור.
RTL: שיקוף סמלים, נכון Tab סדר, היגיון DND מהמקלדת.

9) מספרים, תאריכים, מטבעות ופורמטים

תאריכים/זמן: ISO-8601, נקודת זמן נכונה - UTC; משתמש - מקום.
מטבע: יחידות קטנות/מחרוזות עשרוניות; תמיד לציין קוד (לדוגמה, "12 אירו. 34” או ”12. 34 EUR" - לפי מקום).
ריבית: 12. 3% 'ונקודות' + 1. 2 הבחנה טובה.
עיגול: לספרות משמעותיות; ”k/m” עבור מספרים גדולים.

10) ממשל: תפקידים, חפצים, ערוצים

Design Language Council (DLC): בעלי טוקן/רכיב, תביעות RFC.

• מרכז תוכן (פיגמה/קוד) + קטלוג חי עם דוגמאות.
• תיעוד: מדריכים, דפוסים, A11y, מדריך תוכן.
• Changelog עם תאריכים, רמות (נוסף/שונה/נמחק/הוסר/קבוע).
• ערוצים: כיור עיצוב שבועי, ערוץ סלק, תצוגות יישומים.

11) ורסינינג ואבולוציה

סימוור לחבילת רכיבים: "מייג 'ור. מינורי. טלאי '.
תוסף קטן: אסימונים חדשים, אביזרים עם ברירות מחדל, מרכיבים חדשים.
פריצה גדולה: הסרת אביזרים, שינוי מדריכי הנדידה לסמנטיקה.
צווים: אזהרות, חלון 90 ימים, דגלי תאימות.

12) מקשרים ובדיקות אוטומטיות

UI-linter: צבעים אסורים מחוץ לאסימונים, אנטי-תבניות (כפתור-דיווה, קווי מתאר מנוטרלים).
A11y-checks: ניגוד, תפקידים/אריה, מיקוד, מקלדת.
קווי i18n-linter: ”קשיחים” בקוד, בעלי מיקומים לא נכונים.
מבחני צילום: נסיגות חזותיות של רכיבים.
חוזי API ויזואליזציה (אם בכלל): סוגי נתונים, טווחים, חתימות.

13) תצוגת רכיבים (ספר סיפורים/ארגז חול)

דוגמאות חיות עם בקרת אביזרים, קוד, מדינות, A11y-checker.
”מתכונים”: טופס הרשמה, אשף שלב 3, מסנני שולחן +, מודלקה + טוסט.
”ארגז חול של מקומות”: החלפת שפה/פורמטים/RTL.

14) שמות ודפוסי מבנה

14. 1 רכיבים (BEM/סמנטיקה, דוגמה CSS)

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

בקוד - שמות מונוטוניים של אביזרים: ”גודל”, ”סוג”, ”נכה”, ”על קליק”.

14. 2 מבנה קובץ ספרייה

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

15) אנטי דפוסים

צבעים חופשיים/חריצים מחוץ לאסימונים.
רכיבים כפולים: ” ” ”Google New”.
ממלא מקום כתווית השטח היחידה.
מנטרל קווי מתאר וכפתורים.
מרחף/מנוטרל בלתי צפוי.
מונחים מתורגמים במקום תרגום רגיל.
מחסור במדריכי נדידה בזמן עדכונים.

16) מטריצות איכות שפה אחת

כיסוי - הפרופורציה של מסכים באמצעות ספריית התוכן.
אינדקס עקביות: שימוש חוזר באסימונים נגד סגנונות ”ידניים”.
A11y קצב מעבר - אחוז רכיבים עובר WCAG AA.
פגם בריחה: מומי UI/תוכן ב-1K מבצעים מכירות.
זמן לספינה - זמן ליישם מסך טיפוסי לפני/אחרי DLS.
אימוץ: תצוגות DAU, מספר יחסי ציבור עם רכיבים/תבניות.

17) רשימת בדיקות מסך

[ ] אסימונים בשימוש (צבע/אינדנטים/רדיוס), לא ערכים קשים.

[ ] רכיבים מהספרייה; מותאם אישית - RFC בלבד.

[ ] נגישות: מקלדת/מיקוד/ניגודיות/תפקידים/אריה.

[ ] יחידות: תאריכים/מטבעות/אחוזים - מדריך פורמט.

[ ] מיקרוקופים: כפתורים = פעלים, שגיאות = פעולה לתיקון.

[ ] לוקלס/RTL לא לשבור את הפריסה.

[ ] מדינות: מסופקים טעינה/ריקה/שגיאה.

[ ] בדיקות רגרסיה חזותית עודכנו.

18) תוכנית יישום (3 איטרציות)

איטרציה 1 - קרן (2-3 שבועות)

Tokens (צבע/טיפוגרפיה/מרווח/תנועה), רכיבים בסיסיים (כפתור, קלט, בחר, Tooltip, Modal), מדריך תוכן (צליל, תוויות, שגיאות).
תצוגה (סיפור) ו A11y-checker, לינטר סמלי.

iteration 2 - תבניות ולוקליזציה (שבועות 3-4)

תבניות של טפסים/טבלאות/מסננים, חבילת סמלים 24 × 24, ארגז חול RTL/i18n, כללים למספרים/תאריכים/מטבעות.
SemVer, changelog, RFC/nigeration process, autotests (ויזואלי + A11y).

איטרציה 3 - קנה מידה ואבולוציה (רציף)

רכיבים קומפוזיטיביים (Wizard, DataGrid, Chart primitives), טמיזציה (אור/כהה/ניגוד), מדדים איכותיים, ביקורת UX רגילה.

19) מיני ־ FAQ

האם זה הכרחי ”בבת אחת”?
לא, זה לא תתחילו עם אסימונים ורכיבי בסיס, ואז תוסיפו תבניות ותהליכים.

איך לשכנע צוותים להשתמש באיי-איי-איי?
הצג את הזכיות: מהירות, פחות פגמים, מתכוני מסך מוכנים A11y מחוץ לקופסה.

מה לעשות עם מסכי מורשת?
תכנית נדידה, סגנונות גשר דרך אסימונים, מסכי עדיפות - ראשון.

סך הכל

שפת ממשק אחת אינה רק ספריית רכיבים. זוהי מערכת של כללים ותהליכים, שבה אסימונים קובעים אקספרסיביות, רכיבים - התנהגות וזמינות, דפוסים - חזרה על החלטות, הבהר את שפתך, ניתן לאימות ולהרחבה - ומוצריך יראו ויעבדו באופן אחיד, מהיר ואמין.