Gamble Hub UI բաղադրիչների գրադարան

1) Նպատակներն ու սկզբունքները

Ինչու 'արագացնել դելֆիչը, ապահովել պահպանողական UX և պարզեցնել աջակցությունը։

Սկզբունքները

Սեմանտիկան և չեզոքությունը։ Բաղադրիչը լուծում է UI առաջադրանքը առանց բիզնես տրամաբանության։

A11y-by-default. Դերերը, ֆոկուսային օղակները, aria-ատրիբուտները և հակադրությունը բաղադրիչների մեջ են։

i18n-first. Տողերի երկարությունները, թվային կոդերը, RTL-ը, հաշվի ենք առնում արկղից։

Տեմիզացիա։ Լուսավոր/մութ թեմաներ և բրենդային շեշտադրումներ հոսանքների միջոցով։

Մեծացումը։ Միասնական API-ը, որը պարունակում է major-ի հետ կապված փոքրամասնական օրինագծեր։

2) Հիմքեր ՝ դիզայնի-հոսանքներ (ֆունդացիա)

Կառուցվածքի օրինակ (JSON/YAML աղբյուրը CSS variables/Android/iOS)

json
{
"color": {
"text": { "default": "{palette. neutral. 900}", "muted": "{palette. neutral. 600}", "inverse": "{palette. neutral. 0}" },
"surface": { "default": "{palette. neutral. 0}", "elevated": "{palette. neutral. 50}", "brand": "{palette. brand. 50}" },
"accent": { "primary": "{palette. brand. 600}", "success": "{palette. green. 600}", "warning": "{palette. amber. 600}", "error": "{palette. red. 600}" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 },
"radius": { "sm": 8, "md": 12, "lg": 16, "full": 999 },
"elevation": { "0": "none", "1": "0 1px 2px rgba(0,0,0,.08)", "2": "0 4px 12px rgba(0,0,0,.12)" },
"motion": { "fast": "120ms", "base": "200ms" },
"opacity": { "disabled": 0. 45, "muted": 0. 7 }
}

Կանոնները ՝ սեմանտիկ հոսանքներ (օրինակ ՝ «color»)։ accent. success ') օգտագործվում են բաղադրիչներ։ պալիտրա ներքին է։

3) Բաղադրիչների կատեգորիաները

1. Базовые (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.
2. Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.

3. Ռոտացիան ՝ AppBar, Tast, Breadcrumics, Pagination, Drawer/Sidebar, Stepper։

4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.

5. Տվյալները և աղյուսակները ՝ Table, Black List, Card, Accordion, System, EmptyState։

6. IGaming հատկություն

GameTile (խաղի քարտ)

ProviderBadge

JackpotTicker

LiveBadge (նախկին սեղան/շոու)

LobbyProters (պրովայդեր/ժանր/լիմիտ)

BonusBanner / BonusCard

MissionProgress / AchievementBadge

TournamentLeaderboard

WalletCard / BalanceWidget

PaymentMethodCard

DepositForm / WithdrawalForm

KYCStatusBadge / KYCChecklist

ResponsibleGamingBanner / LimitsControl

AgeGate / SessionTimer / RiskAlert

SystemStatus / MaintenanceBanner

4) Բաղադրիչի էջ 'պարտադիր բովանդակություն

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

Կազմը և տարբերակները։ Չափերը, վիճակը, փոփոխականները։

API. Անհետացումներ, իրադարձություններ, արցունքներ, վերահսկվող/անվերահսկելի ռեժիմներ։

A11y. Դերերը, ֆոկուսը, aria-կապերը, live-տարածաշրջանները։

i18n. Երկարությունները, երկարությունները, որոնք տեղադրված են։

Microcopy. Չարտոնված տեքստերը (CTA, հուշումներ, սխալներ)։

Կոդի օրինակները։ Տիպիկ, edge-cass (սխալներ, բեռնումներ, դատարկ)։

Թեստերը։ Տեսողական/յունիտային/interaction/A1y-ի մատրիցը։

Անտիի օրինակները։ Օգտագործման հաճախակի սխալները։

5) Հիմնական բաղադրիչները 'արագ ճշգրտումներ

5. 1 Button

Տարբերակներ ՝ «primary www.secondary www.ghost www.dtructive» Չափսեր ՝ «sm md www.lg»

Վիճակը ՝ normal, hover, focus-visible, action, loading, diabled

A11y 'տեսանելի focus-ring, «aria-buby» «loading», «aria-pressed» togle

Microcopy: Գործողություն + օբյեկտ («Պահպանել փոփոխությունները», «Անցնել հավատալիքները»)

Անտի օրինակ ՝ OK

5. 2 Input / Field

Կազմը ՝ label, field, helper, error, www.fix/suffix

A11y: `aria-invalid`, `aria-describedby`, связка `for/id`

Pattern սխալներ. Որ ոչ թե + ինչպես շտկել («Մուտքագրեք համարը + 380»)

Արցունքներ ՝ «www.fix» (icon), «suffix» (կոճակը «ցույց տալ գաղտնաբառ»)

5. 3 Select / Combobox

Հատկություններ 'ցուցակի որոնում, ստեղնաշար, երկար ցուցակների վիրտուալացում

A11y: `role="combobox"`, `aria-expanded`, `aria-activedescendant`

Դատարկ արդյունքները. <<Ոչինչ չի հայտնաբերվել։ Փոխեք հարցումը"։

5. 4 Modal / Drawer

Կանոններ ՝ trap focus, ESC/overlay, ռուսական ֆոկուս

Օգտագործումը 'վճարումների հաստատում, բոնուսի կանոնները, KYC քայլերը

5. 5 Toast / Snackbar

Ժամանակը ՝ 2-4 s, առանց հոսքի արգելափակման

Live-տարածաշրջաններ '"aria-medical =" polite "հաջողության համար," assertive "սխալների համար

Օրինակներ. <<Մոսկվան ընդունվել է։ Հավասարակշռությունը նորարարված է"։

5. 6 EmptyState

Ձևաչափը + արժեքը + CTA + հիբրիդային CTA

Օրինակ. <<Այստեղ կհայտնվեն ընտրված խաղեր, երբ ավելացնեք առաջինը։ [Ավելացնել ընտրված]"

6) iGaming բաղադրիչներ 'հատկություններ և API

6. 1 GameTile

Նշանակումը 'խաղի քարտը լոբբիում/2019։

Կազմը ՝ շապիկ, պրովայդեր, ռուսական (New/Hot/Jackpot/Windows), RTP (opz) , արագ գործողություններ։

API (օրինակ)։

ts
<GameTile title="Lightning Roulette"
provider="Evolution"
tags={["Live","Popular"]}
isJackpot={true}
onPlay={...}
onFavToggle={...}
/>

Վիճակը ՝ hover (արագ մեկնարկը), skeleton, անհասանելի է (տարածաշրջանը/ժամանակը)։

A1y: alt-տեքստը, ստեղնաշարային սկիզբը, "aria-label =" Խաղալ Lightning Roulette "-ում։

6. 2 LobbyFilters

Նշանակումը 'լոբբի ֆիլտրեր (ժանր, պրովայդեր, լիմիտներ, ալատիլիզմ)։

Ֆիչին 'պահպանված քաղցրավենիք, ֆիլտրեր, արդյունքների հաշվիչ։

Microcopy: «Ֆիլտրեր», «Խնայիր ֆիլտրերը», «Հայտնաբերվել են ՝ 108»։

6. 3 BonusBanner / BonusCard

Տարբերակները 'ողջույն, ռեալոադ, քեշբեկ, ֆրիպիններ, մրցույթը։

Դաշտերը ՝ վերնագիր, պայմանները, գործողության ժամանակահատվածը, CTA («Ակտիվացնել բոնուսը»)։

A1y: Հղումները կարդացվող պայմաններին, «aria-describedby» -ը նկարագրում է պայմանների մանրամասները։

Anti-pattern 'թաքցնել հիմնական սահմանափակումները։

6. 4 JackpotTicker

Նշանակումը 'ջեքպոտի վազող գումարը ավտոմատ նորարարությամբ։

API 'տվյալների աղբյուրը, նորարարության ժամանակահատվածը, արժույթի ձևաչափը։

A1y: "role =" status ", մի խախտեք ընթերցանությունը։

6. 5 TournamentLeaderboard

Կազմը ՝ դիրքերի, ակնոցների, մրցանակների, թայմերի, սեփական դիրքի։

Ֆիչին 'պագինացիա/վիրտուալացում, իր տողի համախմբում։

A1y: «th »/« scope», կարդացվող սյուները, սլաքների լուծարումը։

6. 6 WalletCard / BalanceWidget

Դաշտեր ՝ հավասարակշռություն, արգելափակված միջոցներ, բոնուսային հավասարակշռություն, արժույթ։

Գործողությունները ՝ «Համալրել», «Բերել», «Պատմություն»։

Անվտանգություն 'թաքցնել/ցույց տալ գումարը, դիմակայել ընդհանուր գոտիներում։

6. 7 PaymentMethodCard

Դաշտերը 'պրովայդերի լոգոն, լիմիտներ, հյուրանոցներ, ETA, հիբրիդային հասանելիություն։

Վիճակը անհասանելի է (տարածաշրջանը/կարգավիճակը), վերամշակման, սահմանների նախազգուշացման մեջ։

Microcopy: «1,5 տոկոսը պահում է պրովայդերը», «Վճարումը մինչև 15 րոպե»։

6. 8 DepositForm / WithdrawalForm

Patterns: inox-validation, ընդհանուր լիմիտներ, same-method rule հուշերով։

A1y: Սխալների հայտարարությունը («assertive»), ֆոկուսի թարգմանությունը առաջին սխալի։

Ծառայողական դաշտերը ՝ «Միջոցների աղբյուրը», «Նշանակումը», եթե անհրաժեշտ է AML-ը։

6. 9 KYCStatusBadge / KYCChecklist

Վիճակը ՝ «none dextended direjected pending»։

Տեքստերը ՝ «Սա կտևի 242 րոպե», «Լուսանկարը առանց բլոկների, տեսանելի են անկյուններն ու տեքստերը»։

CTA '«Անցնել հավատալիքները», կամայական. <<Ինչու՞ է դա կարևոր։ ».

6. 10 LimitsControl / ResponsibleGamingBanner

Նշանակումը 'դեպոզիտներ/105/ժամանակ, ընդմիջումներ, ինքնախաբեություն։

A1u/Ton: չեզոք, առանց ճնշման, հղում։

7) Օկուպացիայի պատրանքները (Recipes)

Express/KUS: Stepper + Form + Intel Error + Pox Alert + SuccessTo.ru։

Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.

Պատասխանատու խաղը 'Responsible GamingBanner + LimitsPorl + FAQ-link։

8) Accessibility (A11y)

Տեսանելի ֆոկուսը միշտ (ներառյալ մութ թեմայում)։

Ստեղնաշարի լուծումը բոլոր ինտերակտիվ բաղադրիչների վրա։

«aria-24=» polite/assertive «» տոստերի/ստատուսների համար։

Հակադրողները WCAG 2-ից ցածր չեն։ 1 AA.

Սրբապատկերներում տեքստը իմաստ չունի։

RTL ռեժիմները, 320 px ստուգումը և բարձրաձայն կարդալը։

9) Տեղայնացումը և տեղայնացումը

Բոլոր օգտագործողական տողերը i18n-բանալիների միջոցով են։

Մրցույթի օրինակը

ui. button. save = Save wallet. deposit. success = Payment accepted. Balance updated.
kyc. photo. hint = Photo without glare, corners and text are visible.
filters. reset = Reset filters

Ամսաթվերի/արժեթղթերի ինդուկցիան անջատված է, ոչ թե տողերով։

Tone-map-ի միջոցով (չեզոք/աջակցող/պաշտոնական)։

10) Պերֆորանսը և որակը

Ցուցակների վիրտուալացում (խաղեր, սեղաններ)։

Լվացնելով նկարների բեռնումը, ծածկագիրը էջերով։

Բանդալի չափսերը 'բյուջեն UI փաթեթով, առանց ծանր կախվածության։

Skeleton-ը արագությունը ընկալելու համար, սպինները նվազագույն են։

Թեստեր ՝ յունիտ, տեսողական սարքավորում, interaction, A1y, E2E կրիտիկական ֆլոուի համար։

11) Տարբերակումը և ֆորումը

SemVer: patch - բաղնիք; minor - անլուծելի; major - միգրացիաների հետ։

Releant Notes: tokens/API/վարք, սկրինշոտներ մինչև/հետո։

Deprecom: Նշումներ դոզայում, կոդի-նորաձևության և ոսպնյակների կանոնների մեջ։

Storybook/Playground: Կենդանի օրինակներ, accessibility վահանակ, RTL toggle։

12) Corributing (ներդրում)

RFC-ն նոր բաղադրիչի վրա է. Խնդիրը լուծվում է A1y no i18n API-ի կողմից ընտրված լուծմամբ։

PR-chek-թուղթը 'դոքս, storis, թեստեր, տեսողական սարքավորումներ, հակադրություններ, i18n, dark/RTL։

International of Done: բաղադրիչ + 35+ թեստեր + պաթոգենների օրինակներ։

13) MVP փաթեթը և ճանապարհային քարտեզը

MVP (առաջին մատակարարումը)

Button, Input, Select, Checkbox, Radio, Switch, Modal, Toast, Tooltip, Progress, Skeleton, Card, EmptyState, Tabs, Pagination, Breadcrumbs, Table, GameTile, LobbyFilters, BonusBanner, WalletCard, PaymentMethodCard, DepositForm, KYCStatusBadge.

Далее: TournamentLeaderboard, JackpotTicker, MissionProgress, LimitsControl, SystemStatus, Drawer/Sidebar, DatePicker, Combobox, FileUpload.

14) Microcopy (պատրաստի կոմպոզիցիաներ)

CTA '«Պահպանել փոփոխությունները», «Անցնել հավատալիքները», «Ավելացնել վճարման մեթոդը»։

Սխալներ. <<Ամսաթվի սխալ ձևաչափը։ Օգտագործեք DD։ MM։ ԳԳԳԳ։ ", "Ֆայլը չափազանց մեծ է (maks 10 MB)"։

Հաջողությունը '"Մոսկվան ընդունվել է։ Հավասարակշռությունը նորարարված է։ «, «Պատրաստ եմ։ Փաստաթղթերը ստուգված են"։

Դատարկ վիճակներ. <<Համաձայն>> ոչինչ չկար։ Խնայեք ֆիլտրերը կամ պարզաբանեք հարցումը"։

15) Anti-patterna

UI բաղադրիչների ներսում բիզնես տրամաբանությունը (կոտրում է վերարտադրողականությունը)։

Անտեսանելի ֆոկուսը կամ իմաստի կախվածությունը միայն գույներից են։

Տողերը, որոնք ծածկված են բաղադրիչների կոդը (առանց i18n)։

Սեմանտիկայի խախտումը (կոճակը 'dance', ցուցակներ առանց «ul/ol/li»)։

Տարբերակները առանց հստակ կանոնների (վերարտադրությունը 'Butium Primant Blast Big2 ")։

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

Բաղադրիչը նախքան թողարկումը

• Նկարագրված է նշանակումը, տարբերակները, API-ը։
• A1y 'դեր, ֆոկուս, aria-ատրիբուտներ, հակադրություն։
• i18n: Բոլոր տողերը նշված են, ստուգվում են երկար լեզուները և RTL-ը։
• Սթորիս/դեմո 'սովորական, բեռնման, սխալների, դատարկ։
• Թեստեր ՝ unite + տեսողական + interaction + A1y.
• Բիզնես տրամաբանություն չկա, միայն UI/վարքը։

Pattern (1934)

• Բաղադրիչների սխեմա կա և ֆոկուսի կարգը։
• Microcopy-ը և սխալների տեքստերը/հաջողությունները։
• Հիմնական չափումները (փոխադարձությունները, error rate, time-to-complete) չափվում են։

17) Փաստաթղթի կմախքը բաղադրիչի համար (ձևանմուշ)

Անունը և նշանակումը

Երբ օգտագործել/չօգտագործել

Տարբերակներ և վիճակներ

API (բացթողումներ, իրադարձություններ, արցունքներ)

Accessibility (դեր, ստեղնաշար, aria, հակադրություն)

i18n (բանալիներ, երկարություն, RTL)

Microcopy (օրինակներ)

Կոդի օրինակները (տիպիկ և edge)

Թեստ-մատրիցա

Անտիի օրինակներ

Արդյունքը

Gamble Hub UI-ը ոչ միայն բլոկների հավաքածու է, այլ կարգապահություն 'հոսող բաղադրիչներ wwww.ww.ww.ru։ Հետևելով այս դելդային, թիմերը ավելի արագ առաքում են ֆիչին, օգտագործողները ստանում են կանխատեսելի և հասանելի ինտերֆեյս, իսկ ապրանքը մեծանում է առանց տեսողական պարամետրերի։ Եթե դուք պետք է, ապա հավաքեք MVP-ի առաջին էջերը, որոնք ունեն օրինակներ և բեկորներ i18n։