Diseño visual para la Convergencia

Una de las críticas fundadas para que haya quien no recomiende el uso de Ubuntu Touch es, precisamente, la carencia de aplicaciones nativas. Al margen de que obtener webapps es muy sencillo, es cierto que en el terreno de las aplicaciones nativas la cosa está verde. Pero, por otra parte, es lógico ya que la maravilla está apenas despegando y muchos desarrolladores aún no se han decidido a enfrascarse en el asunto.

Pero esto, naturalmente, va a cambiar. Canonical está haciendo un gran esfuerzo para proporcionar todas las herramientas y guías necesarias. Y ahora, con el sistema bien encaminado, se hace un llamamiento a los desarrolladores de aplicaciones para que de comienzo la revolución.

En el blog de diseño de Canonical se acaba de publicar este artículo que traduzco  algo liberalmente a continuación:


Es emocionante comprobar como estamos viendo nacer más y más nuevas herramientas para la Convergencia y características en Unity 8. Algunas aplicaciones X11 clásicas (Gimp, Libre Office y unas cuantas más) están ya corriendo en Unity 8 usando el nuevo hardware de nuestros socios, incluyendo la premiada tableta M10 de BQ.

Al mismo tiempo, nosotros queremos ayudar a la gente a escribir o portar aplicaciones a nuestra plataforma usando nuestra moderna caja de herramientas diseñada para una bien engrasada experiencia de usuario, un amplio rango de pantallas y tipos de teclado así como todas las combinaciones intermedias posibles. Ha sido todo un interesantísimo reto imaginar, diseñar y empezar a construir un mundo donde todas las interfaces, independientemente del tipo de entrada o factor de forma, consiguen confluir en la misma experiencia de usuario y lenguaje de diseño.


¿Dónde nos encontramos ahora mismo?

Nuestros equipos UX y SDK han estado trabajando en la versión 1.3 de las herramientas de diseño basadas en Qt, lo que permite a los desarrolladores escribir aplicaciones que pueden ser usadas cómodamente tanto en interfaces touch como con ratón. El trabajo está todavía en progreso, pero algo de ello puede ser usado ya. Véase la documentación para desarrolladores aquí.

Suru, nuestro lenguaje de diseño visual, se ha convertido en un enfoque nuevo, ligero, más plano y moderno. No solo se ve fabuloso (en nuestra humilde opinión) sino que ayuda a los desarrolladores a diseñar aplicaciones visualmente atractivas y muy funcionales con el mínimo esfuerzo. Continuaremos lanzando muchos refinamientos visuales y funcionales en todo el sistema operativo durante este año.

Las nuevas guías de diseño para UX y UI así como Suru serán liberadas pronto. Mientras tanto, esperamos que estos ejemplos de aplicaciones te inspiren para echarle un vistazo a la documentación para desarrolladores, participar activamente en el canal IRC y experimentar por tí mismo. También estamos desarrollando archivos de diseño y plantillas para la renovada caja de herramientas para que puedas empezar a aplicarlas en tus propios diseños de aplicaciones.


Dekko Email

Nuestro primer ejemplo es Dekko, el cliente de correo por defecto de los móviles y tabletas BQ y Meizu. Somos muy afortunados por disponer del increible talento del miembro de nuestra comunidad Dan Chapman, que trabaja en el desarrollo de Dekko haciendo que la aplicación progrese a un ritmo fantástico. James Mulholland ayudó a Dan con UX y yo mismo (Jouni Helminen) he estado trabajando en el UI.

Como muchas aplicaciones, Dekko usa una vista de lista para mostrar el nivel primario y una vista detallada para el secundario. En pantallas grandes estas vistas pueden ser mostradas una al lado de otra pero en pantallas (o ventanas) pequeñas un panel (PageStack) muestra solo la lista, que se convierte en la pantalla primaria. En pantallas o ventanas expandidas, el panel primario automáticamente progresa a la configuración clásica de dos paneles. Este diseño adaptativo es habitual en sitios web responsivos y n uestro equipo SDK ha agregado un componente a la caja de herramientas UI que hace la mayor parte del trabajo duro por ti: AdaptivePageLayout.

La item de lista, que es parte del componente lista, es otro ejemplo de componente listo para usar que ayuda a los desarrolladores a escribir aplicaciones convergentes con el mínimo esfuerzo. El nuevo ListItem en nuestra caja de herramientas presenta útiles y bien diseñados formatos predeterminados usando ListItemLayout, también optimizados tanto para touch como ratón (a través de ListItemActions). Un patrón común para interactuar con items de una lista en pantallas touch es arrastrar a derecha o izquierda para revelar acciones clave, por ejemplo, borrar. Cuando se usa un puntero (ratón) típicamente se convierte en un menú contextual que se revela con el botón derecho del ratón para acceder a las mismas acciones. Nuestra caja de herramientas UI soporta ambos tipos en todo momento. Así, es posible arrastrar el item a izquierda o derecha en pantallas touch o hacer clic en el botón derecho del ratón cuando se usa este. Creemos que los usuarios deberían ser libres de interactuar con nuestros componentes de la manera que esté a su disposición, prefieran o les guste más.

Este comportamiento también está ya incluido en nuestro componente LIstItem, así los usuarios tendrán una experiencia consistente cuando usen las aplicaciones y los desarrolladores ahorrarán tiempo al no tener que buscar sus propias soluciones.


Música

La aplicación de música es otro ejemplo del gran talento que tiene la comunidad implicada en construir algunas de nuestras aplicaciones básicas,  trabajando junto a nuestro equipo interno. Andrew Hayzen y Victor Thompson han estado agregando nuevas características y funcionalidades a la aplicación.

El modelo convergente de la aplicación, que usa múltiples paneles, está desarrollándose en una rama y pronto aterrizará en la rama maestra. Estamos viendo de añadir soporte para música en streaming así que permaneced atentos a esto.

La aplicación de música con paneles múltiples reacciona al cambio de tamaño de la ventana de forma inteligente. Las tarjetas de álbum cambian de tamaño y se colocan ellas mismas según el espacio del que dispongan. En pantallas pequeñas tenemos un control "Now playing" persistente como una barra de control en la parte baja de la pantalla pero en pantallas grandes contamos con espacio suficiente para colocar la barra de control como un panel extra en la parte derecha con la información de lo que está sonando así como carátula, controles y barra de scroll.


Calendario

La aplicación de calendario está presente en el teléfono desde hace tiempo pero hasta ahora su diseño no era muy fascinante en pantallas grandes. Nosotros queremos aplicar nuestro lenguaje visual en el contexto de una aplicación que es, por defecto, minimalista, con algunos pocos elementos de diseño.

Suru, nuestro lenguaje visual, es ligero y plano, minimizando distracciones con sus muy cuidados tonos de grises, espacio consistente y márgenes que ayudan a centrarse en el contenido. Nosotros añadimos algunos toques de color que mejores la visualización de las jerarquías sin que resulten abrumadores.

A nuestra aplicación de calendario le añadiremos paneles múltiples sobre varias capas para cuando haya espacio disponible para que se muestre adecuadamente en todos los tamaños de pantalla y se sienta la navegación intuitiva cualquiera que sea el método o la pantalla que estés usando.

El diseño aún no ha sido aplicado; de hecho, estamos buscando nuevos desarrolladores que quieran participar en nuestro equipo comunitario. Si tu eres un desarrollador y te gustaría implicarte en el desarrollo de algunas de nuestras aplicaciones básicas, contacta con alan.pope@canonical.com (nos encantaría saber de ti).

Esperamos que estos ejemplos hayan inspirado y tocado a cualquiera que quisiera implicarse en diseñar aplicaciones para el Ubuntu convergente. Si tienes alguna pregunta, no dudes en plantearla: jouni.helminen@canonical.com

Fuente: Designing for Convergence
Ubuntu Community Design