aswin-haridas/apple-guidelines-for-ui

Directrices de diseño de UI (independientes de la plataforma)

119 páginas de referencia en references/ (junto a este archivo), reescritas a partir de las HIG de Apple para aplicarse a cualquier plataforma. Cada página mantiene una línea Fuente: que apunta al original.

Cómo usar

1. Identifica los temas que toca la tarea (componente, patrón, fundamento, entrada). Elige del catálogo a continuación.
2. Lee solo las páginas relevantes con la herramienta Leer, p. ej. references/buttons.md. Usa grep en references/ para buscar una palabra clave cuando no estés seguro de qué página la cubre.
3. Aplica las pautas a la plataforma realmente en uso (web, Android, iOS, escritorio...). Cuando una página nombre equivalentes multiplataforma (lectores de pantalla, Cmd/Ctrl, Material vs. convenciones del sistema), elige la opción para la plataforma objetivo; sigue las convenciones nativas de esa plataforma donde entren en conflicto.
4. Al revisar una UI, cita la página y la regla específica (p. ej. "alerts.md: usa un botón de cancelar para acciones destructivas") y di concretamente qué cambiar.

Siempre ten en cuenta design-principles.md (propósito, agencia, responsabilidad, familiaridad, flexibilidad, simplicidad, artesanía, deleite) y accessibility.md para cualquier trabajo de UI.

Páginas índice: index.md, foundations.md, patterns.md, components.md, inputs.md.

Catálogo

• accessibility.md — Accesibilidad: Las interfaces de usuario accesibles permiten que todos tengan una gran experiencia con tu app o juego.
• action-sheets.md — Hojas de acción: Una hoja de acción (a veces llamada diálogo de confirmación o menú de hoja inferior) es una vista modal que presenta opciones relacionadas con una acción que las personas...
• activity-views.md — Vistas de actividad: Una vista de actividad — a menudo llamada hoja de compartir — presenta un rango de tareas que las personas pueden realizar en el contexto actual. En la web,...
• alerts.md — Alertas: Una alerta proporciona información crítica que las personas necesitan de inmediato.
• app-icons.md — Iconos de app: Un icono único y memorable expresa el propósito y la personalidad de tu app o juego y ayuda a las personas a reconocerlo de un vistazo.
• augmented-reality.md — Realidad aumentada: La realidad aumentada (o RA) te permite ofrecer experiencias inmersivas y atractivas que combinan perfectamente objetos virtuales con el mundo real.
• boxes.md — Cajas: Una caja crea un grupo visualmente distinto de información y componentes lógicamente relacionados.
• branding.md — Marca: Las apps y juegos expresan su identidad de marca única de maneras que las hacen reconocibles al instante, sintiéndose como en casa en la plataforma y...
• buttons.md — Botones: Un botón inicia una acción instantánea.
• charting-data.md — Graficar datos: Presentar datos en un gráfico puede ayudarte a comunicar información con claridad y atractivo.
• charts.md — Gráficos: Organiza datos en un gráfico para comunicar información con claridad y atractivo visual.
• collaboration-and-sharing.md — Colaboración y compartición: Las grandes experiencias de colaboración y compartición son simples y receptivas, permitiendo a las personas interactuar con el contenido mientras se comunican de manera efectiva...
• collections.md — Colecciones: Una colección gestiona un conjunto ordenado de contenido y lo presenta en un diseño personalizable y altamente visual.
• color-wells.md — Pozos de color: Un pozo de color permite a las personas ajustar el color del texto, formas, guías y otros elementos en pantalla.
• color.md — Color: El uso juicioso del color puede mejorar la comunicación, evocar tu marca, proporcionar continuidad visual, comunicar estado y retroalimentación, y ayudar a las personas...
• column-views.md — Vistas de columna: Una vista de columna — también llamada navegador o columnas Miller — permite a las personas ver y navegar una jerarquía de datos usando una serie de columnas verticales...
• combo-boxes.md — Cuadros combinados: Un cuadro combinado combina un campo de texto con un botón desplegable en un solo control.
• components.md — Componentes: Aprende a usar y personalizar los componentes definidos por el sistema para ofrecer a las personas una experiencia familiar y consistente.
• content.md — Contenido: - Gráficos
• context-menus.md — Menús contextuales: Un menú contextual proporciona acceso a funcionalidades directamente relacionadas con un elemento, sin saturar la interfaz.
• controls.md — Controles: Un control proporciona acceso rápido a una función de tu app desde superficies del sistema como un panel de ajustes rápidos, la pantalla de bloqueo o un botón de hardware...
• dark-mode.md — Modo oscuro: El modo oscuro es una configuración de apariencia del sistema que utiliza una paleta de colores oscuros para proporcionar una experiencia de visualización cómoda adaptada a entornos de poca luz...
• design-principles.md — Principios de diseño: Explora los principios fundamentales que guían el diseño en todas las plataformas — web, móvil, escritorio y más.
• designing-for-games.md — Diseñar para juegos: Cuando las personas juegan a tu juego en cualquier dispositivo, se sumergen en el mundo que diseñaste mientras confían en las funciones de la plataforma que aman.
• disclosure-controls.md — Controles de divulgación: Los controles de divulgación revelan y ocultan información y funcionalidades relacionadas con controles o vistas específicas.
• drag-and-drop.md — Arrastrar y soltar: Usando arrastrar y soltar, las personas pueden mover o duplicar fotos, texto y otro contenido seleccionados arrastrando la selección de un lugar a otro...
• edit-menus.md — Menús de edición: Un menú de edición permite a las personas hacer cambios en el contenido seleccionado en la vista actual, además de ofrecer comandos relacionados como Copiar, Seleccionar...
• entering-data.md — Ingresar datos: Cuando necesitas información de las personas, diseña formas que les faciliten proporcionarla sin cometer errores.
• feedback.md — Retroalimentación: La retroalimentación ayuda a las personas a saber qué está pasando, descubrir qué pueden hacer a continuación, entender los resultados de las acciones y evitar errores.
• file-management.md — Gestión de archivos: Algunas apps pueden soportar documentos y archivos que las personas esperan gestionar en todo el sistema.
• focus-and-selection.md — Enfoque y selección: El enfoque ayuda a las personas a confirmar visualmente el objeto al que se dirige su interacción.
• foundations.md — Fundamentos: Comprende cómo los elementos de diseño fundamentales te ayudan a crear experiencias ricas.
• game-controls.md — Controles de juego: Los controles de juego precisos e intuitivos mejoran la jugabilidad y pueden aumentar la inmersión del jugador en el juego.
• gauges.md — Indicadores: Un indicador muestra un valor numérico específico dentro de un rango de valores.
• generative-ai.md — IA generativa: La IA generativa te permite mejorar tu app o juego con contenido dinámico y ofrecer funciones inteligentes que desbloquean nuevos niveles de creatividad...
• gestures.md — Gestos: Un gesto es un movimiento físico que una persona usa para afectar directamente un objeto en una app o juego en su dispositivo.
• getting-started.md — Primeros pasos: Crea una app o juego que se sienta como en casa en cada plataforma que soportes — web, móvil, escritorio y más.
• going-full-screen.md — Ir a pantalla completa: Los teléfonos, tabletas, escritorios y navegadores web ofrecen modos de pantalla completa que permiten a las personas expandir una ventana para llenar la pantalla, ocultando los controles del sistema...
• gyro-and-accelerometer.md — Giroscopio y acelerómetro: Los giroscopios y acelerómetros del dispositivo pueden proporcionar datos sobre el movimiento del dispositivo en el mundo físico.
• icons.md — Iconos: Un icono efectivo es un activo gráfico que expresa un solo concepto de maneras que las personas entienden al instante.
• image-views.md — Vistas de imagen: Una vista de imagen muestra una sola imagen — o en algunos casos, una secuencia animada de imágenes — sobre un fondo transparente u opaco.
• image-wells.md — Pozos de imagen: Un pozo de imagen es una versión editable de una vista de imagen.
• images.md — Imágenes: Para asegurarte de que tu arte se vea genial en todos los dispositivos que soportas, aprende cómo el sistema muestra el contenido y cómo entregar arte a la resolución adecuada...
• inclusion.md — Inclusión: Las apps y juegos inclusivos ponen a las personas primero priorizando la comunicación respetuosa y presentando contenido y funcionalidades de manera que todos...
• index.md — Directrices de diseño de interfaz: Estas directrices contienen orientación y mejores prácticas que pueden ayudarte a diseñar una gran experiencia en cualquier plataforma — web, móvil, escritorio,...
• inputs.md — Entradas: Conoce los diversos métodos que las personas usan para controlar tu app o juego e ingresar datos.
• keyboards.md — Teclados: Un teclado físico puede ser un dispositivo de entrada esencial para ingresar texto, jugar juegos, controlar apps y más.
• labels.md — Etiquetas: Una etiqueta es un fragmento de texto estático que las personas pueden leer y a menudo copiar, pero no editar.
• launching.md — Inicio: Una experiencia de inicio optimizada ayuda a las personas a comenzar a usar tu app o juego de inmediato.
• layout-and-organization.md — Diseño y organización: - Cajas
• layout.md — Diseño: Un diseño consistente que se adapta a diferentes tamaños de pantalla, orientaciones y configuraciones de multitarea ayuda a las personas a entender y disfrutar tu...
• lists-and-tables.md — Listas y tablas: Las listas y tablas presentan datos en una o más columnas de filas.
• live-viewing-apps.md — Apps de visualización en vivo: Al diseñar una app de visualización en vivo, prioriza el contenido y crea interacciones divertidas y fluidas que fomenten la inmersión en la experiencia de visualización en vivo...
• loading.md — Carga: La mejor experiencia de carga de contenido termina antes de que las personas se den cuenta.
• machine-learning.md — Aprendizaje automático: El aprendizaje automático permite que las apps y juegos aprendan de datos y patrones de uso, permitiéndote mejorar experiencias existentes y crear atractivas...
• managing-accounts.md — Gestión de cuentas: Cuando no crea una barrera innecesaria para tu experiencia, una cuenta puede ser una forma conveniente para que las personas accedan a su contenido y...
• managing-notifications.md — Gestión de notificaciones: Las notificaciones pueden proporcionar a las personas información oportuna e importante, ya sea que el dispositivo esté bloqueado o en uso.
• maps.md — Mapas: Un mapa muestra datos geográficos exteriores o interiores en tu app o en tu sitio web.
• materials.md — Materiales: Un material es un efecto visual que crea una sensación de profundidad, capas y jerarquía entre elementos de primer plano y fondo.
• menus-and-actions.md — Menús y acciones: - Vistas de actividad
• menus.md — Menús: Un menú revela sus opciones cuando las personas interactúan con él, lo que lo convierte en una forma eficiente en espacio para presentar comandos en tu app o juego.
• modality.md — Modalidad: La modalidad es una técnica de diseño que presenta contenido en un modo separado y dedicado que impide la interacción con la vista principal y requiere...
• motion.md — Animación: Las animaciones hermosas y fluidas dan vida a la interfaz, transmitiendo estado, proporcionando retroalimentación e instrucción, y enriqueciendo la experiencia visual...
• multitasking.md — Multitarea: La multitarea permite a las personas cambiar rápidamente de una app a otra, realizando tareas en cada una.
• navigation-and-search.md — Navegación y búsqueda: - Campos de búsqueda
• nearby-interactions.md — Interacciones cercanas: Las interacciones cercanas soportan experiencias en el dispositivo que integran la presencia de personas y objetos en el entorno cercano, usando proximidad...
• nfc.md — NFC: La comunicación de campo cercano (NFC) permite que los dispositivos a pocos centímetros entre sí intercambien información de forma inalámbrica.
• notifications.md — Notificaciones: Una notificación proporciona a las personas información oportuna y de alto valor que pueden entender de un vistazo.
• offering-help.md — Ofrecer ayuda: Aunque las experiencias más efectivas son accesibles e intuitivas, puedes proporcionar ayuda contextual cuando sea necesario.
• onboarding.md — Incorporación: La incorporación puede ayudar a las personas a comenzar rápidamente a usar tu app o juego.
• outline-views.md — Vistas de esquema: Una vista de esquema presenta datos jerárquicos en una lista desplazable de celdas organizadas en columnas y filas.
• page-controls.md — Controles de página: Un control de página (también llamado indicador de página o indicador de puntos) muestra una fila de imágenes indicadoras, cada una representando una página en una...
• panels.md — Paneles: En una app de escritorio, un panel típicamente flota sobre otras ventanas abiertas proporcionando controles, opciones o información suplementaria relacionada con...
• patterns.md — Patrones: Obtén orientación de diseño para soportar acciones, tareas y experiencias comunes de usuario.
• pickers.md — Selectores: Un selector muestra una o más listas desplazables de valores distintos que las personas pueden elegir.
• playing-audio.md — Reproducir audio: Las personas esperan experiencias de audio ricas que se ajusten automáticamente cuando el contexto cambia en el dispositivo.
• playing-haptics.md — Reproducir hápticos: Reproducir hápticos puede involucrar el sentido del tacto de las personas y llevar su familiaridad con el mundo físico a tu app o juego.
• playing-video.md — Reproducir video: Las personas esperan disfrutar de experiencias de video ricas en sus dispositivos, independientemente de la app o juego que estén usando.
• pointing-devices.md — Dispositivos apuntadores: Las personas pueden usar un dispositivo apuntador como un trackpad o ratón para navegar la interfaz e iniciar acciones.
• pop-up-buttons.md — Botones emergentes: Un botón emergente (también llamado desplegable o select en algunas plataformas) muestra un menú de opciones mutuamente excluyentes.
• popovers.md — Popovers: Un popover es una vista transitoria que aparece sobre otro contenido cuando las personas hacen clic o tocan un control o área interactiva.
• presentation.md — Presentación: - Hojas de acción
• printing.md — Impresión: Una app puede integrar la funcionalidad de impresión proporcionada por el sistema cuando tenga sentido, presentando opciones personalizadas de impresora y documento si es necesario...
• privacy.md — Privacidad: La privacidad es primordial: es crítico ser transparente sobre los datos y recursos relacionados con la privacidad que requieres y esencial protegerlos...
• progress-indicators.md — Indicadores de progreso: Los indicadores de progreso permiten que las personas sepan que tu app no se ha detenido mientras carga contenido o realiza operaciones largas.
• pull-down-buttons.md — Botones desplegables: Un botón desplegable muestra un menú de elementos o acciones que se relacionan directamente con el propósito del botón.
• rating-indicators.md — Indicadores de calificación: Un indicador de calificación usa una serie de símbolos gráficos dispuestos horizontalmente — por defecto, estrellas — para comunicar un nivel de clasificación.
• ratings-and-reviews.md — Calificaciones y reseñas: Las personas a menudo ven las calificaciones y reseñas de una app o juego antes de descargarlo.
• right-to-left.md — De derecha a izquierda: Soporta idiomas de derecha a izquierda como el árabe y...