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

Ou seja, a definição de layout de pixel perfeito não é imutável como a maioria das diretrizes de IU do iOS. As pessoas interpretam de maneiras diferentes, daí o problema: a perfeição do pixel pode parecer inaceitável para alguns, mas outros continuarão a usar o princípio nos próximos anos, embora com um nome diferente. É principalmente um problema de nomenclatura.

O que é um design de interface de usuário perfeito?

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

A criação de uma IU de aplicativo iOS perfeita em 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, enquanto simultaneamente garante que ele se adapte responsivamente a outros dispositivos.

Mas por que o design Pixel-Perfect?

Os Designers de IU eles se esforçam para criar interfaces fáceis de perceber e interagir. O dever profissional do desenvolvedor é respeitar o trabalho do designer e implementar a interface exatamente como ela foi entregue.

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

Devido à natureza altamente competitiva da Apple App Store, todos os detalhes que melhoram 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.

tutorial avançado c ++

Este guia rápido de design de IU do iOS irá guiá-lo através do processo desde o estágio de design básico até a implementação, de uma perspectiva de designer e desenvolvedor.

Criação de um design de IU para iOS

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

Ferramentas essenciais de design iOS

Acho que estou correto em dizer que Esboço tornou-se o padrão de fato para designers de UI / UX da web e móveis. Sim, bem Adobe XD é uma alternativa promissora , fica atrás do Sketch em termos de popularidade.

A seguir, escolheremos o tamanho da prancheta. Hoje, temos dispositivos iOS com diferentes tamanhos e proporções de tela e temos que escolher um tamanho para criar nosso design. Graças ao Auto Layout, ele se adapta facilmente a outros tamanhos de tela. Se necessário, você pode criar diferentes variações de design para diferentes Classes de tamanho .

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

Felizmente, não há necessidade de anotar as especificações de cada um, pois o Plugin de design automático para Sketch vai cuidar disso. O designer simplesmente 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 se certificar de que tudo parece bom, seja em um iPhone X ou iPhone 5 antigo.

Nota: 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 redimensionadas por seus pais.

Configurando seu Design

Parece ótimo, mas ainda não escolhemos o tamanho que usaremos para criar nosso design. De acordo Estatísticas de David Smith no iOS , 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 você já está familiarizado 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). Este é o display Retina padrão e no código teremos metade da resolução. Portanto, sugiro que você comece com 375x667 píxeis.

Em seguida, precisamos ter certeza de que nosso design de IU do iOS maximiza a nitidez. Para atingir este objetivo, você deve ativar encaixe de pixel :

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

Usos Redondo: Pixels Completos ao editar objetos vetoriais:

Obviamente, esses são apenas os princípios básicos e, para dar uma olhada mais de perto nos elementos perfeitos da interface do usuário do iOS no Sketch, você deve verifique o tutorial oficial .

Sinta-se à vontade para usar animações vetoriais complexas, porque um desenvolvedor pode brincar facilmente usando o biblioteca lottie . Você pode reproduzir animações do Adobe After Effects em um dispositivo móvel sem experimentar quaisquer artefatos de dimensionamento. Basta fornecer o arquivo JSON ao desenvolvedor e pronto.

Use o perfil de cor sRGB tanto quanto possível. Se sRGB não for suficiente em monitores de gama ampla, você precisará fornecer cores ou gráficos (um sRGB e outro com um perfil de cores incorporado). Informações detalhadas sobre perfis de cores estão disponíveis em Diretrizes HID da Apple se você precisar.

Código personalizado para resultados perfeitos de pixels

Ótimo! Agora sabemos o suficiente para criar um layout perfeito em pixels. Como podemos compartilhar com o desenvolvedor? Obviamente, precisamos chegar à 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 de que precisa para garantir que o design de sua interface de usuário funcione: recursos gráficos, fontes e cores usadas no design, texto e muito mais. Quase a única coisa que o designer pode precisar fornecer neste momento são os arquivos de fonte, caso estejam usando fontes que não estão incluídas no iOS.

Outra ferramenta legal é 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 variável e muito mais.

Obviamente, você terá que confiar no Xcode e em algumas ferramentas de desenvolvimento padrão do iOS, mas falaremos disso mais tarde.

Isso é extremamente útil se você tiver que atualizar dinamicamente apenas uma parte específica de um elemento de design, por exemplo, alterar a cor de base de um fundo gradiente no ícone de bate-papo. E, como um bônus adicional, seu aplicativo perderá peso.

Ok, o desenvolvedor finalmente tem tudo de que precisa, então como podemos implementar perfeitamente o layout de pixel perfeito (desculpe o trocadilho)?

Configuração e sincronização de 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 oferece um recurso de feedback eficaz, permitindo que o designer e desenvolvedor identifiquem e resolvam problemas potenciais rapidamente. Mesmo que tudo seja feito corretamente, os comentários podem ser usados ​​para comentários e pequenas melhorias.

No entanto, como todos sabemos, as coisas nem sempre saem de acordo com o planejado, então às vezes o desenvolvedor terá que 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 cor da tela para sRGB: vá para Preferências do sistema - Monitores - Cor e escolher sRGB IEC61966-2.1 .

• Dentro Medidor digital de cores , ou qualquer outra ferramenta de seleção de cor, escolha exibir em sRGB .

• Verifique se o perfil de cor na paleta de cores Xcode está definido para Dispositivo RGB.

Nota: _ As imagens podem ter um perfil de cor incorporado. Se for esse 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 enfrentar esses casos com muita frequência.

No Xcode 9, lembre-se Preservar dados vetoriais quando for necessário. Embora aumente o tamanho do aplicativo, também permitirá que você use sua imagem para qualquer tamanho de tela. 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 legados e deixarão você com uma imagem borrada quando dimensionada além do tamanho original. Você pode consultar a documentação oficial da Apple para obter informações adicionais sobre este tópico particular .

Finalmente, o desenvolvedor precisará garantir que os tamanhos e distâncias correspondam o máximo possível ao design original. Se houver informações questionáveis ​​no Zeplin, você pode medir as distâncias entre os diferentes componentes da IU do iOS com variações nas réguas de tela. Um deles é xScope , uma régua na tela com muitos recursos práticos.

Dando vida ao design da IU do seu iOS

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

• Storyboard - Visualize as telas e navegue entre elas, mas não há opções para herdar um layout de um controlador para outro.

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

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

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

Grupos de elementos da IU em blocos. Isso simplifica o suporte para todas as restrições. Não seja preguiçoso e coloque as visualizações nomeadas em ordem conforme aparecem na tela de cima para baixo. Observe que a parte inferior aparecerá por cima. Isso ajudará você a encontrar diferentes visualizações mais rapidamente.

Veja o exemplo a seguir para elementos agrupados e não agrupados:

Se você tiver vários objetos alinhados à esquerda / direita, não os alinhe com a borda deslocada. A melhor abordagem é alinhar com o elemento anterior ou implementar uma visão especial ffset com uma restrição de largura. Se você precisar alterar o deslocamento em algum momento no futuro, isso tornará as coisas um pouco mais fáceis.

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

Nota: Se a versão mínima do iOS do seu aplicativo for 11, você pode usar a opção 'Cores nomeadas' no Catálogo de itens.

Para terminar

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

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