Wie geht man mit komplexen Benutzeroberflächen in Photoshop Layer Comps um?

TL;DR - Wie erstellt man eine komplexe Benutzeroberfläche in Photoshop so, dass Photoshop nicht zu einem Schneckentempo verlangsamt wird?

Ich erstelle viele komplexe Benutzeroberflächenszenarien mit Photoshop und komme routinemäßig auf 10-20 Ebenenkompositionen und Hunderte (Tausende) von Ebenen.

Zum Beispiel:

  1. Layer Comp 1 hat eine Liste von Elementen mit Kontrollkästchen. Ganz oben befindet sich ein Filter (Alternde Konten, die weniger als 30 Tage alt sind, mehr als 30, aber weniger als 60 ...). Es gibt Dropdown-Menüs, mit denen Benutzer x zu y hinzufügen können. x zusammenführen; x löschen; und Symbole, die je nach dem oben erwähnten Filter unterschiedliche Informationen anzeigen.

  2. Layer Comp 2 hat einen Drilldown (der Benutzer wählt eines der Elemente aus und erhält ein Unterelement und ein neuer Satz von Kontrollkästchen wird angezeigt.

  3. Layer Comp 3. Der Benutzer wählt die Drilldown-Zeile aus (Kontrollkästchen aktiviert) und geht zum Dropdown-Menü. (Dropdown wird angezeigt und die Auswahl wird hervorgehoben)

  4. Layer Comp 4: Es wird ein Popup angezeigt, in dem der Benutzer ....

Wenn Sie mehrere Szenarien durchlaufen, haben Sie Dutzende von Comps; und Dutzende von Variationen.

Ich verwende so oft wie möglich intelligente Objekte; und organisiere, gruppiere und beschrifte meine Ebenen sorgfältig, damit das Auffinden von Elementen einfach ist. Photoshop verlangsamt sich jedoch enorm.

Meine, nicht so gute Lösung besteht darin, so viele verschiedene .psds zu erstellen, wie es logisch ist. Aber manchmal (zu oft) ist es "logisch", "organisatorisch" sinnvoll, Dinge in einer Datei zu halten.

Ich zögere, Ebenengruppen zu glätten, da ich sie oft aktualisiere, wenn sich die Anforderungen ändern (oder genauer gesagt, sie werden immer präziser).

Was ist die beste Lösung für dieses Problem (so viele Ebenen, dass Photoshop langsamer wird)?

Ich habe noch nie eine komplexe Benutzeroberfläche entworfen, aber ich kann mir nicht einmal vorstellen, wann Sie wirklich Tausende oder sogar Hunderte von Ebenen benötigen würden. Ohne Ihr Design und Ihr Layer-Panel zu sehen, ist es schwer zu sagen, was Sie möglicherweise anders machen können, als mehr Hardware auf das Problem zu werfen.
Ich fürchte, Sie sind über den Punkt hinaus, an dem Sie Photoshop als Werkzeug verwenden. Wenn Sie auf dieser Ebene feinjustieren, tun Sie dies nicht in Photoshop, sondern direkt im Browser.
@Vincent - Ich gehe zwischen HTML und Photoshop hin und her. Bei diesen komplexeren Projekten muss ich die HTML-Phase möglicherweise etwas früher beginnen.
Sie können das Layout jederzeit zusammensetzen und Photoshop-Dateien als verknüpfte Datei in einer Master-Photoshop-Datei platzieren. Dies würde die Notwendigkeit beseitigen, alle Ebenen in einer Datei zu haben.
Warum erstellen Sie überhaupt komplexe UI-Modelle in Photoshop?
@DA01 - Im Gegensatz zu HTML/CSS/js? Der Hauptgrund ist, dass ich von der rechten Seite des Gehirns auf die linke Seite wechsle, während ich mich mehr und mehr mit HTML beschäftige. Wenn ich noch versuche, das Design zu konkretisieren, mache ich das am besten mit Papier; dann mit Photoshop, wenn ich versuche sicherzustellen, dass die Dinge tatsächlich gut auf den Bildschirm passen. Erst wenn das Design das "Right-Brain"-Denken besteht, gehe ich für die endgültigen High-Fidelity-Prototypen zu HTML über.
Ich würde denken, dass Dinge wie Menüs, Dropdowns, Schaltflächen, Live-HTML/CSS eine genauere Darstellung von "passend" wären und außerdem viel, viel, viel einfacher anzupassen wären als 30 Ebenen in Photoshop. Aber das bin nur ich. Ich verstehe deinen Workflow offensichtlich nicht ganz.
Ja, ich würde dafür stimmen, dass Sie früher zu HTML/CSS/JS wechseln. Treat ist ein Designtool wie Photoshop.
Sie könnten erwägen, Ihre Layouts auf die gleiche Weise wie jedes andere komplexe Drucklayout zu erstellen. indem Sie Tools wie InDesign oder QuarkXpress verwenden und Ihre Bilder/Zustände importieren. Es ist schneller, Sie erhalten viel mehr Leistung, es ist einfach zu erstellen und Sie können einige Stile und Elemente problemlos wiederverwenden. Ich verstehe, dass es nicht ideal ist, direkt zu HTML/CSS zu wechseln, da Sie am Ende wertvolle Zeit verschwenden, wenn Sie alles perfekt optimieren müssen, bevor Sie Beweise zeigen. Zumindest bei der Arbeit mit Rastern/Vektoren ist ein Beweis ein Beweis, daran besteht kein Zweifel. Außerdem sind Ihre Bilder halb fertig für HTML/CSS,
Wie Sie bereits festgestellt haben, ist Photoshop das falsche Werkzeug für diese Art von Arbeit. Mehr oder weniger alle UI-Designer, die ich kenne, sind auf Sketch umgestiegen. Selbst Illustrator wäre immer noch eine bessere Wahl als PS. Adobe arbeitet auch an einem Sketch-Clone, daher ist das Erlernen neuer (vektorbasierter) Tools die beste Option.
@AAGD - Ich habe das recherchiert. Da ich PC-basiert bin, muss ich möglicherweise Illustrator abholen. Was ich getan habe, ist meine Ebenenkompositionen als PDFs zu speichern. Geschäftsanwender scheinen sie zu lieben.

Antworten (1)

Dieser Ansatz löste das gleiche Problem in meinem Workflow:

Ebenenkompositionen in Smart Objects

Ich verwende verknüpfte Smart Clips mit verschachtelten Ebenenkompositionen für jeden Abschnitt . Erstellen Sie beispielsweise einen Smart Clip für den Kopfbereich mit Ebenenkompositionen wie home , mouse over , active usw. Sie können die erforderliche Ebenenkomposition des verknüpften Smart Clips mithilfe des Eigenschaftsfensters für jede Ebenenkomposition des Hauptdokuments auswählen. Auf diese Weise können Sie viele Zustände in vielen Dateien mit einer eher flachen Hauptstruktur trennen.

Entschuldigung, das klingt ein bisschen komisch, aber ich hoffe, das hilft irgendwie.

Zusätzliche Informationen: Adobe-Hilfe – Ebenenkompositionen in Smart Objects

Wie geht man mit komplexen Benutzeroberflächen in Photoshop Layer Comps um?
AntwortenHierDatenschutz-Bestimmungen1y, 0v