Skip to content

Diretrizes visuais

O PhizClip oferece suporte a uma variedade de métodos flexíveis de personalização. A fim de garantir a unidade visual geral do aplicativo, são estabelecidas as seguintes convenções, nas quais os desenvolvedores podem projetar a interface do usuário de acordo com essas diretrizes.

1. Menu do PhizClip

1.1 Controle da cápsula

O menu 'Mais' do PhizClip pode ser aberto pelo ícone '...' no canto superior direito do PhizClip, e por padrão, há três botões: 'Avançar', 'Voltar para a Página Inicial' (desativado por padrão quando já está na página inicial) e 'Feedback de Reclamação'.

O tamanho padrão do controle de cápsula é o seguinte:

  • Dimensão geral da largura: 88.
  • Dimensão total da altura: 32.
  • Distância do lado direito da cápsula: 10
  • Raio do arredondamento da cápsula: 5
  • Largura da borda da cápsula: 0,8.

Além dessas três funções básicas de botão, os desenvolvedores também podem inserir outras funções por conta própria. Para as funções inseridas pelos desenvolvedores, siga o design de ícones mostrado abaixo.

1.2 Esquema de temas escuro e claro do menu do PhizClip

Os desenvolvedores podem escolher o menu do aplicativo com tema escuro ou claro de acordo com as necessidades da interface para criar um estilo de design adequado para miniaplicativos.

2. Fontes e cores

2.1 Fontes

2.2 cores

3. Controles básicos

3.1 Iniciar carregamento

3.2 guias

Fornecer áreas niveladas para organizar e apresentar grandes blocos de conteúdo, mantendo a interface limpa e organizada.

3.3 Barra de guias inferior

Geralmente fixados na parte inferior para diferentes entradas de paginação. O número de abas não é inferior a 2 e não ultrapassa 5.

3.4 botões

Os botões utilizados são principalmente divididos em botões principais, botões secundários e botões de texto, dos quais:

  • Botão principal: utilizado para o ponto de ação principal, e pode haver apenas um botão principal para cada área de ação
  • Botão secundário: utilizado para o ponto de ação secundário mais relevante.
  • Botão de texto: usado como ponto de ação externo.

O estado de resposta do botão contém 3 tipos, que são Normal, Pressionado e Desativado .

3.5 listas