Skip to main content

Das neueste Atomic.io-Update enthält scrollbare Container

01 von 03

Das neueste Atomic.io-Update enthält scrollbare Container

Vor ein paar Monaten habe ich gezeigt, wie atomic.io für die Prototypenbewegung verwendet werden kann. Einer der wichtigsten Punkte, die ich in dem Stück angesprochen habe, war "Bewegung zeigen", anstatt es den Vorstellungen des Kunden oder Teams zu überlassen. Tatsächlich ist dies so kritisch geworden, dass eine völlig neue Kategorie von UX / UI-Werkzeugen auftaucht. Dazu gehören Apple Keynote, Adobe Edge Animate, After Effects und UXPin, um nur einige zu nennen. Das neue Kind auf dem Block ist Atomic.io, das sich in der offenen Beta befand, als ich zum ersten Mal über das Produkt schrieb.

Das Beste an offenen Betas ist, dass sie dem Softwarehersteller die Möglichkeit geben, Benutzerfeedback zu den Funktionssätzen einschließlich fehlender Funktionen zu sammeln, sie der Anwendung hinzuzufügen und vor der kommerziellen Version testen zu lassen. Bei Atomic war ein Feature, das ich wirklich vermisst habe, die Möglichkeit, Inhalte vertikal oder horizontal zu scrollen. Dazu gehören beispielsweise Karten, Diashows oder praktisch alles, was ein Benutzer innerhalb der Grenzen der Benutzeroberfläche einer App oder eines Standortes streichen oder ziehen würde.

Das war wohl ein Thema, um das sich viele Nutzer gefragt hatten, da gerade in diesem Monat scrollbare Container in die App eingeführt wurden und ich zugeben muss, dass das Erstellen von scrollbaren Inhalten im Prototyp einfach zu aktivieren ist.

Hier ist wie…

02 von 03

So erstellen Sie vertikalen Bildlaufinhalt in Atomic

Sie müssen sich zunächst für eine kostenlose 30-Tage-Testversion registrieren. Am Ende dieses Zeitraums erhalten Sie drei Preispläne.

Das erste, was Sie wissen müssen, ist die gesamte Arbeit, die Sie im Browser erledigen werden. Die App richtet sich strikt an Google Chrome. Sobald Sie sich angemeldet haben, werden Sie zu der Projekte Seite. Klicken Sie zum Öffnen der App aufSchaltfläche "Neues Projekt".

Wenn die Benutzeroberfläche angezeigt wird, werden Sie sehen, dass es eine begrenzte Anzahl von Tools gibt, die Möglichkeit, Seiten und Ebenen zu den Seiten, der Zeichenfläche und rechts neben einem kontextabhängigen Eigenschaftenfenster hinzuzufügen.In diesem Beispiel habe ich mit einer iPhone 5-Vorgabe von 320 x 568 begonnen. Ich öffne dann den Ordner mit den Bildern, die gescrollt werden sollen, und zog sie auf die Leinwand. Sie wurden automatisch zum Projekt hinzugefügt und Sie können sehen, dass sie sich auf einzelnen Ebenen befinden, wenn Sie dies tun Klicken Sie auf die Registerkarte "Ebenen". Ich habe dann das Pfeilwerkzeug (Auswahl) ausgewählt, ein Bild ausgewählt und an eine neue Position gezogen, um etwas Abstand zwischen ihnen zu haben. Ich habe dann alle Bilder ausgewählt und auf die Schaltfläche Vertikal verteilen geklickt in der Symbolleiste. Dies verteilt die Bilder gleichmäßig.

Im nächsten Schritt wählen Sie den gesamten Inhalt aus, für den ein Bildlauf durchgeführt werden soll, und wählen Sie einen der beiden Klicken Sie auf die Schaltfläche Container, oder wählen Sie unter der Schaltfläche Gruppe die Option Bildlaufcontainer erstellen aus Pop runter Sobald der Container erstellt ist, sehen Sie ihn im Ebenenbedienfeld. Klicken Sie auf den Container und ziehen Sie den unteren Griff nach oben zum unteren Rand der Leinwand. Klicken Sie auf die Schaltfläche Vorschau Im unteren Bereich des Eigenschaftenfensters wird ein Browserfenster geöffnet. Verwenden Sie das Scrollrad Ihrer Maus, um den Inhalt zu scrollen. Um zu Ihrem Projekt zurückzukehren, Klicken Sie auf die Schaltfläche Bearbeiten Im rechten unteren Bereich des Browserfensters.

03 von 03

So erstellen Sie horizontalen Bildlaufinhalt in Atomic

Horizontales Scrollen ist genauso einfach zu bewerkstelligen.

Ziehen Sie in diesem Fall eine Reihe von Bildern auf die Leinwand und stoßen Sie sie aneinander. Wenn die Bilder ausgewählt sind, klicke ich auf die Schaltfläche "Oben ausrichten", um sicherzustellen, dass sie alle miteinander ausgerichtet sind.

Ich hielt dann die Umschalttaste gedrückt und wählte jede Ebene im Ebenenbedienfeld aus. Mit den ausgewählten Bildern kann ich klickte auf die Schaltfläche Container undin den Eigenschaftenfenstern Horizontal ausgewählt im Bereich Behaviours.

Ich habe das Projekt dann in einem Browser-Fenster getestet, indem Sie auf die Schaltfläche Vorschau klicken.

Obwohl ich gezeigt habe, wie Sie einzelne Versionen für vertikales und horizontales Scrollen erstellen, können Sie diese Container in separaten Bereichen des Bildschirms anzeigen, solange Sie den scrollbaren Inhalt in einen Container legen. Beispielsweise kann eine Webseite in einem Seitenmenü einen vertikal durchlaufenden Inhalt und in einer Bildschirmpräsentation auf derselben Seite einen horizontalen Bildlauf aufweisen. Tatsächlich kann ein Container sowohl vertikal als auch horizontal scrollen, z. B. für einen Bildwähler mit einem Dutzend Miniaturbildern.

Weitere Informationen zu dieser Funktion in atomic.io finden Sie unter:

  • Die Blog-Ankündigung
  • Scrolling-Container-Tutorial
  • Maskieren mit Containern
  • Fehlerbehebung beim Scrollen von Containern