contato@pefsistemas.com.br +55 11 3280-0301

5 Dicas para deixar sua aplicação Ionic com uma aparência melhor

Você já olhou para uma aplicação mobile e se perguntou,

“WOW… parece com o Instagram. O que eles fizeram? Quem fez esse visual?”

A resposta provavelmente é: ninguém.

Frameworks cross-plataforma tornou o desenvolvimento mobile simples e fácil. Como desenvolvedor e arquiteto de software e trabalhando com Ionic já há uns 3 anos, eu encontrei alguns passos simples para deixar a aplicação com uma aparência limpa e bonita.

Então vamos falar das 5 dicas que aplico em minhas aplicações Ionic.

1 Seja seu proprio criador

Se você não é um design (como eu) mas gosta de se divertir com os layouts, o Ionic Creator é uma ótima opção. Ele permite que você vá de forma mais profunda, de forma que você possa:

  • Adicionar múltiplas páginas e funções de clicks
  • Adicionar e editar componentes Ionic
  • Adicionar classes CSS para customização
  • Editar o tema aplicação como um todo
  • Exportar o HTML e Angular (se você estiver usando a conta PRO)

Você pode aproveitar mais um pouco com o Ionic Playground, que permite você editar o código direto e ver o resultado no browser.

2 Faça os componentes do Ionic trabalharem por você

Usando os componentes HTML irá lhe poupar uma boa quantidade de tempo. Porém, os componentes padrões podem rapidamente dar a sua aplicação, uma cara genérica. Você pode criar esses componentes por meio de:

  • Adicionando CSS adicionais para uma ultra customização
  • Influenciando as classes predefinidas do Ionic para fazer o que você precisa

3 Tenha uma pequena ajuda das classes Helper

Classes Helper, ou classes de utilidade, pode ajudar você a mudar aspectos de componentes de forma simples. As classes de utilidade foram melhoradas no Ionic 2, então vamos falar deles separadamente. Para o Ionic 1, as essas classes existem para ajudar a influenciar as cores e o espaçamento (padding). Para o Ionic 2, essas classes podem ser usadas para margem, padding, cores, botões e até para alinhamento de texto. Você também pode implementar um tema e atualizar as cores padrões do Ionic para as cores da sua marca.

Você ainda pode fazer seu próprio Helper e facilmente adicionar ao componente. Meu favorito é criar uma classe para centralizar conteúdo. Você também pode buscar em foruns online e encontrar classes. Por exemplo, I encontrei uma classe chamada item-text-wrap que quebra o texto quando adicionado a qualquer componente Ionic.

4 Use variáveis Sass

Se você ainda não usa Sass, eu recomento fortemente usá-las. Sass tem inúmeros benefícios, um dos quais permite que você altere as variáveis do Ionic globalmente. Então, se você quiser usar seu vermelho favorito e não o padrão #ef473a, você pode fazer com apenas uma linha!

5 Torne parecido com seu OS

Uma das maneiras mais fáceis de fazer um aplicativo parecer melhor para o usuário é dar-lhes uma experiência mais nativa. Embora possa não parecer importante, os usuários se acostumam ao seu sistema operacional e um aplicativo que se parece com o que eles usam é mais fácil de usar e menos chato. Como o Ionic 2 introduziu estilos específicos da plataforma, todos os componentes são originais para iOs, Android e Windows.
Para o Ionic 1, os componentes podem ser alterados para diferentes sistemas operacionais usando a plataforma platform-ios ou platform-android. Estes permitem que você altere o quanto quiser entre os dois para melhorar a experiência.

Para o Ionic 2, uma vez que todos os componentes se mostram como nativos, essas classes não precisarão ser usadas tanto. Essas classes ainda podem ser usadas para pequenos ajustes e aprimoramentos. Os Ionicons também serão alterados com base no sistema operacional de iOs para Material Design, mas isso pode ser facilmente substituído.

 

Comentários

Your Turn To Talk

Leave a reply:

Your email address will not be published.