lokiguía - interfaz gráfica scrap

7
Interfaz Gráfica del Usuario - scrap por: Harold Isaac Martínez Rangel

Upload: harold-isaac-martinez-rangel

Post on 22-Jul-2016

228 views

Category:

Documents


2 download

DESCRIPTION

Un pequeño manual ilustrado de como deberían ir los elementos a través de la retícula de un smarthphone; documento desarrollado como guía para nuestro programador.

TRANSCRIPT

Page 1: LokiGuía - interfaz gráfica scrap

Interfaz Gráfica del Usuario - scrappor: Harold Isaac Martínez Rangel

Page 2: LokiGuía - interfaz gráfica scrap

No.accio

ne

s

acciones

1, 1.1, 2

1

1.1

1.1 2

2 2.1escoge un área

c.p. ó Estado

Municipio

Población

Xáreanombre

servicios

más opciones

Ir a...

Logotipo sedesplaza

regresar

fotografíadel área

nombredel área

scroll o click

scroll o click

Pantalla de Inicio Selección área Presentación área

2

(opción 1)

1.1

Notas:

1.- La acción “1.1” sucederá cuando se tenga apagada la opción de autolocalización. De lo contrario pasarádirectamente a la acción “2”.

2.- En el paso “1.1” si el usuario conoce el c.p. no habrá necesidad de llenar las demás opciones.

3.- La acción “1.1” esta pensada para su utilización cuando se tenga una gran cantidad de áreas para buscar.Actualmente solo se cuenta con 3 posibles poblaciones para escoger, por lo que su utilización sería poco práctica yfuncional, pero será de una gran ayuda en el futuro.

Page 3: LokiGuía - interfaz gráfica scrap

No.

2.1, 2.2, 3

2.1

2.2

2.2 3

3 3.1

Descripción área ServiciosPresentación área

(opción 2)

Xáreanombre

servicios

2 2 ó 2.2

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

iconoservicio

BANNERpromociones

scroll

scrolly click

clickexpandir infoclick

scroll y click

accio

ne

s

acciones

3

Notas:

4.- La diferencia entre las opciones 1 y 2 (de las acciones 2 y 2.2); es el funcionamiento del scroll, además que en laacción “2.2” se toma en cuenta que ahí hay la opción de escoger de entre las 3 áreas posibles. Tales como: Chapala,Ajijic y jocotepec. Caso contrario de las opción 1 de la acción “2”. Que por default te asigna un área en particular sinpoder cambiar a otra con el uso del scroll

Page 4: LokiGuía - interfaz gráfica scrap

No.

3.1, 4, 5

3.1

4

4 5

5 6

Descripción banner Descripción negocioListado negocios

3 3 4 ó 3

iconoservicio

iconoservicio

iconoservicio

BANNERpromociones

InformaciónBásica

3

foto ó logo

INFO

TOP 5

Listado Negocios

Logofoto

Nombre Negocio

Bannerse Expande

scroll y click

volver aServicios

calificacióndel negocio

ubicación enel mapa

compartir enRedes Sociales

scroll y click

clickminimizar

clickmás opciones:recorrido virtual,promociones,menús, carteleras, etc.

accio

ne

s

acciones

4

Notas:

5.- En la acción “3”, en la parte inferior de la pantalla se puede añadir publicidad de los negocios o promociones deLokiGuía. Promocionando ofertas, menús, descuentos o direcciones de páginas web, así como redes sociales. Elbanner puede estar cambiando cada cierto tiempo o dar la opción a ver otras promociones con el scroll.

6.- Con respecto a los iconos con los servicios, si se pudiera dar la opción de colorear los iconos según la frecuenciade uso en alguno en particular. Dando una experiencia más interactiva con el usuario y dejar ver al usuario cualesson los que más usa y cuales no.

Page 5: LokiGuía - interfaz gráfica scrap

No.

6

6

Mapa

5 ó 4

Mapa

atrás

zoom

Ir al listadode negocios

accio

ne

s

acciones

5

Notas:

7.- En la acción “4” se podría dividir el listado de los negocios en 2, dejando la primera lista para aquellos quepagaran un poco más y dandole más prioridad como publicidad a esos primeros, y después los de un precio normaly estandarizado.

Diagrama de funcionamiento y movilidad

1

1.1 2

2.1

2.2

3 3.1

4

5 6

Page 6: LokiGuía - interfaz gráfica scrap

Más opciones

3.1 4

Más opciones

6

Más opciones - web

3

Más opciones - ajustes

Ajustes

Web

Promociones

Mensajes

Contactanos

Teamwork

App Info

Ajustes

Web

pag. web

facebook

twitter

Promociones

Mensajes

Ajustes

Auto-Localización

on off

Avisar mensajes, ofertas, etc.

on off

Auto-Actualización

on off

accio

ne

s