10 советов по экспорту векторных активов из Sketch в Android

Преимущества векторов для растров очевидны. Векторные активы меньше по размеру, легко редактируются и намного проще в управлении (особенно с точки зрения размера и цвета).

Я работаю над относительно сложным приложением, которое поддерживает множество различных платформ. В связи с растущими размерами и разрешением экрана (на вас, Nexus 6P) для Android, мы сочли необходимым обновить существующие ресурсы с растровых до векторных форматов, чтобы сохранить их масштабируемые из-за необходимости поддерживать различные разрешения.

Большинство ресурсов, которые мы используем в настоящее время, изначально были созданы с использованием Sketch. Это вызвало некоторые интересные проблемы при попытке преобразования. Поскольку векторные активы только частично поддерживаются Android в его текущем API (Android 24), экспортированные активы ломались многими неожиданными способами.

С точки зрения дизайнера, это служит дневником расследований для пары вещей, которые мы узнали, пытаясь преобразовать все растровые ресурсы в приложении в векторы для Android. Руководства пользователя Android Studio не были особенно полезны, когда дело доходит до устранения неполадок.

Не совсем «Полная поддержка»

Многие из написанных здесь правил относятся к экспорту векторных ресурсов с помощью Sketch. Тем не менее, они также являются хорошим руководством для экспорта чистых и функциональных векторных ресурсов для использования на всех платформах.

1. Держите это просто глупо

Этот основной принцип разработки программного обеспечения применим и к активам: чем проще формы, тем лучше. Попробуйте использовать простые формы для создания сложных активов, которые вам нужны. Общее эмпирическое правило гласит: чем меньше траекторий и анкеров, тем «чище» это. Использование одной фигуры всегда предпочтительнее, чем использование нескольких перекрывающихся фигур для создания актива.

2. Избегайте использования масок

Маски, созданные с помощью Sketch, не поддерживаются текущей версией Android API. Android VectorDrawble (AVD) игнорирует любые маскировки, сделанные в Sketch, и маски, созданные в Sketch, иногда приводили к сбою в Adobe Illustrator. Если возникает ситуация, когда необходимо создать эффект затенения, следует использовать перекрывающуюся форму поверх существующего слоя в пользу масок.

Используйте операцию поиска пути «Пересечь» на слое затенения с базовым слоем, чтобы создать нужную фигуру.

3. Делайте контуры, а не штрихи

В ситуациях, где это возможно, старайтесь избегать использования штрихов для создания нужных фигур. Штрихи не всегда масштабируются должным образом с остальной частью изображения. Кроме того, AVD не различает различные положения границ и рассматривает все границы как «центральные» штрихи.

Таким образом, это означает, что внутренняя граница толщиной 10 на Sketch становится центральной штрихом толщиной 20 при визуализации на AVD.

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

Вы можете легко изменить штрихи в контуры, используя CMD + Shift + O.

4. Следопыты твой друг

Самые сложные формы могут быть созданы из композиции более простых форм, используя операции поиска пути. Познакомьтесь с ними. Формы, созданные таким образом, могут быть правильно отображены на любом устройстве.

5. Adobe Illustrator является лучшим средством устранения неполадок

Adobe Illustrator отображает векторные активы так же, как Android VectorDrawable (из анекдотического опыта). Если ресурс не отображается должным образом в AVD, попробуйте диагностировать проблему с помощью Illustrator. Часто решение так же просто, как удаление заполнения.

Распространенная проблема при экспорте ресурсов для Android с помощью Sketch.

6. Комбинированные и трансформированные формы могут не выглядеть так, как кажутся

Такие преобразования, как отражения и повороты, сделанные в Sketch, не полностью поддерживаются в Android VectorDrawable. В результате преобразованные слои не всегда выглядят так, как вы ожидаете. Самым простым решением этого было бы просто сгладить каждый путь, который имеет преобразование, чтобы преобразование стало частью пути.

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

7. Прозрачные пленки - ваш друг…

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

Обратите внимание на тень под стейком

8.… а градиенты не

С другой стороны, AVD в настоящее время не поддерживает градиенты. Сделанные таким образом активы почти наверняка сломаются при импорте. Затенение Cel следует использовать в пользу методов градиентного затенения.

Тень под стейком исчезает

9. Экспорт артбордов, а не слоев

Использование ограничительной рамки в Sketch для определения размеров векторного актива - это метод старой школы. Хотя это по-прежнему полезный метод определения границ для экспорта векторов, лучшим подходом является создание монтажной области, имеющей те же размеры, что и область просмотра, которую вы пытаетесь определить. Слой ограничительной рамки в активе обрабатывается как отдельный, но прозрачный путь при переводе в VectorDrawable xml.

10. Сглаживание форм решит большинство проблем

Экспортируемые ресурсы содержат метаданные, описывающие их преобразования и композиции во время их редактирования, поскольку это говорит пользователям о том, «как» они были созданы. Однако когда дело доходит до экспорта и рендеринга этих активов, эта посторонняя информация о том, как она была составлена, часто вызывает больше проблем, чем решает (вращения и отражения, выполняемые в Sketch, не поддерживаются), в дополнение к увеличению размера файла.

Показывается только конечное состояние актива, поэтому в этом случае имеет значение только внешний вид конечного состояния.

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