Аватарҳо, статусҳо ва ҳузур
1) Нақши аватар ва мақом дар UX
Аватар лангари визуалии шахсият аст ва мақом контексти фаъолияти он мебошад. Якҷоя онҳо:- таъмин намудани шинохтан (дар рӯйхатҳо, чатҳо, ҷадвалҳо);
- пешниҳоди фикру мулоҳизаҳои фаврӣ (онлайн/офлайн);
- ҳисси зиндагии интерфейсро эҷод кунед (хусусан дар бозиҳои воқеӣ, PVP, чатҳо);
- афзоиши эътимод ва ҳамкорӣ дар муносибатҳои байни бозингарон.
2) Типология
3) Андоза ва шакл
32 px - андозаи ҳадди аққал (рӯйхатҳо, ҷадвалҳо, чатҳо).
40-48 px - профилҳо, кортҳо, панели навигатсионӣ.
64-96 px - блокҳои профили калон, утоқҳои ҷараён.
Шакл: мудаввар - стандартӣ, мураббаъ - барои брендҳо/операторҳо.
Радиус: '50%' барои давра ё '8-12 px' барои майдони мулоим.
4) Боркунӣ ва ақибмонӣ
Форматҳои дастгиришаванда: JPEG, PNG, WebP, SVG (то 2-3 МБ).
Захира ва оптимизатсия дар сервер (масалан, 128, 256, 512 px).
Дар набудани - аватари аввалия: ҳарфҳои аввали ном, замина аз палитра.
Хатои пурборкунии → ҷойгиркунии қалбакӣ бо нишонаи корванд.
html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">
5) Палитрҳои рангӣ ва замина
Тавлиди худкори замина бо номи ҳаш: ранги устувор, вале беназир.
Муқоиса ≥ АА байни пасзамина ва ибтидоӣ.
Барои мавзӯи торик - хира 15-20%.
Аз омезишҳои тасодуфии "заҳролуд" канорагирӣ кунед; палитрро то 6-10 оҳанг маҳдуд мекунад.
6) Нишондиҳии ҳузур
6. 1 Ҳолати асосӣ
6. 2 Ҳузури сатҳи фаъолият
Ғайр аз он, шумо метавонед амалҳоро нишон диҳед:- "Бозӣ мекунад"
- "Бет мекунад"
- "Дар мусобиқа"
- "Дар бораи нафас"
6. 3 Татбиқи техникӣ
Ирсоли 'зарбаи дил' дар ҳар 30 сония тавассути Web-Socket.
Агар сигнал вуҷуд надошта бошад> 60 сония → 'офлайн'.
Вақте ки фаъол аст (ҳаракат кунед, клик кунед, Бет), ҳолати 'online' → нав карда мешавад.
Дар анбор: TTL 120 сония (Redis/Realtime API).
7) Намунаҳои намоиш
7. 1 Дар рӯйхати корбарон
Ҳолати Аватар + бо нуқта дар кунҷи рости поён (8-10 px).
Асбоб: "Онлайн "/" Вуруди охирин 5 дақиқа пеш ".
7. 2 Дар сӯҳбат
Аватар + лақаби + ҳузури хурд ('онлайн/офлайн').
Паёми охирин ва вақт.
Ҳамоҳангсозӣ тавассути чорабинии socket 'корбар _ ҳузур'.
7. 3 Дар тахтаи пешсаф
Аватар + ном + сатҳ/дараҷа.
Hover → mini-profile (фаъолияти охирин, кишвар, ғалабаҳо).
7. 4 Дар корти плеер (PVP/Live)
Аватари калон (64-80 px).
Вазъи зинда: "Дар бозӣ", "Дар таваққуф", "Интизории рақиб".
Ранги зарба = ҳолат ('сарҳад-ранг' var).
8) Дастрасӣ (A11y)
ном ва мақоми "Alex Player Avatar - Online".
Барои статусҳо - такрори матн, на танҳо ранг.
'aria-live = "хушмуомила"' ҳангоми тағир ёфтани вазъ.
Муқоиса ≥ АА барои вазъ дар замина.
Чароғҳои флешдорро истифода набаред.
9) Ҳолати зеркашӣ ва хатогиҳо
Боркунӣ: доираи хокистарӣ/скелети бе чаҳорчӯба.
Хато: нишонаи афтиш + "Avatar бор карда намешавад" дархост.
Холӣ: ҷойгузини ибтидоӣ ё системавӣ.
10) Махфият
Корбар бояд ҳузури (фурӯзон/хомӯш) -ро назорат кунад.
Танзимотҳо: "Вазъи онлайнро нишон диҳед "/" Фаъолияти охиринро нишон диҳед ".
Ҳузур барои ҳисобҳои меҳмонон пинҳон аст.
Дар PVP - шумо метавонед танҳо "дастрас/банд" -ро бидуни вақти дақиқ нишон диҳед.
11) Татбиқи ҳузури API
json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}
Хидматрасон:
- Обуна ба канали '/performance/{ user 'Id}'.
- Пинг/понг даврӣ тавассути васлаки.
- Навсозии ҳолати худкор тавассути TTL.
js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});
12) Хусусиятҳои IGaming
Бозиҳои зинда: мақоми "Дар ҳуҷраи № 12", "Интизории дилер", "Тақсимот идома дорад".
Мусобиқаҳо: Нишони ширкаткунанда, вақтсанҷи ниҳоӣ.
Кооперативи PVP: Рақиби ёфтшуда/Фаъолияти ғайрифаъол.
Каналҳои иҷтимоӣ: аватар бо мусобиқаи мини-нишона ё сатҳи VIP.
Гаравҳо ба таври онлайн машғуланд.
13) Нишондиҳандаҳо ва иҷроиш
Таъхири ҳузур: ≤ 1 сония аз ҳодиса то навсозии UI.
Сатҳи муваффақияти қалб: ≥ 99%.
Сарбории CPU ба муштарӣ: ≤ 5% дар 1000 навсозӣ/дақиқа.
Дақиқии TTL: корбарон пас аз раҳоӣ онлайн "овезон" намекунанд.
Санҷишҳои ихроҷи хотира: тоза кардани шунавандагони имзошуда.
14) Антипаттернҳо
Аватар бе 'alt' ё бе замина - "сӯрохи" дар UI.
Танҳо ранг барои ҳолат (матн/абзор нест).
Нуқтаҳои дурахшон/ҳалқаҳои пульс - озори.
Маҳдудияти навсозиҳо → изофаи изофаи Web-Socket нест.
Намоиши "охирин дида" ба сонияи наздиктарин (вайронкунии дахолатнопазирӣ).
Форматҳои гуногун/таносуби аватарҳо дар як шабака.
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
УИ
- Андозаҳо ва радиаҳо мувофиқанд; маркази аватар.
- Муқоиса ≥ АА; ягон ҳолати ранги тоза вуҷуд надорад.
- Folback аввал дидан ва хондан.
- Ҳолати абзор ё матн мавҷуд аст.
Ҳузур доштан
- Вазъ пас аз ҳодиса ≤ 1 сония нав карда мешавад.
- Ҳангоми пайвастшавӣ онлайн дуруст аст.
- Хӯшае нест (такрори ҳодиса).
- Бекорӣ (бекорӣ> 5 дақ) ҳисобида мешавад.
Махфият
- Танзимоти ҳузур кор мекунад.
- Бори охир ба дақиқаҳо/соатҳо мудаввар карда шуд.
- Ифшои изофаи фаъолият вуҷуд надорад (масалан, гаравҳо).
Иҷро
- Зарбаи дил мӯътадил аст, Web-Socket ба таври худкор бо бозгашт пайваст мешавад.
- Ҳеҷ гуна хотира бо 1000 навсозӣ намерасад.
- TTFF ≤ 100 мс ҳангоми намоиш.
17) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ
Компоненты: 'Аватар', 'Performance
Намунаҳо: "Аватар бо таназзул", "Нуқтаи вазъ", "Ҳузури вақти воқеӣ", "Ҳолати хусусӣ".
Токенҳо: андоза, рангҳо, радиӣ, навсозиҳои TTL, контраст.
Иҷро накунед/накунед: ранг бе матн (накунед), шакли мудаввар ва мураббаъ дар як рӯйхат (накунед), андозаҳои устувор ва зарбаҳо (иҷро кунед).
Хулосаи мухтасар
Аватарҳо ва статусҳо на танҳо унсурҳои ороишӣ, балки забони муошират байни корбарон ва система мебошанд. Рангҳои пайваста, сарлавҳаҳои қобили хондан, ҳамоҳангсозии дуруст ва эҳтиром ба дахолатнопазирӣ ҳисси фазои "зиндагӣ" -ро эҷод мекунанд, алахусус дар IGaming: дар арена, мусобиқа, сӯҳбати зинда ё ҳангоми гарав бо дӯстон. Ҳузур интерфейсро динамикӣ ва инсонӣ месозад - аммо танҳо бо тавозуни мундариҷа ва хомӯшӣ.