Versões comparadas

Chave

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

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

A proposta é que fluxos padrão, como cadastros, login, listagem de informações, entre outros, não necessitem ser reavaliados a cada novo desenvolvimento de produto, permitindo que sigam um padrão consistente.

Este mapeamento 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.

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.

Exemplos de páginas para listar informações:

Section

Card template
DescComponente versátil possibilita incluir permite a inclusão de textos, gráficos, ações, link links e imagens.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811701323
BtnTextver template
Largura250px
TituloWIDGET
Card template
DescO list view pode ser usado para conteudos com e sem ações. Tem Atende para conteúdos com ou sem ações, possui recursos de busca e expansão do card.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811706386
BtnTextver template
Largura250px
TituloLIST VIEW
Card template
DescO acordion possibilita Oferece a otimização do espaço em na tela, uma vez que pode ser abertosendo ideal para listas que contenham conteúdos textuais.
BtnURLhttps://tdn.totvs.com/display/PTT/Template+lista+com+Accordion
BtnTextver template
Largura250px
TituloACCORDION

Expandir
titleCadastro

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:

Section

Card template
DescTela para visualizar informações já cadastradas.
BtnURLhttps://tdn.totvs.com/pages/viewpage.action?pageId=811706509
BtnTextver template
Largura250px
TituloINFORMAÇÕES CADASTRADAS
Card template
DescTela para inclusão ou criação de um novo cadastro.
BtnURLhttps://tdn.totvs.com/display/PTT/Novo+cadastro
BtnTextver template
Largura250px
TituloNOVO CADASTRO

Expandir
titleEdição


Expandir
titleUso da câmera


Expandir
titleMenu


Expandir
titleLogin


Expandir
titleTollbar


Expandir
titleUso de gráficos


Expandir
titleHome ( etapa 2)


UI kit mobile

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.

Button
TextoUI kit mobile
Linkhttps://www.figma.com/file/QpGHDz4uQXnEY658WVOetn/UI-Kit---mobile?type=design&node-id=426%3A819&mode=design&t=XechYmD8zY7wCox0-1

...