Crypto Casino
Torrent Gear
Liderazgo de IU y tarjetas de misión: mejores prácticas
1) Por qué todo esto: objetivos de IU
Leadboard: explicar instantáneamente «quién está donde» y por qué jugar a continuación; mostrar el objetivo más cercano (+ N puntos a ap).
Cartas de misión: convertir las reglas largas en una «unidad de acción» comprensible durante 10-30 minutos.
2) Jerarquía de información de la junta directiva
Conjunto mínimo de columnas:1. Lugar (#) con ancho constante y una cifra grande.
2. El jugador (avatar/marco/título, breve nick) es un perfil → clic.
3. Puntos/métrica de clasificación (SP/MMR/puntos de evento) - alinear a la derecha.
4. Premio/zona de clasificación (icono de rareza/rango de recompensa).
5. Tiempo/etapa (live/qualifier/finals), temporizador final.
Patrones:- Resaltar su línea (fila de sticky + «volver a mí»).
- «Umbral al objetivo»: un pequeño drawing «−48 SP al TOP 100».
- Pegamento de empates («T-10» para los mismos puntos).
3) Gestión y navegación
Filtros: liga/división, región, amigos, «sólo mi proveedor».
Ordenaciones: por lugar (por petición.) , puntos, hora de entrada, zona de premios.
Paginación vs skroll infinito:- desktop - paginación + «hacia sí mismo», mobile es un skroll infinito, pero con «hacia el principio/hacia sí mismo».
- Jump-to Rank: campo de entrada de rango para la transición instantánea (importante para tablas de escala).
4) Actualizaciones en tiempo real (sin «derganya»)
Actualizaciones diff: sólo cambiamos las líneas que realmente se han movido.
Animación de desplazamiento de fila: 120-200 ms, easing-out; sin saltar.
Anti-flyker: actualizaciones de batch cada 1-2 segundos (no más frecuentes).
Actualizaciones optimistas: agregamos puntos localmente y metimos «sincronización»....
5) Honestidad y seguridad en el liderazgo de IU
Explicación de las reglas: botón «¿Cómo se consideran las gafas?» junto al título.
Anti-bulling: enmascarar parte del nick (opción), queja de nombre tóxico - 1 clic.
Marcador de cuentas sospechosas: oculta a otros; al jugador - «sus puntos son verificados».
División divisional: señas de liga visualmente diferentes para que los fuertes no se mezclen con los iniciales.
6) Anatomía de la tarjeta de misión (diseño de un glance)
Título (≤ 40-50 caracteres), icono de tipo misión.
Breve descripción (qué hacer, dónde, por cuánto).
Barra de progreso con número/porcentaje + estimación de tiempo (≈ 20-25 min).
Dificultad (1-3 puntos) y rareza de recompensa (color/cara).
Recompensas: tokens/cosméticos (pequeñas miniaturas), sin connotaciones «monetarias».
Plazo: temporizador hasta la expiración con color suave (naranja/rojo en el último 10%).
CTA: «Iniciar »/« Continuar »/« Recoger» - un botón principal.
Segundo: «Cambiar misión» (si se permite), «Leer más» (modal de reglas).
7) Estado de las tarjetas de misión
Bloqueado: gris, con la pista «se abrirá después del nivel 7 «; CTA = "¿Qué se necesita? ».
Available: color por tipo; CTA = «Empezar».
In-progress: barra de progreso activa, CTA = «Continuar».
Completado: cheque verde; CTA = «Recoger» (efecto ≤ 1 segundos).
Expired: pálido; CTA = "Ocultar "/" Repetir en la temporada N'.
On hold (prueba de honestidad): troquel amarillo «verificación del resultado 1-3 min».
8) Lenguaje visual y accesibilidad
Colores en rareza: Común (neutro), Rare (azul), Epic (violeta), Legendary (oro), Mythic (acento arcoíris).
Colores semánticos: el éxito/progreso es verde, las advertencias son ámbar, las líneas de salida son rojas.
El contraste ≥ 4. 5:1, fuentes ≥ 14-16 px en mobile.
Todo lo importante no es sólo el color (iconos/patrones).
VFX: 0 económico. 6–1. 2 c, sin superposición de control.
Adaptable: tabla de tarjetas → (2 columnas tablet, 1 columna phone); Titulares fijos.
9) Estados de carga, vacío y error
Esqueletos para tablas y tarjetas (3-5 filas/títulos).
Empty state: texto útil + «Obtener una misión inicial».
Errores de red: comprensibles, con «Repetir»; offline - Mostramos el caché y marcamos «última actualización: 14:02».
10) Rendimiento
Virtualización de listas (más de 300 líneas).
Iconos como sprites/Lottie (no un zoológico SVG sin necesidad).
Debounce filtros/búsquedas (300-500 ms).
Caché de cliente y ETag para tableros/misiones.
11) Contenido honesto y anti-abusivo en misiones de IU
Breve «Cómo funciona»: chance drop, pity-logic, caps, sin nebulosas de marketing.
Patrón antifarma: notamos «diversidad»: el progreso es más rápido cuando se cambia el proveedor/apuesta.
Culdowns al botón «Cambiar misión» y una pista cuando se pueda de nuevo.
12) Métricas que son realmente importantes
CTR de las tarjetas de misión, Start Rate, Completion Rate, Median TTC.
Equip Rate/Duration para cosméticos obtenidos a través de misiones.
Leaderboard Engagement: clics en «hacia ti mismo», «ir al perfil», tiempo de visibilidad.
Complaint/Mute Rate en VFX/notificaciones.
Stickiness (DAU/MAU) y D7/D30 uplift en misiones/torneos involucrados.
Gini por SP: uniformidad de progreso con tiempos de juego similares.
13) Ideas A/B
1. Formato de barra de progreso: numérico + visual vs sólo visual.
2. Estimación del tiempo: mostrar/no mostrar; impacto en el inicio.
3. CTA-banco de trabajo: uno grande vs dos botones iguales.
4. Ordenar por defecto: por lugar vs por zona de premios.
5. Umbral de retroiluminación: T-10% vs T-20% del tiempo.
6. «A sí mismo» en el tablero de liderazgo: botón vs siempre una cadena fija.
14) Ejemplos de esquemas JSON (contenido → IU)
Tarjeta de misión
json
{
"id": "m. s4. provider. diversity «,» title «:» Abre tres proveedores «,» summary «:» Juega en 3 proveedores diferentes en 30 minutos «,» difficulty «:» medium «,» est_time_min": 25, «progress': {» current «: 2,» target «: 3},» rewards «: {» tokens «: 10,» cosmetic_drop": {«rarity»: «Rare», «p»: 0. 1}}, "expires_at": "2025-10-26T18: 00: 00Z", "state": "in_progress", "cta": {"label": "Continuar", "deeplink": "app ://open/lobby? tab=providers"}
}Barra de liderazgo
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) Microcopia (corta y clara)
La misión comenzó: "¡Vamos! Quedan ≈ 20 minutos".
Progreso subyacente - «1 proveedor más antes de la recompensa».
Dedline - «10% del tiempo, tendrá tiempo en una sola entrada».
Verificación de honestidad - «Comprobamos el resultado (hasta 3 min) - la recompensa se ha guardado».
16) Lista de verificación antes del lanzamiento
- Las tablas son legibles en 320 px; hay un «a sí mismo» y un jefe de sticky.
- Las tarjetas de misión son comprensibles «desde una perspectiva»: objetivo, tiempo, recompensa, CTA.
- Una renovación de tiempo real sin rotura; parches diff y frecuencia batch.
- Pantalla «Cómo funciona»: fórmulas de gafas/cap/rarezas.
- Control de ruido: límites VFX/min, «modo silencioso» nocturno.
- Accesibilidad: contraste, no sólo color, navegación por teclado.
- Anti-Abuse: Couldowns «Cambiar misión», retroiluminación de la variabilidad.
- Se han establecido las métricas y el plan A/B; logs de clics y sincronizaciones.
Una UI de liderazgo fuerte y tarjetas de misión es legibilidad instantánea, dinámica suave, transparencia honesta y ruido controlado. Dale al jugador un objetivo cercano, un progreso claro y un VFX ordenado, mantén las actualizaciones estables y las reglas claras. Entonces el tablero se convierte en el motor de la competencia, y las tarjetas de misión se convierten en una «unidad de acción» conveniente que crece sistémicamente el compromiso y la retención.