Wie kann ich Sketch noch besser machen?

Sketch ist derzeit eines der besten UI-Design-Tools. Es ist das erste Designtool, das entwickelt wurde, um den hohen Ansprüchen von Produktdesignern gerecht zu werden. Oft war Sketch eine so schöne Überraschung, dass ich erstaunt war, wie intuitiv es ist.

Ich mag Sketch wegen der Flexibilität, die es seinen Benutzern bietet. Wir können unsere eigenen Plugins verwenden, unsere eigenen Verknüpfungen festlegen und einen Workflow erstellen, der am besten zu uns passt. Als nerdiger Tastaturkürzel-Junkie fühle ich mich bei Sketch zu Hause. Es gibt viele Operationen, die wir mit Tastaturkürzeln ausführen können. Ich persönlich liebe es, Runner zu verwenden (durch das Eingeben von Befehlen kann ich mich wie ein Hacker fühlen).

Trotz aller Pracht von Sketch gibt es noch Verbesserungsbedarf. Unten sehen Sie meine persönliche Wunschliste mit Funktionen:

1. Wählen wir die Farben für die Symbole

Symbolüberschreibungen haben den Workflow von Sketch grundlegend verändert.

Früher mussten wir für jede Symbolinstanz eine eigene Version erstellen. Grundsätzlich beschränkte sich die Rolle eines Symbols auf ein sehr einfaches Element wie ein einzelnes Zustandssymbol oder eine Schaltfläche.

Sehen Sie hier ein Muster?

Wenn wir beispielsweise eine iOS-Registerkartenleiste benötigten, mussten wir mehrere Versionen von jedem Status der Schaltfläche haben. Wenn wir 5 Registerkarten hätten, müssten wir dafür mindestens 5 Symbole haben. Wenn wir für jedes Element und jeden Bildschirm unterschiedliche „Benachrichtigungen“ anzeigen wollten, mussten wir separate Versionen der Symbole mit den Benachrichtigungen erstellen. Im Großen und Ganzen würde jeder andere „Zustand“ des Symbols Sie dazu zwingen, ein völlig neues, dediziertes Symbol zu erstellen.

Jetzt können wir immer komplexere Symbole erstellen, die noch flexiblere Elemente enthalten. Wir können die Instanzen in den Elementen jonglieren, Symbole, Elemente, Status, Benachrichtigungen usw. austauschen, was es so viel flexibler macht. Endlich können wir das Symbolpotential fast voll ausschöpfen! Fast…

Problem:

Um die Status zu überschreiben oder einfach unterschiedliche Farben derselben Symbole zu verwenden, müssen mehrere Versionen desselben Symbols nur mit einer unterschiedlichen Füllfarbe erstellt werden. Ich habe das Gefühl, dass dies anders aussortiert werden sollte.

Lösungsvorschlag (Basis):

Wir können aus unseren

Wir können dieses Problem auf dieselbe Weise angehen, wie die Textebenen in Symbolen behandelt werden. Sie können bearbeitet werden. Auf diese Weise können wir einfach die Füllfarbe auswählen.

Vorgeschlagene Lösung (fortgeschritten):

Zusätzliches Bedienfeld zum Ändern nicht nur der Farben, sondern auch anderer Werte

Wie Sie hier sehen können, können wir noch weiter gehen und mehr Optionen für die zerstörungsfreie Ausgabe eines Symbolelements im Symbol eröffnen (ich bin übrigens der Meinung, dass wir hier eine umfassendere Terminologie benötigen). In diesem Modell befindet sich der Anfang der Achse des verschachtelten Symbols in der oberen linken Ecke. Wir könnten sogar seinen Platz und seine Größe ändern, ihn transformieren, seine Deckkraft und die Überlagerung des Overrides ändern. Aber warte eine Sekunde! So einfach ist das nicht. Was ist, wenn das Symbol mehrere Elemente in verschiedenen Farben enthält? Ich bin froh, dass du gefragt hast. Wir könnten es auf zwei Arten angehen:

1. Das folgende Menü wird nur angezeigt, wenn der Inhalt des Symbols eine einzelne (kombinierte) Form oder eine Reihe von Formen mit identischen Füllfarben ist.

2. Zeigen Sie das folgende Menü nur für das Element an, das die Farben aus der Bibliothek enthält (dies zeigt an, dass die Farben geändert werden können).

Die Notwendigkeit ist die Mutter der Erfindung, daher verwende ich derzeit eine Problemumgehung: Ich verwende einfarbige Farben als Maske, die ich ändern kann, die jedoch ihre Grenzen hat und zusätzliche Arbeit erfordert.

2. Wechseln wir den Mischmodus mit einer Verknüpfung

Es wäre großartig, wenn Sie schnell durch die Mischmodi blättern könnten.

Wenn Sie sehen möchten, welchen Effekt der Mischmodus haben wird, müssen Sie:

  1. Klicken Sie auf die Dropdown-Liste
  2. Wählen Sie den Mischmodus
  3. Klicken Sie auf, schließen Sie die Dropdown-Liste und sehen Sie das Ergebnis.
  4. Willst du es ändern? Wiederholen Sie diesen Vorgang für die 16 Mischmodi

In diesem Fall macht die Adobe-Software einen viel besseren Job, indem wir schnell durch die Modi blättern können, indem wir die Umschalttaste ++ (Plus) gedrückt halten, um in den nächsten Modus zu wechseln, und die Umschalttaste + - (Minus), um in den vorherigen Modus zurückzukehren.

In diesem Fall leistet die Adobe-Software viel bessere Arbeit, da wir schnell durch die Modi blättern können, indem wir die Umschalttaste + (Plus) gedrückt halten, um in den nächsten Modus zu wechseln, und die Umschalttaste - (Minus), um in den vorherigen Modus zu wechseln.

3. Geben Sie uns die Option, ein Symbolelement standardmäßig auszublenden

Im Verlauf unseres Projekts erstellen wir immer weiter fortgeschrittene Symbolinstanzen. Betrachten wir eine einfache iOS-Navigationsleiste.

Dies ist unser Basissymbol:

Ein Beispiel für ein flexibles Symbol

Damit können wir die folgenden Instanzen erstellen (indem wir einfach die Elemente ein- und ausschalten):

Problem:

Nehmen wir an, wir haben 40 solcher Instanzen im Projekt. Während der Design-Iteration stellen wir fest, dass wir diesem Symbol ein weiteres Element hinzufügen müssen, das nur in bestimmten neuen Bildschirmen sichtbar ist:

Wir haben dem Symbol ein neues Element hinzugefügt

Das Hinzufügen eines neuen Elements wirkt sich auf alle 40 Instanzen aus:

Das neue Element wurde allen unseren Instanzen hinzugefügt, was das Projekt ein wenig ruiniert

Lösung:

Da es besser ist, dieses neue Element in einem Basissymbol auszublenden, als in 40 Instanzen danach zu suchen, wäre es großartig, diese Option (standardmäßig ausgeblendet) im Basissymbol zu haben.

4. Option zum Zuweisen einer Verknüpfung für „Auf Originalgröße einstellen“ (Symbol)

Problem:

Stellen Sie sich vor, Sie haben 20 Instanzen eines Symbols. Anschließend ändern Sie die Zeichenflächengröße des Symbols ein wenig. In der Regel werden die Symbolinstanzen dadurch durcheinander gebracht. Sie müssen also eine nach der anderen, RMC, zum Ende der Dropdown-Optionen gehen und "Auf Originalgröße einstellen" auswählen.

Es wäre viel einfacher, dieser Funktion eine Tastenkombination zuzuweisen. Komischerweise gibt es im Menü eine ähnliche Option, die sich jedoch auf Bilder bezieht: Ebene / Bild / Auf Originalgröße einstellen. Leider funktioniert dies nicht für Symbole.

Lösung: Vereinheitlichen Sie es, z. Ebene / Objekt / Auf Originalgröße einstellen. Das würde sowohl für Symbole als auch für Bilder funktionieren (dann werden wir in der Lage sein, eine Verknüpfung dafür zuzuweisen)

5. Mehrere Nudge-Modifikatoren

Einfach: Lassen Sie uns mehr Nudge-Modifikatoren zuweisen (außer Shift für x10). Z.B. Umschalt + Fn für x100-Multiplikator. Es wäre großartig, unsere eigenen Anstoßwerte festzulegen. Dafür gibt es allerdings Plugins.

6. Fügen Sie CMD + Buchstaben-Verknüpfungen in Dialogfeldern hinzu:

CMD + D und CMD + C funktionieren nicht

Die meisten Programme verwenden diesen einfachen Trick, um das Leben von Millionen von Menschen zu erleichtern. Ich war ein bisschen enttäuscht, dass Sketch diese einfache Funktion fehlt, aber wie ich sehen kann, passiert es sogar den Besten .

7. Leertaste zum Verschieben eines erstellten Patch-Punkts

Was ist, wenn ich die Position des erstellten Punkts ändern möchte?

Auch hier geht Adobe mit gutem Beispiel voran. In der Adobe-Software können Sie die Position eines frisch erstellten Punkts ganz einfach ändern, indem Sie die Leertaste gedrückt halten (während Sie die LMB gedrückt halten). Es wäre toll, wenn Sie beim Arbeiten mit Pfaden in Sketch die gleiche Flexibilität hätten.

8. Lassen Sie uns entscheiden, wie unsere Symbole skaliert werden sollen

Wenn Sie ein Symbol skalieren möchten, können Sie es derzeit nur durch Ziehen mit der Maus dehnen oder Größeneingaben verwenden. Der Skalierungsdialog kann nicht verwendet werden. Das bedeutet, dass wir nicht die Möglichkeit haben, ein Symbol proportional zu skalieren (mit proportionalen Schriftgrößen usw.).

Das wäre alles für jetzt. Ich hoffe, dass sich andere Designer mit diesen Ideen befassen - bitte lassen Sie mich wissen, was Sie in den Kommentaren denken! Ich hoffe auch, dass das Bohemian Coding-Team dies nützlich finden wird. Ich könnte vermuten, dass sie bereits an einigen der Probleme arbeiten, da sie der Gemeinschaft nahe zu sein scheinen. Vielleicht überraschen uns die Lösungen und Umsetzungen - wie immer - positiv! Ich kann es kaum erwarten, wie die nächsten Versionen von Sketch aussehen werden, und drücke die Daumen. Frieden ️

Der Artikel wurde ursprünglich im Blog von Netguru veröffentlicht