Deseño dunha APP móbil
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
IES Leixa<br />
CS <strong>Deseño</strong> e Produción Editorial<br />
Erica García-Santamarina Caridad<br />
Ferrol, Galicia, España<br />
Curso: 2014-2016
DESEÑO<br />
app<br />
MÓBIL<br />
BREVES APUNTES
Do nacemento do <strong>móbil</strong> ás apps:.................................................11<br />
Introducción 13<br />
Que é unha app? 17<br />
Desarrollo <strong>dunha</strong> aplicación <strong>móbil</strong>:.............................................21<br />
Organización 24<br />
Pasos a seguir 29<br />
Criterios para deseñar unha app <strong>móbil</strong> para Android:............... 43<br />
Interacción e patróns comúns: 45<br />
Principios básicos 46<br />
Formas de soster o <strong>móbil</strong> 47<br />
Orientación do terminal 48<br />
Patróns de interacción 49<br />
Librarías 61<br />
Material Design: 63<br />
Que é? 65<br />
Principios: Sedúceme 72<br />
Simplifica 74<br />
Sorpréndeme 76<br />
Dispositivos: Vista xeral da UI 78<br />
Estilos: Dispositivos e pantallas 80<br />
Medidas e cuadrícula 81<br />
Tipografía 84<br />
Paleta de cores 86<br />
Iconas 87<br />
Pautas: Estrutura <strong>dunha</strong> app 90<br />
Action Bar 95<br />
Confirmar e recoñecer 97
Trucos e consellos de deseño para apps: 99<br />
Unidades de medida 100<br />
Consellos e trucos 102<br />
Botóns 103<br />
Cards (tarxetas) 106<br />
Cadros de diálogo 108<br />
Divisores 111<br />
Listas 112<br />
Controis das listas 117<br />
Menús 118<br />
Controis de selección 120<br />
Subtítulos 121<br />
Pestanas 122
Esta pequena guía realizouse coa intención de axudar<br />
a toda persoa interesada no mundo das aplicacións<br />
<strong>móbil</strong>es en particular e, se lle atrae tanto coma<br />
min, do mundo tecnolóxico e o da programación en<br />
xeral. É unha guía breve, básica e amena, ideal para<br />
ler nunha tarde e que, ao rematar, vaias correndo a<br />
buscar material para comezar a deseñar a túa propia<br />
app.<br />
O máis probable é que o ano que ven esta guía estea<br />
completamente desactualizada, de feito, mentras<br />
realizaba este traballo, Adobe deixou entrever o que<br />
sería a súa nova ferramenta: Project Comet, un programa<br />
de deseño de interfaces baseadas na experiencia<br />
do usuario; e, ademáis, Android actualizou o<br />
seu SO á versión 6.0<br />
Tamén advertir que esta guía non explica como programar<br />
para Android, senón que é unha primeira<br />
toma de contacto co mundo das apps, con recursos<br />
comúns a cualquer dispositivo pero centrado no sistema<br />
operativo Android. Por que Android? Por ser un<br />
núcleo de sistema operativo libre, gratuito e multiplataforma.
A industria do teléfono <strong>móbil</strong> ofrece hoxe cifras asombrosas<br />
como os 5.200 millóns de terminais en uso en todo o planeta,<br />
os 6.700 millóns de subscricións <strong>móbil</strong>es, os 4.300 millóns de<br />
usuarios únicos, os 11.400 millóns de dólares gastados en publicidade<br />
<strong>móbil</strong>, os 25.000 millóns xerados polas aplicacións<br />
<strong>móbil</strong>es ou os 1.820 millóns de <strong>móbil</strong>es vendidos en 2013.<br />
Vendo os datos actuais pode parecer que o camiño foi sinxelo,<br />
nada máis lonxe da realidade, necesitáronse de décadas de<br />
innovación, de mellora dos terminais, das redes, do software<br />
<strong>móbil</strong>, do seu deseño e peso, do seu custo e en xeral, grandes<br />
adaptacións para os fabricantes, operadoras e distribuidores,<br />
a medida que cambiaba a tendencia de consumo.<br />
En todo caso, a influencia do teléfono <strong>móbil</strong> intelixente na<br />
tecnoloxía actual é de tal calibre que transcendeu do simple<br />
dispositivo de comunicación por voz provocando unha nova<br />
“era da mobilidade” que deixou atrás a “época do computador<br />
persoal” e non poucos “feridos” no camiño, empresas, servizos,<br />
sectores e algúns produtos outrora dominantes.<br />
11
12
A telefonía <strong>móbil</strong> experimentou un vertixinoso desenvolvemento a<br />
partir dos anos 80. A orixe da telefonía pode datarse no s.XX cos primeiros<br />
establecementos de radio para grandes organizacións, principalmente<br />
gobernos. Pero é que a partir dos anos 80 non deixou de medrar en<br />
usuarios, dispositivos, servizos...<br />
Tradicionalmente a historia da telefonía <strong>móbil</strong> divídese nunha<br />
serie de xeracións marcadas por certos hitos técnicos e comerciais.<br />
Xeración 0G: comezos do s.XX. Telefonía baseada en radio<br />
con fins específicos como navegacións marítimas ou militares.<br />
Xeración 1G: finais do 80. Trátase de telefonía<br />
analóxica orientada ao sector empresarial.<br />
Aparecen algúns dos principais actores en canto a<br />
operadores e suministradores. Motorola desenvolve<br />
o seu primeiro terminal, a xaponesa NTT lidera a<br />
comercialziación seguida dos países nórdicos. Precisamente<br />
estes, co estándard NMT implementan por<br />
primeira vez a itineracia internacional tamén coñecida<br />
como Roaming.<br />
Xeración 2G: aparece nos anos 90. Incorpora por primeira<br />
vez a tecnoloxía dixital baseada na conmutación<br />
de circuitos, é dicir, durante a comunicación establécese<br />
unha comunicación extremo-extremo.<br />
O estándard máis empregado estes anos é o GSM que<br />
incorpora itinerancia internacional, unha implementación<br />
eficiente das mensaxes curtas, 160 carateres<br />
(SMS), mensaxes multimedia (MMS) e o protocolo<br />
WAP para acceso a internet.<br />
13
Entre os hitos comerciais Radiolinja comercializa os primeiros<br />
servizos de descarga de tons en 1998 en Finlandia e aparecen<br />
tamén os primeiros servizos de pago a través de <strong>móbil</strong>es, neste<br />
caso, en Suecia e Finlandia no 98 e en Noruega e Filipinas en<br />
1999.<br />
Neste mesmo ano a xaponesa NTT Dokkomo comercializa o primeiro<br />
servizo de acceso a través de WAP.<br />
Xeración 2.5G: incorpora, ademáis da conmutación baseada<br />
en circuitos, conmutación baseada en paquetes de datos mediante<br />
o estándard GPRS esto impulsa a potencialización das<br />
mensaxes MMS e tamén do protocolo WAP.<br />
Poténciase tamén a utilización de terminais multimedia e servizos<br />
de multicontido.<br />
Xeración 3G: caracterízase pola adopción da conmutación en<br />
paquetes para os servizos de datos. Aparecen estándares como<br />
o UMTS que proporciona un maior ancho de banda.<br />
Dende o punto de vista comercial aparecen os primeiros servizos<br />
de streaming para vídeo e radio. Neste caso, as demostracións<br />
as realizan Nokia en 2005, RealNetworks e Disney.<br />
Xeración 3.5G: caracterízase pola adaptación do estándard<br />
HSDPA que incorpora unha maior velocidade de transmisión e<br />
que, polo tanto, favorece un acceso a internet con maiores tasas<br />
de transmisión e unha menor latencia.<br />
Xeración 4G: actualidade. Caracterízase pola adopción completa<br />
da conmutación basada en paquetes, é dicir, desaparece a<br />
conmutación baseada en circuitos para os servizos de voz.<br />
As aplicacións requiren cada vez máis unha maior velocidade de<br />
transmisión de datos co que require un maior ancho de banda.<br />
Son os protocolos os que evolucionan para proporcionala.<br />
14
16
O termo App é a abreviatura de Application e, como tal, sempre<br />
se utilizou para denominar a estas nas súas diferentes<br />
versións.<br />
Sendo unha palabra de uso común no mundo do software, o<br />
termo App comezou a utilizarse especialmente para referirse<br />
ás aplicacións para <strong>móbil</strong>es en 2008, tras a consecución de<br />
tres fitos importantes na historia das aplicacións: o lanzamento<br />
do App Store de Apple, a publicación do primeiro SDK para<br />
Android e o posterior pero case inmediata inaguración do Android<br />
Market.<br />
Que é unha app?<br />
Unha App é unha aplicación de software que se instala en dispositivos<br />
<strong>móbil</strong>es ou tablets para axudar ao usuario nunha labor concreta,<br />
xa sexa de carácter profesional ou de lecer e entretemento, a diferenza<br />
<strong>dunha</strong> webapp que non se instala.<br />
Esta pode integrarse ás características do equipo, como a cámara<br />
ou sistema de posicionamento global (GPS). Ademais, pódese actualizar<br />
para engadirlle novas características co paso do tempo.<br />
As aplicacións suministran acceso instantáneo a un contido sen<br />
ter que o buscar en Internet e, unha vez instaladas, xeralmente pódese<br />
acceder a elas sen necesidade <strong>dunha</strong> conexión á Rede.<br />
Ainda que isto das apps pareza relativamente moderno existen xa<br />
dende hai un tempo. Estas estaban integradas nos sistema operativos<br />
de Nokia ou Blackberry, <strong>móbil</strong>es de pantallas pequenas e non táctiles, e<br />
o seu obxectivo era mellorar a actividade persoal: tratábase de alarmas,<br />
calendarios, calculadoras...<br />
Estas aplicacións son obvias a día de hoxe e nin nos plantexamos<br />
o feito de descargalas ou que o noso <strong>móbil</strong> non dispoña delas. A súa<br />
evolución deuse rapidamente grazas ás innovacións da tecnoloxía WAP<br />
17
e a transmision de datos (EDGE) que veu acompañado dun desenvolvemento<br />
moi forte dos dispositivos <strong>móbil</strong>es. É por iso que actualmente<br />
atopamos infinidade de tipos de aplicacións: Apps de noticias (elmundo.<br />
es), xogos (Angry Birds), ferramentas de comunicación como Whatsapp,<br />
redes sociais como Twitter, apps para saír de festa (Liveclubs), promocións<br />
comerciais (McDonnalds), aplicacións para vender as túas cousas<br />
usadas desde o <strong>móbil</strong> (Wallapop)..., que nos poden axudar no traballo ou<br />
tentar facernos o día máis ameno.<br />
Orixes e boom das Apps<br />
Investigando sobre as orixes das Apps, e utilizando a ferramenta<br />
de estatísticas de procura de Google, obtemos reveladores datos.<br />
Baseándonos nunha estatística sobre as procuras relacionadas co<br />
termo “App” e asignándolle un índice 100 ás procuras actuais, observamos<br />
que o termo apenas tiña un 10% do cociente de procura actual até<br />
avanzado 2008. Este dato non fai máis que reafirmar a relación do termo<br />
App coas aplicacións para dispositivos <strong>móbil</strong>es.<br />
Entrando en maior detalle podemos observar tres tendencias:<br />
18
2004-2008: Non<br />
existen cambios nas<br />
procuras e no interese<br />
da poboación mundial.<br />
2008-2009: As consultas<br />
e o interese mundial<br />
está en alza. O<br />
inicio desta tendencia<br />
identifícase con tres<br />
feitos moi próximos no<br />
tempo:<br />
- Lanzamento do<br />
App Store en xullo de<br />
2008.<br />
- Publicación do<br />
primeiro SDK para<br />
desarrolladores de<br />
Android en agosto de<br />
2008<br />
- Apertura do Android<br />
Market en outubro de<br />
2008.<br />
2010-2013: mediados<br />
de 2009 iníciase outra<br />
alza do interese mundial<br />
polo termo App,<br />
este novo cambio<br />
vese orixinado por:<br />
- Publicación do<br />
primeiro API para desarrolladores<br />
de iOS 4<br />
e apertura do mercado<br />
global do App Store<br />
para as propostas de<br />
empresas e desarrolladores<br />
de aplicacións<br />
e xogos para iPhone.<br />
(Xuño de 2010)<br />
2013-Actualidade:<br />
podemos observar<br />
como no 2013 se<br />
chega a un punto alto,<br />
debido ao grande<br />
aumento de venda<br />
de smartphones e ao<br />
auxe de aplicacións<br />
como Line, Instagram<br />
e a recén chegada<br />
Spotify.<br />
Concluimos con que,<br />
visto o percorrido e<br />
evolución da línea, o<br />
mundo das apps e o<br />
interese por elas so<br />
vai ir en aumento.<br />
Evolución da búsqueda da palabra app en España<br />
Evolución da búsqueda da palabra app en Galicia<br />
19
Por último é necesario aclarar que para alcanzar calquera tipo<br />
de desenvolvemento é necesario que exista un plan de desenvolvemento,<br />
unha serie de pasos que deban cumprirse adecuadamente<br />
para que se poidan establecer comparacións e saber<br />
se se conseguiron os obxectivos ou non. Por exemplo, para<br />
saber se un neno desenvolveuse adecuadamente é necesario<br />
ter en conta as diferentes teorías e analizar que diferenzas<br />
existen entre o que se espera dun neno da idade do estudado,<br />
e o que é en realidade.<br />
En canto á noción do plan, trátase dun modelo sistemático que<br />
é deseñado antes de concretar unha acción, de maneira tal que<br />
esta poida ser procesada cara aos obxectivos desexados. Un<br />
plan é tamén unha guía.<br />
Para iso o que fai é definir os obxectivos que desexa facer<br />
realidade, establecer que significaría para el alcanzar o éxito,<br />
determinar o camiño que quere seguir, analizar as axudas que<br />
pode necesitar e ir celebrando os logros que vaia conseguindo.<br />
Cando queremos converter unha idea en realidade e desenvolver<br />
un proxecto tecnolóxico temos varias alternativas como<br />
son a de utilizar a solución comercial que mellor se adapte ás<br />
necesidades do devandito proxecto ou ben desenvolver unha<br />
aplicación a medida para o teu proxecto, ambas son radicalmente<br />
diferentes na execución. Se es dos da segunda alternativa,<br />
comentámosche os pasos que hai que dar para facer un<br />
desenvolvemento <strong>móbil</strong> a medida:<br />
Definición funcional da app<br />
20
O concepto desarrollar fala do que é desenvolver, é dicir, realizar<br />
unha serie de pasos para conseguir uns obxetivos. Trátase<br />
dun modelo sistemático que é deseñado antes de concretar<br />
unha acción, de maneira tal que esta poida ser procesada<br />
cara os obxectivos desexados. Un plan de organización que<br />
é, a súa vez, unha guía.<br />
O desenvolvemento de apps constitúe un terreo por explorar<br />
no que está case todo por descubrir. Existen poucas regras<br />
e as que existen dificilmente permanecen moito no tempo,<br />
por iso existe unha enorme probabilidade de descubrir novos<br />
camiños pero tamén probabilidades de fracasar.<br />
Sen embargo, non todo son malas noticias e podemos aproveitarnos<br />
na experiencia acumulada no desenvolvemento de<br />
software tradicional para desenvolver unha app.<br />
21
22
23
Roles no equipo de desenvolvemento:<br />
- Productor: dirixe o impulso do desarrollo e encárgase de mitigar<br />
os riscos.<br />
- Deseñador: encargados de refinar o concepto da aplicación,<br />
realizar o deseño funcional e probar os prototipos que se vaian<br />
realizando.<br />
- Programador: persoal con experiencia en desenvolvemento<br />
de aplicacións do mesmo estilo.<br />
- Deseñador gráfico: deberán desenvolver interfaces gráficas,<br />
botóns, imaxes...<br />
- Audio: factor que fai destacar unhas aplicacións sobre outras.<br />
úsase sobretodo en videoxogos.<br />
- Calidade: que probe os nosos produtos no maior tipo de dispositivos<br />
posibles.<br />
- Localización: equipo que traduza a aplicación en diferentes<br />
idiomas.<br />
- Márketing: axúdanos a posicionar a nosa aplicación no mercado<br />
para que consigamos un bo comezo.<br />
24
Produtor<br />
Márketing<br />
Deseñador<br />
Localización<br />
Programador<br />
Calidad<br />
Deseñador<br />
gráfico<br />
Audio<br />
.<br />
Ainda que poidan existir variacións dependendo da app a desenvolver, os roles<br />
adoitan ser case sempre os mesmos. Ademáis, non fai falla que interveñan<br />
todos estes perfís para crear unha app, se unha persoa controla de deseño e<br />
programación podería realizala ela soa.<br />
25
Desarrollo áxil:<br />
- Concepto: identificación da idea e carcterísticas principais da<br />
app, Incluirase un estudo de mercado e a valoración económica.<br />
- Preproducción: ou deseño. Aquí comezan os traballos de<br />
construcción da aplicación. A creación de diagramas, maquetas<br />
e táboas para que os programadores entendan o traballo que<br />
teñen que facer.<br />
- Producción: os programadores constrúen a aplicación coas<br />
especificacións obtidas na fase de preproducción e a poñen a<br />
funcionar correctamente.<br />
- Testeo: comprobación de fallos (aspecto gráfico, funcionamento,<br />
eficiencia, optimización no uso dos recursos...)<br />
- Lanzamento: permisos e seguridade <strong>móbil</strong>, integración de<br />
programas que nos axuden a controlar as descargas e o nivel de<br />
usuarios que usan a app.<br />
- Soporte: mantemento e actualizacións da mesma.<br />
26
Concepto<br />
Soporte<br />
Preproducción<br />
Lanzamiento<br />
Producción<br />
Testeo<br />
27
28
00<br />
Identificar a idea ou problema. Obxectivo<br />
Aquí desglosaremos os detalles principais, próposito e finalidade<br />
da súa creación. Temos que saber a quen vai dirixida, cal é a súa temática<br />
e os seus contidos.<br />
Tamén debemos preguntarnos<br />
que vai facer a aplicación e cal é o<br />
seu atractivo principal (aplicación de<br />
uso recurrente). Este punto serviranos<br />
para facer unha análise posterior<br />
para saber a tasa de desinstalación,<br />
recurrencia de accións... E que problema<br />
concreto vai a resolver e que<br />
necesidades vai a cubrir.<br />
01<br />
Estudo de mercado:<br />
A realización desta análise demostrará que existe unha demanda<br />
para a aplicación e que non és o único que a considera necesaria. Unha<br />
das posibles maneiras para validar a túa idea é utilizar a ferramenta<br />
Google Keyword Planner, que analiza o número de usuarios que buscan<br />
solución a ese problema.<br />
Un xeito eficaz é analizar as tendas de aplicacións, ver que aplicacións<br />
teñen éxito e que tipo de problemas resolven. Moitas veces<br />
podemos atopar aplicacións que dan solución a un problema pero non<br />
da mellor maneira, e con todo teñen éxito por ser a única ou das poucas<br />
existentes. Nese caso debemos ter en conta se a aplicación a desenvolver<br />
é capaz de mellorar a xa existente e abarcar ese mercado.<br />
29
02<br />
Valoración económica da app.<br />
Crear apps <strong>móbil</strong>es é caro. O investimento económico inicial que<br />
debemos facer para levar a cabo a nosa idea de app é alta.<br />
O seu valor depende moito dos contidos e funcionalidades que<br />
se queiran incluír na aplicación <strong>móbil</strong>. Os prezos varían e dependen de<br />
moitas cousas, por exemplo, se necesita base de datos, rexistro para acceder<br />
á app, se ten posibilidade de compartir en redes sociais, se existirá<br />
en máis dun idioma,... Sempre se deberá ter en conta que a calidade non<br />
é barata, senón que hai que pagar por ela, especialmente se se fai unha<br />
app nativa. Páxinas como Cuantocuestamiapp.com poden axudarnos a<br />
facernos unha idea da canto nos pode custar.<br />
03<br />
Planificación: pasos e escenarios, cantidade de funcións.<br />
A partir deste momento empézaselle a dar forma á aplicación. Para<br />
isto o máis sinxelo é realizar uns bosquexos simples sobre as diferentes<br />
funcionalidades da aplicación de maneira que un programador poida<br />
empezar a entender o que se trata de crear. Para este paso resulta<br />
de utilidade fixarse noutras aplicacións xa existentes que sirvan como<br />
inspiración e modelo e das que poidamos extraer ideas facilitando así a<br />
comunicación co programador.<br />
Comezar o deseño <strong>dunha</strong> app non é sinxelo. Existen na rede páxinas<br />
que serven como ferramentas para crear bocetos e pantallas, definir<br />
a estructura, funcionalidades... Servirannos como referencia para realizar<br />
o deseño da nosa aplicación. Entre todas as páxinas que existen caben<br />
destacar: Justinmind, HotGloo, Moqups e Balsamiq.<br />
30
É fundamental un traballo de construcción total do deseño para que<br />
este manteña un aspecto e funcionamento homoxéneo, a creación debe<br />
planificarse claramente de principio a fin. Orden, limpeza e funcionalidade<br />
serán os fundamentos básicos.<br />
Ao proceso de crear unha maqueta ou prototipo da aplicación chamámoslle<br />
Wireframe. Mentres se traballa no wireframe debemos comezar<br />
a crear o guión gráfico da aplicación. A idea é construír unha folla de ruta<br />
que axude a entender a conexión entre cada pantalla e como o usuario<br />
navegará a través da aplicación.<br />
Sen esquecer que cada sistema operativo ten as súas ferramentas<br />
para poder deseñar (Paso 04, páx. 32)<br />
31
04<br />
Escolla de sistema operativo e linguaxe de<br />
programación.<br />
Antes de comezar a programar e buscar un desarrollador de apps<br />
é preciso pensar que sistemas operativos existen e en que linguaxe de<br />
programación se debería desenvolver a app. Antes de escoller o desarrollador<br />
de apps poderás preguntarlle que linguaxes e que sistemas operativos<br />
manexa en función do proxecto a crear.<br />
Os sistemas operativos existentes actualmente son varios, pero<br />
algúns teñen máis cuota de mercado que outros, polos que uns serán<br />
imprescindibles se queremos crear unha app móvil:<br />
O sistema operativo de Google é o líder<br />
absoluto do mercado en todo o mundo,<br />
excepto quizais nos USA onde Apple ainda<br />
ten unha gran presenza. Máis do 80%<br />
de usuarios de dispositivos <strong>móbil</strong>es usa<br />
Android. Terás que contar pois con programadores<br />
de apps en Android<br />
.<br />
Subcampión no top de sistemas operativos<br />
máis utilizados, Apple segue a<br />
Android, e lidera co iPad o mercado das<br />
tablets. Tamén é recomendable desenvolver<br />
o teu app en iOS, para o que<br />
necesitarás desarrolladores de apps iOS.<br />
32
É o S.O. de Microsoft, empresa especializada<br />
no mundo da informática, que tamén<br />
se lanzou ao mundo mobil cos seus dispositivos.<br />
É o terceiro sistema máis utilizado<br />
pero cunha cota moi baixa.<br />
Con Blackberry ocorre o mesmo. Soamente<br />
será útil ter o teu app neste mercado<br />
cando dominases os anteriores.<br />
Estes sistemas operativos menores son<br />
obxecto duns poucos desarrolladores de<br />
apps especializados. Pero sempre terá<br />
que haber algún desarrollador Symbian,<br />
Ubuntu ou Firefox para desenvolver esas<br />
grandes apps como a de Facebook ou a<br />
de Whatsapp.<br />
Linguaxe de programación<br />
Aínda que a primeira vista isto non pareza incumbencia do deseñador,<br />
a realidade é que o tipo de aplicación que se elixa, condicionará o<br />
deseño visual e a interacción.<br />
Existe practicamente unha linguaxe de programación nativo<br />
para cada sistema operativo. No entanto existe o que se chama o<br />
desenvolvemento multiplataforma que nos permite crear apps <strong>móbil</strong>es<br />
para varios sistemas a partir dun mesmo desenvolvemento orixinal. Estes<br />
desenvolvementos non son nativos, pero teñen moi bos resultados para<br />
determinados tipos de apps, sen esquecer os desarrolladores de apps<br />
multiplataforma.<br />
33
- Aplicación nativa: é a que se desenvolve de forma específica<br />
para un determinado sistema operativo. O sistema de desenvolvemento,a<br />
linguaxe coa que se crea da igual a plataforma, leva o nome de SDK,<br />
Software Development Kit, e se pode descargar directamente dende as<br />
súas respectivas páxinas.<br />
VANTAXES<br />
DESVANTAXES<br />
- Acceso completo ao dispostivo<br />
- Mellor experiencia do usuario<br />
- Visibilidade en <strong>APP</strong> store<br />
- Reenvío de notificacións ou “avisos”<br />
aos usuarios<br />
- Diferentes idiomas/habilidades/<br />
ferramentas para cada plataforma<br />
- Máis caras de desarrollar<br />
- Código de cliente non reutilizable<br />
nas outras plataformas<br />
- Actualización constante da app<br />
- Non require de acceso a internet<br />
Linguaxe do SO:<br />
Java Objective-C .Net<br />
34
- Web App: Unha aplicación web ou webapp é a desenvolvida<br />
con linguaxes moi coñecidas polos programadores, como é o HTML,<br />
Javascript e CSS. A principal vantaxe con respecto á nativa é a posibilidade<br />
de programar independente do sistema operativo no que se usará a<br />
aplicación, desta forma pódense executar en diferentes dispositivos sen<br />
ter que crear un código diferente para cada unha.<br />
VANTAXES<br />
- Mesmo código base reutilizable<br />
en múltiples plataformas<br />
- Desarrolo sinxelo e económico<br />
- Non precisa de aprobación externa<br />
- Poden reutilizarse sitios ya diseñados<br />
- O usuario sempre dispón da<br />
última versión<br />
DESVANTAXES<br />
- Require de acceso a internet<br />
- Acceso moi limitado a elementos<br />
do hardware<br />
- Experiencia do usuario e tempo<br />
de resposta menor que na app<br />
nativa<br />
- Maior esforzo en promoción e<br />
visibilidade<br />
As aplicacións web execútanse dentro do propio navegador web<br />
do dispositivo a través <strong>dunha</strong> URL, polo cal non precisan de instalación<br />
xa que se visualizan usando o navegador e o contido adáptase á pantalla<br />
adquirindo un aspecto de navegación <strong>APP</strong>.<br />
As aplicacións web adoitan ter unha interfaz máis xenérica e<br />
independente da aparencia do sistema operativo, polo que a experiencia<br />
de identificación do usuario cos elementos de navegación e interacción,<br />
adoita ser menor que no caso das nativas.<br />
35
05<br />
Testeo da aplicación: análise e corrección de<br />
erros<br />
Esta fase é moi importante xa que implantaremos o deseño real<br />
que creamos no 3º paso e serviranos para garantir o perfecto funcionamento<br />
da aplicación.<br />
Deberemos probar<br />
todas e cada unha das<br />
funcións máis <strong>dunha</strong> vez<br />
de maneira que nos aseguremos<br />
que funcionan<br />
correctamente. Tamén sería<br />
preferible deixar que outras<br />
persoas a utilicen xa que<br />
eles poden atopar novas<br />
necesidades ou achegar<br />
opinións que poidan mellorar<br />
a súa funcionalidade.<br />
Apunta nunha lista todo aquilo que queiras mellorar grazas á información<br />
obtida durante as probas realizadas por ti mesmo e por outros<br />
usuarios. Entrega a lista ao programador para que realice os cambios.<br />
Unha vez mellorada volve probala para comprobar que todo funciona<br />
correctamente.<br />
Unha vez que o deseñador acabe de deseñar as skins ou as<br />
pantallas, todo estará listo para outra rolda de probas. Solidify e Framer<br />
son boas aplicacións de probas para poder probar a túa aplicación xa que<br />
permiten importar o deseño da app e engadir ligazóns onde sexa necesario<br />
para probar o fluxo de pantalla.<br />
36
06<br />
Integrar Anlytics<br />
Analytics axuda a controlar as descargas e a actividade dos usuarios<br />
como instalación ou desinstalación da app,... Podes utilizar ferramentas<br />
como Flurry que está dispoñible de forma gratuíta ou Localytics, que<br />
ten unha versión gratuita e outra de pago.<br />
07<br />
Permisos e seguridade <strong>móbil</strong>:<br />
A seguridade é un aspecto moi importante da nosa aplicación <strong>móbil</strong><br />
posto que conterá toda a información privada e persoal dos usuarios e<br />
que debemos protexer correctamente.<br />
Se non coidamos o aspecto da seguridade deixaremos a aplicación<br />
vulnerable a futuros ataques, ademáis de menosprezar a información<br />
confidencial dos usuarios da app.<br />
Estas son as propostas de controis de seguridade OWASP do<br />
Instituto Nacional de Tecnoloxías da Comunicación para previr eses erros:<br />
Integración de datos segura con outros servizos e aplicacións<br />
Implementar controis para previr o acceso non autorizado<br />
aos recursos de pago.<br />
Asegurar que os datos sensibles son protexidos ao transmitilos<br />
Manexar de forma segura as credenciais dos usuarios.<br />
Manter a seguridade co Backend.<br />
Identificar e protexer os datos sensibles.<br />
Permisos.<br />
37
Neste sentido, ao desenvolver apps <strong>móbil</strong>es debemos ter claro que<br />
antes de que o usuario descargue a aplicación <strong>móbil</strong> no seu dispositivo,<br />
ten que aparecerlle a xanela de confirmación coa lista de permisos que<br />
require esa app.<br />
En canto aos permisos debemos evitar solicitar permisos a funcións<br />
que a app non necesite indispensablemente. A gran importancia<br />
que teñen os permisos das aplicacións en cuestións de seguridade é<br />
evidente, por eso haberá que ter coidado con elas ao desenvolver apps<br />
<strong>móbil</strong>es.<br />
08<br />
Lanzamento<br />
O lanzamento da app será diferente según se traballe en Android,<br />
iOS ou como web app.<br />
Ter conta en Google<br />
Rexistrase como desarrollador na consola de<br />
Google Play cun pago único de 25$<br />
Para obter ingresos coa app hai que seguir<br />
os pasos anteriores e, ademáis, rexistrarse<br />
en Google Wallet<br />
Tamén se pode empaquetar o arquivo en<br />
APK e distribuilo directamente (exp: via mail)<br />
38
Para Apple é necesario un rexistro na súa páxina de<br />
desarrolladores (Developer Apple) e pagar un coste<br />
de licencia anual de 99$ ademáis de pasar por un proceso<br />
de validación (3-7 días)<br />
Deberemos empaquetar os nosos arquivos en librarías<br />
como Córdova ou Phonegrap que permitan visualizar<br />
as aplicacións web como se foran unha aplicación dun<br />
dispositivo <strong>móbil</strong>.<br />
39
09<br />
Márketing:<br />
Un paso importante é como promocionar unha aplicación <strong>móbil</strong><br />
para empezar a conseguir descargas.<br />
Dende a simple elección do nome e pasando pola difusión de contidos<br />
ata selección de keywords podemos seguir unha serie de pasos que<br />
nos poden axudar a dar a coñecer mellor a nosa app.<br />
A elección do nome é clave, ten que ser único e fácil de recordar<br />
e pronunciar.<br />
Elixir a categoría e subcategoría correcta da aplicación para<br />
que os usuarios atopen facilmente a nosa aplicación.<br />
Crear unha icona e incluir capturas de pantalla profesionais<br />
axudará a crear unha primeira boa impresión. A icona debe ser<br />
atractiva para destacar entre as demáis. As capturas de pantalla<br />
axudaran a explicar o contido.<br />
Escribir un título, describir a app e facer uso de keywors (palabras<br />
clave) pode determinar o noso éxito ou fracaso.<br />
Construir unha landing page sinxela e atractiva axudará a explicar<br />
de forma mais clara e concisa o que pode ofrecer a app.<br />
Crea un blogue e compartir diversos contidos que interesen aos<br />
nosos usuarios para enganchalos con información de utilidade.<br />
Promocionar a app en redes sociais como Facebook, Twitter e<br />
Google Plus son indispensables.<br />
Ofrecer un prezo promocional se a app é<br />
de pago impulsa aos clientes a comprar.<br />
40
10<br />
Mantemento- soporte de apps:<br />
Se buscamos que a nosa app sexa o máis profesional posible debemos<br />
facerlle un mantemento contínuo que permita mellorala. As tarefas<br />
do mantemento das aplicacións <strong>móbil</strong>es involucra:<br />
Corrixir problemas e erros reportados polos usuarios da<br />
aplicación.<br />
Agregar características solicitadas polos usuarios despois do<br />
lanzamento: mellorala según comentarios e valoracións.<br />
Soporte para usuarios.<br />
Aloxamento e administración: custos<br />
de aloxamento e administrativos.<br />
Custos de expansión: servidores adicionais<br />
ou optimización do código para<br />
unha expansión máis eficiente.<br />
41
42
43
44
Establecer uns criterios exactos á hora de deseñar unha aplicación<br />
sería erróneo, pois o mundo <strong>móbil</strong>, e o dá tecnoloxía<br />
en xeral, está en constante evolución e o que a día de hoxe<br />
é correcto ou nos é de axuda ao pouco tempo pode resultar<br />
obsoleto e de pouca utilidade.<br />
O que sí podemos concretar é que existen certos principios no<br />
mundo do deseño de aplicacións <strong>móbil</strong>es que se deben ter en<br />
conta e que son universais a cualquer dispositivo.<br />
Cada sistema operativo ten a súa propia identidade que é reflectida<br />
na aparencia e comportamento de cada un dos elementos<br />
que compoñen o seu interfaz. Neles imprime a súa<br />
personalidade, o que fai que a experiencia sexa diferente ás<br />
demais.<br />
45
3 PRINCIPIOS BÁSICOS<br />
SIMPLICIDADE<br />
Directamente relacionada<br />
coa usabilidade. Implica<br />
ser mínimo, contar con poucos<br />
elementos e que estes teñan unha<br />
función ben definida.<br />
A simplicidade consiste tamén en<br />
manexar a economía visual e ter<br />
un bo criterio para determinar que<br />
incluír e que non no deseño. Unha<br />
gran cantidade de elementos pode<br />
atafegar ao usuario.<br />
CONSISTENCIA<br />
Unha app ten diferentes<br />
pantallas que a compoñen<br />
e ao mesmo tempo, está dentro<br />
dun sistema operativo que propón<br />
un determinado aspecto visual e<br />
interacción.<br />
Trata de respectar estes coñecementos<br />
e costumes do usuario,<br />
favorece o uso intuitivo da app, xa<br />
que pode prever o seu comportamento<br />
sen demasiado esforzo.<br />
NAVEGACIÓN INTUITIVA<br />
Relacionada coa consistencia. Cada sistema operativo propón<br />
diferentes elementos para navegar pola app como botóns, pestanas<br />
e paneis. Facer uso deles fará que o usuario os recoñeza a primeira vista<br />
e, xa saiba como ir <strong>dunha</strong> sección a outra.<br />
Para o usuario é importante saber e prever que pasará despois de pulsar<br />
un botón ou como se mostrarán as pantallas. Unha navegación intuitiva<br />
permite, xustamente, lograr un uso fluído e sen esforzo da aplicación.<br />
46
FORMAS DE SOSTER O MÓBIL<br />
O deseño de aplicacións<br />
para <strong>móbil</strong>es ten que ter en<br />
conta a forma en que os usuarios<br />
suxeitan os teléfonos xa que as<br />
característcas anatómicas da man<br />
determinan certas zonas da pantalla<br />
que poden ser alcanzadas con<br />
maior ou menor frecuencia.<br />
Unha das maneiras máis habituais<br />
é que o sosteña cunha soa<br />
man, algo que pode ser liberador<br />
xa que deixa a outra man dispoñible<br />
pero ao mesmo tempo, condicionante,<br />
porque outorga moita<br />
responsabilidade ao dedo pulgar<br />
para realizar as interaccións.<br />
A «Lei do polgar» refírese á<br />
superficie de pantalla á que este<br />
dedo ten acceso sen maiores<br />
problemas e danos pistas para<br />
organizar xerárquicamente os<br />
elementos na interfaz.<br />
Con todo, cada sistema<br />
operativo fai un uso diferente dos<br />
espazos en pantalla e isto tamén<br />
condiciona o deseño da aplicación.<br />
47
ORIENTACIÓN DO TERMINAL<br />
Ter en conta a orientación<br />
do dispositivo ao utilizar a aplicación,<br />
significa aproveitar o mellor<br />
de cada escenario. Xeralmente,<br />
os teléfonos adoitan suxeitarse<br />
en forma vertical, mentres que en<br />
tablets é habitual alternar entre o<br />
formato vertical e horizontal<br />
É recomendable deseñar<br />
para ambas orientacións, xa que<br />
desta forma non se forza ao usuario<br />
a usar unha única versión ofrecida.<br />
Non entanto, en cada caso,<br />
haberá que avaliar se a aplicación<br />
realmente o require, considerando<br />
que deseñar a versión horizontal<br />
As diferentes orientacións son unha oportunidade de repensar a disposición de información<br />
Nos teléfonos, o modo horizontal<br />
úsase sobre todo naquelas<br />
situacións que requiren mellor<br />
aproveitamento da pantalla. Por<br />
exemplo, soster o teléfono en forma<br />
horizontal permite dispor dun<br />
teclado máis grande e unha maior<br />
superficie para pulsar as teclas,<br />
permitindo escribir máis comodamente.<br />
non consiste simplemente en trasladar<br />
de maneira directa cada elemento<br />
á posición máis parecida á<br />
súa localización en vertical, senón<br />
en sacar o máximo proveito do espazo<br />
dispoñible no modo apaisado,<br />
recolocando e acomodando os<br />
elementos gráficos e interactivos<br />
para mellorar a usabilidade.<br />
48
PATRÓNS INTERACCIÓN<br />
Os patróns de interacción son solucións xa probadas para dar<br />
resposta a problemas comúns de deseño que ocorren unha e outra vez.<br />
Apoiarse neles pode axilizar e simplificar o traballo de deseño <strong>dunha</strong><br />
interfaz. A súa utilización asegura, ademais, que os usuarios atoparán<br />
elementos familiares na interfaz que os farán sentirse máis cómodos e<br />
seguros ao usar a aplicación.<br />
NAVEGACIÓN: Unha navegación simple e consistente é un compoñente<br />
esencial na experiencia de uso da app e xorde de contestar algunhas<br />
preguntas básicas como:<br />
• De que maneira o usuario percorrerá a aplicación?<br />
• A través de menús ou do contido en si mesmo?<br />
• E se vén <strong>dunha</strong> notificación?<br />
• Como fará para volver atrás cando avanzase?<br />
Pestanas:<br />
Ou “tabs”<br />
serven para<br />
filtrar contidos<br />
ou mudar entre<br />
pantallas que<br />
teñen o mesmo<br />
nivel de xerarquía.<br />
Listas:<br />
Esta forma de<br />
agrupar items<br />
permite ao<br />
usuario tocar<br />
nalgún deles<br />
para obter máis<br />
info. É importante<br />
é xerarquizar<br />
o seu contido.<br />
Gal. Imaxes<br />
A disposición<br />
de imaxes está<br />
rexida pola<br />
retícula de<br />
cada Sistema<br />
Operativo<br />
Menú caixón<br />
Permite cambiar<br />
rapidamente<br />
entre pantallas<br />
da aplicación.<br />
Pulsando un<br />
botón desprégase<br />
de forma<br />
lateral unha lista<br />
cos contidos,<br />
oculta até ese<br />
momento<br />
Volver<br />
A medida que<br />
se avanza en<br />
contidos é necesario<br />
contar<br />
cunha forma de<br />
retroceder ou<br />
volver a outros<br />
niveis.<br />
O botón «volver»<br />
é físico nalgúns<br />
teléfonos<br />
Exemplos na páxina seguinte<br />
49
PATRÓNS INTERACCIÓN<br />
Esquema de pestanas, Tabs<br />
As pestanas sitúanse<br />
arriba en Android e<br />
Windows Phone e en<br />
iOS, abaixo.<br />
Esquema de listas<br />
Uso de listas en Android,<br />
iOS e Windows<br />
Phone.<br />
50
Esquema de galerías<br />
As galerías de imaxes<br />
usan un formato reticular<br />
en Android, iOS<br />
e Windows Phone.<br />
Esquema de menú caixón<br />
O menú tipo caixón<br />
fíxose moi popular<br />
en Android, iOS e<br />
Windows Phone,<br />
aínda que por agora<br />
só o primeiro incorpórao<br />
nas súas guías<br />
oficiais.<br />
Esquema de botón volver<br />
O botón de volver en<br />
Android úsase arriba<br />
entón chamado” up”<br />
e abaixo; en iOS,<br />
sempre arriba e en<br />
Windows Phone,<br />
é o botón físico do<br />
terminal.<br />
51
PATRÓNS INTERACCIÓN<br />
ACCIÓNS: A gran maioría de accións pódense realizar en determinadas<br />
páxinas e só alí teñen sentido. Con todo, pode haber excepcións<br />
cando sexa necesario que unha acción estea sempre visible. Neste último<br />
caso, as accións realmente importantes deben ser destacadas <strong>dunha</strong> forma<br />
moi evidente.<br />
Hai diferentes sitios onde situar as accións de acordo á súa xerarquía e<br />
funcionamento (máis importantes-visibles menos importantes-ocultas). O<br />
que si, é que a posición ten que ser consistente a través das distintas pantallas<br />
e con outras aplicacións do sistema operativo. Algunhas das preguntas<br />
que se teñen que facer á hora de definir as accións que se atoparán en<br />
cada pantalla da aplicación son:<br />
• Que accións son necesarias neste momento?<br />
• Que accións esperaría atopar o usuario logo de acceder a esta<br />
pantalla?<br />
• Cal de todas as accións é a máis importante?<br />
Barra accións<br />
O compendio de<br />
accións que se<br />
poden realizar<br />
preséntase por<br />
medio de iconas.<br />
A elección<br />
correcta destes<br />
recursos gráficos<br />
é fundamental<br />
Desborde<br />
accións<br />
As funcións<br />
extra e de uso<br />
pouco frecuente<br />
descóbrense<br />
por medio da<br />
«revelación<br />
progresiva».<br />
Están ocultas a<br />
maior parte do<br />
tempo, ata que<br />
o usuario<br />
as demanda.<br />
Accesos<br />
rápidos<br />
Accións que<br />
deben estar moi<br />
a man para que<br />
os usuarios poidan<br />
alcanzar os<br />
seus obxectivos<br />
rapidamente.<br />
Sobretodo para<br />
simplificar accións<br />
repetitivas<br />
Compartir<br />
Unha das<br />
accións máis<br />
empregadas<br />
nestes días,<br />
compartir nas<br />
redes sociais ou<br />
de comunicacións.<br />
Facilitar unha<br />
implementación<br />
integrada<br />
Buscar<br />
Maneira esencial<br />
de chegar<br />
ao consumo de<br />
contidos.<br />
En apps que<br />
mostran grandes<br />
cantidades<br />
de datos a<br />
procura pode<br />
ser a función<br />
primaria<br />
52
Esquema de barras de accións<br />
A barra de accións<br />
sitúase arriba en Android<br />
e abaixo en iOS<br />
e Windows Phone.<br />
Esquema de desborde de accións<br />
Android, iOS e Windows<br />
Phone expoñen<br />
diferentes alternativas<br />
para resolver o desborde<br />
de accións.<br />
Esquema de accesos rápidos<br />
Formas de acceder<br />
rapidamente a accións<br />
en Android, iOS<br />
e Windows Phone.<br />
53
PATRÓNS INTERACCIÓN<br />
Esquema de acción de compartir<br />
A acción de compartir<br />
desprégase arriba<br />
en Android, abaixo<br />
en iOS e en pantalla<br />
completa en Windows<br />
Phone<br />
Esquema de buscar<br />
Buscar sitúase arriba<br />
en Android e iOS;<br />
en Windows Phone<br />
utiliza unha pantalla<br />
aparte.<br />
54
CADROS DE DIÁLOGO: Hai casos puntuais nos que hai que<br />
interromper ao usuario de forma temporal para que tome unha decisión ou<br />
para explicarlle algo que sucedeu antes de continuar unha tarefa. Mentres<br />
os diálogos están visibles en pantalla non é posible facer outra cousa no<br />
resto da aplicación.<br />
Cando se trata de cadros que conteñen avisos que non requiren<br />
unha toma de decisión, estes son informativos e teñen unicamente un<br />
botón que se ocupa de pechalos. É recomendable limitar o seu uso para<br />
mensaxes graves ou transcendentais que non poidan esperar.<br />
Noutros casos, os cadros de diálogo úsanse para comunicar ao<br />
usuario que debe tomar unha decisión para poder continuar e pode elixir<br />
entre dúas ou máis opcións dispoñibles.<br />
Esquema de cadros de diálogo<br />
Cadros de diálogo<br />
que requiren a toma<br />
de decisións por parte<br />
do usuario en Android,<br />
iOS e Windows<br />
Phone<br />
55
PATRÓNS INTERACCIÓN<br />
NOTIFICACIÓNS DENTRO DA <strong>APP</strong>: Hai certas preguntas<br />
que poden pasar pola cabeza dun usuario cando non ten ningunha confirmación<br />
visual de que a acción que acaba de realizar foi ben. Cuestións<br />
como:<br />
• Que está a facer a app?<br />
• Como saber que a acción funcionou?<br />
• Xa terminou ou hai que facer algo máis?<br />
Para mitigar esta incerteza, aconséllase mostrar explicitamente<br />
como teñen que ir as cousas ou que sucederá con simples mensaxes de<br />
confirmación. Este tipo de mensaxes preséntanse en pequenos avisos<br />
que desaparecen logo duns segundos.<br />
A diferenza dos cadros de diálogo, as notificacións non requiren a<br />
intervención do usuario nin tampouco interrompen o seu fluxo de traballo.<br />
Esquema de notificacións<br />
Só Android ofrece<br />
notificacións in-app<br />
nativas, mentres que<br />
en iOS e Windows<br />
Phone deben programarse<br />
especialmente.<br />
56
INTRODUCIÓN DE DATOS: A introdución de datos no <strong>móbil</strong><br />
pode ser tediosa cando se trata de campos que requiren o uso do teclado,<br />
un elemento que ocupa gran parte da pantalla e que dificulta a navegación<br />
entre os campos para introducir información.<br />
En lugar de teclados é recomendable usar outras alternativas como<br />
menús deslizantes, desplegables, checks ou calquera opción similar a<br />
unha lista onde o usuario poida elixir entre varias opcións.<br />
Alternativamente, existen tamén compoñentes de hardware no<br />
teléfono como sensores de localización, cámaras e micrófonos que poden<br />
empregarse tamén para ingresar datos na aplicación.<br />
Esquema de teclados<br />
Diferentes tipos de<br />
teclados usados para<br />
introdución de datos<br />
en Android, iOS e<br />
Windows Phone.<br />
Esquema de introducción por voz<br />
O micrófono do teléfono<br />
pódese aproveitar<br />
para introducir datos<br />
sen necesidade de<br />
usar o teclado, como<br />
fai Google.<br />
57
PATRÓNS INTERACCIÓN<br />
XESTOS: Tocar é o input principal dos teléfonos <strong>móbil</strong>es modernos.<br />
Todo queda en mans do usuario que manipula os elementos directamente<br />
na pantalla.<br />
Xestos simples como tocar, arrastrar ou deslizar que requiren só<br />
un ou dous dedos foron ben asimilados polos usuarios, que os atopan<br />
naturais e familiares como os que realizan fóra das aplicacións.<br />
O uso dos xestos pódese aproveitar no deseño de aplicacións, que<br />
debe consideralos como medios para realizar accións ou navegar polos<br />
contidos.<br />
Tocar Arrastrar Deslizar<br />
Manter<br />
Dobre pegada<br />
Xuntar-Separar<br />
58
59
60
LIBRARÍAS<br />
O deseño <strong>dunha</strong> aplicación pode ser todo o persoal que se queira<br />
ou pódese facer uso das “librarías”. E que son as “librarías”?<br />
En programación, chámase así ao conxunto de código externo que<br />
se pode aproveitar para conseguir determinados comportamentos. Ten<br />
relación directa coa linguaxe de programación elixido. É como un kit de<br />
ferramentas de software pequeno e autónomo que contén código e datos<br />
que ofrecen unha funcionalidade moi específica ao usuario. Normalmente<br />
úsase xunto con outras librarías e ferramentas para facer unha aplicación<br />
completa, xa que polo xeral as bibliotecas non son executables.<br />
Polo tanto, unha libraría é os propios recursos que nos ofrecen os<br />
sistemas, ou recursos independentes compatibles con o sistema elexido,<br />
para programar unha aplicación. O uso ou non uso destes implica certas<br />
vantaxes e certas desvantaxes<br />
VANTAXES<br />
- Menor peso da app ao non estar<br />
as imaxes contidas na App.<br />
- Maior rapidez de carga ao recorrer<br />
ás imaxes do núcleo.<br />
- Aspecto robusto e nativo integrado<br />
co Sistema Operativo.<br />
- Redución substancial do tempo<br />
dedicado a deseñar e programar.<br />
DESVANTAXES<br />
- <strong>Deseño</strong> impersonal, da túa app.<br />
- Marca diluída ao non haber<br />
apena diferenciación respecto de<br />
moitas outras apps.<br />
- Non poderás explotar e mostrar<br />
todo o teu talento ao converterse<br />
nun traballo máis de maquetación<br />
que de deseño.<br />
Todos os sistemas operativos <strong>móbil</strong>es teñen unha guía acerca de<br />
como deseñar para esa contorna, constitúen unha gran axuda para familiarizarse<br />
co SO.<br />
61
62
MATERIAL DESIGN<br />
Que é Material Design? Históricamente Android tivo deseño Holo,<br />
pero durante a conferencia de Google I/Ou, conferencia anual que da<br />
Google, do 2014 presentouse o que será a guía de deseño para Android,<br />
Material Design.<br />
Material Design creouse na versión Android 5.0 Lollipop. A día de<br />
hoxe están na versión 6.0 Marshmallow, versión mellorada do sistema<br />
que é totalmente compatible con Material. Esta especificación é un documento<br />
vivo que se actualizará a medida que se avanza no seu desenvolvemento,<br />
respectando sempre os principios de deseño.<br />
É importante ter unha idea clara do que supón esta guía gráfica<br />
xa que a partir de agora será o novo estilo e a tendencia que marcará o<br />
deseño Android.<br />
Material Design é un concepto, unha filosofía, unhas pautas enfocadas<br />
ao deseño utilizando Android, pero tamén na web e en calquera<br />
plataforma. O encargado de crear Material Design, e máximo responsable<br />
de deseño en Google, é o chileno Matías Duarte.<br />
INTRODUCCIÓN A MATERIAL DESIGN: Para crear<br />
esta guía a equipa creativa de Google baseou o seu deseño en obxectos<br />
tanxibles nun intento de achegarse ao mundo real, aproximarse á realidade,<br />
algo que nun mundo onde todo é táctil e virtual é difícil.<br />
É un deseño onde a profundidade, as superficies, os bordos, as<br />
sombras e as cores xogan un papel principal e para iso, Material Design,<br />
guíase polas leis da física para que as animacións sexan lóxicas, os<br />
obxectos se superpoñan pero non se atravesen o un ao outro, as sombras<br />
sexan precisas... Unha linguaxe visual que sintetiza os principios<br />
clásicos do bo deseño coa innovación e as posibilidades que ofrecen a<br />
tecnoloxía e a ciencia.<br />
63
MATERIAL DESIGN<br />
PRINCIPIOS:<br />
O material como símbolo<br />
O material como unificador dun<br />
espazo racionalizado baseado<br />
na realidade táctil inspirado no<br />
estudo do papel e da tinta pero<br />
tecnoloxicamente avanzado.<br />
As superficies e bordes do<br />
elemento e o uso de atributos<br />
táctiles axuda aos usuarios a<br />
comprender rapidamenteo a súa<br />
funcionalidade.<br />
Os fundamentos da luz, da<br />
superficie e o movemento son<br />
clave para entender como se<br />
moven, como interactúan e<br />
como existen os obxectos<br />
no espazo. Unha iluminación<br />
realista mostra o encaixe, divide<br />
o espazo e indica as partes en<br />
movemento.<br />
Intrépido-gráfico-intencional<br />
Elementos fundamentais como<br />
a tipografía, as cuadrículas, o<br />
espazo, a escala, a cor e o uso<br />
de imaxes, ademáis de agradar<br />
á vista, crean xerarquía, significado<br />
e orientación. A escolla de<br />
cor deliberada, percorrido visual,<br />
tipografía de gran escala e o<br />
espazo en branco crean unha<br />
interfaz audaz e gráfica que<br />
mergulla ao usuario na propia<br />
experiencia.<br />
A énfase nas accións do<br />
usuario fai que a funcionalidade<br />
principal apareza evidente ante<br />
él e lle proporcione puntos de<br />
referencia.<br />
Movemento= significado<br />
O movemento básease no<br />
usuario como motor primario.<br />
As accións primarias son puntos<br />
de inflexión que inician o movemento,<br />
a transformación de todo<br />
o deseño.<br />
Toda acción ten lugar nunha<br />
única contorna. Os obxectos<br />
preséntanse ao usuario sen<br />
romper a continuidade da experiencia<br />
que este ten, mesmo<br />
a medida que se transforman e<br />
reorganiza.<br />
O movemento serve para<br />
centrar a atención e manter a<br />
continuidade: a retroalimentación<br />
debe ser sutil pero clara<br />
e as transicións eficientes e<br />
coherentes.<br />
64
QUE É?<br />
QUE É MATERIAL?: ENTORNO<br />
Mundo 3D<br />
O entorno 3D é un espazo<br />
en sí, o que significa que todos os<br />
compoñentes teñen X, Y e Z como<br />
eixos de dimensión. O eixo Z está<br />
alineado perpendicularmente ao<br />
plano da pantalla e o eixo X positivo<br />
esténdese cara ao espectador.<br />
Cada pantalla, capa, ocupa unha<br />
soa posición ao longo do eixo Z e ten un espesor 1DP estándar, equivalente<br />
a un píxel de espesor nas pantallas cunha densidade de píxeles de<br />
160. O entorno 3D emúlase mediante a manipulación do eixo Y<br />
Luz e sombra<br />
Traballando nunha contorna virtual as luces que iluminarán o<br />
espazo de traballo serán, claramente, artificiais. O uso <strong>dunha</strong> proxección<br />
primaria das luces crea sombras direccionais, mentres que a luz ambiente<br />
crea sombras suaves desde todos os ángulos. Polo tanto, as sombras<br />
emitidas sempre serán por estas dúas fontes de luz.<br />
65
MATERIAL DESIGN<br />
QUE É MATERIAL?: OBXETOS NO ESPAZO 3D: Hai<br />
paralelismos entre a organización de obxectos tanto no mundo físico<br />
como no espazo de Material Design. No mundo físico, os obxectos poden<br />
ser apilados ou fixados un respecto doutro, pero non se pode pasar a<br />
través deles, entón, estes obxectos proxectan sombras e reflicten luces.<br />
Esas calidades son aplicadas aos obxectos de Material Design, e<br />
axudan a crear un modelo espacial consistente que se aplique ao longo<br />
de todas as apps de forma que sexa familiar aos usuarios.<br />
Elevación<br />
A elevación é a posición relativa<br />
dun obxecto ao longo do eixo Z<br />
da vista principal.<br />
A elevación é medida nas<br />
mesmas unidades que nos eixos<br />
(X,Y), normalmente en densidade<br />
independente de píxeles (dp). Material<br />
ten como estándar 1dp de grosor, todas as elevacións son medidas<br />
dende a parte superior <strong>dunha</strong> superficie até a parte superior doutra<br />
superficie.<br />
- Elevación en repouso: Todos<br />
os obxectos teñen unha elevación<br />
en repouso, independentemente<br />
de que este obxecto<br />
sexa un compoñente pequeno<br />
ou unha capa que ocupe toda a<br />
pantalla.<br />
No estado estático a elevación<br />
para un obxecto non cambia. É<br />
constante en toda a app.<br />
66
QUE É?<br />
A elevación en repouso para un tipo de compoñente ten que ser<br />
coherente en todas as apps dentro <strong>dunha</strong> plataforma. Con todo,<br />
o mesmo tipo de compoñente pode ter diferentes elevacións en<br />
función da plataforma na que se atope, dependendo do espesor<br />
da contorna<br />
- Elevación receptiva e desprazamentos<br />
de elevación dinámicos:<br />
Certos tipos de compoñentes<br />
teñen unha elevación<br />
receptiva, é dicir, cambian a súa<br />
elevación en resposta ás entradas<br />
do usuario ou os eventos do<br />
sistema. Os diferentes estados<br />
dos compoñentes (normal, enfocado,<br />
presionado, etc) poden<br />
provocar cambios na elevación,<br />
os cales serán correctamente<br />
implementados usando desprazamentos<br />
de elevación dinámicos.<br />
Os desprazamentos de elevación dinámicos son relativos ao estado<br />
de repouso do compoñente, e actúan como a elevación que<br />
alcanzará o compoñente ao cambiar entre os estados dados do<br />
mesmo. Tamén se aseguran de que os cambios de elevación<br />
para unha acción determinada son coherentes nun conxunto de<br />
compoñentes. Por exemplo, para todos os compoñentes que<br />
se eleven ao presionar sobre eles teñen o mesmo cambio de<br />
elevación.<br />
Unha vez que o evento de entrada é completado ou cancelado,<br />
o compoñente regresará á súa elevación de repouso.<br />
67
MATERIAL DESIGN<br />
- Sombras funcionais: As sombras proporcionan varios sinais<br />
visuais importantes sobre a organización dos obxectos no espazo.<br />
As sombras son o único elemento que nos indica a cantidade<br />
de separación entre as superficies. A elevación dun obxecto determina<br />
a aparencia visual da súa sombra.<br />
Non<br />
Sen unha sombra, non hai nada<br />
que indique que o botón flotante é<br />
unha superficie separada do resto<br />
de superficies do fondo.<br />
Si<br />
As sombras suaves e alongadas<br />
indican que o botón flotante está<br />
nunha elevación máis alta que a<br />
barra da app.<br />
Nos movementos, as sombras tamén proporcionan sinais relacionados<br />
coa dirección do movemento. É outra ferramenta para<br />
indicar se a distancia entre dúas superficies está a aumentar ou<br />
a diminuir.<br />
Xerarquía dos Obxectos<br />
En función de como se organicen os obxectos, ou as coleccións<br />
de obxectos nunha app, determínase como se moverán en relación uns<br />
fronte aos outros. Os obxectos poden moverse de forma independente ou<br />
estar limitados por outros de maior xerarquía.<br />
Todos os obxectos son parte <strong>dunha</strong> xerarquía descrita en termos<br />
de relacións pai-fillo. O fillo en cada unha desas relacións é o elemento<br />
68
QUE É?<br />
que se subordina ao elemento pai. Os obxectos poden ser fillos tanto do<br />
sistema como doutros obxectos.<br />
- Especificacións pai-fillo:<br />
• Cada obxecto ten un pai.<br />
• Cada obxecto pode ter un número de fillos.<br />
• Os fillos herdan as propiedades dos seus pais relacionadas coa<br />
transformación como: a posición, a rotación, a escala e a elevación.<br />
• Os irmáns son obxectos do mesmo nivel nunha xerarquía.<br />
- Excepcións: Os elementos emparentados coa orixe ou a raíz,<br />
como os elementos principais da UI, móvense de forma independente<br />
ao resto de obxectos. Por exemplo, o botón flotante<br />
(FAB) non se despraza co contido. Outros elementos que se inclúen<br />
nestas excepcións son:<br />
• Menús laterais ou navigation drawers.<br />
• Action bars ou toolbars.<br />
• Diálogos.<br />
- Interaccións: Como os obxectos interactúan entre eles vén<br />
determinado pola súa localización na xerarquía pai-fillo.<br />
Por exemplo:<br />
- Os fillos teñen unha separación mínima no eixo Z respecto do<br />
seu pai; os outros obxectos non interfiren entre o pai e os fillos.<br />
- Nun desprazamento a través <strong>dunha</strong> colección de “cards”, ou<br />
tarxetas, os cartóns son irmás entre eles, así que se moverán<br />
ao mesmo tempo.<br />
69
MATERIAL DESIGN<br />
EN QUE SE BASEA MATERIAL DESIGN?: Material Design<br />
recibe o seu nome por estar baseado en obxectos materiais. Pezas<br />
colocadas nun espazo (lugar) e cun tempo (movemento) determinado<br />
delimitando claramente o tipo de menús, os botóns e os tipos de imaxes<br />
a elixir.<br />
Elementos ordenados e imaxes clara:<br />
Material Design é un deseño cunha tipografía clara, caixas ben ordenadas,<br />
cores e imaxes rechamantes que lle otorga un sentido da orde<br />
e unha xerarquía moi marcada, ademáis de centrar a nosa atención en<br />
todo o conxunto do deseño. Estas ideas xa se aplican en moitos deseños,<br />
pero en Material Design Google creou unhas normas moi claras de como<br />
levalo á práctica.<br />
Luz e sombras dan sensación de xerarquía:<br />
Uno dos elementos clave é a luz e as sombras. Unha iluminación<br />
realista proporciona indicios de como se comportará un elemento e en<br />
que nivel se atopa este. Imaxinemos un cadrado que ten a súa sombra<br />
sobre outro cadrado, o cerebro humano entende que o que recibe a sombra<br />
é o que está debaixo.<br />
O movemento é a mellor forma de guiar ao usuario:<br />
O movemento é outro elemento fundamental, por exemplo: un<br />
obxecto que parpadea significa que está a chamar a túa atención, un elemento<br />
que se expande é que se acaba de abrir. Todos estes movementos<br />
créanse nunha dirección determinada.<br />
70
QUE É?<br />
Animacións e movemento, elementos característicos:<br />
É importante fixarse no tempo en que aparecen as cousas; primeiro<br />
imaxes e logo botóns flotantes. Tamén na velocidade, xa que os<br />
elementos non aparecen de súpeto. Finalmente está a dirección dende<br />
a que aparecen pois este movemento está a indicar ao usuario de onde<br />
provén a información.<br />
Un deseño adaptado para todo tipo de pantallas:<br />
Material Design on se debe concebir como como un deseño destinado<br />
para as aplicacións <strong>móbil</strong>es de Android. De feito, é multiplataforma.<br />
Tantos os smartphones, tablets, smartwatches ou televisores poden facer<br />
uso deste deseño. Tamén as páxinas webs. Material Design foi creado<br />
pensando en todos os sistemas, non só Android.<br />
Material Design ten as súas propias normas para case todos os<br />
detalles e estes se manteñen independentemente do tamaño de pantalla.<br />
Precisamente esa transversalidade é o seu punto forte.<br />
PRINCIPIOS DE DESEÑO PARA ANDROID: Estes<br />
principios de deseño foron desenvolvidos polo Equipo de Experiencia de<br />
Usuario Android tendo en mente os intereses dos usuarios e deben ser<br />
considerados á hora de facer unha app, ao aplicar a túa creatividade e<br />
ao establecer o deseño. O deseño de Android ten en conta tres puntos<br />
principais, os cales se aplican tanto ao noso núcleo de aplicacións como<br />
ao longo de todo o sistema. Polo tanto, se debe deseñar unha aplicación<br />
considerando devanditos puntos: Sedúceme, simplifica a miña vida e<br />
sorpréndeme.<br />
71
MATERIAL DESIGN: SEDÚCEME<br />
Séduceme:<br />
As aplicacións de Android son elegantes e esteticamente agradables.<br />
As transicións son rápidas e claras; a disposición dos elementos é<br />
eficaz e as tipografías son nítidas e significativas. Como unha ferramenta<br />
ben feita, unha aplicación debería esforzarse en combinar a beleza e a<br />
simplicidade co propósito de crear unha experiencia fácil de usar ademais<br />
de poderosa.<br />
- Deléitame de forma sorprendente:<br />
Unha superficie atractiva,<br />
unha animación colocada no<br />
lugar correcto ou un efecto de<br />
son ben sincronizado adoitan<br />
ser experiencias desfrutable. Os<br />
efectos sutís contribúen a crear<br />
un sentimento de facilidade e a<br />
sensación de que se conta cunha<br />
forza potente.<br />
- Os obxectos reais son máis<br />
divertidos que os botóns e os<br />
menús: Permite que se poidan<br />
tocar e manipular directamente<br />
os obxectos da aplicación. Isto<br />
reduce o esforzo cognitivo que<br />
se precisa para levar a cabo<br />
unha tarefa.<br />
72
PRINCIPIOS<br />
- Toque persoal: Aos usuarios<br />
gústalles agregar toques persoais,<br />
pois isto axúdalles a sentir<br />
que teñen o control. Ofrece<br />
opcións predeterminadas prácticas<br />
e atractivas, pero tamén ten<br />
en conta personalizaciones opcionais<br />
e divertidas que non entorpezan<br />
as tarefas principais.<br />
- Coñéceme: Aprende das preferencias<br />
dos usuarios. En lugar<br />
de pedirlles que elixan as mesmas<br />
cousas unha e outra vez,<br />
permita que poidan acceder facilmente<br />
ás opcións que xa elixiron<br />
antes.<br />
Simplifica a miña vida:<br />
As aplicacións de Android fan a vida máis fácil e son simples de<br />
comprender. Cando as persoas usen unha aplicación por primeira vez,<br />
deberían entender intuitivamente a maioría das funcións importantes.<br />
As tarefas simples non requiren procedementos complexos, e as tarefas<br />
complexas son adaptadas polas mans e a mente humana. Calquera<br />
persoa sen importar a súa idade ou cultura, ten que sentir firmemente o<br />
control e nunca atafegarse por culpa de ter que tomar demasiadas decisións<br />
ou calquera aspecto irrelevante.<br />
- Se breve: Utilice frases curtas con palabras simples. As persoas<br />
tenden a omitir as oracións longas.<br />
73
MATERIAL DESIGN: SIMPLIFICA<br />
- As imaxes son máis prácticas<br />
que as palabras: Considera<br />
a idea de utilizar imaxes para<br />
explicar as ideas. As imaxes<br />
atraen a atención das persoas e<br />
poden ser moito máis eficientes<br />
que as palabras.<br />
- Decide por min, pero permíteme<br />
ter a última palabra: Actuar<br />
sen preguntar primeiro. Ter<br />
que elixir demasiadas veces e<br />
tomar moitas decisións fai que<br />
as persoas se sintan molestas.<br />
Permite que os usuarios poidan<br />
desfacer as súas eleccións no<br />
caso de que non sexan o que<br />
desexan.<br />
- Só móstrame o que necesito,<br />
cando o necesito: Os usuarios<br />
síntense agobiados cando<br />
se lles presenta demasiada<br />
información ao mesmo tempo.<br />
Dividir as tarefas e a información<br />
en fragmentos pequenos e<br />
ocultar as opcións que non son<br />
fundamentais no momento ensina<br />
aos usuarios.<br />
74
PRINCIPIOS<br />
- Sempre debo saber onde me<br />
atopo: Deixa que os usuarios<br />
sintan que coñecen o camiño<br />
de regreso. Para iso, deseña<br />
as distintas partes da aplicación<br />
de modo tal que se vexan diferentes<br />
e utiliza transicións para<br />
mostrar a relación entre as pantallas.<br />
- Nunca perdas o que é meu:<br />
Garda aquelas cousas que os<br />
usuarios crearon e permítelles<br />
acceder a elas dende calquer<br />
lugar. Lembra as configuracións,<br />
os toques persoais e as<br />
creacións en tódolos teléfonos.<br />
Esta é a forma de facer que as<br />
actualizacións sexan o máis<br />
simple do mundo.<br />
- Se se ve igual, debe funcionar<br />
da mesma maneira: Os<br />
usuarios deben distinguir as<br />
diferentes funcións deseñando<br />
estas cun aspecto diferente en<br />
lugar de sutís. Hai que evitar<br />
os módulos, que son sitios que<br />
polo xeral locen similares pero<br />
actúan diferente ante a mesma<br />
entrada.<br />
75
MATERIAL DESIGN: SORPRÉNDEME<br />
- Interrómpeme so se é<br />
importante: Evite aos usuarios<br />
os pormenores pouco importantes.<br />
As persoas desexan estar<br />
concentradas e, a menos que<br />
sexa fundamental, unha interrupción<br />
pode resultar abrumador<br />
e frustrante.<br />
Sorpréndeme<br />
Non basta con facer unha aplicación simple e fácil de usar. As<br />
aplicacións de Android permiten ás persoas facer novas tarefas e usar as<br />
apps de formas novas e orixinais, permiten ademáis combinar as aplicacións<br />
dentro de novos fluxos de traballo a través das multitarefas, das<br />
notificacións e de compartir a través de calquera aplicación.<br />
- Ofrézame trucos que funcionen<br />
en todos lados: As<br />
persoas síntense plenas cando<br />
descobren cousas por si mesmas.<br />
Logra que a aplicación<br />
sexa simple de utilizar aproveitando<br />
os patróns visuais e a memoria<br />
muscular doutras aplicacións<br />
de Android.<br />
- Non é fallo meu: Se sutil cando solicites aos usuarios que realicen<br />
correccións. Eles desexan sentirse intelixentes cando usan<br />
unha aplicación. Se fan algo mal, bríndalles instrucións claras de<br />
recuperación, pero evita darlles detalles técnicos.<br />
76
PRINCIPIOS<br />
- Fomenta o simple: Desagrega<br />
as tarefas complexas<br />
en pasos máis pequenos que<br />
se poidan cumprir facilmente.<br />
Ofrece comentarios sobre as<br />
accións, mesmo se é simplemente<br />
un feixe de luz ténue.<br />
- Fai o traballo pesado por<br />
min: Fai que os principiantes<br />
se sintan como expertos ao<br />
permitirlles facer cousas que<br />
pensaron que nunca poderían<br />
facer. Por exemplo, a través dos<br />
múltiples efectos de fotografías,<br />
podes lograr que as fotografías<br />
de principiantes se vexan excelentes<br />
en pequenos pasos.<br />
- Fai que o importante sexa<br />
rápido: Non tódalas accións<br />
son iguais. Decide que é o máis<br />
importante nunha aplicación e<br />
fai que os usuarios o poidan atopar<br />
facilmente e utilizar de forma<br />
rápida, como o obturador <strong>dunha</strong><br />
cámara ou o botón de pausa<br />
dun reprodutor de música.<br />
77
VISTA XERAL DA UI<br />
VISTA XERAL DA UI: A interfaz de usuario (UI polas súas siglas<br />
en inglés) de Android proporciona unha estrutura sobre a cal construír<br />
unha aplicación. Os aspectos máis importantes inclúen a pantalla de<br />
inicio, a navegación global do dispositivo e as notificacións.<br />
A aplicación debe manter a consistencia da experiencia que transmite<br />
Android, e debe ser ao mesmo tempo grata de usar.<br />
Pantallas<br />
Pantalla de inicio<br />
A pantalla de inicio é un espazo<br />
encargado de aloxar os accesos<br />
directos das aplicacións, os<br />
cartafois e os widgets. Podes<br />
navegar entre os diferentes<br />
escritorios mediante deslizamientos<br />
cara á dereita ou a<br />
esquerda.<br />
Pantalla “caixa aplicacións”<br />
Esta pantalla permíteche atopar<br />
todas as aplicacións e widgets<br />
instalados no dispositivo.<br />
Os usuarios poden arrastrar<br />
unha icona de aplicación ou un<br />
widget e colocalo nun sitio baleiro<br />
que exista en calquera dos<br />
escritorios da pantalla de inicio.<br />
Pantalla de Apps recentes<br />
Recentes proporciona unha<br />
forma eficiente de cambiar<br />
entre aplicacións que se usaron<br />
recentemente.<br />
O botón Recentes á esquerda<br />
da barra de navegación mostra<br />
as aplicacións coas que o<br />
usuario interactuou máis recentemente.<br />
78
DISPOSITIVOS<br />
Navegación global:<br />
As barras do sistema son áreas da pantalla dedicadas a mostrar as<br />
notificacións, o estado das comunicacións do dispositivo e outros elementos<br />
da navegación. Normalmente as barras do sistema móstranse ao<br />
mesmo tempo que unha aplicación. As aplicacións que mostran o contido<br />
en modo inmerso, como as películas ou as imaxes, poden ocultar temporalmente<br />
as barras do sistema para permitir ao usuario gozar do contido<br />
en pantalla completa sen distraccións.<br />
- Barra de Estado: Mostra as notificacións pendentes á esquerda<br />
e o estado, así como o tempo, o nivel de batería, a forza do<br />
sinal <strong>móbil</strong> ou WI-FI...<br />
Notificacións:<br />
As notificacións son mensaxes breves as<br />
que poden acceder os usuarios dende a barra de<br />
estado en calquer momento. Proporcionan actualizacións,<br />
recordatorios ou información que é importante<br />
pero non o suficiente crítica como para interrumpir<br />
una acción.<br />
Tocar unha notificación<br />
abre<br />
a aplicación<br />
asociada.<br />
A forma recomendada de presentar unha notificación é cun título<br />
que inclúa dúas liñas de texto.<br />
79
DISPOSITIVOS E MEDIDAS<br />
DISPOSITIVOS E PANTALLAS: Android está presente en<br />
millóns de teléfonos, tablets e outros dispositivos nunha ampla variedade<br />
de tamaños e formas de pantallas. Grazas á vantaxe do sistema de<br />
disposicións (layouts) flexibles de Android, podes crear aplicacións que<br />
se escalen axeitadamente a calquera pantalla, desde grandes tablets aos<br />
teléfonos máis pequenos.<br />
Flexibilidade<br />
Estira e comprime as túas<br />
disposicións para que se acomoden<br />
ás diferentes alturas e<br />
anchuras das pantallas.<br />
Optimización dos layouts<br />
Nos dispositivos máis grandes<br />
podes aproveitar o espazo para<br />
mostrar unha pantalla real extra.<br />
Creando composicións de vistas<br />
podes combinar múltiples vistas<br />
para revelar máis contido e<br />
facer máis fácil a navegación.<br />
Recursos para todos<br />
Proporciona recursos para as diferentes<br />
densidades de pantalla<br />
(DPI) existentes para asegurarte<br />
de que a túa aplicación se mostra<br />
ben en calquer dispositivo.<br />
Estratexias<br />
Por onde comezar cando se<br />
vai a deseñar unha app para varias<br />
pantallas? Unha forma é traballar<br />
seguindo unha estándar base (tamaño<br />
normal e unha densidade MDPI) e aumentar ou reducir o tamaño para o<br />
resto. Outro camiño é empezar a deseñar para as pantallas máis grandes e<br />
despois reducir o tamaño e arranxar os problemas relacionados coa interfaz<br />
para que funcione ben nas pantallas máis pequenas. (pax. 100-101)<br />
80
ESTILOS<br />
MEDIDAS E CUADRÍCULAS: Os dispositivos, ademais do<br />
tamaño físico, tamén varían na densidade de pantalla (DPI). Para facilitar<br />
o deseño <strong>dunha</strong> aplicación pensa que cada dispositivo ten unha pantalla<br />
cun tamaño e densidade particular.<br />
• O tamaño destes son <strong>móbil</strong>es (máis pequenos de 600dp) e<br />
tablets (maior ou igual a 600dp).<br />
• A densidade pode ser LDPI, MDPI, HDPI, XHDPI, XXHDPI e<br />
XXXHDPI.<br />
Optimiza a interfaz <strong>dunha</strong> aplicación deseñando disposicións (layouts)<br />
alternativas para os diferentes tamaños de pantalla e proporciona<br />
imaxes con diferente resolución para cada densidade de pantalla.<br />
É importante deseñar e implementar as aplicacións para múltiples<br />
densidades, segue as guías de abaixo e a documentación referida ás<br />
dimensións das disposicións con medidas en unidades dp en lugar de en<br />
píxeles.<br />
Consideracións acerca<br />
do espazo<br />
Os dispositivos variarán a<br />
cantidade de píxeles independentemente<br />
dos píxeles (dp) que poidan<br />
mostrar.<br />
48dp de Tamaño<br />
Os elementos da interfaz que se poden tocar normalmente teñen<br />
un tamaño de 48dp.<br />
81
DISPOSITIVOS E MEDIDAS<br />
- Por que 48dp?: De media, 48dp é igual a un tamaño físico<br />
próximo aos 9 mm (con algunha variación). É un rango bastante<br />
cómodo de tamaño recomendado para elementos que poden<br />
ser tocados (de 7 mm a 10 mm) e os usuarios serán capaces de<br />
tocalos cos seus dedos cunha boa precisión.<br />
Se deseñas os teus elementos con polo menos 48dp de altura e<br />
anchura garantirás que:<br />
• Os teus obxectos nunca serán máis pequenos que o mínimo<br />
recomendado de 7 mm en calquera pantalla nos que se mostren.<br />
• Haberá unha boa relación entre a densidade da información xeral<br />
e a dos elementos na interfaz.<br />
- Pensa nos ocos: O<br />
espazo mínimo entre<br />
cada elemento é de<br />
8dp.<br />
82
ESTILOS<br />
Exemplos<br />
Guías e marxes<br />
- Marxes esquerdo e dereito da<br />
pantalla: 16dp<br />
- Contido contíguo ao marxe<br />
esquerdo da pantalla: 72dp<br />
Espaciado vertical<br />
1- Barra de estado: 24dp<br />
2- Toolbar: 56dp<br />
3- Título e lista de items: 72dp<br />
4- Subtítulo: 48dp<br />
5- Espaciado entre áreas de<br />
contido: 8dp<br />
Tamaño de espazos táctiles<br />
Para garantir o equilibrio e o uso<br />
da información, os obxectos táctiles<br />
deben ser de polo menos<br />
48 x 48 dp . Con 8dp mínimo de<br />
espazo entre eles.<br />
Elementos de polos menos 48dp<br />
de tamaño polo alto e o ancho.<br />
- Avatar: 40dp<br />
- Icona: 24dp<br />
- Espazo táctil de ambas: 48dp<br />
- Exemplo de espazos táctiles<br />
83
TIPOGRAFÍA<br />
TIPOGRAFÍA: A linguaxe de<br />
deseño de Android baséase nas<br />
ferramentas de tipografía tradicionais<br />
tales como a escala, espazo, cadencia<br />
e aliñamento coa cuadrícula<br />
subxacente. Para soportar o uso<br />
de tipografías, Ice Cream Sandwich<br />
introduciu un novo tipo de familia<br />
chamada Roboto, creada especificamente<br />
para os requisitos <strong>dunha</strong> UI<br />
para as pantallas de alta resolución.<br />
O actual sistema TextView<br />
(Vista de Texto) ofrece a fonte<br />
Roboto en 6 pesos: delgado, lixeiro,<br />
normal, medium, bold e negrita,<br />
podendo combinarse cada unha co<br />
estilo cursiva ou Condensed.<br />
Escala tipográfica<br />
O contraste nos tamaños de<br />
letra pódense combinar de diferentes<br />
formas e orde para crear<br />
deseños comprensibles. Con todo,<br />
cantos máis tamaños de letra existan<br />
na mesma UI, máis incomodidade sufrirá o usuario. O sistema de Android<br />
usa o seguinte conxunto limitado de tamaños de letra. Esta escala<br />
tipográfica funciona á perfección ao longo do layout, mantén o equilibrio<br />
na densidade do contido e a comodidade ao ler.<br />
Cor e contraste:<br />
Unha cor de texto similar ao fondo resultaría difícil de ler, igualmente<br />
acontece cun texto que xenere moito contraste.<br />
84
ESTILOS<br />
Malos usos<br />
1. Deixar colgadas palabras curtas<br />
2. Deixar fisuras<br />
3. Separar palabras<br />
4. Deixar orfas<br />
5. Deixar espazos en branco Separar<br />
palabras con guión<br />
Lexibilidade:<br />
Considerando estes consellos<br />
de lexibilidade e tamaño de liña,<br />
temos en conta que:<br />
• 60 caracteres por linea proporciona<br />
unha boa lectura<br />
• Un texto ancho dificulta a<br />
lectura ao non saber onde<br />
comeza e onde remata.<br />
• Un texto estreito obliga a<br />
voltar atrás moi a miúdo<br />
rompendo o ritmo da lectura<br />
85
PALETA DE CORES<br />
COR: A cor en Material Design está inspirada por matices atrevidos en<br />
contra posición con entornos apagados, sombras intensas, e toques de<br />
luz brillantes.<br />
Paleta de cores<br />
A paleta de cores que nos proporciona Material Design comprende<br />
cores primarias e acentuadas deseñadas para traballar en perfecto equilibrio.<br />
Poden ser usadas tanto como para a ilustración como para crear a<br />
icona de marca da app.<br />
86
ESTILOS<br />
ICONAS: Unha icona é unha imaxe que representa de maneira rápida<br />
e intuitiva unha acción, un estado ou unha aplicación.<br />
Cando se deseña unha iconas para unha aplicación, é importante<br />
pensar que dita aplicación pode ser instalada nunha ampla variedade de<br />
dispositivos cuns rangos de densidades de píxeles diferentes, isto ten<br />
fácil arranxo se se proporcionada un tamaño de icona para cada tamaño<br />
de pantalla.<br />
Lanzador (Launcher)<br />
A icona do launcher é a representación visual da túa aplicación na<br />
Pantalla de Inicio (Escritorio) ou na Pantalla caixa de aplicacións (Box de<br />
Aplicacións). É importante asegurarse de que a icona para o launcher é<br />
claramente visible en calquer tipo de fondo.<br />
Tamaños e escala<br />
As iconas do launcher nun<br />
dispositivo <strong>móbil</strong> deben ser de<br />
48×48 dp.<br />
As iconas para mostrar en Google<br />
Play deben ser de 512×512<br />
píxeles.<br />
Proporcións<br />
Todos os recursos, 48×48 dp.<br />
Estilo<br />
Usa siluetas diferentes. vistas<br />
frontais tridimensionales cunha<br />
suave perspectiva como se<br />
mostra arriba, así os usuarios<br />
perciben algo de profundidade.<br />
87
ICONAS<br />
Barra de Accións (Action Bar)<br />
As iconas da barra de accións son imaxes que representan as accións<br />
máis importantes. Estas deben representar un concepto simple que<br />
se poida comprender cunha rápida ollada.<br />
Os signos ou iconas predefinidos deberían ser usados para certas<br />
accións comúns como poden ser “actualizar” ou “compartir”.<br />
Tamaños e escala<br />
As iconas da barra de accións<br />
para os teléfonos debería ser de<br />
32×32 dp<br />
Área de actividade e proporcións<br />
Tódolos recursos, 32×32 dp<br />
Cadrado óptico, 24×24 dp<br />
Estilo<br />
Pictográfico, plano, non moi<br />
detallado, con suaves curvas e<br />
sombras ben definidas.<br />
Iconas pequenas e contextuais<br />
Dentro do corpo <strong>dunha</strong> aplicación, as iconas pequenas úsanse<br />
para as accións superficiais ou proporcionan estados para elementos<br />
específicos. Por exemplo, na aplicación Gmail, cada mensaxe ten unha<br />
icona en forma de estrela que marca a mensaxe como importante.<br />
88
ESTILOS<br />
Tamaños e escala<br />
As iconas pequenas deberían<br />
ter un tamaño de 32×32 dp<br />
Área de actividade e proporcións<br />
Tódolos recursos, 16×16 dp<br />
Cadrado óptico, 12×12 dp<br />
Estilo<br />
Neutral, plano e simple. Cheo<br />
de formas máis fáciles de distinguir<br />
que delgadas líñas.<br />
Iconas das Notificacións<br />
Se unha aplicación xera notificacións, debería proporcionar unha<br />
icona que o sistema poida mostrar na barra de estado en calquer momento<br />
en que haxa unha nova notificación dispoñible.<br />
Tamaños e escala<br />
As iconas de notificacións<br />
deben de ser 24×24 dp<br />
Área de actividade e proporcións<br />
Tódolos recursos, 24×24 dp<br />
Cadrado óptico, 22×22 dp<br />
Estilo<br />
Mantemento do estilo plano e<br />
visual que no launcher<br />
89
MATERIAL DESIGN<br />
ESTRUTURA DUNHA <strong>APP</strong>: A estrutura <strong>dunha</strong> aplicación ven<br />
determinada pola cantidade de contido e tarefas (superficiais) que un<br />
usuario vai facer, ademais do número de ventás que esta teña<br />
Ventá principal<br />
Esta é a primeira pantalla que as persoas verán despois de abrir<br />
unha app, así que debería ser unha experiencia gratificante tanto para<br />
novos usuarios como para os que xa a usan.<br />
- Presentación do contido: Centra o contido na pantalla inicial.<br />
Se deberán elixir disposicións que sexan visualmente atractivas<br />
e apropiadas para os tipo de función que desempeñe a app.<br />
- Barras de navegación e acción:<br />
Mostra accións importantes.<br />
• Mostrar a icona ou nome da<br />
túa aplicación.<br />
• Se consiste en múltiples vistas<br />
hai que facilitar a navegación<br />
engadindo pestanas,<br />
spinners ou un menú.<br />
• Inclúe a acción Buscar na<br />
barra de acciónsse é necesaria<br />
para a app.<br />
90
PAUTAS<br />
Controis da ventá principal<br />
A pantalla principal trata de introducir ao usuario a áreas de maior<br />
funcionalidade. En moitos casos, esta pantalla consistirá en múltiples vistas.<br />
É importante decidir o control que mellor se adapte ás necesidades<br />
ou servizos que ofreza a app:<br />
- Pestanas fixas: Este tipo de<br />
pestanas están sempre visibles<br />
na pantalla principal. Facilitan a<br />
exploración como cambiar entre<br />
elas. Usa estas pestanas se:<br />
• Os usuarios da app cambian de pantalla frecuentemente.<br />
• Tes un número limitado de tres pantallas de nivel superior.<br />
• Queres que o usuario teña claro as diferentes pantallas.<br />
- Spinners: Un spinner é un<br />
menú descendente que permite<br />
ao usuario cambiar entre as vistas<br />
<strong>dunha</strong> app. Usa spinner se:<br />
• Non queres perder o espazo<br />
vertical por culpa do espazo<br />
ocupado <strong>dunha</strong> pestana.<br />
• O usuario cambiará entre<br />
vistas do mesmo conxunto<br />
de datos.<br />
91
ESTRUTURA DUNHA <strong>APP</strong><br />
- Menú, caixón de navigación: normalmente<br />
contén un gran numero de elementos e accédese<br />
premendo o botón específico que fai que<br />
este menú apareza deslizándose dende a esquerda.<br />
Proporcionan o acceso a pantallas de<br />
niveis inferiores. Usa o menú de navegación se:<br />
• Non queres perder o espazo vertical<br />
por culpa do espazo ocupado por unha<br />
pestana.<br />
• Tes un gran número de vistas de nivel<br />
superior.<br />
• Queres proporcionar acceso directo a<br />
pantallas de nivel inferior.<br />
• Queres proporcionar unha rápida navegación<br />
cara a vistas as cales non teñen nada<br />
que ver directamente entre elas.<br />
• Tes ramas de navegación profundas.<br />
• Para separar os diferentes elementos do<br />
caixón de navigación faise uso das “listas”<br />
para separar os diferentes contidos.<br />
Categorías<br />
O propósito <strong>dunha</strong> aplicación, con certa profundidade de datos, é a<br />
navegación a través de categorías organizadas por niveis, onde os datos<br />
poden ser vistos e xestionados.<br />
Hai varias formas que se poden empregar para reducir a percepción<br />
<strong>dunha</strong> navegación pesada:<br />
92
PAUTAS<br />
- Uso de pestanas para combinar a selección de categoría<br />
e a visualización de datos: Isto pode ser útil se as categorías<br />
son familiares ou o número de categorías é pequeno. A navegación<br />
lateral entre categorías cunha certa cantidade de datos será<br />
máis rápida que nunha navegación explícita.<br />
• Usa pestanas desplazables se as categorías son familiares,<br />
predicibles ou teñen unha estreita relación.<br />
• Utiliza pestanas fixas se as categorías nas pestanas non<br />
están relacionadas tendo todas as categorías á vista<br />
- Permite acurtar o camiño a<br />
través das xerarquías: mostra<br />
as accións usando menús desplegables<br />
ou dividindo os elementos<br />
da lista.<br />
• Actuar sobre múltiples elementos.<br />
Analiza que accións<br />
poden aplicarse ao devandito<br />
conxunto de elementos.<br />
93
ESTRUTURA DUNHA <strong>APP</strong><br />
Resumo<br />
• Atopa a maneira de mostrar o contido útil na pantalla inicial.<br />
• Usa barras de acción para proporcionar unha navegación consistente.<br />
• Utiliza unha navegación horizontal e accesos directos sobre as<br />
xerarquías máis superficiais.<br />
• Usa a opción multi-selección para permitir ao usuario actuar<br />
sobre conxuntos de datos.<br />
• Permite unha rápida navegación entre os detalles dos elementos<br />
mediante as vistas deslizables ou desprazamento entre vistas.<br />
• Crear unha navegación eficiente entre as vistas detalle.<br />
94
PAUTAS<br />
ACTION BAR (BARRA DE ACCIÓNS): A action bar é un<br />
elemento que está na zona superior da pantalla e nos amosa o estado ou<br />
localización actual dentro da aplicación e, polo xeral, sempre está visible<br />
en todas as actividades da app.<br />
- Proporciona varias funcións:<br />
• Realiza accións <strong>dunha</strong> forma accesible e predicible.<br />
• Facilita unha navegación consistente ao cambiar de vistas dentro<br />
das apps.<br />
• Reduce o desorde proporcionando unha zona onde situar accións<br />
que raramente se usan.<br />
• Proporcionar un espazo de identidade propia ás apps.<br />
Organización xeral<br />
A action bar divídese en 4 áreas fundamentais na maioría das apps.<br />
1. Icona da App: A icona da app establece a identidade da app.<br />
Pode ser substituído cun logo diferente se se desexa.<br />
2. Control de vista: Para cando se amosa información en diferentes<br />
vistas.<br />
Se a app non ten diferentes vistas, este espazo pódese aproveitar<br />
para engadir contido non interactivo, como o nome da app ou<br />
calquera tipo de información.<br />
95
BARRA DE ACCIÓNS<br />
3. Botóns de acción: Mostra as accións máis importantes,<br />
como pode ser a acción de compartir, <strong>dunha</strong> app. Se hai varias<br />
e non caben estas moveranse ao menu overflow.<br />
4. Menú overflow de acción: Move a este menú as accións que<br />
adoitan utilizarse menos.<br />
Action Bar Contextual<br />
Unha Action Bar Contextual<br />
(CAB polas súas siglas en inglés,<br />
contextual action bar) é unha barra<br />
de acción temporal que se superpón<br />
sobre a Action Bar da app durante<br />
o tempo que está activa unha<br />
tarefa secundaria en particular. A<br />
CAB de selección aparece despois<br />
<strong>dunha</strong> presión prolongada sobre<br />
un elemento e, polo tanto, provoca<br />
o cambio ao modo de selección e se usa normalmente para as tarefas<br />
relacionadas coa selección de datos ou texto.<br />
Lista de Verificación para a Action Bar<br />
Á hora de crear a Action Bar e planear as súas división habería que<br />
plantexarse tres cuestións fundamentais:<br />
• Que importancia ten a navegación nas tarefas da túa app?<br />
• Cales das accións necesitan estar dispoñibles constantemente<br />
• Que é o suficientemente importante para garantir que se mostre<br />
continuamente?<br />
96
PAUTAS<br />
CONFIRMAR E RECOÑECER: Nalgunhas situacións, cando o<br />
usuario vai realizar unha acción nunha app, é unha boa idea que confirmen<br />
ou recoñezan esa acción a través de texto.<br />
Confirmar<br />
Pregunta ao usuario para que<br />
verifique que é consciente da acción<br />
que vai a realizar. Só nalgúns<br />
casos, a confirmación preséntase<br />
como unha información de advertencia<br />
ou crítica relacionada coa<br />
acción para que poida reconsiderar<br />
se continuar ou deter a mesma.<br />
Recoñecer<br />
Mostra un texto para confirmar<br />
ao usuario que a acción que<br />
reclamou se completou con éxito e<br />
eliminar así a incerteza de saber se<br />
o sistema realizou a operación ou<br />
non. Nalgúns casos, o recoñecemento<br />
preséntase xunto a unha opción<br />
que permite desfacer a acción.<br />
Confirmar e recoñecer pode previr aos usuarios dos erros ou accidentes<br />
que poidan ter e lamentar.<br />
97
98
Saber por onde comezar a deseñar unha app por primeira vez<br />
non é sinxelo, a cantidade de información que circula na rede<br />
pode ser de moita utilidade, pero tamén pode dar orixe a confusións.<br />
Isto acontece porque a rede é un lugar de encontro<br />
común, tanto como para principiantes como para expertos, é<br />
a información crúzase.<br />
A mellor maneira de comezar, como xa se comentou no capítulo<br />
de desenvolvemento de apps, é cunha serie de bocetos.<br />
E cómo dar forma a eses bocetos? Antes de deseñar, se o fas<br />
para Android, debes saber que este segue certos parámetros<br />
que suxire na súa guía de creación Material Design.<br />
Android ofrécenos ahí todos os recursos necesarios para comezar<br />
a nosa app, dende patróns de medida, ata iconas ou<br />
paletas de cores, ademais de indicarnos como e onde debemos<br />
situar cada pantalla ou ventá da app e que comportamento,<br />
ou comportamentos, pode aceptar esta.<br />
99
MATERIAL DESIGN<br />
UNIDADES DE MEDIDA: No momento de desenvolver unha<br />
aplicación para Android atopámonos co problema da gran cantidade de<br />
dispositivos dispoñibles no mercado, cada un cun tamaño de pantalla<br />
diferente.<br />
Para solucionar este problema coas aplicacións, o sistema Android<br />
proporciona varias unidades de medida que nos axudarán a que a nosa<br />
aplicación se vexa correctamente sexa cal for o tamaño da pantalla. Para<br />
deseñar interfaces <strong>dunha</strong> app é obrigatorio entender e dominar cada un<br />
destes termos:<br />
Inch: Son polgadas. É unha medida física baseada no tamaño<br />
físico <strong>dunha</strong> pantalla e equivalen a 2.54 cm.<br />
Dots per Inch (DPI): Simboliza o número de píxeles existentes<br />
nunha área equivalente a unha polgada.<br />
Resolución de Pantalla: A resolución <strong>dunha</strong> pantalla indícanos<br />
o número de píxeles tanto horizontais como verticais.<br />
*Unha pantalla sempre pode diminuír a súa resolución emulando que posúe menos píxeles<br />
dos que en realidade ten. Para iso, simplemente ten que agrupalos entre si. Unha pantalla,<br />
nunca pode alcanzar unha resolución que exceda o límite imposto polos píxeles físicos.<br />
Píxel (px): Un píxel é un concepto. Fai referencia á unidade<br />
mínima que pode ser renderizada nunha pantalla.<br />
dpi-Densidad Píxeles independientes: unidade abstracta<br />
que se basea na densidade física da pantalla. Android ofrécenos<br />
a posibilidade de enfrontarnos a unha área virtual cunha densidade<br />
de 160 dpi na cal 1 dp equivale a 1 pixel, máis ou menos.<br />
100
DESEÑO<br />
Para definir os nosos layouts deberíamos de traballar usando<br />
soamente os dps, os cales o sistema xa se encargará de traducilos<br />
a píxeles físicos a través deste sinxelo cálculo:<br />
px = dp * (dpi/160)<br />
*Exemplo: Supoñamos que se quere debuxar unha liña de 3 dps na pantalla virtual, e<br />
a pantalla, casualidade, é de 160 dpi. Entón eses 3 dps tradúcense en 3 píxeles. Agora<br />
supoñamos que poseemos un <strong>móbil</strong> cunha densidade de píxeles de 445. Eses mesmos 3<br />
dps transfórmanse en 8 píxeles físicos para esa pantalla.<br />
sp_Scale independent pixels: É unha medida usada unicamente<br />
para definir o tamaño das fontes. É moi parecida aos dpi,<br />
xa que o tamaño se axusta dependendo dos dpis da pantalla.<br />
A proporción, segundo a clasificación feita anteriormente, para<br />
axustar as imaxes ás diferentes densidades de pantalla dos dispositivos,<br />
segue unha relación de escala de 3:4:6:8. É dicir:<br />
• ldpi (low) ~120dpi<br />
• mdpi (medium) ~160dpi<br />
• hdpi (high) ~240dpi<br />
• xhdpi (extra-high) ~320dpi<br />
• xxhdpi (extra-extra-high) ~480dpi<br />
• xxxhdpi (extra-extra-extra-high) ~640dp<br />
Desta forma, á hora de deseñar para Android sempre deberemos<br />
utilizar dp cando definamos as dimensións, as posicións na UI ou tamaños<br />
de textos para asegurarnos que o noso deseño se verá correctamente<br />
en todas as pantallas.<br />
Existe tamén mm e in, que son medidas relacionadas coa forma<br />
real da pantalla co que tampouco son a medida ideal para un deseño<br />
multiscreen.<br />
101
MATERIAL DESIGN<br />
CONSELLOS E TRUCOS: Saber como, ou por onde, comezar<br />
á hora de deseñar unha app pode resultar lioso, poida incluso que<br />
confundas os termos deseñar con programar posto que a maior parte da<br />
información enlaza estesdous termos.<br />
Non fai falla saber programar para deseñar unha app, o que si hai<br />
que saber é que hai que seguir certos criterios que nos serán de axuda á<br />
hora de realizar o noso deseño.<br />
Photoshop ou Illustrator? O recomendable é deseñar con<br />
Photoshop. O motivo principal é que traballamos para ver as<br />
cousas en pantallas e estas réxense por píxeles, co que en<br />
Photoshop poderemos ver con exactitude cal será o resultado<br />
final dun deseño, mentras que en Illustrator todo é vectorial e<br />
non existen os píxeles.<br />
Ademáis, agora pódese traballar con vectores no Photoshop, o<br />
que quere dicir que da igual ao tamaño no que se faga o deseño<br />
da app, xa que sempre o poderemos escalar sen perder<br />
resolución.<br />
En que tamaño? Para comezar a deseñar a app traballaremos<br />
sempre nunha resolución/densidade que resulte cómoda e teña<br />
unha boa percepción das proporcións dos elementos denominada<br />
“BASELINE”. Para Android: 160 mdpi – Pantalla: 320×480 px<br />
Redimensionar: se Android poseé dispositivos con pantallas<br />
máis grandes... o lóxico non sería comezar por elas para logo<br />
reducir sen problema? A forma de converter da igual xa que traballaremos<br />
coa opción vectorizar do Photoshop. Traballando en<br />
320x480 podemos ver un deseño moi aproximado a como se<br />
vería nun <strong>móbil</strong>.<br />
102
DESEÑO<br />
BOTÓNS: Os botóns comunican a acción que ocorrerá cando o<br />
usuario toque estes. Componse de texto, unha imaxe ou ambos, ademais<br />
de cor.<br />
Tipos de botóns: existen tres tipos de botóns stándar:<br />
Flotante<br />
Botón circular que se levanta e<br />
mostra unha sombra ao pulsar<br />
Alzado, elevado<br />
Botón máis común, rectangular<br />
que se levanta e, que ao ser<br />
pulsado, amosa sombra.<br />
Plano<br />
Botón composto de texto, produce<br />
reacción ao pulsalo pero non<br />
se levanta.<br />
103
BOTÓNS<br />
Uso dos botóns<br />
- Botón plano: Recoméndase usar este<br />
tipo de botón nos seguintes casos:<br />
• Nas barras de ferramentas, Toolbars.<br />
• Nos cadros de diálogo.<br />
- Botón elevado: Os botóns elevados engaden<br />
dimensión aos deseños planos.<br />
Destacan funcións e compórtanse como un<br />
sector en repouso enriba do layout.<br />
104
DESEÑO<br />
Composición<br />
- Botón desplegable: Serve<br />
para seleccionar entre múltiples<br />
accións. Pode aparecer<br />
como unha lista en cadea.<br />
Cando un usuario preme o botón<br />
fai aparecer as diferentes<br />
accións. Cando escolle unha,<br />
desestima o menú e aparece o<br />
novo estado escollido.<br />
- Marxen arredor: 24dp<br />
- Altura botón: 36dp<br />
- Ancho botóns: 80dp<br />
64dp<br />
- Separación mínima: 8dp<br />
- Marxen táctil: 48dp<br />
- Altura botón: 36dp<br />
- Altura botón: 36dp<br />
- Marxes: 15dp<br />
16dp<br />
- Tamaño fonte: 14sp<br />
105
CARDS (TARXETAS)<br />
CARDS: Ou tarxetas, son o elemento<br />
apropiado para a visualización de<br />
contido cando se compón de diferentes<br />
enlaces. Tamén son eficaces para elementos<br />
cuxo tamaño, ou accións permitidas,<br />
é variable así como a visualización<br />
de comentarios.<br />
Facilitan o contexto e un punto<br />
de acceso a información máis sólida.<br />
Uso das cards<br />
• Como colección: varios tipos de datos (tales como imaxes, películas<br />
ou texto).<br />
• Contidos de lonxitude variable (comentarios).<br />
• Como lista: cando precisa visualizar contido que complemente á<br />
imaxe.<br />
• Non sobrecargar as tarxetas con información ou accións extrañas.<br />
• Colocar o contido principal na parte superior da tarxeta.<br />
106
DESEÑO<br />
• As imaxes poden reforzar contidos nunha tarxeta.<br />
*Tamaño e ubicación dentro da tarxeta depende de se a imaxe é o contido principal ou<br />
está sendo utilizada como complemento a outros contidos<br />
• Texto lexible: colocado en fondos de imaxes debe preservar a lexibilidade<br />
(contraste).<br />
• Teñen unha anchura constante e unha altura variable.<br />
• Non se lle pode dar o valor de “voltear” cando salta á información<br />
que contén.<br />
Composición<br />
As tarxetas poden ser construídas por<br />
bloques de contido que inclúan:<br />
• Titular (opcional)<br />
• Título primario<br />
• Texto adicional<br />
• Botóns, accións<br />
- Marxe superior do título primario: 24dp<br />
- Marxe inferior do título primario: 16dp<br />
- Marxe arredor dos botóns: 8dp<br />
- Marxe superior do cadro de texto: 16dp<br />
- Marxe inferior do cadro de texto: 24dp<br />
Elevación<br />
- En repouso: 2dp<br />
- En contacto: 8dp<br />
As tarxetas teñen unha altura predeterminada<br />
de 2dp<br />
107
CADROS DE DIÁLOGO<br />
CADROS DE DIÁLOGO: Conteñen texto e controis da interfaz<br />
do usuario que se centran nunha tarefa específica. Mantén informado ao<br />
usuario sobre todo o que ocorre como alertas, mensaxes, información<br />
crítica, decisións que requiren a implicación do usuario ou a escolla de<br />
múltiples tarefas.<br />
Os “diálogos” son un subtipo de ventana modal que se deben usar<br />
con moderación, xa que son ventanas de interrupción que deteñen unha<br />
tarefa actual. Deben aparecer sempre ben enfocados e claros.<br />
Uso dos diálogos:<br />
- Alertas: As alertas son interrupcións urxentes que informan ao<br />
usuario <strong>dunha</strong> situación<br />
• Alertas sen título: resume unha decisión<br />
nunha ou dúas frases:<br />
- Facer unha pregunta (exemplo “Eliminar<br />
a conversación?”)<br />
- Anunciar unha acción relacionada cos<br />
botóns de acción.<br />
• Avisos con título: reserva o seu uso<br />
so para situacións de alto risco.<br />
- Emprega preguntas claras ou declaracións<br />
con explicacións na área de contido.<br />
- Evita a ambigüidade na mensaxe<br />
ou preguntas tales como “Atención!“ ou<br />
“Seguro?“<br />
108
DESEÑO<br />
- Diálogos sinxelos: Proporcionan<br />
detalles adicionais ou accións sobre<br />
un elemento <strong>dunha</strong> lista. Funciona de<br />
xeito que:<br />
• Non poseen de maneira explícita botóns<br />
para aceptar ou cancelar unha<br />
operación<br />
• Os diálogos simples aparecen sempre<br />
centrados vertical e horizontalmente na<br />
pantalla.<br />
• Evitar o texto axustado<br />
- Diálogos en pantalla completa: Agrupan<br />
unha serie de tarefas. A selección ocorre cando se<br />
lle da a opción gardar.<br />
• Permiten deseños complexos como menús ou<br />
cadros de diálogo sinxelos como parte <strong>dunha</strong><br />
operación complexa.<br />
• Recoméndase o seu uso para compoñentes<br />
(campos de formulario) que requieren un método<br />
de entrada tales como un teclado.<br />
• “Confirmar” está desactivado ata que se cumpran<br />
todos os campos obrigatorios no cadro de<br />
diálogo.<br />
• Descarte (a “X” na parte superior esq da pantalla)<br />
e o botón Atrás pechan o cadro de diálogo<br />
da pantalla completa e descartar os cambios.<br />
• Se non se fixeron cambios, o diálogo péchase<br />
directamente.<br />
• Os títulos deben ser curtos. Se o títulos e de<br />
lonxitude variable o texto debe ir colocado na<br />
área de contido do diálogo.<br />
109
DIÁLOGOS<br />
Composición:<br />
• Título opcional: describe brevemente o<br />
tipo de acción que se fixo.<br />
• Contido: elementos de texto ou de control<br />
da interfaz do usuario.<br />
• Accións afirmativas: colocadas no lado<br />
dereito continúan o proceso.<br />
• Accións de rexeitamento: situadas á esquerda<br />
das afirmativas. Voltan á pantalla<br />
de orixe.<br />
- Marxe arredor da área de contido: 24dp<br />
- Marxe entre o título e o contido: 20dp<br />
- Marxe arredor da acción dos botóns: 8dp<br />
- Altura botón: 36dp<br />
- Altura da acción: 52dp<br />
- Marxe entre a acción e o diálogo: 24dp<br />
- Marxe arredor do título: 24dp<br />
- Marxe arredor da acción dos botóns: 8dp<br />
- Altura botón: 36dp<br />
- Altura da acción: 52dp<br />
110
DESEÑO<br />
DIVISORES: Grupos divididos e contido separado mediante listas<br />
e layouts. O divisor represéntase como una línea delgada, lixeira visualmente<br />
pero que distingue perfectamente o contido espacial.<br />
Os divisores axudan aos usuarios a entender como o contido se<br />
organiza nunha páxina mediante o establecemento de ritmo e xerarquía.<br />
Cando alguna lista non posúe ningún elemento anclado, como<br />
pode ser unha icona ou avatar, extender o contido ata o borde axuda a<br />
crear ritmo e a separar seccións.<br />
A línea divisoria será de 1dp de espesor e cunha opacidade do<br />
12%, sexa en branco ou negro.<br />
Tipos de divisores:<br />
Ata os bordes<br />
Os divisores separan o contido<br />
das distintas seccións ata os<br />
bordes<br />
Fixado<br />
Separan os contenidos relacionados.<br />
Deberían ser usados<br />
en conxunción con elementos<br />
como iconas o avatares.<br />
Subtítulo<br />
Os subtítulos son empregados<br />
como divisores colocando a<br />
línea por riba deste reforzando<br />
así a súa relación co contido.<br />
111
LISTAS<br />
LISTAS: As listas presentan elementos<br />
de maneira vertical como un elemento<br />
contínuo e único.<br />
Unha lista consta <strong>dunha</strong> soa columna<br />
de seccións igual de anchas, chamada<br />
fila, que será a que conteña as diferentes<br />
seccións. Poden variar de altura.<br />
As listas presentan datos ou grupos<br />
de datos de xeito homoxéneo.<br />
*Se existen máis de tres líneas de texto é mellor presentar a sección como unha “card”<br />
As listas so se poden desplazar de xeito vertical, scrolling pero<br />
tamén poden ser movidas a unha lista específica. Estas sempre<br />
aparecerán en orde: tamaño de arquivo, orden alfabética ou por outros<br />
parámetros.<br />
Contenido:<br />
As listas utilizan a xerarquía<br />
para priorizar un conxunto<br />
de contidos para axudar<br />
aos usuarios a atopar a información<br />
importante. Pode<br />
conter ata tres líneas de texto<br />
O contido máis distintivo<br />
debe ir á esquerda, e o contido<br />
mínimo á dereita. As accións complementarias<br />
situaranse no lado<br />
dereito.<br />
112
DESEÑO<br />
Composición:<br />
- Listas <strong>dunha</strong> línea: Contén unha línea de texto.<br />
• Lista <strong>dunha</strong> soa línea:<br />
- Fonte : Roboto 16sp regular<br />
- Altura sección: 48dp<br />
- Marxe nos bordes: 16dp<br />
- Marxe superior: 8dp<br />
• Lista <strong>dunha</strong> soa línea con<br />
iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 48dp<br />
- Marxe esquerdo icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista <strong>dunha</strong> soa línea con<br />
avatares:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 56dp<br />
- Marxe esquerdo avatar: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista <strong>dunha</strong> soa línea con<br />
avatares e iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 56dp<br />
- Marxe esquerdo avatar: 16dp<br />
- marxe dereito da icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
- Marxe superior : 8dp<br />
113
LISTAS<br />
- Listas de dúas líneas:<br />
• Lista de dúas líneas:<br />
- Fonte : Roboto 16sp regular<br />
- Altura sección: 72dp<br />
- Marxe nos bordes: 16dp<br />
- Marxe superior: 8dp<br />
• Lista de dúas líneas con<br />
iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 72dp<br />
- Marxe esquerdo icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista de dúas líneas con<br />
avatares:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 72dp<br />
- Marxe esquerdo avatar: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista de dúas líneas con<br />
avatares e iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 72dp<br />
- Marxe esquerdo avatar: 16dp<br />
- marxe dereito da icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
- Marxe dereito do texto: 16dp<br />
- Marxe superior : 8dp<br />
114
DESEÑO<br />
- Listas de tres líneas:<br />
• Lista de tres líneas:<br />
- Fonte : Roboto 16sp regular<br />
- Altura sección: 88dp<br />
- Marxe nos bordes: 16dp<br />
- Marxe superior: 8dp<br />
• Lista de tres líneas con iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 88dp<br />
- Marxe esquerdo icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista de tres líneas con<br />
avatares:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 88dp<br />
- Marxe esquerdo avatar: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
• Lista de tres líneas con<br />
avatares e iconas:<br />
- Fonte: Roboto 16sp regular<br />
- Altura sección: 88dp<br />
- Marxe esquerdo avatar: 16dp<br />
- marxe dereito da icona: 16dp<br />
- Marxe esquerdo do texto: 72dp<br />
- Marxe dereito do texto: 16dp<br />
- Marxe superior : 8dp<br />
115
LISTAS<br />
Exemplo de lista<br />
<strong>dunha</strong> soa línea<br />
Exemplo de lista<br />
de dúas líneas<br />
Exemplo de lista<br />
de tres líneas<br />
Exemplo de lista<br />
<strong>dunha</strong> soa línea<br />
con iconas<br />
Exemplo de lista<br />
de dúas líneas<br />
con iconas<br />
Exemplo de lista<br />
de tres líneas<br />
con iconas<br />
116
DESEÑO<br />
CONTROIS DAS LISTAS: Os controis das listas son as iconas<br />
ou avatares que aparecen á esquerda ou dereita do texto na lista. Indican<br />
estados, información ou serven como acción.<br />
Tipos de controis<br />
• Casilleiro de verificación<br />
Unha casilla de verificación pode ser de carácter<br />
primario ou secundario.<br />
- Acción primaria / Estado: casillas de verificación<br />
- Acción secundaria: controla un familia de<br />
variables.<br />
• Interruptor<br />
Categoría: acción secundaria<br />
Activa ou desactiva accións ou propiedades.<br />
• Expansión/contracción:<br />
Categoría: acción secundaria<br />
Expande y se contrae verticalmente una vista<br />
de lista para mostrar y ocultar los detalles de los<br />
elementos de lista existentes .<br />
117
MENÚS<br />
MENÚS: Permiten aos usuarios seleccionar unha acción <strong>dunha</strong> lista<br />
temporal que se abre nunha nova capa. Debe conter dous elementos<br />
como mínimo, estes elementos son as accións, ou opcións, que afectan á<br />
selección escollida.<br />
Tamén existen menús de elemento único como a selección copiar/<br />
pegar/cortar nun texto.<br />
Elementos do menú<br />
• Cada elemento se limita a<br />
unha soa línea de texto que<br />
describe a acción.<br />
• O texto é, polo xeral, unha<br />
soa palabra ou frase curta<br />
que pode incluir iconas.<br />
• Menús de contido estático deben<br />
ter os elementos de uso<br />
más frecuente situados na<br />
parte superior do menú.<br />
• Posicionar el menú debajo del<br />
elemento emisor de la separa<br />
de su contexto.<br />
Menú sinxelo<br />
Cando se abre un menú este se desprega de forma vertical por riba<br />
do elemento que o garda amosando todas as opcións que contén. Nunca<br />
se pode colocar a primeira acción do menú enriba do elemento da lista xa<br />
que pode orixinar confusión.<br />
A escolla <strong>dunha</strong> opción do menú, ademáis de aparecre resaltada,<br />
pecha o propio menú.<br />
118
DESEÑO<br />
A altura máxima dun menú debe ser a da propia pantalla, se o contido<br />
e maior as opcións serán visibles facendo que o menú sexa desplazable<br />
(scroll). Este tampouco debe ocupar toda a pantalla senón que ten<br />
que deixar un espazo onde poder tocar para desestimar o menú. Tamén<br />
se cancela co botón “Volver”.<br />
Si: o menú aparece enriba do elemento iniciador<br />
Non: poñer o menú embaixo do elemento iniciador<br />
Si: poñer o menú enriba do elemento iniciador<br />
Non: mostres a selección duplicada no menú<br />
119
CONTROIS DE SELECCIÓN<br />
CONTROIS DE SELECCIÓN: Son mandos que permiten<br />
ao usuario seleccionar, aceptar e confirmar opcións.<br />
Tipos de controis:<br />
Checkbox<br />
As casillas de verificacións<br />
permiten ao usuario seleccionar<br />
múltiples opcións dun conxunto.<br />
Para unha única opción é mellor<br />
usar un interruptor do tipo on/off<br />
Botón circular<br />
Permiten ao usuario seleccionar<br />
unha opción de un conxunto,<br />
para seleccións exlusivas cando<br />
hai outras disponibles ao lado.<br />
Interruptor<br />
Interruptores on/off serven para<br />
alternar o estado <strong>dunha</strong> soa<br />
opción de configuración.<br />
O estado no que se atopa estará<br />
indicado claramente na línea.<br />
120
DESEÑO<br />
SUBTÍTULOS: Os subtítulos delimitan as diferentes seccións<br />
nunha lista ou cuadrícula, polo tanto clasifican e filtran. Poden ir situados<br />
en línea nunha sección ou nunha column adxacente asociado ao contido.<br />
- Subtítulos en lista: se unha lista é longa e contén información<br />
complexa unha boa maneira de delimitar os diferentes subtítulos sería co<br />
uso de diferentes cores.<br />
Os subtítulos deben ir alineados á esquerda cando so hai texto,<br />
icona ou avatares.<br />
Se hai un botón de acción flotante alineado á esquerda xunto coa<br />
avatar ou icona o subtítulo se alineará xunto co contido do texto.<br />
• Simple<br />
- Fonte: Roboto medium 14sp<br />
- Altura sección subtítulo: 48dp<br />
- Marxe esquerdo avatar: 16dp<br />
• Botón flotante<br />
- Fonte: Roboto medium 14sp<br />
- Altura sección subtítulo: 48dp<br />
- Marxe esquerdo avatar: 72dp<br />
121
PESTANAS<br />
PESTANAS: As pestanas facilitan<br />
a búsqueda por entre os diferentes<br />
conxuntos categorizados así como a<br />
conversión entre os diferentes aspectos<br />
funcionais <strong>dunha</strong> app.<br />
As pestanas son de grande utilidade<br />
para empaquetar contido de alto<br />
nivel como, por exemplo, presentar<br />
diferentes seccións dun xornal. Preséntanse<br />
como fichas que describen brevemente a categoría asociada ao<br />
contido.<br />
Estas van situadas nunha fila única, por iso se debe empregar un<br />
número limitado de fichas e so usar o xesto de desplazar canda haxa un<br />
número variable de pestanas. Unha ficha non pode conter no seu interior<br />
outras fichas ou pestanas.<br />
Contenido<br />
Si: se o texto é longo ceñir en dúas líneas<br />
O contido que presentan as<br />
pestanas pode variar ampliamente.<br />
De todos os xeitos o contido dentro<br />
de cada unha das fichas debe estar<br />
relacionado por un principio de<br />
organización máis grande<br />
As etiquetas das fichas<br />
deben proporcionar información<br />
significativa do contido asociado.<br />
Non: misturar texto con iconas As etiquetas poden ser tanto todo<br />
iconas como todo texto, pero nunca<br />
misturalos. No caso de que a selección sexa texto este deberá ter un<br />
título curto.<br />
122
DESEÑO<br />
Tipos de pestanas:<br />
- Pestañas fixas: amosan todas as pestanas ao mesmo tempo<br />
co que facilita un tránsito para a escolla. As diferentes fichas que formen<br />
parte da pestana non afectan no ancho desta.<br />
Para navegar entre as pestanas fixas, basta con premer nas fichas.<br />
- Pestanas desplazables: lengüetas desplazables mostrar un<br />
subconjunto de las pestañas en un momento dado. Pueden contener más<br />
etiquetas de las solapas y un mayor número de fichas que las lengüetas<br />
fijas. fichas de desplazamiento son los más utilizados para la navegación<br />
contextos en los interfaces táctiles cuando los usuarios no necesitan para<br />
comparar directamente las etiquetas de las solapas.<br />
Para navegar entre las pestañas de desplazamiento, toque la ficha<br />
o pase el área de contenido hacia la izquierda o la derecha. Para desplazarse<br />
por las fichas sin tener que navegar, deslizar las pestañas a la<br />
izquierda o la derecha.<br />
Composición<br />
A anchura das pestanas pódese calcular collendo a anchura de<br />
vista e dividíndoo polo número de pestanas. Outra xeito de dar tamaño<br />
ás pestanas sería collendo como referencia a maior delas e facelas todas<br />
dese mesmo tamaño.<br />
- Max ancho: 264dp<br />
- Min ancho: 160dp pantalla grande<br />
- Altura: 48dp<br />
Botón:<br />
72 dp pantalla pequena<br />
- 12dp dereita e esquerda do texto<br />
- 20dp dende a base, unha linea texto<br />
12dp dende a base, dúas líneas texto<br />
Indicador:<br />
- 2dp altura<br />
123
PESTANAS<br />
- Altura total: 72dp<br />
- Icona: 24x24dp<br />
Alineación: texto máis icona centrados<br />
horizontal mente dentro da ficha<br />
Botón:<br />
- 10dp separación entre icona e texto<br />
- 16dp separación texto borde ficha<br />
- Altura total: 48dp<br />
- Icona: 24x24dp<br />
Alineación: a icona irá centra vertical e<br />
horizontalmente na ficha<br />
A anchura das fichas calcúlase de maneira<br />
independente.<br />
- Max ancho: 264dp<br />
- Min ancho: 160dp pantalla grande<br />
-Altura: 48dp<br />
Botón:<br />
72dp pantalla pequena<br />
- 12dp do texto de esquerda a dereita<br />
- 20dp dende a base, unha linea de texto<br />
- 12dp dende a base, dúas líneas de texto<br />
124
E ata aquí por hoxe, a esta guía tocoulle o seu final.<br />
É probable que o final sexa abrupto e penses que falta<br />
moita máis información e que incluso estaría ben<br />
saber de programación, pero este pequeno manual<br />
realizado por unha entusiasta da tecnoloxía (afición<br />
recén descuberta) so se centra, reune, un coñecemento<br />
primario, o esencial.<br />
Se o interese polo mundo app é grande a rede é un<br />
lugar perfecto onde compartir opinións, pedir consello,<br />
mirar trucos e manterse informado. Ademáis, de<br />
aproveitar todos os recursos que se nos ofrecen.<br />
Recomendo unha ollada a Material Design, pois este,<br />
ademáis de conter moita máis información, bríndanos<br />
videos de exemplos ademáis de ter todo unha<br />
sección adicada a programacións.<br />
Mentras elaboraba o traballo e, á vez, o meu interese<br />
polas apps e a súa programación ía medrando, practiquei<br />
con AIDE aplicación que che ensina a programar<br />
apps en SO Android. Recomendo, ainda que so<br />
sexa, realizar a tres primeiras prácticas.<br />
Saúde!<br />
125
126
127
128