Destaques
11 WSJ diz que Apple pode estar considerando porta USB 3.0 no “iPad Pro”; MacBook Air de 12″ deverá ser lançado no segundo trimestre WSJ diz que Apple pode estar considerando porta USB 3.0 no “iPad Pro”; MacBook Air de 12″ deverá ser lançado no segundo trimestre

Em uma nova matéria fechada para assinantes publicada hoje, o Wall Street Journal concordou com o que a Bloomberg disse ontem: a produção do iPad de 12,9 polegadas deverá começar apenas no segundo semestre. Porém o WSJ trouxe mais: segundo fontes do veículo, a Apple estaria considerando adicionar uma ou mais portas USB 3.0 a […]

14 ↪ Apple começa a decorar fachada do Yerba Buena Center para o evento da semana que vem [atualizado: quase pronto] ↪ Apple começa a decorar fachada do Yerba Buena Center para o evento da semana que vem [atualizado: quase pronto]

Mantendo a sua tradição, a Apple já está decorando a fachada do Yerba Buena Center for the Arts para o evento especial que ocorrerá na próxima segunda-feira, 9 de março. O visual, claro, corresponde ao do convite enviado para a imprensa na semana passada. Vale lembrar que, ali do lado, ela também construiu uma área […]

44 Rumores: próximo iPhone terá 2GB de RAM; novos MacBooks Air serão lançados na semana que vem Rumores: próximo iPhone terá 2GB de RAM; novos MacBooks Air serão lançados na semana que vem

Rumores, rumores, rumores… o que seria do mundo Apple sem eles, não é mesmo? Pois um que vira e mexe dá as caras tem a ver com a RAM de iGadgets. iPhone 6 Plus desmontado pela iFixit. Enquanto os iPhones permanecem com “apenas” 1GB de RAM, o iPad Air 2 já conta com 2GB. A […]

7 Apple promete correção para falha de segurança “FREAK”, a qual afeta o protocolo HTTPS Apple promete correção para falha de segurança “FREAK”, a qual afeta o protocolo HTTPS

Um novo dia, uma nova falha de segurança. Desta vez trata-se de uma relacionada ao protocolo HTTPS (um bug no OpenSSL), afetando neste momento tanto os sistemas operacionais da Apple quanto do Google. Ou seja, usuários de OS X, iOS e Android estão sob risco. Chamada de “FREAK” (Factoring attack on RSA-EXPORT Keys, CVE-2015-0204), a […]

15 ↪ Antes mesmo de chegar ao mercado, Apple Watch ganha importante prêmio de design ↪ Antes mesmo de chegar ao mercado, Apple Watch ganha importante prêmio de design

A ideia de combinar materiais clássicos como couro e metal com tecnologia de ponta para criar um acessório fashion bastante único resultou em um produto encantador, oferecendo uma experiência de usuário holística. O Apple Watch pontua alto por cada detalhe de design e é, no geral, uma peça extraordinária. Para nós, ele já é um […]

Home » Design, Dicas

Design de interface para iOS: atenção aos detalhes

em 24 de janeiro de 2012 às 16:22 | 38 comentários por

Faz (muito) tempo que não dou continuidade para essa série de dicas por aqui, então já é hora de voltar a falar de design! :-)

É bem comum que alguns desenvolvedores trabalhem sozinhos na criação de apps, ou mesmo que o designer envolvido no projeto não tenha experiência com plataformas interativas. Então, neste post, falarei de detalhes que acabam escapando (tanto em pequenos quanto em grandes aplicativos), mas que podem adicionar muito à percepção final do usuário.

Não adianta achar pura frescura, hein! Todo o iOS é baseado nesses detalhes que melhoram a experiência de uso — desde aquela rolagem suave que nenhum outro sistema consegue reproduzir, até as transições trabalhadas que evitam cortes secos de uma tela pra outra. Acredite: a grande maioria dos usuários nem percebe isso acontecendo, mas, como citei acima, influencia bastante na percepção do aplicativo como um todo.

Botões pressionados

A tecnologia sensível ao toque é relativamente nova, e estamos acostumados com botões de verdade, em que você aperta e eles respondem segundo as leis da Física. Simular isso na interface é importante para que o usuário saiba que seu toque funcionou e tenha essa “resposta” imediata de sua interação.

O exemplo abaixo é do Camera+, app de excelente qualidade, mas não precisa nem fazer muita coisa para chegar nesse resultado: basta criar outra imagem com alguma diferença de luz, sombra, contorno, cor, etc.

Espaçamento dos botões

Quem está acostumado com web precisa diferenciar o clique do mouse com o “clique” do toque: o cursor chega a qualquer iconezinho, mas com touchscreen a coisa é um tanto diferente.

Por isso, quando for posicionar os botões na tela, lembre-se de que nem todos têm um dedo igual o seu; e, por mais esquisito que isso tenha soado, é verdade. O conselho aqui é deixar os botões com um bom espaço, principalmente se houver outros botões ao lado, para evitar que o usuário toque no lugar errado — coisa que irrita demais.

Transições

Experimente editar um vídeo no iMovie, recortar os pedações que lhe interessam e não adicionar transição alguma. Os chamados cortes secos de uma cena para outra ficam bem esquisitos, e é só adicionar um “Cross Dissolve” (ou “Cross Fade” em outros programas) para tirar um pouco do amadorismo da edição. Mesma coisa com o iOS!

Se o botão tem uma seta para a direita, por exemplo, fica legal a próxima cena vir da direita.

Em outro exemplo, o botão de menu do Facebook, à esquerda.

No caso do Domino Box, com todo o tema de caixinha de dominó, nós — Renato Pessanha e eu — optamos por uma transição 3D de cubo para adequar ao jogo. Jabá do nosso game? Sim! :-D

Sombra em textos

Se tem um texto na tela, é porque ele precisa ser lido. Para isso, o contraste com o fundo é essencial! Facilitando essa tarefa de leitura e também adicionando um efeito mais atrativo, o recomendado é usar as sombras no próprio texto.

As guias são suas amigas

A ideia das guias (ou grid) é balancear/equilibrar os elementos na tela, e o próprio Interface Builder do iOS já facilita posicionar os elementos da interface numa guia; porém, quando o design ainda está na etapa do Photoshop, é essencial pensar nisso.

Não é regra, principalmente para interfaces mais estilizadas, como as de games e tal. Mas em casos que seguem um padrão de botões, listas e conteúdos mais diagramados (se é que esse é o melhor jeito de descrever) é recomendado alinhar os elementos entre si.

·   ·   ·

Muitos podem até achar essas dicas n00bs demais, mas acredito que tem muita gente atrás desses detalhes básicos pra aprimorar os projetos e ficar de olho nesses pontos para apps futuros.

Se essa série de posts lhe interessa, deixe sugestões de próximos assuntos! A designer aqui agradece… ;-)

Se houver algum erro neste post, selecione-o e pressione Shift + Enter ou clique aqui para nos notificar.

Artigos Relacionados Quem Escreve?
Larissa Herbst
Larissa Herbst
Designer de interfaces, paulista de 25 anos, fã de séries de TV, heavy-user de tecnologia e nerd nas horas vagas.
Comentários

Aviso: nossos editores/colunistas estão expressando suas opiniões sobre o tema proposto e esperamos que as conversas nos comentários sejam respeitosas e construtivas. O espaço acima é destinado a discussões, debates sobre o tema e críticas de ideias, não às pessoas por trás delas. Ataques pessoais não serão tolerados de maneira nenhuma e nos damos ao direito de ocultar/excluir qualquer comentário ofensivo, difamatório, preconceituoso, calunioso ou de alguma forma prejudicial a terceiros, assim como textos de caráter promocional e comentários anônimos (sem nome completo e/ou email válido). Em caso de insistência, o usuário poderá ser banido.

Últimos Posts do Fórum

Duvida: Fusion Drive ou SSD?
Último post de: Ricardo Albiero

Mancha Tela macbook pro retina
Último post de: Gabriel Machado

Trocar a tela do iPhone 6 Plus
Último post de: jcomorbeck

Troca HD por SSD
Último post de: Alan Leitão

MacBook não inicia, problemas no Boot
Último post de: Luiz Moraes

MacMagazine em Redes Sociais
follow us in feedly MacMagazine no Ar

iTunes Assine na iTunes Store

Enquete: participe!

Você já comprou alguma coisa na Loja MacMagazine?

MacMagazine por Email

Preencha o seu email no campo abaixo para receber todas as nossas novidades gratuita e diretamente na sua Caixa de Entrada! ;-)

Shuffle!

Shuffle - Post Aleatório

· · ·

2002-2015 © MacMagazine.com.br — Todos os direitos reservados. Política de Privacidade  |  Anuncie Aqui  |  Sobre o MM  |  Contato Logo do MacMagazine