GoodBarber 4.5 – Gestiona el diseño de tu app

Este menú es totalmente dedicado a la cabecera de tu aplicación. Esta última contiene botones de acción, y sobre todo el título de tu aplicación.

La primera parte del menú concierne el icono Menú, presente en la cabecera para permitir al usuario de abrir el modo de navegación principal de la aplicación. Aquí puedes personalizar este icono y elegir su color.

Después, puedes manejar la visualización del título de tu aplicación. Este puede ser materializado por un texto sencillo, del cual puedes elegir la tipografía, el tamaño y el color.

También, puedes optar por un logo, e importar simplemente la imagen de tu elección en el formato 600 x 148 px. Una vez el título añadido, sólo te queda elegir su alineación centrada o a la izquierda.

También tienes la posibilidad de personalizar el fondo de tu cabecera, y varias opciones son posible:

- utilizar imágenes de tu elección, respetando los tamaños indicados para que sean perfectas sobre cualquier tipo de pantalla
 

Para ir más allá en la personalización de tu cabecera, y reflexionar hasta en los más pequeños detalles la experiencia de usuario procurada por tu app, la parte siguiente del menú te permite añadir enlaces en la cabecera que estarán posicionados a la derecha de esta última. Sólo tienes que seleccionar la destinación del enlace, el icono y el color. En el ejemplo de abajo, hemos decidido de añadir un enlace hacia el perfil de usuario y la página de contacto de la aplicación. Tu eliges en función de tu concepto. No olvides que puedes si lo deseas activar la opción “Mostrar el título del enlace” para que se muestra el título del enlace al lado de su icono en las versiones Tablet y desktop de tu aplicación.

Por fin, como para el icono Menú, puedes personalizar el icono Atrás en las páginas profundas de la aplicación.

Aquí puedes crear los primeros elementos que estarán vistos por tus usuarios.

Que sea por el icono o la pantalla de lanzamiento, dos opciones están disponible:
 

- utilizar el asistente de creación

- importar tus propias imágenes

En el ejemplo de abajo, hemos creado el icono de la aplicación gracias al asistente, y vas a ver que este proceso te permite crear tus elementos sin ninguna dificultad.

Para empezar, hay que ir directamente a la vista previa del icono y modificar el texto contenido en el icono, así como el título de la app, justo abajo que se mostrará en la pantalla de inicio de los dispositivos de tus usuarios.

Después, en el panel de la derecha, tendrás la posibilidad de modificar el diseño del icono eligiendo la tipografía, el color y los efectos a aplicar sobre el texto del icono. Por fin, sólo te queda personalizar el fondo de tu icono aplicando:

- un color unido

- un grado de color

- una imagen de tu elección a importar al formato indicado

Para la pantalla de lanzamiento, sin embargo, hemos elegido de mostrar la opción Custom, es decir el añadido directo de imagen. Para importar tu imagen, es muy sencillo: el panel de la derecha te indica todos los tamaños de imágenes necesarios para una visualización óptima de tu pantalla de lanzamiento sobre cualquier tipo de pantalla.

Aquí, vamos a entrar en la parte equivalente al menú Contenido que ya te presentamos. Encontrarás la lista de todas las páginas de tu aplicación al interior de las cuales podrás entrar para configurar cada opción de diseño.

En el ejemplo de abajo, hemos elegido mostrar la configuración del diseño de una página Artículo. Es posible diseñar varias partes de las páginas Artículo:

1/ La lista de artículos:

Aquí puedes elegir la plantilla de presentación de tu lista de artículos. Define los colores y tipografías utilizados, así como la información que aparece en la lista (miniatura, fecha de publicación, resumen del artículo, autor, etc).

Por fin, elige la miniatura a utilizar por defecto para tus artículos, su formato y su alineación.

2/ Los artículos:

Tal como para la lista de artículos, puedes elegir la plantilla de visualización, los colores y las tipografías utilizados.

Personaliza también la barra de herramienta mostrando o no las funcionalidades siguientes:

- Comentarios

- Compartir

- Tamaño de la tipografía

- Favoritos

- Paso al artículo siguiente

También tienes la posibilidad de editar el código HTML estructurando la plantilla de la página utilizando las balizas [TITLE], [DATE], [AUTHOR] y [CONTENT].

3/ Las categorías y los comentarios:

Si has activado la categorización de tus elementos, podrás personalizar aquí la manera en que tus usuarios verán estas categorías. Sólo hay que seleccionar el modelo de menú que deseas utilizar, y de elegir los colores a utilizar.

De la misma manera, puedes personalizar la apariencia de la página de comentarios desde este menú.

Te hablamos del tema hace unas semanas, el menú Diseño contiene también el menú Estilo Global que te permite gestionar el diseño general de tu app y también crear y guardar tus propios temas.

Por fin, no pierde la ocasión de configurar el modo de navegación de tu app que te presentamos aquí.