I described the creation process of two games made in a really small period of time, around 2 to 3 months. Now I’m here to tell a little more about the third project and one of the most audacious project, therefore we had around 7 months to develop it.

The outcome of Klement’s Attack was so good that we decided to move on to our next challenge with the same group formation. Our third approach for a game was something that’s more common on the App Store environment. We aimed for the management games as our Big Idea and from that we started our discovery and studies just like the other games.

We questioned ourselves why those type of games were so popular among iOS players? What made them come back to the game? The main point here is having a motive to come back and keep growing on the game. As a MVP we developed the main mechanics and behavior such as building, harvesting gold and wood, the shop screen and building paths. What made it so complex was the interaction the player would have with the villagers and also the progress of buildings. Another challenge was the isometric art, which I had a hard time drawing on the grid.

Below you can see a video of the animated sketch to test the mechanics and game logic. After making sure everything was working as it should, we started to replace the sketches for the final art.

You can access the animated gif in the link below:

Prototype test.gif

The final result was a management game where you had to build your community and make it thrive. Building paths were necessary so the villagers could get to the mines or three to harvest material. If you wanted more villagers to help, you had to build more houses. For backup and a little help you could access the shop and buy supplies as well.

It was a wild and fun experience developing those three games while in the Apple Academy getting all the knowledge from Apple itself. I see it as an opportunity to get to know more about the game creation process and start somewhere in the game UX/UI design career. For this purpose, I’m working on a case study focusing the game scene and it will be posted here later on.

Thank you for reading until here and if you have any comments, suggestions, let me know!

Creating games with the CBL methodology (Part 3) – Western Land was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

How the Apple methodology helped us create a MVP for a mobile game

In this second game challenge my dev team (Ítalo Sjobom, Matheus Clemente, Daniel Lima e João Vitor Paiva) and I wanted to create something meaningful for our users, so we started from the point where nostalgia would hit hard. Our Big Idea was to build an arcade-like game that would involve our players just like the old arcades did.

It’s no surprise, therefore, that our Essential and Guiding questions would be within the arcade spectrum and what made them so addictive. We also had to think of how we would adapt the arcade idea into the mobile game era. Would it work?

Arcade games are led by their will to always do better in their next try. That’s something we focused on, along with the fulfillment of seeing your name in the top 3 best scores.

Before coming up with the solution we had a lot of gaming sections on local arcades and a lot of studying on how their level progress were. It always consisted in the same principle, but with subtle modifications that made the next stage harder and made the player learn with their errors or the new behavior.

Klementt’s Attack is an endless shooting game in which you face different species of aliens and you are the chosen one to avoid their attack on Earth. Multiple mechanics were created for each type of alien and also a level boss. They are added to the scenario as the player gets more points, so we can balance the difficulty of the endless path. As you go further the game, you get to see and learn about a new alien species.

Asteroids are also part of the game. They can trick you by damaging your spaceship or you can destroy them to gather more points and special power-ups.

The HUD and characters were entirely made on Procreate. The animation technique used was the old frame by frame since there are very simple movements. Below you can see each character and what their powers are.

Below you can check out some footage of the gameplay as well.

Unfortunately the game is no longer available at the App Store due to the end of the Apple’s Academy project and the maintenance of the developer account is expensive. It was one of my favorites to work on!

Keep up to read about the Western Land project, also done during the Apple Academy program!

If you want to check out some gifs of the game play, here are the links:

• Home screen.gif
• Gameplay.gif
• Slime.gif

Creating games using the CBL methodology (Part 2) – Klementt’s Attack was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Welcome to a series of 3 medium posts where I, Juliana Furtado, will guide you through my experience on building games for the Apple Store throughout the wild experience of the Apple Academy back in 2017.

Let’s start at the beginning, my first project. As a designer I had to be in a group with other 4 developers (Ricardo Rachaus, Pedro Castro, Matheus Clemente e Felipe Rodrigues) so we could brainstorm together and come up with either a game or app solution in 3 months.

As I’ve explained before on how the CBL was used to create an app, this methodology can also be used to create games, or at least it’s MVPs.

Just to refresh your memories on the methodology of the Challenge Based Learning (CBL) where I explain with deeper details in [this article], it’s a process guided by one Big Idea and a sequence of exploitative questions that will make us learn and understand more about this Big Idea.

Those question are grouped in Essential and Guiding Questions, in which the first one is more general questions and the second includes more specific and technical questions about the solution itself.

Some examples of Essential Question around the Big Idea of “Game”

1- What’s the best approach for an iOS game?

2- What are the most played games on App Store?

3- What’s the average time of phone gaming?

4- What are the most downloadable game categories on App Store?

And so on…

In order to move on, we have to look up for the answers of this first question group. Sometimes the answers can make us come up with new Essential questions or even Guiding Questions. There’s no problem on adding or keeping them for later.

After answering, or trying to answer all of the questions (it’s okay to let some unanswered), we can move on to the Guiding questions. But what’s the difference?

Guiding questions are more technical questions about the game itself. Below you can check some examples:

1- How do we define our levels?

2- How will the interaction be with the characters?

3- What’s the game category?

4- How many levels there will be?

5- How will it be monetized?

6- What’s the best software to develop for iOS?

7- How many characters there will be and what will they do?

You can make as many questions as you want and feel it’s enough to give all the base knowledge you need.

Just like in the first step, now we answer the questions and start to mold a structure to our game.

The guiding activities are next and we have to point out what we have to do to get to the final product: researches, studies, work timeline, how will we organize our work (will it be by sprints or kanban?)

Now that we learned about the Big Idea, have things planned and documented, we start sketching down the prototype.

And here is how one of the games, Merge ‘em up, came to life. We started with a paper sketch just to materialize what we have been thinking throughout the process and test the idea.

After testing, iterating and enhancing the prototype, we came up with a MVP game where you challenge yourself to go further in every attempt. There’s also a level of complexity in which the player can merge different colors to come up with a new one that will give you bonus points. We also came up with a tool in case the player seems stuck, they can color a blank square that may change their game and push further to the leaderboard!

You can access a gameplay video on the link below

mergeplay.mp4

Another product strategy we thought was the monetization. How would we keep the game working and evolving? We came with a first solution of an in-app shop.

After that, two other projects came to life: Klement’s Attack and Western Land. Both games followed the same principles of discovery, documentation and delivery.

Follow up for more creative process on Klement’s Attack and Western Land. Thank you for reading!

Creating games using the CBL methodology (Part 1) – Merge ‘em Up was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Acessibilidade

O iOS oferece muitas opções para facilitar o acesso dos usuários ao conteúdo, promovendo um experiência inclusiva independente de necessidades especiais. Existem recursos pensados para pessoas com deficiências visuais, auditivas, motoras e cognitivas.

Como designers é essencial conferir se o aplicativo obedece, pelo menos, aos seguintes critérios:

• Texto alternativo para labels, imagens, ícones e elementos de interface permitindo a leitura por voice over e navegação por pessoas cegas ou com dificuldades de visão.
• Desenvolver aplicativos com auxilio do UIKit, que já está pronto para lidar com os parâmetros de acessibilidade de texto e interface, como aumentar o corpo do texto no painel de preferências. No caso de recursos customizados é preciso testar o comportamento do aplicativo ao ativar os menus de acessibilidade do iOS.
• Testar o comportamento do app em todas as possibilidades de acessibilidade: cores invertidas, contraste, redução de transparência e outros.
• Incluir legendas e descrição de audio na presença de diálogo e conteúdo sonoro para compreensão de usuários com dificuldades auditivas.

Áudio

Parte da experiência de se utilizar um device com iOS está em outros sentidos para além da visão e tato, assim ao desenvolver um aplicativo é imprecindível considerar o áudio no conjunto da experiência. As principais maneiras de um usuário controlar o som no iPhone são:

• Botão de silêncio: Para evitar que sons indesejados ou focar somente nos sons mais importantes gerados através de interação direta o usuário pode acionar a opção de Silencio no menu das configurações ou por meio da chave física na lateral do dispositivo.
• Botões de volume: O usuário pode controlar o volume dos sons nos botões físicos + e — ou por meio de slider na tela.
• Fones de ouvido: O dispositivo reconhece a conexão de fones de ouvido e possibilita o controle do playback de áudio e volume no botão físico do fone.

Algumas diretrizes para os ajustes de som a serem levadas em conta no desenvolvimento de aplicativos são:

• Ajustes pontuais de volume são possíveis mas o ajuste geral deverá sempre ser controlado pelo sistema.
• Permita a saída de áudio, quando apropriado, para sistemas como som automotivo e Apple TV.
• Utilize a volume view para controle geral de volume.
• Use o controle do sistema para sons curtos e vibrações.
• Categorize se o áudio é essencial para o seu aplicativo: descreva o que é essencial e deverá ser tocado mesmo com o botão de silêncio ativado.

Este artigo foi escrito em parceria com Juliana Furtado como parte do projeto Apple Developer Academy | UCB. No link você pode conferir os artigos oficiais da Apple para a Human Interface Guideline do iOS.

Destrinchando o Human Interface Guidelines para iOS — #6 was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Teclados personalizados

Extensões de teclado substitui o teclado que é padrão por um teclado personalizado. Quando ativado, o teclado fica disponível durante a adição de texto em qualquer aplicativo, menos ao editar campos de texto seguros e campos de números de telefone.

Dicas importantes sobre teclados personalizados

Você tem certeza que precisa de um teclado personalizado? Esses teclados só devem ser usados quando necessário. Evite usar sem uma funcionalidade atrelada.

Forneça uma maneira óbvia e fácil de alternar entre os teclados. Pense se seria legal fornecer um tutorial de teclado em seu aplicativo, por exemplo; diga as pessoas como ativar o teclado, e retornar ao teclado padrão.

Provedores de Documentos

Uma extensão de provedor de documentos implementa uma interface personalizada para importar, exportar, abrir ou mover documentos de uma aplicação de outros aplicativos no sistema.

Dicas importantes sobre provedores de documentos

Certifique-se de listar informações que podem ser úteis como datas de modificação, tamanhos e se os documentos são locais ou remotos.

Não forneça uma barra de navegação personalizada. Sua extensão já é carregada dentro de uma visualização que já inclui uma barra de navegação. Então uma segunda barra é confuso e tira espaço do seu conteúdo.

Tela inicial Ações rápidas

As ações rápidas na tela inicial são uma maneira conveniente de executar ações úteis e específicas da aplicação direto na tela inicial, usando o 3D Touch.

Dicas importantes sobre ações rápidas

Crie ações rápidas para tarefas importantes. Cada aplicativo deve permitir pelo menos uma ação rápida e útil.

Forneça um título breve para cada ação rápida. O título de uma ação deve comunicar instantaneamente os resultados da ação.

Mensagens

Os aplicativos do iMessage e os adesivos são extensões de mensagens que permitem que os usuários compartilhem conteúdos com amigos, se comuniquem expressivamente e compartilhem experiências diferenciadas.

Dicas importantes sobre iMessage e Adesivos

Para evitar cortes se atente com a posição dos conteúdos. O conteúdo do seu aplicativo é apresentado em bolhas de mensagem com bordas arredondadas, portanto, não coloque informações essenciais nos cantos.

Permita edição de texto somente na exibição expandida. Para garantir que os usuários possam ver o que eles estão editando, permita a entrada de texto somente na exibição expandida.

Mensagens é uma forma universal de comunicação. Então sempre tente produzir etiquetas que têm um apelo internacional.

Escale os adesivos apropriadamente. Tente fornecer adesivos pré-dimensionados para uma qualidade e desempenho ideal.

Edição de fotos

As extensões de edição de fotos permitem que as pessoas modifiquem fotos e vídeos no aplicativo “Fotos” aplicando filtros ou fazendo outras alterações. As edições são sempre salvas no app Fotos como novos arquivos, preservando com segurança as versões originais.

Dicas importantes sobre edição de fotos

Confirme o cancelamento das edições. Se o usuário tocar no botão "Cancelar", não descarte imediatamente suas alterações sem uma confirmação.

Permita que os usuários visualizem as edições. É interessante que as pessoas vejam o resultado de seu trabalho antes de fechar a edição para ter um retorno do que estão executando.

Compartilhamento e Ações

As extensões de compartilhamento fornecem uma maneira conveniente de compartilhar informações do contexto atual com aplicativos, contas de mídia social e outros serviços. As extensões de ação permitem que as pessoas iniciem tarefas específicas do conteúdo, como adicionar um marcador, copiar um link ou salvar uma imagem.

Dicas importantes sobre compartilhamento e ação

Ative uma tarefa única e focada. Uma extensão não é um mini-aplicativo. Ele executa uma tarefa de escopo estreito relacionada ao contexto atual.

Crie uma interface familiar. Para as extensões de compartilhamento, a exibição de composição fornecida pelo sistema é familiar e fornece uma experiência de compartilhamento consistente em todo o sistema.

Widgets

Um widget é uma extensão que exibe uma pequena quantidade de informações úteis e atuais ou de funcionalidades específicas do aplicativo. Os widgets são altamente personalizáveis ​​e podem conter botões, texto, personalizações de layout, imagens e muito mais.

Dicas importantes sobre Widgets

Mostre o conteúdo rapidamente. Os usuários gastam muito pouco tempo olhando widgets, o ideal é não ter que esperar pelo carregamento do conteúdo.

Use a fonte do sistema em preto ou cinza escuro para o texto. A fonte do sistema é projetada para legibilidade e as cores escuras funcionam bem com o plano de fundo do widget padrão.(evite trocar o plano de fundo padrão).

Este artigo foi escrito tendo como base o site iOS Human Interface Guidelines.

Extensões #AppleHIG was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

A correta utilização das UI Bars são essenciais para garantir que o usuário possa interagir com um aplicativo e entender o tráfego entre suas telas. Conheça a finalidade e a estrutura de cada um desses componentes.

Navigation Bar

A barra de navegação aparece no topo da tela e permite que o usuário navegue pelo aplicativo, dando a sensação de telas hierarquizadas. Ela pode ser escondida dependendo do conteúdo da tela.

• Centralizado na barra de navegação há o título da tela que o usuário se encontra.
• No lado esquerdo, encontra-se geralmente um botão de voltar (que necessariamente deve levar o usuário até a tela anterior que ele se encontrava). Este botão pode ser customizado, desde que esteja dentro do contexto do aplicativo.
• No lado direito do título geralmente encontra-se botões de controle como "edit", "select" ou "done".

Search Bars

Utilize a search bar para procurar por conteúdo dentro do aplicativo. Esse componente aparece no topo da tela e pode substituir a barra de navegação. Existem dois tipos de search bars: proeminentes e minimalistas. O estilo proeminente é utilizado quando a procura é uma função frequente no aplicativo. Caso contrário, aconselha-se usar o estilo minimalista.

• A search bar é composta pelo campo de procura, um botão de cancela e um texto placeholder, que pode servir como dica para os usuários (acima da barra pode haver uma linha de texto com o mesmo propósito).
• Sugira uma lista de possíveis resultados abaixo da search bar para ajudar as pessoas a achar conteúdo de forma mais rápida

Scope Bar/Segmented controls

Este componente pode ser adicionado a uma search bar ou a uma navigation bar para que o usuário refine sua pesquisa ou mude o contexto da tela. Deve ser utilizada em último caso, procure primeiro melhorar o sistema de pesquisa.

Status Bar

A status bar aparece na parte superior da tela e contém informações como hora, bateria e sinal do wifi. É padrão: não permite que seja customizada. Porém, está disponível em dois estilos de cor diferentes, apropriados para backgrounds escuros ou claros.

• Evite colocar conteúdo importante atrás da status bar ou escondê-la permanentemente no seu aplicativo.

Tab Bar

A tab bar aparece na parte inferior do app e permite navegar entre as telas. Para não causar confusão no usuário, as tabs devem permanecer as mesmas, assim como sua aparência e altura.

• A quantidade de tabs depende do dispositivo e da orientação. Utilize entre 3 ou 5 no Iphone. No Ipad é aceitável um número maior.
• Caso precise de mais tabs coloque um botão indicando ao usuário, porém considere colocar apenas o essencial. Lembre-se que quanto mais informação, mais difícil encontrar o conteúdo.
• Caso haja nova informação relacionada a uma tab, coloque uma badge ou ponto de exclamação para indicar o usuário.
• Para tornar a interface previsível, selecionar uma tab deve sempre afetar a tela que o usuário se encontra.

Toolbar

A toolbar aparece na parte inferior do app e contém botões que permitem realizar ações na tela que o usuário se encontra. Ela permanece escondida até que o usuário precise dela, e pode reaparecer clicando na parte inferior da tela. A tab bar e a toolbar nunca aparecem na mesma tela.

• Use ícones quando há mais de três botões na toolbar. Caso contrário, use texto ao invés de ícones.
• Lembre-se de dar espaço de respiro de um ícone/texto para o outro.
• A toolbar e a tab bar são escondidas quando o teclado aparece.

Quick tip:

As tab bars são usadas para navegar entre as telas do aplicativo, enquanto a função da toolbar é realizar ações no contexto que o usuário se encontra.

Clique aqui para conhecer mais sobre o Human Interface Guidelines. Faça download dos templates aqui.

UI Bars #AppleHIG was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Entrada de Dados

• É muito importante apresentar escolhas eficientes para o usuário, se já existem categorias peça-o para escolher em um lista ao invés de digitar o nome correspondente.
• Utilize o máximo de informações disponíveis no sistema. Data, informação de contatos, localização, até informações de saúde armazenadas no Health podem ser acessadas com a autorização específica.
• Configure valores padrão com inteligência, onde for possível prever os valores mais comuns deixe-os com primeira escolha.
• Só libere a próxima ação depois que o usuário preencher todas as etapas requeridas, um botão sempre ativo pode confundir o usuário a achar que já completou os dados. Já a mudança de status de botões como continuar e registrar, dão o feedback de que se terminou aquela etapa.
• Valide os campos dinamicamente. Não espere o usuário clicar em continuar ou registar para mostrar a mensagem de que o email não é válido.
• Só exija informações que forem realmente essenciais para a funcionalidade. Dados extras só farão seu usuário perder tempo e duvidar da credibilidade do seu aplicativo.
• Escolher valores deve ser fácil, rápido e intuitivo. Colocar os valores em ordem alfabética pode ajudar a localizar nomes, mas colocar o valor mais comum no início pode agilizar ainda mais o processo.
• Mostre dicas de tela para ajudar o usuário e comunicar qual o propósito de pedir esse dado. Utilizando o texto de ancora para indicar do que se trata o campo de texto não é necessário utilizar um rótulo (label) para o campo, deixando o formulário bem mais limpo visualmente.

Gestos

Os gestos são a principal forma de interação do usuário com o dispositivo e para certos movimentos já se espera uma consistência de resultados/reações. Evite utilizar gestos diferentes do esperado ou que devam ser aprendidos, eles atrapalham a experiência.

Não atrapalhe os gestos do sistema, como o de mostrar as notificações ou revelar o centro de controle.

Utilize gestos para agilizar a navegação e interação com o seu aplicativo, inclusive gestos com vários dedos para uma experiência única e imersiva.

• Toque simples: espera-se a reação de um clique do mouse, abrir algo, acionar um botão
• Toque duplo: utilizado para centralizar o conteúdo e para ajustar o zoom a um conteúdo específico.
• Toque rápido (Flick): movimento similar de quando se passa uma página, toca-se rapidamente em uma direção como se quisesse passar aquele conteúdo para ver o próximo.
• Deslizar (Swipe): Retorna a tela anterior e revela itens escondidos. No iPad com quatro dedos muda de aplicativo e com um no modo tela dividida mostra a tela escondida.
• Arrastar: Levar um item de um lado para o outro ou de cima para baixo da tela, com o principal intuito de reorganizar itens ou indicar posição.
• Pinça: com os dois dedos tocando a tela afaste ou aproxime para realizar operações como zoom e magnification.
• Tocar e segurar: aciona outra opções do mesmo botão, item, …
• Chacoalhar: abre o menu desfazer, como quem balança a cabeça e diz "não-não"

3D Touch

• Possibilita utilizar a pressão do toque na tela para acessar funções diferentes.

• Na Home screen por exemplo, ao clicar em um app com o 3D Touch uma view com outras funções relacionadas ao app em questão aparecem.
• Com a interação “Peek and Pop” é possível prever rapidamente um item específico: página, link, arquivo, dependendo do contexto.
• Preste atenção ao tamanho da pré-visualização para que seja compreensível mesmo com os dedos do usuário acionando a função em cima da tela.
• Preste atenção também em consistências, ao decidir utilizar o “Peek and Pop” em uma parte do app é esperado que coisas similares dentro do aplicativo tenham o mesmo comportamento.
• Sempre forneça a opção de exibir o item original depois de pré-visualizar. O comportamento deverá ser similar ao resultado de um interação do tipo “tap”.

Dicas: 3D Touch no canto da tela para mudar de aplicativo. Quando digitando texto o 3D tuch no teclado revela um navegador pelo cursor.

Este artigo foi escrito em parceria com Juliana Furtado como parte do projeto Apple Developer Academy | UCB. No link você pode conferir os artigos oficiais da Apple para a Human Interface Guideline do iOS.

Destrinchando o Human Interface Guidelines para iOS — #5 was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Imprimir (printing)

A tecnologia AirPrint pode incorporar no seu app impressões sem fio de imagens, PDFs e outros conteúdos compatíveis.

Dicas da Apple

Make printing discoverable

Se seu app possui uma toolbar ou navigation bar permita impressões por meio da action button (última figura do artigo) disponibilizado pelo próprio sistema. Usuários estão acostumados com este botão e o utilizam para imprimir coisas em outros apps. Se seu app não possui uma uma toolbar ou navigation, crie um botão personalizado para a impressão.

Permita impressões somente se for possível imprimir

Se não houver nada na tela para imprimir ou nenhuma impressora estiver disponível, não mostre a ação de impressão se tocarem no action button. Se o seu aplicativo tiver um botão de impressão personalizado, desative-o ou oculte-o quando a impressão não for possível.

Este artigo foi escrito com base na “Human interface Guidelines” (disponível no site oficial da Apple) como etapa do projeto BEPID UCB para a capacitação dos designers. No link você pode conferir os artigos oficiais 😉

Feito com o apoio de Tayná Oliveira.

Features, dicas de como incorporar Air Print em seu app was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

O ícone do seu aplicativo deve ser bonito e único para que fique na memória do usuário e se destaque na tela inicial e na App Store. O ícone deve de cara representar a finalidade do aplicativo.

Simplicidade é tudo

Escolha apenas um elemento que represente a essência do seu aplicativo e trabalhe nesse elemento para que o torne simples e exclusivo, adicione detalhes suavemente para que o ícone não fique muito detalhado e consequentemente complexo, pois os detalhes podem ser difíceis de enxergar se em tamanhos pequenos.

Faça um ícone com apenas um ponto de foco e trabalhe apenas nesse ponto, para que a atenção do usuário seja captada apenas nesse ponto e identifique de imediato qual é o app e o propósito do mesmo.

O ícone deve ser facilmente identificável, o usuário não deve ter que analisá-lo para saber o propósito do aplicativo, isso deve ser reconhecido logo de cara.

Dê preferência à ícones opacos, com o plano de fundo simples e dispense a transparência, pois isso dificulta a compreensão do ícone,

Só utilize palavras no ícone se elas fizerem parte do logotipo ou sejam realmente essenciais para a compreensão, lembre-se sempre de que o nome do seu aplicativo vem logo abaixo do ícone.

Faça o ícone com os cantos quadrados, pois o sistema cuida de aplicar uma máscara que arredonda os cantos automaticamente.

O que é evitável?

Opte por não utilizar fotos, capturas de tela ou elementos que são utilizados na interface, pois os detalhes de fotografias não são visíveis quando em tamanhos pequenos, capturas de tela não conseguem expressar a finalidade do aplicativo e elementos existentes na interface tornam o usuário confuso.

Não use representações de produtos Apple em seu ícone, pois todos os produtos Apple são protegidos por direitos autorais e não podem ser reproduzidos em ícones ou imagens no aplicativo.

Não replique o ícone do aplicativo para dentro da interface, pois torna estranho ver o ícone usado para funções além da principal dele.

Faça testes

Antes de aprovar a versão final de seu ícone, faça testes do mesmo com aplicação em diferentes planos de fundo e cores, pois não é possível saber qual plano de fundo cada usuário irá utilizar, portanto, prever uma boa gama de opções é uma boa prática para que o ícone tenha uma boa visibilidade independente do plano de fundo do usuário.

Ícones personalizáveis pelo usuário

Ícones personalizáveis não são frequentemente vistos no sistema, porém quando aparecem, demonstram cuidado e preocupação do desenvolvedor para com o usuário, fazendo com que o aplicativo se adeque ao estilo do mesmo e o deixa com uma conexão mais pessoal.

É recomendável que o ícone seja personalizável apenas quando houver a opção de mudança de tema dentro do próprio aplicativo, fazendo assim uma conexão do tema do ícone personalizado com o tema da interface em si.

A opção de personalização deve estar o mais natural possível dentro do aplicativo, para que a experiência do usuário seja de estar fazendo uma ação normal dentro do aplicativo.

Custom Icons (Ícones Personalizados)

O sistema disponibiliza diversos ícones de sistema que você pode utilizar em seu aplicativo, entretanto, caso esses ícones disponibilizados não se encaixem no estilo do aplicativo, você pode criar seus próprios ícones.

Seja simples

Uma boa recomendação é criar ícones com desenhos simples e que sejam facilmente reconhecíveis pelo usuário, pois muitos detalhes tornam o ícone pesado e de difícil entendimento. Tente fazer um ícone que seja facilmente reconhecido pela maioria dos usuários e que não sejam ofensivos à nenhum deles.

Faça ícones com cores solidas e com transparência, pois o iOS ignora todas as informações de mais de uma cor, portanto utilize apenas uma e faça o uso de transparência para diferenciar quando estiverem selecionados ou não, anti-aliasing e não utilize sombras.

Mantenha um padrão de design dos ícones de sistema, sejam eles personalizados ou alternados entre personalizados e de sistema, todos devem ter o mesmo tamanho, nível de detalhamento ,perspectiva e largura da borda iguais.

Tenha duas versões do mesmo ícone para estados de selecionado e não selecionado, geralmente o ícone selecionado é a versão preenchida do ícone não selecionado.

Ofereça etiquetas de texto alternativas em todos os ícones do aplicativo, elas não são visíveis na tela e funcionam permitindo que o VoiceOver descreva para pessoas com deficiências visuais o que está na tela, facilitando a navegação dos mesmos no aplicativo.

O que não fazer

Não utilize texto como ou em ícones da Tab Bar, se o texto for necessário, exiba-o como titulo logo abaixo do ícone na Tab Bar.

Não use representações de produtos Apple em seu ícone, pois todos os produtos Apple são protegidos por direitos autorais e não podem ser reproduzidos em ícones ou imagens no aplicativo.

Tamanho e Resolução da Imagem (Image Size and Resolution)

O sistema do iOS utiliza coordenadas para colocar e posicionar o conteúdo na tela. O sistema de coordenadas se guia em pontos (pt), que são mapeados para pixels na no visor. Em telas com a resolução padrão, um ponto (pt) (1/72 polegada) é igual a um pixel (px).

Por esse motivo, é importante que você forneça todas as imagens usadas no aplicativo em alta resolução, para que o aplicativo mantenha a qualidade em todos os dispositivos que suportarem o aplicativo. Dependendo do dispositivo, é possível fazer essa “conversão” multiplicando o número de pixel de cada imagem utilizada pelo fator de escala certo.

Para entender o fato de escala, pense que uma imagem com a resolução padrão tem o fator de escala 1,0, logo é uma imagem @1x. Imagens com alta resolução tem o fator de escala 2,0 ou 3,0, logo são imagens @2x ou @3x.

Tela de Inicialização (Launch Screen)

A tela de inicialização é mostrada na mesma hora em que o aplicativo é aberto e depois é rapidamente substituída pela primeira tela do aplicativo, o que dá ao usuário a impressão de que o aplicativo é bem rápido e fluido. Objetivo da tela de inicialização não deve ser um momento para expressar algo artístico ou fazer propagandas dos desenvolvedores ou do aplicativo. O objetivo dela é apenas dar a sensação ao usuário de que o seu aplicativo fica pronto para o uso imediatamente após ser aberto.

Como os tamanhos de tela mudam dispositivos para dispositivos, os tamanhos das telas de inicialização variam também, por conta disso, você tem algumas alternativas para que a tela de inicialização fique padrão em todos os dispositivos, uma das opções é usar a tela de inicialização como um storyboard do Xcode, que é a mais recomendada por conta dos storyboards serem totalmente flexíveis e adaptáveis, mas também é possível usar imagens estáticas com os tamanhos ajustados de cada dispositivo.

O que é recomendado

Utilize uma tela de inicialização quase idêntica à primeira tela de seu aplicativo, pois isso faz com que o carregamento do aplicativo pelo sistema seja quase que invisível.

Não coloque textos em sua tela de inicialização, pois como as telas são estáticas, qualquer texto utilizado não será localizado.

Ícones do Sistema (System Icons)

O iOS disponibiliza uma serie de ícones de sistema para os desenvolvedores, esses ícones podem ser usados em navigation bars, tab bars, toolbars e ações rápidas da tela inicial. O uso destes ícones é altamente recomendável por conta deles sempre aparecem no sistema e serem familiares aos usuários.

Veja a lista completa dos ícones disponibilizados pelo iOS em: System Icons

Gráficos, Ícones, Resoluções e Tamanhos #AppleHIG was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Um aplicativo, além de cumprir com a sua proposta, precisa se comunicar bem com o usuário e fazer conexões com outros aplicativos, uma UI View tem como o seu objetivo fornecer opções para o usuário.

Mas como isso funciona na prática?

Um bom exemplo é quando vamos excluir algo no nosso celular, caso você precise excluir um email no seu aplicativo de email (seja ele qual for, ex.: Gmail, Outlook, Mail, entre outros) uma mensagem de confirmação aparecerá mesmo depois que você já tenha tocado o botão de excluir uma vez. Isso serve para evitar que você exclua algo sem querer, evitando acidentes.

Entretanto o assunto não se resumem ao exemplo dado acima, por isso vamos falar das 13 formas que UI View aparecem para o usuário e algumas dicas de como usá-las.

1. Action Sheets

É um tipo particular de alerta que aparece em resposta a uma ação feita no app, é usada para iniciar tarefas ou confirmar a execução de uma atividade irreversível.

A Apple sugere algumas práticas:

• Sempre fornecer o botão cancelar;
• Dar destaque às ações destrutivas (colocando-as em vermelho e na primeira opção de cima para baixo)
• Sempre confirme duas vezes uma ação destrutiva
• Evite adicionar scrolling (rolagem) em uma Action Sheet.

2 Activity Views

Uma atividade como copiar, favoritar ou compartilhar são usadas o tempo todo, o Activity Views serve para facilitar essas e outras atividades. O iOS já traz algumas opções padrão como copiar, duplicar ou reproduzir via Air Play. O seu app pode mostrar algumas opções de compartilhamento ou até mesmo atalhos para uma tarefa dentro da aplicação.

Aqui vão algumas dicas da Apple:

• Faça imagens simples para representar atividades personalizadas.
• Construa bons títulos para representar sucintamente as suas tarefas.
• Tenha certeza que a ação sugerida está no contexto correto.

3 Alerts

Alertas são mensagens importantes de um aplicativo, eles aparecem em pop ups na tela com uma mensagem e um ou mais botões, um bom exemplo é quando você instala um app e este pede permissão para te notificar, você tem a opção de aceitar ou não o envio de notificações.

É interessante usar minimamente os alertas para que eles não passem a incomodar o usuário e continuar com sua devida importância, é importante testar também a visualização deste alerta nas duas orientações do aparelho.

Boas Praticas para títulos e mensagens:

• Tente resumir ao máximo a descrição do seu alerta
• Evite que seu alerta soe como acusatório ou insultante ( você pode fazer isso evitando usar pronomes pessoais)
• Evite explicar o que cada botão faz (escolha uma descrição clara do alerta e títulos de fácil entendimento)

Boas Praticas para os Botões dos Alertas

• Tente usar apenas duas opções de botões
• Posicione as opções da maneira que as pessoas esperam (geralmente botões com mais propensão de toque ficam à direita e o botão de cancelar deve estar sempre à esquerda)
• Um botão de cancelamento deve sempre se chamar “Cancelar” (Nunca use aspas no título dos seu botões)
• Identifique bem os botões que resultam em ações destrutivas
• Permita que o botão “Home” do iPhone cancele um alerta.

4 Collections

Coleções são um conjunto de arquivos organizados com um padrão (como data por exemplo), um exemplo disso é como você vê suas fotos no no iPhone.

Collections suportam animações e interações, por padrão do sistema você toca para selecionar, toque e segure para editar e deslize para rolar.

Dicas

• Evite criar mudanças radicais no Design de uma Collection quando o Layout padrão já é suficiente
• Considere usar uma Table (Falaremos deste tópico mais a frente) ao invés de uma Collection quando se tratar de Texto
• Use as mudanças dinâmicas de Layout com cuidado.

5 Image View

Uma Image View é destinada para visualização de imagens, ela automaticamente encaixa a imagem na tela de acordo com o seu tamanho e permite que o usuário de zoom com o movimento de pinça e que ele passe entre as fotos de uma coleção deslizando o dedo sob a tela.

Dica

• Se possível, assegure que cada imagem se ajuste individualmente de acordo com o seu tamanho.

6 Maps

A visualização de mapa mostra a geolocalização do seu aparelho em relação ao mapa. Seu app pode usa-lo por exemplo para mostrar a localização de uma loja.

Dicas

• Mantenha o mapa interativo
• Use cores esperadas pelo usuário (vermelho para o destino, verde para a partida e roxo para um local escolhido pelo usuário)

7 Pages

As animações de transições de páginas fazem parte do conceito de trazer metáforas para o sistema da apple, assim quando se passa um página de um documento no iPhone ou iPad você pode ver a transição que simula um página real sendo folheada.

8 Popovers

Os popovers são telas que aparecem por cima da interface para controlar alguma função específica do app, como criar um novo evento no app Calendário para iPad. Esse comportamento ocorre geralmente em dispositivos de tela muito grande como o iPad, pois o conteúdo do popover é muito pouco para ocupar a tela inteira como é o caso da mesma ação de criar um novo evento no iPhone.

Para sair de um Popover basta tocar qualquer área fora deste.

Dicas

• Evite usar popovers no iPhone
• Salvar automaticamente quando o usuário fechar um popover
• Posicione os popover de forma coerente na tela (Geralmente os popovers surgem de um determinado botão, então ele deve aparecer na tela diretamente do ponto em que foi chamado)
• Mostre um popover por vez
• Não mostre nenhuma tela por cima de um popover (Exceto uma notificação)
• Deixe que o usualio consiga fechar um popover e abrir outro com apenas um toque.
• Evite fazer um popover muito grande.
• Você pode customizar seu popover, só tome cuidado para não fazê-lo parecer outra coisa.
• Gere uma transição suave.

9 Scroll Views

Uma Scroll View e qualquer tela que continua além do que está sendo visualizado no dispositivo, como um texto ou imagem. O usuário navega pela Scroll View deslizando o dedo sob a tela, tocando e com o movimento de pinça.

Dicas

• Faça com que o zoom e os gestos se comportem naturalmente
• Considere mostrar o contador de página quando a Scroll View estiver no modo de Página.
• Não coloque uma Scroll View dentro de outra Scroll View
• Mostre uma Scoll View por vez

10 Split Views

Esta view divide a tela em duas parte para mostrar um conteúdo de configuração, este tipo de visualização foi projetada para o iPad.

Dicas

• Faça um Layout que funcione bem para o seu conteúdo
• Não confunda esta visualização com a função multi tarefa do iPad
• Geralmente se restringe a navegação em apenas um lado da Split Screen por vez
• Enfatize constantemente qual a Split View ativa para o usuário

11 Tables

As tabelas do iOS forma projetadas para mostrar configurações dividida em telas, elas são basicamente o lado esquerdo de uma split view.

Dicas

• Defina uma hierarquia de carregamento do conteúdo menos pesado, como texto, até o mais pesado, como as imagens, o carregamento gradativo dá ideia de velocidade.
• Mostre o progresso enquanto o usuário navega nas camadas das Table Views

12 Text View

Como o nome já diz são vizualizações de texto, é importante pensar em alguns detalhes para o usuário:

• Mantenha o texto legível, evite usar múltiplas fontes e fontes que dificultem a leitura.
• Mostre o teclado certo para cada tipo de conteúdo, por exemplo: se o campo a ser preenchido só precisa de número, então o ideal é mostrar um teclado númerico

13 Web View

As Web Views são mostradas quando um aplicativo acessa um site na internet sem direcionar o usuário para o Safari. Esta prática é boa para manter o engajamento dos usuários do app, quando o seu aplicativo permite que se acesse um conteúdo online sem usar o Safari, é mais fácil que o usuário volte para o app depois de ler o conteúdo.

Destrinchando o Human Interface Guidelines para iOS — # 7 was originally published in Apple Developer Academy | UCB on Medium, where people are continuing the conversation by highlighting and responding to this story.