Impulsione seus artigos da Knowledge Base com recursos visuais. Adicionar capturas de tela esclarece conceitos complexos e simplifica instruções, oferecendo aos usuários uma visão direta dos elementos da interface. Este guia mostra como incorporar imagens de forma limpa e eficaz, melhorando a clareza do conteúdo e o engajamento do leitor.

Crie capturas de tela em um computador ou dispositivo móvel

Para saber como criar capturas de tela para a Knowledge Base e quais ferramentas de edição você pode usar, consulte Como tirar capturas de tela.

Adicione capturas de tela e outras imagens a artigos da Knowledge Base

Envie uma imagem para a Galeria de Mídia

1. Navegue até a Galeria de Mídia.
2. No canto inferior direito, clique no botão Upload.
3. A caixa de diálogo de envio será aberta. Clique no botão Browse… para navegar pelos arquivos do seu computador e selecionar a imagem que deseja enviar.
4. Após selecionar sua imagem, uma caixa de diálogo solicitará que você forneça um título e uma descrição para sua imagem. Preencha esses detalhes e clique no botão Upload para finalizar o processo de envio.

Envie uma imagem diretamente do editor de artigos

Se você está editando ativamente um artigo e precisa adicionar uma imagem, também pode enviar diretamente da barra de ferramentas:

1. Comece criando um novo artigo ou editando um existente.
2. No editor de artigos, clique no botão Inserir Mídia encontrado na barra de ferramentas.

   

   • Esta ação abre a caixa de diálogo Inserir Mídia.
3. Na parte inferior da caixa de diálogo que aparece, selecione o botão Upload Media para prosseguir.
4. Na caixa de diálogo de envio, clique no botão Browse… para navegar pelos arquivos do seu computador e selecionar a imagem que deseja enviar.
5. Após selecionar sua imagem, uma caixa de diálogo solicitará que você forneça um título e uma descrição para sua imagem. Preencha esses detalhes e clique no botão Upload para finalizar o processo de envio.

Adicione uma imagem a um artigo

1. Você pode começar criando um novo artigo ou editando um existente.
2. Localize e clique no botão Inserir Mídia na barra de ferramentas.
3. Na galeria, escolha a imagem que deseja adicionar e clique em Insert Media para incorporá-la ao artigo.

Uso eficaz de imagens no corpo do texto

Incorporar capturas de tela diretamente no corpo de artigos da KB melhora a clareza e a navegação, demonstrando visualmente elementos da interface, como botões e menus. Essa abordagem otimiza os artigos, tornando-os mais fáceis de seguir ao reduzir o volume de imagens e texto, e guiando diretamente os usuários pela interface com visuais concisos e relevantes. Diretrizes para otimizar a integração de imagens no corpo do texto:

• Priorize a clareza: Use imagens no corpo do texto para substituir dicas textuais por representações visuais precisas. Concentre-se em exibir elementos interativos, como menus e botões, garantindo que essas imagens sejam diretamente relevantes e facilitem o rápido reconhecimento e interação do usuário.
• Posicionamento estratégico: Integre capturas de tela ao lado do texto relevante para mesclar perfeitamente as instruções com os guias visuais, tornando mais fácil para os usuários acompanharem sem se perder em descrições longas.
• O tamanho importa: Ao selecionar imagens no corpo do texto, procure ter uma altura máxima de 16 pixels. Isso garante que os visuais sejam informativos, mas discretos, contribuindo para um layout mais limpo e acessível para os usuários que navegam no conteúdo.

Uso eficaz de imagens para instruções passo a passo

Incorporar capturas de tela entre frases em artigos da KB demonstra visualmente ações ou tarefas, preenchendo a lacuna entre as instruções de texto e sua aplicação prática. Essa abordagem melhora a compreensão e o engajamento do usuário, ilustrando etapas críticas de um processo, tornando os artigos mais interativos e diretos para os leitores seguirem. As diretrizes para otimizar o uso de imagens em instruções passo a passo incluem:

• Uso seletivo: Incorpore capturas de tela apenas para conceitos que realmente se beneficiam de ajuda visual. Evite o uso excessivo para não poluir o visual.
• Correlação direta: Selecione capturas de tela que estejam diretamente ligadas ao texto que as acompanha, garantindo que cada imagem ilustre claramente a ação ou tarefa que está sendo descrita.
• Sequência lógica: Organize as capturas de tela para seguir a progressão natural das etapas, espelhando a experiência real do usuário. Essa ordem cronológica apoia um fluxo lógico, facilitando um guia passo a passo que os leitores podem seguir facilmente.
• A precisão é fundamental: Certifique-se de que as capturas de tela retratem com precisão o que os usuários encontrarão em suas telas. Como a aparência pode variar entre diferentes sistemas operacionais, ajuste suas capturas de tela de acordo. Para obter orientação sobre como adaptar capturas de tela para usuários de Windows, macOS e Linux, consulte o guia Como usar as tags "For".

Exemplos

Vamos simplificar!

• Se você estiver inserindo uma imagem em uma linha de texto (imagem no corpo do texto), ela não deve ter mais de 16 pixels de altura.
• Se você estiver inserindo uma imagem entre duas frases em um conjunto de etapas ou lista (ordenada ou não), ela deve ser separada por um ponto e vírgula. Não há necessidade de adicionar quebras de linha ao redor das imagens.

Marcação para uma imagem no corpo do texto

É assim que a marcação wiki para uma imagem no corpo do texto se parece:

Este é o texto, seguido por [[Image:A Imagem]], e esta é a continuação do texto.

Exemplo de imagem no corpo do texto

Aqui está um trecho de texto. Bem no meio, inserimos uma imagem no corpo do texto do botão de menu do Firefox. Em seguida, adicionamos mais texto.

Marcação para uma imagem em um conjunto de etapas

É assim que a marcação wiki para separar uma imagem com um ponto e vírgula se parece:

# Esta é uma etapa.
#;[[Image:A Imagem]]
# Esta é a próxima etapa.


Exemplo de uma imagem em um conjunto de etapas

Este é um exemplo com texto mais longo e uma imagem maior:

1. Esta é uma etapa. E aqui estão algumas palavras adicionais para que você possa ver como elas ficam acima da imagem.

   

2. Esta é a próxima etapa, novamente, com palavras extras para que você possa ver como elas ficam abaixo da imagem.

Diretrizes da Knowledge Base

Se você tiver interesse em saber mais sobre como escrever e editar artigos da Knowledge Base, encontre as diretrizes aqui.