Composición y disposición+ de página
Descripción general
Las distintas composiciones y disposiciones de página proporcionan una base sólida para crear aplicaciones de manera eficiente. Garantizan la coherencia y la capacidad de ser responsive en los diferentes tipos de aplicaciones, lo que permite una composición de la interfaz de usuario perfecta. Los diseñadores y los desarrolladores pueden elegir entre nuestras composiciones y disposiciones de página y otros componentes de diseño de contenido y adaptarlos para satisfacer las necesidades específicas de la aplicación.
Al igual que los dibujos arquitectónicos que ilustran la forma, el tamaño y la disposición de una habitación, la composición y disposición de página define la estructura y la organización de una interfaz, lo que garantiza claridad y facilidad de uso.
Anatomía
- Encabezado: El encabezado permite una navegación coherente por las experiencias de la aplicación. Define la parte superior de cualquier página. Los encabezados son componentes contenedor. En otras palabras, contienen otros componentes para cumplir con un caso de uso específico.
- Subtítulo: Ubicado debajo del encabezado, el subtítulo proporciona contexto adicional o acciones relacionadas con el contenido principal de la página.
- Panel lateral: Organiza la estructura del contenido y proporciona contexto para orientar a los usuarios. Ocupa el lado izquierdo de la pantalla y se extiende verticalmente desde el encabezado hasta la parte inferior de la página.
- Panel lateral de herramientas: Se utiliza para acciones adicionales, comparación o contraste de información. Funciona como una superposición del espacio de trabajo o como un panel de empuje para alternar la configuración y los detalles.
- Pie de página: Sección permanente en la parte inferior de la página, que normalmente contiene enlaces legales, navegación secundaria o acciones de apoyo.
Soluciones de Jutro Design System
Jutro Design System proporciona múltiples componentes para el manejo de las composiciones y disposiciones de páginas y contenido, lo que facilita las tareas de diseño e implementación a través de una combinación de soluciones genéricas y específicas.
Componentes de composición y disposición de página
Los componentes de composición y disposición de página permiten a los diseñadores y desarrolladores comenzar a crear rápidamente sus aplicaciones, lo que garantiza una composición de interfaz de usuario uniforme y responsive en diferentes tipos de aplicaciones. Los equipos pueden elegir entre cinco componentes de composición y disposición de página individuales y adaptarlos para cumplir con los requisitos específicos de la aplicación, o pueden usar el componente AppFloorPlan que proporciona un conjunto predefinido de opciones.
AppFloorPlan.El uso de los componentes de composición y disposición de página requiere el diseño y la implementación de contenido para las diferentes secciones de la página, como el encabezado, los menús y el pie de página. Estos componentes también requieren que la aplicación maneje el enrutamiento de forma independiente. Sin embargo, el componente AppFloorPlan proporciona estos aspectos.
Evalúe las necesidades de su proyecto antes de tomar una decisión.
¿Cuál es la diferencia entre los componentes de composición y disposición individuales y AppFloorPlan?
| Función | Componentes de composición y disposición de página individuales | AppFloorPlan |
|---|---|---|
| Flexibilidad | Flexible, permite personalización | Rígido, estructuras y opciones predefinidas |
| Tematización | Totalmente basado en tokens, lo que garantiza la uniformidad y una tematización más sencilla | No basado en tokens |
| Separación de responsabilidades | Solo enfocado en aspectos de UX | UX y enrutamiento |
| Contenido | Sin contenido predefinido | Contenido predefinido con opciones de personalización: menús, elementos de encabezado, composición y disposición |
Componentes de composición y disposición de página individuales
Las composiciones y disposiciones de página son flexibles y están basadas en tokens, lo que permite la personalización y una adaptación más sencilla en diferentes pantallas. Cada componente de composición y disposición de página es completamente independiente del contenido que se muestra en él. Los componentes de composición y disposición de página incluyen:
Componente AppFloorPlan
El componente AppFloorPlan presenta una estructura más rígida con reglas y contenido predefinidos, como un encabezado y un menú de navegación, y también integra enrutamiento.
Auxiliares de composición y disposición de contenido
Los componentes auxiliares de composición y disposición de contenido facilitan la creación de diversas estructuras para la distribución de contenido. Mientras que los diferentes componentes de composición y disposición de página controlan secciones específicas de la página, como el encabezado o el pie de página, estos componentes auxiliares proporcionan soluciones genéricas para organizar el contenido dentro de la página, como la administración de columnas, filas y su contenido. A continuación, se detallan los auxiliares de composición y disposición de contenido.
FlexyFlexItem: Implementación de contenedores flexibles con opciones predefinidas.GridyGridItem: Implementación de contenedor de cuadrícula y elementos secundarios.GridLayout: Simplificación del componenteGrid.ColumnLayout: Componente de estructura de columnas.
Los auxiliares de composición y disposición de contenido son en su mayoría componentes orientados al desarrollador.
Ejemplos de composición y disposición de página
Jutro incluye varios ejemplos de composiciones y disposiciones de página. Estos ejemplos sirven como kits de inicio y referencias, ya que demuestran cómo puede utilizar las composiciones y disposiciones de página de manera eficaz. Considérelos variantes de página, como una página de aterrizaje o una vista de detalles. El propósito de estos ejemplos es proporcionarle una representación visual de cómo se vería una composición y disposición, lo que le ayudará a conceptualizar y ajustar su diseño antes de comenzar el trabajo real. En lugar de empezar desde cero, puede inspirarse en estos ejemplos y adaptarlos a sus necesidades, lo que hará que todo el proceso sea más eficiente y fluido.
