Ավատարները, կարգավիճակները և presence

1) Avatar-ի դերը և կարգավիճակը UX-ում

Ավաթարը անհատականության տեսողական խարիսխ է, իսկ կարգավիճակը նրա գործունեության համատեքստն է։ Միասին նրանք

ապահովում են ճանաչելիություն (ցուցակներում, չատներում, գյուղերում);

ակնթարթային արձագանք են տալիս ներկայության մասին (on.ru/24.ru);

ստեղծում են ինտերֆեյսի զգացում (հատկապես real-time խաղերում, PvP, chats);

մեծացնում են վստահությունն ու ներգրավվածությունը խաղացողների միջև փոխազդեցության մեջ։

2) Tiopology

Տարր	Նշանակումը	Ցուցադրման օրինակ
Ավաթար	Օգտագործողի տեսողական համակարգը	Կլուգլայ կամ քառակուսի մանրանկարչություն 32-64 px
Presence	Կապի ներկա կարգավիճակը	Կանաչ/մոխրագույն կետը, «ցանցում», «Euronen»
Activity	Ներկա գործողություն	«Խաղում է Book of Ra», «Մրցույթի մեջ», «Տեղադրում»
Custom status	Օգտագործողի ստորագրություն	«Մի անհանգստացեք», «Ընդմիջման ժամանակ»

3) Չափերն ու ձևը

32 px նվազագույն չափն է (ցուցակները, աղյուսակները, չատները)։

40-48 px - ավելցուկ, քարտեր, նավիգացիայի վահանակ։

64-96 px - մեծ բլոկներ, հոսող սենյակներ։

Ձևը 'կլորացված' 108, քառակուսի 'բրենդերի/օպերատորների համար։

Շառավիղը '«50 տոկոսը» շրջանակի համար կամ «8-12 px» փափուկ քառակուսի համար։

4) Բեռնումը և fallback-ը

Աջակցված կոմպոզիցիաները ՝ JPEG, PNG, Pro P, SVG (մինչև 2-3 MB)։

Resize-ը և օպտիմիզացումը սերվերի վրա (օրինակ ՝ 108, 256, 512 px)։

Բացակայության դեպքում, նա նախաձեռնեց ավատարը 'առաջին անունը, ֆոն պալիտրա։

Placeholder շարժիչի բեռնման սխալը օգտագործողի իկոնով։

html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">

5) Գունավոր պալիտրա և ֆոն

Ֆոնի ինքնարտադրությունը անունով 'կայուն, բայց յուրահատուկ գույն։

Հակադրություն է AA-ը ֆոնի և նախաձեռնությունների միջև։

Մութ թեմայի համար 15-20 տոկոսն է։

Խուսափեք պատահական «թունավոր» համադրություններից։ սահմանափակեք պալիտրա (6-10 տոննա)։

6) Presence-ինդիկացիա

6. 1 Հիմնական արձաններ

Կարգավիճակը	Գույնը	Տեքստը	Վարք
Online	Կանաչ («# 00C853»)	Ցանցում	AlekSocket
Idle	Դեղին («# FFD600»)	Հերցեն	Ոչ մի գործողություն> 5 րոպե
Busy / DND	Կարմիր («# D32F2F»)	Մի անհանգստացեք	Խաղի մեջ կամ անջատեց ծանուցումները
Offline	Մոխրագույն («# 9E9E9E»)	Ոչ ցանցում	Չկա միացում> 2 րոպե

6. 2 Activity-level presence

Բացի այդ, դուք կարող եք ցույց տալ գործողությունները

«Խաղում է»

«Ապացույց է անում»

«Մրցույթի մեջ»

«Ընդմիջման ժամանակ»

6. 3 Տեխնիկական ստանդարտ

«Heartbeat» ուղարկումը յուրաքանչյուր 30 վայրկյանում Express Socket-ի միջոցով։

Ազդանշանի բացակայության դեպքում> 60 վայրկյան 112 '108 մգ։

Գործունեության ժամանակ (scro.ru, clik, bet) պլանավորվում է թարմացնել «on.ru» կարգավիճակը։

Պահեստում 'TTL 120 վայրկյան (Redis/Realtime API)։

7) Ցուցադրման պատրանքները

7. 1 Օգտագործողների ցուցակներում

Avatar + կարգավիճակը աջ ներքևի անկյունում (8-10 px)։

Tooltip: «Առցանց »/« Վերջին 355 րոպե առաջ»։

7. 2 Զրույցի մեջ

Avatar + nick + mini-presence («on.ru/24.ru»)։

Վերջին հաղորդագրությունը և ժամանակը։

Համաժամացումը socket event 'user _ presence "միջոցով։

7. 3 Առաջնորդների աղյուսակում

Ավաթար + անունը + մակարդակը/ռանգը։

Hover-ը պատրաստված է մինի-պրոֆիլով (վերջին գործունեությունը, երկիրը, հաղթանակը)։

7. 4 Խաղացողի քարտում (PvP/J)

Մեծ ավատարը (64-80 px)։

Կենդանի կարգավիճակը '«Խաղի մեջ», «Դադարի վրա», «Ակնկալում է մրցակցին»։

Շապիկի գույնը = վիճակը ("border-color 'var)։

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

"alt's անունով և կարգավիճակով." Alex խաղացողը ցանցում է "։

Ստատուսների համար տեքստային կրկնօրինակներ են, ոչ միայն գույնը։

«aria-71 =» polite «» կարգավիճակը փոխելիս։

Հակադրություն AA-ը ֆոնի կարգավիճակի համար։

Չօգտագործել միգրացիոն բաղադրիչները։

9) Բեռնման և սխալի վիճակը

Loading: մոխրագույն շրջան/կմախք առանց շրջանակի։

Error: fallback-icon + հուշումը «Avatar չի բեռնված»։

Empty 'նախաձեռնել է կամ համակարգային placeholder։

10) Գաղտնիությունը

Օգտագործողը պետք է վերահսկի presence (on/off) տեսանելիությունը։

Տե՛ ս. «Ցույց տալ առցանց կարգավիճակը »/« Ցույց տալ վերջին գործունեությունը»։

Հյուրերի հաշիվների համար presence-ը թաքնված է։

PvP-ում դուք կարող եք ցույց տալ միայն «հասանելի/զբաղված», առանց ճշգրիտ ժամանակի։

11) Intepresence API

json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}

Սերվերը

Բաժանորդագրություն '։

Պարբերական ping/pong socket միջոցով։

TTL կարգավիճակի ավտոմատ նորարարությունը։

Հաճախորդը

js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});

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

Նախկին խաղերը '«Սենյակում թիվ 12» կարգավիճակը, «Ակնկալում է դիլերը», «Ռազդաչան գնում է»։

Ռուանդրա 'Բեյջ «Մասնակցում», ավարտի թայմերը։

Կոոպերատիվ PvP-ը '«Մրցակիցը հայտնաբերվեց/Euronen» ակտիվությունը։

Սոցիալական ժապավենները 'avatar mini-badge-ից կամ VIP մակարդակից։

Տոկոսադրույքները ՝ «Տոկոսադրույքի գործընթացում» (busy), «Պատրաստ» (online)։

13) Մետրիկի և պերֆորմանսի

Presence latency: 351 վայրկյան իրադարձությունից մինչև UI նորարարությունը։

Heartbeat success rate: ≥ 99%.

CPU load տեսահոլովակի վրա ՝ 245 տոկոսը 1000 ռուբլիով/105

TTL acuracy: Օգտագործողները չեն «կախում» առցանց ելքից հետո։

Memory leak tes.ru: Գրված լսողների մաքրումը։

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

Ավատարը առանց «alt» կամ առանց ֆոնի 'UI-ում «աղեղ»։

Միայն կարգավիճակի գույնը (առանց տեքստի/tooltip)։

/ իմպուլսային օղակները նյարդայնացնում են։

Live Socket ծանրաբեռնվածությունը։

«Lenseen» -ի քարտեզագրումը մինչև վայրկյան ճշգրտությամբ (գաղտնիության խախտում)։

Տարբեր պարամետրեր/ավատարների համամասնություններ մեկ ցանցում։

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

json
{
"avatar": {
"sizes": { "xs": 24, "sm": 32, "md": 40, "lg": 64 },
"radius": { "circle": "50%", "square": 8 },
"border": { "width": 2, "color": "var(--bg-elevated)" }
},
"presence": {
"dotSize": 10,
"gap": 2,
"colors": {
"online": "#00C853",
"idle": "#FFD600",
"busy": "#D32F2F",
"offline": "#9E9E9E"
}
},
"motion": {
"updateMs": 150,
"fadeMs": 120
},
"a11y": {
"contrastAA": true,
"textLabel": true
}
}

16) QA-chek-թերթ

UI

Չափերն ու ճառագայթները պահպանողական են. Avatar կենտրոնացված է։
Հակադրություն AA; գունավոր արձաններ չկան։
Ֆոլբեքը սկսեց տեսնել և կարդալ։
Tooltip-ը կամ տեքստային կարգավիճակը ներկա են։

Presence

Կարգավիճակը նորարարվում է իրադարձությունից հետո 241 վայրկյան։
Expresssancevich Online ճիշտ է ռեկոնեկտում։
Ոչ մի աճ չի տեղի ունենում (իրադարձությունների կրկնապատկումը)։
Հաշվի է առնվում անգործությունը (idle> 5 րոպե)։

Գաղտնիությունը

Presence-ի տեսանելիությունը գործում է։
Loftseen կլորացվում է մինչև րոպե/ժամ։
Գործունեության ավելցուկ բացահայտում չկա (օրինակ ՝ ռուսական)։

Պերֆորանսը

Heartbeat Socket 71-reconnations backoff.
Առանց հիշողության արտահոսքի 1000 ռուբլիով։
TTFF 35100 մզ ցուցադրման ժամանակ։

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

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.

Պատրանքները ՝ «Avatar fallback», «Կետերի կարգավիճակը», «Real-Time նորարարություն», «Մասնավոր ռեժիմը»։

Տոկենները ՝ չափսեր, գույներ, ռադարներ, TTL նորարարություններ, հակադրություն։

Do/Don 't: գույնը առանց տեքստի (don' t), կլոր և քառակուսի ձևերը մեկ ցուցակում (don 't), կայուն չափսերը և ծածկոցները (do)։

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

Ավատարներն ու արձանները ոչ միայն դեկորատիվ տարրեր են, այլ օգտագործողների և համակարգի միջև հաղորդակցման լեզուն։ Հաջորդական գույները, որոնք կարդում են ստորագրությունները, ճիշտ համաժամացումը և հարգանքը մասնագիտության նկատմամբ ձևավորում են «կենդանի» տարածության զգացում, հատկապես կարևոր iGaming-ում 'ասպարեզում, մրցույթներում, 2019-ին կամ ընկերների հետ տոկոսադրույքով։ Presence-ը ինտերֆեյսը դարձնում է դինամիկ և մարդկային, բայց միայն տեղեկատվական և լռության հաշվեկշռում։