Descripción general del diseñador de interfaz de usuario
Una explicación detallada de la interfaz de AppMaster UI Designer para crear aplicaciones web.
Después de crear correctamente la aplicación, se le dirigirá a la pestaña Diseñador de interfaz de usuario.
El UI Designer de AppMaster está diseñado para ser fácil de usar, lo que le permite crear impresionantes páginas de aplicaciones web sin esfuerzo.
A través de su interfaz intuitiva de arrastrar y soltar, puede diseñar páginas web y completarlas con contenido sin problemas, eliminando la necesidad de habilidades avanzadas de codificación.
El Diseñador de UI está dividido en cuatro secciones principales con las que los usuarios pueden interactuar:
- Barra de herramientas izquierda
- Panel superior
- Panel inferior
- Área de lienzo
- Panel de propiedades
Barra de herramientas izquierda
La barra de herramientas del lado izquierdo ofrece herramientas para estructurar su sitio web. Al hacer clic en los iconos situados en la parte superior de esta barra lateral, se revelarán los siguientes paneles:
- Lista de elementos de la interfaz de usuario
- Árbol de elementos
- Árbol de páginas
- Árbol de diseños
- Gerente de Activos
Lista de elementos de la interfaz de usuario (atajo: 1 )
La lista de elementos de la interfaz de usuario proporciona todos los elementos que se pueden agregar al área del lienzo arrastrándolos desde el panel.
Los elementos de la interfaz de usuario se organizan en categorías según su propósito, lo que facilita la navegación y la búsqueda del widget adecuado para su aplicación.
Para acceder rápidamente al elemento, puede utilizar la barra de búsqueda en la parte superior del panel.
Árbol de elementos (atajo: 2 )
Desde el Árbol de elementos , puede administrar y organizar todos los componentes ubicados en la página seleccionada de su aplicación web.
Aquí podrás interactuar con estos elementos:
- mover elementos entre árboles arrastrándolos,
- cambiar el nombre de los componentes,
- cambiar el estado de visibilidad de los elementos en el lienzo (ocultar/mostrar).
Utilice la barra de búsqueda en la parte superior del panel para el elemento de búsqueda rápida en el árbol.
Árbol de páginas (atajo: 3 )
El árbol de páginas le permite organizar y administrar las páginas de su sitio. Puede crear nuevas páginas o carpetas aquí.
En el árbol de páginas puedes duplicar o eliminar páginas o carpetas.
Utilice la barra de búsqueda en la parte superior del panel para la página o carpeta de búsqueda rápida en el árbol.
Lista de diseños (atajo: 4 )
El árbol de diseños ayuda a administrar los diseños de sus páginas. Al igual que en el árbol de páginas, puedes duplicar o eliminar diseños.
Utilice la barra de búsqueda en la parte superior del panel para ver el diseño de búsqueda rápida en el árbol.
Administrador de activos (atajo: 5 )
El Administrador de activos facilita la carga y organización de activos (como documentos, imágenes y animaciones) para el uso de su sitio web.
Todos los recursos que cargue durante el desarrollo se mantendrán en el Administrador de activos y se podrán reutilizar sin necesidad de volver a cargarlos.
También puedes eliminar cualquier activo que ya no necesites.
Barra superior
La barra superior proporciona un conjunto adicional de configuraciones de vista. Comenzando desde el lado izquierdo, al lado del botón de menú y extendiéndose hacia la derecha, tiene el siguiente conjunto de herramientas:
- Documento actual: muestra la página o el diseño en el que estás trabajando actualmente.
- Puntos de interrupción: los íconos de puntos de interrupción le permiten cambiar entre diferentes puntos de interrupción para obtener una vista previa y modificar cómo aparece su sitio en varios tamaños de dispositivos.
- Deshacer y Rehacer: los botones Deshacer y Rehacer le permiten revertir o volver a aplicar acciones que haya realizado en el Diseñador, como aplicar un estilo o eliminar un elemento. También están disponibles atajos: para deshacer una acción -
CRTL/⌘+Zy para rehacer una acción -CTRL/⌘+SHIFT+Z.
Barra inferior
El panel inferior le permite ampliar o cambiar el tamaño de la vista de la página.
En el lado izquierdo del panel, puede configurar una resolución de página personalizada estableciendo la altura y el ancho de su lienzo.
En el lado derecho, puedes controlar la escala:
- Acercar o alejar
- Establecer escala en porcentajes
- Establecer tamaño real
- Ajustar la ventana actual al área visible
Lienzo
El lienzo es su espacio de trabajo interactivo. Aquí es donde puede interactuar con los componentes de la página. Puede seleccionar elementos, reposicionarlos y editar contenido directamente en la página.
Además, puede copiar ( CRTL/⌘+C ) y pegar ( CRTL/⌘+V ) elementos entre páginas y aplicaciones o duplicar elementos dentro de la página actual ( CRTL/⌘+D ).
Panel de propiedades
El panel Propiedades en el lado derecho del Diseñador le permite personalizar la apariencia visual y el comportamiento del elemento, diseño o página seleccionados.
El panel Propiedades consta de 4 paneles principales:
- Panel de apariencia
- Panel de opciones adicionales (opcional)
- Panel de consultas de medios
- Panel de lógica empresarial
En el encabezado del panel, puede cambiar el nombre del elemento seleccionado haciendo clic en el nombre del elemento, leer la descripción o eliminar el elemento haciendo clic en el icono de la Papelera.
Panel de apariencia
El Panel de apariencia le permite acceder al contenido estático y a las propiedades mostradas del elemento seleccionado. Puede ingresar o seleccionar estos valores en sus campos correspondientes y los estilos se aplicarán inmediatamente a sus elementos en el lienzo.
Si no se selecciona ningún elemento en el lienzo, este panel mostrará la configuración de la página o diseño actual.
Panel de opciones adicionales
El Panel de opciones adicionales está destinado a elementos que requieren datos u opciones de configuración adicionales.
Puede configurar la fuente de datos o ingresar opciones manualmente según el componente seleccionado.
Panel de consultas de medios
El Panel de consultas de medios le permite anular las propiedades del elemento para cada punto de interrupción definido.
Panel de lógica empresarial
El Panel de lógica empresarial proporciona todos los activadores de un elemento y le permite establecer la interacción del elemento cuando se activa el activador.