Deseño dunha APP móbil

IES Leixa
CS Deseño e Produción Editorial
Erica García-Santamarina Caridad
Ferrol, Galicia, España
Curso: 2014-2016

DESEÑO
app
MÓBIL
BREVES APUNTES

Do nacemento do móbil ás apps:.................................................11
Introducción 13
Que é unha app? 17
Desarrollo dunha aplicación móbil:.............................................21
Organización 24
Pasos a seguir 29
Criterios para deseñar unha app móbil para Android:............... 43
Interacción e patróns comúns: 45
Principios básicos 46
Formas de soster o móbil 47
Orientación do terminal 48
Patróns de interacción 49
Librarías 61
Material Design: 63
Que é? 65
Principios: Sedúceme 72
Simplifica 74
Sorpréndeme 76
Dispositivos: Vista xeral da UI 78
Estilos: Dispositivos e pantallas 80
Medidas e cuadrícula 81
Tipografía 84
Paleta de cores 86
Iconas 87
Pautas: Estrutura dunha app 90
Action Bar 95
Confirmar e recoñecer 97

Trucos e consellos de deseño para apps: 99
Unidades de medida 100
Consellos e trucos 102
Botóns 103
Cards (tarxetas) 106
Cadros de diálogo 108
Divisores 111
Listas 112
Controis das listas 117
Menús 118
Controis de selección 120
Subtítulos 121
Pestanas 122

Esta pequena guía realizouse coa intención de axudar
a toda persoa interesada no mundo das aplicacións
móbiles en particular e, se lle atrae tanto coma
min, do mundo tecnolóxico e o da programación en
xeral. É unha guía breve, básica e amena, ideal para
ler nunha tarde e que, ao rematar, vaias correndo a
buscar material para comezar a deseñar a túa propia
app.
O máis probable é que o ano que ven esta guía estea
completamente desactualizada, de feito, mentras
realizaba este traballo, Adobe deixou entrever o que
sería a súa nova ferramenta: Project Comet, un programa
de deseño de interfaces baseadas na experiencia
do usuario; e, ademáis, Android actualizou o
seu SO á versión 6.0
Tamén advertir que esta guía non explica como programar
para Android, senón que é unha primeira
toma de contacto co mundo das apps, con recursos
comúns a cualquer dispositivo pero centrado no sistema
operativo Android. Por que Android? Por ser un
núcleo de sistema operativo libre, gratuito e multiplataforma.

A industria do teléfono móbil ofrece hoxe cifras asombrosas
como os 5.200 millóns de terminais en uso en todo o planeta,
os 6.700 millóns de subscricións móbiles, os 4.300 millóns de
usuarios únicos, os 11.400 millóns de dólares gastados en publicidade
móbil, os 25.000 millóns xerados polas aplicacións
móbiles ou os 1.820 millóns de móbiles vendidos en 2013.
Vendo os datos actuais pode parecer que o camiño foi sinxelo,
nada máis lonxe da realidade, necesitáronse de décadas de
innovación, de mellora dos terminais, das redes, do software
móbil, do seu deseño e peso, do seu custo e en xeral, grandes
adaptacións para os fabricantes, operadoras e distribuidores,
a medida que cambiaba a tendencia de consumo.
En todo caso, a influencia do teléfono móbil intelixente na
tecnoloxía actual é de tal calibre que transcendeu do simple
dispositivo de comunicación por voz provocando unha nova
“era da mobilidade” que deixou atrás a “época do computador
persoal” e non poucos “feridos” no camiño, empresas, servizos,
sectores e algúns produtos outrora dominantes.
11

12

A telefonía móbil experimentou un vertixinoso desenvolvemento a
partir dos anos 80. A orixe da telefonía pode datarse no s.XX cos primeiros
establecementos de radio para grandes organizacións, principalmente
gobernos. Pero é que a partir dos anos 80 non deixou de medrar en
usuarios, dispositivos, servizos...
Tradicionalmente a historia da telefonía móbil divídese nunha
serie de xeracións marcadas por certos hitos técnicos e comerciais.
Xeración 0G: comezos do s.XX. Telefonía baseada en radio
con fins específicos como navegacións marítimas ou militares.
Xeración 1G: finais do 80. Trátase de telefonía
analóxica orientada ao sector empresarial.
Aparecen algúns dos principais actores en canto a
operadores e suministradores. Motorola desenvolve
o seu primeiro terminal, a xaponesa NTT lidera a
comercialziación seguida dos países nórdicos. Precisamente
estes, co estándard NMT implementan por
primeira vez a itineracia internacional tamén coñecida
como Roaming.
Xeración 2G: aparece nos anos 90. Incorpora por primeira
vez a tecnoloxía dixital baseada na conmutación
de circuitos, é dicir, durante a comunicación establécese
unha comunicación extremo-extremo.
O estándard máis empregado estes anos é o GSM que
incorpora itinerancia internacional, unha implementación
eficiente das mensaxes curtas, 160 carateres
(SMS), mensaxes multimedia (MMS) e o protocolo
WAP para acceso a internet.
13

Entre os hitos comerciais Radiolinja comercializa os primeiros
servizos de descarga de tons en 1998 en Finlandia e aparecen
tamén os primeiros servizos de pago a través de móbiles, neste
caso, en Suecia e Finlandia no 98 e en Noruega e Filipinas en
1999.
Neste mesmo ano a xaponesa NTT Dokkomo comercializa o primeiro
servizo de acceso a través de WAP.
Xeración 2.5G: incorpora, ademáis da conmutación baseada
en circuitos, conmutación baseada en paquetes de datos mediante
o estándard GPRS esto impulsa a potencialización das
mensaxes MMS e tamén do protocolo WAP.
Poténciase tamén a utilización de terminais multimedia e servizos
de multicontido.
Xeración 3G: caracterízase pola adopción da conmutación en
paquetes para os servizos de datos. Aparecen estándares como
o UMTS que proporciona un maior ancho de banda.
Dende o punto de vista comercial aparecen os primeiros servizos
de streaming para vídeo e radio. Neste caso, as demostracións
as realizan Nokia en 2005, RealNetworks e Disney.
Xeración 3.5G: caracterízase pola adaptación do estándard
HSDPA que incorpora unha maior velocidade de transmisión e
que, polo tanto, favorece un acceso a internet con maiores tasas
de transmisión e unha menor latencia.
Xeración 4G: actualidade. Caracterízase pola adopción completa
da conmutación basada en paquetes, é dicir, desaparece a
conmutación baseada en circuitos para os servizos de voz.
As aplicacións requiren cada vez máis unha maior velocidade de
transmisión de datos co que require un maior ancho de banda.
Son os protocolos os que evolucionan para proporcionala.
14

16

O termo App é a abreviatura de Application e, como tal, sempre
se utilizou para denominar a estas nas súas diferentes
versións.
Sendo unha palabra de uso común no mundo do software, o
termo App comezou a utilizarse especialmente para referirse
ás aplicacións para móbiles en 2008, tras a consecución de
tres fitos importantes na historia das aplicacións: o lanzamento
do App Store de Apple, a publicación do primeiro SDK para
Android e o posterior pero case inmediata inaguración do Android
Market.
Que é unha app?
Unha App é unha aplicación de software que se instala en dispositivos
móbiles ou tablets para axudar ao usuario nunha labor concreta,
xa sexa de carácter profesional ou de lecer e entretemento, a diferenza
dunha webapp que non se instala.
Esta pode integrarse ás características do equipo, como a cámara
ou sistema de posicionamento global (GPS). Ademais, pódese actualizar
para engadirlle novas características co paso do tempo.
As aplicacións suministran acceso instantáneo a un contido sen
ter que o buscar en Internet e, unha vez instaladas, xeralmente pódese
acceder a elas sen necesidade dunha conexión á Rede.
Ainda que isto das apps pareza relativamente moderno existen xa
dende hai un tempo. Estas estaban integradas nos sistema operativos
de Nokia ou Blackberry, móbiles de pantallas pequenas e non táctiles, e
o seu obxectivo era mellorar a actividade persoal: tratábase de alarmas,
calendarios, calculadoras...
Estas aplicacións son obvias a día de hoxe e nin nos plantexamos
o feito de descargalas ou que o noso móbil non dispoña delas. A súa
evolución deuse rapidamente grazas ás innovacións da tecnoloxía WAP
17

e a transmision de datos (EDGE) que veu acompañado dun desenvolvemento
moi forte dos dispositivos móbiles. É por iso que actualmente
atopamos infinidade de tipos de aplicacións: Apps de noticias (elmundo.
es), xogos (Angry Birds), ferramentas de comunicación como Whatsapp,
redes sociais como Twitter, apps para saír de festa (Liveclubs), promocións
comerciais (McDonnalds), aplicacións para vender as túas cousas
usadas desde o móbil (Wallapop)..., que nos poden axudar no traballo ou
tentar facernos o día máis ameno.
Orixes e boom das Apps
Investigando sobre as orixes das Apps, e utilizando a ferramenta
de estatísticas de procura de Google, obtemos reveladores datos.
Baseándonos nunha estatística sobre as procuras relacionadas co
termo “App” e asignándolle un índice 100 ás procuras actuais, observamos
que o termo apenas tiña un 10% do cociente de procura actual até
avanzado 2008. Este dato non fai máis que reafirmar a relación do termo
App coas aplicacións para dispositivos móbiles.
Entrando en maior detalle podemos observar tres tendencias:
18

2004-2008: Non
existen cambios nas
procuras e no interese
da poboación mundial.
2008-2009: As consultas
e o interese mundial
está en alza. O
inicio desta tendencia
identifícase con tres
feitos moi próximos no
tempo:
- Lanzamento do
App Store en xullo de
2008.
- Publicación do
primeiro SDK para
desarrolladores de
Android en agosto de
2008
- Apertura do Android
Market en outubro de
2008.
2010-2013: mediados
de 2009 iníciase outra
alza do interese mundial
polo termo App,
este novo cambio
vese orixinado por:
- Publicación do
primeiro API para desarrolladores
de iOS 4
e apertura do mercado
global do App Store
para as propostas de
empresas e desarrolladores
de aplicacións
e xogos para iPhone.
(Xuño de 2010)
2013-Actualidade:
podemos observar
como no 2013 se
chega a un punto alto,
debido ao grande
aumento de venda
de smartphones e ao
auxe de aplicacións
como Line, Instagram
e a recén chegada
Spotify.
Concluimos con que,
visto o percorrido e
evolución da línea, o
mundo das apps e o
interese por elas so
vai ir en aumento.
Evolución da búsqueda da palabra app en España
Evolución da búsqueda da palabra app en Galicia
19

Por último é necesario aclarar que para alcanzar calquera tipo
de desenvolvemento é necesario que exista un plan de desenvolvemento,
unha serie de pasos que deban cumprirse adecuadamente
para que se poidan establecer comparacións e saber
se se conseguiron os obxectivos ou non. Por exemplo, para
saber se un neno desenvolveuse adecuadamente é necesario
ter en conta as diferentes teorías e analizar que diferenzas
existen entre o que se espera dun neno da idade do estudado,
e o que é en realidade.
En canto á noción do plan, trátase dun modelo sistemático que
é deseñado antes de concretar unha acción, de maneira tal que
esta poida ser procesada cara aos obxectivos desexados. Un
plan é tamén unha guía.
Para iso o que fai é definir os obxectivos que desexa facer
realidade, establecer que significaría para el alcanzar o éxito,
determinar o camiño que quere seguir, analizar as axudas que
pode necesitar e ir celebrando os logros que vaia conseguindo.
Cando queremos converter unha idea en realidade e desenvolver
un proxecto tecnolóxico temos varias alternativas como
son a de utilizar a solución comercial que mellor se adapte ás
necesidades do devandito proxecto ou ben desenvolver unha
aplicación a medida para o teu proxecto, ambas son radicalmente
diferentes na execución. Se es dos da segunda alternativa,
comentámosche os pasos que hai que dar para facer un
desenvolvemento móbil a medida:
Definición funcional da app
20

O concepto desarrollar fala do que é desenvolver, é dicir, realizar
unha serie de pasos para conseguir uns obxetivos. Trátase
dun modelo sistemático que é deseñado antes de concretar
unha acción, de maneira tal que esta poida ser procesada
cara os obxectivos desexados. Un plan de organización que
é, a súa vez, unha guía.
O desenvolvemento de apps constitúe un terreo por explorar
no que está case todo por descubrir. Existen poucas regras
e as que existen dificilmente permanecen moito no tempo,
por iso existe unha enorme probabilidade de descubrir novos
camiños pero tamén probabilidades de fracasar.
Sen embargo, non todo son malas noticias e podemos aproveitarnos
na experiencia acumulada no desenvolvemento de
software tradicional para desenvolver unha app.
21

22

23

Roles no equipo de desenvolvemento:
- Productor: dirixe o impulso do desarrollo e encárgase de mitigar
os riscos.
- Deseñador: encargados de refinar o concepto da aplicación,
realizar o deseño funcional e probar os prototipos que se vaian
realizando.
- Programador: persoal con experiencia en desenvolvemento
de aplicacións do mesmo estilo.
- Deseñador gráfico: deberán desenvolver interfaces gráficas,
botóns, imaxes...
- Audio: factor que fai destacar unhas aplicacións sobre outras.
úsase sobretodo en videoxogos.
- Calidade: que probe os nosos produtos no maior tipo de dispositivos
posibles.
- Localización: equipo que traduza a aplicación en diferentes
idiomas.
- Márketing: axúdanos a posicionar a nosa aplicación no mercado
para que consigamos un bo comezo.
24

Produtor
Márketing
Deseñador
Localización
Programador
Calidad
Deseñador
gráfico
Audio
.
Ainda que poidan existir variacións dependendo da app a desenvolver, os roles
adoitan ser case sempre os mesmos. Ademáis, non fai falla que interveñan
todos estes perfís para crear unha app, se unha persoa controla de deseño e
programación podería realizala ela soa.
25

Desarrollo áxil:
- Concepto: identificación da idea e carcterísticas principais da
app, Incluirase un estudo de mercado e a valoración económica.
- Preproducción: ou deseño. Aquí comezan os traballos de
construcción da aplicación. A creación de diagramas, maquetas
e táboas para que os programadores entendan o traballo que
teñen que facer.
- Producción: os programadores constrúen a aplicación coas
especificacións obtidas na fase de preproducción e a poñen a
funcionar correctamente.
- Testeo: comprobación de fallos (aspecto gráfico, funcionamento,
eficiencia, optimización no uso dos recursos...)
- Lanzamento: permisos e seguridade móbil, integración de
programas que nos axuden a controlar as descargas e o nivel de
usuarios que usan a app.
- Soporte: mantemento e actualizacións da mesma.
26

Concepto
Soporte
Preproducción
Lanzamiento
Producción
Testeo
27

28

00
Identificar a idea ou problema. Obxectivo
Aquí desglosaremos os detalles principais, próposito e finalidade
da súa creación. Temos que saber a quen vai dirixida, cal é a súa temática
e os seus contidos.
Tamén debemos preguntarnos
que vai facer a aplicación e cal é o
seu atractivo principal (aplicación de
uso recurrente). Este punto serviranos
para facer unha análise posterior
para saber a tasa de desinstalación,
recurrencia de accións... E que problema
concreto vai a resolver e que
necesidades vai a cubrir.
01
Estudo de mercado:
A realización desta análise demostrará que existe unha demanda
para a aplicación e que non és o único que a considera necesaria. Unha
das posibles maneiras para validar a túa idea é utilizar a ferramenta
Google Keyword Planner, que analiza o número de usuarios que buscan
solución a ese problema.
Un xeito eficaz é analizar as tendas de aplicacións, ver que aplicacións
teñen éxito e que tipo de problemas resolven. Moitas veces
podemos atopar aplicacións que dan solución a un problema pero non
da mellor maneira, e con todo teñen éxito por ser a única ou das poucas
existentes. Nese caso debemos ter en conta se a aplicación a desenvolver
é capaz de mellorar a xa existente e abarcar ese mercado.
29

02
Valoración económica da app.
Crear apps móbiles é caro. O investimento económico inicial que
debemos facer para levar a cabo a nosa idea de app é alta.
O seu valor depende moito dos contidos e funcionalidades que
se queiran incluír na aplicación móbil. Os prezos varían e dependen de
moitas cousas, por exemplo, se necesita base de datos, rexistro para acceder
á app, se ten posibilidade de compartir en redes sociais, se existirá
en máis dun idioma,... Sempre se deberá ter en conta que a calidade non
é barata, senón que hai que pagar por ela, especialmente se se fai unha
app nativa. Páxinas como Cuantocuestamiapp.com poden axudarnos a
facernos unha idea da canto nos pode custar.
03
Planificación: pasos e escenarios, cantidade de funcións.
A partir deste momento empézaselle a dar forma á aplicación. Para
isto o máis sinxelo é realizar uns bosquexos simples sobre as diferentes
funcionalidades da aplicación de maneira que un programador poida
empezar a entender o que se trata de crear. Para este paso resulta
de utilidade fixarse noutras aplicacións xa existentes que sirvan como
inspiración e modelo e das que poidamos extraer ideas facilitando así a
comunicación co programador.
Comezar o deseño dunha app non é sinxelo. Existen na rede páxinas
que serven como ferramentas para crear bocetos e pantallas, definir
a estructura, funcionalidades... Servirannos como referencia para realizar
o deseño da nosa aplicación. Entre todas as páxinas que existen caben
destacar: Justinmind, HotGloo, Moqups e Balsamiq.
30

É fundamental un traballo de construcción total do deseño para que
este manteña un aspecto e funcionamento homoxéneo, a creación debe
planificarse claramente de principio a fin. Orden, limpeza e funcionalidade
serán os fundamentos básicos.
Ao proceso de crear unha maqueta ou prototipo da aplicación chamámoslle
Wireframe. Mentres se traballa no wireframe debemos comezar
a crear o guión gráfico da aplicación. A idea é construír unha folla de ruta
que axude a entender a conexión entre cada pantalla e como o usuario
navegará a través da aplicación.
Sen esquecer que cada sistema operativo ten as súas ferramentas
para poder deseñar (Paso 04, páx. 32)
31

04
Escolla de sistema operativo e linguaxe de
programación.
Antes de comezar a programar e buscar un desarrollador de apps
é preciso pensar que sistemas operativos existen e en que linguaxe de
programación se debería desenvolver a app. Antes de escoller o desarrollador
de apps poderás preguntarlle que linguaxes e que sistemas operativos
manexa en función do proxecto a crear.
Os sistemas operativos existentes actualmente son varios, pero
algúns teñen máis cuota de mercado que outros, polos que uns serán
imprescindibles se queremos crear unha app móvil:
O sistema operativo de Google é o líder
absoluto do mercado en todo o mundo,
excepto quizais nos USA onde Apple ainda
ten unha gran presenza. Máis do 80%
de usuarios de dispositivos móbiles usa
Android. Terás que contar pois con programadores
de apps en Android
.
Subcampión no top de sistemas operativos
máis utilizados, Apple segue a
Android, e lidera co iPad o mercado das
tablets. Tamén é recomendable desenvolver
o teu app en iOS, para o que
necesitarás desarrolladores de apps iOS.
32

É o S.O. de Microsoft, empresa especializada
no mundo da informática, que tamén
se lanzou ao mundo mobil cos seus dispositivos.
É o terceiro sistema máis utilizado
pero cunha cota moi baixa.
Con Blackberry ocorre o mesmo. Soamente
será útil ter o teu app neste mercado
cando dominases os anteriores.
Estes sistemas operativos menores son
obxecto duns poucos desarrolladores de
apps especializados. Pero sempre terá
que haber algún desarrollador Symbian,
Ubuntu ou Firefox para desenvolver esas
grandes apps como a de Facebook ou a
de Whatsapp.
Linguaxe de programación
Aínda que a primeira vista isto non pareza incumbencia do deseñador,
a realidade é que o tipo de aplicación que se elixa, condicionará o
deseño visual e a interacción.
Existe practicamente unha linguaxe de programación nativo
para cada sistema operativo. No entanto existe o que se chama o
desenvolvemento multiplataforma que nos permite crear apps móbiles
para varios sistemas a partir dun mesmo desenvolvemento orixinal. Estes
desenvolvementos non son nativos, pero teñen moi bos resultados para
determinados tipos de apps, sen esquecer os desarrolladores de apps
multiplataforma.
33

- Aplicación nativa: é a que se desenvolve de forma específica
para un determinado sistema operativo. O sistema de desenvolvemento,a
linguaxe coa que se crea da igual a plataforma, leva o nome de SDK,
Software Development Kit, e se pode descargar directamente dende as
súas respectivas páxinas.
VANTAXES
DESVANTAXES
- Acceso completo ao dispostivo
- Mellor experiencia do usuario
- Visibilidade en APP store
- Reenvío de notificacións ou “avisos”
aos usuarios
- Diferentes idiomas/habilidades/
ferramentas para cada plataforma
- Máis caras de desarrollar
- Código de cliente non reutilizable
nas outras plataformas
- Actualización constante da app
- Non require de acceso a internet
Linguaxe do SO:
Java Objective-C .Net
34

- Web App: Unha aplicación web ou webapp é a desenvolvida
con linguaxes moi coñecidas polos programadores, como é o HTML,
Javascript e CSS. A principal vantaxe con respecto á nativa é a posibilidade
de programar independente do sistema operativo no que se usará a
aplicación, desta forma pódense executar en diferentes dispositivos sen
ter que crear un código diferente para cada unha.
VANTAXES
- Mesmo código base reutilizable
en múltiples plataformas
- Desarrolo sinxelo e económico
- Non precisa de aprobación externa
- Poden reutilizarse sitios ya diseñados
- O usuario sempre dispón da
última versión
DESVANTAXES
- Require de acceso a internet
- Acceso moi limitado a elementos
do hardware
- Experiencia do usuario e tempo
de resposta menor que na app
nativa
- Maior esforzo en promoción e
visibilidade
As aplicacións web execútanse dentro do propio navegador web
do dispositivo a través dunha URL, polo cal non precisan de instalación
xa que se visualizan usando o navegador e o contido adáptase á pantalla
adquirindo un aspecto de navegación APP.
As aplicacións web adoitan ter unha interfaz máis xenérica e
independente da aparencia do sistema operativo, polo que a experiencia
de identificación do usuario cos elementos de navegación e interacción,
adoita ser menor que no caso das nativas.
35

05
Testeo da aplicación: análise e corrección de
erros
Esta fase é moi importante xa que implantaremos o deseño real
que creamos no 3º paso e serviranos para garantir o perfecto funcionamento
da aplicación.
Deberemos probar
todas e cada unha das
funcións máis dunha vez
de maneira que nos aseguremos
que funcionan
correctamente. Tamén sería
preferible deixar que outras
persoas a utilicen xa que
eles poden atopar novas
necesidades ou achegar
opinións que poidan mellorar
a súa funcionalidade.
Apunta nunha lista todo aquilo que queiras mellorar grazas á información
obtida durante as probas realizadas por ti mesmo e por outros
usuarios. Entrega a lista ao programador para que realice os cambios.
Unha vez mellorada volve probala para comprobar que todo funciona
correctamente.
Unha vez que o deseñador acabe de deseñar as skins ou as
pantallas, todo estará listo para outra rolda de probas. Solidify e Framer
son boas aplicacións de probas para poder probar a túa aplicación xa que
permiten importar o deseño da app e engadir ligazóns onde sexa necesario
para probar o fluxo de pantalla.
36

06
Integrar Anlytics
Analytics axuda a controlar as descargas e a actividade dos usuarios
como instalación ou desinstalación da app,... Podes utilizar ferramentas
como Flurry que está dispoñible de forma gratuíta ou Localytics, que
ten unha versión gratuita e outra de pago.
07
Permisos e seguridade móbil:
A seguridade é un aspecto moi importante da nosa aplicación móbil
posto que conterá toda a información privada e persoal dos usuarios e
que debemos protexer correctamente.
Se non coidamos o aspecto da seguridade deixaremos a aplicación
vulnerable a futuros ataques, ademáis de menosprezar a información
confidencial dos usuarios da app.
Estas son as propostas de controis de seguridade OWASP do
Instituto Nacional de Tecnoloxías da Comunicación para previr eses erros:
Integración de datos segura con outros servizos e aplicacións
Implementar controis para previr o acceso non autorizado
aos recursos de pago.
Asegurar que os datos sensibles son protexidos ao transmitilos
Manexar de forma segura as credenciais dos usuarios.
Manter a seguridade co Backend.
Identificar e protexer os datos sensibles.
Permisos.
37

Neste sentido, ao desenvolver apps móbiles debemos ter claro que
antes de que o usuario descargue a aplicación móbil no seu dispositivo,
ten que aparecerlle a xanela de confirmación coa lista de permisos que
require esa app.
En canto aos permisos debemos evitar solicitar permisos a funcións
que a app non necesite indispensablemente. A gran importancia
que teñen os permisos das aplicacións en cuestións de seguridade é
evidente, por eso haberá que ter coidado con elas ao desenvolver apps
móbiles.
08
Lanzamento
O lanzamento da app será diferente según se traballe en Android,
iOS ou como web app.
Ter conta en Google
Rexistrase como desarrollador na consola de
Google Play cun pago único de 25$
Para obter ingresos coa app hai que seguir
os pasos anteriores e, ademáis, rexistrarse
en Google Wallet
Tamén se pode empaquetar o arquivo en
APK e distribuilo directamente (exp: via mail)
38

Para Apple é necesario un rexistro na súa páxina de
desarrolladores (Developer Apple) e pagar un coste
de licencia anual de 99$ ademáis de pasar por un proceso
de validación (3-7 días)
Deberemos empaquetar os nosos arquivos en librarías
como Córdova ou Phonegrap que permitan visualizar
as aplicacións web como se foran unha aplicación dun
dispositivo móbil.
39

09
Márketing:
Un paso importante é como promocionar unha aplicación móbil
para empezar a conseguir descargas.
Dende a simple elección do nome e pasando pola difusión de contidos
ata selección de keywords podemos seguir unha serie de pasos que
nos poden axudar a dar a coñecer mellor a nosa app.
A elección do nome é clave, ten que ser único e fácil de recordar
e pronunciar.
Elixir a categoría e subcategoría correcta da aplicación para
que os usuarios atopen facilmente a nosa aplicación.
Crear unha icona e incluir capturas de pantalla profesionais
axudará a crear unha primeira boa impresión. A icona debe ser
atractiva para destacar entre as demáis. As capturas de pantalla
axudaran a explicar o contido.
Escribir un título, describir a app e facer uso de keywors (palabras
clave) pode determinar o noso éxito ou fracaso.
Construir unha landing page sinxela e atractiva axudará a explicar
de forma mais clara e concisa o que pode ofrecer a app.
Crea un blogue e compartir diversos contidos que interesen aos
nosos usuarios para enganchalos con información de utilidade.
Promocionar a app en redes sociais como Facebook, Twitter e
Google Plus son indispensables.
Ofrecer un prezo promocional se a app é
de pago impulsa aos clientes a comprar.
40

10
Mantemento- soporte de apps:
Se buscamos que a nosa app sexa o máis profesional posible debemos
facerlle un mantemento contínuo que permita mellorala. As tarefas
do mantemento das aplicacións móbiles involucra:
Corrixir problemas e erros reportados polos usuarios da
aplicación.
Agregar características solicitadas polos usuarios despois do
lanzamento: mellorala según comentarios e valoracións.
Soporte para usuarios.
Aloxamento e administración: custos
de aloxamento e administrativos.
Custos de expansión: servidores adicionais
ou optimización do código para
unha expansión máis eficiente.
41

42

43

44

Establecer uns criterios exactos á hora de deseñar unha aplicación
sería erróneo, pois o mundo móbil, e o dá tecnoloxía
en xeral, está en constante evolución e o que a día de hoxe
é correcto ou nos é de axuda ao pouco tempo pode resultar
obsoleto e de pouca utilidade.
O que sí podemos concretar é que existen certos principios no
mundo do deseño de aplicacións móbiles que se deben ter en
conta e que son universais a cualquer dispositivo.
Cada sistema operativo ten a súa propia identidade que é reflectida
na aparencia e comportamento de cada un dos elementos
que compoñen o seu interfaz. Neles imprime a súa
personalidade, o que fai que a experiencia sexa diferente ás
demais.
45

3 PRINCIPIOS BÁSICOS
SIMPLICIDADE
Directamente relacionada
coa usabilidade. Implica
ser mínimo, contar con poucos
elementos e que estes teñan unha
función ben definida.
A simplicidade consiste tamén en
manexar a economía visual e ter
un bo criterio para determinar que
incluír e que non no deseño. Unha
gran cantidade de elementos pode
atafegar ao usuario.
CONSISTENCIA
Unha app ten diferentes
pantallas que a compoñen
e ao mesmo tempo, está dentro
dun sistema operativo que propón
un determinado aspecto visual e
interacción.
Trata de respectar estes coñecementos
e costumes do usuario,
favorece o uso intuitivo da app, xa
que pode prever o seu comportamento
sen demasiado esforzo.
NAVEGACIÓN INTUITIVA
Relacionada coa consistencia. Cada sistema operativo propón
diferentes elementos para navegar pola app como botóns, pestanas
e paneis. Facer uso deles fará que o usuario os recoñeza a primeira vista
e, xa saiba como ir dunha sección a outra.
Para o usuario é importante saber e prever que pasará despois de pulsar
un botón ou como se mostrarán as pantallas. Unha navegación intuitiva
permite, xustamente, lograr un uso fluído e sen esforzo da aplicación.
46

FORMAS DE SOSTER O MÓBIL
O deseño de aplicacións
para móbiles ten que ter en
conta a forma en que os usuarios
suxeitan os teléfonos xa que as
característcas anatómicas da man
determinan certas zonas da pantalla
que poden ser alcanzadas con
maior ou menor frecuencia.
Unha das maneiras máis habituais
é que o sosteña cunha soa
man, algo que pode ser liberador
xa que deixa a outra man dispoñible
pero ao mesmo tempo, condicionante,
porque outorga moita
responsabilidade ao dedo pulgar
para realizar as interaccións.
A «Lei do polgar» refírese á
superficie de pantalla á que este
dedo ten acceso sen maiores
problemas e danos pistas para
organizar xerárquicamente os
elementos na interfaz.
Con todo, cada sistema
operativo fai un uso diferente dos
espazos en pantalla e isto tamén
condiciona o deseño da aplicación.
47

ORIENTACIÓN DO TERMINAL
Ter en conta a orientación
do dispositivo ao utilizar a aplicación,
significa aproveitar o mellor
de cada escenario. Xeralmente,
os teléfonos adoitan suxeitarse
en forma vertical, mentres que en
tablets é habitual alternar entre o
formato vertical e horizontal
É recomendable deseñar
para ambas orientacións, xa que
desta forma non se forza ao usuario
a usar unha única versión ofrecida.
Non entanto, en cada caso,
haberá que avaliar se a aplicación
realmente o require, considerando
que deseñar a versión horizontal
As diferentes orientacións son unha oportunidade de repensar a disposición de información
Nos teléfonos, o modo horizontal
úsase sobre todo naquelas
situacións que requiren mellor
aproveitamento da pantalla. Por
exemplo, soster o teléfono en forma
horizontal permite dispor dun
teclado máis grande e unha maior
superficie para pulsar as teclas,
permitindo escribir máis comodamente.
non consiste simplemente en trasladar
de maneira directa cada elemento
á posición máis parecida á
súa localización en vertical, senón
en sacar o máximo proveito do espazo
dispoñible no modo apaisado,
recolocando e acomodando os
elementos gráficos e interactivos
para mellorar a usabilidade.
48

PATRÓNS INTERACCIÓN
Os patróns de interacción son solucións xa probadas para dar
resposta a problemas comúns de deseño que ocorren unha e outra vez.
Apoiarse neles pode axilizar e simplificar o traballo de deseño dunha
interfaz. A súa utilización asegura, ademais, que os usuarios atoparán
elementos familiares na interfaz que os farán sentirse máis cómodos e
seguros ao usar a aplicación.
NAVEGACIÓN: Unha navegación simple e consistente é un compoñente
esencial na experiencia de uso da app e xorde de contestar algunhas
preguntas básicas como:
• De que maneira o usuario percorrerá a aplicación?
• A través de menús ou do contido en si mesmo?
• E se vén dunha notificación?
• Como fará para volver atrás cando avanzase?
Pestanas:
Ou “tabs”
serven para
filtrar contidos
ou mudar entre
pantallas que
teñen o mesmo
nivel de xerarquía.
Listas:
Esta forma de
agrupar items
permite ao
usuario tocar
nalgún deles
para obter máis
info. É importante
é xerarquizar
o seu contido.
Gal. Imaxes
A disposición
de imaxes está
rexida pola
retícula de
cada Sistema
Operativo
Menú caixón
Permite cambiar
rapidamente
entre pantallas
da aplicación.
Pulsando un
botón desprégase
de forma
lateral unha lista
cos contidos,
oculta até ese
momento
Volver
A medida que
se avanza en
contidos é necesario
contar
cunha forma de
retroceder ou
volver a outros
niveis.
O botón «volver»
é físico nalgúns
teléfonos
Exemplos na páxina seguinte
49

PATRÓNS INTERACCIÓN
Esquema de pestanas, Tabs
As pestanas sitúanse
arriba en Android e
Windows Phone e en
iOS, abaixo.
Esquema de listas
Uso de listas en Android,
iOS e Windows
Phone.
50

Esquema de galerías
As galerías de imaxes
usan un formato reticular
en Android, iOS
e Windows Phone.
Esquema de menú caixón
O menú tipo caixón
fíxose moi popular
en Android, iOS e
Windows Phone,
aínda que por agora
só o primeiro incorpórao
nas súas guías
oficiais.
Esquema de botón volver
O botón de volver en
Android úsase arriba
entón chamado” up”
e abaixo; en iOS,
sempre arriba e en
Windows Phone,
é o botón físico do
terminal.
51

PATRÓNS INTERACCIÓN
ACCIÓNS: A gran maioría de accións pódense realizar en determinadas
páxinas e só alí teñen sentido. Con todo, pode haber excepcións
cando sexa necesario que unha acción estea sempre visible. Neste último
caso, as accións realmente importantes deben ser destacadas dunha forma
moi evidente.
Hai diferentes sitios onde situar as accións de acordo á súa xerarquía e
funcionamento (máis importantes-visibles menos importantes-ocultas). O
que si, é que a posición ten que ser consistente a través das distintas pantallas
e con outras aplicacións do sistema operativo. Algunhas das preguntas
que se teñen que facer á hora de definir as accións que se atoparán en
cada pantalla da aplicación son:
• Que accións son necesarias neste momento?
• Que accións esperaría atopar o usuario logo de acceder a esta
pantalla?
• Cal de todas as accións é a máis importante?
Barra accións
O compendio de
accións que se
poden realizar
preséntase por
medio de iconas.
A elección
correcta destes
recursos gráficos
é fundamental
Desborde
accións
As funcións
extra e de uso
pouco frecuente
descóbrense
por medio da
«revelación
progresiva».
Están ocultas a
maior parte do
tempo, ata que
o usuario
as demanda.
Accesos
rápidos
Accións que
deben estar moi
a man para que
os usuarios poidan
alcanzar os
seus obxectivos
rapidamente.
Sobretodo para
simplificar accións
repetitivas
Compartir
Unha das
accións máis
empregadas
nestes días,
compartir nas
redes sociais ou
de comunicacións.
Facilitar unha
implementación
integrada
Buscar
Maneira esencial
de chegar
ao consumo de
contidos.
En apps que
mostran grandes
cantidades
de datos a
procura pode
ser a función
primaria
52

Esquema de barras de accións
A barra de accións
sitúase arriba en Android
e abaixo en iOS
e Windows Phone.
Esquema de desborde de accións
Android, iOS e Windows
Phone expoñen
diferentes alternativas
para resolver o desborde
de accións.
Esquema de accesos rápidos
Formas de acceder
rapidamente a accións
en Android, iOS
e Windows Phone.
53

PATRÓNS INTERACCIÓN
Esquema de acción de compartir
A acción de compartir
desprégase arriba
en Android, abaixo
en iOS e en pantalla
completa en Windows
Phone
Esquema de buscar
Buscar sitúase arriba
en Android e iOS;
en Windows Phone
utiliza unha pantalla
aparte.
54

CADROS DE DIÁLOGO: Hai casos puntuais nos que hai que
interromper ao usuario de forma temporal para que tome unha decisión ou
para explicarlle algo que sucedeu antes de continuar unha tarefa. Mentres
os diálogos están visibles en pantalla non é posible facer outra cousa no
resto da aplicación.
Cando se trata de cadros que conteñen avisos que non requiren
unha toma de decisión, estes son informativos e teñen unicamente un
botón que se ocupa de pechalos. É recomendable limitar o seu uso para
mensaxes graves ou transcendentais que non poidan esperar.
Noutros casos, os cadros de diálogo úsanse para comunicar ao
usuario que debe tomar unha decisión para poder continuar e pode elixir
entre dúas ou máis opcións dispoñibles.
Esquema de cadros de diálogo
Cadros de diálogo
que requiren a toma
de decisións por parte
do usuario en Android,
iOS e Windows
Phone
55

PATRÓNS INTERACCIÓN
NOTIFICACIÓNS DENTRO DA APP: Hai certas preguntas
que poden pasar pola cabeza dun usuario cando non ten ningunha confirmación
visual de que a acción que acaba de realizar foi ben. Cuestións
como:
• Que está a facer a app?
• Como saber que a acción funcionou?
• Xa terminou ou hai que facer algo máis?
Para mitigar esta incerteza, aconséllase mostrar explicitamente
como teñen que ir as cousas ou que sucederá con simples mensaxes de
confirmación. Este tipo de mensaxes preséntanse en pequenos avisos
que desaparecen logo duns segundos.
A diferenza dos cadros de diálogo, as notificacións non requiren a
intervención do usuario nin tampouco interrompen o seu fluxo de traballo.
Esquema de notificacións
Só Android ofrece
notificacións in-app
nativas, mentres que
en iOS e Windows
Phone deben programarse
especialmente.
56

INTRODUCIÓN DE DATOS: A introdución de datos no móbil
pode ser tediosa cando se trata de campos que requiren o uso do teclado,
un elemento que ocupa gran parte da pantalla e que dificulta a navegación
entre os campos para introducir información.
En lugar de teclados é recomendable usar outras alternativas como
menús deslizantes, desplegables, checks ou calquera opción similar a
unha lista onde o usuario poida elixir entre varias opcións.
Alternativamente, existen tamén compoñentes de hardware no
teléfono como sensores de localización, cámaras e micrófonos que poden
empregarse tamén para ingresar datos na aplicación.
Esquema de teclados
Diferentes tipos de
teclados usados para
introdución de datos
en Android, iOS e
Windows Phone.
Esquema de introducción por voz
O micrófono do teléfono
pódese aproveitar
para introducir datos
sen necesidade de
usar o teclado, como
fai Google.
57

PATRÓNS INTERACCIÓN
XESTOS: Tocar é o input principal dos teléfonos móbiles modernos.
Todo queda en mans do usuario que manipula os elementos directamente
na pantalla.
Xestos simples como tocar, arrastrar ou deslizar que requiren só
un ou dous dedos foron ben asimilados polos usuarios, que os atopan
naturais e familiares como os que realizan fóra das aplicacións.
O uso dos xestos pódese aproveitar no deseño de aplicacións, que
debe consideralos como medios para realizar accións ou navegar polos
contidos.
Tocar Arrastrar Deslizar
Manter
Dobre pegada
Xuntar-Separar
58

59

60

LIBRARÍAS
O deseño dunha aplicación pode ser todo o persoal que se queira
ou pódese facer uso das “librarías”. E que son as “librarías”?
En programación, chámase así ao conxunto de código externo que
se pode aproveitar para conseguir determinados comportamentos. Ten
relación directa coa linguaxe de programación elixido. É como un kit de
ferramentas de software pequeno e autónomo que contén código e datos
que ofrecen unha funcionalidade moi específica ao usuario. Normalmente
úsase xunto con outras librarías e ferramentas para facer unha aplicación
completa, xa que polo xeral as bibliotecas non son executables.
Polo tanto, unha libraría é os propios recursos que nos ofrecen os
sistemas, ou recursos independentes compatibles con o sistema elexido,
para programar unha aplicación. O uso ou non uso destes implica certas
vantaxes e certas desvantaxes
VANTAXES
- Menor peso da app ao non estar
as imaxes contidas na App.
- Maior rapidez de carga ao recorrer
ás imaxes do núcleo.
- Aspecto robusto e nativo integrado
co Sistema Operativo.
- Redución substancial do tempo
dedicado a deseñar e programar.
DESVANTAXES
- Deseño impersonal, da túa app.
- Marca diluída ao non haber
apena diferenciación respecto de
moitas outras apps.
- Non poderás explotar e mostrar
todo o teu talento ao converterse
nun traballo máis de maquetación
que de deseño.
Todos os sistemas operativos móbiles teñen unha guía acerca de
como deseñar para esa contorna, constitúen unha gran axuda para familiarizarse
co SO.
61

62

MATERIAL DESIGN
Que é Material Design? Históricamente Android tivo deseño Holo,
pero durante a conferencia de Google I/Ou, conferencia anual que da
Google, do 2014 presentouse o que será a guía de deseño para Android,
Material Design.
Material Design creouse na versión Android 5.0 Lollipop. A día de
hoxe están na versión 6.0 Marshmallow, versión mellorada do sistema
que é totalmente compatible con Material. Esta especificación é un documento
vivo que se actualizará a medida que se avanza no seu desenvolvemento,
respectando sempre os principios de deseño.
É importante ter unha idea clara do que supón esta guía gráfica
xa que a partir de agora será o novo estilo e a tendencia que marcará o
deseño Android.
Material Design é un concepto, unha filosofía, unhas pautas enfocadas
ao deseño utilizando Android, pero tamén na web e en calquera
plataforma. O encargado de crear Material Design, e máximo responsable
de deseño en Google, é o chileno Matías Duarte.
INTRODUCCIÓN A MATERIAL DESIGN: Para crear
esta guía a equipa creativa de Google baseou o seu deseño en obxectos
tanxibles nun intento de achegarse ao mundo real, aproximarse á realidade,
algo que nun mundo onde todo é táctil e virtual é difícil.
É un deseño onde a profundidade, as superficies, os bordos, as
sombras e as cores xogan un papel principal e para iso, Material Design,
guíase polas leis da física para que as animacións sexan lóxicas, os
obxectos se superpoñan pero non se atravesen o un ao outro, as sombras
sexan precisas... Unha linguaxe visual que sintetiza os principios
clásicos do bo deseño coa innovación e as posibilidades que ofrecen a
tecnoloxía e a ciencia.
63

MATERIAL DESIGN
PRINCIPIOS:
O material como símbolo
O material como unificador dun
espazo racionalizado baseado
na realidade táctil inspirado no
estudo do papel e da tinta pero
tecnoloxicamente avanzado.
As superficies e bordes do
elemento e o uso de atributos
táctiles axuda aos usuarios a
comprender rapidamenteo a súa
funcionalidade.
Os fundamentos da luz, da
superficie e o movemento son
clave para entender como se
moven, como interactúan e
como existen os obxectos
no espazo. Unha iluminación
realista mostra o encaixe, divide
o espazo e indica as partes en
movemento.
Intrépido-gráfico-intencional
Elementos fundamentais como
a tipografía, as cuadrículas, o
espazo, a escala, a cor e o uso
de imaxes, ademáis de agradar
á vista, crean xerarquía, significado
e orientación. A escolla de
cor deliberada, percorrido visual,
tipografía de gran escala e o
espazo en branco crean unha
interfaz audaz e gráfica que
mergulla ao usuario na propia
experiencia.
A énfase nas accións do
usuario fai que a funcionalidade
principal apareza evidente ante
él e lle proporcione puntos de
referencia.
Movemento= significado
O movemento básease no
usuario como motor primario.
As accións primarias son puntos
de inflexión que inician o movemento,
a transformación de todo
o deseño.
Toda acción ten lugar nunha
única contorna. Os obxectos
preséntanse ao usuario sen
romper a continuidade da experiencia
que este ten, mesmo
a medida que se transforman e
reorganiza.
O movemento serve para
centrar a atención e manter a
continuidade: a retroalimentación
debe ser sutil pero clara
e as transicións eficientes e
coherentes.
64

QUE É?
QUE É MATERIAL?: ENTORNO
Mundo 3D
O entorno 3D é un espazo
en sí, o que significa que todos os
compoñentes teñen X, Y e Z como
eixos de dimensión. O eixo Z está
alineado perpendicularmente ao
plano da pantalla e o eixo X positivo
esténdese cara ao espectador.
Cada pantalla, capa, ocupa unha
soa posición ao longo do eixo Z e ten un espesor 1DP estándar, equivalente
a un píxel de espesor nas pantallas cunha densidade de píxeles de
160. O entorno 3D emúlase mediante a manipulación do eixo Y
Luz e sombra
Traballando nunha contorna virtual as luces que iluminarán o
espazo de traballo serán, claramente, artificiais. O uso dunha proxección
primaria das luces crea sombras direccionais, mentres que a luz ambiente
crea sombras suaves desde todos os ángulos. Polo tanto, as sombras
emitidas sempre serán por estas dúas fontes de luz.
65

MATERIAL DESIGN
QUE É MATERIAL?: OBXETOS NO ESPAZO 3D: Hai
paralelismos entre a organización de obxectos tanto no mundo físico
como no espazo de Material Design. No mundo físico, os obxectos poden
ser apilados ou fixados un respecto doutro, pero non se pode pasar a
través deles, entón, estes obxectos proxectan sombras e reflicten luces.
Esas calidades son aplicadas aos obxectos de Material Design, e
axudan a crear un modelo espacial consistente que se aplique ao longo
de todas as apps de forma que sexa familiar aos usuarios.
Elevación
A elevación é a posición relativa
dun obxecto ao longo do eixo Z
da vista principal.
A elevación é medida nas
mesmas unidades que nos eixos
(X,Y), normalmente en densidade
independente de píxeles (dp). Material
ten como estándar 1dp de grosor, todas as elevacións son medidas
dende a parte superior dunha superficie até a parte superior doutra
superficie.
- Elevación en repouso: Todos
os obxectos teñen unha elevación
en repouso, independentemente
de que este obxecto
sexa un compoñente pequeno
ou unha capa que ocupe toda a
pantalla.
No estado estático a elevación
para un obxecto non cambia. É
constante en toda a app.
66

QUE É?
A elevación en repouso para un tipo de compoñente ten que ser
coherente en todas as apps dentro dunha plataforma. Con todo,
o mesmo tipo de compoñente pode ter diferentes elevacións en
función da plataforma na que se atope, dependendo do espesor
da contorna
- Elevación receptiva e desprazamentos
de elevación dinámicos:
Certos tipos de compoñentes
teñen unha elevación
receptiva, é dicir, cambian a súa
elevación en resposta ás entradas
do usuario ou os eventos do
sistema. Os diferentes estados
dos compoñentes (normal, enfocado,
presionado, etc) poden
provocar cambios na elevación,
os cales serán correctamente
implementados usando desprazamentos
de elevación dinámicos.
Os desprazamentos de elevación dinámicos son relativos ao estado
de repouso do compoñente, e actúan como a elevación que
alcanzará o compoñente ao cambiar entre os estados dados do
mesmo. Tamén se aseguran de que os cambios de elevación
para unha acción determinada son coherentes nun conxunto de
compoñentes. Por exemplo, para todos os compoñentes que
se eleven ao presionar sobre eles teñen o mesmo cambio de
elevación.
Unha vez que o evento de entrada é completado ou cancelado,
o compoñente regresará á súa elevación de repouso.
67

MATERIAL DESIGN
- Sombras funcionais: As sombras proporcionan varios sinais
visuais importantes sobre a organización dos obxectos no espazo.
As sombras son o único elemento que nos indica a cantidade
de separación entre as superficies. A elevación dun obxecto determina
a aparencia visual da súa sombra.
Non
Sen unha sombra, non hai nada
que indique que o botón flotante é
unha superficie separada do resto
de superficies do fondo.
Si
As sombras suaves e alongadas
indican que o botón flotante está
nunha elevación máis alta que a
barra da app.
Nos movementos, as sombras tamén proporcionan sinais relacionados
coa dirección do movemento. É outra ferramenta para
indicar se a distancia entre dúas superficies está a aumentar ou
a diminuir.
Xerarquía dos Obxectos
En función de como se organicen os obxectos, ou as coleccións
de obxectos nunha app, determínase como se moverán en relación uns
fronte aos outros. Os obxectos poden moverse de forma independente ou
estar limitados por outros de maior xerarquía.
Todos os obxectos son parte dunha xerarquía descrita en termos
de relacións pai-fillo. O fillo en cada unha desas relacións é o elemento
68

QUE É?
que se subordina ao elemento pai. Os obxectos poden ser fillos tanto do
sistema como doutros obxectos.
- Especificacións pai-fillo:
• Cada obxecto ten un pai.
• Cada obxecto pode ter un número de fillos.
• Os fillos herdan as propiedades dos seus pais relacionadas coa
transformación como: a posición, a rotación, a escala e a elevación.
• Os irmáns son obxectos do mesmo nivel nunha xerarquía.
- Excepcións: Os elementos emparentados coa orixe ou a raíz,
como os elementos principais da UI, móvense de forma independente
ao resto de obxectos. Por exemplo, o botón flotante
(FAB) non se despraza co contido. Outros elementos que se inclúen
nestas excepcións son:
• Menús laterais ou navigation drawers.
• Action bars ou toolbars.
• Diálogos.
- Interaccións: Como os obxectos interactúan entre eles vén
determinado pola súa localización na xerarquía pai-fillo.
Por exemplo:
- Os fillos teñen unha separación mínima no eixo Z respecto do
seu pai; os outros obxectos non interfiren entre o pai e os fillos.
- Nun desprazamento a través dunha colección de “cards”, ou
tarxetas, os cartóns son irmás entre eles, así que se moverán
ao mesmo tempo.
69

MATERIAL DESIGN
EN QUE SE BASEA MATERIAL DESIGN?: Material Design
recibe o seu nome por estar baseado en obxectos materiais. Pezas
colocadas nun espazo (lugar) e cun tempo (movemento) determinado
delimitando claramente o tipo de menús, os botóns e os tipos de imaxes
a elixir.
Elementos ordenados e imaxes clara:
Material Design é un deseño cunha tipografía clara, caixas ben ordenadas,
cores e imaxes rechamantes que lle otorga un sentido da orde
e unha xerarquía moi marcada, ademáis de centrar a nosa atención en
todo o conxunto do deseño. Estas ideas xa se aplican en moitos deseños,
pero en Material Design Google creou unhas normas moi claras de como
levalo á práctica.
Luz e sombras dan sensación de xerarquía:
Uno dos elementos clave é a luz e as sombras. Unha iluminación
realista proporciona indicios de como se comportará un elemento e en
que nivel se atopa este. Imaxinemos un cadrado que ten a súa sombra
sobre outro cadrado, o cerebro humano entende que o que recibe a sombra
é o que está debaixo.
O movemento é a mellor forma de guiar ao usuario:
O movemento é outro elemento fundamental, por exemplo: un
obxecto que parpadea significa que está a chamar a túa atención, un elemento
que se expande é que se acaba de abrir. Todos estes movementos
créanse nunha dirección determinada.
70

QUE É?
Animacións e movemento, elementos característicos:
É importante fixarse no tempo en que aparecen as cousas; primeiro
imaxes e logo botóns flotantes. Tamén na velocidade, xa que os
elementos non aparecen de súpeto. Finalmente está a dirección dende
a que aparecen pois este movemento está a indicar ao usuario de onde
provén a información.
Un deseño adaptado para todo tipo de pantallas:
Material Design on se debe concebir como como un deseño destinado
para as aplicacións móbiles de Android. De feito, é multiplataforma.
Tantos os smartphones, tablets, smartwatches ou televisores poden facer
uso deste deseño. Tamén as páxinas webs. Material Design foi creado
pensando en todos os sistemas, non só Android.
Material Design ten as súas propias normas para case todos os
detalles e estes se manteñen independentemente do tamaño de pantalla.
Precisamente esa transversalidade é o seu punto forte.
PRINCIPIOS DE DESEÑO PARA ANDROID: Estes
principios de deseño foron desenvolvidos polo Equipo de Experiencia de
Usuario Android tendo en mente os intereses dos usuarios e deben ser
considerados á hora de facer unha app, ao aplicar a túa creatividade e
ao establecer o deseño. O deseño de Android ten en conta tres puntos
principais, os cales se aplican tanto ao noso núcleo de aplicacións como
ao longo de todo o sistema. Polo tanto, se debe deseñar unha aplicación
considerando devanditos puntos: Sedúceme, simplifica a miña vida e
sorpréndeme.
71

MATERIAL DESIGN: SEDÚCEME
Séduceme:
As aplicacións de Android son elegantes e esteticamente agradables.
As transicións son rápidas e claras; a disposición dos elementos é
eficaz e as tipografías son nítidas e significativas. Como unha ferramenta
ben feita, unha aplicación debería esforzarse en combinar a beleza e a
simplicidade co propósito de crear unha experiencia fácil de usar ademais
de poderosa.
- Deléitame de forma sorprendente:
Unha superficie atractiva,
unha animación colocada no
lugar correcto ou un efecto de
son ben sincronizado adoitan
ser experiencias desfrutable. Os
efectos sutís contribúen a crear
un sentimento de facilidade e a
sensación de que se conta cunha
forza potente.
- Os obxectos reais son máis
divertidos que os botóns e os
menús: Permite que se poidan
tocar e manipular directamente
os obxectos da aplicación. Isto
reduce o esforzo cognitivo que
se precisa para levar a cabo
unha tarefa.
72

PRINCIPIOS
- Toque persoal: Aos usuarios
gústalles agregar toques persoais,
pois isto axúdalles a sentir
que teñen o control. Ofrece
opcións predeterminadas prácticas
e atractivas, pero tamén ten
en conta personalizaciones opcionais
e divertidas que non entorpezan
as tarefas principais.
- Coñéceme: Aprende das preferencias
dos usuarios. En lugar
de pedirlles que elixan as mesmas
cousas unha e outra vez,
permita que poidan acceder facilmente
ás opcións que xa elixiron
antes.
Simplifica a miña vida:
As aplicacións de Android fan a vida máis fácil e son simples de
comprender. Cando as persoas usen unha aplicación por primeira vez,
deberían entender intuitivamente a maioría das funcións importantes.
As tarefas simples non requiren procedementos complexos, e as tarefas
complexas son adaptadas polas mans e a mente humana. Calquera
persoa sen importar a súa idade ou cultura, ten que sentir firmemente o
control e nunca atafegarse por culpa de ter que tomar demasiadas decisións
ou calquera aspecto irrelevante.
- Se breve: Utilice frases curtas con palabras simples. As persoas
tenden a omitir as oracións longas.
73

MATERIAL DESIGN: SIMPLIFICA
- As imaxes son máis prácticas
que as palabras: Considera
a idea de utilizar imaxes para
explicar as ideas. As imaxes
atraen a atención das persoas e
poden ser moito máis eficientes
que as palabras.
- Decide por min, pero permíteme
ter a última palabra: Actuar
sen preguntar primeiro. Ter
que elixir demasiadas veces e
tomar moitas decisións fai que
as persoas se sintan molestas.
Permite que os usuarios poidan
desfacer as súas eleccións no
caso de que non sexan o que
desexan.
- Só móstrame o que necesito,
cando o necesito: Os usuarios
síntense agobiados cando
se lles presenta demasiada
información ao mesmo tempo.
Dividir as tarefas e a información
en fragmentos pequenos e
ocultar as opcións que non son
fundamentais no momento ensina
aos usuarios.
74

PRINCIPIOS
- Sempre debo saber onde me
atopo: Deixa que os usuarios
sintan que coñecen o camiño
de regreso. Para iso, deseña
as distintas partes da aplicación
de modo tal que se vexan diferentes
e utiliza transicións para
mostrar a relación entre as pantallas.
- Nunca perdas o que é meu:
Garda aquelas cousas que os
usuarios crearon e permítelles
acceder a elas dende calquer
lugar. Lembra as configuracións,
os toques persoais e as
creacións en tódolos teléfonos.
Esta é a forma de facer que as
actualizacións sexan o máis
simple do mundo.
- Se se ve igual, debe funcionar
da mesma maneira: Os
usuarios deben distinguir as
diferentes funcións deseñando
estas cun aspecto diferente en
lugar de sutís. Hai que evitar
os módulos, que son sitios que
polo xeral locen similares pero
actúan diferente ante a mesma
entrada.
75

MATERIAL DESIGN: SORPRÉNDEME
- Interrómpeme so se é
importante: Evite aos usuarios
os pormenores pouco importantes.
As persoas desexan estar
concentradas e, a menos que
sexa fundamental, unha interrupción
pode resultar abrumador
e frustrante.
Sorpréndeme
Non basta con facer unha aplicación simple e fácil de usar. As
aplicacións de Android permiten ás persoas facer novas tarefas e usar as
apps de formas novas e orixinais, permiten ademáis combinar as aplicacións
dentro de novos fluxos de traballo a través das multitarefas, das
notificacións e de compartir a través de calquera aplicación.
- Ofrézame trucos que funcionen
en todos lados: As
persoas síntense plenas cando
descobren cousas por si mesmas.
Logra que a aplicación
sexa simple de utilizar aproveitando
os patróns visuais e a memoria
muscular doutras aplicacións
de Android.
- Non é fallo meu: Se sutil cando solicites aos usuarios que realicen
correccións. Eles desexan sentirse intelixentes cando usan
unha aplicación. Se fan algo mal, bríndalles instrucións claras de
recuperación, pero evita darlles detalles técnicos.
76

PRINCIPIOS
- Fomenta o simple: Desagrega
as tarefas complexas
en pasos máis pequenos que
se poidan cumprir facilmente.
Ofrece comentarios sobre as
accións, mesmo se é simplemente
un feixe de luz ténue.
- Fai o traballo pesado por
min: Fai que os principiantes
se sintan como expertos ao
permitirlles facer cousas que
pensaron que nunca poderían
facer. Por exemplo, a través dos
múltiples efectos de fotografías,
podes lograr que as fotografías
de principiantes se vexan excelentes
en pequenos pasos.
- Fai que o importante sexa
rápido: Non tódalas accións
son iguais. Decide que é o máis
importante nunha aplicación e
fai que os usuarios o poidan atopar
facilmente e utilizar de forma
rápida, como o obturador dunha
cámara ou o botón de pausa
dun reprodutor de música.
77

VISTA XERAL DA UI
VISTA XERAL DA UI: A interfaz de usuario (UI polas súas siglas
en inglés) de Android proporciona unha estrutura sobre a cal construír
unha aplicación. Os aspectos máis importantes inclúen a pantalla de
inicio, a navegación global do dispositivo e as notificacións.
A aplicación debe manter a consistencia da experiencia que transmite
Android, e debe ser ao mesmo tempo grata de usar.
Pantallas
Pantalla de inicio
A pantalla de inicio é un espazo
encargado de aloxar os accesos
directos das aplicacións, os
cartafois e os widgets. Podes
navegar entre os diferentes
escritorios mediante deslizamientos
cara á dereita ou a
esquerda.
Pantalla “caixa aplicacións”
Esta pantalla permíteche atopar
todas as aplicacións e widgets
instalados no dispositivo.
Os usuarios poden arrastrar
unha icona de aplicación ou un
widget e colocalo nun sitio baleiro
que exista en calquera dos
escritorios da pantalla de inicio.
Pantalla de Apps recentes
Recentes proporciona unha
forma eficiente de cambiar
entre aplicacións que se usaron
recentemente.
O botón Recentes á esquerda
da barra de navegación mostra
as aplicacións coas que o
usuario interactuou máis recentemente.
78

DISPOSITIVOS
Navegación global:
As barras do sistema son áreas da pantalla dedicadas a mostrar as
notificacións, o estado das comunicacións do dispositivo e outros elementos
da navegación. Normalmente as barras do sistema móstranse ao
mesmo tempo que unha aplicación. As aplicacións que mostran o contido
en modo inmerso, como as películas ou as imaxes, poden ocultar temporalmente
as barras do sistema para permitir ao usuario gozar do contido
en pantalla completa sen distraccións.
- Barra de Estado: Mostra as notificacións pendentes á esquerda
e o estado, así como o tempo, o nivel de batería, a forza do
sinal móbil ou WI-FI...
Notificacións:
As notificacións son mensaxes breves as
que poden acceder os usuarios dende a barra de
estado en calquer momento. Proporcionan actualizacións,
recordatorios ou información que é importante
pero non o suficiente crítica como para interrumpir
una acción.
Tocar unha notificación
abre
a aplicación
asociada.
A forma recomendada de presentar unha notificación é cun título
que inclúa dúas liñas de texto.
79

DISPOSITIVOS E MEDIDAS
DISPOSITIVOS E PANTALLAS: Android está presente en
millóns de teléfonos, tablets e outros dispositivos nunha ampla variedade
de tamaños e formas de pantallas. Grazas á vantaxe do sistema de
disposicións (layouts) flexibles de Android, podes crear aplicacións que
se escalen axeitadamente a calquera pantalla, desde grandes tablets aos
teléfonos máis pequenos.
Flexibilidade
Estira e comprime as túas
disposicións para que se acomoden
ás diferentes alturas e
anchuras das pantallas.
Optimización dos layouts
Nos dispositivos máis grandes
podes aproveitar o espazo para
mostrar unha pantalla real extra.
Creando composicións de vistas
podes combinar múltiples vistas
para revelar máis contido e
facer máis fácil a navegación.
Recursos para todos
Proporciona recursos para as diferentes
densidades de pantalla
(DPI) existentes para asegurarte
de que a túa aplicación se mostra
ben en calquer dispositivo.
Estratexias
Por onde comezar cando se
vai a deseñar unha app para varias
pantallas? Unha forma é traballar
seguindo unha estándar base (tamaño
normal e unha densidade MDPI) e aumentar ou reducir o tamaño para o
resto. Outro camiño é empezar a deseñar para as pantallas máis grandes e
despois reducir o tamaño e arranxar os problemas relacionados coa interfaz
para que funcione ben nas pantallas máis pequenas. (pax. 100-101)
80

ESTILOS
MEDIDAS E CUADRÍCULAS: Os dispositivos, ademais do
tamaño físico, tamén varían na densidade de pantalla (DPI). Para facilitar
o deseño dunha aplicación pensa que cada dispositivo ten unha pantalla
cun tamaño e densidade particular.
• O tamaño destes son móbiles (máis pequenos de 600dp) e
tablets (maior ou igual a 600dp).
• A densidade pode ser LDPI, MDPI, HDPI, XHDPI, XXHDPI e
XXXHDPI.
Optimiza a interfaz dunha aplicación deseñando disposicións (layouts)
alternativas para os diferentes tamaños de pantalla e proporciona
imaxes con diferente resolución para cada densidade de pantalla.
É importante deseñar e implementar as aplicacións para múltiples
densidades, segue as guías de abaixo e a documentación referida ás
dimensións das disposicións con medidas en unidades dp en lugar de en
píxeles.
Consideracións acerca
do espazo
Os dispositivos variarán a
cantidade de píxeles independentemente
dos píxeles (dp) que poidan
mostrar.
48dp de Tamaño
Os elementos da interfaz que se poden tocar normalmente teñen
un tamaño de 48dp.
81

DISPOSITIVOS E MEDIDAS
- Por que 48dp?: De media, 48dp é igual a un tamaño físico
próximo aos 9 mm (con algunha variación). É un rango bastante
cómodo de tamaño recomendado para elementos que poden
ser tocados (de 7 mm a 10 mm) e os usuarios serán capaces de
tocalos cos seus dedos cunha boa precisión.
Se deseñas os teus elementos con polo menos 48dp de altura e
anchura garantirás que:
• Os teus obxectos nunca serán máis pequenos que o mínimo
recomendado de 7 mm en calquera pantalla nos que se mostren.
• Haberá unha boa relación entre a densidade da información xeral
e a dos elementos na interfaz.
- Pensa nos ocos: O
espazo mínimo entre
cada elemento é de
8dp.
82

ESTILOS
Exemplos
Guías e marxes
- Marxes esquerdo e dereito da
pantalla: 16dp
- Contido contíguo ao marxe
esquerdo da pantalla: 72dp
Espaciado vertical
1- Barra de estado: 24dp
2- Toolbar: 56dp
3- Título e lista de items: 72dp
4- Subtítulo: 48dp
5- Espaciado entre áreas de
contido: 8dp
Tamaño de espazos táctiles
Para garantir o equilibrio e o uso
da información, os obxectos táctiles
deben ser de polo menos
48 x 48 dp . Con 8dp mínimo de
espazo entre eles.
Elementos de polos menos 48dp
de tamaño polo alto e o ancho.
- Avatar: 40dp
- Icona: 24dp
- Espazo táctil de ambas: 48dp
- Exemplo de espazos táctiles
83

TIPOGRAFÍA
TIPOGRAFÍA: A linguaxe de
deseño de Android baséase nas
ferramentas de tipografía tradicionais
tales como a escala, espazo, cadencia
e aliñamento coa cuadrícula
subxacente. Para soportar o uso
de tipografías, Ice Cream Sandwich
introduciu un novo tipo de familia
chamada Roboto, creada especificamente
para os requisitos dunha UI
para as pantallas de alta resolución.
O actual sistema TextView
(Vista de Texto) ofrece a fonte
Roboto en 6 pesos: delgado, lixeiro,
normal, medium, bold e negrita,
podendo combinarse cada unha co
estilo cursiva ou Condensed.
Escala tipográfica
O contraste nos tamaños de
letra pódense combinar de diferentes
formas e orde para crear
deseños comprensibles. Con todo,
cantos máis tamaños de letra existan
na mesma UI, máis incomodidade sufrirá o usuario. O sistema de Android
usa o seguinte conxunto limitado de tamaños de letra. Esta escala
tipográfica funciona á perfección ao longo do layout, mantén o equilibrio
na densidade do contido e a comodidade ao ler.
Cor e contraste:
Unha cor de texto similar ao fondo resultaría difícil de ler, igualmente
acontece cun texto que xenere moito contraste.
84

ESTILOS
Malos usos
1. Deixar colgadas palabras curtas
2. Deixar fisuras
3. Separar palabras
4. Deixar orfas
5. Deixar espazos en branco Separar
palabras con guión
Lexibilidade:
Considerando estes consellos
de lexibilidade e tamaño de liña,
temos en conta que:
• 60 caracteres por linea proporciona
unha boa lectura
• Un texto ancho dificulta a
lectura ao non saber onde
comeza e onde remata.
• Un texto estreito obliga a
voltar atrás moi a miúdo
rompendo o ritmo da lectura
85

PALETA DE CORES
COR: A cor en Material Design está inspirada por matices atrevidos en
contra posición con entornos apagados, sombras intensas, e toques de
luz brillantes.
Paleta de cores
A paleta de cores que nos proporciona Material Design comprende
cores primarias e acentuadas deseñadas para traballar en perfecto equilibrio.
Poden ser usadas tanto como para a ilustración como para crear a
icona de marca da app.
86

ESTILOS
ICONAS: Unha icona é unha imaxe que representa de maneira rápida
e intuitiva unha acción, un estado ou unha aplicación.
Cando se deseña unha iconas para unha aplicación, é importante
pensar que dita aplicación pode ser instalada nunha ampla variedade de
dispositivos cuns rangos de densidades de píxeles diferentes, isto ten
fácil arranxo se se proporcionada un tamaño de icona para cada tamaño
de pantalla.
Lanzador (Launcher)
A icona do launcher é a representación visual da túa aplicación na
Pantalla de Inicio (Escritorio) ou na Pantalla caixa de aplicacións (Box de
Aplicacións). É importante asegurarse de que a icona para o launcher é
claramente visible en calquer tipo de fondo.
Tamaños e escala
As iconas do launcher nun
dispositivo móbil deben ser de
48×48 dp.
As iconas para mostrar en Google
Play deben ser de 512×512
píxeles.
Proporcións
Todos os recursos, 48×48 dp.
Estilo
Usa siluetas diferentes. vistas
frontais tridimensionales cunha
suave perspectiva como se
mostra arriba, así os usuarios
perciben algo de profundidade.
87

ICONAS
Barra de Accións (Action Bar)
As iconas da barra de accións son imaxes que representan as accións
máis importantes. Estas deben representar un concepto simple que
se poida comprender cunha rápida ollada.
Os signos ou iconas predefinidos deberían ser usados para certas
accións comúns como poden ser “actualizar” ou “compartir”.
Tamaños e escala
As iconas da barra de accións
para os teléfonos debería ser de
32×32 dp
Área de actividade e proporcións
Tódolos recursos, 32×32 dp
Cadrado óptico, 24×24 dp
Estilo
Pictográfico, plano, non moi
detallado, con suaves curvas e
sombras ben definidas.
Iconas pequenas e contextuais
Dentro do corpo dunha aplicación, as iconas pequenas úsanse
para as accións superficiais ou proporcionan estados para elementos
específicos. Por exemplo, na aplicación Gmail, cada mensaxe ten unha
icona en forma de estrela que marca a mensaxe como importante.
88

ESTILOS
Tamaños e escala
As iconas pequenas deberían
ter un tamaño de 32×32 dp
Área de actividade e proporcións
Tódolos recursos, 16×16 dp
Cadrado óptico, 12×12 dp
Estilo
Neutral, plano e simple. Cheo
de formas máis fáciles de distinguir
que delgadas líñas.
Iconas das Notificacións
Se unha aplicación xera notificacións, debería proporcionar unha
icona que o sistema poida mostrar na barra de estado en calquer momento
en que haxa unha nova notificación dispoñible.
Tamaños e escala
As iconas de notificacións
deben de ser 24×24 dp
Área de actividade e proporcións
Tódolos recursos, 24×24 dp
Cadrado óptico, 22×22 dp
Estilo
Mantemento do estilo plano e
visual que no launcher
89

MATERIAL DESIGN
ESTRUTURA DUNHA APP: A estrutura dunha aplicación ven
determinada pola cantidade de contido e tarefas (superficiais) que un
usuario vai facer, ademais do número de ventás que esta teña
Ventá principal
Esta é a primeira pantalla que as persoas verán despois de abrir
unha app, así que debería ser unha experiencia gratificante tanto para
novos usuarios como para os que xa a usan.
- Presentación do contido: Centra o contido na pantalla inicial.
Se deberán elixir disposicións que sexan visualmente atractivas
e apropiadas para os tipo de función que desempeñe a app.
- Barras de navegación e acción:
Mostra accións importantes.
• Mostrar a icona ou nome da
túa aplicación.
• Se consiste en múltiples vistas
hai que facilitar a navegación
engadindo pestanas,
spinners ou un menú.
• Inclúe a acción Buscar na
barra de acciónsse é necesaria
para a app.
90

PAUTAS
Controis da ventá principal
A pantalla principal trata de introducir ao usuario a áreas de maior
funcionalidade. En moitos casos, esta pantalla consistirá en múltiples vistas.
É importante decidir o control que mellor se adapte ás necesidades
ou servizos que ofreza a app:
- Pestanas fixas: Este tipo de
pestanas están sempre visibles
na pantalla principal. Facilitan a
exploración como cambiar entre
elas. Usa estas pestanas se:
• Os usuarios da app cambian de pantalla frecuentemente.
• Tes un número limitado de tres pantallas de nivel superior.
• Queres que o usuario teña claro as diferentes pantallas.
- Spinners: Un spinner é un
menú descendente que permite
ao usuario cambiar entre as vistas
dunha app. Usa spinner se:
• Non queres perder o espazo
vertical por culpa do espazo
ocupado dunha pestana.
• O usuario cambiará entre
vistas do mesmo conxunto
de datos.
91

ESTRUTURA DUNHA APP
- Menú, caixón de navigación: normalmente
contén un gran numero de elementos e accédese
premendo o botón específico que fai que
este menú apareza deslizándose dende a esquerda.
Proporcionan o acceso a pantallas de
niveis inferiores. Usa o menú de navegación se:
• Non queres perder o espazo vertical
por culpa do espazo ocupado por unha
pestana.
• Tes un gran número de vistas de nivel
superior.
• Queres proporcionar acceso directo a
pantallas de nivel inferior.
• Queres proporcionar unha rápida navegación
cara a vistas as cales non teñen nada
que ver directamente entre elas.
• Tes ramas de navegación profundas.
• Para separar os diferentes elementos do
caixón de navigación faise uso das “listas”
para separar os diferentes contidos.
Categorías
O propósito dunha aplicación, con certa profundidade de datos, é a
navegación a través de categorías organizadas por niveis, onde os datos
poden ser vistos e xestionados.
Hai varias formas que se poden empregar para reducir a percepción
dunha navegación pesada:
92

PAUTAS
- Uso de pestanas para combinar a selección de categoría
e a visualización de datos: Isto pode ser útil se as categorías
son familiares ou o número de categorías é pequeno. A navegación
lateral entre categorías cunha certa cantidade de datos será
máis rápida que nunha navegación explícita.
• Usa pestanas desplazables se as categorías son familiares,
predicibles ou teñen unha estreita relación.
• Utiliza pestanas fixas se as categorías nas pestanas non
están relacionadas tendo todas as categorías á vista
- Permite acurtar o camiño a
través das xerarquías: mostra
as accións usando menús desplegables
ou dividindo os elementos
da lista.
• Actuar sobre múltiples elementos.
Analiza que accións
poden aplicarse ao devandito
conxunto de elementos.
93

ESTRUTURA DUNHA APP
Resumo
• Atopa a maneira de mostrar o contido útil na pantalla inicial.
• Usa barras de acción para proporcionar unha navegación consistente.
• Utiliza unha navegación horizontal e accesos directos sobre as
xerarquías máis superficiais.
• Usa a opción multi-selección para permitir ao usuario actuar
sobre conxuntos de datos.
• Permite unha rápida navegación entre os detalles dos elementos
mediante as vistas deslizables ou desprazamento entre vistas.
• Crear unha navegación eficiente entre as vistas detalle.
94

PAUTAS
ACTION BAR (BARRA DE ACCIÓNS): A action bar é un
elemento que está na zona superior da pantalla e nos amosa o estado ou
localización actual dentro da aplicación e, polo xeral, sempre está visible
en todas as actividades da app.
- Proporciona varias funcións:
• Realiza accións dunha forma accesible e predicible.
• Facilita unha navegación consistente ao cambiar de vistas dentro
das apps.
• Reduce o desorde proporcionando unha zona onde situar accións
que raramente se usan.
• Proporcionar un espazo de identidade propia ás apps.
Organización xeral
A action bar divídese en 4 áreas fundamentais na maioría das apps.
1. Icona da App: A icona da app establece a identidade da app.
Pode ser substituído cun logo diferente se se desexa.
2. Control de vista: Para cando se amosa información en diferentes
vistas.
Se a app non ten diferentes vistas, este espazo pódese aproveitar
para engadir contido non interactivo, como o nome da app ou
calquera tipo de información.
95

BARRA DE ACCIÓNS
3. Botóns de acción: Mostra as accións máis importantes,
como pode ser a acción de compartir, dunha app. Se hai varias
e non caben estas moveranse ao menu overflow.
4. Menú overflow de acción: Move a este menú as accións que
adoitan utilizarse menos.
Action Bar Contextual
Unha Action Bar Contextual
(CAB polas súas siglas en inglés,
contextual action bar) é unha barra
de acción temporal que se superpón
sobre a Action Bar da app durante
o tempo que está activa unha
tarefa secundaria en particular. A
CAB de selección aparece despois
dunha presión prolongada sobre
un elemento e, polo tanto, provoca
o cambio ao modo de selección e se usa normalmente para as tarefas
relacionadas coa selección de datos ou texto.
Lista de Verificación para a Action Bar
Á hora de crear a Action Bar e planear as súas división habería que
plantexarse tres cuestións fundamentais:
• Que importancia ten a navegación nas tarefas da túa app?
• Cales das accións necesitan estar dispoñibles constantemente
• Que é o suficientemente importante para garantir que se mostre
continuamente?
96

PAUTAS
CONFIRMAR E RECOÑECER: Nalgunhas situacións, cando o
usuario vai realizar unha acción nunha app, é unha boa idea que confirmen
ou recoñezan esa acción a través de texto.
Confirmar
Pregunta ao usuario para que
verifique que é consciente da acción
que vai a realizar. Só nalgúns
casos, a confirmación preséntase
como unha información de advertencia
ou crítica relacionada coa
acción para que poida reconsiderar
se continuar ou deter a mesma.
Recoñecer
Mostra un texto para confirmar
ao usuario que a acción que
reclamou se completou con éxito e
eliminar así a incerteza de saber se
o sistema realizou a operación ou
non. Nalgúns casos, o recoñecemento
preséntase xunto a unha opción
que permite desfacer a acción.
Confirmar e recoñecer pode previr aos usuarios dos erros ou accidentes
que poidan ter e lamentar.
97

98

Saber por onde comezar a deseñar unha app por primeira vez
non é sinxelo, a cantidade de información que circula na rede
pode ser de moita utilidade, pero tamén pode dar orixe a confusións.
Isto acontece porque a rede é un lugar de encontro
común, tanto como para principiantes como para expertos, é
a información crúzase.
A mellor maneira de comezar, como xa se comentou no capítulo
de desenvolvemento de apps, é cunha serie de bocetos.
E cómo dar forma a eses bocetos? Antes de deseñar, se o fas
para Android, debes saber que este segue certos parámetros
que suxire na súa guía de creación Material Design.
Android ofrécenos ahí todos os recursos necesarios para comezar
a nosa app, dende patróns de medida, ata iconas ou
paletas de cores, ademais de indicarnos como e onde debemos
situar cada pantalla ou ventá da app e que comportamento,
ou comportamentos, pode aceptar esta.
99

MATERIAL DESIGN
UNIDADES DE MEDIDA: No momento de desenvolver unha
aplicación para Android atopámonos co problema da gran cantidade de
dispositivos dispoñibles no mercado, cada un cun tamaño de pantalla
diferente.
Para solucionar este problema coas aplicacións, o sistema Android
proporciona varias unidades de medida que nos axudarán a que a nosa
aplicación se vexa correctamente sexa cal for o tamaño da pantalla. Para
deseñar interfaces dunha app é obrigatorio entender e dominar cada un
destes termos:
Inch: Son polgadas. É unha medida física baseada no tamaño
físico dunha pantalla e equivalen a 2.54 cm.
Dots per Inch (DPI): Simboliza o número de píxeles existentes
nunha área equivalente a unha polgada.
Resolución de Pantalla: A resolución dunha pantalla indícanos
o número de píxeles tanto horizontais como verticais.
*Unha pantalla sempre pode diminuír a súa resolución emulando que posúe menos píxeles
dos que en realidade ten. Para iso, simplemente ten que agrupalos entre si. Unha pantalla,
nunca pode alcanzar unha resolución que exceda o límite imposto polos píxeles físicos.
Píxel (px): Un píxel é un concepto. Fai referencia á unidade
mínima que pode ser renderizada nunha pantalla.
dpi-Densidad Píxeles independientes: unidade abstracta
que se basea na densidade física da pantalla. Android ofrécenos
a posibilidade de enfrontarnos a unha área virtual cunha densidade
de 160 dpi na cal 1 dp equivale a 1 pixel, máis ou menos.
100

DESEÑO
Para definir os nosos layouts deberíamos de traballar usando
soamente os dps, os cales o sistema xa se encargará de traducilos
a píxeles físicos a través deste sinxelo cálculo:
px = dp * (dpi/160)
*Exemplo: Supoñamos que se quere debuxar unha liña de 3 dps na pantalla virtual, e
a pantalla, casualidade, é de 160 dpi. Entón eses 3 dps tradúcense en 3 píxeles. Agora
supoñamos que poseemos un móbil cunha densidade de píxeles de 445. Eses mesmos 3
dps transfórmanse en 8 píxeles físicos para esa pantalla.
sp_Scale independent pixels: É unha medida usada unicamente
para definir o tamaño das fontes. É moi parecida aos dpi,
xa que o tamaño se axusta dependendo dos dpis da pantalla.
A proporción, segundo a clasificación feita anteriormente, para
axustar as imaxes ás diferentes densidades de pantalla dos dispositivos,
segue unha relación de escala de 3:4:6:8. É dicir:
• ldpi (low) ~120dpi
• mdpi (medium) ~160dpi
• hdpi (high) ~240dpi
• xhdpi (extra-high) ~320dpi
• xxhdpi (extra-extra-high) ~480dpi
• xxxhdpi (extra-extra-extra-high) ~640dp
Desta forma, á hora de deseñar para Android sempre deberemos
utilizar dp cando definamos as dimensións, as posicións na UI ou tamaños
de textos para asegurarnos que o noso deseño se verá correctamente
en todas as pantallas.
Existe tamén mm e in, que son medidas relacionadas coa forma
real da pantalla co que tampouco son a medida ideal para un deseño
multiscreen.
101

MATERIAL DESIGN
CONSELLOS E TRUCOS: Saber como, ou por onde, comezar
á hora de deseñar unha app pode resultar lioso, poida incluso que
confundas os termos deseñar con programar posto que a maior parte da
información enlaza estesdous termos.
Non fai falla saber programar para deseñar unha app, o que si hai
que saber é que hai que seguir certos criterios que nos serán de axuda á
hora de realizar o noso deseño.
Photoshop ou Illustrator? O recomendable é deseñar con
Photoshop. O motivo principal é que traballamos para ver as
cousas en pantallas e estas réxense por píxeles, co que en
Photoshop poderemos ver con exactitude cal será o resultado
final dun deseño, mentras que en Illustrator todo é vectorial e
non existen os píxeles.
Ademáis, agora pódese traballar con vectores no Photoshop, o
que quere dicir que da igual ao tamaño no que se faga o deseño
da app, xa que sempre o poderemos escalar sen perder
resolución.
En que tamaño? Para comezar a deseñar a app traballaremos
sempre nunha resolución/densidade que resulte cómoda e teña
unha boa percepción das proporcións dos elementos denominada
“BASELINE”. Para Android: 160 mdpi – Pantalla: 320×480 px
Redimensionar: se Android poseé dispositivos con pantallas
máis grandes... o lóxico non sería comezar por elas para logo
reducir sen problema? A forma de converter da igual xa que traballaremos
coa opción vectorizar do Photoshop. Traballando en
320x480 podemos ver un deseño moi aproximado a como se
vería nun móbil.
102

DESEÑO
BOTÓNS: Os botóns comunican a acción que ocorrerá cando o
usuario toque estes. Componse de texto, unha imaxe ou ambos, ademais
de cor.
Tipos de botóns: existen tres tipos de botóns stándar:
Flotante
Botón circular que se levanta e
mostra unha sombra ao pulsar
Alzado, elevado
Botón máis común, rectangular
que se levanta e, que ao ser
pulsado, amosa sombra.
Plano
Botón composto de texto, produce
reacción ao pulsalo pero non
se levanta.
103

BOTÓNS
Uso dos botóns
- Botón plano: Recoméndase usar este
tipo de botón nos seguintes casos:
• Nas barras de ferramentas, Toolbars.
• Nos cadros de diálogo.
- Botón elevado: Os botóns elevados engaden
dimensión aos deseños planos.
Destacan funcións e compórtanse como un
sector en repouso enriba do layout.
104

DESEÑO
Composición
- Botón desplegable: Serve
para seleccionar entre múltiples
accións. Pode aparecer
como unha lista en cadea.
Cando un usuario preme o botón
fai aparecer as diferentes
accións. Cando escolle unha,
desestima o menú e aparece o
novo estado escollido.
- Marxen arredor: 24dp
- Altura botón: 36dp
- Ancho botóns: 80dp
64dp
- Separación mínima: 8dp
- Marxen táctil: 48dp
- Altura botón: 36dp
- Altura botón: 36dp
- Marxes: 15dp
16dp
- Tamaño fonte: 14sp
105

CARDS (TARXETAS)
CARDS: Ou tarxetas, son o elemento
apropiado para a visualización de
contido cando se compón de diferentes
enlaces. Tamén son eficaces para elementos
cuxo tamaño, ou accións permitidas,
é variable así como a visualización
de comentarios.
Facilitan o contexto e un punto
de acceso a información máis sólida.
Uso das cards
• Como colección: varios tipos de datos (tales como imaxes, películas
ou texto).
• Contidos de lonxitude variable (comentarios).
• Como lista: cando precisa visualizar contido que complemente á
imaxe.
• Non sobrecargar as tarxetas con información ou accións extrañas.
• Colocar o contido principal na parte superior da tarxeta.
106

DESEÑO
• As imaxes poden reforzar contidos nunha tarxeta.
*Tamaño e ubicación dentro da tarxeta depende de se a imaxe é o contido principal ou
está sendo utilizada como complemento a outros contidos
• Texto lexible: colocado en fondos de imaxes debe preservar a lexibilidade
(contraste).
• Teñen unha anchura constante e unha altura variable.
• Non se lle pode dar o valor de “voltear” cando salta á información
que contén.
Composición
As tarxetas poden ser construídas por
bloques de contido que inclúan:
• Titular (opcional)
• Título primario
• Texto adicional
• Botóns, accións
- Marxe superior do título primario: 24dp
- Marxe inferior do título primario: 16dp
- Marxe arredor dos botóns: 8dp
- Marxe superior do cadro de texto: 16dp
- Marxe inferior do cadro de texto: 24dp
Elevación
- En repouso: 2dp
- En contacto: 8dp
As tarxetas teñen unha altura predeterminada
de 2dp
107

CADROS DE DIÁLOGO
CADROS DE DIÁLOGO: Conteñen texto e controis da interfaz
do usuario que se centran nunha tarefa específica. Mantén informado ao
usuario sobre todo o que ocorre como alertas, mensaxes, información
crítica, decisións que requiren a implicación do usuario ou a escolla de
múltiples tarefas.
Os “diálogos” son un subtipo de ventana modal que se deben usar
con moderación, xa que son ventanas de interrupción que deteñen unha
tarefa actual. Deben aparecer sempre ben enfocados e claros.
Uso dos diálogos:
- Alertas: As alertas son interrupcións urxentes que informan ao
usuario dunha situación
• Alertas sen título: resume unha decisión
nunha ou dúas frases:
- Facer unha pregunta (exemplo “Eliminar
a conversación?”)
- Anunciar unha acción relacionada cos
botóns de acción.
• Avisos con título: reserva o seu uso
so para situacións de alto risco.
- Emprega preguntas claras ou declaracións
con explicacións na área de contido.
- Evita a ambigüidade na mensaxe
ou preguntas tales como “Atención!“ ou
“Seguro?“
108

DESEÑO
- Diálogos sinxelos: Proporcionan
detalles adicionais ou accións sobre
un elemento dunha lista. Funciona de
xeito que:
• Non poseen de maneira explícita botóns
para aceptar ou cancelar unha
operación
• Os diálogos simples aparecen sempre
centrados vertical e horizontalmente na
pantalla.
• Evitar o texto axustado
- Diálogos en pantalla completa: Agrupan
unha serie de tarefas. A selección ocorre cando se
lle da a opción gardar.
• Permiten deseños complexos como menús ou
cadros de diálogo sinxelos como parte dunha
operación complexa.
• Recoméndase o seu uso para compoñentes
(campos de formulario) que requieren un método
de entrada tales como un teclado.
• “Confirmar” está desactivado ata que se cumpran
todos os campos obrigatorios no cadro de
diálogo.
• Descarte (a “X” na parte superior esq da pantalla)
e o botón Atrás pechan o cadro de diálogo
da pantalla completa e descartar os cambios.
• Se non se fixeron cambios, o diálogo péchase
directamente.
• Os títulos deben ser curtos. Se o títulos e de
lonxitude variable o texto debe ir colocado na
área de contido do diálogo.
109

DIÁLOGOS
Composición:
• Título opcional: describe brevemente o
tipo de acción que se fixo.
• Contido: elementos de texto ou de control
da interfaz do usuario.
• Accións afirmativas: colocadas no lado
dereito continúan o proceso.
• Accións de rexeitamento: situadas á esquerda
das afirmativas. Voltan á pantalla
de orixe.
- Marxe arredor da área de contido: 24dp
- Marxe entre o título e o contido: 20dp
- Marxe arredor da acción dos botóns: 8dp
- Altura botón: 36dp
- Altura da acción: 52dp
- Marxe entre a acción e o diálogo: 24dp
- Marxe arredor do título: 24dp
- Marxe arredor da acción dos botóns: 8dp
- Altura botón: 36dp
- Altura da acción: 52dp
110

DESEÑO
DIVISORES: Grupos divididos e contido separado mediante listas
e layouts. O divisor represéntase como una línea delgada, lixeira visualmente
pero que distingue perfectamente o contido espacial.
Os divisores axudan aos usuarios a entender como o contido se
organiza nunha páxina mediante o establecemento de ritmo e xerarquía.
Cando alguna lista non posúe ningún elemento anclado, como
pode ser unha icona ou avatar, extender o contido ata o borde axuda a
crear ritmo e a separar seccións.
A línea divisoria será de 1dp de espesor e cunha opacidade do
12%, sexa en branco ou negro.
Tipos de divisores:
Ata os bordes
Os divisores separan o contido
das distintas seccións ata os
bordes
Fixado
Separan os contenidos relacionados.
Deberían ser usados
en conxunción con elementos
como iconas o avatares.
Subtítulo
Os subtítulos son empregados
como divisores colocando a
línea por riba deste reforzando
así a súa relación co contido.
111

LISTAS
LISTAS: As listas presentan elementos
de maneira vertical como un elemento
contínuo e único.
Unha lista consta dunha soa columna
de seccións igual de anchas, chamada
fila, que será a que conteña as diferentes
seccións. Poden variar de altura.
As listas presentan datos ou grupos
de datos de xeito homoxéneo.
*Se existen máis de tres líneas de texto é mellor presentar a sección como unha “card”
As listas so se poden desplazar de xeito vertical, scrolling pero
tamén poden ser movidas a unha lista específica. Estas sempre
aparecerán en orde: tamaño de arquivo, orden alfabética ou por outros
parámetros.
Contenido:
As listas utilizan a xerarquía
para priorizar un conxunto
de contidos para axudar
aos usuarios a atopar a información
importante. Pode
conter ata tres líneas de texto
O contido máis distintivo
debe ir á esquerda, e o contido
mínimo á dereita. As accións complementarias
situaranse no lado
dereito.
112

DESEÑO
Composición:
- Listas dunha línea: Contén unha línea de texto.
• Lista dunha soa línea:
- Fonte : Roboto 16sp regular
- Altura sección: 48dp
- Marxe nos bordes: 16dp
- Marxe superior: 8dp
• Lista dunha soa línea con
iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 48dp
- Marxe esquerdo icona: 16dp
- Marxe esquerdo do texto: 72dp
• Lista dunha soa línea con
avatares:
- Fonte: Roboto 16sp regular
- Altura sección: 56dp
- Marxe esquerdo avatar: 16dp
- Marxe esquerdo do texto: 72dp
• Lista dunha soa línea con
avatares e iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 56dp
- Marxe esquerdo avatar: 16dp
- marxe dereito da icona: 16dp
- Marxe esquerdo do texto: 72dp
- Marxe superior : 8dp
113

LISTAS
- Listas de dúas líneas:
• Lista de dúas líneas:
- Fonte : Roboto 16sp regular
- Altura sección: 72dp
- Marxe nos bordes: 16dp
- Marxe superior: 8dp
• Lista de dúas líneas con
iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 72dp
- Marxe esquerdo icona: 16dp
- Marxe esquerdo do texto: 72dp
• Lista de dúas líneas con
avatares:
- Fonte: Roboto 16sp regular
- Altura sección: 72dp
- Marxe esquerdo avatar: 16dp
- Marxe esquerdo do texto: 72dp
• Lista de dúas líneas con
avatares e iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 72dp
- Marxe esquerdo avatar: 16dp
- marxe dereito da icona: 16dp
- Marxe esquerdo do texto: 72dp
- Marxe dereito do texto: 16dp
- Marxe superior : 8dp
114

DESEÑO
- Listas de tres líneas:
• Lista de tres líneas:
- Fonte : Roboto 16sp regular
- Altura sección: 88dp
- Marxe nos bordes: 16dp
- Marxe superior: 8dp
• Lista de tres líneas con iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 88dp
- Marxe esquerdo icona: 16dp
- Marxe esquerdo do texto: 72dp
• Lista de tres líneas con
avatares:
- Fonte: Roboto 16sp regular
- Altura sección: 88dp
- Marxe esquerdo avatar: 16dp
- Marxe esquerdo do texto: 72dp
• Lista de tres líneas con
avatares e iconas:
- Fonte: Roboto 16sp regular
- Altura sección: 88dp
- Marxe esquerdo avatar: 16dp
- marxe dereito da icona: 16dp
- Marxe esquerdo do texto: 72dp
- Marxe dereito do texto: 16dp
- Marxe superior : 8dp
115

LISTAS
Exemplo de lista
dunha soa línea
Exemplo de lista
de dúas líneas
Exemplo de lista
de tres líneas
Exemplo de lista
dunha soa línea
con iconas
Exemplo de lista
de dúas líneas
con iconas
Exemplo de lista
de tres líneas
con iconas
116

DESEÑO
CONTROIS DAS LISTAS: Os controis das listas son as iconas
ou avatares que aparecen á esquerda ou dereita do texto na lista. Indican
estados, información ou serven como acción.
Tipos de controis
• Casilleiro de verificación
Unha casilla de verificación pode ser de carácter
primario ou secundario.
- Acción primaria / Estado: casillas de verificación
- Acción secundaria: controla un familia de
variables.
• Interruptor
Categoría: acción secundaria
Activa ou desactiva accións ou propiedades.
• Expansión/contracción:
Categoría: acción secundaria
Expande y se contrae verticalmente una vista
de lista para mostrar y ocultar los detalles de los
elementos de lista existentes .
117

MENÚS
MENÚS: Permiten aos usuarios seleccionar unha acción dunha lista
temporal que se abre nunha nova capa. Debe conter dous elementos
como mínimo, estes elementos son as accións, ou opcións, que afectan á
selección escollida.
Tamén existen menús de elemento único como a selección copiar/
pegar/cortar nun texto.
Elementos do menú
• Cada elemento se limita a
unha soa línea de texto que
describe a acción.
• O texto é, polo xeral, unha
soa palabra ou frase curta
que pode incluir iconas.
• Menús de contido estático deben
ter os elementos de uso
más frecuente situados na
parte superior do menú.
• Posicionar el menú debajo del
elemento emisor de la separa
de su contexto.
Menú sinxelo
Cando se abre un menú este se desprega de forma vertical por riba
do elemento que o garda amosando todas as opcións que contén. Nunca
se pode colocar a primeira acción do menú enriba do elemento da lista xa
que pode orixinar confusión.
A escolla dunha opción do menú, ademáis de aparecre resaltada,
pecha o propio menú.
118

DESEÑO
A altura máxima dun menú debe ser a da propia pantalla, se o contido
e maior as opcións serán visibles facendo que o menú sexa desplazable
(scroll). Este tampouco debe ocupar toda a pantalla senón que ten
que deixar un espazo onde poder tocar para desestimar o menú. Tamén
se cancela co botón “Volver”.
Si: o menú aparece enriba do elemento iniciador
Non: poñer o menú embaixo do elemento iniciador
Si: poñer o menú enriba do elemento iniciador
Non: mostres a selección duplicada no menú
119

CONTROIS DE SELECCIÓN
CONTROIS DE SELECCIÓN: Son mandos que permiten
ao usuario seleccionar, aceptar e confirmar opcións.
Tipos de controis:
Checkbox
As casillas de verificacións
permiten ao usuario seleccionar
múltiples opcións dun conxunto.
Para unha única opción é mellor
usar un interruptor do tipo on/off
Botón circular
Permiten ao usuario seleccionar
unha opción de un conxunto,
para seleccións exlusivas cando
hai outras disponibles ao lado.
Interruptor
Interruptores on/off serven para
alternar o estado dunha soa
opción de configuración.
O estado no que se atopa estará
indicado claramente na línea.
120

DESEÑO
SUBTÍTULOS: Os subtítulos delimitan as diferentes seccións
nunha lista ou cuadrícula, polo tanto clasifican e filtran. Poden ir situados
en línea nunha sección ou nunha column adxacente asociado ao contido.
- Subtítulos en lista: se unha lista é longa e contén información
complexa unha boa maneira de delimitar os diferentes subtítulos sería co
uso de diferentes cores.
Os subtítulos deben ir alineados á esquerda cando so hai texto,
icona ou avatares.
Se hai un botón de acción flotante alineado á esquerda xunto coa
avatar ou icona o subtítulo se alineará xunto co contido do texto.
• Simple
- Fonte: Roboto medium 14sp
- Altura sección subtítulo: 48dp
- Marxe esquerdo avatar: 16dp
• Botón flotante
- Fonte: Roboto medium 14sp
- Altura sección subtítulo: 48dp
- Marxe esquerdo avatar: 72dp
121

PESTANAS
PESTANAS: As pestanas facilitan
a búsqueda por entre os diferentes
conxuntos categorizados así como a
conversión entre os diferentes aspectos
funcionais dunha app.
As pestanas son de grande utilidade
para empaquetar contido de alto
nivel como, por exemplo, presentar
diferentes seccións dun xornal. Preséntanse
como fichas que describen brevemente a categoría asociada ao
contido.
Estas van situadas nunha fila única, por iso se debe empregar un
número limitado de fichas e so usar o xesto de desplazar canda haxa un
número variable de pestanas. Unha ficha non pode conter no seu interior
outras fichas ou pestanas.
Contenido
Si: se o texto é longo ceñir en dúas líneas
O contido que presentan as
pestanas pode variar ampliamente.
De todos os xeitos o contido dentro
de cada unha das fichas debe estar
relacionado por un principio de
organización máis grande
As etiquetas das fichas
deben proporcionar información
significativa do contido asociado.
Non: misturar texto con iconas As etiquetas poden ser tanto todo
iconas como todo texto, pero nunca
misturalos. No caso de que a selección sexa texto este deberá ter un
título curto.
122

DESEÑO
Tipos de pestanas:
- Pestañas fixas: amosan todas as pestanas ao mesmo tempo
co que facilita un tránsito para a escolla. As diferentes fichas que formen
parte da pestana non afectan no ancho desta.
Para navegar entre as pestanas fixas, basta con premer nas fichas.
- Pestanas desplazables: lengüetas desplazables mostrar un
subconjunto de las pestañas en un momento dado. Pueden contener más
etiquetas de las solapas y un mayor número de fichas que las lengüetas
fijas. fichas de desplazamiento son los más utilizados para la navegación
contextos en los interfaces táctiles cuando los usuarios no necesitan para
comparar directamente las etiquetas de las solapas.
Para navegar entre las pestañas de desplazamiento, toque la ficha
o pase el área de contenido hacia la izquierda o la derecha. Para desplazarse
por las fichas sin tener que navegar, deslizar las pestañas a la
izquierda o la derecha.
Composición
A anchura das pestanas pódese calcular collendo a anchura de
vista e dividíndoo polo número de pestanas. Outra xeito de dar tamaño
ás pestanas sería collendo como referencia a maior delas e facelas todas
dese mesmo tamaño.
- Max ancho: 264dp
- Min ancho: 160dp pantalla grande
- Altura: 48dp
Botón:
72 dp pantalla pequena
- 12dp dereita e esquerda do texto
- 20dp dende a base, unha linea texto
12dp dende a base, dúas líneas texto
Indicador:
- 2dp altura
123

PESTANAS
- Altura total: 72dp
- Icona: 24x24dp
Alineación: texto máis icona centrados
horizontal mente dentro da ficha
Botón:
- 10dp separación entre icona e texto
- 16dp separación texto borde ficha
- Altura total: 48dp
- Icona: 24x24dp
Alineación: a icona irá centra vertical e
horizontalmente na ficha
A anchura das fichas calcúlase de maneira
independente.
- Max ancho: 264dp
- Min ancho: 160dp pantalla grande
-Altura: 48dp
Botón:
72dp pantalla pequena
- 12dp do texto de esquerda a dereita
- 20dp dende a base, unha linea de texto
- 12dp dende a base, dúas líneas de texto
124

E ata aquí por hoxe, a esta guía tocoulle o seu final.
É probable que o final sexa abrupto e penses que falta
moita máis información e que incluso estaría ben
saber de programación, pero este pequeno manual
realizado por unha entusiasta da tecnoloxía (afición
recén descuberta) so se centra, reune, un coñecemento
primario, o esencial.
Se o interese polo mundo app é grande a rede é un
lugar perfecto onde compartir opinións, pedir consello,
mirar trucos e manterse informado. Ademáis, de
aproveitar todos os recursos que se nos ofrecen.
Recomendo unha ollada a Material Design, pois este,
ademáis de conter moita máis información, bríndanos
videos de exemplos ademáis de ter todo unha
sección adicada a programacións.
Mentras elaboraba o traballo e, á vez, o meu interese
polas apps e a súa programación ía medrando, practiquei
con AIDE aplicación que che ensina a programar
apps en SO Android. Recomendo, ainda que so
sexa, realizar a tres primeiras prácticas.
Saúde!
125

126

127

128