Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

O padrão mobile tem como objetivo mapear os fluxos mais utilizados em nossos produtos para disponibilizar templates e exemplificar as jornadas mais comuns aos usuários.

A ideia é que fluxos comuns, como, cadastros, login, lista de informações entre outros não precisem ser repensados e sigam o padrão de produto.
Este mapeamento vai ser continuo, serão incluídos 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.

Expandir
titleLista de informações

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.

Componentes que podem ser usados para listar informações:

Section

Card template
DescComponente versátil possibilita incluir textos, gráficos, ações, link e imagens.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811701323
BtnTextver template
Largura300px
TituloWidget
Card template
DescO list view pode ser usado para conteudos com e sem ações. Tem busca e expansão do card.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811706386
BtnTextver template
Largura300px
TituloList view
Card template
DescO acordion possibilita a otimização do espaço em tela, uma vez que pode ser aberto. Indicado para conteúdos com muito texto.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811706398
BtnTextver template
Largura300px
TituloAcordion

Expandir
titleCadastro

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.

Componentes que podem ser usados para listar informações:

Section

Card template
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811701323
BtnTextver template
Largura300px
TituloExibição dos itens cadastrados
Card template
DescO list view pode ser usado para conteudos com e sem ações. Tem busca e expansão do card.
BtnTextver template
Largura300px
TituloPreenchimento de um novo cadastro




...