Dicas para criar layouts elegantes de interface do usuário de aplicativos para iPhone no Photoshop
O design gráfico para a web é uma tendência popular há muito tempo. E com a invenção do iPhone da Apple em 2007, a loja de aplicativos cresceu uma quantidade tremenda. Agora, temos designers e desenvolvedores de aplicativos iOS se unindo para criar algumas concepções realmente fantásticas.
Mas se você não gosta de aprender o Xcode e programar o Objective-C, o Photoshop pode ter mais interesse. Abaixo, vou oferecer algumas das dicas que aprendi para o design de modelos de aplicativos iOS incríveis. E como sempre há novas tendências emergentes, a comunidade de design está constantemente redefinindo como criar aplicativos. Pense nisso como mais um guia de recursos para iniciantes no design de dispositivos Apple.
Configurações apropriadas de documentos
Antes de considerar os elementos da página, você deve entender como os gráficos do iPhone são criados. Na exibição mais recente da retina nos modelos do iPhone 4 / 4S, a tela ainda é medida fisicamente no mesmo tamanho. No entanto, a exibição em pixels é na verdade duplicada do original - o que significa que usamos 640 × 960 na resolução de 326ppi.
Além disso, os ícones do iPhone 3 / 3GS eram geralmente 57 × 57 pixels. As telas do iPhone 4 e 4S usam 114 × 114 por padrão (mas aumentam para resoluções mais antigas). Felizmente, o processo de criação de ícones está bastante distante da criação de um layout de interface do usuário. Mas, como designer, nunca é demais construir as duas habilidades.
Se você usar muito essas configurações, recomendo salvá-las como tamanho de documento predefinido. Na nova janela do documento para o Photoshop, você verá um botão chamado "Salvar predefinição ...". Basta dar um nome a ele e você pode selecioná-lo na lista suspensa toda vez que criar um novo documento.
Em vez de criar os elementos de interface do usuário do iPhone manualmente, o blog Teehan + Lax oferece um download gratuito do kit de interface do usuário especificamente para o Photoshop. Isso inclui uma renderização do iPhone 4, barras superiores, botões, teclados e várias outras coisas úteis. Definitivamente pegue isso primeiro e salve-o em um diretório local onde você tenha acesso fácil a esses elementos.
Personalizar as barras e botões
As áreas superior e inferior do seu aplicativo provavelmente conterão barras de menus. A parte superior é usada para rotular a exibição atual, juntamente com os botões voltar e editar. Geralmente, a parte inferior é de navegação e geralmente usa guias para fazer isso.
Teehan + Lax usa alguns exemplos realmente genéricos para estes. Mas eles são muito mais fáceis de personalizar com suas próprias cores, texturas e qualquer outro colírio para os olhos que você tenha. Como exemplo, vamos pegar a barra da camada de grupo (cinza-azul) e arrastá-la para uma nova janela de documento do tamanho do iPhone. Em seguida, clique no pequeno triângulo à esquerda e abra outro subgrupo chamado Bar Top . Na parte inferior, há uma camada de fundo com um efeito de sobreposição para o gradiente.
Abra FX nesta camada de fundo e clique duas vezes na sobreposição de gradiente. Eu removi as cores padrão da Apple e configurei (da esquerda para a direita) # 3478a7 para # 5eb0e7. Além disso, os dois botões terão que perder seus gradientes - para esses, usei os valores # 052b50 a # 044a8e para um rico efeito escuro.
Diversão com Texturas
Você pode dizer apenas por essas pequenas alterações de gradiente que personalizar seu aplicativo é uma tarefa bastante simples. Para um pouco de detalhes, podemos adicionar uma textura ou padrão sobre a área de gradiente da barra. Iremos com algumas faixas inclinadas para este exemplo de demonstração.
Comece criando um novo documento 7 × 7 pixels com um fundo transparente. Em seguida, defina sua ferramenta de lápis na menor escala (1px por 1px) e conecte-se do canto superior direito ao canto inferior esquerdo. Usei o preto HEX # 000000, mas isso não deve importar, pois você sempre pode mudar a cor mais tarde. Confira a captura de tela abaixo se você não seguir:
Agora clique em Editar -> Definir Padrão ... e dê um nome a ele, depois clique em Salvar. Sinta-se à vontade para fechar a janela agora (sem salvar), pois tudo o que precisávamos era do padrão. Agora, de volta ao grupo superior da barra, crie uma nova camada acima do plano de fundo. CMD + clique ou CTRL + clique na máscara de vetor que selecionará toda a barra de gradiente de fundo.
Mas não se esqueça de clicar novamente na nova camada recém-criada, para que fique destacada em azul. Vamos preenchê-lo com esse novo padrão, mas queremos ver apenas listras sobre o gradiente da barra superior (e abaixo dos botões). No menu superior, vá para Editar -> Preenchimento e selecione "Padrão" no menu suspenso. Na caixa abaixo, você deve selecionar o último padrão pontilhado e pressionar OK.
As linhas parecem bastante rígidas no começo. Assim, nas paletes de camadas, reduza o preenchimento para cerca de 20% do valor. Também podemos mudar o modo de mesclagem para Overlay, para que as barras fluam com as cores gradientes. Reduza o zoom para 100% e confira o efeito incrível!
Você pode criar outra textura agradável configurando um documento de 3 por 3 e preenchendo um símbolo de mais. Adicionei um exemplo acima de como isso muda a aparência do gradiente da barra superior de maneira tão dramática. Você também pode tentar alterar a cor do preto puro para o branco puro #FFFFFF.
Ícones da barra de guias
Os botões de navegação encontrados na parte inferior do seu aplicativo são cruciais para a experiência geral do usuário. Os usuários precisam descobrir onde editar as configurações, como executar tarefas e o que fazer no seu aplicativo rapidamente. Caso contrário, eles geralmente ficam frustrados ou entediados e param de tentar. Então, como mais uma dica, vamos aprimorar a área de navegação na barra inferior.
Usando o mesmo arquivo PSD da GUI do iPhone 4, localize o grupo "barra de guias". Lembre-se de que você pode fazer isso CMD / CTRL + clicando no bloco no Photoshop. Semelhante à barra superior, podemos editar o gradiente de FX em segundo plano para alguns estilos correspondentes. Mas, como alternativa, o gradiente padrão preto combina bem com a maioria dos esquemas de cores.
Para alguns ícones, eu recomendo o conjunto de retina do Grupo de Trabalho, que vem em 24px, 48px e 64px. Cada um dos ícones do PSD da GUI possui estilos de camada FX aplicados - basicamente uma sombra clara e um gradiente de sobreposição. Esses pequenos detalhes realmente agregam um design fantástico, portanto preste muita atenção aos seus pixels. Tente usar este designer de esquema de cores se você estiver tendo problemas.
Você deve pensar em como os rótulos de texto afetarão a experiência do usuário. Se você achar que os ícones das guias são suficientes, o texto da etiqueta pode atrapalhar. No entanto, é importante manter suas opções em aberto e brincar com algumas idéias diferentes. Tente obter as opiniões de amigos e colegas de trabalho para ver qual método é melhor para o seu aplicativo.
Outra técnica bastante popular é que os designers de aplicativos criem um botão central dividindo a barra de guias em 5 slots. Eu já vi muitas aplicações realmente criativas usando esse design para economizar espaço e adicionar um pouco de elegância à navegação. Formspring é um exemplo, eu adicionei a tela abaixo.
Links úteis
- Conjunto de ícones de glifos
- Projetar um aplicativo para banco do iPhone no Photoshop [Tutorial]
- Crie aplicativos para iPhone no Photoshop [PDF]
- Coleção útil de ferramentas e recursos para desenvolvedores de aplicativos para iPhone / iPad
- Dicas e recursos de usabilidade do iOS para aplicativos para iPhone e iPad
- Como criar seu primeiro aplicativo para iPhone
Conclusão
Essas estratégias para trabalhar com aplicativos iOS e Adobe Photoshop serão úteis à medida que você desenvolver seus sentidos de design. Os aplicativos móveis são um jogo totalmente diferente em comparação com sites e logotipos. Lembre-se disso durante todo o processo, pois você aprenderá constantemente novas técnicas.
Junto com os links adicionados acima, você deve se sentir muito mais confortável em avançar com o design da interface do aplicativo. As maquetes de layout são sempre difíceis e exigem tempo para criar e estudar. Mas se você tiver dedicação suficiente, o mercado móvel é possivelmente a área mais próspera a ser. Se você tiver perguntas ou comentários adicionais, informe-nos na área de discussão abaixo.
