Diseño UI: ¿Qué son los botones interactivos de InDesign?

El diseño UI (User Interface)o diseño de interfaces es aquel tipo de diseño enfocado en la creación de una interfaz, ya sea gráfica o desarrollada por tecnologías como HTML, CSS, YUI, jQuery, etc para un sitio o página web o aplicación para web, móvil o tablet.

Este diseño atiende al diseño de textos, contenidos, organización visual de los elementos, la consistencia del mismo y demás recursos gráficos.

InDesign es uno de los programas de diseño más utilizados para el diseño de interfaces de aplicaciones móviles y permite, entre otras funcionalidades, añadir interactividad al contenido mediante el uso de botones interactivos.

Utilizar estos elementos es de gran utilidad ya que hacen del diseño de la App sea más atractivo visualmente.

¿Qué son los botones interactivos?

Los botones se pueden crear a partir de una imagen, una caja de texto o un marco rectangular vacío. Una vez convirtamos una imagen o marco a botón, podremos añadirle acciones para realizar distintas interactividades.

Acciones como “Ir a página“, “Ir a a primera página“, mostrar y ocultar botones y formularios o controlar la reproducción de un elemento de sonido de alguna forma (reproducirlo, pausarlo, etc.) son sólo algunas de las múltiples interactividades que puedes añadir a tu proyecto App mediante este tipo de botones y que son compatibles con 480interactive

¿Cómo se usan?

De forma que puedas comprobar su facilidad de uso, aquí te contamos brevemente como crear un botón interactivo.

Paso 1: Convertir un elemento en botón

En este ejemplo, vamos a convertir un marco rectangular vacío en un botón. Para ello, debes insertar un marco rectangular usando el botón Crear marco rectangular y seguir los pasos:

1. Con el marco seleccionado, abre el panel Botones y formularios. Si tienes ese panel oculto puedes activarlo desde: Ventana ⇒ Interactivo ⇒ Botones y formulario.

2. Desde el panel, elige el tipo «Botón» o pulsa el botón «Convertir a botón» Convertir a boton (situado en la parte inferior de panel).

3. Ponle un nombre para identificarlo con facilidad.

Paso 2: Añadir una acción

Una vez creado el botón, le añadiremos una acción para definir la interactividad. Como ejemplo, la acción que vamos a añadir será la de abrir una página web. Sigue estos pasos desde el panel Botones y formularios.

1. Normalmente usaremos el evento «Al hacer clic» para que la acción se realice al tocar el elemento. Selecciona ese evento.

2.Pulsa el botón «Añadir acción» Anyadir acción

3.Elige la acción que deseas añadir. En este ejemplo elegimos «ir a URL».

Anyadir accion

4. Finalmente configuramos los parámetros de la acción que hemos añadido. Dependiendo de la acción, los parámetros a configurar serán distintos. En este ejemplo, podemos indicar la URL que queremos abrir en el campo «URL».

3-url

Cómo aplicar estos botones al diseño de mi App

Si quieres aprender a crear y aplicar botones interactivos al diseño de tu App, en nuestro centro de soporte encontrarás tutoriales personalizados con toda la información que necesitas, instrucciones para crearlos paso a paso y acceso al foro de soporte para consultar tus dudas.

Leave a Comment

Your email address will not be published. Required fields are marked *