Llevando el diseño de tus aplicaciones al siguiente nivel con Xamarin Forms

Sobre el tema:

Contenido

Como ya he mencionado en otras ocasiones, hay muchas cosas a tener en cuenta a la hora de diseñar aplicaciones móviles. Hoy en dia los usuarios son muchas mas exigentes y el mercado es muy competido.

Si es cierto que cada año que pasa el desarrollo de aplicaciones móviles gana popularidad pero con el vienen desafíos interesantes para afrontar. Uno de estos desafíos es el diseño de interfaces y experiencia de usuario (UI/UX).

La diferencia entre una buena aplicación y una mala aplicación suele ser la calidad de su experiencia de usuario (UX). Una buena experiencia de usuario es lo que separa las aplicaciones exitosas de las que no han tenido éxito. Es por ello que es vital tratar de focalizar nuestros esfuerzos en tratar de dar a nuestros usuarios la mayor y mejor experiencia posible.

Lo que deberías saber

Para lograr este cometido nosotros nos vamos a enfocar en lo que es la consistencia de nuestros diseños utilizando Xamarin Forms.

La consistencia en el diseño de aplicaciones móviles se refiere a asegurarse de que los elementos de una interfaz de usuario sean uniformes. Se verán y se comportarán de la misma manera en toda la aplicación. Esto ayuda a probar constantemente las suposiciones de un usuario sobre el manejo de la interfaz de usuario, creando una sensación de control, familiaridad y confiabilidad.

Lo que la mayoría no sabe sobre el diseño de aplicaciones móviles

💡 Nota: Aquí no vamos a abundar sobre el tema de consistencia en el diseño de aplicaciones móviles, ya he escrito un articulo extenso, que puedes ver aquí, donde detallo cada una de las partes que deberías tener en cuenta en cuenta a la hora de diseñar tus aplicaciones.

Como debes saber dentro del entorno de Xamarin Forms nosotros podemos contar con muchos controles estándares en las diferentes plataformas que nos ayudan a crear casi cualquier aplicación. Puedes ver algunos de estos controles en la imagen debajo.

Dentro del entorno de Xamarin Forms estos controles son llamados Views o Vistas. Las vistas son objetos de la interfaz de usuario, como etiquetas, botones y controles deslizantes que normalmente se conocen como  controles  o  widgets en otros entornos de programación.

Lo interesante de todo esto es que Xamarin Forms renderiza las interfaces de usuario a sus controles nativos de la plataforma de destino, lo que permite que las aplicaciones de Xamarin.Forms conserven la apariencia adecuada para cada plataforma.

Esto quiere decir que cuando nosotros creamos un botón en Xamarin Forms, este se renderiza directamente al botón nativo de cada plataforma con lo cual ya en primera instancia estamos cumpliendo en parte con un principio básico del diseño de aplicaciones móviles, que es La Consistencia.

Tips para sacar mayor provecho A Xamarin Forms

Dentro del entorno de Xamarin Forms nosotros podemos utilizar algunas herramientas y enfoques que nos pueden ayudar a crear diseños mas consistentes entre las plataformas sin mucho esfuerzo. Eso es lo que quiero mostrarles aqui.

Trabajando directamente con el dispositivo

Dentro de este apartado quiero presentarles el potencial de la clase Device dentro de Xamarin Forms. La clase Device  contiene una serie de propiedades y métodos que nos pueden ayudar a personalizar el diseño y las funcionalidades para cada plataforma.

Conociendo la Plataforma especifica o Plataforma de destino

En C#, se pueden proporcionar valores específicos de la plataforma mediante la creación de una instrucción switch en la propiedad Device.RuntimePlatform  y, a continuación, proporcionar instrucciones  case para las plataformas necesarias.

public App () 
{
   switch (Device.RuntimePlatform) 
   { 
     case Device.iOS: 
       MainPage = new NavigationPage (new iOSPage());
       break; 
     default: 
       MainPage = new NavigationPage (new DefaultPage());
     break; 
   }
}

Este es un consejo que se le puede sacar mucho valor. Imagínate que se necesita hacer una adaptación a una de las paginas de la plataforma, utilizando Device.RuntimePlarform puedes especificar fácilmente que pantalla utilizar. Para que puedas ver dicho valor vamos a ver un ejemplo mas de cerca y detallado: la navegación usando tabs.

Dentro de Xamarin Forms nosotros tenemos la pagina TabbedPage. Esta pagina una lista de pestañas donde cada pestaña carga contenido en el área de detalles.

Navigation Bar for iOS
Tabs in Android application

Cuando se utiliza la barra de navegación por pestañas el usuario piensa que estará en la misma vista, pero verá datos relacionados con el padre o la pestaña abierta. No espera ver una vista completamente diferente sin datos relacionados.

En android, estas pestañas suelen ser utilizadas para categorizar contenido. Y en iOS esta categorización de contenido se suele hacer con un Scope Bar.

Tabs in Android application
Scope Bar in iOS 9

Entonces, si nosotros queremos ofrecer esta funcionalidad tal cual se expresa en las imágenes, debemos crear paginas especificas para cada plataforma ya que xamarin Forms no tiene un Scope Bar en su lista de controles para las diferentes plataformas.

Hay muchos ejemplos de como hacer un Scope Control en el Internet. En caso de que estés interesado en uno.

Ahora bien, si solo queremos cambiar algunas propiedades de un control podemos utilizar OnPlatform.

button.HeightRequest = Device.OnPlatform (ios: 20, Android: 30, WinPhone: 30);

De la misma manera, podemos utilizarlo en xaml:

<StackLayout>
  <StackLayout.Margin>
    <OnPlatform x:TypeArguments="Thickness">
      <On Platform="iOS" Value="0,20,0,0" />
      <On Platform="Android, UWP" Value="0,0,0,0" />
    </OnPlatform>
  </StackLayout.Margin>
  ...
</StackLayout>
...
OR
...
<StackLayout>
  <StackLayout.Margin>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0,0,0,0" />
  </StackLayout.Margin>
  ...
</StackLayout>
...
OR
...
<StackLayout Margin="{OnPlatform iOS="0,20,0,0", Android="0,0,0,0"}>
...
</StackLayout>

Conociendo el dispositivo objetivo

La propiedad Device.Idiom se puede usar para modificar los diseños o las funcionalidades según el dispositivo en el que se ejecuta la aplicación. Esta es especialmente útil para compilar diseños que aprovechan pantallas más grandes. Para este caso, se puede utilizar:

if (Device.Idiom == TargetIdiom.Phone) {
    // layout views vertically
} else {
    // layout views horizontally for a larger display (tablet or desktop)
}

De la misma manera, se puede utilizar en XAML:

<StackLayout>
    <StackLayout.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </StackLayout.Margin>
    ...
</StackLayout>

Para conocer mas sobre la clase Device y todo lo que tiene para ofrecer, puedes encontrarlo aquí.

Trabajando con recursos y estilos

Trabajar con recursos te permiten evitar valores duplicados, pero aún tiene que establecer cada propiedad individualmente, lo que crea desorden y produce código repetido.

...
<Button	
  BackgroundColor ="{StaticResource highlightColor}"
	BorderColor     ="{StaticResource edgeColor}"
	BorderRadius    ="{StaticResource edgeRadius}"
	BorderWidth     ="{StaticResource edgeSize}"
	TextColor       ="{StaticResource textColor}"
	Text            ="OK"  />

<Button	
  BackgroundColor ="{StaticResource highlightColor}"
	BorderColor     ="{StaticResource edgeColor}"
	BorderRadius    ="{StaticResource edgeRadius}"
	BorderWidth     ="{StaticResource edgeSize}"
	TextColor       ="{StaticResource textColor}"
	Text            ="Cancel"  />
...

Cuando configuras una propiedad debes repetirla en cada vista o control. Para solventar este problemas vamos a utilizar estilos. Un estilo (Style) es una colección de setters para un tipo particular de vista o control.

...
<Style x:Key="labelRedStyle" TargetType="Label">
       <Setter Property="HorizontalOptions" Value="Center" />
       <Setter Property="VerticalOptions" Value="CenterAndExpand" />
       <Setter Property="FontSize" Value="Large" />
       <Setter Property="TextColor" Value="Red" />
</Style>
...
<Label Text="Follow me" Style="{StaticResource labelRedStyle}" />
<Label Text="@luismatosluna" Style="{StaticResource labelGreenStyle}" />
...

TargetType debe ser aplicado (o tendrás un runtime exception). Las propiedades deben ser miembros del TargetType (o tendrás un runtime exception).

Trabajando con Material Design en Xamarin Forms

Unas de las recomendaciones mencionadas en el articulo sobre consistencia en el diseño que les escribí fue: Trabajar con un patrón de diseño conocido. En este punto todos deberían conocer las pautas de Google Material Design  y  Apples Human Interface. Si todavía no has trabajado con guías, te recomiendo que lo hagas.

Cuando trabajamos con un patrón conocido estamos sacando ventaja de los millones de dolares que estas empresas han gastado en investigación y desarrollo de estos diseños, los cuales vienen bien incluso para empresas multinacionales que equipos expertos en UI/UX.

En Xamarin Forms podemos usar Material Design para aplicaciones Android y iOS con estas librerías:

  • Visual Material. Librería oficial suportada por el equipo de Xamarin Forms. Los controles de visual Material se realizan mediante renderizadores de material, que aplican las reglas de diseño de material. Funcionalmente, los renderizadores de materiales no son diferentes a los renderizadores predeterminados.
  • XF.Material Library. Librería que provee elementos interactivos que funcionan de manera similar en todas las partes de la aplicación. Los controles de esta librerias fueron creados para simular el comportamiento de Google’s Material Design.


A continuación, les presento una tabla de comparación con los controles que tienen cada librería.

ControlVisual MaterialXF.Material Library
ActivityIndicator☑️☑️
Button☑️☑️
CheckBox☑️☑️
DatePicker☑️
Editor☑️☑️
Entry/Text fields☑️☑️☑️
Frame/Cards☑️☑️
Picker☑️☑️
ProgressBar☑️
Slider☑️☑️
Stepper☑️
TimePicker☑️
App Bar Customization☑️
Switch☑️
Menus☑️
Typography Label☑️☑️
Chips☑️
Radio Buttons☑️☑️
Tintable Image Icon☑️
Alert Dialog☑️☑️
Simple Dialog☑️
Confirmation Dialog☑️☑️
Input Dialog☑️
Loading Dialog☑️
Snackbar☑️
Nota: Doble check agrega funcionalidad extra*

⚠️Nota: Es buena tener en cuenta que Visual Material pesa tres veces menos y tiene menos dependencias que XF.Material Library.

Es bueno que sepan que controles van a utilizar y cuales son los requerimientos para elegir la librería adecuada. Y mas importante aun, trata de no usar ambas. Si necesitas algo especifico, desarrollalo.

Por un lado, tenemos Visual Material que pesa menos y tiene algunos controles estándares para implementar una parte de Material Design. Y por el otro lado, tenemos tenemos una librerías mas completa pero mucho mas pesada.

Consideraciones

Bien, hasta este punto si estas pensando utilizar Material Design, bien por ti pero hay algunas cosas que debes tener en cuenta.

Material Design es ideal para la experiencia de usuario en cualquier plataforma en general. Ten en cuenta que Apple tiene su propio Directrices de la interfaz humana para la experiencia de usuario en la plataforma iOS. Sin embargo, hay recomendaciones disponibles sobre cómo adaptar el diseño de materiales en la plataforma Android e iOS Aquí. Así que puedes usar de forma segura el diseño de materiales en la aplicación iOS siempre y cuando sigas estas pautas de adaptaciones.

Material Design no implica un estilo específico. Hay muchos buenos ejemplos de productos que han adoptado Material Design manteniendo su identidad de marca. Es bueno que se vea a Material Design como  un punto de partida para los diseñadores y desarrolladores para mejorar la identidad de tu aplicación.

Recursos de utilidad


Espero que este articulo sea un punto de partida para que aquellos que no tienen mucha experiencia con el diseño de aplicaciones móviles. Me gustaría saber que te parece todo esto y si te fue de utilidad en los comentarios 😉

Para obtener contenido extra, sígueme en Instagram y LinkedIn! ¡Gracias por leer!

¿Qué opinas de este contenido?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Suscribirte
Notificar de
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Buscar en el sitio