Diseña fragmentos interactivos

Hola, soy Ray y soy diseñador del equipo de diseño de Apple. Aprenderás a diseñar fragmentos interactivos. Estos son vistas compactas que muestran App Intents. Muestran información actual y ofrecen acciones rápidas directamente desde la app. Pueden aparecer desde cualquier lugar donde se admitan App Intents.

Esto incluye Spotlight, Siri y la app Atajos. Esta integración amplía el alcance y la utilidad de la app en el sistema. Los fragmentos aparecen claramente arriba en la pantalla, superpuestos al resto del contenido. Esto los hace útiles sin sacar a las personas de su contexto. Permanecen hasta confirmar, cancelar o deslizar.

Esto hace que los fragmentos sean una excelente forma de mostrar tareas e información simples y rutinarias de la app. Los fragmentos presentan diseños visuales que pueden reflejar la identidad única de tu app. También, admiten elementos como botones y mostrar información actualizada, agregando un nuevo nivel de interactividad a App Intents. Comenzaremos hablando sobre la apariencia del contenido y el diseño del fragmento. Luego, aprenderemos cómo hacer interacciones concisas y útiles. Finalmente, veremos cómo usar diferentes tipos de fragmentos, incluso resultados y confirmaciones. Los fragmentos están diseñados con App Intents para brindar experiencias rápidas e instantáneas, por lo que es importante que sea fácil de leer y comprender. Un aspecto clave para que sea fácil de leer es el tamaño de fuente. El texto es más grande que los valores predeterminados del sistema. Las letras más grandes llaman la atención sobre la información importante en el momento. Procura brindar suficiente espacio entre los elementos para evitar saturar el diseño. Al organizar el contenido en fragmentos, mantén márgenes consistentes del contenido en la vista para que el diseño sea claro. Esto organiza el fragmento para que las personas se concentren en lo importante. Puedes usar la API ContainerRelativeShape para garantizar que los márgenes respondan y se adapten a diferentes plataformas y tamaños de pantalla.

El uso de texto más grande significa espacio limitado. Evita incluir contenido de más de 340 puntos de altura, ya que necesitará desplazamiento y generará una fricción inesperada. En su lugar, el contenido debe ser conciso con solo la información más importante. Si se necesita más información, el fragmento puede vincularse a la vista relevante en la app para mostrar todo lo que se necesita. Al diseñar experiencias que aparecen por encima de otro contenido, los fondos vibrantes de la identidad visual de la app ayudan a que el fragmento se destaque. Pero a veces esto puede hacer que el contenido sea difícil de leer. Es importante comprobar el contraste cuando el fragmento se ve desde la distancia, al ir más allá de las relaciones de contraste estándar. Si el contenido es difícil de leer, intenta aumentar el contraste entre el contenido del diseño y el fondo. Esto ayudará a que el fragmento sea claro, incluso cuando se usen fondos vibrantes. Así puedes hacer que el fragmento sea fácil de leer y comprender. Ahora, hablemos de la interacción. Así, los fragmentos tienen control de estado y son procesables. Esto significa que puedes incorporar botones, para que las personas puedan realizar acciones simples y relevantes cuando usan el Intent. También pueden mostrar datos actualizados, reflejando la información más reciente de la app.

Para aprender a usar la interactividad, veamos este ejemplo de un Intent de seguimiento. Al poner un botón simple para agregar agua, la información es procesable y al mismo tiempo mantiene una experiencia ligera.

Los datos se actualizan con escala y desenfoque. Esto proporciona una respuesta visual clara para la acción. Al actualizar los datos dentro del fragmento para confirmar que la acción fue exitosa, las personas pueden generar confianza en tu App Intent para sus rutinas. También, el fragmento puede incluir varios botones y piezas de contenido actualizadas al mismo tiempo.

Por ejemplo, un fragmento del ecualizador puede mostrar configuraciones de audio actualizadas y proporcionar algunos ajustes preestablecidos. Procura que el fragmento ofrezca acciones claras y relevantes para complementar la tarea principal. Incluso sin interactividad, los fragmentos pueden animarse con la información más reciente de la app.

Hablemos de los tipos de fragmentos. Hay dos tipos de fragmentos: resultados y confirmaciones. Los fragmentos de resultados tienen información que es el resultado de una confirmación o que no requiere ninguna acción adicional. Como no hay tareas de seguimiento ni decisiones necesarias a partir de este fragmento, el único botón en la parte inferior de la vista es “Done”. Los tipos de resultados son ideales para fragmentos como comprobar el estado de un pedido. Veremos los fragmentos de confirmación. Usa confirmaciones cuando el Intent necesita una acción antes de mostrar el resultado. Por ejemplo, veamos este Intent de pedido de café. Si bien hay botones para cambiar la cantidad de espresso, el fragmento es un tipo de confirmación porque no se puede hacer hasta que se realice una acción. El verbo de acción en el botón deja claro qué sigue, como “pedir”. El verbo se puede cambiar a cualquiera de estas opciones preescritas, o puedes escribir las tuyas si no se ajustan al Intent.

Después de confirmar el pedido, como el café con leche con dos shots de espresso. El fragmento de resultado muestra el resultado de esa elección. Este patrón ayuda a las personas a comprender que iniciaron un Intent y luego lo completaron. Hablemos de cuándo mostrar el cuadro de diálogo: el cuadro de diálogo es lo que Siri dice sobre el App Intent. Es esencial para las interacciones que priorizan la voz. Por ejemplo, si alguien usa los AirPods y no mira la pantalla, aún podrá escuchar el cuadro de diálogo de un resultado o responder a una confirmación. Aunque el fragmento puede aparecer con un diálogo, intenta hacer que el fragmento sea comprensible por sí solo, incluso si el cuadro de diálogo no se muestra ni se escucha. El fragmento debe comunicar claramente el propósito del Intent sin depender del cuadro de diálogo. Esto ayuda a eliminar la redundancia y hace que el fragmento sea más intuitivo.

Usa las confirmaciones y los resultados para solicitar una acción o mostrar un resultado. Terminemos con lo que aprendimos… y lo que sigue. Diseñar fragmentos ligeros y rutinarios usando una apariencia agradable, interacciones simples y los tipos de fragmentos adecuados. Para más información sobre las novedades en la creación de App Intents para Atajos y Spotlight, consulta “Develop for Shortcuts and Spotlight with App Intents” y “Explore advances in App Intents”. ¡Queremos ver tus fragmentos! ¡Gracias!