Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Mobile Design

5 reglas fáciles para principiantes de diseño de UI móvil

by
Length:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

El uso de teléfonos inteligentes ha ido aumentando constantemente durante los últimos años, y más de un tercio de la población mundial actualmente tiene uno. Es comprensible que la creación de aplicaciones móviles también haya explotado, pero para diseñar una buena aplicación móvil existen varias reglas que debemos tener en cuenta, las cuales no se aplican al entorno de escritorio.

mobile ui

1. El tamaño lo es todo

Puede parecer obvio, pero el tamaño de las pantallas de los teléfonos inteligentes es la principal restricción de la interfaz de usuario (UI) cuando se crea una aplicación móvil. El tamaño afecta al diseño visual, la ergonomía e incluso el trayecto del usuario.

Junto con el tamaño de la pantalla, el hecho de que los usuarios de teléfonos inteligentes interactúen principalmente con los dedos y no con el cursor del mouse tiene un gran impacto en el diseño de la interfaz. Los diseñadores necesitan reconocer las «zonas de comodidad» y las áreas que deben evitarse al realizar llamados a la acción. La zona del pulgar es un área ampliamente definida, recorrida por el pulgar en la pantalla de un teléfono inteligente. Esta es el área más cómoda para tocar cuando se utiliza una mano.

the thumb zone
Fuente: usabilla.com

Consigue una ventaja con los kits de UI móvil y UX en Envato Elements

Si ayuda, Envato Elements actualmente aloja aproximadamente 2500 kits de UI y UX relacionados específicamente con diseños móviles. ¡Echa un vistazo y suscríbete para descargar todos los recursos que necesites!

Mobile UI and UX kits
UI móvil y kits de UX en Elements

De vuelta al tutorial ...

2. El espacio en blanco también lo es todo

El tamaño de la pantalla afecta al tamaño de los componentes que se desplegan y el espacio en blanco a su alrededor.

Toma, por ejemplo, el botón común. Los botones deben ser lo suficientemente grandes para ser vistos y poder hacer clic sin dificultad. Las pautas de qué tan grandes deben ser, son proporcionadas por todos los principales actores de la industria móvil (Apple, Android, incluso el equipo de la Consola de búsqueda de Google). El espacio en blanco también es vital. Al colocar dos botones uno al lado del otro, con espacio insuficiente entre los dos, existe el riesgo de que el usuario haga clic en el botón incorrecto, teniendo un impacto negativo en la experiencia de tu usuario.

buttonswhich is better
¿Cuál de estos dos es la mejor interfaz de usuario?

3. Consulta las directrices de la interfaz

Respecto al diseño de los diferentes elementos en una pantalla, es prudente favorecer un diseño vertical y simple, respetando las pautas (que ya hemos mencionado) establecidas por iOS y Android. Estas directrices explican qué hacer y qué no hacer para cada sistema operativo. Se componen de estilos gráficos (en este momento un diseño plano para iOS y material design para Android) y componentes comúnmente encontrados (botones, navegación, tipografía, tarjetas, pestañas).

common interfaces from iOS and Android
La interfaz de Instagram en iOS y Android respectivamente

Estas son las directrices que necesitarás; ¡marcarlas!

4. Utiliza un curso de acción

En aras de optimizar la experiencia del usuario, procura que cada pantalla contenga solo una pieza de información central y una acción. Piense en modo ascendente en la jerarquía de la información y el trayecto del usuario. Antes de iniciar la capa de diseño de la aplicación, es esencial invertir tiempo analizando las necesidades de los usuarios y su ruta a través de la aplicación.

ui

5. Considera dónde se utilizan los teléfonos inteligentes

Por último, no olvides tener en cuenta el entorno en el que se utilizará tu aplicación. Los teléfonos inteligentes se utilizan literalmente en todas partes: adentro y afuera, en el transporte público, caminando, corriendo ... Si tomamos el ejemplo de las variaciones en el brillo (interior frente a exterior), el contraste se vuelve aún más importante. ¡Asegúrate de que tu diseño sea legible adecuadamente a pleno sol! Consulta las herramientas de verificación de contraste como estas:

Conclusión

¡Es tu turno, sé creativo! Para más inspiración, echa un vistazo a estos resúmenes de kits de UI y UX:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.