Როგორ ხორციელდება ინტერფეისი და UX მობილური მოწყობილობებით
1) პრინციპები: როგორ განსხვავდება მობილური UX დესკტოპისგან
ერთჯერადი კონტროლი. ძირითადი CTA (კურსი, გამეორება, გაწმენდა) არის „თითის ზონაში“ (ეკრანის ქვედა მესამედი).
ვერტიკალური პირველი. ვერტიკალური მაგიდები/ნაკადები - ძირითადი სცენარი; ჰორიზონტალს მხარს უჭერს როგორც „კინოს რეჟიმი“.
ნაკლები დაწკაპუნება - მეტი აზრი. ნებისმიერი კურსი უნდა იკავებდეს 2 მოქმედებას: tap- ის მნიშვნელობის არჩევა ველში/უჯრედში.
სიჩქარე უფრო მნიშვნელოვანია, ვიდრე სილამაზე. 60 fps UI- ში, მინიმალური layout shift, „მსუბუქი“ ანიმაციები.
გამჭვირვალეობა. რაუნდის ტაიმერი, კავშირის სტატუსი, შეფერხება - აშკარად და დაუფიქრებლად.
2) ეკრანის ჩარჩო: რა უნდა მოაწყოთ
ზედა ზონა (ინფორმაციული):- მაგიდის სახელი, ლიმიტები, მოთამაშეთა მრიცხველი, ქსელის/შეფერხების ინდიკატორი, წესების/პარამეტრების ხატები.
- ვიდეო ნაკადი (WebRTC/LL-HLS) ან 3D მაგიდა, კამერის/კუთხეების გადართვა ჟესტით.
- დეპოზიტები: ტაიმერი, ბოლო რაუნდის შედეგები, განაკვეთების დადასტურება.
- განაკვეთების პანელი: დენომინაციები, სწრაფი ღილაკები „განმეორება“, „გაორმაგება“, „გაწმენდა“.
- დამალული საფულე (ბალანსი, სწრაფი ანაბარი - გადასვლა სალაროში).
- მაგიდების/თამაშების შეცვლა (ჰორიზონტალური გადახრა).
- მინიმუმ 48dp (Android )/44pt (iOS) ინტერაქტიულობაზე, ღილაკებს შორის 8dp.
- გაითვალისწინეთ safe areas (notch, ჟესტების ნავიგაცია).
3) სწრაფი განაკვეთები: მიკროტალღური მოქმედება
ორი ნაბიჯი: სახის მნიშვნელობის არჩევა მაგიდაზე. განმეორებითი წილი - ზრდის ფსონს იმავე სახის ღირებულებაზე.
გრძელი დაჭერით (გრძელი პრესა): კონტექსტური მენიუ (წაშლა, გაორმაგება, განაწილება).
ქვევით დასახელების პანელზე: აჩვენეთ გაფართოებული მნიშვნელობები/განაკვეთების ისტორია.
Haptic: მსუბუქი ვიბრაცია განაკვეთის მიღებისას, უფრო გამოხატული - წარუმატებლობის/გვიან კურსზე.
სტატუსის ხილვადობა: „ჩვენ ვიღებთ განაკვეთებს „/„ დახურვა “- ფერი/ხატი + წამი.
4) ვიდეო და ოვერლეა: იმისათვის, რომ არ ჩაერიოს, არამედ დაეხმაროს
საკვანძო ჩარჩო მოთხოვნით. ხარისხის შეცვლისას - მყისიერი IDR, „საპნის“ თავიდან ასაცილებლად.
გამჭვირვალე ბარათები. ტაიმერი და შედეგები - გამჭვირვალეობის 70-85%, ტაიმერის განაწილება.
ჟესტები:- ორმაგი ვიდეოჩანაწერი - კამერის შეცვლა/კუთხე.
- პინჩი - ვიდეოს მასშტაბები (CTA გადახურვის გარეშე).
- „რეგიონალური“ შეტყობინებები. გამარჯვების ხაზები და პრომო - ზემოთ, არ არის გადაკეტილი დანართის პანელი.
5) ქსელის მდგომარეობა და შეფერხება
სტატუს აბი: „ონლაინ 1.3 c “/„ ცუდი ქსელი 4.8 გ“. ხატის ფერი იცვლება ბარიერების გასწვრივ.
რბილი დეგრადაცია: ჯერ ჩვენ ვამცირებთ FPS- ს (60-48-30), შემდეგ რეზოლუციას (1080p-720p-540p), ვზრდით ბუფერს + 200-300 ms- ით.
Auto Folback: WebRTC და LL-HLS არასტაბილური ქსელის მაყურებლის რეჟიმისთვის; „გვიანი“ განაკვეთების დაბლოკვა.
ოფლაინის ეკრანი: განაკვეთის კონტექსტის შენარჩუნება, გასაგები მიზეზი („არ არის კავშირი“) და ღილაკი „განმეორება“.
6) პასუხისმგებელი თამაში და კონტროლი
ლიმიტები ხელის ქვეშ. ლიმიტის ღილაკი ბალანსის გვერდით: ანაბარი/დრო/ზარალი, სესიის ტაიმერი.
პაუზა წუთი. რეკომენდებული პაუზა თამაშის 30-45 წუთის შემდეგ არის რბილი ბანერი, „წითელი დროშების“ გარეშე.
გვიან განაკვეთის ბლოკი. თუ e2e შეფერხება> ბარიერი - კურსი არ მიიღება, UI განმარტავს მიზეზს.
ისტორია და ექსპორტი. ბოლო რაუნდის/განაკვეთების ფირზე, ფილტრები, ჩეკების სწრაფი ექსპორტი.
7) ტექსტი, ფერები, ანიმაციები
სტამბა: სათაურები 17-20pt, სხეული 14-16pt; კონტრასტის WCAG AA +.
ფერის სქემა: „სიგნალის“ ფერები დაცულია სტატუსებისთვის (მიღებული/დახურული/შეცდომა).
ანიმაციები: 120-180 ms მიკროტალღური ეფექტებისთვის; 240-320 ms - პანელების/ფარდისთვის. ჩარჩო - არაუმეტეს 2-3 პარალელური ეფექტი.
ჩონჩხი სპინერების ნაცვლად. სწრაფი პროგრესული დატვირთვის რჩევები.
8) ნავიგაცია და ინფორმაციის არქიტექტურა
ქვედა ნავიგაცია (tab bar): ლობი, Live, აქციები, პროფილი.
შიგნით Live: ფილტრების მაგიდების სიები (ენა, ლიმიტები, თამაშის ტიპი, საყვარელი დილერები).
ღრმა ბმულები: bot/bot, პირდაპირი შესვლა მაგიდაზე/ტურნირზე; UTM- ის შენარჩუნება ანალიტიკისთვის.
Back-stack: Android და swayp iOS ჟესტი - მოულოდნელად არ დახურავს რაუნდს, ჯერ გაფრთხილებას.
9) ლოკალიზაცია და სპეციალური ენები
RTL (არაბული/ებრაული). ფსონების და პანელების ქსელების სიმეტრიული ასახვა.
რიცხვითი ფორმატები/ვალუტა. ათასობით, მოკლე ხელმოწერების გამყოფი (1000-1k ადგილის ნაკლებობით).
ენის მაგიდები. დროშების/ენების ჩვენება, დილერის ენის ფილტრები, ადგილობრივი ერთეულები (აშშ დოლარი, აშშ დოლარი).
ხაზების სიგრძე. მოჭრილი მანქანის აღწერილობები, ტულტიპები - გრძელი პრესა.
10) მოწყობილობის პროდუქტიულობა და რესურსი
ბატარეა: ჩვენ შემოიფარგლება 60-30 fps დაბალი მუხტით, გავაფრთხილებთ მაღალი ხარჯების შესახებ.
მეხსიერება: ჩვენ გადმოტვირთავთ გამოუყენებელ ABR პროფილებს, არ გვაქვს მაღალი რეზოლუციის 2-3 ტექსტურა.
WebView/ბრაუზერი: გადაკეტეთ მძიმე ჩრდილები და CSS ფილტრები; გამოიყენეთ GPU კომპოზიცია გლუვი.
სურათების ოპტიმიზაცია: WebP/AVIF, sprites და lazy-load.
11) გადახდა და საფულე
მინი საფულე: ბალანსი და სწრაფი ანაბარი (სალარო 3DS/KYC მხოლოდ ვებ - ში).
უსაფრთხოების ნიშნები: მოკლე TTL, პერე ლოგინი მიმდინარე კურსის დაკარგვის გარეშე.
სახსრების წყაროს ხილვადობა: CASH/BONUS განაკვეთის დროს.
12) წვდომა (A11y) და თავსებადობა
VoiceOver/TalkBack: ელემენტების ხელმოწერები, დამატებითი შეკვეთის ფოკუსი, სტატუსის გამოცხადების ვიდეო.
მაღალი კონტრასტი/დიდი შრიფტი: layout- ის ადაპტაცია ქსელის დაზიანების გარეშე.
ჟესტები ერთადერთი გზაა. ჩვენ დუბლირებას ვაძლევთ ფუნქციონირებას ღილაკებით.
ტესტის მატრიცა: iOS (შესაბამისი + n-1), Android (SDK დონე, პოპულარული ჭურვები), სუსტი მოწყობილობები, არასტაბილური ქსელები.
13) მიკროკოპირატინგი: რა და როგორ უნდა ითქვას
ნათელი და მოკლე. „განაკვეთები მიიღება“, „ფსონები დახურულია“, „საკმარისი თანხები“, „ცუდი ქსელი“.
კონტექსტი. განაკვეთის დაბლოკვისას - მინიშნება „ნაკადის შეფერხება აღემატება ბარიერს“.
დადასტურება. ამოიღეთ „დარწმუნებული ხართ?“ სადაც შეგიძლიათ უკან დაბრუნება/გაუქმება.
14) ანალიტიკა და RUM: გაზომეთ გაუმჯობესების მიზნით
RUM-SDK: e2e შეფერხება, startup, buffers, ხარისხის შეცვლა, დეკოდირების შეცდომები.
WebRTC-stats: RTT, loss, jitter, NACK/PLI, доля TURN-relay.
სასურსათო მოვლენები: განაკვეთი/გაორმაგება/გაწმენდა, უარი/გვიან კურსი, მაგიდებზე და დილერებზე შენარჩუნება.
შესვლის გულშემატკივარი: ტელეგრამა, ლობი, მაგიდა, პირველი კურსი, გამეორება/გაორმაგება.
15) მობილური UI- ს ანტი - შეცდომები
პატარა ჰიტები. გამოსავალი: 48dp/44pt მინიმალური, დამატებითი უკან დახევა.
შავი ეკრანები ხარისხის შეცვლისას. გამოსავალი: keyframe-on-demand და შემდეგი პროფილის წინასწარ დატვირთვა.
შემთხვევითი სვიპები „უკან“. გადაწყვეტილება: რაუნდიდან გასვლამდე დადასტურება + შინაარსის შიგნით ჟესტები არ ეწინააღმდეგება სისტემას.
კლავიატურის ჩამოსხმა. გამოსავალი: numeric keypad თანხებისთვის, ავტოკატასტროფა შეყვანის შემდეგ, ჭკვიანური ფრჩხილი.
16) წარმოების ჩეკის სია
UI და მენეჯმენტი
- CTA თითის არეში; 2 ნაბიჯი განაკვეთამდე
- ჰაპტიკა და გასაგები სტატუსები (მიღებული/დახურული/შეცდომა)
- ვერტიკალური/ჰორიზონტალური რეჟიმები არტეფაქტების გარეშე
ვიდეო და ქსელი
- WebRTC SVC/Simulacast, LL-HLS Folback
- შეფერხების/ქსელის ინდიკატორი, რბილი დეგრადაცია
- შავი ეკრანების გარეშე გადართვის დროს
პასუხისმგებელი თამაში
- ლიმიტები/პაუზები/ისტორია 1-2 ტაპას მანძილზე
- „გვიანდელი“ განაკვეთების ბლოკი, როდესაც e2e ბარიერი აღემატება
ლოკალიზაცია და A11y
- RTL, დიდი შრიფტები, კონტრასტულობა
- სრული alt/labels ეკრანიზატორებისთვის
პროდუქტიულობა
- 60 fps UI, <100 ms TTI მთავარი ეკრანებისთვის
ენერგიის დაზოგვის რეჟიმი, მეხსიერების კონტროლი
დაკვირვება
- ჩაშენებული RUM და WebRTC-stats, SLO ალერტები
- სასურსათო მოვლენები და განაკვეთების ძაბრი
17) შედეგი
მობილური UX Live თამაშები არის ტრიადა სიჩქარე, სიცხადე და კონტროლი. ვერტიკალური მაგიდები, ერთი ხელის მართვა, სწრაფი ფსონები, ჰაპტიკა და გასაგები სტატუსები ქმნიან პალმში „ცოცხალი დარბაზის“ შეგრძნებას. ტექნიკური დისციპლინა - რბილი დეგრადაცია, ფოლკლორი LL-HLS- ზე, ქსელის ინდიკატორები, RUM ანალიტიკა და A11y - მშვენიერ ინტერფეისს საიმედო პროდუქტად აქცევს, რომელიც თანაბრად კარგად მუშაობს ფლაგმანებსა და საბიუჯეტო მოწყობილობებზე, მეტრო და სახლებში, iOS და Android.