Destaques
Desenvolvedor explica por que acha que a tela de 4,7 polegadas do “iPhone 6” terá 750×1334 pixels [atualizado: mockup de screenshot] Desenvolvedor explica por que acha que a tela de 4,7 polegadas do “iPhone 6” terá 750×1334 pixels [atualizado: mockup de screenshot]

Se ontem nós vimos supostas cases para o “iPhone 6” que corroboram uma teoria de Ming-Chi Kuo, da KGI Securities, hoje trazemos uma aposta de um desenvolvedor que explica por que a resolução de 750×1334 pixels citada pelo analista para a suposta nova tela de 4,7 polegadas seria ideal. De acordo com Kuo, a Apple […]

Rumor: Apple estaria implementando recurso nativo de reconhecimento de músicas no iOS 8 Rumor: Apple estaria implementando recurso nativo de reconhecimento de músicas no iOS 8

Hoje em dia é fácil identificar uma música que está tocando num ambiente. Basta abrir o Shazam ou o SoundHound no seu iGadget que tudo é feito de maneira simples e rápida. Mas a Apple parece querer facilitar isso ainda mais para usuários de iPads e iPhones/iPods touch. De acordo com a Bloomberg, um recurso […]

↪ Apple e outras fabricantes de smartphones assinam “Comprometimento Voluntário Antirroubo” ↪ Apple e outras fabricantes de smartphones assinam “Comprometimento Voluntário Antirroubo”

Ladrão roubando telefone celular, via Shutterstock. De um comunicado para a imprensa: A CTIA e empresas wireless participantes anunciaram [ontem, 15/4] o “Comprometimento Voluntário Antirroubo de Smartphones”, que é o mais recente esforço da indústria para conter roubos de smartphones nos Estados Unidos. A segurança de usuários wireless permanece a prioridade número um da indústria, […]

Supostas cases para o “iPhone 6” mostram possível deslocamento do botão liga/desliga para a lateral Supostas cases para o “iPhone 6” mostram possível deslocamento do botão liga/desliga para a lateral

Na semana passada, nós cobrimos aqui no site inúmeras apostas de lançamentos da Apple para este ano proclamadas pelo analista Ming-Chi Kuo, da KGI Securities. Uma coisa que não comentamos e que havia sido citada por ele foi um possível deslocamento do botão liga/desliga do “iPhone 6”, da tradicional posição superior para a lateral direita. […]

Apple indica prazos máximos para pedidos a serem entregues antes do Dia das Mães; lança o iPhone 5c de 8GB em mais países Apple indica prazos máximos para pedidos a serem entregues antes do Dia das Mães; lança o iPhone 5c de 8GB em mais países

Conforme observaram alguns de nossos leitores, as Apple Online Stores do mundo todo ficaram fora do ar nesta madrugada e voltaram sem grandes novidades. O principal foi isto aqui: A Apple já colocou no ar uma página indicando os prazos máximos para pedidos que deverão ser entregues antes do Dia das Mães. A maioria deles […]

Home » Design, Dicas

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

em 24 de janeiro de 2012 às 16:22 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… ;-)

Related Posts Plugin for WordPress, Blogger...

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



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.
Últimos Posts do Fórum

Macbook Pro Mid 2010 + SSD Samsung 840evo 128gb
Último post de: Maddo Garan

Smartshell para MacBook
Último post de: canzil

Iphone 5c apagou e agora não restaura
Último post de: Ygor Dias

Compartilhem as Home Screens dos seus iPhones!
Último post de: albejunior

Aplicativo Torrent ?
Último post de: camila447

MacMagazine em Redes Sociais
Feed do MacMagazine
Notícias da INFO

Hangouts
SemanaTech - Rumor: Motorola lançará smartphone Moto E por R$ 599

Mercado
AMD tem resultado acima do esperado e ação dispara

MacMagazine no Ar

iTunes Assine na iTunes Store

Enquete: participe!

Se você pudesse, voltaria do iOS 7 pro 6?

Apps atualizados
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-2014 © MacMagazine.com.br — Todos os direitos reservados. Política de Privacidade  |  Anuncie Aqui  |  Sobre o MM  |  Contato Logo do MacMagazine