Design Systems և նրանց գործընկերները

1) Ի՞ նչ է դիզայնի համակարգը, և ինչո՞ ւ է այն անհրաժեշտ։

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

Նպատակները

Տեսողական և վարքագծային շերտի համաձայն բոլոր ապրանքներում։

Արագություն 'բաղադրիչների փոխպատվաստում, ավելի քիչ հոսանք։

Որակը 'ընդհանուր A1y-ը, տեղայնացումը, թեստերը, բովանդակության ստանդարտները։

Կառավարումը 'հստակ պատասխանատվություն, օրինագծեր, ճանապարհային քարտեզ։

2) Դիզայնի համակարգի ճարտարապետությունը (շերտեր)

1. Դիզայնի-հոսանքները (foundation) 'գույներ, տպագրություն, չափսեր, ճառագայթներ, ստվերներ, նահանջներ, վիճակներ, ինչպես նաև սեմանտիկ հոսանքներ («color»)։ surface. warning`, `space. xs`).

2. UI բաղադրիչները 'կոճակներ, մուտքագրման դաշտեր, մոդելային պատուհաններ, dropdauns, սեղաններ, tosts, banners, alerts, դատարկ վիճակներ, կմախքներ։

3. Patterns և կոմպոզիցիաներ ՝ KYC ձևեր, հիբրիդային ֆլոու, զրոյական արդյունքներ, շրջադարձային վարպետներ, բովանդակության քարտեր։

4. Բովանդակությունը (microcopy): ton, տերմինների բառարանը, սխալների/հաջողության ձևանմուշները, push/banners։

5. Ենթակառուցվածքը ՝ A11y-ը, փորձարկումը, դեղորայքը, տարբերակները, ներդրողները (www.ributing)։

3) Դիզայնի հոսանքները. Սկզբունքներ

Սեմանտիկա> «հում» ոճը։ Օգտագործեք 'color։ text. muted 'փոխարեն # 6B7280 "։

Թեմիզացիան և պլատֆորմները։ Տոկենայի աղբյուրը տեղադրված է պլատֆորմային մապինգներ (Web, iOS, Android, email)։

Թեթև/մութ թեման և WCAG-ի հակադրությունը հոսանքների մակարդակում։

Գլոբալ և կոնտեքստային մասերը '"space. 2`, `radius. md`, `elevation. 1`, `opacity. disabled`.

Տոկոնների տարբերակումը 'փոփոխությունները' deprecation policy-ի և միգրացիոն նշանների միջոցով։

4) Բաղադրիչներ ՝ պահանջներ և էջերի կազմը փաստաթղթերում

Յուրաքանչյուր բաղադրիչի համար պետք է ներառվի

Նկարագրությունը և նշանակումը։ Երբ օգտագործել/չօգտագործել։

Տարբերակները/վիճակը։ Չափերը, տեսակները (primary/secondary/ghost), delabled, loading, destructive։

Հասանելիություն։ Դեր, ստեղնաշարային ռոտացիա, «aria-», հակադրություն, ֆոկուս օղակներ։

Տեքստը և microcopy-ի օրինակները։ Վալիդային պիտակներ/պլեյշոլդերներ, սխալներ, օգնություն։

Կոդի օրինակները։ Նվազագույն API, www.led/uncontroled։

Ինտեգրումը ձևերի և i18n-ի հետ։ Երկար տողերի, թվերի/արժույթի/ամսաթվերի քեյսերը։

Անտիի օրինակները։ Օգտագործման սխալ փամփուշտները։

Թեստ-մատրիցա։ Տեսողական սարքավորումը, unit/interaction, scrinriders։

5) Կոմպոզիցիայի Patterns (Recipes)

Գրանցման ձևերը/CUS 'մաքսանենգ վարպետ, առաջընթաց, ination + summary, սխալի ձևեր։

Հիբրիդային ֆլոուն 'մեթոդի ընտրություն, կանոններ, same-method կանոն, հաստատում և կարգավիճակ։

Դատարկ վիճակներ 'ենթատեքստը + արժեքը + CTA, զրոյական որոնման արդյունքները։

Հաջողության/սխալների հաղորդագրությունները 'կարգավիճակի հիերարխիա, տեսողական հոսանքներ, տոստներ/բաններ/մոդալներ։

Լուծումը և ֆիլտրերը 'գլոբալ որոնում, արագ ճնշումներ, թեգեր։

Patrocopy-ի էջերը պետք է ցույց տան բաղադրիչներից, որոնք պատրաստ են պատճենել, microcopy-ից և A1y-ից։

6) Content de (voice & tone, microcopy)

Ձայնը 'մասնագիտական, պարզ; տոնը կախված է կոնտեքստից (onbording, վճարում, անվտանգություն)։

Տերմինների մեկ բառարանը 'վճարումները, բոնուսները, լիմիտները, KYC-ը, ապրանքի մի արժեք է։

Ձևանմուշները ՝ CTA, սխալներ, նախազգուշացումներ, հաջողություններ, դատարկ վիճակներ, ծանուցումներ։

Տեղայնացում-first 'գծերի երկարության, թվերի/արժույթի/տարածաշրջանի ամսաթվերի տակ։

A11y բառապաշար 'պարզ պիտակներ, արիա-նկարագրություններ, առանց երկիմաստ։

7) Accessibility (A1y) որպես համակարգային համակարգ

Հիմնական չափանիշները ՝ WCAG 2։ 1 AA հակադրության համար, ֆոկուսը միշտ տեսանելի է, ստեղնաշարի լուծումը։

Դերերն ու ատրիբուտները 'բաղադրիչները նկարագրում են «role», «aria-label», «aria-describedby», լայվ շրջանները թոստերի/ալերտների համար։

Էկրանի ռիդերները 'արտահայտությունների օրինակներ, կարդալու կարգը, ճիշտ կարգավիճակները («assertive/polite»)։

Թեստային ընթացակարգեր 'ավտոմատ ստուգումներ + ձեռքով սցենարներ։

8) Տեղայնացումը և միջազգայնացումը

i18n-բանալիներ բաղադրիչի կոդի մոտ + ենթատեքստի նկարագրություն։

Թվեր/արժույթի/ամսաթվերը վերացման կոմունալ ծառայությունների միջոցով։ չի հանդուրժում տեքստը ձևանմուշներում։

Երկարության թեստերը ՝ «երկար գերմանական», «նեղ բջջային», RTL տարբերակներ։

Ton-map-ը կրիտիկական քայլերի համար (վճարումներ/անվտանգություն)։

9) Մոսկվա ՝ կառուցվածք և ռոտացիա

Wiki/դիզայնի համակարգի պորտալի առաջարկվող կառուցվածքը

1. Ներդրումը 'առաքելություն, սկզբունքներ, պատասխանատվության գոտիներ։

2. Թոկենները ՝ գույներ, տպագրություն, ցանցեր, չափսեր, ստվերներ, վիճակներ, թեմաներ։

3. Բաղադրիչները 'ֆիլտրերի թղթապանակ (դերի վրա, պլատֆորմով, A11y-ով)։

4. Արտոնագրեր ՝ սցենարներ (ձևեր, վճարումներ, դատարկ վիճակներ, հաջողություններ/սխալներ)։

5. Բովանդակությունը 'ձայն և երանգ, բառարան, microcopy ձևանմուշներ։

6. Accessibility: Ստանդարտներ, չեկի թերթիկներ, թեստային դեպքեր։

7. Տեղայնացում 'սկզբունքներ, օրինակներ, շուկաների գլոսարիա։

8. Ինտեգրումը և կոդը 'տեղադրում, տարբերակներ, օրինակներ, «how-to migrate»։

9. Medributing 'ներդրման գործընթացներ, դիզայնի հեղափոխություն, ռևյու կոդը, www.inme of done։

10. Changelog և Roadmap: Roadmap, deprecation, զարգացման պլան, known issues։

10) Կառավարումը և գործընթացները (governae)

Դերերը 'համակարգի սեփականատերը (Design Ops/UX Platform), meinteiner (դիզայն/FE), խորհրդատուներ (BE, A1y, տեղայնացում)։

Փոփոխությունների հանձնաժողովը 'հարցումների գնահատումը, առաջնահերթությունը, API/tokens-ը։

Գործընթացները ՝ RBC նոր բաղադրիչների, ներքին issue ձևերի, SLA-ի ուղիների վրա։

International of Done: Դիզայնը (Figma) կոդն է (UI փաթեթը) դելդոկա (օրինակ + www.d)։

11) Corributing: Ինչպես ավելացնել/փոխել/փոխել

Office RBC։ Խնդիրը լուծվում է A1y www.i18n-ի կողմից ընտրված լուծմամբ։

Ֆլոու PR 'դիզայն-ռևոը www.UX-կոոպիրայթերն է A1y-chek-ը։

Հետադարձ կոդավորման կանոնները ՝ minor/patch անլուծելի, major-ը 'deprecation-ով և ավտոմատ միգրացիայով, որտեղ հնարավոր է։

12) Տարբերակումը, ալգորիթմները,

SemVer-ի համար («@ company/ds-info», «@ company/ds-meds», «@ company/ds-charts»)։

Rele.notes: Տոկենների, API բաղադրիչների փոփոխություններ, լռելյայն վարքագիծ, breaking changes, www.ds)։

Deprec.ru: Նշումներ տախտակի մեջ, ոսպնյակների կանոններ, կոդային նորաձևություններ զանգվածային փոխարինման համար։

Design-tokens pipeline: մեկ աղբյուրը (JSON/YAML) մեջբերում է պլատֆորմային տոմսերը (CSS vars, iOS, Android)։

13) Որակի փորձարկում

Վարքագծի և վիճակների յունիտ թեստերը։

Տեսողական սարքավորումը (թեմաների/պետությունների ռեգրեսիա)։

A1y-թեստեր 'ավտոմատ + ձեռքով սցենարներ։

E2E քեյսները կրիտիկական ֆլոուի համար (108, վճարումներ, KYC)։

Perf-բյուջեներ 'սահմանափակումներ խմբավորման/ռենդերի վրա և արգելքներ ծանր կախվածության համար։

14) Դիզայնի համակարգի հասունության մետրերը

Adoption: Էկրանների/ռեպոզիտորիայի տոկոսը, որոնք օգտագործում են DS։

Velocity: ժամանակ մակեթից մինչև առաքումը։

Quality: UI/A11y թերությունները 1 թողարկման վրա։

Consistency: «միանգամյա» բաղադրիչների քանակը/DS-ից դուրս։

Docs 'բաղադրիչների ծածկումը բժիշկ, NPS ներքին լսարան (դիզայներներ/զարգացողներ/վերլուծաբաններ)։

15) Anti-patterna

Թոկենները որպես պալիտրա առանց սեմանտիկայի («պարզապես գույն»)։

Բաղադրիչները առանց փաստաթղթերի և առանց ծայրահեղ դեպքերի օրինակների։

A11y-ի անտեսումը (ոչ ֆոկուս, ցածր հակադրություն, ոչ «aria»)։

Կոտրող տարբերակումը առանց deprecation-ի և միգրացիոն սկավառակի։

Թաքնված տրամաբանությունը տարրերում (բիզնես կանոնները UI վարքի փոխարեն)։

Բաղադրիչների կրկնապատկումը նեղ դեպքերի համար 'API-ի ընդլայնման փոխարեն։

16) Չեկ թերթերը

Տոկենների համար

• Սեմանտիկ անուններ և նշանակումներ։
• Հակադրություն AA երկու թեմաներում։
• Փաստագրված են սկեյլներն ու օգտագործման սկզբունքները։

Բաղադրիչի համար

• Տարբերակները/վիճակը ծածկված են։
• A1y-նկարագրություն, «aria-», ֆոկուս։
• Microcopy (պիտակներ, սխալներ, հուշումներ)։
• Կոդի և edge-cass (երկար տողեր, բեռնումներ, դատարկ)։
• Unit/visom/A1y-թեստերը կանաչ են։

Ֆորումի համար

• Rele.notes-ը մինչև/հետո օրինակներով։
• Migration guide и deprecations.
• Նորարարված storis/deo, հղում դաջվածքում։

17) «Մինչև/հետո» օրինակները

Դո (տարաձայնություն)

Տարբեր առաջնային կոճակներ ՝ գույներ/ճառագայթներ/նահանջներ չեն համընկնում։ տարբեր CTA տեքստեր։

Հետո (DS-ի միջոցով)

Միակ 'Button' s: «size = md», «variance = primary», «radius = lg», «spacing = md», տեքստը «գործողություն + օբյեկտի» ոճով։

Մինչև (ձևերի սխալներ)

Տեխնիկական հաղորդագրությունները, առանց հուշելու։

Հետո

Բաղադրիչ ' ամսաթվի սխալ ձևաչափը։ Օգտագործեք DD։ MM։ ԳԳԳԳ։ + մեքենայական ֆոկուս։

18) Բաղադրիչի էջերը (կմախքը)

Անունը ՝ Button

Նկարագրություն 'սկսում է գործողությունը; 1 հիմնական էկրանի վրա։

Տարբերակները ՝ primary, secondary, ghost, destructive; չափսերը sm/md/lg։

Վիճակը 'hover, focus, action, loading, www.abled։

A1y: հասանելի է ստեղնաշարից; «aria-pressed» անջատված համար։

Microcopy: «Պահպանել փոփոխությունները», «Շարունակել հավատացումը»։ Խուսափել OK-ից։

Կոդը (օրինակ API) '"Button + variant, size, icon, loading +։

Anti-օրինակներ 'կրկնակի primary հիերարխիայի մեկ մակարդակում։

Թեստեր 'տեսողական սարքավորում, հակադրություն, focus-ring։

19) Դիզայնի համակարգի ներդրումը (rollout)

1. Ինտերֆեյսների աուդիտը 'ծաղիկների/տպագրության/բաղադրիչների/պաթոիդների ռոտարիզացիա։

2. MVP տոկենները և հիմնական բաղադրիչները ՝ Button, Input, System, Modal, Alter, EmptyState, Tope։

3. Մոսկվան և Սթորիբուկը 'կենդանի օրինակներ, կոորդինատներ, դելդներ։

4. Փորձնական արտադրանք 'վիջետների փոխարինումը, հետադարձ կապի հավաքումը։

5. International-ը ՝ նորաձևության կոդը, deprecation կանոնները։

6. Ընդլայնումը 'սեղաններ, սագինացիա, ձևերի օրինակներ, վարպետի քայլերը։

7. Մեծացումը 'սննդի արտոնագրեր (վճարումներ, KYC), վերլուծության և A/B ինտեգրումը։

8. Աջակցություն 'հարցերի ջրանցք, SLA, ներքին vorkshops։

20) Արագ փաստաթղթերի օրինակներ

Ձևանմուշները

Անունը '"color. border. warning`

Նշանակումը 'Notice/Warning նախազգուշացումների շրջանակը

Հակադրություն 'AA' color ֆոնի վրա։ surface. default`

Դուք չեք կարող օգտագործել փոքր կեգլի տեքստը

Կապված '"color. surface. warning`, `icon. warning`

Excattern: Դատարկ վիճակը (Results)

Նպատակը 'հարցման հետաձգումը առանց «սխալների»

Կազմը 'վերնագիր (opz.) , տեքստը (1-2 նախադասություն), CTA, CTA ստացիոնար, iconka/նկարազարդում/

Microcopy: < ոչինչ չկար։ Խնայեք ֆիլտրերը կամ պարզաբանեք հարցումը"։

A11y: `role="status"`, `aria-live="polite"`

Ալյումինե գնդակը

Սեմանտիկ հոսանքները + A1y = հիմքը։

Բաղադրիչների էջերը լի են ՝ նշանակումը, տարբերակները, A1y, microcopy, կոդը, թեստերը։

Patterns = բաղադրիչների կոմպոզիցիաներ պատրաստի տեքստերով և կանոններով։

Docs-ը ապրանք է 'տարբերակը, ֆորումը, իրականացումը, ներդրման գործընթացը։

Չափեք հասունությունը 'adoption, արագություն, թերություններ, կոնսիստենտություն, NPS ներքին թիմեր։