Slide it

Was macht Slide it?

Baue die Seite als Präsentation: einen Stapel von Bildschirmen, von denen jeder eine Frage beantwortet. Die Frage wird klein gesetzt, die Antwort in ein oder zwei Sätzen groß, und darunter zeigt eine Live-Szene das Geschehen: Kunden, die Schlange stehen, Luft, die durch einen Motor strömt, Geld, das Waren jagt. Der Leser spielt mit einer Steuerung und beobachtet, wie sich die Szene verändert, so dass er durch Sehen versteht und bei jedem Bildschirm anhalten kann und etwas versteht. Die Seite fühlt sich an wie eine gut gemachte App für ihr Thema. artifact-design behält die Plattformregeln (Themen, Telefonbreite, CDNs, die einzelne Prüfung); der Benutzer hat diese Skill installiert, also wo ihre Regeln von den Standardeinstellungen von artifact-design abweichen, lies sie als die eigenen Worte des Benutzers.

1. Finde die Hauptaussage

Schreibe einen Satz: Was der Leser nach dem ersten Bildschirm verstanden oder entschieden haben sollte.

2. Öffne das nächstgelegene Beispiel

Öffne das Beispiel, das diesem Inhalt am nächsten kommt, und lies es vollständig, bevor du planst: examples/explainer.html (wie etwas funktioniert), examples/decision.html (sollen wir, welches), examples/plan.html (ein Plan, eine Reise, ein Zeitplan). Es ist der Maßstab für Struktur, Szenen und Code; baue diese Seite auf die gleiche Weise.

3. Plane die Bildschirme

Liste die Bildschirme auf. Bildschirm 1 lässt den Leser die Hauptaussage durch Beobachten und Spielen finden. Jeder nächste Bildschirm beantwortet die Frage, die der vorherige aufwirft (warum, wie, wie viel, was als nächstes); ein neues Thema beginnt nur, wenn der Inhalt das Thema wechselt. Vier bis sieben Bildschirme.

Schreibe für jeden Bildschirm in deiner Antwort:

• die Frage, die er beantwortet, so formuliert, wie der Leser sie stellen oder suchen würde und für sich allein klar, in fünf Wörtern oder weniger ("Wie lange dauern 10K?", nicht "Wie lange wird es dauern?"; sie sitzt klein über der Antwort und benennt den Bildschirm im Menü). Die Frage von Bildschirm 1 benennt das Thema, so dass ein Leser, der auf die Seite kommt, weiß, worum es geht;
• die Antwort, in ein oder zwei Sätzen;
• die Szene, in einer Zeile: was auf dem Bildschirm ist, was damit passiert, was der Leser tut und welche Zahl von der Szene abgelesen wird.

Szenen stammen aus einigen Mustern: einer Einheit durch das System folgen, Dinge, die durch Phasen fließen, ein Mechanismus, der sich dreht, ein Schwarm von Agenten, die einer Regel folgen, Tracer in einem Feld, eine Wiederholung mit einem Schieberegler, ein Vorher/Nachher-Split oder ein Tank, der sich füllt und entleert. Eine Zeile, die "eine Steuerung, eine Zahl und ein Balken" lautet, wobei nichts auf dem Bildschirm die Sache selbst ist, ist ein Dashboard: schreibe sie als Szene um.

Die Szene veranschaulicht; jede reelle Zahl auf der Seite stammt aus dem Inhalt und ist gekennzeichnet, wo sie eine Schätzung ist.

Jeder Bildschirm hat seine eigene eingeklappte "Mehr"-Falte unter seiner Szene für den Rest der Geschichte dieses Bildschirms: ein paar kurze Punkte, die Zahlen dahinter, eine Einschränkung. Quellen, und was keinem Bildschirm dient, gehen in einen eingeklappten Abschnitt "Vollständige Notizen" am Ende oder werden weggelassen.

Fertig, wenn jeder Bildschirm eine Frage, eine Antwort, eine Szenenzeile und maximal 40 Wörter Text außerhalb seiner Falte hat (Beschriftungen und Zahlen zählen nicht).

4. Wähle das Aussehen

Nenne die App, die die Leute für dieses Thema verwenden würden (eine Reise: eine Reise-App; eine Geschäftsentscheidung: ein modernes Geschäftstool) und öffne nur diese Datei in styles/. Ein vom Benutzer genannter Stil ersetzt sie. Nimm die Palette und den Schriftschnitt aus dem Stil und gib jedem Bildschirm eine große Fläche in seiner Farbe.

5. Baue

• Baue auf kit/screens.html auf, wie die Beispiele: jeder Bildschirm im DOM auf einer Seite, die normal scrollt, die Fragen auf dem Desktop am rechten Rand aufgelistet, immer sichtbar (Registerkarten auf einem Telefon), eine "Mehr"-Falte pro Bildschirm, vollständige Notizen am Ende und ein Hell/Dunkel-Umschalter.
• Jede Szene öffnet bereits und zeigt den Punkt (in der Mitte, nicht einen leeren Rahmen bei Null), spielt von selbst, wenn ihr Bildschirm in den Blick kommt, für etwa zehn Sekunden und ruht dann auf ihrem letzten Bild, so dass die Seite ruhig ist, während der Leser liest. Das Bewegen der Steuerung spielt sie erneut mit der neuen Einstellung, und ein Antippen pausiert sie. Bei reduzierter Bewegung ruht sie auf einem Standbild, das dennoch den Punkt zeigt. Die Zahl sitzt auf der Szene als Beschriftung, nicht als Held des Bildschirms.
• Lege jeden Bildschirm als App-Ansicht aus: Die Szene ist das größte darauf, erstreckt sich über die Breite auf einem Telefon und hält eine breite, zentrierte Bühne auf einem Desktop, mit der Antwort darüber groß gesetzt.
• Wenn eine Szene ein physisches Ding zeichnet (ein Gerät, eine Maschine, ein Gebäude, ein Körperteil), lies zuerst figures.md: es entscheidet zwischen dem isometrischen Bausatz, einer flachen Zeichnung und keiner Zeichnung.

Schreibe die Seite direkt mit deinen Dateiwerkzeugen, kopiere von Hand aus dem Beispiel; Skripte dürfen möglicherweise nicht ausgeführt werden, daher hängt die Seite nie von einem ab.

Fertig, wenn jeder geplante Bildschirm auf der Seite ist und seine Szene läuft.

6. Überprüfe

Wenn du die Seite rendern kannst, mache einen Screenshot von Bildschirm 1 in Telefonbreite; wenn nicht, lies ihren Code. Antworte mit Ja oder Nein:

• Ist etwas auf dem Bildschirm die Sache selbst, kein Diagramm davon?
• Bewegt es sich und ändert die Steuerung des Lesers, was es tut?
• Kann der Leser innerhalb weniger Sekunden erkennen, was zu tun ist?
• Würde sich das Aussehen ändern, wenn sich das Thema ändern würde?

Zähle auch: Bildschirme (4 bis 7) und Wörter außerhalb der Falten (40 oder weniger pro Stück). Behebe, was in einem Durchgang fehlschlägt, dann veröffentliche.