Почему ваше приложение в Sketch смотрится лучше, чем на устройстве и как это исправить

Изучение различий рендеринга в Sketch и iOS

Найдите различия

Можете ли вы определить различия между этими двумя изображениями?

Если вы посмотрите достаточно внимательно, вы можете заметить несколько едва уловимых различий:

Изображение справа:

1. Имеет большую тень.
2. Имеет более темный градиент.
3. Имеет слово «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 за то, что просмотрели черновики этой статьи.

Нет комментариев