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

Возвращаясь к основной теме: у вас есть проекты, которые нужно реализовать. Ваш дизайнер (надеюсь) сделал их в Sketch или Adobe XD. Для целей этой статьи предположим, что он сделал это в Sketch. К настоящему времени файл Sketch должен быть готов. Что теперь? Вам нужно измерить поля и отступы, экспортировать иконки для Android и iOS, проверить шрифт текста и т. д. — вам просто нужно реализовать пользовательский интерфейс. Для этого либо ваш дизайнер должен предоставить вам эту информацию, либо он / она может поделиться дизайном, например, через. InVission или файл эскиза можно использовать совместно. Поясним, что первое решение не вариант, так как требует слишком много времени и усилий.

InVision

Это один из вариантов. Это великолепно! Поскольку он может быть кликабельным, может иметь анимацию и т. д., я думаю, что это лучший вариант при отправке макетов / дизайнов клиенту на утверждение. InVision также имеет режим «проверки». Вы можете измерять все, брать цвета, проверять шрифты, экспортировать активы и т. д.

Чтобы открыть режим проверки: откройте InVission -> выберите проект -> откройте выбранное представление -> либо нажмите I, либо нажмите ‹/› на нижней панели.

Экспорт ресурсов из InVission

По моему опыту, экспорт активов может быть довольно болезненным. Во-первых, иногда нужные вам ресурсы не помечены в Sketch как экспортируемые, поэтому вы не сможете их экспортировать (скриншот). Поэтому, чтобы изменить его, вам нужно связаться с дизайнером, вежливо попросить его сделать новую версию дизайна и обновить InVission. Хотя этот процесс прост, иногда это невозможно, потому что вы не можете связаться с дизайнером.

Во-вторых, чтобы одновременно экспортировать активы для Android и iOS, их необходимо пометить следующим образом.

Но эй, дизайнер не знает, что вам понадобится 8 измерений одного ассета, поэтому, вероятно, он сделает его экспортируемым только для iOS. Ваша задача — позаботиться об экспорте — либо сделайте это сами, либо будьте уверены, что это сделает дизайнер.

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

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

  1. экспортировать ресурс для iOS в 1x, 2x, 3x
  2. открыть Android-студию,
  3. создать необходимые ресурсы Android из ранее экспортированного файла @3x (поскольку он самый большой, должны быть созданы все ресурсы для Android),
  4. закрыть Android Studio,
  5. открыть файловый браузер,
  6. скопировать уже созданные ресурсы Android в мой проект Android,
  7. копировать активы, созданные в пункте №. 1 в мой проект iOS,
  8. открыть визуальную студию,
  9. добавить добавленные активы в мое решение.

Конечно, вместо использования Android Studio вы можете использовать любой веб-сайт, который может это сделать. Но все же это требует времени.
В обоих случаях это довольно сложно. Я хотел бы избавиться от ручной генерации файлов Android. Я бы хотел избавиться от точек 1–4. Я бы хотел, чтобы InVission сделал это за меня. Может быть, может? Пока не нашел как это сделать.

Файл эскиза

Начнем с того, что для этого подхода требуется наличие Sketch на вашем компьютере, поэтому он не подходит для пользователей Windows/Linux и для тех, у кого нет лицензии Sketch (или срок действия пробной версии уже истек). При таком подходе у вас должен быть исходный файл эскиза. Иногда это возможно, иногда нет (помните? Вы должны связаться с дизайнером).

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

Экспорт ресурсов Android.

Для этого вам нужно добавить плагин, позволяющий экспортировать ассет для Android. Чтобы сделать это:

  • откройте этот репозиторий Github,
  • скачать это,
  • разархивируйте загруженный файл.

Теперь откройте Sketch, нам нужно установить этот плагин.

  • Открыть эскиз
  • перейдите в раздел Плагины и откройте Управление плагинами,

  • в открывшемся представлении нажмите значок настроек и нажмите Показать папку плагинов.

Вы должны закончить с открытым Finder. Теперь просто скопируйте папку с расширением .sketchplugin в открытую папку. Вуаля. Сделанный. Еще раз откройте Sketch, и теперь ваше расширение должно быть видно. Легкий? Говорят, что этого можно добиться и с помощью Sketch Toolbox, но мне это не удалось, так как Toolbox на моем компьютере вылетает при запуске.

Итак, установив плагин:

  1. Выберите ресурс, который хотите экспортировать.
  2. В правом нижнем углу у вас должен быть раскрывающийся список. Открой это.
  3. Здесь у вас должна быть возможность выбрать Android. Если да — нажмите на нее. Он должен автоматически генерировать файлы mdpi,hdpi,xhdpiи т. д.. файлы

Итак, теперь вы можете экспортировать как iOS, так и Android. Это хорошо!
Но мне этого все равно было мало. Я хотел экспортировать ресурс для Android и iOS одним щелчком мыши. Так я и сделал. Если вы хотите иметь то же самое, что и следующее:

  • Нажмите Экспорт и выберите значок фильтра (в правом верхнем углу). Должно появиться следующее меню (или подобное).

Нажмите Создать пресет… Стоит отметить, что здесь у меня есть 4 пресета: Стандартный, для iOS (1x, @2x, @3x), Android (плагин I описывалось ранее) и мобильные устройства (iOS и Android)

  • Теперь, после нажатия Создать, это должно появиться

  • Нажмите + в левом нижнем углу, введите название пресета и добавьте нужный размер. Вы можете либо скопировать их из пресетов Android и iOS (если вы установили плагин), либо скопировать их с изображения выше.

Это все. Вуаля, теперь вы можете экспортировать как iOS, так и Android одним щелчком мыши.

Работа с дизайном

Либо вы разработчик, либо дизайнер — не важно. Просто при отправке/получении файла дизайна проверьте следующее:

  • Каков размер монтажной области/страницы/представления/как бы мы это ни называли? Дизайн сделан для iPhone 7, 8+ или SE? Или, может быть, дизайн делается для Android? Это важно при измерении предметов. Кроме того, имейте в виду, что некоторые дизайны могут не очень хорошо смотреться на маленьких/больших телефонах. Всегда оставайтесь на связи со своим дизайнером/разработчиком, чтобы знать, каким должен быть конечный результат.
  • Проверьте, есть ли элементы управления для конкретной платформы. Лично я ненавижу реализовывать нижнюю панель вкладок на Android — я твердо верю, что она должна быть сверху, а iOS — внизу! Консистенция иногда не очень!
  • Проверьте, правильно ли сгруппированы элементы, чтобы было легко понять, что происходит.
  • Расширяя предыдущий пункт: проверьте, понятны ли названия активов/групп. Иногда трудно понять, что такое «Группа 4» или «Символ 7».
  • Проверьте, обрезаны ли изображения до нужного размера. Чтобы визуализировать это: я вижу дизайн с квадратным изображением в нем. Я экспортирую изображение. Экспортированное изображение не является квадратом. Эх. Просто не делай этого.
  • Проверьте, какой шрифт используется. Если это пользовательский: запросите файлы .ttf, поскольку они вам понадобятся.

И всегда помните: дизайнер/разработчик вам не враг! Вы играете в одной команде, так что не ссорьтесь, будьте вежливы и сотрудничайте!

Надеюсь, этот пост помог вам в вашем ежедневном развитии. Как всегда: если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне!

Первоначально опубликовано на сайте lukaszlawicki.pl 14 мая 2018 г.