10 вещей, о которых следует помнить, работая со Sketch & Zeplin. Разработчики будут вам благодарны!

Взвесив плюсы и минусы Sketch & Zeplin перед тем, как начать их использовать, казалось, что плюсов было больше, чем минусов, но у вас все еще есть такая же нагрузка и трудности для общения с командой разработчиков. Вы задаетесь вопросом, неужели разработчики не знают, как использовать такой простой инструмент, как Zeplin.

Вы только что загрузили все свои проекты в Zeplin, и неожиданно вы получили сообщение от одного из разработчиков, в котором вас просили экспортировать все ваши значки и изображения и отправить их в виде zip-файла. И вы удивляетесь, почему они не загружают их напрямую из Zeplin? Они сказали вам загрузить скриншот в Zeplin, потому что они не могут видеть поля между элементами ... и вы думаете, тогда для чего предназначен этот инструмент?

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

1. Размер артборда

IOS

  • @ 1X: 375 x 667 пикселей

Android

  • мдд: 360 х 640 пикселей

Web

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

  • 1920 х 1080 пикселей
  • 1200 х 900 пикселей
  • 1024 x 768 пикселей
  • 320 х 480 пикселей

2. Как работают точки останова в адаптивных макетах

Загрузите иллюстрацию в Zeplin с адаптивным дизайном (в соответствии с уже установленными точками останова), другими словами, поделитесь тем, как ваш дизайн выглядит при разных разрешениях экрана и устройствах.

Вы думаете, что ясно, что дизайн будет горизонтально центрирован в более высоких разрешениях, таких как 1920 x 1080 пикселей, но разработчики не читатели ума.

Совместное использование адаптивного дизайна

3. Размер растровых изображений

Назначьте максимальный размер растровым изображениям, чтобы избежать потери качества при отображении дизайна на экранах с более высоким разрешением. Например, если вы работаете над приложением для iOS, установите размер изображений @ 3x. Если вы этого не сделаете, вы получите сообщение от разработчика, подобное следующему:

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

4. Сделайте экспортируемую группу значков, а также отдельные объекты отдельно

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

5. Сделайте экспортируемыми изображения, а не текст

Представьте себе баннер, который содержит изображение, текст и фильтр, и этот фильтр нельзя создать с помощью CSS. Затем разработчики должны иметь возможность экспортировать:

  1. Только изображение
  2. Только фильтр
  3. Имидж + фильтр

6. Линия-высота

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

Затем проверьте высоту строк различных текстовых полей. Имейте в виду, что разработчик собирается выделить текстовое поле, скопировать и вставить высоту строки. Установите одинаковую высоту строки во всех текстовых полях, чтобы сохранить согласованность вашего дизайна.

7. Ширина текстового поля

Установите ширину однострочного текста на «Авто». Это позволит вашей команде разработчиков просматривать поля между текстом и другими элементами интерфейса или границы дизайна экрана.

8. Уберите область вокруг иконки

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

9. Состояния кнопок

Вы сделали свой дизайн в Sketch и загрузили экраны в Zeplin. Теперь возникает вопрос разработчика.

Каково поведение значка, текста, кнопки, что происходит, когда пользователь делает зависание, щелкая…

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

10. Как организовать дизайн экранов в Zeplin

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

Сортируйте экраны по потоку пользователя по каждому из тегов (раздел или функциональность). Таким образом, первый экран в Zeplin будет первым экраном вашего веб-сайта или приложения.

Что еще?

Не тратьте свое время на создание руководства по стилю, вы можете добавлять цвета и типографики прямо из Zeplin (вкладка Styleguide).

PD: не забудьте пригласить команду разработчиков на проект вашего Zeplin!

Надеюсь, это поможет, дайте мне знать, если у вас есть какие-либо вопросы!

Присоединяйтесь к моему классу Skillshare о том, как создавать прототипы в inVision с помощью плагина Sketch & Craft, чтобы получить дополнительные советы: https://skl.sh/2Y4hj6l