Het canvas

Het canvas is het live, interactieve concept. Klik, typ en scrol erin zoals op een echte pagina. In de balk erboven staan de tools op deze pagina.

Voorbeeld en code

• Voorbeeld toont het werkende scherm.
• Code toont de React-code van de versie op het canvas. Die is alleen-lezen; kies Code kopiëren om hem te kopiëren.

Desktop-, tablet- en telefoonbreedte

Gebruik de drie apparaatknoppen om het concept op volledige breedte te bekijken, op 768 pixels (tablet) of op 390 pixels (telefoon). Ze verschijnen als er op het canvas ruimte voor is.

Alle formaten, de knop na de telefoon, toont het concept op telefoon-, tablet- en desktopbreedte naast elkaar, elk als live pagina die verkleind is zodat hij past. Licht of donker en de voorbeeldtaal gelden voor alle drie, zodat je een taal op elke breedte tegelijk controleert. Om te selecteren, meten of annoteren ga je terug naar één breedte.

Afstand meten

Kies Afstand meten (het liniaalpictogram) om afstanden te controleren zoals je dat in een ontwerptool doet. Je kunt ook Alt (Option op een Mac) ingedrukt houden boven het canvas zonder het aan te zetten.

• Beweeg over een element om rode linialen aan alle vier de kanten te zien, met de afstanden in pixels. Naar boven, beneden, links en rechts loopt elke liniaal naar het dichtstbijzijnde element in dezelfde lijn, of naar de rand van de container eromheen als er niets tussen zit. Het element toont ook zijn breedte en hoogte.
• Klik op een element om vanaf daar te meten, en beweeg dan over een ander element om de ruimte ertussen te zien. Beweeg over de container om alle vier de binnenmarges te zien.
• Tik op een touchscreen op een element en daarna op een ander.
• Druk op Esc om het aangeklikte element los te laten, en nog een keer om te stoppen met meten.

De afstanden zijn CSS-pixels van het concept, randen inbegrepen, dus de grootte van het canvas verandert ze niet. Tijdens het meten drukken klikken geen knoppen in en volgen ze geen links.

Opnieuw laden

Als je in een concept hebt rondgeklikt, brengt Opnieuw laden het terug naar het eerste scherm. De knop is uitgeschakeld tot je iets in het concept hebt gedaan.

Versies

Elk concept in een sessie wordt als versie bewaard. Zodra er meer dan één is, toont de balk een teller zoals 2/2 met knoppen voor ongedaan maken en opnieuw.

• Ongedaan maken toont de vorige versie en Opnieuw de volgende. Je kunt ook op ⌘+Z en ⌘+Shift+Z drukken (Ctrl op Windows) als je niet in een veld aan het typen bent. De versie wisselt zonder dat de werkruimte opnieuw laadt.
• Je volgende verzoek past de versie aan die op het canvas staat, dus je kunt teruggaan en een andere richting kiezen.
• Een opgeslagen prototype bewaart maximaal de 20 nieuwste versies.

Versies vergelijken

Kies Versies vergelijken om twee versies naast elkaar te zien met een schuifregelaar ertussen. Beide kanten scrollen samen.

• Kies twee willekeurige versies in de lijsten Voor en Na.
• Sleep de scheidingslijn, of geef die focus en gebruik de pijltoetsen (houd Shift ingedrukt voor grotere stappen, Home en End voor de randen).
• Terug naar voor zet de voor-versie op het canvas, zodat je volgende verzoek die aanpast.
• Kies Klaar of druk op Esc om te stoppen.

Licht en donker voorbeeld

Als een concept een van je kleurthema's gebruikt, verschijnt er een knop Donkere modus zodat je beide modi kunt controleren. Dit verandert alleen het concept, niet Vibr.

Voorbeeld in een andere taal

De knop Voorbeeldtaal (het vertaalicoon) toont het concept in een andere taal, zodat je ziet hoe je ontwerp standhoudt voordat iemand het echt vertaalt. Kies uit meer dan 40 talen, waaronder Arabisch en Hebreeuws, die van rechts naar links lezen. De tekst, placeholders en labels van het concept veranderen, en de pagina stelt de taal en leesrichting daarop in. Je code verandert niet, en de taal blijft aan terwijl je verder bouwt.

• Je model vertaalt. Vibr stuurt de zichtbare tekst van het concept naar het model dat je hebt gekozen, met je sleutel, een paar dozijn teksten tegelijk. Nieuwe tekst, zoals een teller die oploopt, wordt vertaald zodra die verschijnt. Elke tekst wordt één keer per sessie vertaald.
• Rechts naar links. Nieuwe concepten gebruiken logische eigenschappen, zoals marginInlineStart, die vanzelf omdraaien. Zolang Arabisch of Hebreeuws aanstaat, zoekt de designbeoordeling ook naar stijlen die links of rechts gebruiken en naar pijlen die niet worden gespiegeld, en Repareren lost die op voordat het concept wordt getoond. Een concept dat je vóór het wisselen hebt gemaakt, krijgt in plaats daarvan een melding met Corrigeren voor rechts naar links.
• Pseudo heeft geen model nodig. Het geeft elke letter een accent en maakt de tekst ongeveer 40% langer, zoals Duits of Fins vaak uitvalt, zodat afgekapte labels en vaste breedtes meteen opvallen.
• Voorbeelden hebben geen sleutel nodig. De voorbeelden bestaan in alle talen van Vibr, dus een voorbeeld bekijken in een van die talen, ook Arabisch en Hebreeuws, werkt zonder sleutel. Andere talen, en tekst die je aan een voorbeeld toevoegt, vertaalt je model.
• Exporteren in die taal. Met een taal aan voegt het menu Exporteren App: taal toe. De geëxporteerde pagina opent in die taal, met de bijbehorende leesrichting, en vertaalt ook de overige tekst van het concept, zoals andere tabbladen en dialoogvensters. Andere exports behouden de oorspronkelijke tekst van het concept.
• Lettertypen. Heeft een geïmporteerd lettertype de letters van de taal niet, dan noemt een melding er een paar en stelt vergelijkbare Google Fonts voor die ze wel hebben. … gebruiken voegt er een toe aan de typografische schaal van het lettertype als reserve, zodat het canvas en geëxporteerde apps het laden.
• Kies Oorspronkelijke tekst van het concept om terug te gaan.

Links in het canvas

Links verlaten het canvas niet, dus je kunt je concept niet kwijtraken door erop te klikken. Vibr vertelt je in plaats daarvan waar de link naartoe gaat. Een geëxporteerde app volgt de links wel. Knoppen die een ander opgeslagen scherm openen, werken met Afspelen; zie Flows.

Op een telefoon

Op kleine schermen toont Vibr Chat en Voorbeeld als tabbladen. Een stip op Voorbeeld betekent dat er een nieuw concept is dat je nog niet hebt gezien. Tools die niet boven het canvas passen, verhuizen naar het menu Acties. Passen de tools boven het canvas niet allemaal, veeg ze dan opzij.