Guia do Iniciante para o Desenvolvimento iOS A Interface - Parte I
A Apple tem sido uma indústria líder no mundo móvel há anos com suas séries iPhone e iPad. Apesar do hype que pode criar em todos os lançamentos oficiais, ele também detém uma grande parcela das participações de mercado na plataforma móvel, e essa é provavelmente a razão pela qual a maioria dos clientes desejará que seu aplicativo exista na loja de aplicativos da Apple; tornando-se assim a razão para os desenvolvedores aprenderem e desenvolverem o aplicativo para iPhone.
A boa notícia é que o desenvolvimento de aplicativos para iPhone não é tão difícil quanto você imagina, e este post existe como um guia completo para orientá-lo no processo completo de criação de um aplicativo para iPhone..
Estaremos discutindo as razões, fases e ferramentas para desenvolver o aplicativo e, finalmente, você seguirá um tutorial fácil para projetar o aplicativo básico do iPhone usando o Xcode.
Então, se você está aprendendo a negócios ou se você tem uma ideia de aplicativo incrível que pode torná-lo milionário, vamos começar a criar seu primeiro aplicativo para iPhone!
Nota: Você precisará de um computador com sistema operacional Macintosh (Mac OS) para instalação do Xcode, desenvolvimento de aplicativos e envio de aplicativos, não há nenhuma maneira de fazer isso no Windows legalmente.
Por que desenvolver para a Apple?
Eu vejo essa pergunta frequentemente, então quero explicar por que você deveria estar interessado no desenvolvimento do iPhone. Assim como afirmei na introdução, o iPhone atualmente detém uma grande parte das quotas de mercado na plataforma móvel.
Eu acho que essa razão deve ser o suficiente para você aprender a desenvolver o aplicativo do iPhone como se você está desenvolvendo para si ou para os clientes, a maioria das pessoas provavelmente esperam que seu aplicativo possa ser acessado por muitas pessoas no mundo..
Do ponto de vista do desenvolvimento, A Apple gosta de coisas simples, e isso se aplica a seus produtos e estruturas. iOS é o sistema operacional que alimenta todos os dispositivos móveis da Apple. Estes incluem o iPod Touch, iPhone e iPad. Então, tenha em mente que quando você está desenvolvendo aplicativos para iPhone, você pode desenvolvendo para todos os outros dispositivos com o iOS!
Além disso, o que torna o recurso acima ainda maior é o quanto o trabalho de codificação pode ser salvo. Quando você escreve código para o aplicativo do iPhone, usando a mesma linguagem de programação para todos os dispositivos de computação da Apple. Isso significa que quando você está desenvolvendo o aplicativo para iPhone, o aplicativo pode ser posteriormente integrado ao iPad e até mesmo ao Mac..
Objetivo-C é a linguagem de programação principal que alimenta todos os seus frameworks. Junto com o Objective-C, você também desenvolverá o aplicativo para iPhone com o Toque de cacau, a estrutura de programação impulsionando a interação do usuário no iOS.
Isso tudo é apenas um pouco de informação para você começar no desenvolvimento de aplicativos para iPhone. O desenvolvimento é um processo bastante complicado, mas relaxe, vá devagar. Então as razões estão aqui, e a decisão é sua. Quer a resposta seja sim ou não, você pode sempre entrar no próximo tópico: projetando aplicativos para o iPhone.
Planejando sua estrutura de aplicativo do iPhone
Na ideologia padrão de criar um aplicativo para iPhone, você desejará passar por algumas fases. A primeira fase inclui planejamento e desenho.
Primeiro de tudo você precisa ter uma idéia para o que seu aplicativo vai fazer. Por que as pessoas querem baixá-lo? E quais recursos você deseja incluir?? Esta é a fase mais importante, como se você fizesse certo, você economizar muita confusão e problemas na fase de codificação.
Pior, te leva de volta à prancheta de desenho.
Eu recomendo esboçar algumas ideias aproximadas para algumas páginas (ou visualizações) da sua aplicação. Basta desenhar uma forma de retângulo, talvez 5 ou 6 formas em uma folha de papel e, em seguida, desenhar os recursos desejados em cada vista do seu aplicativo.
Você pode pensar em visualizações como páginas diferentes em um website. Cada exibição oferecerá diferentes funcionalidades, como um formulário de login, uma lista de contatos ou uma tabela de dados.
Abaixo, construí uma breve coleção dos diferentes elementos da barra de interface do usuário:
- Barra de status - Exibe o nível de bateria atual do dispositivo, conexão 3G, barras de recepção, operadora de telefone e muito mais. É recomendável que você sempre inclua esses elementos.
- Barra de navegação - Dá aos seus usuários a opção de navegar entre as hierarquias de páginas. Isso geralmente inclui um botão no lado esquerdo da barra para permitir que o usuário retorne à visualização anterior do aplicativo.
- Toolbar - Aparece na parte inferior do aplicativo do iPhone. Isto irá conter alguns ícones ligados a algumas funções como Compartilhar, Baixar, Excluir, etc.
- Barra de abas - Muito semelhante à barra de ferramentas, exceto que agora você está trabalhando com guias. Quando um usuário clica em um ícone de guia, ele é automaticamente destacado e exibe um estado de foco brilhante. Esta barra é usada para alternar entre exibições em vez de oferecer funcionalidade direta.
Esta lista contém apenas as barras de ferramentas que você pode encontrar na maioria dos aplicativos. Há outras visualizações e estilos a serem considerados, que você pode encontrá-los nas Diretrizes de Uso de Elementos da IU da Apple. É altamente recomendável consultar esta documentação quando tiver dúvidas sobre os elementos da interface do usuário do iPhone.
No interesse do tempo, não estarei descrevendo todos os elementos da interface do usuário. Há muitos elementos a serem considerados e você não vai acabar usando todos eles em seu único aplicativo. Mas enquanto você esboça suas opiniões, você pode inspire-se nas diretrizes sugeridas acima e em outros aplicativos do iPhone você gostou de usá-los.
Criando Mockups do Photoshop
Estou assumindo que a maioria de vocês está bastante confortável trabalhando com o Adobe Photoshop. É o primeiro software para criação de gráficos para sites, banners, logotipos e modelos móveis. Projetar gráficos para a Web é um processo bastante simples, mas é um pouco mais complicado quando se trata de design de aplicativos para iPhone.
Se você está procurando construir um aplicativo, você realmente deveria crie designs de maquete com pixels perfeitos desde o início.
Para começar, devemos discutir as configurações do Photoshop. Como estamos projetando para o iPhone, precisamos considerar dois estilos de design diferentes. o a exibição normal do iPhone é de 320 x 480 pixels. No entanto, o iPhone 4 inclui um retina display que duplica a quantidade de pixels dentro do mesmo tamanho de tela. Então você deveria duplique a resolução para 640 x 960 pixels e projetar seus layouts para este padrão.
Isso significa que você também precisará crie 2 conjuntos de ícones para suas maquetes. Originalmente ícones seriam definido para 163ppi mas você precisará incluem ícones com 326ppi para o iPhone 4. Os ícones são tradicionalmente marcados com @ 2x no final do nome do arquivo, como “[email protected]“.
Agora vamos otimizar nossas novas configurações de documento. Primeiro, precisamos editar algumas preferências, portanto, acessar o Photoshop> Editar> Preferências> Guias, Grade e Fatias. Nós estaremos definindo nossa linha de grade a cada 20px com subdivisões em 2. Ao projetar para exibição de retina Linha 2px exibirá 1 ponto na tela. Esta é uma regra importante que você precisa ter em mente para dimensionar seu aplicativo.
Eu costumo achar mais fácil construir meus projetos com maior resolução, em seguida, reduzi-los, mas você pode tente os dois métodos e veja o que melhor se encaixa. Estamos usando 640 x 960 pixels a 326ppi - salve isso como uma predefinição personalizada se você achar que a usará com frequência.
Construindo com elementos de modelo
Agora você pode usar o Photoshop para criar um layout perfeito em pixels por conta própria, mas isso prova ser um trabalho muito exaustivo e tedioso.
Este é um arquivo enorme com muitos elementos. Para facilitar as coisas, você pode pressionar v ativar o Mover Ferramenta e clique no “Auto seleção” na barra de opções, selecione o “Camada” ao invés de “Grupo”. Com as configurações, você pode clicar em qualquer elemento e o Photoshop o levará para sua camada correspondente!
Sinta-se à vontade para brincar com a maquete, ou você pode até criar o protótipo do seu aplicativo a partir do modelo. Dependendo do seu aplicativo, você pode incluir uma série de recursos na área central, muitos dos quais você pode encontrar neste arquivo PSD. Também é possível ir para as camadas desses elementos e editar as fontes, cores de gradiente e outros estilos de design também. Somente certifique-se de não redimensionar nada já que todas as barras e elementos da interface do usuário estão configurados para tamanhos padrão.
Desenvolvendo Aplicativos no Xcode
A ferramenta do desenvolvedor para programação em iOS e Mac OS X é chamada de Xcode. Se você está rodando o OS X Lion, você pode encontrar o Xcode e todos os pacotes aplicáveis gratuitamente no Mac App Store.
Após a conclusão da instalação, inicie o Xcode e sua tela de boas-vindas deve aparecer. A partir daqui, você pode carregar um projeto antigo ou optar por criar um novo. Por enquanto você precisa clicar “Crie um novo projeto Xcode“, então a janela do modelo apresentará algumas opções. Em iOS> Aplicativo, clique em “Aplicativo de visualização única” e acertar “Próximo”. Você pode dar um novo nome ao aplicativo, tal como Teste (de preferência sem espaços), depois no Identificador da empresa, digite qualquer palavra como minha compania, e, finalmente, escolha um diretório e clique em “Salve ”.
O Xcode irá construir o diretório de arquivos e enviar você para uma nova janela para trabalhar. Você deve ver um monte de opções de arquivos listados, mas o pasta que é nomeada após a sua aplicação é o foco principal.
Com o Xcode, você tem duas opções para projetar elementos front-end. O clássico xib / nib O formato é padrão para os aplicativos Mac OS X e iOS, o que exige que você crie uma nova exibição de página a cada vez. No entanto, como você está criando mais visualizações em um único aplicativo, a quantidade de arquivos de nib pode se tornar muito grande, então um novo storyboard O arquivo armazena todas as suas visualizações de ponta em um único painel do editor. A partir daqui, você pode remover e adicionar elementos e recursos da interface do usuário com facilidade.
Além disso, você encontrará .h e .m arquivos no mesmo grupo de pastas. Estes são nomes de arquivos curtos para cabeçalho e implementação código. Esses arquivos são onde você escreve todas as funções e variáveis do Objective-C necessárias para que seu aplicativo seja executado. Pode ser uma boa ideia explicar como o Xcode funciona MVC (Model, View, Controller), qual é a razão pela qual precisamos de 2 arquivos para cada controlador.
Hierarquia de programação MVC
Para entender como o aplicativo funciona, você precisará entender sua arquitetura de programação. Com Model, View, Controller (MVC) como base, O Xcode pode separar todos os seus displays e código de interface de suas funções de lógica e processamento, e não há realmente outra opção para escolher. O MVC pode parecer confuso no começo, mas se você tentar entendê-lo e começar a construir alguns aplicativos básicos, você passará a amar a estrutura.
Para facilitar a compreensão, apresentei cada objeto na lista abaixo:
- Modelo - Mantém toda a sua lógica e dados principais. Isso inclui variáveis, conexões a feeds RSS externos ou imagens, funções detalhadas e processamento de números. Essa camada é completamente separada das suas visualizações para que você possa alterar facilmente as visualizações e ainda ter os mesmos dados funcionando.
- Visão - Um estilo de tela ou exibição em seu aplicativo. Uma lista de tabelas, uma página de perfil, uma página de resumo de artigos, um reprodutor de áudio, um reprodutor de vídeo, são todos exemplos de exibições. Você pode mudar seus estilos e remover elementos, mas você ainda estará trabalhando com os mesmos dados em seu modelo.
- Controlador - Atua como intermediário entre os outros dois. Você conecta objetos em sua visão a um ViewController que passa as informações para e do seu Modelo. Assim, desta forma, é possível que um usuário toque em um botão e registre isso no seu modelo. Em seguida, execute uma função de logout e, através do mesmo controlador, passe uma mensagem “logout com sucesso!”.
Então basicamente o seu modelo contém todas as informações e funções que você precisará exibir em algum lugar na tela. Mas modelos não podem interagir com a tela, somente visualizações. As visualizações são basicamente todas visuais e só podem extrair dados por meio de um ViewController. o O controlador é, na verdade, uma maneira muito mais refinada de ocultar seus dados de back-end do design front-end. Desta forma, você pode renovar o design várias vezes sem perder nenhuma funcionalidade.
Com esse conhecimento, não deve ser difícil começar a criar seus primeiros aplicativos. Como mencionado anteriormente, Objetivo-C é a principal linguagem de programação que você usará para desenvolver o aplicativo. É construído sobre a linguagem C com sintaxe atualizada e alguns paradigmas adicionais. Você vai precisar de muito tempo para se familiarizar com o idioma, mas para a lição iniciante eu recomendo a série tutorial da Mobiletuts.+.
Vista de design com storyboards
Agora que analisamos os aspectos técnicos de um aplicativo, devemos gastar um pouco de tempo projetando a interface. Estou assumindo que você manteve o “Storyboard” opção verificado ao criar o projeto, o que significa que você pode encontrar um único MainStoryboard_iPhone.storyboard arquivo em algum lugar no grupo de pastas localizado no lado esquerdo da janela. Clique no arquivo para selecioná-lo e abra a exibição.
Uma nova barra lateral deve aparecer diretamente à direita do grupo de pastas. Isso é chamado de Esboço do Documento e é uma espécie de método de visualização rápida para verificar todas as visualizações disponíveis neste storyboard.
Queremos começar adicionando apenas alguns elementos de página ao nosso controlador de visualização. Precisamos de dois elementos diferentes: um Barra de navegação e um Barra de abas. Antes de pegá-los, o acesso ao Inspetor de Atributos (Visualizar> Utilitários> Mostrar Inspetor de Atributos) no lado direito da janela e, em seguida, procure Barra de status rótulo. Por padrão, está configurado para Inferido que usa a cor de status padrão do iPhone, mas você também pode escolher Preto ou Preto translúcido se o design do seu aplicativo se encaixa melhor.
A biblioteca de objetos
Se o Serviços de utilidade pública painel no lado direito da janela não é visível, você pode habilitá-lo por acesso a Ver> Utilitários> Mostrar Utilitários. No painel Utilitários, observe a parte inferior de um painel chamado Biblioteca de objetos. Tem um menu drop-down com o “Objetos” como o primeiro item da lista. Se você não conseguiu encontrá-lo, você pode selecionar Exibir> Utilitários> Mostrar biblioteca de objetos.
No menu suspenso da Biblioteca de objetos, localize e selecione Janelas e Barras. Agora clique no Barra de navegação, arraste-o para a janela de visualização e posicione-o diretamente sob o preto Barra de status (com um ícone de bateria). Podemos personalizar a descrição do título da barra agora. Clique duas vezes no texto que atualmente lê “Título“, e você verá um rótulo chamado “Título” no painel Utilitários, no qual você pode alterar a descrição do título para “Teste” de lá. Acertar “Entrar” para testemunhar a mudança.
Novamente no painel Windows & Bars, role a tela para baixo Barra de abas, em seguida, arraste-o para a janela de visualização e coloque-o na parte inferior do aplicativo. Por padrão, esses 2 elementos parecem fantásticos.
Agora, talvez você queira que o gradiente da Barra de Navegação coincida com a barra de guias na parte inferior e, para fazer isso, você pode clicar na Barra de Navegação e olhar para a direita Atributos painel no painel Utilitários. A primeira opção é chamada Estilo, que é definido como Padrão. Alterar o estilo de padrão para Preto opaco e teremos um conjunto de cores correspondente!
Vamos também adicionar outro botão de guia na barra inferior do aplicativo. Mova o cursor do mouse para o painel Janelas e Barras novamente e role para baixo Item da barra de abas, diretamente embaixo da barra de abas. Arraste-o para a janela do aplicativo e coloque-o no meio dos dois botões existentes da barra de guias. Se você clicar duas vezes nesse novo botão, poderá ver algumas opções adicionais no painel Utilitários. imagem e título de lá. Por exemplo, eu mudei o título para “marca páginas” para o item recém-adicionado da Barra de guias.
Portanto, este é um breve tutorial sobre o design de visualizações no Xcode. Não é um processo muito difícil, mas exigirá um pouco mais de tempo para se acostumar com a interface. Jogue com mais alguns elementos se você se sentir confortável, e também pode ir aos Recursos de Desenvolvimento do iOS da Apple para obter mais recursos de aprendizado, nunca é uma coisa ruim descobrir mais!
Fique atento para a parte II
Isso conclui nossa primeira parte do guia para design e desenvolvimento de aplicativos para iPhone. Na próxima parte, vamos mergulhar um pouco mais em Objective-C e Cocoa Touch, e você aprenderá a construir um aplicativo para o iPhone em funcionamento, fique ligado!
Galeria de design do iOS
Para designers que estão por aí, também espero trazer-lhe alguma inspiração, então incluí uma lista de incríveis visualizações de aplicativos para iPhone abaixo. A lista apresenta uma grande variedade de elementos de aplicativos inspiradores que você provavelmente nunca notou antes. Sinta-se à vontade para compartilhar suas ideias, visualizações de aplicativos ou perguntas na seção de comentários abaixo, obrigado!
Divisor de corrida
Satisfação Remota
Tweetbot para iPhone
Reeder
Quadrangular
MailChimp
Joystiq
Piictu
Trevas
