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, não precisem ser repensados e sigam um 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.

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:

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.
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.
BtnTextver template
Largura300px
TituloAcordion

Expandir
titleCadastros
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.
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.
BtnTextver template
Largura300px
TituloAcordion

Expandir
titleEditar

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.
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.
BtnTextver template
Largura300px
TituloAcordion

Expandir
titleUso da câmera

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.
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.
BtnTextver template
Largura300px
TituloAcordion

Expandir
titleMenu

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.
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.
BtnTextver template
Largura300px
TituloAcordion