NUEVOS MEDIOS

PATTERNS

1. INTRODUCCIÓN

Los design patterns (patrones de diseño) son soluciones de diseño genéricas que pueden ser aplicadas a casos partículares.

El término fue introducido por Christopher Alexander en el campo de la arquitectura.

Posteriormente fue adoptado por otras áreas como el desarrollo de software y el diseño de la interacción (Interaction design patterns).

Una sala de espera, propone una solución al problema de disponer de un espacio en el que las personas aguarden a ser atendidas.

Los Interactions design patterns se definen como:

Una manera de describir soluciones a problemas comunes de usabilidad en un contexto específico. Documentan modelos de interacción que hacen más fácil a los usuarios entender una interface y cumplir sus objetivos.

Jennifer Tidwel (1999)

En el UID existen desde los inicios de internet, pero han ganado interés con la irrupción del diseño para dispositivos móbiles.

Alfanumeric filter list.

Un Design Pattern "primitivo".

Cada Design Pattern debe estar compuesto de:

  • Un título.
  • Un problema.
  • Un contexto.
  • Una solución.

De alguna manera son como plantillas que sirven como base o inspiración para el diseñador, o como piezas con las que arma sus diseños modularmente, como un mecano o el LEGO.

En la página oficial de Android (OAD) 

Otras páginas web

con patterns para Android

Libros publicados sobre Android Design Patterns

2. CATÁLOGO DE PATTERNS

2.1 STRUCTURE

STRUCTURE

General structure

STRUCTURE

App bar

STRUCTURE

Home (Según Greg Nudelman*)

*En Android Design Patterns (Wiley, 2013)

Map

STRUCTURE

Home (Segun Android)

 Evita pantallas solo de navegación y  haz que la gente llegue al meollo de la aplicación directamente haciendo del contenido la pieza central de tu pantalla de inicio.

Google+, 2013

Google+, 2015

Google Play

Usar por tanto patrones de Content Organization como lists, cards, grids... (Consultar esos patrones)

STRUCTURE

Home (Otras opciones)

También pueden usarse tutoriales o login pages.

2.2 NAVIGATION

NAVIGATION

Tabs

NAVIGATION

Navigation Drawer

NAVIGATION

Bottom Navigation

NAVIGATION

Menu sheets

NAVIGATION

Right Navigation

NAVIGATION

Search

2.3 BUTTONS

BUTTONS

Raised y flat button

BUTTONS

Floating Action button (FAB)

Google I/O 2014 (21:35)

2.4 CONTENT ORGANIZATION

CONTENT ORGANIZATION

Lists

CONTENT ORGANIZATION

Grid lists

CONTENT ORGANIZATION

Cards

Google I/O 2014 (17:55)

CONTENT ORGANIZATION

Dropdowns

CONTENT ORGANIZATION

Detail View

CONTENT ORGANIZATION

Bottom sheet

CONTENT ORGANIZATION

Right sheet

CONTENT ORGANIZATION

Dividers

2.5 HELP AND START

HELP AND START

Tutorials

HELP AND START

Steppers

HELP AND START

Dialogs

HELP AND START

Launch screen

HELP AND START

Login screen

2.6 OTHERS

OTHERS

Profile page

OTHERS

Forms

OTHERS

Social

OTHERS

Pickers/callendar

OTHERS

Settings

Nuevos Medios: Patterns

By Alberto Romo

Nuevos Medios: Patterns

  • 1,626