<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Pedro Calado</title>
    <description>The latest articles on DEV Community by Pedro Calado (@pedrohcalado).</description>
    <link>https://dev.to/pedrohcalado</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F743191%2Fa945fa4f-86cc-437b-99fb-bbab45e33c02.jpeg</url>
      <title>DEV Community: Pedro Calado</title>
      <link>https://dev.to/pedrohcalado</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pedrohcalado"/>
    <language>en</language>
    <item>
      <title>Princípios de Design da Apple para iOS</title>
      <dc:creator>Pedro Calado</dc:creator>
      <pubDate>Mon, 22 Nov 2021 17:57:27 +0000</pubDate>
      <link>https://dev.to/vaivoa/principios-de-design-da-apple-para-ios-5baa</link>
      <guid>https://dev.to/vaivoa/principios-de-design-da-apple-para-ios-5baa</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1bV5d3xh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjj798xjj1wmemi4ypy4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1bV5d3xh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjj798xjj1wmemi4ypy4.png" alt="Human Interface Guidelines" width="880" height="783"&gt;&lt;/a&gt;&lt;br&gt;
 Por trás de todo bom aplicativo no ecossistema da Apple, que possuem excelente &lt;em&gt;user experience,&lt;/em&gt; estão boas práticas e padrões de design fornecidos pela própria Apple para cada um dos seus dispositivos, o &lt;a href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/"&gt;Human Interface Guidelines&lt;/a&gt; (HIG). Desde o design dos ícones até a interação dos usuários com objetos de realidade aumentada, a ideia do HIG é fornecer padrões para que o time de produto como um todo, desde designers até desenvolvedores, consiga entregar produtos extraordinários, que os usuários gostem de usar, que sejam bonitos e simples ao mesmo tempo.&lt;/p&gt;

&lt;p&gt;Neste artigo, vamos tratar especificamente do guia de design para iOS, trazendo um overview dos princípios do guia e alguns pontos essenciais que temos que levar em consideração ao projetarmos nossas aplicações.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que faz o iOS ser único na visão da Apple
&lt;/h2&gt;

&lt;p&gt;Existem 3 princípios que norteiam e diferenciam o iOS das demais plataformas de acordo com a Apple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Clareza&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;O foco do design deve ser em guiar o usuário de maneira simples e intuitiva. Textos legíveis, ícones precisos, adornos sutis e apropriados, tendo como fim principal a funcionalidade, todas essas características fazem o iOS ser diferente. Quando você precisa enviar uma mensagem, compartilhar uma foto ou até mesmo saber se uma funcionalidade está ativa ou não, você consegue facilmente identificar o que cada ícone faz, trazendo clareza para o usuário.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--40P_x64c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvuhr1o15x7itz47qrlo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--40P_x64c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvuhr1o15x7itz47qrlo.png" alt="Exemplo de ícones" width="880" height="346"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Deferência&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Se olharmos o significado da palavra deferência no dicionário, encontraremos algo como "atitude de respeito e consideração a um superior ou a pessoa mais velha". E aqui a ideia é exatamente essa: o design deve realçar o conteúdo, sendo este o mais importante e o que deve ser destacado. O design deve "trabalhar" para o conteúdo. Como exemplo, quando temos um fundo borrado, o conteúdo que não está borrado é pra onde nosso foco vai, fazendo com que foquemos no que realmente importa.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iL7WCyBQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3x7u9p9knr9nhc7qlwl.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iL7WCyBQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3x7u9p9knr9nhc7qlwl.jpeg" alt="Exemplo de foco no conteúdo" width="750" height="1334"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Profundidade&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A ideia aqui é que sua aplicação seja dividida em camadas, tendo uma certa hierarquia que facilita o usuário ao navegar pelas informações, com transições entre telas que forneçam um senso de profundidade e permitam que o usuário acesse funcionalidades sem perder o contexto.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PS1HqGkY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q70s64fhw4qyqnqgmfhq.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PS1HqGkY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q70s64fhw4qyqnqgmfhq.jpeg" alt="Exemplo de camadas" width="750" height="1334"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Princípios de Design
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Integridade Estética
&lt;/h3&gt;

&lt;p&gt;Esse ponto se refere ao quão bem a aparência e comportamento de um app se comunica com a sua funcionalidade. Uma aplicação crítica, como, por exemplo, que faz o controle de um sistema aéreo, deve focar em ter comportamentos previsíveis, evitando inserir elementos essencialmente estéticos que só trarão ruídos e não acrescentarão funcionalidade. Já uma aplicação mais imersiva como um jogo, por exemplo, deve possuir uma aparência mais cativante e até usar comportamentos imprevisíveis, permitindo que o usuário faça descobertas enquanto usa o app.&lt;/p&gt;

&lt;h3&gt;
  
  
  Consistência
&lt;/h3&gt;

&lt;p&gt;Consistência se refere a fazer com que o app funcione da maneira com que o usuário espere que ele se comporte, trazendo padrões de gestos familiares, usando elementos já fornecidos pelo sistema, ícones (como ícones de lixeira, compartilhamento, etc.) e palavras conhecidas. De maneira geral, os usuários de smartphones já adquiriram hábitos de utilização que são difíceis de mudar, então devemos ao máximo tentar manter esses comportamentos. &lt;/p&gt;

&lt;h3&gt;
  
  
  Manipulação Direta
&lt;/h3&gt;

&lt;p&gt;O ponto aqui é fazer com que o usuário possa ver alterações imediatas ao interagir com o app, seja rotacionando o celular ou interagindo com gestos e toques no conteúdo da tela.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--APEiNr16--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai8rm3v6wrd6shqc9z24.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--APEiNr16--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai8rm3v6wrd6shqc9z24.gif" alt="Gif de gesto para acessar a home no iPhone" width="700" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Feedback
&lt;/h3&gt;

&lt;p&gt;O feedback corresponde a manter os usuários informados sobre suas ações como, por exemplo, por meio de indicadores de progresso do download de arquivos, sons, alertas e a vibração do celular que ajuda o usuário a identificar o resultado de suas interações com o dispositivo e suas aplicações.&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HzfMCUnO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rr269hu9xoz0q6u8y6p.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HzfMCUnO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rr269hu9xoz0q6u8y6p.jpeg" alt="Indicador de loading e progresso" width="750" height="1334"&gt;&lt;/a&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2fBrQtwz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3xahy3mzaqv5mbgmk7s.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2fBrQtwz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3xahy3mzaqv5mbgmk7s.jpeg" alt="Silent mode ativado" width="750" height="1334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Metáforas
&lt;/h3&gt;

&lt;p&gt;Metáforas são como uma digitalização de algo da vida real. Desde ícones dos apps, como o ícone do app de e-mail que representa uma carta, até aplicativos como o de gravação de áudio que simula as frequências conforme a intensidade do som gravado.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FT6Qp-3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d5t4ymdkg87odbcleer.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FT6Qp-3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d5t4ymdkg87odbcleer.jpeg" alt="Frequência de sons" width="750" height="1334"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Pw3fbBHE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21sbaw86op8mwxzw57kb.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Pw3fbBHE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21sbaw86op8mwxzw57kb.jpeg" alt="Ícones usando metáforas" width="750" height="1334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Controle do Usuário
&lt;/h3&gt;

&lt;p&gt;A ideia aqui é que o usuário esteja no comando, e não os apps. As aplicações devem guiar o usuário, alertar sobre erros, dar feedback, mas nunca ter o controle. Por exemplo, uma aplicação que requer o uso da localização, como o Google Maps, solicitará ao usuário permissão para usar esse dado, explicando a necessidade dessa utilização. Com isso, o usuário está no controle, o que dá ao app certa confiabilidade.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DrXBjIyg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfwhep6smjp55uh1c8hy.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DrXBjIyg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfwhep6smjp55uh1c8hy.jpeg" alt="Google maps solicitando uso da localização" width="750" height="1334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Esses são os princípios que guiam o design dos produtos da Apple e o que fazem, de acordo com eles, o iOS diferente das demais plataformas em termos de &lt;em&gt;user experience&lt;/em&gt;. No meu ponto de vista, ficou claro que o usuário é ponto principal em tudo o que fazem, mantendo-o no centro das decisões e fornecendo ferramentas que vão facilitar o uso das aplicações e trazer conforto e confiança.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__user ltag__user__id__743191"&gt;
  
    .ltag__user__id__743191 .follow-action-button {
      background-color: #000000 !important;
      color: #ffffff !important;
      border-color: #000000 !important;
    }
  
    &lt;a href="/pedrohcalado" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7WqJJnXb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--jMtztxAn--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/743191/a945fa4f-86cc-437b-99fb-bbab45e33c02.jpeg" alt="pedrohcalado image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/pedrohcalado"&gt;Pedro Calado&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/pedrohcalado"&gt;Software Developer 👨🏻‍💻  | 
Always learning and sharing.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
.&lt;br&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KAgiXlrF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8bndcx2jkn1jz1dy98v.png" alt="linha horizontal" width="880" height="3"&gt;

&lt;h2&gt;
  
  
  Disclaimer
&lt;/h2&gt;

&lt;p&gt;A VaiVoa incentiva seus Desenvolvedores em seu processo de crescimento e aceleração técnica. Os artigos publicados não traduzem a opinião da VaiVoa. A publicação obedece ao propósito de estimular o debate.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QJQcNDAe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wmziqv74ghhgyi9p0om.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QJQcNDAe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wmziqv74ghhgyi9p0om.png" alt="logo vaivoa" width="548" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ios</category>
      <category>design</category>
      <category>vaivoa</category>
    </item>
  </channel>
</rss>
