Изучение различий рендеринга в Sketch и iOS
Найдите различия
Можете ли вы определить различия между этими двумя изображениями?
Если вы посмотрите достаточно внимательно, вы можете заметить несколько едва уловимых различий:
Изображение справа:
- Имеет большую тень.
- Имеет более темный градиент.
- Имеет слово «in» в первой строке абзаца.
Изображение слева — скриншот из Sketch, а изображение справа — это его воспроизведение на iOS. Эти различия возникают при рендеринге (визуализации) графики. Они имеют одинаковый шрифт, межстрочный интервал, радиус тени, цвета и атрибуты градиента — все константы идентичны.
Как вы можете видеть, некоторые аспекты оригинального дизайна могут быть потеряны во время преобразования из файла дизайна в реальный код. Мы рассмотрим некоторые из этих деталей, чтобы вы могли знать, как это исправить.
Почему нам не все равно
Дизайн имеет решающее значение для успешного мобильного приложения. Особенно в iOS пользователи привыкли к приложениям, которые хорошо работают и хорошо выглядят.
Если вы дизайнер или разработчик мобильных приложений, вы знаете, насколько мелкие детали важны для опыта конечных пользователей. Высококачественное программное обеспечение может поступать только от людей, которые глубоко заботятся о своем ремесле.
Существует много причин, по которым приложения могут выглядеть не так хорошо, как их оригинальные проекты. Мы рассмотрим одну из наименее заметных причин — различия в рендеринге между Sketch и iOS.
Отличия в рендере
Некоторые типы элементов интерфейса имеют заметные различия между Sketch и iOS. Мы рассмотрим следующие элементы: типографика, тени, градиенты.
1. Типографика
Типографика может быть реализована различными способами, но для этого примера я собираюсь использовать labels (элемент «Text» в Sketch, UILabel в iOS).
Давайте рассмотрим некоторые отличия:
Самая большая разница в приведенном выше примере — это расположение разрывов строк. Третья группировка текста, начинающаяся с «This text is SF Semibold», обрывается в Sketch-файле после «25», но в приложении после слова «points». Эта же проблема возникает с абзацем текста — разрывы строк непоследовательны.
Другое небольшое различие заключается в том, что интерлиньяж (расстояние между строками абзаца) и трассировка (расстояние между символами) немного больше в Sketch.
Легче видеть эти различия, когда они непосредственно накладываются друг на друга:
Как насчет других шрифтов? Заменяя San Francisco на Lato (широко используемый бесплатный шрифт), мы получаем следующие результаты:
Намного лучше!
Есть все еще некоторые различия в интерлиньяже и трассировке, но они, как правило, небольшие. Однако будьте осторожны — если текст необходимо согласовать с другими элементами, такими как фоновые изображения, эти небольшие смещения могут быть заметны.
Как исправить
Некоторые из этих проблем связаны со шрифтом iOS по умолчанию — San Francisco. Когда iOS отображает системный шрифт, он автоматически включает трассировку на основе размера точки. Эта автоматически используемая таблица трассировки доступна на веб-сайте Apple. Существует плагин Sketch под названием «SF Font Fixer», который отражает эти значения в Sketch. Я очень рекомендую его, если ваш дизайн использует шрифт San Francisco.
(Примечание: всегда помните, нужно чтобы текстовое поле плотно обтекало текст в Sketch. Это можно сделать, выбрав текст и переключаясь между выравниванием «Fixed» и «Auto», а затем сбросив ширину текстового поля. Если есть дополнительное расстояние, это может легко привести к неправильным значениям, вводимым в макет).
2. Тени
В отличие от типографики, которая имеет универсальные правила размещения, тени менее четко определены.
Как мы видим на изображении выше, тени в iOS по умолчанию больше. В приведенных выше примерах это дает наибольшую разницу на верхних краях прямоугольников.
Тени сложны, потому что параметры в Sketch и iOS не совпадают. Самое большое различие заключается в том, что понятие «spread» на CALayer отсутствует, хотя это можно преодолеть, увеличив размер слоя, который содержит тень.
Тени могут сильно различаться в Sketch и iOS. Я видел тени с одинаковыми параметрами, которые выглядят великолепно в Sketch, но почти невидимы при работе на реальном устройстве.
Как исправить
Тени сложны и требуют ручной регулировки в соответствии с оригинальным дизайном. Зачастую радиус тени должен быть меньше, а непрозрачность должна быть выше.
// old
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 10
// new
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 6)
layer.shadowRadius = 7
Необходимые изменения варьируются в зависимости от размера, цвета и формы. Здесь нам нужно лишь несколько незначительных корректировок.
3. Градиенты
Градиенты оказывается также доставляют хлопоты.
Из трех градиентов различаются только «оранжевые» (верхние) и «синие» (внизу справа).
Оранжевый градиент выглядит более горизонтальным в Sketch, но более вертикальным в iOS. В результате общий цвет градиента темнее в конечном приложении, чем в дизайне.
Разница более заметна в синем градиенте — угол более вертикальный в iOS. Этот градиент определяется тремя цветами: голубым в левом нижнем углу, синим в середине и розовым в верхнем правом углу.
Как исправить
Может быть необходимо настроить начальную и конечную точки, если градиент находится под углом. Попробуйте частично компенсировать startPoint и startPoint вашего CAGradientLayer, чтобы учесть эти различия.
// old
layer.startPoint = CGPoint(x: 0, y: 1)
layer.endPoint = CGPoint(x: 1, y: 0)
// new
layer.startPoint = CGPoint(x: 0.2, y: 1)
layer.endPoint = CGPoint(x: 0.8, y: 0)
Здесь нет волшебной формулы * — значения нужно корректировать и проверять до тех пор, пока результаты не будут визуально совпадать.
*Jirka Třečák опубликовал отличную статью со ссылками, объясняющими, как работает рендер градиента. Прочтите, если вы хотите глубоко погрузиться в код!
Посмотрите сами
Я создал демонстрационное приложение, чтобы легко увидеть эти различия на реальном устройстве. Оно включает примеры выше, вместе с исходным кодом и оригинальным файлом Sketch, чтобы вы могли настроить константы в своем контенте.
Это отличный способ повысить уровень информированности в вашей команде — просто передайте им свой телефон, и они смогут увидеть сами. Просто коснитесь экрана в любом месте, чтобы переключаться между изображениями (похожими на gif-файлы выше).
Скачайте демонстрационное приложение с открытым исходным кодом здесь: https://github.com/nathangitter/sketch-vs-ios
Выводы
Не думайте, что равные значения подразумевают равные результаты. Даже если числа совпадают, внешний вид может отличаться.
В конце концов, после того, как будет реализован какой-либо проект, нужно провести итерацию. Хорошее взаимодействие между дизайнерами и разработчиками имеет решающее значение для высококачественного конечного продукта.
Понравилась статья? Ставьте лайки и поделитесь ею с друзьями. Хотите оставаться в курсе последних разработок и дизайна мобильных приложений? Подписывайтесь на автора статьи в Twitter: https://twitter.com/nathangitter
Спасибо Rick Messer и David Okun за то, что просмотрели черновики этой статьи.
