Ինչպես է իրականացվում ինտերֆեյսը և UX բջջային սարքերում
1) Սկզբունքներ. Ինչպե՞ ս է բջջային UX-ը տարբերվում դիսկոտոպից
Մեկ ձեռքով կառավարումը։ Հիմնական CTA (տոկոսադրույքը, խոհարարը, մաքրելը) - «մեծ մատի գոտում» (էկրանի ներքևի երրորդը)։
Ուղղահայաց առաջինը։ Ուղղահայաց սեղանները/հոսքերը հիմնական սցենարն են։ հորիզոնական աջակցվում է որպես «կինո ռեժիմ»։
Ավելի քիչ կլինիկաներ ավելի իմաստալից են։ Յուրաքանչյուր դրույքաչափը պետք է զբաղվի 242 գործողությամբ 'դաշտային/բջիջի արժեքները ընտրելը։
Արագությունը ավելի կարևոր է, քան գեղեցկությունը։ 60 fps UI-ում, նվազագույն layout shift, «թեթև» անիմացիա։
Թափանցելիությունը։ Թայմերը, կապի կարգավիճակը, ուշացումը հստակ և ատելի են։
2) Էկրանի շրջանակը 'ինչ տեղավորել
Վերին գոտին (տեղեկատվական)
Սեղանի անունը, լիմիթները, խաղացողների հաշվարկը, ցանցի/ձգձգման ցուցիչը, կանոնների/կանոնների պատկերակները։
Միջին գոտին (բովանդակություն)
Տեսահոլովակը (Windows RTC/LL-HMS) կամ 3D սեղան, տեսախցիկների/անկյունների փոխանցումը ժեստով։
Ներդրումներ ՝ Թայմեր, վերջին փուլերի արդյունքները, որոնք ցույց են տալիս, թե ինչ են ապացուցում։
Ներքևի գոտի (կառավարում)
Կոդավորման վահանակ 'անվանումներ, արագ կոճակներ «Կրկնել», «Կրկնապատկել», «Մաքրել»։- Թաքնված դրամապանակի փոթորիկը (հավասարակշռություն, արագ դեպոզիտ - փոխանցումը դրամարկղին)։
- Սեղանների/խաղերի անջատիչը (հորիզոնական սքրոլ)։
Դելդը կասեցման գոտիներով
Առնվազն www.dp (Android )/44pt (iOS) ինտերակտիվ վրա, որը տեղադրված է 658dp կոճակների միջև։
Հաշվի առեք safe areas (notch, ժեստերի ռոտացիա)։
3) Արագ տոկոսադրույքները 'միկրովիզիմոդենիա
Երկու օրինակ ՝ սեղանի վրա գտնվող հատակի վրա գտնվող tap անվանման ընտրությունը։ Երկրորդ տապը մեծացնում է նույն անվանական արժեքը։
Երկար սեղմում (long press) 'կոնտեքստային ընտրացանկ (հեռացնել, կրկնապատկել, տարածել)։- Սվայփը դեմքի վահանակից ներքև 'ցույց տալ ընդլայնված արժեքները/պատմությունը։
- Հապտիկան 'մի թեթև թրթռում, երբ վերցնում եք տոկոսադրույքը, ավելի արտահայտված է' հրաժարվելով/ուշ տոկոսադրույքով։
- Կարգավիճակի տեսանելիությունը '«Մենք ընդունում ենք տոկոսադրույքները «/« Փակված »'գույնը/իկոնկան + վայրկյանը։
4) Տեսահոլովակն ու հավատալիքները 'չխանգարել, այլ օգնել։
Հիմնական շրջանակը խնդրանքով։ Որակը փոխելիս ակնթարթ IDR-ն է, որպեսզի խուսափի «օճառից»։- Կիսաթափանցիկ քարտեր։ Թայմերը և արդյունքները 70-85 տոկոսն են թափանցիկության, ավտոմատ բացումը թայմերի վրա։
- Ժեստերը
- Pinch-ը տեսահոլովակի մասշտաբն է (առանց CTA-ի արգելափակման)։
- «Ներկային» ծանուցումներ։ Հաղթողի և պրոմոյի տողերը 'վերևում, չեն արգելափակում վահանակը։
5) Ցանցի վիճակը և հետաձգումը
Կարգավիճակը '«Առցանց 1.3 c »/« Վատ ցանցը 4,8 c»։ Իկոնիկի գույնը փոխվում է շեմերով։
Փափուկ քայքայումը 'նախ նվազեցնում ենք FPS-ը (60-48-30), ապա թույլատրությունը (1080p 38720p 38540p), ավելացնում ենք բուֆերը + 200-300 մզ։
Auto-folbek: Windows RTC 24LL-HMS հանդիսատեսի համար անկայուն ցանցում։ արգելափակումը «ուշ» տերմինալ։
Օֆլայն էկրանը 'տոկոսադրույքի կոնտեքստի պահպանումը, պարզ պատճառը («Ոչ մի միացում») և «Կրկնել» կոճակը։
6) Պատասխանատու խաղը և վերահսկողությունը
Լիմիտները ձեռքի տակ։ «Limita» կոճակը հավասարակշռության մոտ 'դեպոզիտ/ժամանակ/կորուստ, նստաշրջանի թայմեր։
Դադար-րոպե։ Խաղի 30-45 րոպեների ընթացքում չարտոնված դադարը փափուկ դրոշն է, առանց «կարմիր դրոշների»։
Ուշ տոկոսադրույքի բլոկը։ Եթե e2e-հետաձգումը> շեմը չի ընդունվում, UI-ն բացատրում է պատճառը։
Պատմությունը և էքսպորտը։ Վերջին փուլերի ժապավենը/2019, ֆիլտրերը, չեկների արագ արտահանումը։
7) Տեքստը, գույները, անիմացիան
Տպագրություն '17-20pt վերնագրեր, մարմինը 14-16pt; WCAG AA + հակադրություն։
Գունավոր սխեմա '«ազդանշանային» գույները լուծարվում են կարգավիճակի տակ (սովորաբար/փակված/սխալ)։- Անիմացիաներ ՝ 120-180 մզ միկրովրովիզամոդիայի համար; 240-320 մգ 'ռուսական/վարորդի համար։ Պոկադրովոն ոչ ավելի, քան 2-3 զուգահեռ էֆեկտներ է։
- Սկելետոնները սպիններների փոխարեն։ Արագ առաջադիմական սարքեր։
8) Ռոտացիան և տեղեկատվական ճարտարապետությունը
Ներքևի ռոտացիան (tab bar) 'Լոբբի, Մոսկվա, Ակցիա, Պրոֆիլ։- Բելգիայի ներսում 'ֆիլտրերով սեղանների ցուցակները (լեզուն, լիմիտները, խաղի տեսակը, սիրելի դիլերները)։
- Խորը հղումները ՝ 108/բոտ, ուղիղ աղյուսակը սեղանին/մրցույթը։ UTM պահպանումը վերլուծության համար։
- Back stack: Android-ի և swaip iOS-ի ժեստը հանկարծակի չի փակում, սկզբում նախազգուշացում է։
9) Տեղայնացումը և հատուկ լեզուները
RTL (արաբերեն/եբրայերեն)։ Ցանցերի սիմետրիկ արտացոլումը կոդավորման և կոդավորման մեջ։- Թվային ֆորումները/արժույթները։ Հազարավոր բաժանողներ, կարճ ստորագրություններ (1,000 41k, երբ տեղ չկա)։
- Լեզվական սեղաններ։ Դրոշների/լեզուների քարտեզագրումը, դիլերի լեզվի ֆիլտրերը, տեղական միավորները (108, R դոլար, 108)։
- Տողերի երկարությունը։ Դետեկտորները կարող են կտրել բազմությունը, տուլտիպերը 'long press-ով։
10) Սարքի արտադրողականությունն ու ռեսուրսը
Մարտկոցը 'մենք սահմանափակում ենք 60-30 fps ցածր լիցքով, նախազգուշացնում ենք բարձր ծախսերի մասին։
Հիշողությունը 'մենք բեռնաթափում ենք ABR-ի չօգտագործված պրոֆիլները, չենք պահպանում ավելի քան 2-3 տեքստեր բարձր թույլատրությամբ։
Donald Tramp/զննարկիչ 'մենք արգելափակում ենք ծանր ստվերները և CSS ֆիլտրերը։ օգտագործում ենք GPU կոմպոզիտոր լողի համար։
Պատկերների օպտիմիզացումը 'Pro P/AVIF, սպրեյտներ և lazy-load։
11) Վճարովի և դրամապանակային փամփուշտներ
Մինի-դրամապանակ 'հավասարակշռություն և արագ դեպոզիտ (ոսպնյակ 3DS/KYC-ից միայն Web-ում)։
Անվտանգության հոսքերը 'կարճ TTL, pere-լոգինը առանց ներկայիս տոկոսադրույքի կորստի։- Միջոցների աղբյուրի տեսանելիությունը 'CASH/BONUS տոկոսադրույքի պահին։
12) Հասանելիությունը (A11y) և համատեղելիությունը
VoicOver/TalkBack: ստորագրություններ տարրերի համար, ֆոկուս-կարգի, ստատուսների գովազդի համար։
Բարձր հակադրություն/մեծ տառատեսակ 'layout հարմարեցում առանց ցանցի խզման։- Ժեստերը միակ միջոցն են։ Կրկնօրինակենք կոճակների ֆունկցիոնալությունը։
- Թեստային մատրիցա ՝ iOS (իրական + n-1), Android (SDK մակարդակներ, հայտնի միացություններ), թույլ սարքեր, անկայուն ցանցեր։
13) Միկրոկոպիրեյթինգ 'ինչ և ինչպես ասել
Պարզ և կարճ։ «Տոկոսադրույքները ընդունվել են», «Տոկոսադրույքները փակված են», «Բավարար միջոցներ», «Վատ ցանցը»։
Համատեքստը։ Տոկոսադրույքը արգելափակելիս «Հոսքի հետաձգումը գերազանցում է շեմը»։- Ապացույցը։ Մենք մաքրում ենք «Դուք համոզված եք»։ որտեղ դուք կարող եք նետել «Ետ/չեղյալ հայտարարելու» միջոցով։
14) Վերլուծաբան և RUM: Չափում ենք բարելավման համար
RUM-MSK: e2e-ուշացում, startup, buffers, որակի բարձրացում, ռոտորի սխալներ։
WebRTC-stats: RTT, loss, jitter, NACK/PLI, доля TURN-relay.
Ապրանքային իրադարձությունները 'տոկոսադրույքը/կրկնապատկումը/մաքրումը, մերժումը/ուշ դրույքաչափը, սեղանների և դիլերների վրա պահելը։
Մուտքի ֆանելը 'հեռագիր, լոբբի, առաջին դրույքաչափը/կրկնապատկումը։
15) բջջային UI-ի անտի սխալները
Փոքրիկ հիթեր։ Լուծումը 'www.dp/44pt նվազագույն, ավելացված նահանջներ։
Սև էկրանները որակը փոխելիս։ Լուծումը 'keyframe-on-demand և հաջորդ տերմինալի ավելացումը։- Պատահական կույտեր «ետ»։ Որոշումն այն է, որ նախքան մուտքագրելը + բովանդակության ներսում ժեստերը չեն հակասում համակարգային։
- Ստեղնաշարի փակումը։ Լուծումը 'numeric keypad գումարների համար, ավտոմատ բացումը մուտքագրումից հետո, խելացի սկրոլը։
16) Չեկի թուղթ
UI և կառավարում
- CTA մեծ մատի գոտում; 2 ռուբլի մինչև տոկոսադրույքը
- Հապտիկան և հասկանալի արձանները (սովորական/փակ/սխալ)
- Ուղղահայաց/հորիզոնական ռեժիմներ առանց արտեֆակտների
Տեսահոլովակը և ցանցը
- SVC/սիմուլյատոր, LL-HMS ֆոլբեկ
- Ձգձգման/ցանցի ցուցիչը, փափուկ քայքայումը
- Առանց «սև» էկրանների, երբ փոխվում են
Պատասխանատու խաղ
- Limits/դադար/պատմություն 1-2 tap հեռավորության վրա
- «Ուշ» բլոկը, երբ ավելանում է e2e-stream
Տեղայնացումը և A1y
- RTL, մեծ տառատեսակներ, հակադրություն
- Ամբողջական alt/labels սքրինդրիդների համար
Արտադրողականությունը
- 60 fps UI, <100 TTI-ի հիմնական էկրանների համար
- Էներգախնայող ռեժիմ, հիշողության վերահսկողություն
Դիտարկումը
- Ներկառուցված RUM և Windows RTC-stats, SLO ալտերտներ։
- Ապրանքային իրադարձություններ և ձագեր
17) Արդյունքը
Բջջային UX-ի խաղերը տրիադի արագությունն են։ Ուղղահայաց սեղանները, մի ձեռքի կառավարումը, արագ դրույքաչափերը, հապտիկան և հասկանալի արձանները ստեղծում են ափի «կենդանի սենյակի» զգացում։ Տեխնոլոգիական կարգապահությունը փափուկ դեգրադացիա է, ֆոլբեքը LL-HMS-ի վրա, ցանցի բաղադրիչները, RUM-վերլուծությունը և A1y-ը, վերածում է գեղեցիկ ինտերֆեյսը վստահելի ապրանքի, որը հավասարապես լավ աշխատում է դրոշների և տեխնոլոգիական սարքերի վրա, մետրոյում և տանը, iOS-ում և Android-ում։