UI Leaderboard and Mission Cards: Βέλτιστες πρακτικές

1) Γιατί όλα αυτά: Στόχοι της UI

Leaderboard: αμέσως εξηγήστε «ποιος είναι εκεί» και γιατί να παίξει στη συνέχεια? εμφανίζει τον πλησιέστερο στόχο (+ N σημεία πριν από το ap).

Κάρτες αποστολής: μετατρέψτε τους μεγάλους κανόνες σε κατανοητή «μονάδα δράσης» για 10-30 λεπτά.

2) Ιεραρχία Πληροφοριών του Διοικητικού Συμβουλίου

Ελάχιστο σύνολο στηλών:

1. Τοποθετήστε (#) με σταθερό πλάτος και μεγάλο αριθμό.

2. Παίκτης (avatar/frame/title, σύντομο ψευδώνυμο) - clickable προφίλ →.

3. Βαθμοί/μέτρηση αξιολόγησης (βαθμοί SP/MMR/event) - ευθυγράμμιση προς τα δεξιά.

4. Ζώνη βραβείου/κατάταξης (εικονίδιο σπανιότητας/εύρος βραβείων).

5. Χρόνος/στάδιο (ζωντανός/προκριματικός/τελικός), τελικός χρονοδιακόπτης.

Μοτίβα:

Σημειώστε τη γραμμή σας (κολλώδης σειρά + «έλα πίσω σε μένα»).
«Κατώτατο όριο για τον στόχο»: μικρός θάνατος «− 48 SP για τον TOP-100.»
Κόλληση με γραβάτα («T-10» για πανομοιότυπα σημεία).

3) Έλεγχος και ναυσιπλοΐα

Φίλτρα: league/division, region, friends, «just my provider».

Ταξινόμηση ανά τοποθεσία (προκαθορισμένη), κατά σημεία, κατά χρόνο εισόδου, ανά ζώνη βραβείων.

Pagination vs άπειρη κύλιση:

επιτραπέζιος υπολογιστής - pagination + «to yourself», κινητό - ατελείωτη κύλιση, αλλά με «to the start/to yourself».
Jump-to Rank: ένα πεδίο εισόδου κατάταξης για άμεση μετάβαση (σημαντικό για πίνακες κλίμακας).

4) Ζωντανές επικαιροποιήσεις (χωρίς συσπάσεις)

Ενημερώσεις Diff: αλλάζουμε μόνο γραμμές που έχουν πραγματικά μετακινηθεί.

Κινούμενη κίνηση γραμμής: 120-200 ms, χαλάρωση. δεν άλματα.

Anti-flicker: η παρτίδα ενημερώνεται κάθε 1-2 δευτερόλεπτα (όχι πιο συχνά).

Αισιόδοξες ενημερώσεις: προσθήκη σημείων τοπικά και σήμανση «συγχρονισμός»...

5) Ακεραιότητα και ασφάλεια στο διοικητικό συμβούλιο του UI

Επεξήγηση των κανόνων: κουμπί «Πώς υπολογίζονται τα γυαλιά» δίπλα στον τίτλο.

Αντι-εκφοβισμός: μάσκα μέρους του ψευδώνυμου (επιλογή), παράπονα για ένα τοξικό όνομα - 1 κλικ.

Δείκτης ύποπτων λογαριασμών: κρυμμένος από άλλους· παίκτης - «οι πόντοι σας ελέγχονται».

Διαχωρισμός διαίρεσης: οπτικά διαφορετικά σήματα πρωταθλήματος έτσι ώστε τα ισχυρά να μην αναμειγνύονται με τα ορεκτικά.

6) Ανατομία κάρτας αποστολής (σχέδιο μιας ματιάς)

Τίτλος (≤ 40-50 χαρακτήρες), εικονίδιο τύπου αποστολής.

Σύντομη περιγραφή (τι να κάνετε, πού, για πόσο).

Γραμμή προόδου με τον αριθμό/ποσοστό + εκτίμηση χρόνου (≈ 20-25 λεπτά).

Δυσκολία (1-3 βαθμοί) και σπανιότητα ανταμοιβής (χρώμα/πρόσωπο).

Ανταμοιβές: μάρκες/καλλυντικά (μικρές μινιατούρες), χωρίς «χρηματικό» υποκείμενο.

Όρος: χρονοδιακόπτης μέχρι τη λήξη με μαλακό χρώμα (πορτοκαλί/κόκκινο το τελευταίο 10%).

CTA: «Start «/» Continue «/» Pick up »- ένα κύριο κουμπί.

Δευτεροβάθμια: «Αποστολή αλλαγής» (εάν επιτρέπεται), «Περισσότερα» (κανόνες τρόπου μεταφοράς).

7) Κράτη με κάρτα αποστολής

Κλειδωμένο: γκρι, με την άμεση «θα ανοίξει μετά το επίπεδο 7 «. CTA = "Τι χρειάζεστε ».

Διαθέσιμο: χρώμα ανά τύπο; CTA = «Έναρξη».

Εν εξελίξει: ενεργός γραμμή προόδου, CTA = «Συνέχιση».

Ολοκληρώθηκε: πράσινος έλεγχος. CTA = «Pick up» (αποτέλεσμα ≤ 1 sec).

Έληξε: χλωμό; CTA = «Απόκρυψη «/» Επανάληψη στην εποχή Ν «.

Σε αναμονή (έλεγχος εντιμότητας): κίτρινο die «έλεγχος αποτελεσμάτων 1-3 λεπτά».

8) Οπτική γλώσσα και προσβασιμότητα

Σπάνια χρώματα: Κοινά (ουδέτερα), Σπάνια (μπλε), Επικά (βιολετί), Θρυλικά (χρυσά), Μυθικά (ουράνιο τόξο).

Σημασιολογικά χρώματα: επιτυχία/πρόοδος - πράσινο, προειδοποιήσεις - κίτρινο, προθεσμίες - κόκκινο.

Αντίθεση ≥ 4. 5:1, γραμματοσειρές ≥ 14-16 px στο κινητό.

Όλα τα σημαντικά δεν είναι μόνο έγχρωμα (εικονίδια/μοτίβα).

Thrifty VFX: 0. 6–1. 2 c, χωρίς επικάλυψη ελέγχου.

Anavar: επιτραπέζιες κάρτες (δισκίο 2 στηλών, τηλέφωνο 1 στήλης)· σταθερές κεφαλίδες.

9) Καταστάσεις φόρτωσης, κενά και σφάλματα

Σκελετοί για τραπέζια και φύλλα (3-5 γραμμές/πλακάκια).

Κενή κατάσταση: χρήσιμο κείμενο + «Αποστολή εκτόξευσης».

Σφάλματα δικτύου: κατανοητά, με «επανάληψη». offline - εμφανίστε την κρύπτη και το σήμα «τελευταία ενημέρωση: 14:02».

10) Επιδόσεις

Λίστα εικονοποίησης (300 + σειρές).

Εικονίδια ως sprites/Lottie (όχι ζωολογικός κήπος SVG χωρίς λόγο).

Αφαίρεση φίλτρων/αναζήτηση (300-500 ms).

Caches πελατών και ETag για συμβούλια/αποστολές.

11) Έντιμο περιεχόμενο και καταπολέμηση της κατάχρησης σε αποστολές UI

Σύντομη «Πώς λειτουργεί»: ρίξτε την πιθανότητα, λογική οίκτου, στοματοφύλακες, χωρίς νεφελώματα μάρκετινγκ.

Αντιαγροτικό πρότυπο: σημείωση «ποικιλομορφία» - η πρόοδος είναι ταχύτερη κατά την αλλαγή παρόχου/στοιχήματος.

Ψύχεται στο κουμπί «Αλλαγή αποστολής» και μια υπόδειξη όταν μπορείτε και πάλι.

12) Μετρήσεις που πραγματικά έχουν σημασία

Κάρτες αποστολής CTR, ρυθμός εκκίνησης, ρυθμός ολοκλήρωσης, μέσος TTC.

Ρυθμός/διάρκεια εξοπλισμού για καλλυντικά που προέρχονται από αποστολές.

Leaderboard Engagement: κάνει κλικ στο «to yourself», «go to profile», χρόνο ορατότητας.

Καταγγελία/Mute Rate on VFX/κοινοποιήσεις.

Stickiness (DAU/MAU) και D7/D30 uplift για όσους συμμετέχουν σε αποστολές/τουρνουά.

Gini by SP: ομοιότητα της προόδου σε παρόμοιες εποχές παιχνιδιού.

13) A/B ιδέες

1. Μορφότυπος γραμμής προόδου: αριθμητικό + οπτικό έναντι οπτικού μόνο.

2. Χρονική αξιολόγηση: εμφάνιση/μη εμφάνιση· αντίκτυπος στην εκκίνηση.

3. Διάταξη CTA: ένα μεγάλο έναντι δύο ίσα κουμπιά.

4. Προκαθορισμένη διαλογή: κατά τόπο vs ανά περιοχή βραβείων.

5. Όριο οπισθόφωτος προθεσμίας: T-10% έναντι T-20% του χρόνου.

6. «Για τον εαυτό σας» στο διοικητικό συμβούλιο: το κουμπί vs είναι πάντα μια σταθερή συμβολοσειρά.

14) Παραδείγματα συστημάτων JSON (περιεχόμενο → UI)

Κάρτα αποστολής

json
{
"id": "m. s4. πάροχος υπηρεσιών. Ποικιλία «,» τίτλος «:» Άνοιγμα τριών παρόχων «,» περίληψη «:» Παίξτε με 3 διαφορετικούς παρόχους σε 30 λεπτά «,» δυσκολία «:» μέτρια «,» est_time_min": 25 «, πρόοδος»: {«τρέχουσα»: 2 «, στόχος»: 3} «, ανταμοιβές»: {«μάρκες»: 10 «, cosmetic_drop": {» σπάνια «:», «p»: 0. 1}}, «expires_at": «2025-10-26T18: 00: 00Z,» «κατάσταση»: «in_progress,» «cta»: {«label»: «Continue», «deeplink»: «app ://open/lobby? καρτέλα = πάροχοι"}
}

Γραμμή πίνακα επικεφαλής

json
{
"rank": 124, "χρήστης": {"i :"  "" name ":" SeaFox "," : "θρυλικό. "}, "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.
Ενημέρωση σε πραγματικό χρόνο χωρίς τρεμοπαίζει. έμπλαστρα diff και συχνότητα butch.
The How It Works screen: point/cap/sparity formulas.
Έλεγχος θορύβου: όρια VFX/min, κατάσταση νυχτερινής ηρεμίας.
Προσβασιμότητα: αντίθεση, όχι μόνο χρώμα, πλοήγηση πληκτρολογίου.
Καταπολέμηση της κατάχρησης: ψύξη «Αποστολή αλλαγής», τονίζοντας τη μεταβλητότητα.
Καταρτίστηκε σχέδιο μετρικών και Α/Β· κλικ και συγχρονισμός αρχείων καταγραφής.

Ένα ισχυρό UI του leaderboard και κάρτες αποστολής είναι η άμεση αναγνωσιμότητα, η ήπια δυναμική, η ειλικρινής διαφάνεια και ο ελεγχόμενος θόρυβος. Δώστε στον παίκτη τον πλησιέστερο στόχο, κατανοητή πρόοδο και καθαρή VFX, κρατήστε τις ενημερώσεις σταθερές και τους κανόνες σαφείς. Στη συνέχεια το συμβούλιο γίνεται η μηχανή του διαγωνισμού, και οι κάρτες αποστολής γίνονται μια βολική «μονάδα δράσης», η οποία αυξάνει συστηματικά την εμπλοκή και τη διατήρηση.