Så här utför du ett gränssnitt med InVision

Per definition: En inventering är en samling av objekt som spåras i en lista. Denna term är inte något nytt, men idén att använda detta begrepp mot gränssnitt är. Brad Frost, som myntade termen "Atomic Design", säger att skapa agnostiska mönster bidrar till att bygga långt mer mångsidiga komponenter som kan användas överallt i ett system.

I den här korta handledningen använder vi InVision för att skapa ett gränssnitt inventering. Vi kommer att arbeta mot en färdig produkt med komponenter och moduler som är helt återanvändbara och bärbara.

Komma igång

En "modul" är en uppsättning standardiserade delar eller fristående enheter som kan monteras för att bygga en mer komplex struktur. Att bygga detta sätt gör förutsägbara resultat mer troliga.

För att nå detta höjdpunkt i utvecklingsutopi använder vi InVision's Boards-funktionen.

Aaron Stump på dribbble

Styrelserna är smärtsamma att skapa och var och en kan betecknas med ett namn och en beskrivning. När din information är klar klickar du på knappen "skapa bord".

Styrelser kan naturligtvis användas för olika ändamål, oavsett om det gäller en lagerrevision som den vi skapar eller för branding upptäckter och så vidare.

Vi kommer att fokusera på gränssnittets inventering för syftet med denna handledning, men kom ihåg att styrelser kan användas för andra kontextuella behov.

Skapa revisionen

Nu när vår styrelse har skapats är det dags att gå ner till affärer och börja det verkliga arbetet vi har kommit att göra. Granskning av gränssnittets inventarier. Beroende på ditt arbetsflöde kan detta göras på några olika sätt, men vanligtvis börjar det med skärmdumpar av gränssnittets "atomer" som knappar, rubriker, inmatningar, färger och jämna ikoner. Eftersom Atomic Design även innehåller "molekyler" och "organismer" kan du flytta på varje typ som processen leder dig.

I de flesta fall är molekyler och organismer en mycket högre inspektionsnivå som innehåller mindre atomära / molekylära bitar kombinerat på unika sätt för att skapa en större helhet.

Alisa Law-projektet.

Organisationen är definitivt den viktigaste delen när du börjar dina revisioner. Som du kan se ovan bröt jag ner en viss sektion i mönster och variationer så att jag kunde identifiera delar av gränssnittet som upprepade men hade en liten variation. Det här är bra när det är dags att koda eftersom du kan hitta återanvändbara mönster för att hålla din CSS lutande, slutligen bygga ett mer modulärt system.

Camp Shalom-projektet.

Atomer hjälper till att identifiera variationer och även vägleda dig i ditt namnkonventionens uppdrag; den svåraste delen av jobbet. När du upptäcker dina atomer tycker du själv vad är ett "visningsmönster" och vad är ett "innehållsmönster", eftersom båda kommer att skilja sig väldigt mycket. Om denna fråga inte svaras korrekt löper din kod risken att avvika från att bli en bärbar och modulär enhet som är lämplig för olika sammanhang.

Färgfärger är också ett bra användarfall med InVision-kort. Det här kan vara en stor tidsbesparande guide när du diskuterar om färgkonsistens används under ett gränssnitt. Stämplar kan också hjälpa till att hålla reda på de färgvärden som krävs när du använder variabler för att lagra färginformation för att arbeta med CSS-förbehandlare.

Murmuration Malts-projektet

Dra fördel av styrelser för att dokumentera och diskutera namnkonventioner, funktionalitet, plugins / bibliotek och till och med identifiera mönster från en högre nivå.

Mönsteridentifiering används tillsammans med kommentaren för Murmuration Malts-projektet Gif extraherad från blogginlägget Invision Boards Design Collaboration Reimagined

Kommentarer och skisser är en kraftfull funktion som även kan användas med brädor! Använd skissering för att peka ut delar av gränssnittet i fråga, eller använd kommentarer för att diskutera mönster som upptäckts för att stärka kraven före utveckling. Det finns massor av andra bra kommenteringsfunktioner som följer med InVision Jag uppmuntrar dig att läsa mer på deras webbplats.

Slutsats

Styrelser är väldigt praktiska att använda för initiala upptäckter, oavsett om de är utvecklade eller visuella i avsikt. Om du vill lära dig mer kan du läsa allt om forum på Invision-bloggen. Som alltid, glad kodning och tack för läsning!