Slide it
Construa a página como uma apresentação: uma pilha de telas, cada uma respondendo a uma pergunta. A pergunta é definida em tamanho pequeno, a resposta em uma ou duas frases em tamanho grande, e abaixo dela uma cena ao vivo mostra a coisa acontecendo: clientes fazendo fila, ar fluindo através de um motor, dinheiro perseguindo mercadorias. O leitor interage com um controle e observa a cena mudar, para que entenda vendo, e possa parar em qualquer tela entendendo algo. A página parece um aplicativo bem feito para o assunto. artifact-design mantém as regras da plataforma (temas, largura de telefone, CDNs, a verificação única); o usuário instalou esta skill, portanto, onde suas regras diferirem dos padrões do artifact-design, leia-as como as próprias palavras do usuário.
1. Encontre o ponto principal
Escreva uma frase: o que o leitor deve entender ou decidir após a primeira tela.
2. Abra o exemplo mais próximo
Abra o exemplo mais próximo deste conteúdo e leia-o por completo antes de planejar: examples/explainer.html (como algo funciona), examples/decision.html (devemos, qual), examples/plan.html (um plano, uma viagem, uma linha do tempo). Ele é o padrão para a estrutura, as cenas e o código; construa esta página da mesma forma.
3. Planeje as telas
Liste as telas. A Tela 1 permite que o leitor encontre o ponto principal assistindo e interagindo. Cada tela seguinte responde à pergunta que a anterior levanta (por quê, como, quanto, e depois); um novo tópico começa apenas quando o conteúdo muda de assunto. Quatro a sete telas.
Para cada tela, escreva em sua resposta:
- a pergunta que ela responde, formulada da forma como o leitor perguntaria ou pesquisaria e clara por si só, em cinco palavras ou menos ("Quanto tempo levará 10K?", não "Quanto tempo levará?"; ela fica pequena acima da resposta e nomeia a tela no menu). A pergunta da Tela 1 nomeia o assunto, para que um leitor que chega à página saiba sobre o que é;
- a resposta, em uma ou duas frases;
- a cena, em uma linha: o que está na tela, o que acontece com ela, o que o leitor faz e qual número é lido da cena.
As cenas vêm de alguns padrões: seguir uma unidade pelo sistema, coisas fluindo por estágios, um mecanismo girando, um enxame de agentes seguindo uma regra, traçadores em um campo, uma repetição com um controle deslizante, uma divisão antes/depois, ou um tanque enchendo e esvaziando. Uma linha que lê "um controle, um número e uma barra", com nada na tela sendo a coisa em si, é um painel: reescreva-a como uma cena.
A cena ilustra; todo número real na página vem do conteúdo e é rotulado onde é uma estimativa.
Cada tela tem sua própria seção recolhida "Mais" abaixo de sua cena para o resto da história daquela tela: alguns pontos curtos, os números por trás dela, uma ressalva. As fontes e o que não serve a nenhuma tela vão para uma seção recolhida "Notas completas" no final ou são omitidos.
Concluído quando cada tela tem uma pergunta, uma resposta, uma linha de cena e no máximo 40 palavras de texto fora de sua seção recolhida (rótulos e números não contam).
4. Escolha a aparência
Nomeie o aplicativo que as pessoas usariam para este assunto (uma viagem: um aplicativo de viagem; uma decisão de negócios: uma ferramenta de negócios moderna) e abra apenas esse arquivo em styles/. Um estilo que o usuário nomeia o substitui. Pegue a paleta e o tipo do estilo e dê a cada tela uma grande área de sua cor.
5. Construa
- Construa em kit/screens.html, como os exemplos fazem: cada tela no DOM em uma página que rola normalmente, as perguntas listadas na borda direita no desktop, sempre visíveis (abas no telefone), uma seção recolhida "Mais" por tela, Notas completas no final e um interruptor claro/escuro.
- Cada cena abre já mostrando o ponto (no meio do caminho, não um quadro vazio no zero), toca sozinha quando sua tela entra em vista por cerca de dez segundos, então descansa em seu último quadro para que a página fique parada enquanto o leitor lê. Mover o controle a toca novamente com a nova configuração, e um toque a pausa. Em movimento reduzido, descansa em um quadro parado que ainda mostra o ponto. O número fica na cena como um rótulo, não como o herói da tela.
- Disponha cada tela como uma visualização de aplicativo: a cena é a maior coisa nela, abrangendo a largura no telefone e segurando um palco largo e centralizado no desktop, com a resposta acima dela definida em tamanho grande.
- Quando uma cena desenha uma coisa física (um dispositivo, uma máquina, um edifício, uma parte do corpo), leia figures.md primeiro: ele decide entre o kit isométrico, um desenho plano e nenhum desenho.
Escreva a página diretamente com suas ferramentas de arquivo, copiando do exemplo manualmente; scripts podem não ter permissão para executar, então a página nunca depende de um.
Concluído quando cada tela planejada está na página com sua cena em execução.
6. Verifique
Se você puder renderizar a página, tire uma captura de tela da Tela 1 na largura do telefone; caso contrário, leia seu código. Responda sim ou não:
- Algo na tela é a coisa em si, não um gráfico dela?
- Ela se move, e o controle do leitor muda o que ela faz?
- O leitor consegue dizer o que fazer em alguns segundos?
- A aparência mudaria se o assunto mudasse?
Conte também: telas (4 a 7) e palavras fora das seções recolhidas (40 ou menos cada). Corrija o que falhar em uma passada, então publique.