Esta página foi traduzida pela API Cloud Translation.

Guia de estilo da interface para complementos do Editor

Complementos do editor criar interfaces do usuário (menus, barras laterais e caixas de diálogo) usando a interface serviço HTML. Como as interfaces desenvolvidos em HTML e CSS, são altamente personalizáveis. No entanto, quando ao criar uma interface complementar, você deve projetá-la para oferecer uma ótima do usuário.

Os melhores complementos ampliam os editores de forma natural usando controles e recursos conhecidos o comportamento dos modelos. Ao criar um novo complemento:

Use o pacote de complementos do CSS na sua páginas de serviço HTML.
Em caso de dúvida sobre o design, encontre uma caixa de diálogo ou barra lateral semelhante no editor e fazem a correspondência ou fazem referência a um guia de início rápido do complemento.
Siga este guia de estilo para criar uma experiência perfeita.

Texto

Nome do complemento

Configure o nome do complemento ao publicar reimplantá-lo. O nome aparece em muitos lugares, como na loja de complementos e em menus.

Use letras maiúsculas no título.
Evite pontuação, especialmente parênteses, a menos que faça parte da sua marca.
Seja breve. O ideal é 30 caracteres ou menos. Nomes longos podem ser truncadas automaticamente.
Não inclua o nome do produto do Google a que o complemento se destina (ou use o palavra Google).
Deixe de fora as informações da versão.
Verifique se o nome publicado do complemento é igual ao nome do arquivo projeto de script. O nome do projeto aparece na caixa de diálogo de autorização.

O que não fazer	O que fazer

Estilo de escrita

Você não precisa escrever muito. A maioria das ações deve ficar clara iconografia, layout e rótulos curtos. Se você encontrar uma parte do seu complemento precisar de uma explicação mais extensa do que os rótulos curtos podem fornecer, é uma melhor prática para criar uma página da Web separada descrevendo seu complemento e um link para ele.

Ao escrever o texto da interface:

Use letras maiúsculas e minúsculas (especialmente para botões, rótulos e itens de menu).
Prefira textos curtos e simples, sem jargões ou siglas.

O que não fazer	O que fazer

Dica pós-instalação

Sua dica pós-instalação aparece assim que alguém instala seu complemento e também aparece na Ajuda. Você tem algumas frases para ajudar os usuários a dar os primeiros passos rapidamente.

Comece com uma palavra de ação.
Descreva a primeira etapa para usar o complemento.
Se você tiver uma IU principal, como uma barra lateral, explique como abri-la.
Não promova seu complemento aqui, ele já está instalado.

O que não fazer	O que fazer

Itens do cardápio

Ao contrário dos projetos comuns do Apps Script, os complementos não aparecem no editor de script ou gerenciador de script. os usuários não podem executar scripts de complementos diretamente. Em vez disso, cada tem uma posição no menu de complementos. O menu (e possivelmente uma caixa de diálogo ou barra lateral) permite os usuários interagem com o complemento.

O menu é uma parte fundamental de como os usuários controlam seu complemento, por isso, projete sua a estrutura e o texto com cuidado.
Evite itens de menu que simplesmente repitam o nome do complemento. Em vez disso, comece com um palavra de ação.
Se o item do menu principal começar um fluxo de trabalho e não houver um único verbo que descreve o que faz, chame-o de "Iniciar". Esse padrão é usado na Guia de início rápido dos complementos do Documentos.
A menos que seu menu tenha mais de seis itens, tente não usar submenus. Eles podem ser minuciosa e difícil de selecionar.
Descreva a tarefa, não o componente de IU que o item de menu exibe.

O que não fazer	O que fazer

Mensagens de erro

Quando algo dá errado, é importante usar uma linguagem simples. Explique o problema do ponto de vista do usuário e sugerir como corrigi-lo.

Não permitir que o usuário veja as exceções geradas pelo código. Em vez disso, use try...catch para interceptar exceções e exibir uma mensagem de erro fácil de usar com texto inline estilizado na Classe error do CSS de complementos ou uma caixa de diálogo de alerta.
Antes da publicação, verifique se o complemento não registra informações de depuração no no console JavaScript, usam o Stackdriver Logging; como alternativa.

O que não fazer	O que fazer

Conteúdo Help

O menu de todos os complementos inclui uma caixa de diálogo de ajuda automática. Se você fornecer um URL de ajuda ao publicar, a página "Saiba mais" para essa página. A menos que seus é autoexplicativo, forneça uma página que explique como usá-lo.

Sempre que possível, mostre as instruções em uma lista com marcadores ou numerada. Caminhar com os usuários até o resultado final, com referências claras a elementos da interface nomeados.
Certifique-se de que suas instruções expliquem claramente todos os requisitos, como a configuração em uma planilha de uma determinada maneira.
Fique à vontade para criar links para seu conteúdo de ajuda na interface principal do usuário também. Se o complemento criar um documento novo, você também poderá mostrar instruções no no corpo do documento.

Interfaces de usuário personalizadas

Alguns complementos Editores simples podem ser controlados totalmente pelo menu, mas a maioria para mostrar uma barra lateral ou caixa de diálogo com imagens conteúdo.

As barras laterais são melhores para ferramentas persistentes que as pessoas provavelmente usarão repetidamente ao se referir ao conteúdo do documento ou planilha.
As caixas de diálogo são melhores para ferramentas de uso único, páginas de configurações e mensagens importantes.

Texto da interface

Em qualquer caixa de diálogo ou barra lateral, suponha que as pessoas leiam apenas os rótulos do título e do botão. Eles ainda conseguem descobrir o que sua interface faz e fazer uma boa escolha?

Use rótulos de título e botão independentes.
Evite blocos longos de texto descritivo.

Caixas de diálogo

Caixas de diálogo são ótimas para ferramentas que as pessoas usam uma vez e depois seguem em frente. Por exemplo, se sua permite que as pessoas insiram um gráfico, você pode exibir uma caixa de diálogo com opções de o que inserir e fechar a caixa de diálogo quando o gráfico for inserido. As caixas de diálogo são também é útil para exibir as configurações do complemento ou para comunicar uma uma mensagem importante.

Não abra uma caixa de diálogo (incluindo uma alerta ou prompt) de outra caixa de diálogo, apenas exiba uma de cada vez.
Para o título da caixa de diálogo, use uma palavra ou frase curta, começando com palavra importante.
Os rótulos dos botões precisam estar relacionados ao título da caixa de diálogo.
Prefere dois botões, geralmente uma ação principal e "Cancelar". Para casos especiais que exigem um terceiro botão, considere o canto inferior direito.
Colocar botões no canto inferior esquerdo da caixa de diálogo. O botão principal azul deve estar à esquerda, com todos os botões secundários cinza à direita.

O que não fazer	O que fazer

Barras laterais

As barras laterais permitem que as pessoas consultem documentos, planilhas, apresentações, ou forma ao fazer escolhas. Elas também permitem que as pessoas usem o complemento várias vezes. Sempre que uma nova barra lateral é aberta, a anterior é fechada automaticamente. Eles são melhores para os modos temporários que o usuário sai quando termina.

Os usuários podem ter outros complementos com as próprias barras laterais. Se dois complementos tentarem abrir barras laterais simultaneamente, apenas uma é mostrada.
Não exibir uma barra lateral ou uma caixa de diálogo ao abrir um documento pela primeira vez.
Somente complementos em operação no AuthMode.FULL abrir barras laterais ou caixas de diálogo. Você pode usar um item de menu para abrir uma barra lateral, pois isso solicita que o usuário dê autorização total.

Controles

Ótimas interfaces complementares de recursos deixam os controles mais livres. Margens e margens adequadas o padding faz uma grande diferença, enquanto os controles densos podem parecer complicados. Quando em use um layout do próprio editor. Por exemplo, analise as políticas caixas de diálogo nos Documentos Google, como Arquivo > Configuração da página ao criar a sua.

A documentação do pacote de CSS de complementos fornece marcação de amostra para cada um dos tipos de controle abaixo.

Botões

Use botões para controlar as principais ações da interface do usuário em vez de links ou outros elementos.

Evite exibir mais de um botão azul, vermelho ou verde por vez. Cinza podem aparecer repetidamente.
A maioria dos rótulos de botão precisa ter a primeira letra maiúscula e começar com um verbo. na cor vermelha , normalmente para ações de criação, devem usar todas as letras maiúsculas.

O que não fazer	O que fazer

Caixas de seleção e botões de opção

Use as caixas de seleção quando as pessoas puderem selecionar várias opções ou nenhuma opção. Usar (ou um menu de seleção) quando exatamente uma opção deve ser selecionada.

Não alterar as caixas de seleção para imitar botões de opção.
Não fazer nada imediatamente depois da verificação. As pessoas cometem erros. Esperar até que os usuários cliquem em um botão para confirmar as escolhas.

Selecionar menus

Selecionar são uma ótima maneira de oferecer uma pequena lista de alternativas.

Classifique as opções em ordem alfabética ou por um esquema lógico que todos os usuários possam entender (como dias da semana, começando no domingo).
Se a lista ficar muito longa, considere usar um controle diferente. Por exemplo: você pode mostrar uma lista rolável para dar mais espaço ao menu e torná-lo mais fácil de navegar.

Áreas de texto

Se as pessoas precisarem digitar mais do que algumas palavras, use uma área de texto.

Faça áreas de texto com pelo menos duas linhas de altura para que sejam mais fáceis de usar e não parecem campos de texto.
Coloque os marcadores em cima.

Campos de texto

Use campos de texto se as pessoas só precisarem digitar uma ou duas palavras.

A largura de um campo de texto deve sugerir o que você espera que as pessoas digitem nele.
Evite usar o texto do marcador de posição como rótulo, porque ele desaparece no foco. O marcador de posição é útil para dar exemplos ou detalhes extras.
Coloque os rótulos na parte de cima, mas fique à vontade para posicionar campos curtos de texto lado a lado.

Branding

No seu complemento

Se você deseja incluir branding, mantenha-o breve e leve. Isso ajuda as pessoas se concentram na interface do usuário e faz com que o complemento pareça parte do editor.

Todos os aspectos do seu complemento devem seguir as diretrizes da promoção de marca.
Não inclua a palavra "Google" nem use ícones de produtos do Google.
O texto não deve conter mais do que algumas palavras e deve estar estilizado na Classe gray do CSS de complementos .
As imagens precisam estar em um fundo branco e ter no máximo 200 x 60 pixels.
Para caixas de diálogo, o branding deve estar no canto inferior direito.
Nas barras laterais, o branding pode estar na parte de cima ou de baixo.

Na loja

Para publicar um Complemento do Editor, você precisa de uma número de recursos de imagem. Esses recursos são usados para criar a página "Detalhes do app" do complemento.

Todos os aspectos da página "Detalhes do app" precisam seguir as diretrizes da promoção de marca.
Para mais detalhes sobre as imagens que você precisa fornecer, consulte a diretrizes para imagens.

Acessibilidade

Todos devem poder aproveitar seu complemento, independente de verem cores de forma diferente, usem um leitor de tela ou tenham outras necessidades. A acessibilidade é um conceito amplo que não pode ser totalmente abordado neste guia de estilo. Um recurso útil é site do Google Acessibilidade. Mas aqui aqui estão algumas dicas para começar:

Verifique se você consegue navegar para todos os controles de interface com o teclado. Adicionar Use tabindex=0 para personalizar os controles (como os criados com o <div>) para que as pessoas possam clique na guia. Considere se outras teclas também precisam de suporte, como setas para criar uma lista.
Algumas pessoas usam um leitor de tela com seu complemento. Assim, as imagens devem ter um atributo alt, e controles personalizados devem ter Atributos ARIA para descrever o uso deles.
Não confie apenas na cor para comunicar o estado. Use ícones e texto também.

Se você usa controles da Web padrão, como os descritos anteriormente neste guia, facilitar o acesso ao complemento.