Արժեթղթերի փոխակերպումը ինտերֆեյսում

1) Սկզբունքներ

1. Սկզբում իմաստը, ապա UI-ն։ Առանձնացրեք հաշիվը (հաշվապահական ճշմարտությունը) ցուցադրման (հարմարավետության) և գործողության արժույթից (փողի իրական փոխարկումը)։

2. Զրոյական երկիմաստություն։ Ցույց տվեք կոդը + խորհրդանիշը խառնաշփոթի ռիսկի ժամանակ («US դոլար», «CA դոլար», «MXN», «R»)։ 2019/07/2019 համար միշտ ավելացրեք կոդը մանրամասներում։

3. Դասընթացների ազնվությունը։ Ակնհայտ է, որ դասընթացի աղբյուրը, վերջին նորարարության պահը, ներառե՞ լ են 112/սպրեդ։

4. Մուտքագրման իրականացումը։ Արժույթի փոխակերպումը չպետք է «ցատկել» մուտքի արժեքը առանց ակնհայտ համաձայնության (հատկապես ռուսական/դեպոզիտների ձևերում)։

5. Ֆորմատների տեղայնացումը։ Բաժանողները, ալգորիթմները, արժույթի նշանը օգտագործողի լոկալներով։ ճշգրտությունը ուղղությամբ է։

2) Կոդավորման մոդելներ

Քարտեզագրումը (wwww.play-only), բոլոր հաշվարկները մնում են հաշիվի խմբագրությունում, UI-ն ցույց է տալիս համարժեք ընտրված տարբերակում։ Օգտագործեք կոդավորման, վերլուծության, վերլուծության համար։

Հիբրիդ (softconvium) 'ընտրված գրանցամատյանում + գործողության ապացույց հաշիվում (ցույց ենք տալիս երկուսին)։

Վիրահատական (hard convice) 'օգտագործողը փոխում է վիրահատության արժույթը (դեպոզիտ/եզրակացություն/տոկոսադրույքը)։ Անհրաժեշտ է հստակ դասընթացներ, կանոններ, ամրագրման ժամանակ։

Կանոն 'լռելյայն' wwww.play-only, իսկ «կոշտ» ծրարը միացնում է միայն համապատասխան հոսքերում (դրամարկղ, եզրակացություն, միջոցների փոխանցում)։

3) Վերահսկիչները և տեղադրումը

Արտարժույթի անջատիչը գլխարկով/կոդավորման վահանակի վրա (իկոնիկա «07/07/դոլար» կամ արժույթի կոդը)։

Սելեկտորը 'կոդի/անվանման/խորհրդանիշի որոնումը։ ընտրված/հաճախակի արժույթները 'վերևում։

Ձևերի ներսում (դեպոզիտ/տոկոսադրույքը), կոմպակտ ընտրողը գումարի դաշտի աջ կողմում, մոտ «MSX» -ի համար։

Բջջային pattern: bottronsheet-ը ցուցակով և ֆիլտրման համար։

html
<button aria-haspopup="listbox" aria-expanded="false" class="currency-switch">UAH</button>
<ul role="listbox" class="currency-menu" hidden>
<li role="option" aria-selected="true">UAH — ₴</li>
<li role="option">USD — US$</li>
<li role="option">EUR — €</li>
<li role="option">TRY — ₺</li>
</ul>

4) Անջատումը և ճշգրտությունը

Մինորի միավորներ 'պահեք գումարները ամբողջ նվազագույն միավորներում (կոպեկ, ցենտ, սաթոշի)։

Տասանորդ օրինագծերը համաձայն են

0: JPY, KRW, CLP

2: USD, EUR, UAH, TRY

3 +։ Որոշ ZAR (2), KWD (3), crypto (4-8)

Cryptocurrency: Ցույց տվեք մինչև 8 նիշ (դինամիկ ճշգրտություն, բայց ներքևի սահմանից ընթերցանության համար)։

Պլաստիկ թվեր ՝ «font-variant-numeric: tabular-nums;» զանգերը հավասարեցնելու համար։

Intl-nippet

js const fmt = (amountMinor, currency, locale) => {
const fraction = { JPY:0, KRW:0, KWD:3 }[currency]?? 2;
return new Intl.NumberFormat(locale, { style:'currency', currency, minimumFractionDigits:fraction, maximumFractionDigits:fraction })
.format(amountMinor / 10fraction);
};
fmt(200000, 'UAH', 'uk-UA'); // 2 000,00 ₴

5) Դասընթացներ և նորարարություններ

Աղբյուրը 'գրանցեք դասընթացի պրովայդերը (ներքին նավարկություն/բանկ/FX-API)։

Քաշ 'թարմացրեք դասընթացները խելացի հաշվարկով (օրինակ ՝ 60-300 վայրկյան) + պահանջով ռացիոնալ թարմացումները։

Ամրագրման ժամանակը 'ցույց տվեք «N րոպե առաջ» և վիրահատության ժամանակ ամրագրման ժամանակը։

Սպրեդ/հանձնաժողովը 'ցույց տվեք հստակ տողը. <<Դասընթացը 1 USD = 35,60 UAH (միացված է 1։ 5%)».

Թաղամասերը 'բանկային կամ սովորական, ընտրեք մեկը և տեղադրեք քաղաքականության մեջ։

6) UX տեքստը և բացատրությունները

Համարժեքն այն է, որ «No. 52,10 ռուբլիա» -ը, շումայի կողքին, խուլ գույնի հետ, նորարարվում է իրական ժամանակում։

Իրավաբանական հայտարարությունները. <<Իրական դասընթացը և հանձնաժողովը կհրապարակվեն վերջնական հաստատման վրա>>։

Երկար պարամետրեր 'օգտագործեք tooltips/հիբրիդային տողը' «ԱՄՆ դոլարը ԱՄՆ դոլարն է»։

Զամբյուղի կոնվերսիան 'առանց բացատրության չփոխեք «ընդհանուր»։ ցույց տվեք մի տող։

7) Հասանելիություն (A11y)

«role =» listbox/option «» բուծողի մոտ։

Ստեղնաշարի աջակցությունը 'սլաքներ, Enter, Type-ahead կոդով/անվանումով։

Կարդալը SR-ի համար. <<Ցուցադրման արժույթը 'UAH - ավստրիական գրիվնիա>։

Գույնը միակ իմաստն է (միշտ կա կոդ/տեքստ)։

RTL: թվեր/կոդեր 'dir = «ltr» արաբական տողերի ներսում։

8) Պերֆորանսը և քեշինգը

Դասընթացները 'հիշողության + www.alStorage-ի հետ TTL (օրինակ, 5 րոպե)։

Batch-նորարարություն 'հաշվել համարժեքները (requeStaniment Frame, 100-200 մզ)։

Մի ձգեք ցուցակի ավելցուկ ռենտենդերը դասընթացի տատանումների ժամանակ <շեմն (օրինակ ՝ 0,1%)։

9) iGaming հատկությունները

Հաշունտի արժույթը ֆինանսական հաշվետվություններ է (ավանդներ, հավասարակշռություն, պատմություն)։

Տոկոսադրույքի արժույթը 'սովորաբար = 112 հաշիվ; Եթե մեկ այլ է, ցույց տվեք կրկնակի բլոկը. <>։

Ամրագրումը, որ հաղթողները փոխարկվում են փոխարժեքով հաշվարկման պահին, և ոչ թե դրույքաչափը, պետք է տեսանելի լինի կտրոնի/պատմության մանրամասներում։

Դեպոզիտ/եզրակացություն 'դասընթացը և PFC/բանկը առանձին տող են։ ETA մեթոդով։

Պատասխանային խաղի սահմանները 'որոշվում են հաշիվի խմբագրության մեջ։ Եթե UI-ը մյուս տարբերակում, ցույց տվեք երկու արժեքները։

Մրցույթներ և մրցանակներ. Մրցանակային ֆոնդի արժույթը ամրագրված է. ցուցադրման ժամանակ համարժեքն ուղղանկյուն է, նշումով։

10) Անտիպատերնի

«Կախարդական» փոփոխությունը, երբ փոխում է արժույթը, առանց ակնհայտ համաձայնության։

Մեկ խորհրդանիշի օգտագործումը «դոլար» առանց երկրի կոդի։

Թաքնված հանձնաժողովը տեղյակ է (ոչ մի տող սպրեդի մասին)։

Լոկալի և արժույթի խառնուրդը (միացնում եք «en-US» -ի համար 'UAH')։

«2 նշանի» կոշտ ճշգրտությունը JPY/KRW-ի համար կամ «8 նշաններ» բոլորի համար։

«Հետևի թիվը» պատմական գործարքների վերահաշվարկումը ներկա փոխարժեքով 'առանց «վերահաշվարկի»։

11) Դիզայնի համակարգը (օրինակ)

json
{
"currency": {
"default": "UAH",
"displayList": ["UAH","USD","EUR","TRY","PLN","BRL","MXN"],
"fractions": { "JPY":0, "KRW":0, "KWD":3, "BTC":8 },
"showCodeWithSymbol": ["USD","CAD","AUD","NZD"],
"approxPrefix": "≈ "
},
"format": {
"tabularNums": true,
"grouping": "locale",
"negative": "−"
},
"fx": {
"ttlSec": 300,
"changeThresholdPct": 0.1,
"showSpread": true
}
}

12) Սնիպետներ

Արժույթի անջատիչը (React, ենթատեքստը + Intl)

tsx import { createContext, useContext, useState, useMemo } from 'react';

type Cur = 'UAH'    'USD'    'EUR'    'TRY';
const CurrencyCtx = createContext<{cur:Cur,set:(c:Cur)=>void, rate:(from:Cur,to:Cur)=>number}>({cur:'UAH',set:()=>{},rate:()=>1});

export function CurrencyProvider({children}:{children:React.ReactNode}){
const [cur, set] = useState<Cur>('UAH');
// fx: получить из кэша/апи; здесь — заглушка const table = { UAH:{USD:0.027,EUR:0.025,TRY:0.89,UAH:1}, USD:{UAH:36.6,EUR:0.93,TRY:33.0,USD:1}, EUR:{UAH:39.2,USD:1.07,TRY:35.4,EUR:1}, TRY:{UAH:1.12,USD:0.030,EUR:0.028,TRY:1} };
const rate = (from:Cur,to:Cur)=> table[from][to];
const value = useMemo(()=>({cur, set, rate}),[cur]);
return <CurrencyCtx.Provider value={value}>{children}</CurrencyCtx.Provider>;
}

export function useCurrency(){ return useContext(CurrencyCtx); }

export function Money({minor, iso}:{minor:number, iso:Cur}){
const { cur, rate } = useCurrency();
const fraction = { JPY:0, KRW:0, KWD:3 }[cur as any]?? 2;
const v = (minor/10fraction) rate(iso, cur);
return <span style={{fontVariantNumeric:'tabular-nums'}}>{new Intl.NumberFormat(undefined,{style:'currency',currency:cur, minimumFractionDigits:fraction, maximumFractionDigits:fraction}).format(v)}</span>;
}

Կրկնակի քարտեզագրում (վիրահատական հակադարձում)

html
<div class="amount">
<label>Сумма депозита</label>
<div class="row">
<input type="number" inputmode="decimal" aria-describedby="fxnote">
<select aria-label="Валюта операции">
<option>USD</option><option>EUR</option><option>UAH</option>
</select>
</div>
<small id="fxnote">≈ 2 000,00 ₴ · Курс будет зафиксирован на следующем шаге</small>
</div>

13) Մետրիկի

FX latency: ժամանակը ռուսական արժույթից մինչև բոլոր դաշտերը թարմացնելը (նպատակը 150 մզ էր)։

Eurectness rate-ը '«սխալ գումարներով» դիմումների մասնաբաժինը (<71%)։

Proplay vs account mismatch: իրադարձություններ, որտեղ օգտագործողը շփոթում է արժույթը (նվազեցնում)։

CTR-ի առաջարկները 'տեսահոլովակներ «Ավելի մանրամասն բանտի/2019»։

Աբանդոնը փոխկապակցված է 'ձախողումների մի մասը, որը կապված է գումարի «հանկարծակի» փոփոխության հետ։

14) QA-chek-թերթ

Իմաստ և թափանցիկություն

• Ամենուր տեսանելի է հաշիվը և/կամ վիրահատությունը։
• Դոլարի համար ցուցադրվում է երկրի կոդը (ԱՄՆ դոլար, CA դոլար և այլն)։
• Դասընթացի մասին տող կա, նորարարության ամսաթիվը և սպրեդը/2019։

Ձևաչափը և ճշգրտությունը

• Տասանորդ օրինագծերը կոդով (JPY = 0, KWD = 3, crypto = մինչև 8)։
• Թվերի/արժույթի Յարոսլավլը համապատասխանում է UI լեզվին։
• Պատմական վիրահատությունները չեն հաշվարկվել «ներկա փոխարժեքով» առանց նշելու։

Վարք

• Արժույթի փոխումը չի փոխում շահագործումը առանց հաստատման։
• «112» համարժեքը նորարարվում է սահուն և արագ։
• Ստեղնաշարային արժեթղթերի ընտրողը հասանելի է, աշխատում է Type-ahead-ը։

Igaming հատկություն

• Կուպոնում 'դուրս գրելը/շահելը և նրանց արժույթը ստորագրվել են, ամրագրման դասընթացը նշված է։
• Տոմսարկղում: www.PBS/բանկը տեսանելի է առանձին։
• Լիմիտներում, երկու մեծությունները ցույց են տալիս (հաշիվ և ցուցադրված)։

RTL/A11y

• /Գումարները ճիշտ են կարդում RTL-ում ("dir =" ltr "թվերի համար)։
• Հակադրություն և ֆոկուս ցուցիչներ համապատասխանում են AA-ին։

15) Մոսկվա դիզայնի համակարգում

Բաղադրիչները ՝ «CurrencySwitch», «Money», «FxNote», «Dance Amount»։

Ճշգրտության/կլորացման քաղաքականությունը և մեկ վերացման գործառույթը։

Կանոնները ՝ «Երբ play-only», «երբ hard-convice», «ինչպես ցույց տալ սպրեդը»։

Արժեթղթերի տեղեկատու ՝ կոդ, խորհրդանիշ, օրինագծեր, խորհրդանիշների տարածաշրջանային փոխկապակցություններ։

Do/Don 't: «դոլար առանց կոդի», մուտքագրման ինքնաձիգը, թաքնված շարժիչները։

Ռուսական ռեզյումե

Արժույթների փոխակերպումը ոչ միայն «108/108/դոլար» ընտրողն է։ Սա փողի պարզ մոդել է (հաշիվային արժույթ vs քարտեզագրում vs վիրահատություն), ազնիվ դասընթացը հանձնաժողովի հետ, լոկալի ճիշտ կարգավորումը և մուտքային դաշտերի պահվածքը։ Տեղադրեք կանոնները դիզայնի համակարգում, ավտոմատիզացրեք դասընթացները, և օգտագործողները վստահորեն կաշխատեն գումարներով, առանց կասկածելու թվերի վրա և առանց կորցնելու գումարը «անտեսանելի» սպրադների վրա։