Ինտերֆեյսների միասնական լեզուն

1) Ի՞ նչ է ինտերֆեյսների լեզուն և ինչո՞ ւ է այն անհրաժեշտ։

Ինտերֆեյսների միասնական լեզուն (EYAI) հասկացությունների, տեսողական կանոնների և փոխազդեցությունների ընդհանուր համակարգն է, որը կիսում են դիզայներները, ինժեներները, վերլուծաբանները և բովանդակության հեղինակները։

Նպատակները

Համաձայն 'նույն բաղադրիչները և տերմինները տարբեր ապրանքներում և թիմերում։

Արագություն 'արագ հավաքումներ, ավելի քիչ շոլիվարներ, ավելի արագ, քան Onbording-ը։

Որակը 'UX խորհրդատվական արտոնագրեր, «լռելյայն» հասանելիություն։

Մեծացումը 'անվտանգ էվոլյուցիան առանց քայքայման UI կենդանաբանական այգում։

2) Միասնական լեզվի շերտեր

1. Տոկենները (գույնը, տպագրությունը, չափսերը, ստվերը, նահանջները, ճառագայթները, անիմացիաները)։

2. Բաղադրիչները (կոճակներ, մուտքագրման դաշտեր, սեղաններ, գրաֆիկներ, մոդելներ, տոստներ, ներդրումներ)։

3. Patterns (ձևեր, validation, քայլող վարպետներ, ցուցակներ/սեղաններ, ծանուցումներ)։

4. Բովանդակություն (միկրոկոպիրեյթինգ, տերմինոլոգիա, սխալների մասին հաղորդագրություններ)։

5. Իկոնոգրաֆիա և նկարագրություն (ընտանիք, ոճ, չափսեր և գծեր)։

6. Հասանելիությունը և i18n/RTL (A1Y կանոնները, թարգմանությունը, լոկալը)։

7. Գործընթացները (վարկածներ, draills, reved, ոսպնյակներ, վիտրիններ և օրինակներ)։

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 Թունավոր նեյմինգ

Ընդհանուր '«կոլոր»։ accent. primary`, не `primaryBlue`.

Առանց Նեյմինգի բրենդի (բրենդը թեման է, ոչ թե հոսանքի անունը)։

Աստիճաններ ՝ "fg. muted`, `fg. primary`, `fg. inverse`. Մի ծածկեք պայծառությունը անվանման մեջ («blue500») առանց համակարգի։

3. 3 Տոկենա թեմաներ

Լուսավոր, մութ, հակադրող 'փոխել արժեքները, անունները։

Թեմաները վերակենդանացման շերտն են, UI-ը մնում է հետևողական։

4) Բաղադրիչներ ՝ պայմանագիր, վիճակ, հասանելիություն

Բաղադրիչը = տեսողական + վարքը + բացթողումների պայմանագիրը + A1y։

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;
};

Վիճակը ՝ «www.ru/hover/action/focus/wwww.abled/loading»։

Հասանելիություն 'ֆոկուս օղակ, չափսերը 40-48 px, «aria-pressed» toggle-ի համար։

4. 2 Բաղադրիչների երաշխիքներ

Կայուն չափսերը (105-height, paddings)։

Տուփի հասանելիությունը (rolei/aria, ստեղնաշար, հակադրություն)։

Invariants: Դաշտի ներսում սխալը միշտ ներքևում է և «aria-describedby» -ի հետ։

5) UX (կրկնվող տրամաբանություն)

Ձևեր ՝ ձախ/վերևից պիտակ, placeholder plabel, սխալներ մոտ + կամարի մեջ, մուտքագրման դիմակներ և հուշումներ։

Մոդալկի 'մեկ հիմնական CTA, «Esc» -ը փակում է, ֆոկուսի թակարդը, ֆոկուսի պարունակությունը։

Աղյուսակները/ցուցակները 'տեսակավորումը, sticky-վերնագիրը, էջերը, էքսպորտը։

Ֆիլտրեր '«Կիրառիր» պարզ կոճակը, նետումը, պահպանված ճնշումները։

Ծանուցումներ ՝ tost 243-5 s, դադար ֆոկուսով, "role =" status/alment "։

Dashbords: top insights-ը www.CTA-ի ֆունկցիոնալ գրաֆիկայի կոնտեքստն է։

6) Միասնական տերմինաբանություն և միկրոկոպիրեյթինգ

6. 1 Գլոսարիա

Վարեք բիզնեսի և UX տերմինների միակ գլոսարիան։ Ինտերֆեյսի յուրաքանչյուր հոդված տեղադրված է դրա վրա։

Դուբլետների համար 'ընտրել մի բառ («դրամապանակ» vs «հավասարակշռություն»), երկրորդը' որպես հոմանիշ որոնման մեջ։

6. 2 Տեքստի կանոնները

Կարճ և գործով. խուսափել ժարգոնից։

Սխալները բացատրում են, թե ինչ անել. <<Նշեք ամսաթիվը GGG-MM-DD ձևաչափով>։

Վերնագրերը գոյականներ են։ կոճակները բայերն են («Պահել», «Չեղարկել»)։

Կոնսիստենտ միավորներ 'ամսաթիվը/ժամանակը UTC-ում կամ լոկալներում, կոդով (CPR, USD)։

7) Պատկերագրություն և նկարագրություն

Ընտանիքը իզոմորֆիկ է 'մեկ անկյուն, գծային գծեր, ցանցը 24 2424։

Ստատուսները և սեմանտիկան 'գույնը' պոլիեն; ձևը/iconka + տեքստը առաջնային է։

Մեծացումը 'պիկտոգրամները չեն «լողում» տարբեր խտություններում (1 մգ/2 մգ/3)։

8) Հասանելիությունը (A11y) և տեղայնացումը (i18n/RTL)

Բաղադրիչները անցնում են WCAG AA 'հակադրություն, ստեղնաշարի ռոտացիա, ֆոկուս, «wwww.fers-reduced-motion»։

Թարգմանված տողերը ռեսուրսների մեջ են, ոչ կոդում։ Pleisholders և թվերի ձևաչափը/dat - lizumes։

RTL 'սրբապատկերների հացահատիկը, Tab-ի ճիշտ կարգը, DnD տրամաբանությունը ստեղնաշարից։

9) Թվեր, ամսաթվեր, արժույթներ և հյուրանոցներ

Ամսաթվերը/ժամանակը ՝ RF-8601, իրական ժամանակի կետը - UTC; օգտագործողը ռոտիլն է։

Արժույթը ՝ minor units/տասանորդ տողեր; միշտ նշեք կոդը (օրինակ ՝ «07 12,34» կամ «12»։ 34 CPR" - լոկալներով)։

Տոկոսները ՝ «12,3 տոկոսը» և «+ 1,2 տոկոսային կետերը» հստակ տարբերել։

Կլորացումը 'մինչև նշանակալի օրինագծեր; «k/m» մեծ թվերի համար։

10) Գովերնանսը 'դերեր, արտեֆակտներ, ալիքներ։

Design Language Council (DLC) 'տոկենների/բաղադրիչների սեփականատերերը, ասում են RBC-ը։

Արտեֆակտները

Բաղադրիչների գրադարան (Figma/կոդ) + կենդանի կատալոգը օրինակներով։

Շվեյցարիա: wwww.drails, patterns, A1y, բովանդակություն-դելդ։

Cheinjologe-ով, մակարդակներով (www.ed/changed/deprecated/removed/fixed)։

Ջրանցքները 'շաբաթական դիզայն-կապույտ, Slack-ջրանցք, ներդրման ցնցումներ։

11) Տարբերակումը և էվոլյուցիան

SemVer-ը ռուսական բաղադրիչների համար '"MAJOR։ MINOR. PATCH`.

MINOR-ը ադիտիվ է 'նոր հոսանքներ, դեֆոլտներ, նոր բաղադրիչներ։

MAJOR-ը breaking-ն է 'բացթողումների հեռացում, սեմանտիկայի փոփոխությունը կատարվում է միգրացիոն պայմաններով։

Դեպրեսիաներ ՝ զգուշացումներ, պատուհան 90 օր, դրոշներ։

12) Լինթեր և ավտոմատ ստուգումներ

UI-linter: արգելված գույները հոսանքներից դուրս, anti-pattern (կոճակ-դիվ, անջատված entine)։

A11y-ստուգումներ 'հակադրություն, դերեր/արիա, ֆոկուս, ստեղնաշար։

i18n-linter: «կոշտ» տողերը կոդում, սխալ pleisholders։

Սկրինշոտ թեստեր 'բաղադրիչների տեսողական ռեգրեսիա։

API վիզուալիզացիայի պայմանագրերը (եթե կա) 'տվյալների տեսակներ, միջակայքներ, ստորագրություններ։

13) Բաղադրիչների վիտրինը (storybook/ավազի)

Կենդանի օրինակներ, որոնք ունեն անցանկալի վերահսկողություն, կոդ, կազմված, A1y-չեկեր։

«Բաղադրատոմսեր» 'գրանցման ձևը, վարպետը 3 ռուբլիներ, 3.8 + ֆիլտրեր, մոդալկա + տոստա։

«Լոկալների ավազը» 'լեզվի/ֆորմատների/RTL փոխակերպումը։

14) Նեյմինգի և կառուցվածքի օրինակները

14. 1 Բաղադրիչներ (VEM/սեմանտիկա, CSS օրինակ)

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

Կոդի մեջ գտնվում են անհետացումների միատեսակ անուններ ՝ «size», «kind», «www.abled», «onClick»։

14. 2 Գրադարանի ալյումինե կառուցվածքը

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

15) Anti-patterna

«Ազատ» գույները/նահանջները հոսանքներից դուրս։

Բաղադրիչների դուբլի ՝ «Butium V2», «Primant Butium New»։

Պլեյշոլդերը որպես դաշտի միակ նշան։

Անջատումը entine և dive կոճակները։

Անկանխատեսելի hover/action/www.abled։

Թարգմանված տերմինները նորմալ թարգմանության փոխարեն։

Միգրացիոն դելդների բացակայությունը նորարարությունների ժամանակ։

16) Միասնական լեզվի որակի մետրերը

Coverage 'էկրանների մի մասը, որոնք օգտագործում են բաղադրիչների գրադարանը։

Consistency Index-ը 'vs «ձեռքի» ոճերի կրկնվող օգտագործումը։

A1y Pass Rate-ը WCAG AA-ի բաղադրիչների տոկոսն է։

Internet Escape: UI/բովանդակության թերությունները վաճառում են 1k կոմունիտներին։

Time-to-Ship: Ժամանակը տիպիկ էկրանի իրականացման համար DFC-ից առաջ/հետո։

Adoption: DAU վիտրիններ, PR-ի քանակը բաղադրիչների/արտոնագրերի հետ։

17) Էկրանի թուղթ

• Օգտագործվել են հոսանքները (գույնը/նահանջը/ճառագայթները), ոչ թե «կոշտ» արժեքները։
• Գրադարանից բաղադրիչները. քաստը միայն RFC-ի դեպքում է։
• Հասանելիություն ՝ ստեղնաշար/ֆոկուս/հակադրություն/rolei/aria։
• Միավորներ ՝ ամսաթվեր/արտարժույթ/տոկոսներ 'ըստ ձևերի։
• Միկրոկոպի 'կոճակներ = բայեր, սխալներ = ուղղման գործողություն։
• Lokali/RTL չեն կոտրում մոդելը։
• Վիճակը 'loading/empty/error նախատեսված է։
• Տեսողական ռեգրեսիայի թեստերը նորարարված են։

18) Իրականացման պլանը (3 իտացիա)

Iteration 1 - Հիմնադրամ (2-3 շաբաթ)

Թոկենները (գույն/տպագրություն/spacing/motion), հիմնական բաղադրիչները (Button, Input, International, Tooltip, Modal), բովանդակությունը (ton, պիտակներ, սխալներ)։

Վիտրինը (storybook) և A1y-չեկերը, հոսանքների ոսպնյակը։

Iteration 2 - Patterna և տեղայնացում (3-4 շաբաթ)

Ձևերի/սեղանների/ֆիլտրերի, իկոնպակի 24-24, RTL/i18n-ավազի, թվերի/ամսաթվերի/արժույթների կանոնները։

SemVer, cheinjlog, RSA/միգրացիաների գործընթացը, ավտոտեստերը (տեսողական + A1y)։

Iteration 3 - Մասշտաբը և էվոլյուցիան (շարունակաբար)

Կոմպոզիցիոն բաղադրիչները (Wizard, Black Grid, Chart primitives), թեմատիզացիան (թեթև/մուգ/հակադրողական), որակի չափումների հաշվետվությունները, որոնք մեջբերում են UX-աուդիտները։

19) Mini-FAQ

Արդյո՞ ք պետք է անմիջապես «ամեն ինչ և անմիջապես»։

Ոչ։ Սկսեք հոսանքներից և հիմնական բաղադրիչներից, ապա ավելացրեք փամփուշտներ և գործընթացներ։

Ինչպե՞ ս համոզել թիմերին օգտագործել EYA-ն։

Ցույց տվեք հաղթանակը 'արագություն, ավելի քիչ թերություններ, էկրանների պատրաստի բաղադրատոմսեր և A1y «տուփից»։

Ի՞ նչ անել legacy էկրանների հետ։

Միգրացիայի պլանը, կամուրջային պողպատները հոսանքների միջոցով, գերակայական էկրանները առաջինն են։

Արդյունքը

Ինտերֆեյսների միասնական լեզուն միայն բաղադրիչների գրադարան չէ։ Սա կանոնների և գործընթացների համակարգ է, որտեղ հոսանքները տալիս են արտահայտություն, բաղադրիչներ 'վարք և հասանելիություն, պատրանքներ' որոշումների կրկնություն, իսկ հովիվներն ու չափումները կայուն էվոլյուցիա են։ Լեզուն դարձրեք պարզ, ստուգված և ընդլայնված, և ձեր ապրանքները միապաղաղ, արագ և հուսալի տեսք կունենան։