Histórico da Página
O padrão mobile tem como principal objetivo mapear os fluxos mais frequentemente utilizados em nossos produtos para , a fim de disponibilizar templates e exemplificar as jornadas mais comuns aos para os usuários.
A ideia proposta é que fluxos comunspadrão, como , cadastros, login, lista listagem de informações, entre outros, não precisem ser repensados e necessitem ser reavaliados a cada novo desenvolvimento de produto, permitindo que sigam um padrão de produtoconsistente.
Este mapeamento vai ser continuo, serão incluídos será contínuo, com a inclusão de novos fluxos conforme o desenvolvimento de novos produtos.
Templates
Os templates estão divididos por fluxos, indicando o uso de componentes, composição e hierarquia das informações e navegação.
- Lista de informações
Quando falamos de um produto mobile, o uso da tabela não é indicado, porque dificulta a visualização e o uso, isso ocorre pelo espaço de tela disponível.
O mais indicado para exibir informações no mobile é o agrupamento de informações através de “cards”, como a maioria dos aplicativos utilizam essa navegação, o usuário já está habituado, além disso o agrupamento e a divisão facilitam a leitura, a organização e direciona melhor o usuário para as ações.
Componentes que podem ser usados para listar informações:
| Expandir | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
O processo de login representa a porta de entrada do aplicativo, seu uso é fácil e simples. É importante que o login siga o padrão estabelecido pelos produtos TOTVS, sem realizar alterações.
|
| Expandir | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
É através do toolbar que o usuário se localiza e acompanha sua navegação no aplicativo. Além disso, proporciona acesso direto ao menu, notificações e opções de login. Exemplo de utilização do tollbar:
|
| Expandir | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
O menu é obrigatório em qualquer aplicativo, utilizado para a navegação entre as páginas da aplicação. O seu uso deve ser fácil e intuitivo, as sessões devem ter nomes que indicam de maneira clara o destino de cada página acessada. Exemplos de utilização dos menus:
|
| Expandir | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
Em produtos para a web, é comum utilizar tabelas para apresentar uma variedade de informações, mas em produtos mobile, isso pode dificultar a visualização devido ao espaço limitado na tela. Uma abordagem mais recomendada é o uso de "cards" para agrupar e exibir informações. Essa prática é amplamente adotada em aplicativos móveis, proporcionando uma navegação mais intuitiva, facilitando a leitura, organização e direcionamento do usuário para ações específicas. Exemplos de páginas para listar informações:
|
| Expandir | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
O processo de cadastro é amplamente utilizado em todos os nossos produtos, independentemente do tipo de informação a ser cadastrada, seja produtos, clientes ou fornecedores. A exibição e o preenchimento de um novo cadastro seguem um padrão consistente. Exemplos de páginas de cadastros:
|
| Expandir | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
A edição é um processo comum e essencial para qualquer produto. É fundamental que todas as informações preenchidas ou enviadas pelo usuário estejam disponíveis para possíveis edições e atualizações. Exemplos de páginas de edições:
|
| Expandir | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
O uso da câmera é uma prática frequente nas rotinas mobile, seja para identificar um código de barras, QR code ou capturar imagens para evidências.
|
| Painel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Atualmente, não contamos com uma biblioteca oficial específica de framework para desenvolvimento mobile. No momento, a prática mais comum é a utilização do Flutter, adaptado visualmente aos componentes do PO.UI e ao tema TOTVS. Nesse contexto, mapeamos esses componentes e realizamos adaptações para garantir a conformidade com um padrão estabelecido. O arquivo do template está disponível no Figma e pode ser editado da seguinte forma:
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas