Как подготовить (всех размеров и разрешений) макеты и графику пользовательского интерфейса для приложения Android в PS

Да, и вы должны. Элементы дизайна Android могут быть созданы с помощью генератора из 9 патчей . Система, в которой все разрешения поставляются на основе одного png.

Генератор девяти патчей позволяет быстро создавать простые девять патчей с различной плотностью экрана на основе указанного исходного изображения.

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

Также рекомендуем прочитать это введение:

Когда я работал над своим первым приложением для Android, я обнаружил, что 9-patch (он же 9.png) сбивает с толку и плохо документирован. Через некоторое время я, наконец, понял, как это работает, и решил собрать что-нибудь, чтобы помочь другим понять это.

По сути, 9-patch использует прозрачность png для выполнения расширенной формы 9-slice или scale9. Направляющие — это прямые черные линии толщиной 1 пиксель, нарисованные по краю изображения, которые определяют масштабирование и заливку изображения. Назвав файл изображения name.9.png, Android распознает формат 9.png и будет использовать черные направляющие для масштабирования и заполнения растровых изображений.

Что касается наилучшей практики Mockup: используйте разрешение вашего тестового устройства , а точнее, его размер dp ( MDPI или неумноженное соотношение сторон экрана).

Я занимаюсь дизайном для iOS уже некоторое время, но Android для меня совершенно новая вещь. У Android так много устройств с таким количеством разных разрешений и размеров, что я на самом деле довольно сбиваюсь с толку, с чего начать.

Если у вас есть хороший рабочий процесс для iOS, вы будете в хорошей форме.

Плотность пикселей

У iOS есть три основных цели плотности пикселей:

• 1× (без сетчатки).
• 2× (ретина).
• 3× (Retina HD, сейчас это только iPhone 6 Plus).

Android действительно похож:

• 1× (на самом деле больше не используется).
• 1,5× (на самом деле больше не используется).
• 2× (xhdpi).
• 3× (xxhdpi).
• 4× (xxxhdpi, все еще довольно редко, но на некоторых устройствах высокого класса).

Обычно это 1×, 2× и 3× для iOS и 2×, 3× и 4× для Android. Очень похожий.

Если вы хотите создать свои документы таким образом, чтобы они легко масштабировались вверх и вниз, вам нужно будет преимущественно использовать векторные фигуры и стили слоев, если вы используете Photoshop. Если вы используете Illustrator… ну, вам, вероятно, не следует использовать Illustrator. Он отлично подходит для создания печатного дизайна и SVG для Интернета, но имеет некоторые проблемы, которые означают, что он может быть далеко не идеальным, если вы ожидаете получить PNG в качестве производственных ресурсов.

Можно ли создать ваши элементы для самого высокого разрешения, а затем использовать какой-то метод для их уменьшения для других меньших размеров?

Вы должны избегать масштабирования растровых изображений любой ценой. Это выглядит ужасно — пожалуйста, не создавайте ресурсы xxxhdpi в формате PNG, а затем уменьшайте их растровое изображение. Вы должны масштабировать документ, пока все еще является отдельными слоями и построено с использованием векторных фигур и сгенерированных эффектов (таких как стили слоя).

Мне очень нравится работать в основном в масштабе 1×. Это означает, что у вас есть документ с более низким разрешением, но все отлично масштабируется до 2×, 3× и 4×. Или вы можете работать с 2× и попытаться убедиться, что все попадает на ровную пиксельную сетку и т. д. Есть несколько разных подходов со своими плюсами и минусами. Если вы хорошо сконструировали документ, вы должны иметь возможность изменять размер документа и переключаться между плотностью отображения по мере необходимости.

Экспорт

Или мы ДОЛЖНЫ делать это вручную и создавать их для каждого из разных размеров?

Вам определенно нужно иметь несколько наборов ресурсов для разной плотности отображения, но существует довольно много стратегий для автоматизации процесса.

Генератор — один из способов сделать это: https://blogs.adobe.com/photoshopdotcom/2013/09/introduction-adobe-generator-for-photoshop-cc.html .

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

Каковы лучшие практики и идеальный поток для любого такого многоплатформенного требования. Есть ли способ легко повторно использовать графические ресурсы iOS?

Вы определенно можете повторно использовать определенные активы, но вам, вероятно, следует предположить, что вам придется переделать большую часть приложения таким образом, чтобы он был родным для платформы. По крайней мере, чтобы воспользоваться функциями платформы, такими как образы Android с 9 патчами:

https://developer.android.com/tools/help/draw9patch.html

Физический размер и соотношение сторон

iOS использует Auto Layout для поддержки устройств разного размера. Это означает, что вы можете создать макет для iPhone 6, но, немного поработав, вы сможете заставить один и тот же дизайн работать для всех размеров iPhone, используя Auto Layout в Interface Builder.

Android имеет аналогичную (да!) систему в виде объявленного макета XML.

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