Wie übermittelt man Layouts an die Entwicklung? / Sudo Null IT-Nachrichten

Von Zeit zu Zeit fragen sich einige meiner Designerkollegen, wie man Layouts für die Einreichung bei Entwicklern vorbereitet. Ich habe einen Leitfaden vorbereitet, der ihnen hilft, dieses Problem zu verstehen.

Layouts bedürfen weltweit keiner besonderen Vorbereitung, wenn sie zunächst sauber und in einer einfach zu bedienenden Anwendung erstellt werden.

Ab heute sind die beliebtesten Interface-Design-Anwendungen Figma. Dieser Editor kann auf jeder Plattform ausgeführt werden und läuft über einen Browser auf fast jeder Hardware. Der Editor erlaubt allen Teammitgliedern online auf das Layout zuzugreifen, alle Änderungen im Projekt erfolgen in Echtzeit, sie sind sofort für alle Teammitglieder sichtbar. Um Figma-Dateien an Kollegen zu übertragen, reicht es aus, den Link zu dem in der Cloud gespeicherten Layout zu kopieren und zu senden.

Daher empfehle ich die Verwendung von Anwendungen, die Layouts in der Cloud speichern und die Möglichkeit unterstützen, Layouts in Echtzeit kooperativ zu bearbeiten. Figma wäre eine gute Wahl.

Um im Editor zu arbeiten, reicht es aus, ein Konto auf der Figma-Website zu erstellen.  Nach der Registrierung öffnet sich der Editor direkt im Browser.  Für mehr Komfort können Sie auch die Desktop-Version der Anwendung von der Website herunterladen.Um im Editor zu arbeiten, reicht es aus, ein Konto auf der Figma-Website zu erstellen. Nach der Registrierung öffnet sich der Editor direkt im Browser. Für mehr Komfort können Sie auch die Desktop-Version der Anwendung von der Website herunterladen.

Wir haben besprochen, wie man mit Schnittstellendesign-Anwendungen umgeht, jetzt können wir die Regeln besprechen, die bei der Erstellung von Layouts befolgt werden sollten.

1. Verwenden Sie Basiseinheiten und modulare Systeme, um Layouts zu erstellen

Wenn Sie ein System aus Einzügen und Rastern in einem Layout erstellen, sollten Sie einen Wert wählen, der ein Vielfaches der Raster- und Einzugseinstellungen ist. Wenn Sie als Basiseinheit einen Wert gleich vier wählen, müssen alle Einzüge und Größen von Objekten im Layout ohne Rest durch diesen Wert geteilt werden. Padding kann durch Werte von 4, 8, 12, 16 usw. dargestellt werden und Tastenhöhen beispielsweise durch Werte von 32, 40, 44, 48, 52 usw.

Werte von Einzügen und Größen von Elementen sind Vielfache von vier.  Der Einzug zwischen den Rasterspalten ist ein Vielfaches von vier.Werte von Einzügen und Größen von Elementen sind Vielfache von vier. Der Einzug zwischen den Rasterspalten ist ein Vielfaches von vier.

Denken Sie beim Erstellen von Grids daran, dass es mindestens drei Arten von Geräten gibt: Desktop, Tablet und Mobilgerät. Beginnen Sie beim Aufbau eines Rasters mit den minimalen Bildschirmgrößen, damit alles passt. Für ein Mobiltelefon lohnt es sich beispielsweise, mit einem 320-Pixel-Bildschirm, einem Tablet mit 768 Pixeln und einem Desktop mit 1024 Pixeln zu beginnen. Das Layout kann für jede Bildschirmgröße gezeichnet werden, Hauptsache es sieht bei den angegebenen Auflösungen genauso korrekt aus wie bei größeren.

2. Verwenden Sie ganzzahlige Elementgrößen und Padding

Dank ganzzahliger Werte wird das Layout übersichtlicher und die Darstellung auf dem Bildschirm wird auch besser. Das bedingte Rendern eines 1,5-Pixel-Strichs führt dazu, dass der Strich auf Bildschirmen mit einer niedrigen Punktdichte unscharf wird. Bei gemischten Einzügen und sogar bei Bruchwerten müssen Entwickler erraten, welcher Einzug zwischen Elementen des gleichen Typs 32,7, 32,6 oder immer noch 32 Pixel sein soll.

Die Screenshots haben die gleichen ganzen Einzüge.Die Screenshots haben die gleichen ganzen Einzüge.

Um mit ganzen Pixeln zu arbeiten, müssen Sie die Funktion „Am Pixelraster ausrichten“ im Menü „Einstellungen“ aktivieren.

Um Bruchwerte in Dimensionen schnell loszuwerden, können Sie auf die Beschriftung links neben den Werten klicken.

Die Pfeile zeigen auf die Symbole „W“ und „H“.Die Pfeile zeigen auf die Symbole „W“ und „H“.

Außerdem eignet sich das Plugin hervorragend für die Batch-Eliminierung von Bruchwerten Pixelgenau.

Sie können das Plugin über das Plugins-Panel starten.

Danach müssen Sie auf die Schaltfläche “Ausführen” klicken, und das Plugin entfernt wie von Spieß alle Bruchwerte in den ausgewählten Frames.

Im Screenshot wurden gebrochene Werte eliminiert, aber es ist zu bedenken, dass das Plugin gebrochene Werte nach den Regeln der Arithmetik rundet – Werte bis 0,5 nach unten, Werte nach 0,5 nach oben.Im Screenshot wurden gebrochene Werte eliminiert, es ist jedoch zu beachten, dass das Plugin gebrochene Werte nach den Regeln der Arithmetik rundet – Werte bis 0,5 nach unten, Werte nach 0,5 nach oben.3. Erstellen Sie ein logisches Einrückungssystem

In denselben Elementen sollten Sie dieselben Einzüge verwenden, zwischen logischen Blöcken sollten Sie dieselben Einzüge verwenden – es ist einfacher, Layouts zu setzen.

Zwischen einheitlichen Blöcken dieselben Einkerbungen.Zwischen einheitlichen Blöcken dieselben Einkerbungen.

Um das Anordnen derselben Einzüge zu beschleunigen, können Sie die Figma-Option – Automatisches Layout verwenden. Diese Option gruppiert Objekte in einem Rahmen mit einheitlichen Einzügen.

Um ein automatisches Layout zu erstellen, müssen Sie die Rahmen auswählen, zwischen denen die Einzüge platziert werden sollen, und anschließend die Tastenkombination „Umschalt + A“ auf der Tastatur drücken oder auf die entsprechende Schaltfläche im Einstellungsfeld klicken.

Der erforderliche Button ist auf dem Screenshot dargestellt.Der erforderliche Button ist auf dem Screenshot dargestellt.

Nachdem Sie das Layout erstellt haben, können Sie die Größe der Einzüge anpassen, indem Sie den erforderlichen Wert in das entsprechende Feld eingeben.

Auf dem Bildschirm befindet sich ein Feld zur Eingabe der Größe der Einzüge.Auf dem Bildschirm befindet sich ein Feld zur Eingabe der Größe der Einzüge.

Weitere Informationen zum Arbeiten mit automatischen Layouts finden Sie in Figmas offizieller Leitfaden.

4. Speichern Sie Text-, Farb- und Effekteinstellungen in Stilen

Das Speichern von Einstellungen in Stilen ermöglicht es Ihnen, die Reihenfolge in Stilen zu organisieren, eine klare Struktur aufzubauen, Fehler und neue Variablen im Layout zu beseitigen und die Entwicklung zu vereinfachen.

Gespeicherte Stile werden zum Bedienfeld „Stile“ hinzugefügt, das sich auf der rechten Seite des Figma-Fensters befindet.Gespeicherte Stile werden zum Bedienfeld „Stile“ hinzugefügt, das sich auf der rechten Seite des Figma-Fensters befindet.

Weitere Informationen zum Speichern von Stilen finden Sie unter Figma-Handbuch.

5. Beschriften Sie Ebenen und Stile mit Anzeigenamen

Um Layouts zu organisieren, signieren Sie Ebenen und Stile in Layouts mit verständlichen Namen. Dadurch können alle Teammitglieder dieselbe Sprache sprechen. Es empfiehlt sich auch, Stile und Ebenen in einer logischen Reihenfolge anzuordnen.

Ein Beispiel für Etiketten für Ebenen und Stile.Ein Beispiel für Etiketten für Ebenen und Stile.

Ebenen (Frames, Komponenten) sind normalerweise in chronologischer Reihenfolge angeordnet, Textstile von größer nach kleiner, Farben von weniger gesättigt bis gesättigter.

Als Beispiel für den Aufbau einer Texthierarchie können Sie verwenden Materialführer für Typografieder Aufbau der Farbhierarchie ist auch gut beschrieben in Farbmaterialführer.

6. Erstellen Sie ein Ui-Kit

Erstellen Sie Sätze von Schnittstellenelementen mit möglichen Zuständen solcher Elemente. Ich empfehle dringend, alle Elemente in Komponenten umzuwandeln, damit sie in Zukunft wiederverwendet werden können, was die Anzahl der Fehler reduziert und die Geschwindigkeit der Layoutentwicklung erhöht.

Das Arbeiten mit Komponenten ist in einfach und übersichtlich dargestellt Figmas Tutorial.

7. Korrigieren Sie die Größe von Textrahmen

Zeigen Sie die tatsächliche Größe des Textrahmens in Layouts an, beschreiben Sie sein Verhalten, wenn der Titel in der Länge nicht passt. Die Überschrift kann in Ellipsen übergehen (drei Punkte werden am Ende der Zeile angezeigt) oder die Überschrift kann in eine andere Zeile umbrechen.

Die Screenshots zeigen, dass die Header unterschiedliche Längen haben.Die Screenshots zeigen, dass die Header unterschiedliche Längen haben.8. Hinterlasse einen Kommentar

Kommentieren Sie Ihre Entscheidungen mit dem Kommentar hinzufügen-Tool, das über die Schaltfläche „C“ aufgerufen wird, oder über die Komponenteneinstellungen. Das Kommentieren von Komponenten ist im Einstellungsbereich (auf der rechten Seite) verfügbar.

Beispiele für Kommentarmethoden.Beispiele für Kommentarmethoden.

Wenn Sie über das rechte Bedienfeld einen Kommentar zu einer Komponente hinzufügen, wird der Kommentar im Code-Inspektor in jedem Teil des Layouts angezeigt.

Der Kommentar wird auf einer der Layoutseiten angezeigt.Der Kommentar wird auf einer der Layoutseiten angezeigt.9. Show-Animation mit Prototypen

Erstellen Sie beim Entwerfen einer Animation Frames mit einem Storyboard und animieren Sie sie dann mit dem Prototype-Tool. Es ist einfacher, Ihre Idee einmal visuell darzustellen, als während der Entwicklung zehnmal zu erklären und Anpassungen vorzunehmen.

10. Übergeben Sie Schriftarten und Symbole an Entwickler

Geben Sie dem Entwickler einen Link zur Schriftartquelle, laden Sie Symbole und Illustrationen in SVG hoch. Dies beschleunigt den Entwicklungsprozess und reduziert die Anzahl zusätzlicher Fragen.

11. Präsentationen halten und Lösungen diskutieren

Bevor die Lösung dem Entscheidungsträger zur Genehmigung vorgelegt wird, lohnt es sich, die Möglichkeit der Umsetzung mit den Entwicklern zu besprechen. Eine visuelle Demonstration der Lösung kann die Dinge für alle einfacher machen. Präsentationen können als Kommentarfolien, Videoanrufe, Screencasts, interaktive Prototypen mit Kommentaren formatiert werden.

Wenn es Entwickler unter den Lesern gibt, bin ich für Kommentare und Ergänzungen zu diesem Handbuch dankbar.)

Similar Posts

Leave a Reply

Your email address will not be published.