Front-end
Na illimitar nós usamos algumas ferramentas para agilizar o desenvolvimento de nossas interfaces.
Frameworks e Bibliotecas
Sencha Ext JS
Usado para a construção de módulos e recursos do illi
O Ext JS 4.2 é uma biblioteca de componentes JavaScript de código aberto que fornece ferramentas para criar aplicativos da web escaláveis e ricos em recursos. Ele inclui um conjunto abrangente de componentes de interface do usuário, como grade de dados, formulários, árvores e gráficos, além de recursos avançados, como vinculação de dados, arquitetura de aplicativos MVVM(Model-View-ViewModel) e gerenciamento de estado do aplicativo. Com o Ext JS 4.2, os desenvolvedores podem criar aplicativos da web complexos e interativos que funcionam em todos os principais navegadores e dispositivos, incluindo desktops, tablets e smartphones.
Links: Acesse a documentação! / Assista o curso gratuito EXTJS 4
Quasar Framework
Usado para a construção de aplicações illimitar mais recentes.
O Quasar Framework é um framework de código aberto baseado em Vue.js que permite aos desenvolvedores criar aplicativos da web, aplicativos móveis e aplicativos de desktop com uma única base de código. Ele inclui um conjunto abrangente de componentes reutilizáveis de interface do usuário, como botões, formulários, layouts e gráficos, além de recursos avançados, como suporte a PWA, roteamento e gerenciamento de estado do aplicativo. Com o Quasar, os desenvolvedores podem criar aplicativos em vários formatos e plataformas com um alto grau de personalização e flexibilidade, tornando-o uma opção popular para desenvolvedores que desejam criar aplicativos modernos e escaláveis.
Links: Acessar Documentação/Treinamento interno Arquitetura quasar/Acesso ao endpoint /Criando Projeto Quasar Cli / Introdução Quasar Framework 1.0
Pinia
Usado em conjunto com quasar para a construção de aplicações illimitar mais recentes.
Pinia é uma biblioteca oficial de gerenciamento de estado para aplicações Vue.js. Ela oferece uma abordagem leve, intuitiva e segura para tipagem na hora de gerenciar o estado da sua aplicação, tornando-se uma escolha popular entre desenvolvedores Vue.
Links: Assistir Curso de Pinia / Acessar Documentação
Ionic 1
Usado para a construção de aplicações do Gestor.
O Ionic 1 é um framework de código aberto baseado em AngularJS e Apache Cordova que permite aos desenvolvedores criar aplicativos móveis híbridos para iOS, Android e Windows Phone usando tecnologias da web, como HTML, CSS e JavaScript. Ele inclui um conjunto abrangente de componentes de interface do usuário, como botões, menus, listas e formulários, além de recursos avançados, como roteamento, suporte a PWA e integração com serviços em nuvem. Com o Ionic 1, os desenvolvedores podem criar aplicativos móveis com uma experiência de usuário rica e fluida, combinando o melhor dos aplicativos nativos e da web. O Ionic 1 foi muito popular em seu tempo e é ainda utilizado por algumas empresas, embora seja uma versão mais antiga do framework.
Links: Acesso a Documentação
Ícones
Os ícones podem ser utilizados em botões quando se deseja reforçar visualmente uma ação ou acionar uma função do sistema. Para agilizar o desenvolvimento, nós usamos por padrão algumas bibliotecas de ícones.
Icons8
Usado para a construção de módulos e ferramentas do illi
Os ícones do icons8 possuem diversas categorias e coleções, no illi nós usamos os ícones da coleção color. Para incluir um novo ícone você deve percorrer o caminho: extras -> frontend -> resources -> css -> default -> icones.css
No documento icones.css você deve incluir uma classe com o código em formato base64 da imagem.
.icons8-More-Than, .ux-rangemenu-gt {
background-image: url ( data:image/png;códigobase64, ) !important ;
background-size: 16px;
}Links: Acessar Icons8 na coleção color
Material Icons
Usado para a construção de aplicações desenvolvidas com quasar
Links: Acessar biblioteca Materials Icons
Ionicons
Usado para a construção de aplicações do illiGestor
Links: Como usar ícones no Ionic / Acessar biblioteca de ícones Ionic
Variáveis de cor
A definição de variáveis de cor é uma etapa fundamental ao trabalhar com frameworks de desenvolvimento de aplicativos, como Quasar, Ionic 1 e Sencha. Esses frameworks oferecem recursos que permitem personalizar a aparência visual dos aplicativos por meio do uso de variáveis de cor. Este guia tem como objetivo fornecer uma breve documentação sobre como definir variáveis de cor em cada um desses frameworks.
Quasar Framework
Crie um arquivo de variáveis no Quasar, as variáveis de cor são definidas em um arquivo chamado quasar.variables.styl. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta src/css/. Defina as variáveis de cor: Abra o arquivo quasar.variables.styl. Declare as variáveis de cor no formato nome-da-variavel = valor.
|
$primary: #1379df; |
$secondary: #5cadff; |
$accent: #0060bf; |
$light:#f5f9ff; |
$dark: #121314; |
|
$positive: #21ba45; |
$negative: #c10015; |
$warning: #f2c037; |
$info: #0060bf; |
Links: Saiba mais acessando a documentação do Quasar
Ionic
Crie um arquivo de variáveis: No Ionic 1, as variáveis de cor são definidas em um arquivo chamado ionic.app.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta raiz do seu projeto Ionic. Defina as variáveis de cor: Abra o arquivo ionic.app.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor.
|
$light: #FFFFFF; |
$stable: #F7F7F7; |
$positive: #0076EF; |
$balanced: #21C65B; |
|
$energized: #FFC029; |
$assertive: #F43A36; |
$royal: #7662E3; |
$dark: #3C3C3C; |
Links: Saiba mais acessando a documentação do Ionic
Sencha 4
Crie um arquivo de variáveis: No Sencha, as variáveis de cor são definidas em um arquivo chamado variables.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta sass/ do seu projeto Sencha. Defina as variáveis de cor: Abra o arquivo variables.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor,
|
$primary-color: #ff0000; |
$secondary-color: #00ff00; |
Componentes
Botões
Uso:
Os botões devem ser utilizados quando se quer comunicar ações como por exemplo, criar, salvar, exportar, excluir, etc. Os resultados dessas ações quase sempre serão mostrados na mesma página. Algumas situações comuns em que você pode utilizar botões:
- Para enviar um formulário.
- Para iniciar uma nova tarefa.
- Para navegar entre passos de um formulário.
- Para editar, excluir ou visualizar um item.
Tipos de Botões:
Cada tipo de botão está associado a um propósito e a um nível de ênfase.
Botões Primários:
O botão primário deve ser utilizado para a ação principal da página. Ele terá o nível mais alto de ênfase, ficando visualmente destacado para o usuário. Recomendamos utilizar apenas um botão primário por página.
Botões Secundários ou Default:
O botão secundário, deve ser utilizado quando a ação for menos importante que a principal. É comum seu uso em situações em que é oferecida uma opção alternativa à principal e para a qual se quer dar menos ênfase. Eles também podem ser usados para iniciar funções nos sistemas e recursos.
Botões de Atenção:
Este tipo de botão deve ser utilizado quando a ação for crítica, como botões que desativam dados.
Botões de Sucesso:
Deve ser utilizado para salvar ou finalizar ações das funções do sistema.
Botões com Ícones:
Os botões com ícones podem ser utilizados quando se deseja reforçar visualmente a ação. Devem ser aplicados preferencialmente em botões primários e posicionados à esquerda do label. Utilize o ícone à direita quando a ação estiver relacionada a progresso, como por exemplo, avançar e próximo. Para os botões default os icones podem ser coloridos (no caso do illi), já para os botões primários e de atenção as cores dos ícones devem ser as mesmas das fontes, normalmente de cor branca.
Títulos dos Botões
Os títulos dos botões devem indicar suas ações ou funções que ele irá iniciar.
Links: Acesse documentação Sencha / Acessar documentação Ionic / Acessar documentação Quasar
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.
Barras
As barras são componentes utilizados para agrupar outros componentes como botões, menus e checkboxes. Elas são componentes nativos do framework Sencha JS.
Uso:
- TBar = top bar fica no topo das janelas
- BBar = bottom bar fica na parte inferior das janelas
Top Bars:
Devem ser utilizadas para agrupar funções que vão incluir ou alterar dados nas informações do módulo como incluir, cancelar, importar, exportar etc.
Bottom Bars:
Devem ser utilizadas para agrupar funções de conclusão, navegação, atualização ou desistêntcia do corpo da tela ou janela, como por exemplo, salvar um formulário ou navegar pelas tabs de um cadastro ou filtro.
Ações de conclusão (salvar, concluir, finalizar) preferencialmente ficam posicionadas à direita e as demais ficam à esquerda.
Quantidade de Funções por Barra:
Em alguns cenários a quantidade de funções por tela é alta ou o título das funções é muito extenso, caso isso aconteça é recomendável que se agrupe as funções da página em um menu button. Por padrão, telas com mais de 2 funções já devem ser agrupadas.
Recomendável
Não Recomendável
Links: Acesse a documentação Sencha Js
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.
Tabs
Tabs são componentes que têm o intuito de exibir mais informação, usando menos tela.
Uso:
As tabs são usadas para acessar módulos abertos do sistema, dividir formulários muito extensos e separar parâmetros de filtros. É uma forma de exibir mais informação, usando menos tela.
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.
Escrita
Princípios de conteúdo escrito
Isso ajudará a produzir conteúdo claro e consistente para usuários de diferentes profissões e identidades.
Nível de Leitura Simples:
Os usuários são pessoas ocupadas com tempo e atenção limitados. Você pode ajudar à todos escolhendo palavras e frases simples, consistentes e tomando cuidado com linguagem técnica ou palavras muito específicas.
Palavras Simples:
Se houver uma palavra mais simples para usar o que você quer dizer, use-a. Sempre escolha a palavra curta e simples em vez da longa e complicada. Não complique suas ideias com jargão comercial ou interno. Use o jargão apenas quando tiver motivos para acreditar que isso melhorará a compreensão do usuário.
Não Faça
|
Otimizar |
|
Apesar do Fato |
Faça
| Melhorar |
| Embora |
Frases Simples e Curtas
Apare o inchaço das frases. Não faça as pessoas lerem mais do que precisam.
Não Faça
| As perguntas devem ser mescladas quando forem 99% idênticas e seria benéfico ter todas as respostas de várias perguntas duplicadas em um só lugar. |
|
Se você precisar excluir sua conta, mesclar contas ou tiver um problema que não pode ser resolvido por nós, use o formulário abaixo: |
Faça
|
Mesclar perguntas que são quase iguais. Esta opção também mesclará listas de respostas. |
|
Mesclar perguntas que são quase iguais. Esta opção também mesclará listas de respostas. |
Nomenclaturas
Escolha nomes com antecedência e implemente-os de forma consistente. A linguagem consistente reduz o número de coisas que seus usuários precisam aprender ou lembrar. Se no sistema existem vários nomes, identifique-os. Escolha um como padrão e elimine os outros.
Não Faça
|
Alertas de caixa de entrada. (na tela 1) |
|
Notificações de caixa de entrada. (na tela 2) |
| Mensagens de caixa de entrada. (na tela 3) |
Faça
|
Notificações de caixa de entrada. (Telas 1,2 e 3) |
Orientado à Ação
Os usuários estão tentando realizar suas tarefas com rapidez. Escreva e estruture seu conteúdo de forma que os usuários possam escanear as ações mais importantes com facilidade. Exemplo:
Não é possível exibir as métricas.
Você precisa reiniciar a sincronização de dados.
Deixe Escaneável
Use títulos ou bullet points para tornar seu conteúdo mais fácil de se escanear.
Não Faça
| Excluir foto: ao excluir sua foto, o arquivo será deletado dos nossos registros e você não poderá recuperá-lo. |
| Excluir Foto |
| Ao excluir sua foto, seu arquivo irá: |
|
|
Informações Importantes no Topo
Pense no que as pessoas precisam saber prioritariamente e mova essas informações para o topo ou em evidência.
Use a Voz Ativa
Use a voz ativa, principalmente no conteúdo do produto. Comece cada CTA com um verbo forte.
Não Faça
| Por 14 dias, você pode experimentar o Teams gratuitamente. Tornamos mais fácil para você criar uma equipe. |
Faça
| Comece com uma avaliação gratuita de 14 dias. Crie um time. |
Linguagem Negativa
Tenha cuidado com a linguagem negativa. Geralmente é mais longo, menos amigável e menos ativo do que a linguagem positiva. Use exemplos específicos em sua declaração de problema.
Não Faça
|
A senha não pode estar em branco |
| Insira sua senha para continuar. |
Preferências e Configurações
Escreva Rótulos na Afirmativa
Preferências e configurações devem ser escritas na afirmativa mesmo que para desabilitar uma função. Quando um usuário seleciona a preferência de um recurso, ele deve obter esse recurso.
Mensagens de erro
As coisas nem sempre rodam lisas, nossos sistemas podem falhar. É importante criar mensagens de erro claras, lógicas e acessíveis, que ajudem nossos usuários a resolverem seus problemas.
Entenda o problema
Antes de escrever qualquer coisa, tenha certeza de que você tem as respostas para essas questões.
- O que aconteceu?
- Como aconteceu?
- Como pode ser resolvido?
- É um erro do usuário ou do sistema?
Crie uma estrutura básica
Uma boa estrutura de mensagem de erro explica o que está acontecendo e o que pode ser feito sobre. Uma boa mensagem tem a seguinte estrutura:
[O erro] [Como resolvê-lo]
Segue um exemplo de uma mensagem de erro:
Houve um problema ao sincronizar os dados.
[O erro]
Verifique a configuração do seu banco de dados e tente novamente.
[Como resolvê-lo]
Mantenha as Mensagens Curtas e Simples
Queremos ajudar as pessoas a resolverem os erros rapidamente, por isso mensagens de erro devem ser concisas. Remova palavras desnecessárias e mantenha apenas detalhes relevantes.
Seja Educado
Erros de Sistema
Desculpe-se quando for culpa do sistema e deixe os usuários saberem que a culpa não foi deles. Use a voz ativa para pegar a responsabilidade para si. Por exemplo:
Erros de Usuário
As vezes a culpa é do usuário, nesse caso, devemos focar na ação desejada ao invés de falar sobre o erro do usuário.
Informe o que Vem a Seguir
Alguns erros podem precisar de um botão ou link, para consertar ou descartar uma mensagem. Informe sempre o que vai acontecer em seguida, botões e links devem fazer sentido quando lidos de forma isolada. Evite palavras como ”OK”.
Design, Posicionamento e Timing.
Mensagens de erro levam toda a experiência de usuário em consideração. Deve deixar claro o que acionou a mensagem de erro e ao que ela está relacionada.
- Validação em linha: é mais bem aplicada em campos de formulários
- Notificações em linha: São melhor aplicados em interfaces sem campos de formulários. Eles devem estar localizados próximos a itens que afetam o recurso.
- Modais: São melhores quando você deseja garantir atenção do usuário.
Mensagens de Sucesso
É importante manter os usuários informados quando as ações foram concluídas com sucesso. Os estados de sucesso em todo o fluxo do usuário, permitem que os usuários saibam que estão chegando perto de atingir a meta ou que a concluíram.
Seja Específico
Uma boa mensagem de sucesso fornece informações claras de que a ação executada foi concluída. É bom deixar os usuários informados de que o que eles fizeram foi concluído com sucesso, ou melhor, ser específico sobre as ações que eles executaram.
Informe o que Vem a Seguir
A ação bem-sucedida faz parte de um objetivo maior? Existem outras ações recomendadas que precisam ser executadas? As mensagens de sucesso podem ser uma boa maneira de orientar o usuário para a próxima ação para uma interação mais perfeita.
Design, Posicionamento e Timing
- Validação em linha: é mais bem aplicada aplicada em campos de formulários.
- Notificações em linha: São melhor aplicados em interfaces sem campos de formulários. Eles devem estar localizados próximos a itens que afetam o recurso.
- Modais: São melhores quando você deseja garantir atenção do usuário.
Estilo
Paletas de Cor
Manual da Marca
Logo:
Tipografia:
Font family: Aller
Peso: Bold
Link: Fontes illimitar
Cores:
Gradientes Logo:
Links: Manual em PDF