jmaxzh/sdlc-ui-design

Diseño de UI

Aplicabilidad

• Aplicar al diseño, implementación, modificación, revisión, optimización o asesoramiento de principios de interfaz visual solicitados para escritorio, móvil y web. Las tareas solo de backend, solo de base de datos y otras sin trabajo de interfaz visual quedan fuera del alcance de este skill.
• Este skill funciona independientemente del flujo de trabajo SDLC y se puede instalar por sí solo. Para tareas que también implican la organización de la información, el comportamiento interactivo o la recuperación, utilice la guía de UX disponible, como sdlc-ux-design, para esas decisiones.
• Cuando solo se solicite asesoramiento sobre principios, proporcione una respuesta breve a ese nivel, sin extenderse en el diseño específico del producto, la implementación o las pruebas de aceptación.
• Para solicitudes solo de revisión, informe los hallazgos y recomendaciones sin crear un nuevo diseño ni cambiar la implementación.
• La exploración de diseño, las propuestas, la comparación de conceptos y la validación de prototipos crean o modifican únicamente artefactos de diseño independientes. Cambie el código de producción solo cuando la solicitud incluya la implementación.
• Para solicitudes mixtas, entregue el diseño antes de continuar con la implementación autorizada. Entregue y evalúe cada uno por separado; la validación del prototipo no establece la aceptación de la implementación.
• Para la implementación, siga las comprobaciones existentes del proyecto. Cuando el entorno actual permita reproducir un defecto, realice una nueva verificación centrada en ese defecto; elija las comprobaciones para otros cambios de comportamiento según su riesgo y alcance. No configure entornos de verificación adicionales, no genere informes de verificación formales ni duplique comprobaciones existentes únicamente para cumplir con este skill.
• Para los resultados de la implementación, informe las comprobaciones realizadas, las observaciones y el alcance no verificado. Distinga entre evidencia de ejecución, inferencia basada en código y juicio subjetivo; la autoevaluación del modelo no equivale a la aceptación del usuario.

Lectura bajo demanda

• Siga los principios compartidos a continuación y lea las referencias de la plataforma para el destino y escenario reales.
• Escritorio: lea principios de escritorio.
• Móvil: lea principios móviles.
• Web: lea principios web.
• Para web móvil, lea los principios tanto de móvil como de web. Para otras combinaciones, cargue referencias adicionales según las condiciones de los documentos seleccionados.
• Si la plataforma no está especificada, infiérala primero a partir del contexto de la tarea y el proyecto. Para consejos generales, utilice únicamente los principios compartidos. Solicite una aclaración solo si una tarea concreta aún carece de una decisión necesaria sobre la plataforma.
• Para el contexto o los límites de una adaptación, consulte su entrada vinculada en contexto fuente y, cuando sea necesario, el pasaje original. Las instrucciones en inglés de este skill definen la adaptación local; la consulta no importa flujos de trabajo ni conjuntos de herramientas ascendentes.

Entrega de diseño

Utilice esta sección para la exploración visual solicitada, propuestas, comparación de conceptos o validación de prototipos, independientemente del tamaño del cambio. En tareas mixtas, se aplica a la parte de diseño; la entrega y aceptación de la implementación siguen la tarea y los requisitos existentes del proyecto.

• Presente las propuestas de diseño de UI mediante la generación de imágenes primero. Las capturas de pantalla de interfaces existentes pueden servir como referencias. Si la generación de imágenes no está disponible o falla, presente la propuesta como un artefacto HTML de una sola página. Contexto fuente.
• Para diseño de UI/UX combinado, proporcione la imagen del diseño de UI y un prototipo UX HTML interactivo. Cuando la UI utilice el fallback HTML, use un único artefacto HTML para ambos.
• Para artefactos HTML, use por defecto CSS y JavaScript en línea para que se abran directamente. Use estado local y datos ilustrativos claramente identificados para demostrar el alcance de la interacción acordado.
• Inspeccione el diseño renderizado en el viewport previsto utilizando contenido real cuando esté disponible; de lo contrario, utilice contenido representativo claramente identificado. Contexto fuente.
• Liderar la entrega con imágenes, vistas previas y archivos abribles. Mantenga la prosa adjunta breve y limitada a instrucciones de apertura, alcance de la simulación y limitaciones necesarias.

Principios compartidos

Aplicación de los principios

• Aplique los principios relevantes para el trabajo solicitado, la plataforma de destino y el escenario.
• Explique las condiciones y compensaciones que afectan la recomendación. No prescriba un estilo visual particular de forma universal.
• Antes de citar requisitos o recomendaciones numéricas, verifique su fuente, unidades y aplicabilidad en la plataforma de destino.

Principios de diseño

• Puntos de entrada y posibilidades (affordances): haga que los puntos de entrada principales sean visualmente reconocibles. Utilice la apariencia, la etiqueta y la ubicación de un control para comunicar cómo usarlo y qué significa su acción. Contexto fuente.
• Consistencia y estilo: alinee los iconos, componentes y decoración con el propósito del producto y las convenciones de diseño existentes. Mantenga el contenido legible y las acciones utilizables al agregar decoración. Elija un estilo visual que se ajuste al tipo de producto, la audiencia prevista, el contexto de uso y las preferencias visuales indicadas. Contexto fuente.
• Sistema de diseño visual: use reglas de diseño visual de todo el producto por defecto, con excepciones explícitas a nivel de página que tengan prioridad en esas páginas. Organice los valores y patrones de diseño reutilizables por función semántica, extrayendo definiciones compartidas cuando se establezcan necesidades repetidas. Preserve las distinciones en la intención al decidir qué reutilizar. Contexto fuente.
• Dirección estética: siga las elecciones estéticas explícitas del usuario cuando entren en conflicto con las preferencias estilísticas del skill. Contexto fuente.
• Concepto de presentación: base el concepto visual de una página de presentación en características específicas de su tema. Contexto fuente.
• Ajuste de contenido: elija diseños que se adapten a la forma, longitud y cantidad del contenido real. Cuando una estructura no pueda contener el contenido requerido, adapte la estructura preservando los hechos y la información necesaria. Contexto fuente.
• Medios disponibles: cuando un enfoque visual dependa de medios, base en activos que existan o que realmente se puedan obtener. Elija una composición factible cuando los activos requeridos no estén disponibles. Contexto fuente.
• Tipografía: elija fuentes, tamaños e interlineado para las condiciones de lectura. Establezca jerarquía a través del tamaño y el peso. Mantenga el cuerpo y el texto de apoyo legibles, incluso al ampliarlos, sin recortar ni ocultar contenido o controles necesarios.
• Idiomas de destino: para los idiomas y sistemas de escritura que el producto admite, tenga en cuenta la expansión del texto, la dirección de lectura y el modelado específico de la escritura en la tipografía y el diseño. Contexto fuente.
• Distribución y espaciado: use la posición y la agrupación para expresar importancia y relaciones. Aplique la alineación y el espaciado de manera consistente. Haga coincidir la densidad con las necesidades de lectura, comparación y operación. Evite el énfasis competitivo. Elija la estructura de diseño según el espacio disponible para la interfaz o el contenedor. Reorganice el contenido según sea necesario cuando ese espacio cambie, manteniendo el contenido y las acciones principales accesibles. Contexto fuente.
• Color, estados y foco: defina colores primarios, de apoyo y de estado y úselos de manera consistente. Asegure un contraste adecuado para texto, controles y estados. Cuando el color transmita información, complételo con texto o formas. Haga que los estados de los controles y el foco sean visualmente identificables. Para cada apariencia que el producto admita, verifique la legibilidad del texto y los controles y las distinciones de estado. Cuando la plataforma de destino exponga preferencias de alto contraste, respételas en la interfaz renderizada. Contexto fuente.
• Objetivos de interacción: dimensione y espacie los objetivos para el ratón, el tacto u otros métodos de entrada, haciéndolos fáciles de seleccionar sin activación accidental adyacente.
• Codificación de datos: al presentar datos gráficamente, elija codificaciones visuales adecuadas para las relaciones que los usuarios necesitan comprender. Haga que las unidades y escalas aplicables sean claras. Contexto fuente.
• Propósito del movimiento: utilice el movimiento en superficies orientadas a tareas y de lectura para retroalimentación, cambios de estado o continuidad. Cuando el movimiento explique un cambio, haga que su causa y efecto sean comprensibles. En superficies persuasivas o experienciales, el movimiento puede tener un propósito expresivo claro por derecho propio. Cuando un usuario habilite una preferencia de movimiento reducido compatible con el entorno de destino, respétela. Al reducir o reemplazar el movimiento, mantenga el contenido legible y los cambios de estado necesarios comprensibles. El movimiento no esencial no debe bloquear la entrada. Cuando una interacción admita el cambio o la cancelación, haga que su animación sea interrumpible y transicione al estado de interacción más reciente; interrumpir una animación no cancela por sí mismo una operación en segundo plano. Contexto fuente.