13 Kits de Interfaz de Usuario para Hermosas Aplicaciones Móviles

Daniel Strongin Sacramento, CA

Daniel has been writing content for Envato Tuts + for the past 4 years for the Code, Music, & Business sections. He is also an avid electronic music producer and founder of UpstreamSquad, an online store dedicated to melodic electronic music producers. In his spare time, he loves to learn about finance, productivity, and is crazy about fitness.

Creación y depuración de interfaces de usuario para aplicaciones móviles (iOS y Android)

Creación y depuración de interfaces de usuario para aplicaciones móviles (iOS y Android)

Un componente principal de desarrollo de aplicaciones móviles es la vista: ya sea que esté siguiendo MVC, MVVM u otros patrones de diseño, su vista generalmente se considera como su interfaz de usuario. La forma en que los sistemas operativos móviles manejan las interfaces de usuario es muy diferente, y con el desarrollo multiplataforma incluido, hay una complejidad adicional y un conjunto de enfoques para el desarrollo de interfaces.

Echemos un vistazo a las diferentes formas de desarrollar interfaces de aplicaciones móviles para darle una mejor idea de cómo funcionan y qué enfoque podría ser mejor para su aplicación móvil. La buena noticia es que la mayoría de las plataformas de desarrollo tienen diferentes herramientas que ayudan a simplificar el desarrollo de la interfaz, pero la efectividad de hacerlo varía. Afortunadamente, la mayoría de los lenguajes de programación de desarrollo de interfaces comunes toman prestados los mismos conceptos entre sí, utilizando diferentes métodos para proporcionar una solución. Cubriré algunos de los enfoques comunes para el desarrollo de interfaces para aplicaciones móviles: desarrollo nativo de Android (en Android Studio / Eclipse / Intellij), desarrollo de iOS con Xcode, desarrollo multiplataforma en Visual Studio con Xamarin y multiplataforma híbrida desarrollo (HTML / CSS / Javascript).

Cómo maneja el sistema operativo Android las interfaces de usuario para aplicaciones nativas

El desarrollo nativo de Android generalmente se maneja a través de Android Studio IDE, que se basa en la plataforma Intellij IDEA de JetBrains. Si está acostumbrado a desarrollar en Eclipse o cualquiera de los IDE de JetBrains, se sentirá como en casa. He estado usando Intellij IDEA como IDE durante aproximadamente 3 años y puedo decir que actualmente es mi IDE favorito, incluso mejor que Visual Studio, en mi opinión (me gusta llamarlo Eclipse con esteroides). Android Studio está disponible para sistemas operativos Windows, Mac o Linux. Android Studio es completamente gratuito, pero si esa no es su taza de té, en realidad también puede usar otras opciones como Intellij IDEA o Eclipse.

Las interfaces de usuario de la aplicación de Android se crean utilizando XML para el diseño, mientras que la programación de Java maneja todo el trabajo pesado en el back-end. Me encanta o lo odio, XML es un formato de datos ampliamente aceptado, por lo que al menos la estructura ya será familiar para muchos desarrolladores (aunque no diría que eso resta mucho de la curva de aprendizaje). Los componentes de la interfaz están compuestos de elementos, que son datos XML que contienen atributos que ayudan a definir criterios como el diseño, el estilo y los eventos, como hacer clic o tocar el elemento. Si está familiarizado con cómo se crean los diseños con HTML y CSS, verá muchas similitudes entre eso y el diseño XML para las aplicaciones de Android. Es casi como un código HTML con propiedades CSS en línea, solo que con una sintaxis diferente. Hay algo genial recursos de diseño de Google que documentan cómo construir la interfaz de usuario para su aplicación de Android.

A su disposición también hay un conjunto de diferentes Vistas y Ver grupos, que continúan creciendo a medida que evoluciona el sistema operativo Android. Las vistas, como una vista de lista o cuadrícula, proporcionan un comportamiento estructural de diseño a sus elementos. ViewGroups son componentes nativos que pueden tener un comportamiento estándar o elementos de diseño que ayudan a mejorar la experiencia del usuario. Por ejemplo, el Visor de página ViewGroup permite a los usuarios deslizar horizontalmente para acceder a contenido diferente, similar a la cantidad de aplicaciones propias de Google. Estas adiciones son extremadamente valiosas para ahorrar tiempo y definitivamente deberían aprovecharse: no hay necesidad de reinventar la rueda, especialmente cuando los usuarios ya están acostumbrados a este tipo de comportamiento en otras aplicaciones.

Herramientas disponibles para el desarrollo de la interfaz de usuario de la aplicación de Android

Además de escribir sus propios diseños XML manualmente, también existe la herramienta Inventor de aplicaciones, que le permite arrastrar y soltar elementos y crear eventos sin tener que codificarlos. Esto realmente está dirigido a principiantes o personas que desean crear prototipos de una aplicación rápidamente, porque tiene mucha más flexibilidad para escribir manualmente su XML y la lógica de la aplicación. Otra opción que probablemente sería más útil para programadores experimentados es DroidDibujar, que le permite arrastrar y soltar elementos para la interfaz de usuario de la aplicación. No genera ninguna lógica de aplicación, lo cual está completamente bien si se siente cómodo escribiendo usted mismo.

Depuración de interfaces de usuario de aplicaciones de Android

Cuando se trata de depurar su interfaz, como con todas las aplicaciones nativas, habrá cierta frustración. los Visor de jerarquía es inmensamente útil para depurar el rendimiento y algo útil para la resolución de problemas de diseño. De hecho, la capacidad de ver el tiempo de sorteo y el rendimiento de elementos individuales es extremadamente valiosa.

También me gustaría señalar que el emulador estándar de Android Studio es extremadamente lento: para hacer la experiencia más llevadera, recomiendo configurar HAXM, un complemento que aprovechará la tecnología de virtualización de Intel. Si bien esto no es exactamente el desarrollo específico de la interfaz de usuario, una parte importante del desarrollo de la interfaz nativa es implementar la aplicación (ya sea en un dispositivo de forma remota o ejecutarla localmente en un emulador). Existe la opción de implementar la aplicación en un dispositivo real, lo que prefiero hacer a veces, ya que replicará el comportamiento natural de la aplicación; hubiera sido agradable si el rendimiento del emulador estándar fuera mejor. Si la implementación es lenta o inconveniente, entonces la experiencia es mucho más difícil para el desarrollador.

Cómo maneja el sistema operativo iOS las interfaces de usuario para aplicaciones nativas

Las interfaces de usuario de aplicaciones nativas de iOS se pueden implementar de 3 maneras diferentes, con storyboards (utilizando el Diseñador de interfaz), Nib archivoso escrito con código personalizado. A diferencia del desarrollo de aplicaciones de Android, la diferencia entre Storyboards y archivos Nib es bastante diferente. Los guiones gráficos permiten el diseño de interfaz visual, que genera XML. Los archivos Nib, por otro lado, se refieren a su tipo de archivo: que también tiene su propio editor visual, pero es el precursor de Interface Designer.

El desarrollo de aplicaciones móviles iOS solo se puede lograr usando el IDE de Apple, Xcode, que no es algo malo, ya que es un IDE excelente. Incluso si ha usado Xcode hace un tiempo, vale la pena volver a visitarlo si no lo ha probado en mucho tiempo. Constantemente agregan actualizaciones que introducen una serie de características nuevas y útiles.

En comparación con otros jugadores importantes como Visual Studio o Eclipse / Intellij IDEA, notará que Xcode es mucho más fluido al compilar y desplegar una vista previa de su aplicación móvil. Estas son las expectativas típicas para los productos de Apple: la estrecha integración con una menor fragmentación del software conduce a un rendimiento más fluido no solo para los usuarios finales sino también para los desarrolladores. Esta es probablemente una de las razones por las que algunas aplicaciones móviles se implementan por primera vez en iOS antes de Android, aparte del hecho de que Los usuarios de iOS tienen más probabilidades de realizar compras de aplicaciones.

Desarrollo de interfaz de usuario con iOS Interface Builder

La capacidad de arrastrar y soltar elementos de la interfaz de usuario puede o no ser útil para usted, dependiendo de su perspectiva de la funcionalidad, aunque para cualquier aplicación compleja con un equipo de desarrolladores, es mejor evitarla por completo. Independientemente de las preferencias, Xcode tiene esta funcionalidad integrada y, en mi opinión, le va bastante bien en comparación con la competencia.

Ahora, Xcode lleva algunos trucos más bajo la manga que sus competidores con sus interfaz del generador, que es el editor visual que utiliza Xcode que combina diferentes componentes para ayudar en el desarrollo. Este método utiliza Storyboards para generar diseños XML. Interface Builder funciona de manera similar a otros constructores de interfaz de usuario de arrastrar y soltar, pero tiene algunas adiciones que hacen que la experiencia sea un poco más fluida. Por ejemplo, ayudará a señalar dónde agregar la lógica de su aplicación para elementos, como agregar eventos de toque o deslizar. Otra adición bienvenida es su Diseño automático herramienta, que ayuda a ajustar dinámicamente objetos y texto para diferentes tamaños de pantalla y otros escenarios, como diferentes idiomas que requieren más espacio de texto.

Desarrollo de interfaz de usuario utilizando archivos Nib

A pesar de ser el diseñador de interfaz heredado de Xcode, los archivos Nib siguen siendo populares entre muchos desarrolladores porque es más fácil fusionar código dentro de los equipos de desarrollo que trabajan en los mismos archivos que con Storyboards. Interface Builder todavía es relativamente nuevo, así que espero que a medida que evolucione resuelva algunas de las problemas que los desarrolladores tienen con la herramienta.

Interfaces de usuario de codificación personalizada en iOS

Si bien puede editar o incluso escribir código desde cero en Xcode utilizando archivos Nib y el Creador de interfaces, también puede escribir su interfaz por su cuenta utilizando componentes de la interfaz de usuario del Marco UIKit. Este método permite la mayor flexibilidad para las interfaces dinámicas, pero requerirá más conocimiento técnico. Si bien no tener los mejores y más recientes kits de herramientas de Xcode para ayudarlo puede llevar un poco más de tiempo, incluso puede ser un campo de juego, ya que el control podría evitar menos problemas de depuración en el futuro.

Inspección y depuración de interfaces de usuario en iOS

Esta es un área donde Xcode realmente brilla: su depurador de vista gráfica (disponible en Xcode 6) es el mejor inspector de jerarquía de vistas que he visto. Mientras previsualiza su aplicación móvil, puede interactuar con un modelo 3D de la vista, que le permite ver e inspeccionar diferentes objetos que se superponen. El panel del navegador también le mostrará una lista anidada de todos los objetos dentro de sus vistas y propiedades de vista (como ancho, alto, etc.), así como diferentes estados (como activo, resaltado, etc.). ¡También puede realizar ediciones en vivo ejecutando comandos en la consola!

Cómo construir interfaces de usuario móviles multiplataforma híbridas se maneja con WebViews

Hay una gran variedad de plataformas de desarrollo multiplataforma híbridas disponibles para elegir, pero son esencialmente kits de herramientas que crearán el mismo producto final: HTML, CSS y JavaScript que se mostrarán en un WebView dentro de su aplicación móvil.

Dado que el desarrollo web front-end es un conjunto maduro de tecnologías que se ha adoptado ampliamente para las páginas web que se ven en los navegadores, no hay mucha curva de aprendizaje para que los desarrolladores web puedan comenzar.

Ahora, puede crear una aplicación móvil basada en WebView en cualquiera de las plataformas de desarrollo web, ya sea una solución multiplataforma como Phonegap / Ionic / Appcelerator / Sencha, o utilizando las plataformas IDE nativas como Xcode o Android Studio. Pero para beneficiarse realmente de estos marcos es qué tipo de características y soporte del sistema operativo obtendrá de ellos.

Una opción clara para el desarrollo de la interfaz de usuario de aplicaciones móviles híbridas es crear una Aplicación de página única (SPA), que actualizará su vista sin que WebView solicite constantemente datos innecesarios con cada vista de página. Los marcos de Javascript como AngularJS, ReactJS o KendoUI ayudan a lograr esto al agregar el enlace de datos para actualizar dinámicamente cuando su modelo cambia y viceversa.

Otra opción obvia para WebViews es el desarrollo web receptivo y El marco de Bootstrap de Twitter ha sido la opción más popular y de más larga duración para adaptar sitios web a dispositivos móviles. Ciertamente hay otros buenos, pero Bootstrap es muy recomendable y es un buen lugar para comenzar. La mayoría de los marcos de respuesta tendrán elementos de interfaz de usuario incorporados, como iconos, diseño de formularios y animaciones que permitirán un desarrollo mucho más rápido.

Probablemente uno de los mayores activos con el desarrollo de aplicaciones híbridas es la facilidad de las pruebas de desarrollador y la manipulación sobre la marcha de elementos HTML, propiedades CSS y depuración de javascript. Una de las mayores desventajas de la depuración de aplicaciones móviles nativas es lo difícil que es inspeccionar y depurar elementos, ya que son plataformas menos establecidas, no tienen tanta base sólida como sus contrapartes basadas en navegador.

Cómo se maneja la construcción de interfaces de usuario móviles multiplataforma nativas: ejemplo de Visual Studio / Xamarin

El desarrollo nativo multiplataforma se puede desarrollar con una amplia variedad de lenguajes y plataformas, desde Ruby, Java o C #. En este caso, examinaré cómo el desarrollo en Visual Studio y Xamarin manejan las IU de las aplicaciones móviles.

Antes de entrar en los detalles, me gustaría señalar que todas estas plataformas manejan la generación de UI de sus propias formas diferentes. A diferencia de la mayoría de las otras plataformas de aplicaciones nativas multiplataforma, Xamarin maneja el desarrollo de la interfaz de usuario de dos maneras completamente diferentes para elegir; ya sea individualmente para cada sistema operativo, como Xamarin.iOS y Xamarin.Android; o usando para usar una base de código para generar los elementos para cada sistema operativo.

Xamarin.iOS y Xamarin.Android

Comencemos con el enfoque Xamarin.iOS y Xamarin.Android. Si bien esto significa que habrá un trabajo adicional para adaptar las interfaces para cada plataforma, han creado herramientas para que coincidan con los activos de desarrollo nativos. Estas herramientas permiten una interfaz de usuario más natural para cada plataforma, y ​​en mi opinión permiten flexibilidad, y la mayoría de las veces causará menos frustraciones al depurar sus aplicaciones móviles. Por lo tanto, cuando se considera el desarrollo de la interfaz de usuario para Android e iOS en Xamarin, muchas de las observaciones sobre cómo se crean son relevantes. De hecho, para las aplicaciones de iOS, incluso puede usar Interface Builder de Xcode, si está en una Mac.

Xamarin.Forms

le permite crear su interfaz de usuario con XAML, que es un lenguaje de marcado muy similar a XML, solo con algunos ajustes para que funcione bien con los marcos de Microsoft; ha existido durante un tiempo para su uso con el marco de WPF. En lugar de crear interfaces de usuario independientes para Android e iOS, puede mantener una base de código y compilar ambas. Si bien existen algunas limitaciones con una interfaz de usuario compartida que causan obstáculos con interfaces más complejas, los formularios de Xamarin están mejorando a un ritmo rápido, uno que muchos (incluido yo mismo) esperamos que lo convierta en una opción mucho más viable para las aplicaciones móviles empresariales en el futuro.

Usando Visual Studio con Xamarin

Podría cubrir Xamarin solo, ya que es una plataforma en sí misma y se puede descargar gratis. Sin embargo, usar Visual Studio como su IDE trae algunos activos valiosos a la mesa y ha existido por mucho más tiempo que Xamarin. Por ejemplo, tendrá acceso a los paquetes NuGet, que permiten una fácil instalación de bibliotecas de terceros en sus proyectos, acceso a las herramientas de prueba de Visual Studio y la integración de Azure, por nombrar algunos.

Otra herramienta útil que tiene Visual Studio es Mezcla, que permite a los usuarios crear, modificar y dibujar objetos que se generarán en XAML. Además, puede crear eventos, animaciones y transiciones utilizando un editor de línea de tiempo; en realidad, recordaba mucho a la creación de aplicaciones flash, cuando eso todavía era algo popular. También transfiere las capacidades normales de editar las propiedades de los objetos seleccionados. Si bien Blend está realmente por delante de la curva en la generación de marcado y lógica de aplicación, al igual que con otras herramientas similares, el código generado aún no será tan adaptable para proyectos más grandes, por lo que probablemente sea más adecuado para aplicaciones pequeñas o prototipos.

Inspección y depuración de interfaces de usuario en Visual Studio

Desafortunadamente, en el momento de escribir este artículo, Xamarin Studio no tiene una solución integral para inspeccionar y depurar interfaces de usuario, aunque Inspector Xamarin se encuentra actualmente en una vista previa temprana y puede probarse bajo su propio riesgo (bueno, no es probable que rompa su proyecto, pero dependiendo de los errores que tenga, puede terminar con algunos dolores de cabeza). Por lo que parece, Xamarin Inspector parece que podría ser una herramienta sólida que implementa algunas de las características más impresionantes de otras plataformas, como el inspector de interfaz de usuario 3D que mencioné anteriormente que está disponible en Xcode.

Visual Studio tiene algunas herramientas excelentes para inspeccionar la jerarquía de vistas XAML, utilizando su Live Visual Tree y las herramientas Live Property Explorer. Si bien no es tan llamativo como la solución Xcode, ciertamente hace el trabajo. En uso, es muy similar a la inspección de elementos HTML en las herramientas de desarrollo de Internet Explorer: puede inspeccionar en vivo los elementos XAML dentro de su aplicación y ver / editar propiedades. La capacidad de ver y editar propiedades sobre la marcha es extremadamente útil y permite un desarrollo y creación de prototipos más rápidos de la interfaz.

Envolviendo cosas

Como puede ver, el desarrollo de la interfaz de usuario para aplicaciones móviles varía según el sistema operativo que esté desarrollando. Para el desarrollo de aplicaciones nativas, tanto Android como iOS pueden compilar vistas en XML, pero tienen muchas diferencias con respecto a los controles y objetos nativos.

Escribí sobre muchas de las diferentes capacidades de plataformas e IDEs para diseñar y construir gráficamente la lógica de la aplicación. Actualmente, este método de desarrollo no es tan popular para aplicaciones grandes como escribir código personalizado debido a las limitaciones que impone, a menos que esté creando un prototipo. Creo que este podría ser el futuro del desarrollo de aplicaciones móviles una vez que la tecnología madure más. En este momento, mi opinión es que Visual Studio y Xamarin son líderes en este campo. Obviamente, es atractivo poder construir para sistemas operativos Windows, iOS y Android con un IDE potente como Visual Studio y generar interfaces y lógica de aplicaciones con un diseñador visual.

Otro tema que cubrí fue la diferencia en la depuración de interfaces de usuario en plataformas y sistemas operativos. La depuración siempre ha sido un desafío para el desarrollo de interfaces para aplicaciones móviles, incluida la inspección y la creación de diseños. Todas las funciones de depuración cubiertas en este artículo son desarrollos en los últimos 1-2 años, por lo que parece que esta es una gran prioridad para los fabricantes de plataformas de aplicaciones móviles. El desarrollo híbrido con HTML / CSS / Javascript es el más fácil de administrar a este respecto, simplemente porque los idiomas y las herramientas han existido durante tanto tiempo.

Este artículo no se trata realmente de elegir una plataforma o sistema operativo para desarrollar interfaces basadas en cuál es el mejor para su proyecto; definitivamente hay factores decisivos mucho más importantes. Me resulta útil comprender las diferencias entre el manejo de las interfaces del sistema operativo, las fortalezas y debilidades de las plataformas de desarrollo, y algunos de los desafíos con las interfaces de depuración.

Si este artículo le ha resultado útil, le recomiendo consultar algunos de nuestros otros artículos completos sobre planificación de aplicaciones móviles, los pros y los contras del desarrollo de aplicaciones híbridas o el depuración de aplicaciones híbridas de Android.

Desarrollo de interfaz de usuario en un contexto mobile

El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado. Los dispositivos táctiles modifican nuestra forma de comunicarnos e interactuar con la web y las aplicaciones móviles.

Mobile first es una filosofia de trabajo, un concepto que prioriza el diseño y desarrollo en los dispositivos móviles. Se trata de pensar el contexto en el que nuestros contenidos van a ser consumidos para mejorar la usabilidad y la experiencia de usuario.