Ich beginne mit der Hauptsache: Wir haben ein praktisches Layout-Tool erstellt und die Arbeitspipeline geändert. Jetzt in Ordnung.
Es gibt viele verschiedene Schnittstellen in mobilen Spielen, einschließlich HUD und einer Vielzahl von Bildschirmen für Meta. UX-Designer entwerfen sie, UI-Designer zeichnen, und damit all dies in der Engine erscheint, gibt es speziell geschulte Leute - technische UI-Designer. Nun, oder einfach Layout-Designer. Teil ihrer Aufgabe ist es, alles vom PSD-Layout sorgfältig Nummer für Nummer auf das Fertighaus zu übertragen. Sie beschäftigen sich auch mit UI-Animationen, füllen Sprites aus, passen das Layout an, ordnen Lokalisierungsschlüssel an und so weiter.
Und wir haben uns mehrere Ziele gesetzt:
- Beschleunigen Sie die Arbeit des Layout-Designers und bewahren Sie ihn vor der Routine.
- Rationalisierung der Interaktion zwischen den Abteilungen für UI-Design und -Entwicklung;
- Vereinheitlichung der Benutzeroberfläche: Erstellen Sie Richtlinien und bilden Sie auf ihrer Grundlage Unity-Assets.
- Bieten die Erweiterbarkeit und Vielseitigkeit der Benutzeroberfläche, die Wiederverwendbarkeit von Assets, den Widerstand gegen Änderungen und die einfache Optimierung.
So ist es passiert.
Wir haben versucht, eine Art Design-System aus der Unity-Engine und Adobe Photoshop zu erstellen (das, abgesehen von einem Spieleentwickler, anscheinend kaum zum Erstellen von Schnittstellen verwendet wird). Grob gesagt standen wir vor der Aufgabe, Freunde für Photoshop und Unity zu finden.
Zunächst war es notwendig, die gesamte „visuelle Sprache“ in Unity zu projizieren. Dazu haben wir Stile ausgewählt und auf unsere eigenen Bedürfnisse zugeschnitten. Dies ist unter Unternehmen eine weit verbreitete Praxis. So wurde aus einem Schriftsatz ein Schriftstil, aus einem Satz von Layouts ein Stil mit Sprites dieser Layouts, aus einem Satz von Farben ein Stil mit Farben und so weiter. Es genügte, dies alles einmal zu erstellen und dann zusammen mit der psd-Erweiterung mit den Richtlinien einfach wiederzuverwenden und zu ergänzen. Daher ist der UI-Designer gezwungen, 1001 Substrate auf verschiedenen Bildschirmen aufzugeben und mehrere universelle zu erstellen.
Aktuelle Stile, die sind:
- Farbstil <Name, Farbe>
- Textstil <Name, Schriftart, Schriftgröße, Schriftmaterial, Zeilenabstand>
- Schriftstil <Titel, Schriftart, Schriftmaterial>
- Schaltflächenstil <Name, Schaltflächeneinstellungen>
- Layoutstil <Name, Sprite, Einrückung>
- Sprite-Stil <Name, Sprite>
- Lokalisierungsstil <Name, Schlüssel>
- Symbolstil <Name, Sprite>
Im Allgemeinen können Sie Stile einfach und unkompliziert erstellen und von der Basis übernehmen. Zum Beispiel:
[CreateAssetMenu(menuName = "UIStyles/ColorStyle")] public class ColorStyle : BaseStyle<Color> { }
Einzige Einschränkung: Der Typ muss serialisierbar sein. So wird auch der Schriftsetzer mit der Schaffung seines eigenen Stiltyps fertig.
Einige Stile sind erforderlich, um den Status der Benutzeroberfläche zu ändern. Zum Beispiel Farbstil, Textstil, Sprite-Stil, Schaltflächenstil, Lokalisierungsstil. Alle betreffen verschiedene Spielobjekte. Bilder werden in verschiedenen Farben gemalt, verschiedene Sprites werden durch sie ersetzt und so weiter.
Bis jetzt war nicht klar, wie man das alles benutzt. Ich werde ein einfaches Beispiel geben. Nehmen wir an, wir haben einen Knopf mit Angeboten in verschiedenen Farben. Die Farbe der Schaltfläche hängt vom Angebot selbst ab. Und sie sehen so aus:
Anschließend erstellen wir mit Image ein Fertighaus, an das wir die ColorStyleComponent hängen, fügen den ColorStyle-Stil ein, in dem alle Farben gespeichert werden, die mit der Schaltfläche neu gestrichen werden können, und wenden dann Stile an, die vom Angebot im Code abhängen.
Die Stile FontStyle, IconStyle und LayoutStyle werden für den Auto-Builder verwendet. Dies ist eine Bibliothek aller Schriftarten, Symbole und Unterlagen im Projekt.
Ein System mit Stilen hat eine Vielzahl von Vorteilen (nur eine Reihe von Assets in einem Projekt können ärgerlich sein):
- Wiederverwendung;
- Wenn Sie den Stil ändern, ändert sich das Fertighaus nicht. Wenn jedoch etwas geändert werden muss, wirkt sich dies auf alle Fertighäuser aus.
- Schriftsetzer erstellen Stile selbst, ändern sie und löschen sie, wodurch Programmierer den Haufen von Feldern in Monobekh mit Blumen vergessen können.
- Stile können direkt im Editor angewendet werden, da für den Editor BaseStyleComponent <T, TStyle> dessen Editor geschrieben ist.
Um den Status eines großen Widgets zu ändern, können mehrere Stile verwendet und verschiedene Objekte ein- und ausgeschaltet werden. Zu diesem Zweck wurde im Projekt die StateStyleComponent erstellt, die alle Stile und Objekte sammelt, die ein- und ausgeschaltet werden müssen. Dann werden direkt im Widget alle möglichen Zustände erstellt und umgeschaltet. Dies erspart Programmierern eine Reihe desselben Codes zum Wechseln von Farben / Schriftarten / Texten / Sprites.
Dann haben wir einen Auto-Maker erstellt. Dies ist ein Tool, mit dem Sie psd kleben und auf der Ausgabe ein Roh-Fertighaus erstellen, in das bereits einige Sprites eingefügt, Positionen, Namen, Schriftarten, Größen und Aliase notiert werden - alles, was von den Layout-Designern mit Stiften so sorgfältig aus dem psd kopiert wird. Es verankert und pflegt sogar grob eine Hierarchie. Und das in Sekundenschnelle, was letztendlich Stunden mühsamen Kopierens erspart.
Das Autocomputer-Fenster selbst sieht in den Einstellungen dürftig aus. Während der Verwendung werden diese Einstellungen hinzugefügt.
Um alle Daten abzurufen, wurde der psd-Parser basierend auf der psd-Spezifikation speziell für diese Anforderungen geschrieben. Dies ist ein ziemlich langweiliger Prozess, Sie können vorgefertigte Bibliotheken nehmen. Aber da wir alles mit einem Knopf machen wollten, musste ich von Grund auf neu schreiben.
Der Auto-Maker kopiert die gesamte Hierarchie in Photoshop. Zunächst wird ein Stammobjekt mit dem Namen des Fertighauses erstellt, das an den Bildschirmrändern verankert ist. Darin werden Objekte nach dem oben beschriebenen Prinzip erstellt - das Objekt wird im Stammobjekt erstellt, und dann wird ihm ein reales übergeordnetes Objekt zugewiesen, während die globale Position beibehalten wird. Die Anker werden nach dem Prinzip platziert - an welcher Kante oder Mitte sich das Objekt am nächsten befindet, an dem es genagelt wird, getrennt entlang der Achsen und Y. Alle Positionen und Größen sind ganzzahlig. Der Auto-Maker ignoriert versteckte Objekte.
In Photoshop gibt es 5 Arten von Ebenen: Gruppen, Pixel, Formen, Texte und intelligente Objekte.
- Gruppen (Gruppenebene) im Auto-Maker werden zu einem leeren Spielobjekt, sodass eine große Schnittstellenkomponente wie had, slot, group of slots usw. problemlos zu einer Gruppe zusammengefasst werden kann.
- Die Pixelebene wird einfach zu einem Bild mit weißer Farbe. Es können Symbole, Rücken, Bilder, Glühwürmchen sein. Anschließend werden sie wie Sprites manuell zum Projekt hinzugefügt und in Image eingefügt.
- Formen (Formebene) werden zu einem Bild mit der Formfarbe . Es können beliebige Vektorelemente sein: Layouts, Symbole und andere.
- Texte im Autocomputer werden zu TextMeshProUGUI und erben Text, Schriftart, Farbe, Strich, Schatten, Farbverlauf, Schriftgröße und Positionierung (rechts, Mitte, links).
- Intelligente Objekte werden zu normalen leeren Spielobjekten. Es ist logisch, intelligente Objekte zu verwenden, um das zu tun, was bereits als verschachtelte Fertighäuser festgelegt wurde (z. B. die obere Leiste, die überall gleich ist).
Der Auto-Wrapper weiß auch, wie Farben von allen Stellen (z. B. Formfarbe, Schriftfarbe, Farbeffekt, Farbebene) gesammelt und in ein Hex konvertiert werden. Ähnliches gilt für Transparenz.
Unabhängig davon fügt der UI-Designer sofort Optionen in die Namen von Ebenen und Gruppen ein (wie in Zeplin).
Beispiele für Optionen in der Tabelle Vorteile des Tools: schnelles Layout, Speichern der Hierarchie, Hinzufügen der erforderlichen Komponenten, Vereinheitlichen der Namen von Spielobjekten, automatisches Hinzufügen von Stilen nach Namen, Deaktivieren von Rakecasts, wenn diese nicht benötigt werden, ungefähre Anbringung.
Der Ansatz hat jedoch seine Nachteile: Wenn das psd-Layout nur für eine Schaltfläche aus 1000 Ebenen besteht, ist es praktisch nutzlos. In diesem Fall wird empfohlen, die Schaltfläche dem Smart-Objekt hinzuzufügen. Außerdem erfordert das Tool eine normale und korrekte Benennung durch den UI-Designer. Die Ebenen "Rectangle_copy_21_1005" können nicht mehr benannt werden. Auf der anderen Seite macht dies Layouts für andere UI-Designer besser lesbar.
Es ist geplant, ein System zu entwickeln, das den Export von Substrat-Sprites verhindert.
Das Layout mit dem Auto-Maker-Popup aus diesem Artikel dauerte 3 Minuten und 13 Sekunden (außer das Springen von Sprites in das Projekt). Stifte benötigen 18 Minuten 32 Sekunden. Gleichzeitig gibt es auch Probleme im Layout mit Stiften - an einigen Stellen falsche Positionen, die das scharfe Auge des UI-Designers bemerkt und erneuert werden muss. Daher ist das automatische Layout auch gut, weil es den menschlichen Faktor eliminiert.
Und ein paar Bewertungen über den Autohersteller:
„Auto-Maker beschleunigt die Arbeit erheblich, aber bisher scheint es, dass Sie die Schwelle für Eingabe, Installation und Konfiguration vereinfachen müssen
"Ich denke, wenn Sie Stile für den Schriftsetzer einrichten, macht das keinen großen Unterschied in der Zeit, aber Designer und Programmierer sparen mit Sicherheit Zeit und Nerven."
"Das Ding ist sehr cool))"
„Stile - das Thema ist sehr cool, das reicht in unserem Projekt nicht aus, weil sie gerne Schaltflächen auf Layouts, Texten usw. neu streichen. Es ist großartig, dass dies jetzt im Stylisten behoben werden kann und es keine Kopfschmerzen gibt, dass Sie an einheitlichen Stellen unterschiedliche Farben oder Sprites haben. "
„UI-Designer müssen das Layout selbst erstellen, da nur sie die Funktionen ihrer Layouts kennen. Und der Auto-Layout-Designer ist eine großartige Sache für diejenigen, die die Feinheiten des Layouts nicht verstehen wollen. Wenn das Instrument über eine intuitive Benutzeroberfläche verfügt und von Figma lernt, ist es einfach luxuriös. “
Persönlich denke ich, dass alles, was automatisiert werden kann, automatisiert werden sollte und den Menschen die Möglichkeit gegeben werden sollte, kreativer und erfinderischer zu arbeiten.