Configuraciones visuales de la interfaz de usuario de PDV

En este artículo se proporciona información sobre los diseños de pantalla para las experiencias de punto de venta (POS) de Dynamics 365 Commerce.

Puede configurar la interfaz de usuario (UI) de Microsoft Dynamics 365 Commerce punto de venta (POS) mediante una combinación de perfiles visuales y diseños de pantalla que asigne a tiendas, registros y usuarios. Este artículo ofrece información general relativa a esas opciones de configuración.

La siguiente ilustración muestra las relaciones entre las distintas entidades que comprenden los aspectos configurables de la IU del sistema PDV.

Captura de pantalla del diseño de las entidades de la pantalla del POS.

Perfil visual

Asigne perfiles visuales a los registros. Estos perfiles especifican los elementos visuales que son específicos del registro y que se comparten entre los usuarios. Cada usuario que inicia sesión en el registro ve el mismo tema, diseño, colores e imágenes.

Captura de pantalla de la pantalla de bienvenida de POS con tema claro.

Captura de pantalla de la transacción POS con tema oscuro.

• Número de perfil – El número del perfil es el identificador exclusivo del perfil visual.
• Descripción : especifique un nombre significativo que ayude a identificar el perfil correcto para su situación.
• Tema : seleccione entre los temas de la aplicación Claro y Oscuro . El tema afecta a los colores de fuente y de fondo en toda la aplicación.
• Color de acento: el POS usa el color de acento para diferenciar o resaltar elementos visuales específicos, como azulejos, botones de comando e hipervínculos. Normalmente, estos elementos se pueden accionar.
• Color del encabezado : configure el color del encabezado de página para cumplir los requisitos de personalización de marca del distribuidor.
• Combinación de fuentes : seleccione entre las combinaciones de fuentes Estándar y Grande . El esquema de fuente afecta el tamaño de fuente en toda la aplicación. La selección predeterminada es Estándar.
• Mostrar siempre las etiquetas de la barra de aplicación : al activar esta opción, el texto de la etiqueta siempre está visible en los botones de la barra de la aplicación.
• Diseño : seleccione entre los diseños centrados y correctos . El diseño afecta la alineación del cuadro de inicio de sesión en la pantalla de inicio de sesión. La selección predeterminada es Centrado.
• Mostrar fecha y hora : al activar esta opción, la fecha y hora actuales se muestran en el encabezado POS y en la pantalla de inicio de sesión.
• Teclado : seleccione entre el teclado predeterminado del sistema operativo y el panel Mostrar número para especificar el teclado predeterminado que se usa para la entrada en la pantalla de inicio de sesión. El panel numérico es un teclado virtual que se usa principalmente para dispositivos basados en la entrada táctil. La selección predeterminada es Predeterminado para el teclado del sistema operativo.
• Imagen del logotipo: especifique una imagen del logotipo que se mostrará en la pantalla de inicio de sesión. Use una imagen que tenga un fondo transparente. Mantenga el tamaño del archivo lo más pequeño posible, ya que el comportamiento y el rendimiento de la aplicación pueden verse afectados cuando se almacenan y cargan archivos grandes.
• Fondo de inicio de sesión : especifique una imagen de fondo para la pantalla de inicio de sesión. Mantenga el tamaño del archivo de las imágenes de fondo lo más pequeño posible.
• Fondo : especifique una imagen de fondo usada en lugar del color del tema sólido en toda la aplicación. En cuanto a las imágenes de fondo para la pantalla de inicio de sesión, mantenga el tamaño del archivo lo más pequeño posible.

Ejecute el trabajo de programación de distribución 1090 (Registros) para sincronizar las configuraciones de perfil visual más recientes con la base de datos del canal.

Diseños de pantalla

Las configuraciones del diseño de pantalla determinan las acciones, el contenido y la posición de los controles de la interfaz de usuario en la pantalla de Bienvenida del PDV y en la pantalla Transacción.

Captura de pantalla de la vista de diseño de pantalla de POS.

• Pantalla de bienvenida – En la mayoría de los casos, la pantalla de bienvenida es la página que verán los usuarios la primera vez que inicien sesión en el PDV. La pantalla de bienvenida puede constar de una imagen de marca y de cuadrículas de botones que proporcionan acceso a las operaciones del PDV. Normalmente, las operaciones que no son específicas de la transacción actual van en esta pantalla.

  Captura de pantalla de la pantalla de bienvenida de POS.

• Pantalla de transacción – La pantalla Transacción es la pantalla principal del PDV para procesar transacciones de venta y pedidos. Configure el contenido y el diseño mediante el diseñador de diseño de pantalla.

  Captura de pantalla de la pantalla Transacción de POS.

• Pantalla de inicio predeterminada – Algunos minoristas prefieren que los cajeros vayan directamente a la pantalla Transacción después de iniciar sesión. La configuración Pantalla de inicio predeterminada le permite especificar la pantalla predeterminada que aparece después de iniciar sesión para cada diseño de pantalla.

Asignación

Asigne diseños de pantalla en el nivel de almacén, registro o usuario. La asignación del usuario anula las asignaciones del registro y tienda, y la asignación del registro anula la asignación de la tienda. En un escenario sencillo en el que todos los usuarios usan el mismo diseño, independientemente del registro o rol, establezca el diseño de pantalla solo en el nivel de almacén. Asigne diseños cuando determinados registros o usuarios requieran diseños especializados.

En función del nivel que asigne los diseños de pantalla, ejecute los trabajos de programación de distribución 1070 (configuración de canal), 1090 (registros) y 1060 (personal) para sincronizar las configuraciones de diseño de pantalla más recientes con la base de datos del canal.

Tamaños de diseño

La mayoría de los aspectos de la interfaz de usuario del sistema de punto de venta (POS) son adaptables. El diseño cambia automáticamente el tamaño y se ajusta en función del tamaño y la orientación de la pantalla. Sin embargo, debe configurar la pantalla de transacción del POS para cada resolución de pantalla que prevé.

Al iniciar, la aplicación del PDV selecciona automáticamente el tamaño de diseño más cercano que está configurado para el dispositivo. Un diseño de pantalla también puede contener configuraciones para los modos horizontal y vertical, y para dispositivos compactos y de tamaño completo. Por lo tanto, es posible asignar usuarios a un único diseño de pantalla que sea compatible con diversos tamaños y tipos de dispositivos utilizados en la tienda.

Captura de pantalla de los tamaños de diseño de POS.

• Nombre : escriba un nombre descriptivo para identificar el tamaño de la pantalla.

• Tipo de diseño – La aplicación de PDV puede mostrar su interfaz de usuario en distintos modos para ofrecer la mejor experiencia del usuario en un dispositivo determinado.

  • Modern POS – Completo – Los diseños completos suelen emplearse mejor para pantallas más grandes como monitores de escritorio y tabletas. Puede seleccionar los elementos de la interfaz de usuario que desea incluir, especificar el tamaño y la posición de esos elementos y configurar sus propiedades detalladas. Los diseños completos admiten la configuración vertical y horizontal.
  • Modern POS – Compacto – Los diseños compactos suelen ser mejores para teléfonos y tabletas pequeñas. Las posibilidades de diseño en los dispositivos compactos son limitadas. Puede configurar las columnas y los campos para los paneles de totales y de recepción. Algunas operaciones que necesitan resoluciones de pantalla más altas, como informes y administración de inventario, no se admiten en el diseño compacto.

• Width/Height – Estos valores representan el tamaño efectivo de la pantalla, en píxeles, que se espera para el diseño. Recuerde que algunos sistemas operativos utilizan una escala para pantallas de alta resolución.

Captura de pantalla de la página de información de la sesión POS que muestra el diseño de pantalla que está cargado actualmente, el tamaño del diseño y la resolución de la ventana de la aplicación.

Cuadrículas de botones

Para cada tamaño de diseño de un diseño de pantalla, puede configurar y asignar cuadrículas de botones para la pantalla de bienvenida de PDV y la pantalla Transacción. El sistema establece automáticamente cuadrículas de botones para la pantalla de bienvenida de izquierda a derecha, utilizando el número más bajo (pantalla de bienvenida 1) al número más alto.

En Diseños full POS, se especifica la ubicación de las cuadrículas de botones en el diseñador de diseños de pantalla.

En los diseños de POS compactos, el sistema coloca automáticamente las cuadrículas de botones de arriba a abajo, utilizando el número más bajo (pantalla de transacción 1) al número más alto. Puede acceder a ellos en el menú Acciones .

Captura de pantalla de cuadrículas de botones de diseño compacto.

Imágenes

Para cada tamaño de diseño de un diseño de pantalla, puede especificar imágenes para incluirlas en la interfaz de usuario del sistema PDV. Para diseños full POS, especifique una sola imagen para la pantalla de bienvenida. En la izquierda aparece una imagen como el primer elemento de la interfaz de usuario. En la pantalla Transacción , use imágenes como imágenes de pestaña o como logotipo. Los diseños de PDV compactos no utilizan estas imágenes.

Diseñador de pantalla

El diseñador de pantalla le permite configurar diversos aspectos de la pantalla Transacción de PDV para cada tamaño de diseño, en modos horizontal y vertical, y para los diseños completo y compacto. El diseñador de pantalla emplea la tecnología de implementación ClickOnce para descargar, instalar e iniciar la última versión de la aplicación cada vez que los usuarios acceden a ella. Asegúrese de comprobar los requisitos del explorador para ClickOnce. Algunos exploradores, como Google Chrome, requieren extensiones.

Diseñador completo

El diseñador de diseño completo le permite arrastrar controles de interfaz de usuario a la pantalla de Transacción del POS y configurar la configuración de esos controles.

Captura de pantalla del diseñador de disposición completa de POS en modo horizontal.

• Importar diseño/Exportar diseño – Puede exportar e importar diseños de pantalla de PDV como archivos XML, de manera que pueda volver a utilizarlos y compartirlos con facilidad entre entornos. Importar diseños de diseño para los tamaños de diseño correctos. De lo contrario, puede que los elementos de interfaz de usuario no se ajusten correctamente en la pantalla.

• Horizontal/Vertical – Si el dispositivo de PDV permite a los usuarios cambiar entre los modos horizontal y vertical, debe definir un diseño de pantalla para cada modo. El PDV detecta automáticamente la rotación de la pantalla y muestra el diseño correcto.

• Cuadrícula de diseño – El diseñador de PDV emplea una cuadrícula de 4 píxeles. Los controles de la interfaz de usuario "se ajustan" a la cuadrícula para ayudarle a alinear correctamente el contenido.

• Zoom del diseñador – Puede acercar o alejar la vista de diseñador para ver mejor el contenido en la pantalla de PDV. Esta función resulta útil cuando la resolución de pantalla en el sistema PDV difiere significativamente de la resolución de la pantalla que se utiliza en el diseñador.

• Mostrar/ocultar barra de navegación – Para diseños de PDV completos, puede seleccionar si la barra de navegación izquierda es visible en la pantalla Transacción. Esta función resulta útil para pantallas que tiene una resolución más baja. Para establecer la visibilidad, haga clic con el botón derecho en la barra de exploración del diseñador, y active o desactive la casilla de verificación Siempre visible. Si la barra de navegación está oculta, los usuarios del PDV pueden seguir teniendo acceso mediante el menú de la parte superior izquierda.

  Captura de pantalla de la barra de navegación Mostrar u ocultar.

• Controles de PDV – El diseñador de PDV admite los siguientes controles. Puede configurar muchos controles haciendo clic con el botón derecho y usando el menú contextual.

  Captura de pantalla de los controles de la interfaz de usuario de POS.

  • Teclado numérico – El teclado numérico es el mecanismo principal para la entrada de usuario en la pantalla Transacción del PDV. Puede configurar el control para que se muestre el teclado numérico completo. Esta opción es ideal para dispositivos con pantalla táctil. De forma alternativa, puede configurarla para que se muestre solo el campo de entrada. En este caso, se utiliza un teclado físico para la entrada. Los ajustes del teclado numérico están disponibles solo en los diseños completos. Para diseños compactos, el teclado numérico completo siempre se muestra en la pantalla Transacción.
  • Panel de totales – Puede configurar el panel de totales en una o dos columnas para mostrar valores como el recuento de líneas, el importe de descuento, los gastos, el subtotal y los impuestos. Los diseño compactos solo admiten una única columna.
  • Panel de recepción – El panel de recepción contiene las líneas de ventas, las líneas de pago y la información de entrega para los productos y servicios que se procesan en el PDV. Puede especificar columnas, anchos y posiciones. En diseños compactos, también puede configurar información adicional que aparece en la fila debajo de la línea principal.
  • Tarjeta de cliente – La tarjeta del cliente muestra información sobre el cliente que está asociado a la transacción actual. Puede configurar la tarjeta del cliente para que se oculte o muestre la información adicional.
  • Control de fichas – Puede agregar el control de fichas a un diseño de pantalla y, a continuación, colocar otros controles como el teclado numérico, la tarjeta de cliente o las cuadrículas de botones, dentro de la ficha. El control de fichas es un contenedor que le ayuda a introducir más contenido en la pantalla. El control de fichas solo está disponible en los diseños completos.
  • Imagen – Puede usar el control de imagen para mostrar el logotipo de la tienda u otra imagen de marca en la pantalla Transacción. El control de imagen solo está disponible en los diseños completos.
  • Productos recomendados - Si el control de productos recomendados está configurado para el entorno, muestra las sugerencias de productos del aprendizaje automático.
  • Control personalizado – El control personalizado actúa como un marcador de posición en el diseño de pantalla y le permite reservar espacio para el contenido personalizado. El control personalizado solo está disponible en los diseños completos.

Diseñador de diseño compacto

Al igual que el diseñador de diseño completo, el diseñador de diseño compacto le permite configurar el diseño de pantalla de PDV para teléfonos y tabletas pequeñas. Sin embargo, el diseño en sí es fijo. Puede configurar los controles en el diseño haciendo clic con el botón derecho y usando el menú contextual. Sin embargo, no puede usar la función de arrastrar y colocar para contenido adicional.

Captura de pantalla del diseñador de diseños compactos.

Diseñador de cuadrícula de botones

El diseñador de cuadrículas de botones le permite configurar cuadrículas de botones que puede usar en la pantalla de bienvenida POS y la pantalla Transacción para diseños completos y compactos. Puede usar la misma cuadrícula de botones entre diseños y tipos de diseño. Al igual que el diseñador de pantalla, el diseño de cuadrícula de botones emplea la tecnología de implementación ClickOnce para descargar, instalar e iniciar la última versión de la aplicación cada vez que los usuarios acceden a ella. Asegúrese de comprobar los requisitos del explorador para ClickOnce. Algunos exploradores, como Google Chrome, requieren extensiones.

Captura de pantalla del diseñador de cuadrículas de botones.

• Nuevo botón : seleccione esta opción para agregar un botón nuevo a la cuadrícula de botones. De forma predeterminada, los nuevos botones aparecen en la esquina superior izquierda de la cuadrícula. Sin embargo, puede organizar los botones arrastrándolos en el diseño.

  Importante

  El contenido de la cuadrícula de botones se puede superponer. Cuando organice botones, asegúrese de que no oculten otros botones.

• Nuevo diseño : seleccione esta opción para configurar automáticamente un diseño de cuadrícula de botones especificando el número de botones por fila y columna.

• Propiedades de botón – Puede configurar las propiedades del botón haciendo clic con el botón derecho en el botón y usando el menú contextual.

  Captura de pantalla de las propiedades de la rejilla de botones.

  • Acción: en la lista de operaciones POS aplicables, seleccione la operación que invoca el botón cuando se hace clic en el POS.

    Para la lista de operaciones de PDV admitidas, consulte Operaciones del punto de ventas (PDV) en línea y sin conexión.

  • Parámetros de acción - Algunas operaciones POS usan parámetros adicionales cuando se invocan. Por ejemplo, para la operación Agregar producto, los usuarios pueden especificar el producto que desea agregar.

  • Texto del botón – Especifique el texto que aparece en el botón del PDV.

  • Ocultar texto del botón – Utilice esta casilla de verificación para ocultar o mostrar el texto del botón. El texto del botón suele estar oculto para botones pequeños que solo muestran un icono.

  • Tooltip: especifique el texto de ayuda adicional que aparece cuando los usuarios pasan el ratón sobre el botón.

  • Tamaño en columnas/Tamaño en filas – Puede especificar lo alto y ancho que es el botón.

    Captura de pantalla de tamaños de botón POS en filas y columnas.

  • Fuente personalizada – Cuando seleccione la casilla de verificación Habilitar fuente personalizada para PDV, puede especificar una fuente distinta de la fuente predeterminada del sistema para el PDV.

  • Tema personalizado – De forma predeterminada, los botones de PDV emplean el color de acento del perfil visual. Al activar la casilla Usar tema personalizado , puede especificar colores adicionales.

    Nota

    La aplicación Store Commerce y Store Commerce para web solo usan los valores Color de fondo y Color de fuente .

  • Imagen de los botones – Los botones pueden incluir imágenes o iconos. Seleccione entre las imágenes disponibles que se especifican en Venta minorista y comercio Configuración de canal Configuración de PDV PDV Imágenes.

Captura de pantalla de la cuadrícula de botones de ejemplo en el POS.

Recursos adicionales

Instalar el diseñador de punto de venta (PDV) de Retail