In-App Notification Center
Centro de Notificaciones dentro de la aplicación
Un centro de notificaciones dentro de la aplicación mantiene actualizaciones útiles en un solo lugar. Cada elemento muestra qué cambió, cuándo y si está sin leer.
Otro ejemplo
Un compañero de equipo menciona a Maya en un comentario. Maya puede leerlo ahora o regresar de la lista de no leídos más tarde.
Partes principales
- 01Recuento de no leídos
- 02Elemento de notificación
- 03Fuente y tiempo
- 04Enlace de destino
- 05Controles de preferencia
Úsalo cuando
Úsalo cuando actualizaciones importantes del producto deban seguir siendo encontrables después de que desaparezca un banner.
No lo uses cuando
No repitas el mismo evento muchas veces ni expongas detalles privados. Brinda a las personas controles de notificación.
Nombre usado en código
event + recipient + unread state + dedupe + deep link + preferences Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Centro de Notificaciones dentro de la aplicación (In-App Notification Center). User context: Un compañero de equipo menciona a Maya en un comentario. Maya puede leerlo ahora o regresar de la lista de no leídos más tarde. Recommended pattern: Centro de Notificaciones dentro de la aplicación (In-App Notification Center). Why it fits: Úsalo cuando actualizaciones importantes del producto deban seguir siendo encontrables después de que desaparezca un banner. Do not use it when: No repitas el mismo evento muchas veces ni expongas detalles privados. Brinda a las personas controles de notificación. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Centro de Notificaciones dentro de la aplicación (In-App Notification Center) is used now. Definition: Un centro de notificaciones dentro de la aplicación mantiene actualizaciones útiles en un solo lugar. Cada elemento muestra qué cambió, cuándo y si está sin leer. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.