DEV Community

Cover image for Onboarding UI Screen em Flutter
Joabe Ramone
Joabe Ramone

Posted on • Updated on

Onboarding UI Screen em Flutter

ūüöÄQuer aprender FLUTTER do Zero ao Profissional? ūüĎČhttps://go.hotmart.com/O70564427D

1 Introdução

Eai clan, tudo certo?

Hoje venho falar daquelas telas de abertura que sempre aparece quando acabamos de instalar um App, eu sempre confundia ela com o Splash Screen, mas tem bastante diferença. O Splash Screen acaba sendo a porta de entrada e o Onboarding é a recepção que irá orientar o usuário do App.

√Č como na vida real. Imagine que voc√™ entra em uma loja para comprar um produto e n√£o sabe por onde come√ßar. Geralmente chega algum vendedor para te orientar onde fica os produtos na loja. No digital √© a mesma coisa!

Ent√£o vou apresentar algumas boas pr√°ticas e como pode estar implementando em Flutter com e sem biblioteca.

N√£o esque√ßa de deixar sua curtida, me ajuda muito a sempre produzir conte√ļdo. Boa leitura!

2 Boas praticas UI

Onboarding é uma experiência de desembalagem virtual que ajuda os usuários a começar a usar um aplicativo, é um conceito de embarcar ou até mesmo de se introduzir no contexto.

Então temos três tipos de Onboarding para usar: a auto-seleção, início rápido e benefícios para o usuário principal.

2.1 Modelo de auto-seleção

O modelo Self-Select(auto-seleção) permite que os usuários personalizem sua experiência de primeira execução, fazendo uma pequena série de escolhas.

auto-select

As op√ß√Ķes devem:

  • Ser significativo e percept√≠vel
  • Fornecer novas informa√ß√Ķes
  • Ser breve
Significativo e perceptível

Nesse modelo tem op√ß√Ķes que v√£o ter um impacto significativo e percept√≠vel na experi√™ncia do usu√°rio. Isso ensina aos usu√°rios como interagir com sua interface.

Nfazer

fazer

Seja breve

Limite as op√ß√Ķes a uma tela ou fa√ßa com que v√°rias telas pare√ßam estar conectadas umas √†s outras.

Cada tela deve ter menos de dez op√ß√Ķes.

breve

Ao projetar a integração, pense em como o processo de integração se conecta à experiência de primeira execução do usuário. Após a integração, os usuários devem chegar a uma tela que facilite a ação sobre o que acabaram de aprender.

2.2 Modelo de início rápido

Neste modelo os usuários acessam diretamente a interface sem nenhum modelo de integração mostrado (além de login e configuração).

O modelo de início rápido:

  • Permite que os usu√°rios iniciem rapidamente com a funcionalidade central do aplicativo
  • Frequentemente prioriza a primeira a√ß√£o-chave
  • Tamb√©m pode fornecer uma maneira opcional de aprender mais ou pedir ajuda
Dê aos usuários algo para fazer

Em vez de deixar os usuários em uma tela em branco, sua interface deve encorajar a interação.

fazer

Priorize a primeira ação-chave

Escolha a a√ß√£o mais intimamente ligada ao engajamento nos primeiros sete dias. Como alternativa, introduza a funcionalidade principal como dicas para a√ß√Ķes que o usu√°rio n√£o tentou.

chave

Oferecer ajuda

Se parecer que o usuário não tem certeza de como usar o aplicativo no final da experiência média de primeira execução (90% do caminho até a primeira sessão), exiba um SnackBar de IU oferecendo a oportunidade de aprender como usar o aplicativo.

ajda

2.3 Modelo de benefícios para o usuário principal

O modelo de integração Principais benefícios para o usuário contém um breve carrossel de reprodução automática, ou storyboard animado, que destaca os principais benefícios de usar um aplicativo.

Escolhendo os benefícios certos

O modelo de Principais benef√≠cios para o usu√°rio deve demonstrar at√© tr√™s benef√≠cios principais de usar o aplicativo. Esses benef√≠cios devem posicionar o aplicativo como relevante e pessoal durante um momento importante, em vez de fornecer instru√ß√Ķes ou descrever recursos.

Ao identificar quais benefícios apresentar, considere:

  • Problemas que o aplicativo resolve
  • Os principais benef√≠cios que o aplicativo cria
  • Os ‚Äúrecursos de escova de dentes‚ÄĚ do aplicativo (ou seja, um recurso que voc√™ usaria uma ou duas vezes por dia)
Op√ß√Ķes de integra√ß√£o

Carrossel de rotação automática
No m√°ximo tr√™s ilustra√ß√Ķes devem girar automaticamente a cada dois a tr√™s segundos e exibir a navega√ß√£o de pagina√ß√£o. Avance automaticamente a primeira tela mais rapidamente para que fique claro que n√£o √© uma √ļnica tela. O recurso de avan√ßo autom√°tico deve ser desativado se o usu√°rio tocar no carrossel.

Exiba um bot√£o ‚ÄúCome√ßar‚ÄĚ em toda a anima√ß√£o e percorra-a continuamente at√© que a a√ß√£o ‚ÄúCome√ßar‚ÄĚ seja tocada.

A tela deve ser habilitada para deslizar, seja para frente ou para tr√°s.

VIDEO DE EXEMPLO

O bot√£o e a navega√ß√£o de pagina√ß√£o s√£o fixos. A tipografia √© din√Ęmica e em um campo separado da ilustra√ß√£o, mas ao mesmo n√≠vel.

Melhores Pr√°ticas
Manter a continuidade visual

Mantenha a continuidade visual em todos os personagens, ambientes, estilo, tipografia e cores dos bot√Ķes.

visual

Simplificar

Simplifique o visual para o essencial necess√°rio para transmitir um conceito.

simplificar

N√£o seja literal de IU

Não mostre a IU do aplicativo se os usuários ainda não a experimentaram. Mostre o benefício do usuário primeiro.

Voc√™ pode exibir informa√ß√Ķes sobre a IU espec√≠fica em um contexto posterior.

literal

Design onboarding que se conecta a uma experiência de primeira execução. A IU vista após a integração deve tornar mais fácil para os usuários agirem de acordo com o que acabaram de aprender.

Projeto

O design dos Principais benefícios para o usuário deve complementar a redação. Se houver uma ideia que pode ser melhor expressa por meio de palavras, use texto em vez de imagens.

Esses layouts são projetados para permitir uma ilustração com proporção de 1: 1 para caber consistentemente em telas em todas as plataformas. Certifique-se de que o plano de fundo e a cor do texto atendam às taxas de contraste mínimas para acessibilidade.

Retrato de celular e tablet

Coloque a c√≥pia e as intera√ß√Ķes alinhadas ao centro abaixo da ilustra√ß√£o.

alinhamento

√Ārea de Trabalho

Coloque ilustra√ß√£o, c√≥pia e intera√ß√Ķes em um cart√£o centralizado. Exiba os bot√Ķes ‚ÄúPr√≥ximo‚ÄĚ e ‚ÄúAnterior‚ÄĚ ao lado deste cart√£o e os indicadores de pagina√ß√£o abaixo dele.

area

3 Implementação

Vamos criar um exemplo comum de onboarding, onde é apresentado quais os beneficios do aplicativo e tela de apresentação, para um restaurante entregar seus pedidos. Quando o usuário passar por essa sessão, ela não será mais apresentada para ele ao inicializar o aplicativo.

3.1 UI

Eu fiz o mockup pensando nos principios do modelo de benef√≠cios para o usu√°rio principal, ent√£o ele tem uma figura centralizada com um t√≠tulo e uma breve descri√ß√£o. E as a√ß√Ķes para passar o slide ou pular a introdu√ß√£o.

Alt Text

Alt Text

Alt Text

3.2 Importar bicliotecas

No arquivo pubspec adicione a biblioteca shared_preferences para guardar a variavel que vai nos dizer se tem que mostrar a tela de onboarding, e importe as imagens que ser√° utilizada.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6
flutter:
  uses-material-design: true
  assets:
    - assets/
Enter fullscreen mode Exit fullscreen mode

3.2 Criar Interfaces

Pra gente controlar o fluxo de tela, se deve ou não aparecer a sessão de onboarding. Vamos fazer uma simples verificação para saber se vamos chamar a página inicial ou a tela de onboarding.

Eu criei alguns widgets para facilitar montar a interface, então dê uma olhada na pasta widgets do projeto no GitHub.

Então o primeiro passo é:

1 - Criar a função que vai fazer verificação se o usuário já passou pela onboarding, na classe Main;


_initAppVerificaSeEstaAtivo() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    final ativo = prefs.getBool(_ativoVar) ?? false;

    setState(() {
      _ativo = ativo;
    });
  }

Enter fullscreen mode Exit fullscreen mode

2 - Criar as telas HomeScreen e OnboardingScreen e adicionar a essa verificação na Main;


_ativo ? HomeScreen() : OnboardingScreen(),

Enter fullscreen mode Exit fullscreen mode

3 - Na tela OnboardingScreen vamos criar as variaveis;


final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;


Enter fullscreen mode Exit fullscreen mode

4 - criar a função responsável por setar nossa variável para ativar ou desativar o onboarding;

  _setEstado() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool ativo = prefs.getBool('ativo') ?? false;

    if (!ativo) {
      await prefs.setBool('ativo', true);
    }
  }

Enter fullscreen mode Exit fullscreen mode

5 - depois a função de dar next da PageView;

  void proximoCard() {
    _pageController.nextPage(
        duration: Duration(seconds: 1), curve: Curves.easeIn);
  }

Enter fullscreen mode Exit fullscreen mode

6 - depois a função que vai redirecionar para tela inicial e chamar a função _setEstado().


  void irParaPaginaInicial() {
    Navigator.pushReplacement(
        context, MaterialPageRoute(builder: (context) => HomeScreen()));

    _setEstado();
  }


Enter fullscreen mode Exit fullscreen mode

7 - a estrutura base da tela vai ser essa;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFF7CD),
      body: SafeArea(
        child: Stack(children: [

          //Adicionar os elementos aqui

        ]),
      ),
    );
  }

Enter fullscreen mode Exit fullscreen mode

8 - as figuras;

PageView(
            controller: _pageController,
            onPageChanged: (int page) {
              setState(() {
                _currentPage = page;
              });
            },
            physics: ClampingScrollPhysics(),
            children: [
              CustomSlider(
                imagem: 'assets/onboarding-image-1.png',
                titulo: 'Sua Comida favorita',
                texto:
                    'Almoço, janta, cafézinho da manhã ou da tarde. A qual quer horário para atendimento.',
                acaoBotao: 'CONTINUAR',
              ),
              CustomSlider(
                imagem: 'assets/onboarding-image-2.png',
                titulo: 'Você recebe no conforto de onde estiver',
                texto:
                    'Seu pedido é atendido pelo restaurante mais próximo, que leva tudo pra você.',
                acaoBotao: 'CONTINUAR',
              ),
              CustomSlider(
                imagem: 'assets/onboarding-image-3.png',
                titulo: 'Melhores Chef’s',
                texto:
                    'Chefs, dos quais a maioria vem de restaurantes com estrelas Michelin ou s√£o vencedores de competi√ß√Ķes de prest√≠gio e t√≠tulos.',
                acaoBotao: 'CONTINUAR',
              ),
            ],
          ),
Enter fullscreen mode Exit fullscreen mode

9 - o bot√£o de continuar muda quando para quero conhecer quando for a √ļltima figura e muda a a√ß√£o do bot√£o tamb√©m;


Padding(
            padding: const EdgeInsets.only(bottom: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomButton(
                  titulo: _currentPage == 2 ? 'QUERO CONHECER' : 'CONTINUAR',
                  irParaPaginaInicial:
                      _currentPage == 2 ? irParaPaginaInicial : proximoCard,
                ),
              ],
            ),
          ),

Enter fullscreen mode Exit fullscreen mode

10 - adicionar o botão de pular a introdução;


Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomLink(
                  titulo: 'Pular introdução',
                  irParaPaginaInicial: irParaPaginaInicial,
                )
              ],
            ),
          ),

Enter fullscreen mode Exit fullscreen mode

11 - adicinar a paginação que vai indicar em qual das figuras está;


Padding(
            padding: const EdgeInsets.only(bottom: 170.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomPaginator(
                  page: _currentPage,
                )
              ],
            ),
          ),

Enter fullscreen mode Exit fullscreen mode

ūüöÄQuer aprender FLUTTER do Zero ao Profissional? ūüĎČhttps://go.hotmart.com/O70564427D

ūüí•Livros que eu indico
Boas Pr√°ticas em Ux Design: https://amzn.to/3FQ5SFP
O design do dia a dia: https://amzn.to/3M5bEW5
Design Centrado no Usu√°rio: https://amzn.to/3N8CEV2

Código limpo: https://amzn.to/3FIXCaw
Arquitetura Limpa: https://amzn.to/3FDrXHa

Iniciando com Flutter Framework: https://amzn.to/3L4I4yR
Aprofundando em Flutter: https://amzn.to/39c62uT

Referências

Projeto no GitHub: https://github.com/JoabeRamone/onboarding-app

https://bashooka.com/inspiration/mobile-app-onboarding-ui-examples/

https://icons8.com/articles/ux-design-onboarding-mobile-app/

https://www.youtube.com/watch?v=YEJPg2jwzI8&ab_channel=TheFlutterWay

https://material.io/design/communication/onboarding.html#usage

https://dribbble.com/shots/14479371-Onboarding-Screen-Exploration

https://www.youtube.com/watch?v=CQlA2p--oEg&ab_channel=JohannesMilke

Top comments (0)