Как работать со сложными пользовательскими интерфейсами в Photoshop Layer Comps?

TL;DR — Как создать сложный пользовательский интерфейс в Photoshop таким образом, чтобы Photoshop не замедлял работу?

Я создаю много сложных сценариев пользовательского интерфейса с помощью Photoshop и регулярно получаю 10-20 композиций слоев и сотни (тысячи) слоев.

Например:

  1. Layer Comp 1 имеет список элементов с флажками. Вверху есть фильтр (стареющие учетные записи, которым меньше 30 дней, больше 30, но меньше 60...). Есть раскрывающиеся списки, которые позволяют пользователям добавлять x к y; объединить х; удалить х; и значки, которые отображают различную информацию в зависимости от вышеупомянутого фильтра.

  2. Layer Comp 2 имеет детализацию (пользователь выбирает один из элементов и получает подэлемент, и отображается новый набор флажков.

  3. Слой Comp 3. Пользователь выбирает строку детализации (флажок установлен) и переходит к раскрывающемуся списку. (Раскрывающийся список открыт, а выбор выделен)

  4. Layer Comp 4: отображается всплывающее окно, позволяющее пользователю ....

К тому времени, когда вы проходите несколько сценариев, у вас уже есть десятки композиций; и десятки вариаций.

Я максимально использую смарт-объекты; и тщательно организуйте, группируйте и маркируйте мои слои, чтобы находить элементы было просто. Однако Photoshop сильно тормозит.

Мое, не очень хорошее, решение состоит в том, чтобы создать столько разных .psd, сколько это логично. Но иногда (слишком часто) имеет «логический» и «организационный» смысл хранить все в одном файле.

Я не решаюсь выравнивать группы слоев, так как часто обновляю их по мере изменения требований (или, точнее говоря, они становятся все более и более точными).

Какое лучшее решение этой проблемы (так много слоев, что Photoshop тормозит)?

Я никогда не проектировал сложный пользовательский интерфейс, но я даже не могу себе представить время, когда вам действительно понадобятся тысячи или даже сотни слоев. Не видя вашего дизайна и панели слоев, трудно сказать, что вы могли бы сделать по-другому, кроме как добавить больше оборудования для решения проблемы.
Боюсь, вы уже не используете Photoshop в качестве инструмента. Если вы занимаетесь тонкой настройкой на этом уровне, делайте это не в Photoshop, а прямо в браузере.
@Vincent - я переключаюсь между HTML и Photoshop. Возможно, мне придется начать фазу HTML немного раньше в этих более сложных проектах.
Вы всегда можете разделить макет и поместить файлы Photoshop в основной файл Photoshop в виде связанного файла. Это устранит необходимость хранить все ваши слои в одном файле.
Почему вы вообще делаете сложные макеты пользовательского интерфейса в фотошопе?
@ DA01 - В отличие от HTML/CSS/js? Основная причина в том, что я переключаюсь с правого полушария мозга на левое, по мере того как я все больше и больше увлекаюсь HTML. Когда я все еще пытаюсь конкретизировать дизайн, мне лучше всего удается использовать бумагу; затем с Photoshop, когда я пытаюсь убедиться, что вещи действительно хорошо вписываются в экран. Только когда дизайн проходит «правополушарное» мышление, я начинаю переходить к HTML для финальных высокоточных прототипов.
Я думаю, что для таких вещей, как меню, выпадающие списки, кнопки, живой HTML/CSS будет более точным представлением «подгонки» в дополнение к тому, что его намного, намного проще настроить, чем 30 слоев в Photoshop. Но это только я. Я явно не до конца понимаю ваш рабочий процесс.
да, я бы проголосовал за то, чтобы вы скорее перешли на HTML/CSS/JS. Treat — это инструмент дизайна, такой же, как Photoshop.
Вы можете подумать о том, чтобы делать свои макеты так же, как и любой другой сложный макет печати; используя такие инструменты, как InDesign или QuarkXpress, и импортируя ваши изображения/состояния. Это будет быстрее, вы получите гораздо большую производительность, его легко создать, и вы сможете легко повторно использовать некоторые стили и элементы. Я понимаю, что переход сразу к html/css не идеален, так как в конечном итоге вы потратите драгоценное время на то, чтобы все идеально настроить, прежде чем показывать доказательства. По крайней мере, при работе с растрами/векторами доказательство ЕСТЬ доказательство, в этом нет никаких сомнений. Кроме того, ваши изображения будут наполовину готовы для html/css,
Как вы уже начали понимать, Photoshop — неподходящий инструмент для такой работы. Более или менее все UI-дизайнеры, которых я знаю, перешли на Sketch. Даже Illustrator все равно будет лучшим выбором, чем PS. Adobe также работает над клоном Sketch, поэтому изучение новых (векторных) инструментов будет лучшим вариантом.
@AAGD - я изучал это. Поскольку я работаю на ПК, мне, возможно, придется взять Illustrator. Что я делал, так это сохранял свои композиции слоев в формате PDF. Бизнес-пользователи, кажется, любят их.

Ответы (1)

Этот подход решил ту же проблему в моем рабочем процессе:

Композиции слоев в смарт-объектах

Я использую связанные смарт-клипы с вложенными композициями слоев для каждого раздела . Например, создайте смарт-клип для раздела заголовка с композициями слоев, такими как home , mouse over , active и т. д . Вы можете выбрать требуемую композицию слоев связанного смарт-клипа, используя панель свойств для каждой композиции слоев основного документа. Таким образом, вы можете иметь много состояний, разделенных во многих файлах с довольно плоской основной структурой.

Извините, это звучит немного странно, но я надеюсь, что это хоть как-то поможет.

Дополнительная информация: справка Adobe — композиции слоев в смарт-объектах

Как работать со сложными пользовательскими интерфейсами в Photoshop Layer Comps?
СпросиСетьПолитика конфиденциальности1y, 0v