directivas de diseño para aplicaciones
Post on 13-Jun-2015
612 Views
Preview:
DESCRIPTION
TRANSCRIPT
Una aproximación a las directivas de diseño para aplicaciones.
An approach to design politics
Principios y fundamentosInspirado en la vida
Keywords
Windows 8 : Modern UI : Lenguaje de diseño
El lenguaje de Diseño no es más que una serie de reglas sobre la cual se basa todo el proceso creativo de nuestra aplicación.
Modern UI es el lenguaje de diseño de Windows 8, para su desarrollo se basaron en el sistema de señales y carteles del subte y aeropuertos en varios países, al entender que este es un lenguaje universal comprendido por todo el mundo, sin importar el idioma en el que hablen.
Múltiples pantallas
Experiencia de usuario
Fuentes claras y legibles
Lenguaje Universal
Diseño Industrial Moderno / Sistema Internacional de Tipografías / Diseño en Movimiento
Fotografía: georg-brauchle ring station with installation by franz ackermann
Inspirado en _
Diseño industrial moderno Se refiere a la escuela de diseño Bauhaus de Alemania que buscó la simplificación de la forma de los objetos y la reducción de los elementos geométricos revalorizando su función
Objetivo: Construir un hábitat adecuado para el ser humano y suprimir las barreras entre arte, industria y artesanía
KeywordsFormas Simples.
Funcionamiento.
Entorno dinámico y más humano.
Sistema Internacional de Tipografías Se refiere a fuentes claras y legibles.
También se completa con otros elementos clave como:
El uso de las Grillas Colores planos y sencillos Uso de fotografías en lugar de ilustraciones
KeywordsClaridad de lectura.
Grillas como guía.
Colores planos.
Fotografías.
Diseño en movimiento Los usuarios del presente siglo son muy diferentes a aquellos usuarios tradicionales en la plataforma Windows.
Es necesario crear experiencias que se adapten a las necesidades de información de hoy en día: grandes volúmenes de datos que se muestren de manera veloz y con una interfaz táctil.
KeywordsRapidez.
Sencillez.
Volumen de datos.
Artesanal / Rápido y fluido / Completamente digital / Más con menos / Ganar con todo
Fotografía: enfoce by daniel garay fleck posadas misiones arentina
Pensado para ser_
Artesanal Rápido y fluido Foco en los detalles.
Seguro y Confiable.
Balance, simetría y jerarquía.
Alineación con la Grilla.
La vida es móvil.
Deleita con animaciones.
Diseña para los dedos.
Interacción intuitiva.
Responsivo y preparado.
Irresistible.
Auténtico digital Hacer más con menos Conectado a la nube.
Dinámico y vivo.
Uso de tipografías.
Colores vibrantes y atrevidos.
Movimiento.
Ser especialistas. Hacer una cosa y de la mejor manera posible.
Enfocado y directo.
Contenido sobre todas las cosas.
Inspirar confianza.
Ganar como un todo Encajar en modelo de UI: Todas las aplicaciones en Windows 8 deberán respetar el modelo propuesto por Modern UI e integrarse al sistema operativo.
Reducir la Redundancia: Ofrecer experiencias únicas en cada aplicación e integrar aquellas que puedan complementarse.
Aplicaciones trabajando juntas para completar escenarios: El mejor ejemplo de esto es la conexión entre la aplicación de Fotos en Windows 8 y la aplicación de Email.
Herramientas y Plantillas listas para escalar: Todo lo que nos ofrecen dentro de Visual Studio 2012 como herramienta está preparado para adaptarse a los múltiples tamaños y formas de pantallas.
Aplicaciones Esta vez, lo que importa es lo de afuera.
Activos de diseño
Lo mejor de programar aplicaciones para Windows 8 es que tenemos disponibles los activos de diseño, es decir que todo lo que necesitamos esta para descargárnoslo en formato de Photoshop desde el sitio de MSDN.
http://msdn.microsoft.com/es-ar/library/windows/apps/hh700403.aspx
Antes de empezar a diseñar Determina los puntos fuertes.
Qué podrá hacer el usuario.
Qué contratos incluirás.
Decide cómo rentabilizar.
Organiza y jerarquiza la información.
Causa una buena impresión.
Manos a la obra.
NavigationDirectivas de navegación
Diseño de navegaciónSISTEMA JERÁRQUICO
Páginas de concentrador
Páginas de sección
Páginas de detalle
SISTEMA PLANO
Patrón común-Resulta familiar-Rápido y fluido-Fácil de usar
Barra de navegación superior
Estados de visualización
VISTA ACOPLADA
VISTA PANTALLA COMPLETA
VISTA RELLENA
La aplicación rellena toda la pantalla
La aplicación está acoplada en una región estrecha de la pantalla.
La aplicación rellena el área del resto de la pantalla que no está ocupada por la aplicación en estado acoplado.
Las dimensiones exactas importan
La pantalla completa importa
CommandsDiseño de comandos
Ubicación de comandos:
1 – Identifica qué comandos utilizarás.
Diseño de comandosRecomendacionesUsar los botones de acceso (contratos).
Usar la barra de aplicaciones.
Usar menús contextuales.
- Comienza por colocar los comandos a la derecha.
- Usa los bordes.
- Los comandos de selección siempre irán a la izquierda.
- Muestra y oculta los comandos deshabilitados.
Recuerda que buscamos:
Simplicidad.
Fácil acceso.
Comandos legibles.
DirectricesPara crear coherencia e infundir confianza, siga estas directrices para decidir dónde colocar los comandos en la barra de la aplicación.
Comandos de selección Los comandos relacionados con la selección siempre se muestran en el extremo izquierdo.
Comando de nuevo elemento Si tu aplicación llama a un comando "Nuevo" para crear cualquier tipo de entidad (agregar, crear, redactar), coloca ese comando en el borde derecho de la barra.
Comandos de eliminar Usa Eliminar/Nuevo si tu aplicación administra entidades individuales que podrían persistir fuera de tu aplicación, por ejemplo, una aplicación de correo o de cámara. Eliminar/Nuevo deben aparecer siempre en este orden.
Comandos de quitar Usa Quitar/Agregar si tu aplicación administra una lista, por ejemplo, lista de tareas pendientes, lista de ciudades en una aplicación de información meteorológica o una lista de restaurantes incluidos en marcadores. Quitar debe aparecer siempre a la izquierda de Agregar.
Comandos de borrar Usa Borrar si vas a realizar una acción destructiva en todos los elementos posibles. Usa la etiqueta del comando y sé explícito acerca de la acción que realizará el comando, por ejemplo, "Borrar selección".
AdvertisingDirectivas de Publicidad
- Integra el anuncio en el diseño.
- Elige formatos, tamaños y ubicaciones de anuncios complementarios.
- Define el diseño de todos los estados de visualización.
- Considera anuncios locales.
- Incluye palabras claves.
Directrices de publicidad
La aplicación no debe mostrar solo anuncios.
Los anuncios (obviamente) también están sujetos a los requisitos de certificación.
La aplicación no debe usar sus iconos, notificaciones, barra de la aplicación ni la interacción de hacer pasar desde el borde para mostrar anuncios.
Los anuncios no deben ejecutar un código de programa que no provenga del proveedor del anuncio.
RECURSOS: http://adsinapps.microsoft.com/
Uso no apropiado de la publicidad
Diseño de página Sistemas de Grilla
Sistema de cuadrícula
El sistema de cuadrícula se basa en las plantillas para desarrolladores, y los controles y las colecciones se diseñaron con este sistema en mente.
La cuadrícula consta de unidades y subunidades. La unidad de medida básica es la unidad. Una unidad equivale a 20 × 20 píxeles.
El sistema de cuadrícula es una herramienta de diseño que permite lograr una unidad visual a través de diferentes aplicaciones, al mismo tiempo que proporciona una estructura que hace posible la variación y mantiene al usuario
Encabezado de página La línea base del encabezado de página debe ser de 5 unidades, o 100 píxeles, desde la parte superior.
El margen izquierdo para el encabezado de página es de 6 unidades, o 120 píxeles.
El encabezado de página de Windows 8 es Conjunto de estilos SegoeUI 20, atenuado.
Área de contenido El área de contenido tiene un margen superior de 7 unidades, o 140 píxeles.
El margen izquierdo es de 6 unidades, o 120 píxeles.
El margen inferior es flexible.
Para contenido con desplazamiento horizontal, no debe ser mayor a 6,5 unidades (130 píxeles) ni inferior a 2,5 unidades (50 píxeles).
Para contenido con desplazamiento vertical, los márgenes superior e izquierdo permanecen igual.
No se especifica el margen inferior porque el contenido se desplaza fuera de la pantalla.
Espaciado horizontal interno - Varían en función a los elementos.
Espaciado vertical interno - Varían en función a los elementos.
Espaciado horizontal entre grupos
El espaciado interno entre grupos es de 4 unidades, u 80 píxeles.
Este espaciado interno proporciona la separación suficiente para que el usuario distinga un grupo del siguiente con facilidad al desplazarse.
TypographyDirectrices sobre tipografía
Qué tipografía usar Para lograr simplicidad y claridad, se necesita prestar mucha atención a los detalles tipográficos.
Usa Segoe UI para los elementos de la UI como botones y selectores de fechas.
Usa Calibri para el texto que el usuario escribe y lee, como correo electrónico y chat.
Usa Cambria para los bloques de texto más grandes, como un lector RSS o de revistas.
- No uses estilos de fuente cursiva.- No mezcles tamaños de fuente en una página.- El texto principal tiene una opacidad del 100%. - El texto secundario tiene una opacidad del 60%.- El texto en estado de desplazamiento tiene una opacidad del 80%.- El texto en blanco y negro en el estado presionado tiene una opacidad del 40%. El texto en otros colores tiene una opacidad del 60%.
Cambria > Lectura La mayor parte de los medios impresos usan fuentes serif, por lo que los usuarios esperan una fuente serif al leer un libro o una revista. Cambria es una fuente serif diseñada para una lectura prolongada en pantalla. Usa Cambria para mostrar grandes cantidades de texto, como contenido de un libro o una revista.
Para las aplicaciones de lectura, sigue estas directrices:
Mantén un ancho de columna de texto suficiente para que las líneas de texto no sean demasiado largas para leerlas con comodidad. La cuadrícula tipográfica tiene especificaciones para esto.
Divide un texto largo en capítulos o secciones.
Incluye compatibilidad para continuar desde el punto en que lo dejó el lector.
Al usar la fuente Cambria, usa estos tamaños de fuente:
9 ptos, 11 ptos y 20 ptos.
Puedes usar los grosores de fuente normal y negrita. Te recomendamos que mantengas el espaciado predeterminado.
Calibri > Lectura y escritura Calibri es una familia de fuentes sans-serif diseñada para leer textos largos en una pantalla. Usa Calibri para texto que el usuario escribe o edita, como el texto de un mensaje de correo electrónico o de un cliente de chat. Es la fuente predeterminada en Microsoft Outlook, Microsoft Word y Microsoft PowerPoint.
* Calibri de 13 ptos tiene el mismo alto x que Segoe UI de 11 ptos, así que sus tamaños parecen uniformes cuando se usan juntas en la misma línea.
Al usar Calibri debes establecer el tamaño de fuente en 13 y un grosor normal. Te recomendamos que mantengas el espaciado predeterminado para Calibri.
Live titlesCuestiones a tener en cuenta
TipografíaUtiliza Segoe UI para los títulos.
Es de fácil lectura
Mantiene el lenguaje de diseño
Se integra perfectamente
Palabras cortadasUtiliza puntos suspensivos cuando las palabras son muy largas
Facilita la lectura cuando hay movimiento
Mantiene la intriga al espectador
Invita a ingresar a la aplicación para ver qué mas hay.
Colores Evita usar distintos colores para fondos que ya usan color pleno.
Mejor visiblidad del contenido
Unidad de contenido
Evita confusiones en el contenido
Tamaños Utiliza el tamaño de fuente predeterminadas por el sistema.
Mantiene la línea gráfica.
Evita cortes indeseados en la línea de texto.
Confunde contenido con títulos.
Bold No pongas en negrita el contenido, utiliza texto plano.
Mantiene la línea gráfica.
Evita cortes indeseados en la línea de texto.
Confunde contenido con títulos.
OpacidadesUtiliza colores plenos.
Mantiene la línea gráfica.
Facilita la separación de la unidad de texto y la imagen.
ÍconosNo utilices íconos grandes.
Utiliza el tamaño de ícono por defecto de 30 x 30 px.
Imágenes y Plantillas.
Utiliza los modelos de plantilla que provee Windows paraLos distintos tipo de productos en la tienda.
No pierdas la oportunidad de hacerlo visual. Muestra imágenes en su máximo esplendor.
Splash screen¡La segunda primera impresión!
No utilices tu logo en los costados No utilices texturas de fondo No utilices imágenes de fondo
Utiliza tu logo al centro.Elige un color de fondo sólido.Plasma toda tu creatividad en el logo, pues él te representa.
No utilices una imagen cortada, mejor haz una creatividad con transparencias.No agregues versiones, publicidad, información que no sea necesaria.
Si tienes loguin, recuerda que puedes mostrarlo en una segunda pantalla.
Gracias.Daniel Garay Fleck
MSP ArgentinaMisionesDaniel.GarayFleck@stdntpartners.onmicrosoft.comhttp://danielgarayfleck.com.ar/windows8/
top related