Думайте с точки зрения шаблонов

Скорее всего, у вас нет 90 абсолютно уникальных страниц (если они есть, у вас, вероятно, другая проблема). Для большинства приложений (или сайтов) у вас есть несколько шаблонов, способных настроить центральные элементы страницы. интерфейс.

Начните с просмотров

Вы вложили массу труда в создание этих 90 представлений, так что вы, вероятно, хорошо знаете шаблоны. Вернитесь назад и определите 6–12 ключевых представлений, которые отвечают на критические вопросы о структуре пользовательского интерфейса (по моему опыту, это самое приятное место). Вы ищете те, которые могут служить стандартами пользовательского интерфейса для всего остального.

Затем оцените устройства

Устройств много, но они не такие уж и разные. Поскольку вы вышли из ворот с iOS7 и iPhone 5, я предполагаю, что это основная часть вашей целевой аудитории. Это должно довольно четко изложить вашу стратегию iOS. Вы действительно собираетесь увидеть много пользователей на iPhone 3s? Вряд ли. Вы можете указать, что делает уменьшенное пространство экрана на паре ключевых просмотров, и оставить все как есть.

Теперь вы должны спросить себя, сделаете ли вы полностью нативный скин пользовательского интерфейса Android? Ваш текущий дизайн выглядит очень iOS? Если это так, вы можете добавить немного Material Design, учесть удобную постоянную кнопку «Назад» и снова расположить эти ключевые экраны. Не 90, а только те горстки, которые вы определили на последнем шаге.

Наконец, вы должны рассмотреть планшеты и ужасный фаблет (тупой Galaxy Note!). Вы их тоже собираетесь приютить? По крайней мере, неплохо было бы сделать пару просмотров для планшета. Если это большой вариант использования, сделайте все основные страницы шаблона для каждой ОС.

Проверка реальности управления

А теперь вернитесь к руководству и покажите им всю эту потрясающую работу.

«Зацените, ребята. Я все предусмотрел».

Вы указываете, что решили все для основного целевого устройства. Кроме того, вы вернулись и обратились ко всем основным контекстам устройства. На этой основе инженеры могут разработать MVP и протестировать его на чем угодно. С этого момента вы будете проворны и будете решать конкретные проблемы по мере их возникновения. Все хорошо, я все предусмотрел.

Будущая ссылка

Используйте Эскиз. Вы будете счастливее.

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

Или позвольте гибкости в ваших проектах. Устройства Android используют dpi, поэтому в зависимости от ваших целевых пользователей вы можете проектировать для низкого (ldpi), среднего (mdpi), высокого (hdpi), xhdpi, xxhdpi и т. д. iOS использует систему на основе точек аналогично дать вам 1x, 2x и 3x. Так что, если вы будете осторожны, вам может сойти с рук проектирование с плотностью пикселей всего 4/5 экрана. Имея это в виду, что касается программного обеспечения, возможно, использование Illustrator или Sketch в будущем поможет.

Наконец, что касается вашей текущей проблемы, возможно, было бы неплохо создать прототип, который будет достаточно хорошо масштабироваться. Pixate, Invision, Marvel, Framer отлично справляются с различными требованиями к прототипированию.

Это немного зависит от того, для чего предназначены эти изображения, но если они предназначены для просмотра клиентом, то этот метод должен работать нормально и ускорять работу.

1. Импортируйте (поместите) каждый PSD Photoshop в Indesign и сохраните слои.
2. Создайте «Альтернативные макеты» для каждой новой спецификации/устройства.

Это потребует некоторой настройки (если жидкий макет работает хорошо, то это бонус), но рабочий процесс должен быть намного быстрее, чем переделка в Photoshop.

Есть несколько недостатков, но любой хороший разработчик должен иметь возможность работать с этим, особенно с набором надежных мастеров, которые вы уже создали.

Т

Вы используете Photoshop, поэтому я думаю, что вы, вероятно, подписаны на Adobe Creative Cloud и, следовательно, имеете доступ к Edge Reflow CC . Edge Reflow был создан для дизайнеров адаптивных/отзывчивых веб-сайтов и в основном представляет собой инструмент для изменения размера веб-макетов из фотошопа. Над каждым дизайном потребуется некоторая работа в Edge Reflow, но, оказавшись там, вы сможете поразить каждый размер устройства, используя только один psd!

Я рекомендую использовать соотношение сторон (вики-поиск), настроить макеты по начальному соотношению и сгенерировать все макеты из списка соотношений сторон, таких как соотношение сторон Apple IOS , а для Android-радио пропорций использовать фактические размеры «например» как: 2: * "маленький", 4:* "нормальный", 7:* "большой", 10:* "большой" (рекомендуется коэффициент масштабирования 3:4:6:8:12:16)