Responsive Flex Grid in Sketch mit AutoLayout- und Stack-Gruppen

Verbesserte Entwurfssysteme für Struktur, Modularität und Skalierung

Mit Tools wie FlexBox in CSS, UIStackView in iOS und FlexboxLayout in Android haben Entwickler seit langem die erforderlichen Workflows erhalten, um die Vielzahl der heute verfügbaren adaptiven und responsiven Ansichten zu verarbeiten.

Für Designer war der Layoutentwurfsprozess in einigen unserer bevorzugten Entwurfswerkzeuge immer manueller, statischer, langwieriger und im Allgemeinen weniger mathematisch präzise. Aber dank der großartigen Arbeit der Anima-Mitarbeiter haben wir möglicherweise bald die Struktur und Flexibilität, die wir brauchen, um diese Lücke besser zu schließen.

Mit der neuen Stacks-Funktion, die im neuesten Auto-Layout-Plugin enthalten ist, verfügen wir jetzt über einen Workflow, der die Benutzeroberflächenausgabe besser berücksichtigt und uns mehr Konsistenz und Wartbarkeit in allen unseren Design-Systemen ermöglicht. (Haftungsausschluss - Dieses Konzept befindet sich noch in einem frühen Stadium. Nicht jeder Layout-Typ profitiert von diesem System.

Die Demo

Im folgenden Video habe ich ein Proof-of-Concept-Flex-Grid-Layout zusammengestellt, um die Vorzüge von Stacks zu demonstrieren. Es ist eine Zeichenfläche, die die Struktur einer einfachen Webseite widerspiegelt.

Noch in frühen Erkundungsphasen ist die folgende Funktionalität in die Vorlage integriert:

  • Desktop zu Handy in wenigen Klicks.
  • Zeichenflächen sind in der Größe veränderbar und die Rasterausrichtung / -verteilung wird nicht unterbrochen
  • Gitter strukturiert nach:
  • Karosserie
     - Header
     - Main
     - - Abschnitte
     - - - Zeilengruppen (hat eine Geschwisterkastengrößenebene)
     - - - - Reihen
     - - - - - Säulen
     - - - - - - Module
     - - - - - - - Komponenten (verschachtelte Symbole mit interner Logik)
     - Fußzeile
  • Verwenden Sie verschachtelte Symbole, die durch eine Kombination aus Sketch Resize-Eigenschaften, Autolayout-Pinning und Stapelgruppen definiert sind, um ein modulares System aus austauschbaren Komponenten zu erstellen.
  • Das Layout passt sich der Breite der Zeichenfläche an (der Inhalt hat eine maximale Breite von 1200px und das Handy verfügt über integrierte Dachrinnen).
  • Vielzahl von Säulenverteilungen und einfaches Einklappen / Modifizieren von Dachrinnen.
  • und
    wachsen und schrumpfen unabhängig von
    .
  • Die Höhe ändert sich zu
    . Drücken Sie die
    -Taste in der Zeichenfläche nach unten, während die Ränder und Abstände intakt bleiben, wie dies bei einer Webseite der Fall wäre.
  • Die Höhe von kann angepasst werden, um die Höhe der untergeordneten Spalten zu beeinflussen
  • Die Ausrichtung der Spalten (oben, in der Mitte, unten, gestreckt) kann auf Zeilenebene definiert werden.
  • Durch Hinzufügen (oder Löschen) einer neuen Spalte aus der Zeile wird die Breite der gleichgeordneten Spalten automatisch angepasst, um sie entsprechend anzupassen.
  • Durch Hinzufügen eines neuen untergeordneten Moduls in der Spalte wird diese Spalte vertikal vergrößert (Module enthalten eine beliebige Anzahl von Inhaltstypen, z. B. Bilder, Text, Listen, Tabellen, Gruppen und Symbole).
  • Die Ausrichtung der Module (links, mittig, rechts, gestreckt) kann auf Spaltenebene definiert werden.
  • Austauschen von Symbolkomponenten, um Inhalte zu ersetzen oder neue Ebenen an die vorhandene Komponente anzuheften.
  • Die Desktop-Zeichenfläche wurde für die Verwendung eines 8-Punkte-Grundlinienrasters eingerichtet.

Die Skizzendatei

Hier ist es. Fühlen Sie sich frei, es in irgendeiner Weise zu verbessern und lassen Sie es mich wissen.
* WICHTIG * - Die Datei funktioniert nur, wenn Sie die neueste Version von Auto Layout mit Stacks-Unterstützung (.0.2.0 zum jetzigen Zeitpunkt) haben.

https://cl.ly/2v2I373P2E1f

Einige abschließende Gedanken

Ich hoffe, das hat einigen Leuten geholfen. Ich werde die Möglichkeiten von Autolayout und Stacks genauer untersuchen. Ab dieser Version sind mir ein paar kleine Macken bei der mathematischen Rundung aufgefallen, aber hoffentlich werden diese mit der Zeit behoben. Unter den Anfragen, die ich an die Entwickler gerichtet habe, sind diese meiner Meinung nach wertvoll.

  • Die Möglichkeit, einer gestapelten Gruppe (übergeordnete Zeile der Spalten) einen Hintergrund hinzuzufügen, ohne die Stack-Logik zu beeinträchtigen. In HTML / CSS würde dies einfach auf der Ebene oder „div“ erfolgen, in Sketch ist dies jedoch derzeit nicht möglich.
    Es gibt derzeit eine Möglichkeit, dies zu tun, indem eine Hintergrundebene mit einer gestapelten Gruppe gruppiert und der Hintergrund auf "Oben / Links / 100% Breite & Höhe" fixiert wird. Während der Hintergrund wächst, um den Inhalt aufzunehmen, wird er nicht verkleinert, wenn die Inhalt wird entfernt. Ich glaube, dass das Schrumpfen bereits auf der TO-DO-Liste des Teams steht.
  • Die Einführung von Haltepunkten in der Zeichenfläche und das Austauschen von Symbolen auf der Grundlage der Zeichenfläche (Austauschen einer Navigation mit 4 Elementen mit einem Hamburger-Symbol, wenn die Zeichenfläche <400 Pixel oder besser noch, mithilfe eines Ansatzes für Containerabfragen.
  • Mit diesen Haltepunkten kann zwischen horizontalen und vertikalen gestapelten Gruppen umgeschaltet werden, so dass die Spalten übereinander gestapelt werden, wenn nicht genügend Platz vorhanden ist. Und für Spalten, die umbrochen werden sollen, falls angegeben.
  • Die Möglichkeit, die prozentuale Breite pro Spalte anzugeben.
    (Update - Eine Version dieser Idee wurde gerade mit der Funktion "Gewichte" in das Plugin implementiert.)
  • Obwohl dies nicht unbedingt dem Anima-Team überlassen wäre, sollte Sketch auch die Unterstützung von Variablen einführen, insbesondere jetzt mit Eigenschaften wie Abstand, minimale und maximale Höhe und anderen Werten, die über mehrere Ebenen hinweg konsistent sein sollten. Diese Variablen können außerdem verwendet werden, um Farben zuzuordnen und den Sass-Übergabevorgang zu unterstützen.

Das ist alles was ich habe! Ich wollte das Team von Anima nur noch einmal grüßen. Sie sind unglaublich talentiert, reaktionsschnell und einladend. Bitte unterstützen Sie ihre harte Arbeit! Treten Sie ihrer Facebook-Seite bei.

Wenn Sie Fragen oder (nette!) Kommentare haben, können Sie diese gerne unten posten oder auf Twitter veröffentlichen.