Tecnologías de interfaz móvil explicadas para diseñadores de productos | Oriol Banús | abril 2022

Vistas: 35
0 0
Tiempo de lectura:5 Minutos, 27 Segundos
Desarrollo de un lenguaje de codificación.
Desarrollo de un lenguaje de codificación.

El diseño de la interfaz de usuario está fuertemente influenciado por el lenguaje de la interfaz para el que se desarrolla el diseñador del producto. Es extremadamente importante conocer los conceptos básicos del idioma antes de comenzar a trabajar en un proyecto.

Hace algún tiempo, cuando comencé mi carrera como diseñador de UI/UX, me abrumaba cuando escuchaba sobre lenguajes o tecnologías de interfaz para crear interfaces de usuario para dispositivos móviles o de escritorio. No sabía acerca de las diferentes capacidades de cada uno, y no tenía idea de que el plan de diseño básico es diferente según el lenguaje para el que estés desarrollando.

El propósito de este artículo es explicar los conceptos básicos de los marcos front-end móviles más comunes; este conocimiento lo ayudará a comprender cómo diseñar para cada uno de los marcos.

Las tres herramientas e idiomas más importantes a tener en cuenta son la herramienta iOS xCode y el lenguaje Swift, la herramienta Android Studio y el lenguaje Kotlin, y el lenguaje React Native.

Desarrollador de hombre que ejecuta el software xcode y el simulador ios
Desarrollador de hombre que ejecuta el software xcode y el simulador ios

Apple llamó a iOS un sistema operativo móvil que se ejecuta en el iPhone o iPad. La empresa con sede en Cupertino proporciona a todos los desarrolladores las herramientas y los recursos necesarios para crear aplicaciones para iOS. Un desarrollador de iOS tiene la capacidad de crear aplicaciones utilizando lenguajes nativos como nosotros. Swift u Objective-C o utilizar lenguajes de terceros como React Native o Xamarin.

Para crear una aplicación para iOS o Mac, solo necesita una Macintosh y la última versión código x. Para crear aplicaciones, la empresa sugiere utilizar el lenguaje de programación Swift.

Aquí los diseñadores y desarrolladores pueden encontrar todos los documentos e información con un conjunto de recomendaciones con las mejores prácticas. Las pautas de interfaz humana de Apple ayudan a los desarrolladores a crear aplicaciones más intuitivas y consistentes.

Como diseñador de productos, puede aprovechar todas las bibliotecas de diseño que han creado para usted aquí. Todos los archivos están instalados para Photoshop, Sketch o XD, pero todavía no para Figma.

Como diseñador que desarrolla aplicaciones iOS con xCode y Swift, debe seguir cuidadosamente las pautas y bibliotecas de HIG para asegurarse de seguir todas las reglas y protocolos definidos por Apple.

Figura de Google Android de pie en el teclado de un portátil con código en segundo plano
Figura de Google Android de pie en el teclado de un portátil con código en segundo plano

Sistema operativo Android de Google es el sistema operativo de código abierto basado en Linux de Google para dispositivos móviles y tabletas. La empresa proporciona a todos los desarrolladores las herramientas y recursos necesarios para crear aplicaciones Android. La herramienta oficial para esto es estudio android e idiomas para la creación de contenidos Java y KotlinAndroid proporciona soporte para ambos idiomas.

La última versión del sistema operativo es 12.0, pero puede encontrar muchos dispositivos que ejecutan diferentes versiones del sistema operativo. Al lado de cada versión está el nombre clave del postre 🍬🍰 ¡qué rico! Conoce más sobre Android Studio aquí y el lenguaje de programación Kotlin en el siguiente enlace.

Similar a las Pautas de interfaz humana, encontramos Material Design, un sistema de diseño creado por Google que ayuda y guía a los usuarios en la creación de aplicaciones digitales móviles y web. Recientemente lanzaron una nueva versión del sistema de diseño que permite a los diseñadores y desarrolladores personalizar aún más la experiencia.

Personalmente, creo que Material Design se centra más en el diseño de UI/UX, mientras que HIG se centra más en el desarrollo. En el sitio web, encontrará bibliotecas, marcos, estilos y componentes para ayudarlo a diseñar su interfaz de usuario e interacciones. En el sitio web, encontrará activos creados en Figma para descargar.

Fragmentos de extensión de código de Visual Studio React GraphQL
Fragmentos de extensión de código de Visual Studio React GraphQL

El lenguaje React.js fue desarrollado por Facebook en 2011 por el ingeniero de software Jordan Walke. Fue creado con un framework XHP básico basado en componentes HTML para PHP. Poco a poco, se introdujo en todos los productos Meta. Esta es la última tecnología de las tres de las que hemos hablado.

React se creó para respaldar la creciente importancia del diseño en la tecnología.

¿Por qué React es un buen marco para los diseñadores de productos?

  • Componentes: ¿Conoces los sistemas de diseño? React sigue el concepto de diseño atómico para crear átomos, moléculas y organismos que se utilizarán en plantillas y páginas, básicamente componentes dentro de componentes, una forma modular de reutilizar componentes a gran escala. Este marco será su mejor marco para crear un sistema de diseño cohesivo, receptivo y sin complicaciones.
  • Sensible: React ayuda a escalar y diseñar para ventanas móviles y de escritorio al mismo tiempo, lo que significa que la pantalla se escala y responde fácilmente al punto de vista.
  • Móvil: Inicialmente, React solo se creó para el desarrollo web, pero en 2015, Meta Platforms desarrolló esta versión más nueva, que se usa para desarrollar aplicaciones para Android, iOS, Windows y más.
  • Mezclar marcos: Esta versión de 2015 permite a los desarrolladores usar el marco de reacción junto con capacidades nativas, lo que significa que las aplicaciones nativas de iOS o Android pueden beneficiarse de ambos mundos o marcos. Una aplicación puede ser en parte nativa y en parte construida con React.
  • ¡No diseñes dos veces para iOS y Android! No es necesario repensar todas las partes desarrolladas con react.js dependiendo de si la implementación es en iOS o Android, usamos las mismas pantallas en ambas plataformas.
  • Detector de dispositivo de reacción: Recomiendo encarecidamente este complemento para la detección de dispositivos y la vista de renderizado según el tipo de dispositivo detectado. La interfaz de usuario variará según el dispositivo.

¡Piénsalo dos veces y diseña una vez!

Hable con sus desarrolladores y gerentes para conocer todas las plataformas para las que diseñará. Si está creando una aplicación solo para iOS, xCode y Swift serían el mejor enfoque, pero si el alcance del proyecto incluye iOS, Android y posiblemente la web, React Native combinado con algunas partes nativas será su mejor aliado como no necesitarás triplicar el trabajo.

A lo largo de los años, aprendí que la versatilidad ahorra mucho tiempo, por lo que puede usar React para fines web y algunas partes de la aplicación, y luego combinarlo con iOS y Android nativos para cerrar la brecha.

Al ser versátil, ahorra mucho tiempo, por lo que react.js puede ser la base para sus proyectos web y de aplicaciones, pero puede mezclarlo con lenguajes nativos de iOS y Android para obtener el mejor resultado.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Diseño de UI/UX: cuando lo bueno es mejor que genial | Nick Lawrence | abril 2022
Next post 6 formas en que los especialistas en marketing utilizan el correo electrónico interactivo para obtener más conversiones

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta