Componentes de disposición¶
Resumen¶
Esta página describe los componentes reutilizables que forman la disposición de una app: la navegación (botón de acción principal, entradas, elemento para nuevos elementos y ajustes), el elemento de lista, el contenido con sus vistas y tamaños, y la barra lateral con sus pestañas de detalles, actividad y compartir. Está dirigida a quienes diseñan o desarrollan apps.
Fuente: documentación de Nextcloud, «developer_manual/design/layoutcomponents», versión 3ad9158, licencia CC BY 3.0; traducida y adaptada para APS Conecta Gestión.
Todas las apps de APS Conecta Gestión se construyen con componentes individuales reutilizables, por coherencia y eficiencia. Actualmente, estos componentes están escritos en Vue y se encuentran en el repositorio nextcloud-vue en Github, con la documentación disponible en la guía de estilo de los componentes Vue de Nextcloud.
Elemento de lista¶
Componente Vue de elemento de lista.
Los elementos de lista pueden usarse para mostrar una colección de elementos entre los que se puede seleccionar uno. Se ven elementos de lista en la lista de chats de la izquierda en Talk, así como en la lista de mensajes de Correo y en la lista de contactos de Contactos. Los elementos de lista suelen tener un avatar o un icono descriptivo, una línea principal y, opcionalmente, una línea secundaria. Un elemento de lista también puede contener:
un Menú de acciones con las acciones de uso habitual para ese tipo de elemento
una burbuja de contador: Talk, por ejemplo, usa un contador de mensajes no leídos
Contenido¶
La sección de contenido de la app ocupa la mayor parte del espacio de la pantalla y es el núcleo de lo que hace la app. El contenido de cada app es único, pero hay que asegurarse de que siga algunas reglas básicas, como la adaptabilidad, la accesibilidad y la compatibilidad con distintos idiomas, para que todo el mundo pueda usarlo. La disposición del contenido depende de lo que haga la app, ya que el contenido de casi todas las apps de APS Conecta Gestión tiene un aspecto distinto. Para el contenido de la app debe usarse el componente Vue appContent.
Vistas¶
Algunas apps ofrecen distintas vistas de su contenido para que las personas puedan elegir una preferencia, que debería recordarse automáticamente. Es importante pensar cuál debe ser la predeterminada y si conviene tener distintas vistas, ya que la mayoría de las personas no cambia la predeterminada.
Archivos (web, Android e iOS), Marcadores: vista de lista o vista de cuadrícula
Calendario: vista de mes, vista de semana, vista de día, vista de lista / agenda
Talk (web, Android e iOS): vista de orador y vista de cuadrícula en una llamada
El contenido es también la sección en la que se puede explicar rápidamente a las personas cómo empezar a usar la app, por ejemplo con un componente atómico Contenido vacío.
Tamaño¶
En las apps basadas en texto, como el chat, los correos y otros párrafos de texto, el ancho del contenido no debe superar cierto ancho, para facilitar la lectura. En APS Conecta Gestión Text, por ejemplo, el ancho está limitado a 650px, y lo hacemos de forma similar en Correo y Talk, aunque el tamaño de la pantalla sea mayor.
En cada elemento en el que se pueda hacer clic de la interfaz, asegurarse de que tenga un área de clic mínima de al menos 44px por 44px (48px en Android). Cualquier tamaño menor hará que la app sea inaccesible y difícil de usar en el móvil, ya que las personas usuarias podrían fallar al intentar tocar el elemento.
El espaciado entre los elementos de la app debe ser en múltiplos de 4px.
Barra lateral¶
Componente Vue de la barra lateral.
Los detalles de una entrada concreta del contenido, así como algunas acciones asociadas a ella, se muestran en la barra lateral derecha. En las apps que usan la barra lateral, esta solo se abre cuando hace falta. La barra lateral nunca se usa en la disposición de 3 columnas (navegación + lista + contenido). Contiene la información principal y, a veces, una vista previa del elemento seleccionado, así como un máximo de 3 pestañas posibles.
Las pestañas de uso habitual en la barra lateral son:
Detalles¶
Componente Vue de pestañas de la barra lateral.
La pestaña de detalles contiene información sobre la entrada a la que se refiere, que a menudo puede editarse mediante distintos campos de entrada. Los detalles que se incluyen aquí dependen de la app. Por ejemplo, la pestaña de detalles de la barra lateral de la app Calendario contiene información sobre el evento seleccionado, como la ubicación, la descripción y el estado. Ver también Campos de entrada en la sección de componentes atómicos para más detalles sobre los distintos campos de entrada que pueden usarse aquí.
Actividad¶
Los cambios importantes hechos en el elemento seleccionado, así como los comentarios que dejan las personas usuarias, se muestran en la pestaña de actividad. Estos detalles se muestran con la actividad más reciente arriba.
Si la app admite comentarios, el cuadro de entrada «Write comment» debe colocarse aquí para que quede bien integrado.
Si existe la posibilidad de restaurar versiones anteriores, puede integrarse mediante un menú de acciones de 3 puntos en cualquier actividad pasada.
Compartir¶
La pestaña de compartir permite a las personas usuarias compartir el elemento seleccionado con otras personas de distintas formas. Un elemento puede compartirse con usuarios o grupos concretos de la instancia simplemente seleccionando con quién se quiere compartir. Otra forma muy sencilla de compartir es mediante un enlace compartido, que opcionalmente también puede configurarse con la opción «Ajustes avanzados».