Que informações estão incluídas nesta seção?
Esta seção traz recomendações e melhores práticas para a criação de gráficos na Metasys UI.
- Fornece procedimentos para garantir a uniformidade dos gráficos em um site e em relação a outros gráficos da Johnson Controls®
- Define recomendações de uso e melhores práticas para a criação de gráficos
- Procura reduzir o tempo necessário para construir gráficos, eliminando a necessidade de experimentar diferentes fontes, cores e estilos
- Oferece um design profissional, limpo e distinto para gráficos
- Fornece um modelo de navegação padrão que é fácil de seguir
Quais são as recomendações para o número máximo de itens ou elementos em um gráfico da Metasys UI?
Para garantir o desempenho ideal dos gráficos criados na Metasys UI, siga as recomendações na tabela abaixo.
| Item ou elemento | Recomendações | Notas |
|---|---|---|
| Número de elementos (formas, símbolos ou imagens) | 0–125 | Um elemento é qualquer forma, símbolo ou imagem adicionada ao gráfico. |
| Número de pontos Metasys vinculados | 0–200 | É recomendável não ter mais de 200 pontos Metasys vinculados em um único gráfico, exceto se estiver usando um elemento de resumo do status. |
| Número de resumos do status | 0–6 | Esse limite permite 50 pontos Metasys vinculados por resumo do status com um máximo recomendado de seis resumos do status em um gráfico. O limite resulta em 300 pontos cujos status são resumidos usando apenas cinco elementos (não 300 elementos). Essa exceção de resumo do status contrasta com a recomendação de pontos Metasys vinculados de 200 no máximo, porque nem todos os valores de vínculos são exibidos no gráfico. |
| Número de imagens | 0–5 | Uma imagem é qualquer arquivo de imagem adicionado à tela do gráfico. Nota: É recomendável que as imagens tenham um tamanho máximo de 1.600 pixels (altura) por 1.200 pixels (largura) e tamanho de arquivo de 1 MB. Exceder o tamanho das dimensões recomendadas pode causar atrasos significativos nos tempos de carregamento.
|
| Número de animações | 0–50 | Esse número se aplica a animações que estão sendo executadas ativamente simultaneamente (por exemplo, um ventilador de suprimento e um ventilador de retorno). |
Quais são as recomendações de tamanho, margens, espaço branco e layout eficaz do gráfico?
As recomendações a seguir se aplicam à criação de gráficos a partir de modelos em branco ou personalizados, mas também podem ser usadas para a criação de gráficos a partir de modelos do sistema existentes.
Tamanho
A tela do gráfico tem 1.920 (altura) por 1.080 (largura) pixels. O Editor de gráficos comporta uma resolução mínima de 1.600 pixels por 900 pixels. O tamanho do gráfico é importante para sua aparência na Metasys UI. Recomendamos aplicar uma margem e usar espaço branco para garantir que os gráficos tenham a aparência apropriada, incluindo espaço para que os valores dos dados não sejam cortados pelas bordas delimitadoras da tela do gráfico.
Margens e espaço branco
Alguns dos gráficos mais eficazes, tanto visual quanto funcionalmente, são os menos complexos. Não deixe que o gráfico toque nas bordas de delimitação da margem. Se as margens forem muito grandes, você precisará da etapa adicionar de ampliar a imagem ao visualizar o gráfico. Utilize mais espaço branco em torno de um elemento que deseja destacar. Ou posicione os elementos próximos uns aos outros para poder reconhecer as associações entre eles. Se um símbolo ou outro elemento com texto estiver muito próximo da borda do gráfico, partes do símbolo ou elemento, incluindo valores de status, podem ser cortadas quando o gráfico é visualizado no widget Gráficos.
Layout eficaz
O método mais eficaz de organizar elementos é usar uma grade de design para separar conjuntos de componentes logicamente relacionados. Uma grade divide o espaço disponível em áreas que podem ajudar a organizar e alinhar os componentes. Com as grades, os usuários podem ver facilmente a sequência lógica das tarefas e compreender as relações entre os conjuntos de componentes. O Editor de gráficos não tem uma grade para aplicar à tela do gráfico, mas é possível dividir visualmente o gráfico em um layout de duas ou três colunas.
Você pode usar o número e a largura dos componentes e os rótulos associados para determinar o número de colunas em uma grade. No início do processo de design, as divisões verticais são mais difíceis de definir porque dependem da profundidade e dos conjuntos dos componentes, que ainda não foram colocados.
A criação de uma grade é um processo contínuo. Se você souber quanto espaço há disponível, poderá começar a trabalhar com os componentes para determinar o uso mais eficaz do espaço. A grade também pode ajudar você a determinar o espaço a ser alocado a um determinado conjunto de componentes. Quando você definir uma grade que pode ser usada para vários layouts, os gráficos terão uma aparência mais uniforme.