UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Почему ваше приложение в Sketch смотрится лучше, чем на устройстве и как это исправить
Редакція
Редакція

Опубліковано • Оновлено

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

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

Найдите различия Можете ли вы определить различия между этими двумя изображениями? Изучение различий рендеринга в Sketch и iOS Если вы посмотрите достаточно внимательно, вы можете заметить несколько едва уловимых различий: Изображение справа:

  1. Имеет большую тень.
  2. Имеет более темный градиент.
  3. Имеет слово «in» в первой строке абзаца.

Изображение слева – скриншот из Sketch, а изображение справа – это его воспроизведение на iOS. Эти различия возникают при рендеринге (визуализации) графики. Они имеют одинаковый шрифт, межстрочный интервал, радиус тени, цвета и атрибуты градиента – все константы идентичны. Рендеринг графики на ios и Sketch Как вы можете видеть, некоторые аспекты оригинального дизайна могут быть потеряны во время преобразования из файла дизайна в реальный код. Мы рассмотрим некоторые из этих деталей, чтобы вы могли знать, как это исправить.

Почему нам не все равно

Дизайн имеет решающее значение для успешного мобильного приложения. Особенно в iOS пользователи привыкли к приложениям, которые хорошо работают и хорошо выглядят. Если вы дизайнер или разработчик мобильных приложений, вы знаете, насколько мелкие детали важны для опыта конечных пользователей. Высококачественное программное обеспечение может поступать только от людей, которые глубоко заботятся о своем ремесле. Существует много причин, по которым приложения могут выглядеть не так хорошо, как их оригинальные проекты. Мы рассмотрим одну из наименее заметных причин – различия в рендеринге между Sketch и iOS.

Отличия в рендере

Некоторые типы элементов интерфейса имеют заметные различия между Sketch и iOS. Мы рассмотрим следующие элементы: типографикатени, градиенты.

1. Типографика

Типографика может быть реализована различными способами, но для этого примера я собираюсь использовать labels (элемент “Text” в Sketch, UILabel в iOS). Давайте рассмотрим некоторые отличия: Разный редеринг текста в Sketch и iOS Самая большая разница в приведенном выше примере – это расположение разрывов строк. Третья группировка текста, начинающаяся с «This text is SF Semibold», обрывается в Sketch-файле после «25», но в приложении после слова «points». Эта же проблема возникает с абзацем текста – разрывы строк непоследовательны. Другое небольшое различие заключается в том, что интерлиньяж (расстояние между строками абзаца) и трассировка (расстояние между символами) немного больше в Sketch. Легче видеть эти различия, когда они непосредственно накладываются друг на друга: Различие рендера текста в Sketch и Xcode Как насчет других шрифтов? Заменяя San Francisco на Lato (широко используемый бесплатный шрифт), мы получаем следующие результаты: Заменяя San Francisco на Lato (широко используемый бесплатный шрифт), мы получаем следующие результаты Намного лучше! Есть все еще некоторые различия в интерлиньяже и трассировке, но они, как правило, небольшие. Однако будьте осторожны – если текст необходимо согласовать с другими элементами, такими как фоновые изображения, эти небольшие смещения могут быть заметны.

Как исправить

Некоторые из этих проблем связаны со шрифтом iOS по умолчанию – San Francisco. Когда iOS отображает системный шрифт, он автоматически включает трассировку на основе размера точки. Эта автоматически используемая таблица трассировки доступна на веб-сайте Apple. Существует плагин Sketch под названием «SF Font Fixer», который отражает эти значения в Sketch. Я очень рекомендую его, если ваш дизайн использует шрифт San Francisco. (Примечание: всегда помните, нужно чтобы текстовое поле плотно обтекало текст в Sketch. Это можно сделать, выбрав текст и переключаясь между выравниванием «Fixed» и «Auto», а затем сбросив ширину текстового поля. Если есть дополнительное расстояние, это может легко привести к неправильным значениям, вводимым в макет).

2. Тени

В отличие от типографики, которая имеет универсальные правила размещения, тени менее четко определены. Рендер теней в Sketch и iOS Как мы видим на изображении выше, тени в iOS по умолчанию больше. В приведенных выше примерах это дает наибольшую разницу на верхних краях прямоугольников. Тени сложны, потому что параметры в Sketch и iOS не совпадают. Самое большое различие заключается в том, что понятие «spread» на CALayer отсутствует, хотя это можно преодолеть, увеличив размер слоя, который содержит тень. Как сделать тень в Xcode как в Sketch Тени могут сильно различаться в Sketch и iOS. Я видел тени с одинаковыми параметрами, которые выглядят великолепно в Sketch, но почти невидимы при работе на реальном устройстве. Различие теней в Sketch и iOS

Как исправить

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

// 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 Из трех градиентов различаются только «оранжевые» (верхние) и «синие» (внизу справа). Оранжевый градиент выглядит более горизонтальным в Sketch, но более вертикальным в iOS. В результате общий цвет градиента темнее в конечном приложении, чем в дизайне. Разница более заметна в синем градиенте – угол более вертикальный в iOS. Этот градиент определяется тремя цветами: голубым в левом нижнем углу, синим в середине и розовым в верхнем правом углу. Пример рендера градиентов в Sketch и 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 Sketch vs iOS демонстрационное приложение – Попробуйте сами! Sketch vs iOS демонстрационное приложение – Попробуйте сами!

Выводы

Не думайте, что равные значения подразумевают равные результаты. Даже если числа совпадают, внешний вид может отличаться. В конце концов, после того, как будет реализован какой-либо проект, нужно провести итерацию. Хорошее взаимодействие между дизайнерами и разработчиками имеет решающее значение для высококачественного конечного продукта. Понравилась статья? Ставьте лайки и поделитесь ею с друзьями. Хотите оставаться в курсе последних разработок и дизайна мобильных приложений? Подписывайтесь на автора статьи в Twitter: https://twitter.com/nathangitter Спасибо Rick Messer и David Okun за то, что просмотрели черновики этой статьи.


Перевод статьи Nathan Gitter

Топ коментарі (0)