Der Canvas

Der Canvas ist der live laufende, interaktive Entwurf. Klicken, tippen und scrollen Sie darin wie auf einer echten Seite. Die Leiste darüber enthält die Werkzeuge, die auf dieser Seite beschrieben sind.

Vorschau und Code

• Vorschau zeigt den funktionierenden Screen.
• Code zeigt den React-Code der Version im Canvas. Er ist schreibgeschützt; wählen Sie Code kopieren, um ihn zu kopieren.

Desktop-, Tablet- und Smartphonebreite

Mit den drei Gerätebuttons sehen Sie den Entwurf in voller Breite, mit 768 Pixeln (Tablet) oder 390 Pixeln (Smartphone). Sie erscheinen, wenn der Canvas genug Platz für sie hat.

Alle Größen, die Schaltfläche nach dem Smartphone, zeigt den Entwurf in Smartphone-, Tablet- und Desktopbreite nebeneinander, jeweils als laufende Seite, passend verkleinert. Hell oder dunkel und die Vorschausprache gelten für alle drei, sodass Sie eine Sprache in jeder Breite gleichzeitig prüfen können. Zum Auswählen, Messen oder Anmerken wechseln Sie zurück zu einer Breite.

Abstände messen

Wählen Sie Abstände messen (das Linealsymbol), um Abstände wie in einem Designtool zu prüfen. Sie können auch Alt (auf dem Mac die Wahltaste) über dem Canvas gedrückt halten, ohne die Funktion einzuschalten.

• Fahren Sie über ein Element, um rote Lineale an allen vier Seiten zu sehen, mit den Abständen in Pixeln. Nach oben, unten, links und rechts verläuft jedes zum nächsten Element in seiner Linie oder zum Rand des umgebenden Containers, wenn nichts dazwischen liegt. Das Element zeigt außerdem seine Breite und Höhe.
• Klicken Sie auf ein Element, um von ihm aus zu messen, und fahren Sie dann über ein anderes, um die Abstände zwischen beiden zu sehen. Fahren Sie über seinen Container, um alle vier Innenabstände zu sehen.
• Auf einem Touchscreen tippen Sie auf ein Element und dann auf ein anderes.
• Drücken Sie Esc, um das angeklickte Element loszulassen, und noch einmal, um das Messen zu beenden.

Die Abstände sind CSS-Pixel des Entwurfs, Rahmen eingeschlossen, daher ändert die Größe des Canvas nichts daran. Während Sie messen, lösen Klicks keine Buttons aus und folgen keinen Links.

Neu laden

Nachdem Sie in einem Entwurf herumgeklickt haben, bringt Canvas neu laden ihn zurück zu seinem ersten Screen. Der Button ist deaktiviert, bis Sie mit dem Entwurf interagiert haben.

Versionen

Jeder Entwurf einer Sitzung wird als Version aufbewahrt. Gibt es mehr als eine, zeigt die Leiste einen Zähler wie 2/2 mit Buttons für Rückgängig und Wiederholen.

• Rückgängig zeigt die vorherige Version, Wiederholen die nächste. Sie können auch ⌘+Z und ⌘+Umschalt+Z drücken (Strg unter Windows), wenn Sie nicht gerade in ein Feld tippen. Die Version wird ausgetauscht, ohne den Arbeitsbereich neu zu laden.
• Ihre nächste Anfrage überarbeitet die Version, die im Canvas ist. So können Sie zurückgehen und eine andere Richtung einschlagen.
• Ein gespeicherter Prototyp behält bis zu seine 20 neuesten Versionen.

Versionen vergleichen

Wählen Sie Versionen vergleichen, um zwei Versionen nebeneinander mit einem Regler dazwischen zu sehen. Beide Seiten scrollen gemeinsam.

• Wählen Sie zwei beliebige Versionen in den Listen Vorher und Nachher.
• Ziehen Sie die Trennlinie, oder fokussieren Sie sie und verwenden Sie die Pfeiltasten (halten Sie Umschalt für größere Schritte, Pos1 und Ende für die Ränder).
• Zu Vorher zurückkehren bringt die Vorher-Version in den Canvas, sodass Ihre nächste Anfrage sie überarbeitet.
• Wählen Sie Fertig oder drücken Sie Esc, um den Vergleich zu verlassen.

Vorschau hell und dunkel

Verwendet ein Entwurf eines Ihrer Farbthemes, erscheint ein Button Dunkelmodus, mit dem Sie beide Modi prüfen können. Das ändert nur den Entwurf, nicht Vibr.

Vorschau in einer anderen Sprache

Der Button Vorschausprache (das Übersetzungssymbol) zeigt den Entwurf in einer anderen Sprache. So sehen Sie, wie Ihr Design standhält, bevor ihn jemand tatsächlich übersetzt. Wählen Sie eine von über 40 Sprachen, darunter Arabisch und Hebräisch, die von rechts nach links gelesen werden. Texte, Platzhalter und Labels des Entwurfs ändern sich, und die Seite setzt Sprache und Leserichtung passend. Ihr Code ändert sich nicht, und die Sprache bleibt aktiv, während Sie weiterbauen.

• Ihr Modell übersetzt. Vibr sendet den sichtbaren Text des Entwurfs mit Ihrem Schlüssel an das gewählte Modell, jeweils einige Dutzend Zeichenfolgen auf einmal. Neuer Text, etwa ein hochzählender Wert, wird übersetzt, sobald er erscheint. Jede Zeichenfolge wird pro Sitzung einmal übersetzt.
• Rechts nach links. Neue Entwürfe verwenden logische Eigenschaften wie marginInlineStart, die sich von selbst umkehren. Solange Arabisch oder Hebräisch aktiv ist, sucht der Review außerdem nach Stilen, die links oder rechts verwenden, und nach Pfeilen, die nicht gespiegelt werden, und Reparieren behebt sie, bevor der Entwurf angezeigt wird. Ein Entwurf, der vor dem Umschalten entstanden ist, erhält stattdessen einen Hinweis mit Für rechts nach links korrigieren.
• Pseudo braucht kein Modell. Es versieht jeden Buchstaben mit Akzenten und macht den Text etwa 40 % länger, wie es bei Deutsch oder Finnisch oft der Fall ist. So fallen abgeschnittene Labels und feste Breiten sofort auf.
• Beispiele brauchen keinen Schlüssel. Die Beispiele gibt es in allen Sprachen von Vibr, daher funktioniert die Vorschau in jeder davon, auch Arabisch und Hebräisch, ohne Schlüssel. Andere Sprachen und Text, den Sie einem Beispiel hinzufügen, übersetzt Ihr Modell.
• In dieser Sprache exportieren. Bei aktiver Sprache ergänzt das Menü Exportieren den Eintrag App: mit dem Namen dieser Sprache. Die exportierte Seite öffnet sich in der Sprache und mit ihrer Leserichtung und übersetzt auch die übrigen Texte des Entwurfs, etwa andere Tabs und Dialoge. Andere Exporte behalten den Originaltext des Entwurfs.
• Schriften. Fehlen einer importierten Schrift die Buchstaben der Sprache, nennt ein Hinweis einige davon und schlägt ähnliche Google Fonts vor, die sie enthalten. … verwenden fügt eine davon der Typo-Skala der Schrift als Ersatzschrift hinzu, sodass Canvas und exportierte Apps sie laden.
• Wählen Sie Originaltext des Entwurfs, um zurückzukehren.

Links im Canvas

Links verlassen den Canvas nicht, sodass Sie Ihren Entwurf nicht durch einen Klick verlieren können. Vibr sagt Ihnen stattdessen, wohin der Link führt. Eine exportierte App folgt ihren Links. Buttons, die einen anderen gespeicherten Screen öffnen, funktionieren mit Abspielen; siehe Flows.

Auf dem Smartphone

Auf kleinen Bildschirmen zeigt Vibr Chat und Vorschau als Tabs. Ein Punkt auf Vorschau bedeutet, dass es einen neuen Entwurf gibt, den Sie noch nicht gesehen haben. Werkzeuge, die nicht über den Canvas passen, wandern in das Menü Aktionen. Wenn die Werkzeuge über dem Canvas nicht alle passen, wischen Sie sie seitlich.