Aula_06

Prévia do material em texto

DESENVOLVIMENTO NATIVO
AULA-6 ASPECTOS DE DESIGN DA PLATAFORMA iOS
INTRODUÇÃO
A plataforma iOS é uma das principais plataformas do mercado e um rigoroso processo de avaliação da aplicação antes de ser disponibilizada na sua loja virtual. 
Dentre os critérios de aceitação da app é necessário atenda as diretrizes contidas no guia de interface da Apple. 
Uma das principais causas de rejeições de aplicações na App Store se deve a violação as diretrizes contidas nessa guia.
INTRODUÇÃO
A Apple disponibiliza aos seus desenvolvedores um guia de design para as suas diversas plataformas. Cada plataforma possui um guia específico. 
Fonte: https://developer.apple.com/design/
CONCEITOS BASE DE DESIGN DA PLATAFORMA iOS
Clareza (Clarity)
Deferência (Deference)
Profundidade (Depth)
CLAREZA (Clarity) 
Tornar os elementos da tela óbvias.
Textos legíveis.
Uso de ícones óbvios.
Telas descritivas.
Significado em cores.
Fonte: https://designcode.io/iosdesign
DEFERÊNCIA (Deference)
Trata sobre a importância do conteúdo sobre a UI. 
Foco no conteúdo, a UI deve atuar com um papel de suporte.
Simplicidade
Maximização do conteúdo
Cores para diferenciar funcionalidade dos elementos da UI 
Tipografia para auxiliar no preenchimento da tela.
Espaços negativos para por foco no conteúdo.
Ícones de estados (outline e fill mode)
Fonte: https://designcode.io/iosdesign
PROFUNDIDADE 
Ideia de tudo deve ser contextual e transitório.
Sensação de progresso e distância/profundidade.
Interface transitória através de detalhamento/zoom-in.
Fundo translúcido e borrado (blurred)
Uso de animações
Uso de gestos
Uso de sons
Fonte: https://designcode.io/iosdesign
3 REGRAS IMPORTANTES DE DESIGN PARA iOS
Fonte: https://designcode.io/iosdesign
Projetar a interface 
para toque
Legibilidade
Layout adaptativo
iOS HUMAN INTERFACE GUIDELINES (iOS HIG)
Descreve um conjunto de recomendações e princípios para a construção de UI e UX para apps iOS.
Apresenta os conceitos básicos de UI Design, entre outros. 
O objetivo desse guia é auxiliar o desenvolvedor a seguir o padrão e a qualidade requeridas pela Apple no desenvolvimento de apps para iOS.
iOS HUMAN INTERFACE GUIDELINES (iOS HIG)
É composto por uma série de textos, fotos e vídeos. 
Trata cada parte do desenvolvimento do aplicativo, desde a anatomia de uma app para iOS, ícones, estrutura de navegação, interatividade, animações, gestos, cores e tipografias.
Aplicativos bem estruturados com bom visual gráfico proporcionam melhor experiência aos usuários.
iOS HUMAN INTERFACE GUIDELINES (iOS HIG)
PRINCÍPIOS DE DESIGN DO iOS
Corresponde a um conjunto de recomendações onde destaca-se a importância de uma interface para a forma como os usuários pensam, trabalham ao invés de dar ênfase nas capacidades do dispositivo.
“Uma interface bonita, intuitiva, atraente melhora as funcionalidades e inspira a emoção positiva existente nos usuários.”
PRINCÍPIOS DE DESIGN DO iOS
Integridade estética
Consistência
Manipulação direta
Feedback
Metáforas
Controle do Usuário (User Control)
PRINCÍPIOS DE DESIGN PARA iOS
Integridade estética
Representa como a aparência e o comportamento integram com as funcionalidades de uma app.
Consistência
Uma app consistênte implementa padrões familiares e paradigmas através do uso de elementos de interface, ícones conhecidos, estilos de textos padronizados, e terminologia uniforme. 
A app incorpora características e comportamentos esperados pelos usuários.
PRINCÍPIOS DE DESIGN PARA iOS
Manipulação direta
A manipulação direta do conteúdo na tela envolve o usuário e facilita o seu entendimento. 
A UX de manipulação direta ocorre quando o usuário gira a tela ou faz uso de gestos afetam o conteúdo na tela. 
Através da manipulação direta pode-se ver imediatamente resultados visíveis de suas ações.
PRINCÍPIOS DE DESIGN PARA iOS
Feedback
O feedback reconhece as ações e exibe resultados para manter o usuário informado. 
As apps do iOS fornecem um feedback perceptível em resposta a toda ação realizada pelo usuário. 
Elementos de interação são rapidamente destacados quando tocados, indicadores de progresso comunicam a situação de operações de longa execução, e animações e audio ajudam a tornar claro os resultados das ações.
PRINCÍPIOS DE DESIGN PARA iOS
Metáforas
As pessoas aprendem mais rapidamente quando um objeto virtual e uma ação de uma app são metaforicamente familiares a experiência vivida no mundo real ou virtual. 
Metáforas funcionam bem no iOS porque pessoas interagem fisicamente com a tela. Elas movem elementos visuais para fora do caminho para expor o conteúdo por baixo, arrastam e swipe conteúdo, alternam switches, movem sliders, rolam valores através de pickers, flick através de páginas de livros e revistas.
PRINCÍPIOS DE DESIGN PARA iOS
Controle do Usuário (User Control)
Os usuários estão no controle, não as apps.
Uma app pode sugerir o curso de um ação ou avisar sobre os perigos consequentes de uma ação, mas uma boa app deve balancear entre permitir o usuário e evitar que o indesejado aconteça. 
Uma app pode permitir que seus usuários sintam como se estejam com o controle através da manutenção de elementos de interação familiares e previsíveis, confirmando ações destrutivas e fazendo com uma operação seja facilmente cancelada, mesmo que estejam a caminho.
TIPOGRAFIA (Typography)
Se refere aos padrões utilizados para definir elementos visuais de fonte de textos para torná-los mais legíveis em uma tela.
O iOS adota uma fonte como padrão em suas versões, porém também suporta qualquer fonte True Type (.ttf), porém deve-se ter atenção a licença de uso.
Fonte: https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
TIPOGRAFIA (Typography)
TIPOGRAFIA (Typography)
Fonte padrão do sistema
A fonte padrão do sistema iOS anterior a versão 9 é a "fonte Helvetica Neue".
A versão 9 do iOS introduziu uma nova fonte chamada "San Francisco" como fonte padrão do sistema, substituindo a fonte "Helvetica Neue".
TIPOGRAFIA – A fonte San Francisco
Fonte: http://www.webdesignerdepot.com/2014/11/is-apples-san-francisco-the-future-of-typography-on-osx/
San Francisco
Helvetica Neue
DIN
TIPOGRAFIA (Typography)
A fonte San Francisco
Formatos básicos:
SF UI Display
Utilizada para os componentes da UI.
SF UI Text
Utilizada para textos longos. 
Possui um maior espaçamento entre as letras.
Categorias:
Para sistemas iOS e OS X
Para relógios (watch)	
TIPOGRAFIA (Typography)
A árvore da família da fonte San Francisco
Fonte: https://developer.apple.com/videos/play/wwdc2015/804/
Apple Watch
Apple iOS e OS X
TIPOGRAFIA (Typography)
SF Compact x SF
Fonte: https://developer.apple.com/videos/play/wwdc2015/804/
SF Compact
SF
DETALHES DURANTE O DESIGN DE INTERFACE PARA O iOS
Espaçamento dos botões
Deixar os botões com um bom espaço, principalmente se houver outros botões ao lado, para evitar que o usuário toque no lugar errado.
Fonte: https://macmagazine.com.br/2012/01/24/design-de-interface-para-ios-atencao-aos-detalhes/#disqus_thread
DETALHES DURANTE O DESIGN DE INTERFACE PARA O iOS
Transições
Mantenha transições suaves entre telas ou ações, bem como de acordo com o contexto da aplicação.
Se um botão tem uma seta para a direita, por exemplo, o ideal é que a tela a ser exibida venha da direita.
Fonte: https://macmagazine.com.br/2012/01/24/design-de-interface-para-ios-atencao-aos-detalhes/#disqus_thread
DETALHES DURANTE O DESIGN DE INTERFACE PARA O iOS
Sombra em textos
O texto existente numa tela é importante. Para que tenha um certo destaque ele deve contrastar com o fundo para facilitar a leitura.
O uso de sombras no próprio texto permite adicionar um efeito atrativo e destaca o texto na tela.
Fonte: https://macmagazine.com.br/2012/01/24/design-de-interface-para-ios-atencao-aos-detalhes/#disqus_thread
DETALHES DURANTE O DESIGN DE INTERFACE PARA O iOS
Use guias na diagramação da tela 
As guias (grid) existentes na aplicação de desenho da interface tem como objetivobalancear/equilibrar os elementos na tela. 
Uma boa diagramação é importante para diferenciação da app em relação ao design da interface.
Fonte: https://macmagazine.com.br/2012/01/24/design-de-interface-para-ios-atencao-aos-detalhes/#disqus_thread
CONCLUSÕES SOBRE A PLATAFORMA
O iOS é uma das plataforma dominantes do mercado. Sua filosofia prima pela excelência na apresentação gráfica e experiência do usuário, para isso criou um conjunto de diretrizes para apoiar desenvolvedores no projeto da UI.
O projeto da UI deve atender as diretrizes estabelecidas pela Apple como critério para disponibilização de uma app na Apple Store.
A Apple publicou um guia de design e um guia de interface humana para suas plataformas.
CONCLUSÕES SOBRE A PLATAFORMA
Possui um conjunto de conceitos, regras e princípios para apoiar o design de apps.
 A tipografia é ressaltada para dar ênfase ao conteúdo da app.