Torrent Gear

UI ლიდერი და მისიის ბარათები: საუკეთესო პრაქტიკა

1) რატომ არის ეს ყველაფერი: UI მიზნები

ლიდერი: დაუყოვნებლივ ავუხსნათ ვინ არის სად და რატომ უნდა ვითამაშოთ შემდეგ; აჩვენეთ შემდეგი მიზანი (+ N ქულა აპამდე).

მისიის ბარათები: გრძელი წესების გადაქცევა გასაგები „მოქმედების ერთეულად“ 10-30 წუთის განმავლობაში.

2) ლიდერის ინფორმაციის იერარქია

სვეტების მინიმალური ნაკრები:

1. ადგილი (#) სტაბილური სიგანე და დიდი ციფრი.

2. მოთამაშე (ავატარი/ჩარჩო/სათაური, მოკლე მეტსახელი) - დაწკაპუნებით პროფილი.

3. ქულები/სარეიტინგო მეტრი (SP/MMR/Ivent სათვალეები) - გაათანაბრეთ მარჯვენა კიდეზე.

4. პრიზი/რანგის ზონა (იშვიათი ხატი/ჯილდოს დიაპაზონი).

5. დრო/ეტაპი (ცოცხალი/qualifier/finals), დასრულების დრო.

ნიმუშები:

მისი ხაზის განათება (sticky row + „დაბრუნდი ჩემთან“).
„ბარიერი სამიზნემდე“: პატარა ღერო „− 48 SP TOP-100- მდე“.
გათამაშების წებოვანი („T-10“ იგივე ქულებისთვის).

3) კონტროლი და ნავიგაცია

ფილტრები: ლიგა/განყოფილება, რეგიონი, მეგობრები, „მხოლოდ ჩემი პროვაიდერი“.

დალაგება: ადგილზე (ზომიერად) , ქულებზე, შესვლის დროზე, საპრიზო ზონაში.

Pagination vs გაუთავებელი skroll:

desktop - pagination + „საკუთარი თავისთვის“, mobile არის უსასრულო ნაკერი, მაგრამ „თავიდანვე/თავით“.
Jump-to Rank: რანგის შემოღების ველი მყისიერი გადასვლისთვის (მნიშვნელოვანია ფართომასშტაბიანი დაფებისთვის).

4) რეალურ დროში განახლებები („დერგენის“ გარეშე)

განახლებები: ჩვენ ვცვლით მხოლოდ ხაზებს, რომლებიც ნამდვილად გადავიდა.

ხაზის გადაადგილების ანიმაცია: 120-200 ms, easing-out; ნახტომი არ არის.

ანტი-ფლიკერი: ბატჩის განახლება ყოველ 1-2 წამში (არა უმეტეს).

ოპტიმისტური განახლებები: ადგილობრივად დაამატეთ ქულები და გაითვალისწინეთ „სინქრონიზაცია“....

5) UI ლიდერის პატიოსნება და უსაფრთხოება

წესების ახსნა: ღილაკი „როგორ განიხილება სათვალეები?“ სათაურის გვერდით.

ანტი-ბულინგი: მეტსახელის ნაწილის შენიღბვა (ვარიანტი), ტოქსიკური სახელის საჩივარი - 1 კლიკი.

საეჭვო ანგარიშების მარკერი: სხვებისგან დამალული; მოთამაშეს - „შემოწმებულია თქვენი ქულები“.

დივიზიების გამიჯვნა: ვიზუალურად განსხვავებული ბეიჯის ლიგა ისე, რომ ძლიერი არ ერწყმის საწყობებს.

6) მისიის ბარათის ანატომია

სათაური (40-50 სიმბოლო), მისიის ტიპის ხატი.

მოკლე აღწერა (რა უნდა გავაკეთოთ, სად, რამდენი).

პროგრესი ბარი ნომრით/პროცენტით + დროის შეფასება (20-25 წუთი).

სირთულე (1-3 ქულა) და ჯილდოს იშვიათობა (ფერი/სახე).

ჯილდოები: ნიშნები/კოსმეტიკა (მცირე მინიატურა), „ფულადი“ ქვეტექსტის გარეშე.

ვადა: დრო გასვლამდე რბილი ფერით (ნარინჯისფერი/წითელი ბოლო 10%).

CTA: „დაწყება “/„ გაგრძელება “/„ აყვანა“ - ერთი მთავარი ღილაკი.

მეორე: „შეცვალეთ მისია“ (თუ ნებადართულია), „მეტი“ (წესების მოდალი).

7) მისიის ბარათების მდგომარეობა

ლოკდი: ნაცრისფერი, მინიშნებით „გაიხსნება 7 დონის შემდეგ „; CTA = "რა არის საჭირო? ».

Available: ფერი ტიპის; CTA = „დაწყება“.

In-progress: პროგრესული ბარი აქტიურია, CTA = „გაგრძელება“.

რთული: მწვანე ჩეკი; CTA = „აყვანა“ (ეფექტი 1 წამი).

Expired: ფერმკრთალი; CTA = „დამალვა „/„ განმეორება N სეზონში “.

ჰოლდზე (პატიოსნების შემოწმება): ყვითელი ტალახი „შედეგის შემოწმება 1-3 წუთის განმავლობაში“.

8) ვიზუალური ენა და წვდომა

იშვიათი ფერები: Common (ნეიტრალური), Rare (ცისფერი), Epic (იისფერი), Legendary (ოქრო), Mythic (ცისარტყელა აქცენტი).

სემანტიკური ფერები: წარმატება/წინსვლა - მწვანე, გაფრთხილებები - ქარვა, ვადა - წითელი.

კონტრასტი 4. 5:1, შრიფტები - 14-16 px მობილური.

ყველა მნიშვნელოვანი არ არის მხოლოდ ფერი (ხატები/ნიმუშები).

ეკონომიკური VFX: 0. 6–1. 2 გ, ჭერის გარეშე.

ადაპტაცია: ცხრილი და ბარათები (2 tablet სვეტი, 1 phone სვეტი); ფიქსირებული სათაურები.

9) დატვირთვის, სიცარიელისა და შეცდომების მდგომარეობა

ცხრილებისა და ბარათების ჩონჩხი (3-5 სტრიქონი/ტაილები).

Empty state: სასარგებლო ტექსტი + „მიიღეთ საწყისი მისია“.

ქსელის შეცდომები: გასაგებია, გამეორებით; ხაზგარეშე - ჩვენ ვაჩვენებთ ქეშს და ვაძლევთ „ბოლო განახლებას: 14:02“.

10) პროდუქტიულობა

სიების ვირტუალიზაცია (300 + სტრიქონი).

ხატები, როგორიცაა sprites/Lottie (არა SVG ზოოპარკი საჭიროების გარეშე).

Debounce ფილტრები/ძებნა (300-500 ms).

კლიენტის ქეში და ETag დაფებისთვის/მისიებისთვის.

11) გულწრფელი შინაარსი და ანტი-აბუსი UI მისიებში

მოკლე „როგორ მუშაობს ეს“: შეშუპების შანსი, საგზაო ლოგიკა, ქუდები, მარკეტინგული ნისლეულების გარეშე.

ანტი-მეურნეობის შაბლონი: ჩვენ აღვნიშნავთ „მრავალფეროვნებას“ - პროგრესი უფრო სწრაფად მიდის პროვაიდერის/განაკვეთის შეცვლისას.

Kuldowns ღილაკზე „შეცვალეთ მისია“ და მინიშნება, როდესაც კვლავ შეგიძლიათ.

12) მეტრიკები, რომლებიც ნამდვილად მნიშვნელოვანია

CTR მისიის ბარათები, Start Rate, Completion Rate, Median TTC.

Equip Rate/Duration მისიის საშუალებით მიღებული კოსმეტიკური საშუალებებისთვის.

Leaderboard Engagement: დაწკაპუნება „საკუთარ თავზე“, „პროფილზე წასვლა“, ხილვადობის დრო.

Complaint/Mute Rate VFX/შეტყობინებებზე.

Stickiness (DAU/MAU) და D7/D30 uplift მისიებში/ტურნირებში.

Gini SP- ში: პროგრესის ერთგვაროვნება თამაშის ანალოგიურ დროში.

13) A/B იდეები

1. პროგრესული ბარის ფორმატი: რიცხვითი + ვიზუალური vs მხოლოდ ვიზუალური.

2. დროის შეფასება: აჩვენეთ/არ აჩვენოთ; გავლენა დაწყებაზე.

3. CTA განლაგება: ერთი დიდი vs ორი თანაბარი ღილაკი.

4. ნაგულისხმევი დახარისხება: პრიზების ზონაში vs ადგილზე.

5. განათების ბარიერი: T-10% vs T-20% დროის.

6. ლიდერის „საკუთარ თავზე“: ღილაკი vs ყოველთვის ფიქსირებული სტრიქონი.

14) JSON სქემების მაგალითები (შინაარსი UI)

მისიის ბარათი

json
{
"id": "m. s4. provider. diversity" ", title": "აღმოაჩინე სამი პროვაიდერი", "summary": "ითამაშე 3 სხვადასხვა პროვაიდერზე 30 წუთში", "difficulty": "საშუალო", "est _ time _ min": 25, "progress": {"currrent": 2, "target": 3, "rewards": {"tokens": 10, "cosmetic _ drop": {"rarity": "Rare", "p": 0. 1}, "expires _ at": "2025-10-26T18: 00Z", "სახელმწიფო": "in _ progress", "cta": {"label": "გაგრძელება", "deeplink": "app ://Open/lobbby? tab=providers"}
}

ლიდერის სტრიქონი

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary. wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

15) მიკროკოპია (მოკლე და ნათელი)

მისია დაიწყო - "მოდით წავიდეთ! დარჩა 20 წუთი."

პროგრესი - „კიდევ 1 პროვაიდერი ჯილდოსკენ“.

ვადა - „დროის 10%, დრო გაქვთ ერთი ნაბიჯისთვის“.

პატიოსნების შემოწმება - „ჩვენ ვამოწმებთ შედეგს (3 წუთამდე) - ჯილდო დაცულია“.

16) ჩეკის სია გამოქვეყნებამდე

ცხრილები იკითხება 320 px; არის „საკუთარი თავისთვის“ და სტიკერი.
მისიის ბარათები გასაგებია „ერთი შეხედვით“: მიზანი, დრო, ჯილდო, CTA.
Real Time განახლებები ფრჩხილების გარეშე; putchi და butch სიხშირე.
ეკრანი „როგორ მუშაობს“: სათვალეების/კაპების/იშვიათობის ფორმულები.
ხმაურის კონტროლი: VFX/წთ ლიმიტები, ღამის „მშვიდი რეჟიმი“.
ხელმისაწვდომობა: კონტრასტი, არა მხოლოდ ფერი, კლავიატურის ნავიგაცია.
ანტი-აბიუსი: „შეცვალეთ მისია“, ცვალებადობის განათება.
მეტრიკები და A/B გეგმა შეიქმნა; დაწკაპუნებისა და სინქრონიზაციის ლოგოები.

ძლიერი UI ლიდერი და მისიის ბარათები არის მყისიერი კითხვა, რბილი დინამიკა, გულწრფელი გამჭვირვალობა და კონტროლირებადი ხმაური. მიეცით მოთამაშეს უახლოესი მიზანი, გასაგები პროგრესი და სისუფთავე VFX, შეინარჩუნეთ განახლებები სტაბილური და წესები მკაფიოდ. შემდეგ დაფა ხდება კონკურსის ძრავა, ხოლო მისიის ბარათები ხდება მოსახერხებელი „მოქმედების ერთეული“, რომელიც სისტემატურად ზრდის ჩართვას და შენარჩუნებას.