Ver exemplos de documentação favoritos das equipas Docsie, e como replicar estes exemplos no seu portal de conhecimentos
A documentação é uma parte integrante do processo de desenvolvimento do produto. À medida que o produto passa de uma prova de conceito para uma realidade, a documentação explicativa é essencial para educar os clientes sobre como utilizar o seu produto.
Quais são as primeiras coisas que um cliente precisa de saber quando escolhe um produto? Para que serve, o que faz, e como o faço? Vamos usar o Docsie como exemplo!
Docsie é uma plataforma de documentação de produtos. Permite aos utilizadores criar, editar, anotar e publicar documentação num portal de conhecimento online. É tão simples como iniciar sessão, criar um novo Docsie Book, e escrever a sua primeira peça de conteúdo!
É certo que o mantivemos simples. No entanto, para a documentação do produto, características e funções complexas requerem explicações mais abrangentes para conduzir o conceito para casa.
Neste artigo, vamos explorar 10 dos exemplos favoritos das equipas Docsie de documentação de produtos surpreendentes. Melhor ainda? Também lhe mostraremos como fazer a sua própria documentação de produtos espantosos (inspirados pelos nossos exemplos espantosos!)
Vamos mergulhar! 🤿
10 Exemplos de Documentação de Produtos Incríveis
Abaixo, encontrará 10 fantásticos exemplos de documentação de produtos seleccionados pela equipa Docsie. Iremos explorar como replicar características e funções, e criar documentação própria igualmente espantosa em Docsie!
1 - Docker
Docker é uma plataforma de virtualização de contentores que permite o alojamento de software dentro de ambientes informáticos minúsculos, modulares e isolados individualmente. O conceito permite que vários serviços díspares sejam alojados num único sistema operativo de alojamento, dividindo e partilhando recursos do sistema operativo entre contentores.
Página inicial do Portal de Documentação Docker (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/oywtjgyzfpsynkqslptj "Docker Documentation Portal Homepage")
Docker tem um portal de documentação de produtos claramente formatado, e apresenta toda a informação essencial necessária para descarregar, instalar e pôr a funcionar com os contentores Docker. Também partilha documentação de produto multilingue, documentação de referência API, e uma secção de perguntas mais frequentes (FAQs) na parte inferior. Para os aprendizes visuais, existe também uma secção de vídeo na parte inferior direita.
Para criar uma secção de Primeiros Passos, vamos usar o Docsie como exemplo. Para começar em Docsie, deve criar uma conta, confirmar o seu endereço de correio electrónico, carregar o painel de instrumentos do Espaço de Trabalho Docsie, criar uma nova Prateleira, criar um novo Livro - isso é o básico feito! Crie um quadro de títulos de cabeçalho para cada secção, escreva instruções, adicione imagens e hiperligações e acabará com uma estrutura semelhante à abaixo!
A melhor parte? Docsie faz isto por si auto-magicamente!
Veja como isto é feito em Docsie, leia o guia de Início Rápido Docsie!
2 - Listra
Stripe é uma plataforma internacional de processamento de pagamentos com funcionalidade técnica que permite integrações personalizadas e parâmetros de pagamento usando a interface de linha de comando Stripe (CLI). A sua missão é aumentar o PIB da Internet através da construção de infra-estruturas económicas virtuais que racionalizem o comércio electrónico.
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/zpxindusvnjuriyzpock "Stripe CLI documentation page with code highlighting examples")
Esta página de Listra é conhecida como documentação técnica do produto. Explora como usar um CLI para criar recipientes Docker (olá de novo!) e comunicar com Stripe usando nada mais do que comandos terminais. Na página verá uma Tabela de Conteúdos, blocos de código com funcionalidade de copiar-colar, e hiperligações em texto.
Docsie tem blocos de código, por isso vamos explorar a forma de os utilizar
Veja este Exemplo de Blocos de Código em Docsie
Copie este código pronto a seguir o nosso exemplo -
console.log('Hello World');
Abrir um Docsie Book no Editor Docsie. O GIF abaixo mostra como encontrar a opção Code Block na barra de ferramentas, e contém um exemplo em JavaScript que imprime "Hello World!
GIF animado mostrando como adicionar blocos de código a Docsie Books](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/dvofsbntefhpqxzetglx "GIF animado mostrando como adicionar blocos de código a Docsie Books")
No seu Portal Docsie, o destaque do código é aplicado para melhorar a clareza para os leitores técnicos. Os utilizadores podem até copiar o código com o útil ícone da área de transferência!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cgnoqwpldvdycrhyzqzr "Live Docsie Portal rendering for code blocks example")
3 - Maçã
A maçã omnipresente! Não, não do tipo comestível!
A Apple oferece uma excelente documentação de produtos para a sua popular linha de smartphones iPhone. No nosso exemplo de documentação de produtos Apple, temos um colector de versões, índice, texto e cabeçalhos, e finalmente imagens em linha.
Página de Documentação do iPhone da Apple](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/xvuspkjrqcaxcncgqzbq "Página de Documentação do iPhone da Apple")
Vamos explorar o controlo de versões em Docsie!
Ao ler documentação num portal de conhecimento Docsie, os leitores podem seleccionar uma versão usando o plugin de selecção de versões.
Isto permite aos leitores ver a documentação histórica do produto - sabe, para aqueles pokes lentos na parte de trás que ainda não actualizaram!
Para criar uma nova versão em Docsie, utilize o separador de gestão de versões em Docsie Editor.
A partir daqui, clique em Adicionar versão + .
A seguir, escolher um número de versão e nome de versão antes de clicar no botão Adicionar versão. É assim tão fácil! Actualize o documento da nova versão com quaisquer alterações de características, e deixe os seus clientes encontrarem as informações mais recentes (ou tardias)!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ozelvlpwguxzksamascl "Add Version context options menu in Docsie Editor")
4 - Parse
Parse é uma excelente plataforma de software de pilha completa que fornece estruturas de código aberto para backends de aplicações. Simplesmente, oferece recursos de código pré-fabricados em que os programadores podem confiar quando se integram em qualquer projecto de desenvolvimento.
No portal de documentação Parse, há um grande exemplo de documentação sob a forma de tabelas de compatibilidade. Este monitoriza a compatibilidade de diferentes arquitecturas como Node.js e MongoDB com a plataforma Parse.
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/hkytunqwvoqlcsnwymgk "Example version compatibility table on Parse website")
Vamos fazer isto em Docsie!
Podemos fazer uma tabela de quatro colunas semelhante ao exemplo Parse utilizando blocos de tabela em Docsie.
Seleccionar o ícone de bloco de tabela, depois a opção de quatro colunas.
Ao digitar, utilize a tecla Enter para se deslocar ao longo das colunas. Use Ctrl + B no teclado para fazer o texto a negrito. Finalmente, adicione emojis usando a opção de símbolo.
Emoji e tabela de selecção de símbolos para o menu de contexto Symbol in Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/bbxeheaefvtzwkaeuavz "Emoji e tabela de selecção de símbolos para o menu de contexto Symbol in Docsie Editor")
Esta é uma forma fácil de escrever documentação API e documentação técnica de software. Pode ir mais longe adicionando hiperligações ao website Node.js, ou ligações internas a guias de utilizador relevantes. Entregue a sua próxima tabela de compatibilidade de API em Docsie!
5 - Flutter
Flutter é um conjunto de ferramentas de IU criado pela Google para impulsionar a consistência na concepção da interface do utilizador através de dispositivos móveis, web, desktop e incorporados. Promove o design e desenvolvimento rápido da interface de utilizador com um editor de código online, e uma arquitectura baseada em contentores em camadas permite uma personalização total.
Flutter hospeda uma gama de vídeos para os utilizadores verem e aprenderem sobre a plataforma. Como a plataforma é feita pelo Google, o YouTube é a escolha lógica para o nosso exemplo!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/gdcgtpfnocqjnrjxmffb "Flutter YouTube video examples on page")
Pode emular este desenho em Docsie usando blocos de encaixe de vídeo!
Como adicionar blocos de incorporação de vídeo à Docsie Books usando a barra de ferramentas do Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/aomjofizmdvjafyfpean "Como adicionar blocos de incorporação de vídeo à Docsie Books usando a barra de ferramentas do Docsie Editor")
Basta clicar dentro do seu Docsie Book, seleccionar o ícone de incorporação do vídeo, depois copiar o URL do YouTube para o campo de texto. Pode fazer o mesmo com Dailymotion, Vimeo e uma série de outros sítios de hospedagem de vídeo.
Temos um GIF que mostra este processo para que possa adicionar os seus próprios vídeos no Docsie - experimente-o!
6 - Estrutura Iónica
O Ionic Framework é um conjunto de ferramentas de IU de código aberto para a construção de aplicações de ambiente de trabalho e móveis performantes utilizando HTML, CSS, JavaScript e outras tecnologias web.
Integra-se com estruturas populares como Angular, Reagir e Vue com vários componentes UI, funções de dispositivos nativos e suporte temático.
A Ionic tem um grande exemplo de telemóvel incorporado no seu site. Vamos adicionar um exemplo semelhante ao nosso Docsie Book usando iFrame embebido!
Primeiro, copie o código abaixo:
<</iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>
A seguir, clique no bloco de inserção de código no Editor Docsie. Cole aqui o código de incorporação do iFrame, depois clique em Guardar para continuar. Temos um GIF a ilustrar este processo abaixo.
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/vrigdonkwnbamjjpkfwu "How to embed iFrame integrations in Docsie Books using Docsie Editor toolbar")
Exemplo de iFrame ao vivo no Portal Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/gumyqdlpsdckgiosmlje "Exemplo de iFrame ao vivo no Portal Docsie")
Veja a nossa lista oficial de integrações usando iFrame em Docsie!
7 - DigitalOcean
DigitalOcean é uma plataforma de serviços de computação em nuvem que permite aos clientes alojar servidores, máquinas virtuais, bases de dados e muito mais. Oferece serviços dedicados Kubernetes para aplicações de contentores escaláveis, e soluções geridas para alojamento web, aplicações móveis, grandes lagos de dados e serviços VPN.
DigitalOcean oferece funcionalidade de feedback nos seus documentos para recolher feedback dos utilizadores e iterar sobre o conteúdo. Vamos explorar como fazer isto em Docsie!
Página DigitalOcean Docs com exemplo de funcionalidade de recolha de feedback](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/qtyaynqicnsfojxakxtl "Página DigitalOcean Docs com exemplo de funcionalidade de recolha de feedback")
Vocally é a característica equivalente para a recolha de feedback em Docsie. Permite aos utilizadores deixar uma classificação de estrelas, feedback de texto e até uma gravação de vídeo - doce!
Como aceder ao Docsie Vocally no menu principal do Docsie Workspace](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "How to access Docsie Vocally in the main Docsie Workspace menu")
Aqui, pode aceder a qualquer feedback do Docsie Vocally submetido. Os utilizadores têm a opção de uma classificação de 1-5 estrelas, e uma breve explicação de texto. Alguns utilizadores podem estar dispostos a deixar uma gravação no ecrã, ajudando-o a identificar o problema exacto!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ktpgmveuafsztjjvigjx "Live example of user feedback and video playback in Docsie Vocally dashboard")
Cada cliente Docsie tem acesso a Vocally, e é inestimável para revelar os pontos fortes e fracos da sua documentação. Nem sempre é possível acertar na primeira vez, mas pode acertar mais com a próxima iteração quando os seus escritores usam Docsie Vocally!
8 - Folga
A folga tornou-se indiscutivelmente no que é o que é o que é o mundo dos negócios. A popular plataforma de mensagens instantâneas empresariais (IM) oferece chamadas de voz e vídeo, partilha de imagem e GIF, árvores de resposta de comentários e muito mais para organizar e simplificar as comunicações empresariais.
A Slack oferece dicas de ferramentas em todo o seu portal de documentação para destacar informações importantes, e funcionalidades relacionadas com a chamada. Vamos replicar isto em Docsie!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/rbxmfuwtimoecutilfjs "Example of callout blocks in Slack documentation portal")
Podemos fazer uma dica de ferramenta como a acima mencionada utilizando blocos de citações em Docsie.
Basta navegar para a barra de ferramentas Docsie Editor e seleccionar o ícone de bloco de citações. Aqui, pode escolher os tipos de informação, aviso ou bloco de perguntas. Ilustramos isto no GIF animado abaixo.
Como adicionar blocos de chamadas ou de citações à Docsie Books usando a barra de ferramentas Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cientdcamlnfozadvsgw "Como adicionar blocos de chamadas ou de citações à Docsie Books usando a barra de ferramentas Docsie Editor")
Aqui estão algumas variações usando blocos de informações, avisos e citações de perguntas num Portal Docsie ao vivo. Pode ainda usar blocos de perguntas e avisos para criar declarações de perguntas e respostas - flexione a sua criatividade usando blocos de citações no seu próximo Docsie Book!
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/wrztunbzpesljcwarenw "Live example of all three callout or quote block types in Docsie Portal")
9 - Ferrugem
Rust é uma linguagem de programação concebida tendo em mente a rapidez. Pode prevenir falhas de segregação e garantir a segurança do fio do processador. RUST pode ser utilizada para criar estruturas REST-API, comunicar com soluções de base de dados como PostgreSQL e muito mais.
A biblioteca Rust Standard contém trechos de código em linha que funcionam para simplificar a navegação da documentação API. Vamos compará-la em Docsie!
Exemplo de documentação no portal Rust com código de marcação](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/hpcrwxzsnkqkojtoemru "Exemplo de documentação no portal Rust com código de marcação")
Os trechos de código em linha incluem Vec<T> e Option<T>. Podemos fazer isto em Docsie utilizando o botão de marcação.
(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/fgijgjarucvswdawsewg "Markup toggle icon in Docsie Editor toolbar")
Para marcar o texto como código, basta clicar e arrastar para destacar o texto, depois clicar no botão de marcação. Temos um GIF a ilustrar este processo abaixo.
GIF animado mostrando como aplicar o Markup ao texto em Docsie Books usando a barra de ferramentas Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/diaerrmtfvogmuvqfylo "GIF animado mostrando como aplicar o Markup ao texto em Docsie Books usando a barra de ferramentas Docsie Editor")
O texto de marcação também contém hiperligações. Este link deve redireccionar para um glossário de termos que explique o que o trecho de código faz.
Faça um curso intensivo sobre como criar hiperligações em Docsie
10 - Levedura
Yoast é uma plataforma de optimização para motores de busca (SEO) concebida para ajudar as empresas a optimizar os seus sítios WordPress, e melhorar o conhecimento sobre as melhores práticas de SEO. O plugin Yoast SEO optimiza websites para um melhor desempenho nas páginas de resultados de motores de busca (SERPS) do Google para impulsionar o envolvimento do cliente.
A levedura oferece guias passo a passo utilizando cabeçalhos de listas no seu portal de documentação. Podemos replicar isto com cabeçalhos de listas em Docsie!
Exemplo de cabeçalhos de passos no portal de documentação Yoast (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/okmupunyophvijddimng "Exemplo de cabeçalhos de passos no portal de documentação Yoast")
Para o fazer em Docsie, primeiro crie um Livro e abra o Editor Docsie.
A seguir, clicar no campo de texto e seleccionar a opção de cabeçalho da lista na barra de ferramentas do Editor Docsie. Temos um GIF abaixo que ilustra este processo.
GIF animado mostrando como adicionar cabeçalhos de passos à Docsie Books usando a barra de ferramentas Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jyzdfkehfmaxtlegporx "GIF animado mostrando como adicionar cabeçalhos de passos à Docsie Books usando a barra de ferramentas Docsie Editor")
Os cabeçalhos da lista fazem parte da especificação HTML. Em Docsie, os cabeçalhos de lista são óptimos porque permitem criar ligações directas dentro da sua documentação. Isto significa que quando os utilizadores clicam num link, são levados directamente para o cabeçalho da lista (em vez de terem de percorrer ou deslizar!).
Como adicionar blocos de incorporação de vídeo à Docsie Books usando a barra de ferramentas Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/lradwltxuqolxfmzxxwr "Como adicionar blocos de incorporação de vídeo à Docsie Books usando a barra de ferramentas Docsie Editor")
Use estas Características Docsie para Vantagem! 🏆
Estes 10 exemplos de documentação mostram quão benéficos podem ser os guias do utilizador. Da próxima vez que criar um guia do utilizador, use estas dicas e truques do Docsie em seu benefício! Os nossos exemplos escolhidos são óptimos, mas sabemos que os seus serão ainda melhores! 📐👌
Docsie é uma plataforma de gestão de documentação de ponta-a-ponta que as empresas utilizam para criar perguntas frequentes baseadas na web, documentos de produtos, guias de utilizador, help-docs e manuais de utilizador. A plataforma apresenta colaboração centrada no cliente, extensa incorporação, traduções personalizadas, e poderosa publicação na ponta dos dedos.
(https://app.docsie.io/onboarding/) hoje, e entregue documentação digital encantadora com Docsie!