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)

Курси дизайну UX, UI

Вивчай UX, UI, дослідження, райтинг чи продуктовий бік дизайну, щоб створювати круті інтерфейси
Дізнатись більше