por .

Tips a tomar en cuenta al diseñar para móviles si eres un web designer (Parte 2)

Pixmat Studios es una agencia de diseño y desarrollo móvil en Panamá y con el paso de estos años tenemos amplia experiencia en el desarrollo tanto para dispositivos Android como iOS. Con el paso del tiempo, la migración del diseño web al diseño móvil nos ha traído algunas enseñanzas, en esta serie de 3 artículos plasmamos algunos tips que deben tomarse en cuenta al diseñar para móvil, si eres un diseñador web.

En la primera parte del artículo, brindamos algunos tips para diseñar para Android.

En esta segunda parte de tips para diseñar para móviles, viniendo del diseño web, hablaremos del iOS Human Interface Guidelines de Apple, el cuál nos brinda mucha información relacionada al diseño para interfaces de iOS, el sistema operativo que provee la fuerza en los iPad y iPhone.

iOS: Human Interface Guidelines (HIM)

Con esto llegamos al punto que para diseñar para iOS: debemos asegurarnos de entender como funciona el dispositivo, para así crear una experiencia agradable para el usuario. Podemos siempre revisar otras aplicaciones, sobre todo las aplicaciones nativas, para tratar de simular el mismo look and feel en nuestra aplicación.

Algo que no debemos dejar atrás en que en cada aplicación que trabajemos, por mas estandarizada que sea, debemos agregar algo personalizado: allí podría entrar el diseño de un buen icono que represente a nuestra aplicación.

Tipos de barras

Hablemos sobre los elementos de uso dentro de nuestra aplicación en iOS.

iOS nos ofrece una amplia gama de elementos dentro de la interfaz que permiten al usuario mantener una vista estándar y uniforme de los controles de uso. Estos elementos son actualizados directamente si utilizamos los nativos, al actualizar la versión de nuestro sistema operativo lo que trae una ventaja considerable. Empecemos por las barras que nos especifican el comportamiento dentro de la aplicación.

Barra de estado (Status bar)

Esta barra es una muy importante ya que ella nos muestra el estado de nuestro dispositivo, por ejemplo nos indica si aún resta suficiente carga, la hora, si tiene conexión y demás. Podemos leer mas sobre ella en la sección Bars del HIM.

iOS tambien nos permite escoger entre tres difrentes estilos que son: negro, gris y translucido. Debemos considerar la paleta de colores de nuestra aplicación.

status bar
Status bar

Barra de navegación (Navigation Bar)

Es de suma importancia ya que nos permite manejarnos a través de la aplicación siguiendo una jerarquía de información. En ella se muestra el titulo (no debe contener más de un titulo) , el botón de retroceder (opcional, alineado a la izquierda) y además puedes agregar un botón extra (opcional, alineado a la derecha) con alguna otra acción, por ejemplo: guardar, cerrar, etc.

Navigation Bar
Navigation Bar

Esta barra al igual que la de estado puede ser de color translucido u algún otro color que coordine con nuestro diseño, esto con el fin de mantener la uniformidad en nuestro diseño.

Tab Bar

Esta barra nos presenta las diferentes vistas (sub-tareas) dentro de nuestra aplicación. Ejemplo, en CarteleraPanama nos muestra: Cine, Películas, Acerca.

Tab Bar iPad
Tab bar

Se mostrará un máximo de 5 pestañas u opciones a la vez, si existe más opciones se presentaran cuatro y una con la opción "more" donde se desplegaran las otras ventanas existentes. Como podemos observar een el barra de la app de CNN a conituación.

Tab bar con más opciones de las permitidas
Tab bar con más opciones de las permitidas.

En cuanto al estilo de esta barra es posible crear componentes personalizados, que vayan de acuerdo al diseño de nuestra aplicación. Para esto debemos tomar en cuenta el tamaño de los iconos y su resolución. Así, si no nos gusta la barra por defecto siempre podemos crear una barra de navegación propia que se vea como nosotros queramos.

Vista de la Tablas (Table Views)

Las tablas tienes la función de presentarnos datos a manera de listas. iOS nos permite trabajar con listas en dos estilos:

El primer estilo (Multiple Rows Table) es lo que nos permite categorizar datos de la lista, por ejemplo, en nuestra aplicación utilizamos este estilo por categorizar por cines.

El segundo estilo(Display Rows Table) es una lista simple de datos u opciones a escoger, la cual puede ir acompañada de algún icono característico.

Tipos de Tablas
Tipos de Tablas

Estas listas, o filas, permiten crear vistas completas dentro de la misma. Pueden contener cualquier cantidad de información que nuestra aplicación desee mostrar. Como la utilizada en CarteleraPanama para mostrar la lista de la películas, con una pequeña imagen de la película y otros datos puntuales de la película.

Tabla con Vistas en CarteleraPanama
Tabla con Vistas en CarteleraPanama

Estas listas pueden cambiar su apariencia en cuanto al color, además es posible incluir algunos elementos a la tabla con el fin de extender su funcionalidad (Estos elementos son sugeridos cuando la lista es desplegada en una única ventana) estos elementos son: check mark, disclosure indicator y detail disclosure button.

Elementos
Elementos

Iconos e imágenes

iOS se caracteriza por la calidad de sus iconos e imágenes y esto desempeña un papel fundamental en la comunicación con el usuario de toda aplicación, ya que es lo mínimo que esperan.

Al realizar el diseño de imágenes como de iconos debemos tomar en cuenta el tipo de pantalla en la se mostrarán, ya que se cuenta con la pantalla retina, que muestra altas resoluciones de nuestro contenido y una de resolución normal.

En las versiones de alta resolución (Retina Display) son más visibles las texturas y degradados; en cuanto a los iconos, su contorno es mucho más apreciable que en la resolución normal.

Para cada icono o imagen en que trabajemos podemos añadir su versión para Retina Display añadiendo @2x al final del nombre. Ejemplo: name@2x.png, todo esto con la finalidad de trabajar directo con los file de imagenes de iOS.

Directamente nuestra aplicación utilizará (utilizando el ejemplo anterior) name.png para pantallas que no sean Retina Display o de alta resolución y name@2x.png para aquellas pantallas de alta resolución, como los iPhone 4 y iPhone 4S.

Iconos de aplicación

Este icono será el logo de nuestra aplicación y estará presente en el Home de nuestro dispositivo, los tamaños referidos en pixeles serán:

  • Resolución normal: 57 x 57 px
  • Alta resolución: 114 x 114 px

No es necesario agregar un contorno, sombra o efecto metálico característico al icono, ya que este será agregado por defecto.

También es necesario proveer un fondo a nuestro icono, ya que si se hace transparente iOS agregará un fondo negro que podría afectar nuestro diseño.

Transformación de un ícono: original y final
Transformación de un ícono: original y final

Ahora, para representar nuestra aplicación en AppStore, debemos crear una versión más grande de nuestro icono, los tamaños serias los siguientes:

  • Resolución normal: 512 x 512 px
  • Alta resolución: 1024 x 1024 px

Iconos pequeños

Estos iconos son necesarios para identificar la aplicación dentro de una lista de resultados de búsqueda. Sus tamaños son:

  • Resolución normal: 29 x 29 px
  • Alta resolución: 58 x 58 px

Nota: los iconos deberán ser siempre en formato .png

Iconos para las barras

Si nuestra aplicación requiere de iconos personalizados, a la hora de diseñar debemos tomar en cuenta lo siguiente:

  • El uso de un color blanco puro con transparencia para la creación del icono.
  • No incluir sombras.
  • Diseñar un icono que no se confunda con los proporcionados por iOS.
  • Que sea fácil de entender para el usuario final.

Para los iconos de las Barra de Herramientas y Navegación los tamaños son:

  • Resolución normal: 20 x 20 px.
  • Alta resolución: 40 x 40 px.

Para los iconos del Tab Bar los tamaños son:

  • Resolución normal: 30 x 30 px.
  • Alta resolución: 60 x 60 px.

Imagen de Inicio (Splash Screen Image)

Esta es la imagen que verá en primera instancia nuestro usuario al interactuar con nuestra aplicación. La misma debe causar una buena impresión ya que es nuestra carta de presentación. Ademas esta imagen es la puesta en marcha para mejorar la experiencia del usuario.

En importante recalcar, que esta imagen es estática (al menos para aplicaciones básicas), y si contiene algún texto en la misma no se actualizará. Las medidas son las siguientes:

  • Resolución normal: 320 x 480 px.
  • Alta resolución: 640 x 960 px.

Hay que tomar en cuenta la orientación de nuestro dispositivo, que también varia en la dimensiones (lo alto reemplazado por lo ancho):

  • Resolución normal: 480 x 320 px.
  • Alta resolución: 960 x 640 px.

Y con esto terminamos la segunda parte de esta serie de artículos que estaremos publicando para orientar a nuevas personas que piensan diseñar para móvil.

En la siguiente parte de esta serie estaremos viendo los últimos puntos a tomar en cuenta al diseñar para móvil, enfocándonos en la estructura del contenido (y como difiere del diseño web), optimizaciones y otros detalles en general.

Recuerda que si puedes leer la primera parte de esta serie acá y puedes seguirnos en Facebook y Twitter para mantenerte actualizado.

Susan es la Arquitecta de Soluciones y co-fundadora de Pixmat. Susan se Ingeniera Electrónica y Telecomunicaciones.


Comentarios

Nosotros

Pixmat Studios es una agencia de diseño y desarrollo de soluciones tecnológicas basado en Ciudad de Panamá.


Twitter

Continuemos la conversación en las redes sociales. ¡Síguenos en Twitter!



Artículos Recientes


Tags


Notice: Array to string conversion in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38

Fatal error: Uncaught Error: Function name must be a string in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php:38 Stack trace: #0 /var/www/pixmatstudios.com/htdocs/site/snippets/blog_sidebar.php(42): tagcloud(Object(page)) #1 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #2 /var/www/pixmatstudios.com/htdocs/kirby/lib/helpers.php(66): tpl::loadFile('/var/www/pixmat...', Array, false) #3 /var/www/pixmatstudios.com/htdocs/site/templates/article.php(73): snippet('blog_sidebar') #4 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #5 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(25): tpl::loadFile('/var/www/pixmat...', Array, true) #6 /var/www/pixmatstudios.com/htdocs/kirby/lib/site.php(206): tpl::load('article', Array, true) #7 /var/www/pixmatstudios.com/htdocs/kirby/system.php(65): site->load() #8 /var/www/pixmatstudios.com/htdocs/index.php(71): require_once('/var/www/pixmat...') #9 {main} thrown in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38