Como implementar um design de interface do usuário iOS perfeito para pixels

Você provavelmente já ouviu a frase “design de pixel perfeito” inúmeras vezes, sem sequer considerar o que isso significa, ou o que deveria significar. Nos últimos meses, há uma chance de você ter ouvido falar sobre o declínio do conceito de design pixel-perfect, mas há um pequeno problema com essas alegações, especialmente quando se trata de design de interface do iOS.

Ou seja, a definição de design perfeito em pixels não é esculpida em pedra como a maioria das diretrizes de interface do iOS. As pessoas o interpretam de maneiras diferentes, daí o problema - a perfeição do pixel pode parecer ultrapassada para alguns, mas outros continuarão usando o princípio nos próximos anos, embora com um nome diferente. É principalmente um problema de nomenclatura.

O que é o design de interface do usuário com pixels perfeitos?

Como não há uma definição clara de perfeição de pixel, meu entendimento do conceito de design de pixel perfeito é que tudo é feito para maximizar a nitidez e a fidelidade. Depois que o design é implementado, ele parece idêntico em qualquer tela do iPhone, sem artefatos ou problemas de qualquer tipo.

Criar uma interface de usuário do aplicativo iOS perfeita para pixels significa que você está criando um design com pixels em mente e implementando exatamente o mesmo design na tela, até cada pixel no design referenciado, ao mesmo tempo em que garante que ele seja adaptado de forma responsiva a outros dispositivos.

Mas por que um design perfeito em pixels?

Os designers de interface do usuário fazem o possível para criar interfaces fáceis de perceber e interagir. É dever profissional do desenvolvedor respeitar o trabalho do designer e implementar a interface exatamente como entregue.

Com aplicativos sem pixels perfeitos, os usuários provavelmente não terão problemas significativos que os impeçam de usar e aproveitar o aplicativo, mas aplicativos com pixels perfeitos definitivamente parecem mais nítidos, limpos e consistentes.

Devido à natureza altamente competitiva da App Store da Apple, todos os detalhes que melhorem a aparência geral e a experiência do usuário são bem-vindos. Isso pode ajudar a diferenciar seu aplicativo e torná-lo mais visível e, portanto, mais lucrativo.

Este guia rápido de design de interface do usuário do iOS o guiará pelo processo desde o estágio básico de design até a implementação, da perspectiva de um designer e desenvolvedor.

Criando um design de interface do usuário iOS

Vamos começar. Aplicativos perfeitos para pixels obviamente começam como designs perfeitos para pixels, e todos nós sabemos de onde eles vêm hoje em dia.

Ferramentas essenciais de design de interface iOS

Acho que estou certo ao dizer que o Sketch se tornou o padrão de fato para designers de UI/UX para web e dispositivos móveis. Embora o Adobe XD seja uma alternativa promissora, ele fica atrás do Sketch em termos de popularidade.

Em seguida, escolheremos o tamanho da prancheta. Atualmente, temos dispositivos iOS com diferentes tamanhos de tela e proporções e precisamos escolher um tamanho para criar nosso design. Graças ao Auto Layout, ele será perfeitamente adaptado a outros tamanhos de tela. Se necessário, você pode criar diferentes variações de layout para diferentes classes de tamanho .

A única questão real aqui é: como o designer deve compartilhar informações sobre a adaptação de designs para diferentes telas com o desenvolvedor?

Felizmente, não há necessidade de anotar as especificações de cada um, pois o plug-in Auto Layout para Sketch cuidará disso. O designer só precisa definir o layout automático desejado, exportar para diferentes tamanhos de tela com um clique, e o desenvolvedor entenderá como colocar restrições de layout e garantir que tudo fique bem, seja em um iPhone X ou no bom e velho iPhone 5.

Observação: desde a versão 44, a equipe do Sketch melhorou drasticamente os controles de redimensionamento, dando aos usuários mais poder e controle sobre como as camadas devem se comportar quando o pai for redimensionado.

Configurando seu projeto

Parece ótimo, mas ainda não escolhemos o tamanho que usaremos para criar nosso design. De acordo com as estatísticas do iOS de David Smith, 57% de todos os usuários do iPhone contam com telas de 4,7 polegadas, introduzidas no iPhone 6/6s e posteriormente usadas no iPhone 7 e até mesmo no recém-lançado iPhone 8.

Tenho certeza de que todos já estão familiarizados com as telas de 4,7 polegadas da Apple, mas caso você não seja uma pessoa de números, estamos falando de telas de 750x1334 pixels com 326 pixels por polegada (PPI). Esta é a tela Retina padrão e em código teremos metade da resolução. Portanto, sugiro que você comece com 375x667 pixels.

Em seguida, precisamos ter certeza de que nosso design de interface do iOS maximiza a nitidez. Para atingir esse objetivo, você precisa ativar o ajuste de pixel :

Aqui está um exemplo de um retângulo simples com e sem ajuste de pixel:

Use Round: Full Pixels ao editar objetos vetoriais:

Obviamente, esses são apenas o básico e, para uma visão mais detalhada dos elementos de interface do iOS perfeitos em pixels no Sketch, você deve conferir o tutorial oficial.

Sinta-se à vontade para usar animações vetoriais complexas, porque um desenvolvedor pode reproduzi-las facilmente usando a biblioteca Lottie. Você pode reproduzir animações do Adobe After Effects em um dispositivo móvel sem sofrer nenhum artefato de dimensionamento. Basta fornecer o arquivo JSON para o desenvolvedor e pronto.

Use o perfil de cores sRGB o máximo possível. Se o sRGB não for suficiente em telas de ampla gama, você precisará fornecer cores ou recursos gráficos (um sRGB e outro com perfil de cores incorporado). Informações detalhadas sobre perfis de cores estão disponíveis nas diretrizes HID da Apple, caso você precise.

Código personalizado para resultados perfeitos em pixels

Excelente! Agora sabemos o suficiente para criar um design perfeito em pixels; como podemos compartilhá-lo com o desenvolvedor? Obviamente, precisamos alcançar nossa caixa de ferramentas.

Escolhendo as ferramentas certas

Existem ferramentas incrivelmente úteis para compartilhar o trabalho do designer com os desenvolvedores - Zeplin. Basta usá-lo e o desenvolvedor terá quase todas as informações necessárias para garantir que seu design de interface do usuário funcione: ativos gráficos, fontes e cores usadas no design, texto e muito mais. Praticamente a única coisa que o designer pode precisar fornecer neste momento são os arquivos de fonte, caso eles usem fontes que não estão incluídas no iOS.

Outra ferramenta legal é o PaintCode, que pode gerar código a partir de imagens vetoriais. PaintCode usa seus caminhos SVG e dados de cores para gerar classes Swift ou ObjC. Com PaintCode, você pode usar expressões, variáveis, etc. para criar estados passivos/ativos de seus botões, estados para cima/para baixo, texto dinâmico, animação de variáveis ​​e muito mais.

Obviamente, você precisará confiar no Xcode e em algumas ferramentas padrão de desenvolvimento para iOS, mas falaremos sobre isso mais tarde.

É extremamente útil se você precisar atualizar dinamicamente apenas uma parte específica de um recurso de design, por exemplo, alterar a cor base de um plano de fundo gradiente no ícone de bate-papo. E, como um bônus conveniente, seu aplicativo perderá peso.

Ok, o desenvolvedor finalmente tem tudo o que precisa, então como implementamos perfeitamente o design pixel-perfect (desculpe o trocadilho)?

Configurando e sincronizando suas ferramentas

Com o Zeplin, você deve obter quase tudo o que precisa, desde que o designer configure tudo corretamente. Se algo for esquecido ou não estiver claro, o Zeplin fornece um recurso de comentários eficaz, permitindo que o designer e o desenvolvedor identifiquem e resolvam rapidamente possíveis problemas. Mesmo que tudo seja feito corretamente, os comentários podem ser usados ​​para feedback e pequenas melhorias.

No entanto, como todos sabemos, as coisas nem sempre saem como planejado, então às vezes o desenvolvedor precisará escolher uma cor, mesmo que o designer tenha fornecido a paleta de cores usada no aplicativo.

Para fazer isso corretamente, você precisa sincronizar suas ferramentas:

• Defina o perfil de cores do seu monitor para sRGB: vá para System Preferences - Displays - Color e escolha sRGB IEC61966-2.1 .

• No Digital Color Meter , ou em qualquer outra ferramenta de seleção de cores, opte por exibir em sRGB .

• Verifique se o perfil de cores na paleta de cores do Xcode está definido como Device RGB.

Nota: As imagens podem ter um perfil de cores incorporado. Se este for o caso, você precisará adaptar suas ferramentas a este perfil se quiser obter a cor correta desta imagem. Felizmente, isso deve ser uma exceção, e você não deve experimentar esses casos com muita frequência.

No Xcode 9, lembre-se de preservar dados vetoriais quando necessário. Embora aumente o tamanho do aplicativo, isso também permitirá que você use sua imagem para qualquer tamanho de exibição. No entanto, no iOS 10 e em versões anteriores do sistema operacional móvel da Apple, as imagens não serão ampliadas usando os dados vetoriais adicionais.

Em vez disso, as versões mais antigas do sistema operacional usarão mecanismos de dimensionamento herdados e deixarão você com uma imagem borrada ao dimensionar além do tamanho original. Você pode conferir a documentação oficial da Apple para obter informações adicionais sobre esse problema específico.

Por fim, o desenvolvedor precisará garantir que os tamanhos e as distâncias correspondam ao projeto original o mais próximo possível. Se houver alguma informação questionável no Zeplin, você pode medir as distâncias entre os diferentes componentes da interface do iOS com variações nas regras de tela. Um deles é o xScope, uma régua na tela com muitos recursos práticos.

Dando vida ao seu design de interface do usuário iOS

Quando se trata de implementar o design da interface do usuário do iOS, existem algumas abordagens para escolher: Storyboard, XIB e código personalizado.

• Storyboard - Visualiza telas e navegação entre elas, mas não há opções para herdar um design de um controlador em outro.

• XIBs - Visualiza uma tela ou parte dela, fácil de herdar. Antes do Xcode 9, não havia opção de usar guias de layout superior/inferior, enquanto no Xcode 9 podemos usar Safe Area .

• Código - De longe a opção mais flexível, mas não oferece visualização imediata.

Para storyboards, você precisará dividir seu design em fluxos, por exemplo, LoginFlow.storyboard, SettingsFlow.storyboard ou NewsFeedFlow.storyboard. Dessa forma, você manterá seus storyboards leves.

Agrupe os elementos da interface do usuário em blocos. Isso simplifica o suporte para todas as restrições. Não seja preguiçoso e coloque as visualizações nomeadas em ordem, pois elas aparecem na tela de cima para baixo. Tenha em mente que a parte inferior será exibida acima da superior. Isso ajudará você a encontrar diferentes visualizações mais rapidamente.

Veja o exemplo a seguir para elementos desagrupados e agrupados:

Se você tiver vários objetos alinhados à esquerda/direita, não os alinhe à borda com o deslocamento. A melhor abordagem é alinhar ao elemento anterior ou implementar uma _ffset view_ especial com uma restrição de largura. Se você precisar alterar o deslocamento em algum momento no futuro, isso facilitará um pouco.

Para usar cores no IB, você pode preparar uma paleta na parte inferior do Xcode Color Picker.

Observação: se a versão mínima do iOS do seu aplicativo for 11, você poderá usar a opção "Cores nomeadas" no Catálogo de recursos.

Empacotando

É isso. Agora só falta enviar o resultado para a equipe de controle de qualidade, verificar se está tudo em ordem e pronto! Nosso aplicativo pixel-perfect está pronto.

O objetivo deste artigo foi fornecer um exemplo linear e simples de design de interface do usuário iOS perfeito em pixels, obtendo os melhores resultados no menor tempo possível. A colaboração entre designers de interface do usuário e desenvolvedores nem sempre é tão simples e sem atritos, mas isso é um problema para outro artigo.