Share
Per Definition: Ein Inventar ist eine Sammlung von Elementen, die in einer Liste erfasst werden. Dieser Begriff ist nichts Neues, aber die Idee, dieses Konzept für Schnittstellen zu verwenden, ist. Brad Frost, der den Begriff "Atomic Design" geprägt hat, erklärt, dass das Erstellen agnostischer Muster wesentlich vielseitigere Komponenten schafft, die im gesamten System eingesetzt werden können.
In diesem kurzen Tutorial erstellen wir mit InVision ein Interface-Inventar. Wir arbeiten an einem fertigen Produkt mit Komponenten und Modulen, die perfekt wiederverwendbar und tragbar sind.
Ein „Modul“ ist ein Satz von standardisierten Teilen oder unabhängigen Einheiten, die zu einer komplexeren Struktur zusammengebaut werden können. Durch diesen Aufbau werden vorhersehbare Ergebnisse wahrscheinlicher.
Um diesen Gipfel der Entwicklungs-Utopie zu erreichen, verwenden wir die Board-Funktion von InVision.
Aaron Stump auf Dribbble Die Erstellung von Boards ist schmerzlos und jedes kann mit einem Namen und einer Beschreibung versehen werden. Sobald Ihre Informationen vollständig sind, klicken Sie auf die Schaltfläche "Board erstellen".
Natürlich können Boards für verschiedene Zwecke verwendet werden, z. B. für ein Bestandsaudit wie das, das wir erstellen, oder für Branding-Entdeckungen usw..
In diesem Tutorial konzentrieren wir uns auf das Interface-Inventar. Beachten Sie jedoch, dass Boards auch für andere kontextabhängige Anforderungen verwendet werden können.
Jetzt, da unser Board erstellt wurde, ist es an der Zeit, mit der eigentlichen Arbeit zu beginnen, zu der wir gekommen sind. das Interface Inventory Audit. Abhängig von Ihrem Arbeitsablauf können Sie dies auf verschiedene Arten tun, aber in der Regel beginnen Sie mit Screenshots der „Atome“ der Benutzeroberfläche wie Schaltflächen, Überschriften, Eingaben, Farben und sogar Symbolen. Da Atomic Design auch „Moleküle“ und „Organismen“ umfasst, können Sie sich bei jedem Typ weiterbewegen, während Sie der Prozess leitet.
In den meisten Fällen handelt es sich bei Molekülen und Organismen um ein viel höheres Maß an Inspektion, wobei kleinere atomare / molekulare Teile auf einzigartige Weise kombiniert werden, um ein größeres Ganzes zu schaffen.
Alisa Law Projekt. Die Organisation ist definitiv der wichtigste Teil, wenn Sie mit den Audits beginnen. Wie Sie oben sehen können, habe ich einen bestimmten Abschnitt in Muster und Variationen unterteilt, so dass ich Teile der Schnittstelle identifizieren konnte, die sich wiederholten, aber eine leichte Variation aufwiesen. Dies ist ideal, wenn es an der Zeit zum Code kommt, da Sie wiederverwendbare Muster finden können, um Ihre CSS schlank zu halten und letztendlich ein modulareres System aufzubauen.
Camp Shalom-Projekt. Atome helfen bei der Erkennung von Variationen und führen Sie sogar bei der Suche nach Namenskonventionen. der schwierigste Teil der Arbeit. Wenn Sie Ihre Atome entdecken, denken Sie an das, was ein "Anzeigemuster" und ein "Inhaltsmuster" ist, da sich beide stark unterscheiden. Wenn diese Frage nicht richtig beantwortet wird, besteht die Gefahr, dass Ihr Code von einer tragbaren und modularen Einheit abweicht, die für unterschiedliche Kontexte geeignet ist.
Farbfelder eignen sich auch für InVision-Boards. Dies kann eine große Zeitersparnis sein, wenn Sie besprechen, ob in einer Benutzeroberfläche Farbkonsistenz verwendet wird. Mithilfe von Farbfeldern können Sie auch Farbwerte nachverfolgen, wenn Sie Variablen verwenden, um Farbinformationen für die Arbeit mit CSS-Vorprozessoren zu speichern.
Murmuration Malts-Projekt Nutzen Sie Boards, um Namenskonventionen, Funktionen, Plugins / Bibliotheken zu dokumentieren und zu diskutieren und sogar Muster von einer höheren Ebene zu identifizieren.
Musteridentifizierung, die zusammen mit Kommentaren für das Murmuration Malts-Projekt verwendet wird 
Gif aus dem Blogbeitrag Invision Boards Design Collaboration Reimagined Kommentare und Skizzen sind eine leistungsstarke Funktion, die auch mit Boards verwendet werden kann! Verwenden Sie das Skizzieren, um auf Teile der betreffenden Schnittstelle hinzuweisen, oder verwenden Sie Kommentare, um erkannte Muster zu diskutieren, um die Anforderungen vor der Entwicklung zu verfestigen. Mit InVision gibt es eine Menge weiterer großartiger Kommentarfunktionen. Ich möchte Sie dazu ermutigen, mehr auf ihrer Website zu lesen.
Boards sind sehr praktisch für anfängliche Entdeckungen, egal ob Entwicklung oder visuelle Darstellung. Wenn Sie mehr erfahren möchten, lesen Sie alles über Boards im Invision Blog. Wie immer viel Spaß beim Codieren und Danke fürs Lesen!
Accentsconagua