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

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

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

Имеет большую тень.
Имеет более темный градиент.
Имеет слово «in» в верхней строке абзаца.
Изображение слева — скриншот из Sketch, а изображение справа — это воспроизведение на iOS. Эти различия возникают при визуализации графики. Они имеют одинаковый шрифт, межстрочный интервал, радиус тени, цвета и атрибуты градиента — все константы идентичны.

Как вы можете видеть, некоторые аспекты оригинального дизайна могут быть потеряны во время преобразования из файла дизайна в реальный код. Мы рассмотрим некоторые из этих деталей, чтобы вы могли знать, что посмотреть и как их исправить.

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

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

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

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

Типография
Тени
Градиенты
1. Типография
Типография может быть реализована различными способами, но для этого теста я собираюсь использовать Вебсайт под ключ Новосибирск  метки (элемент «Текст» в Sketch, UILabel в iOS).

Давайте рассмотрим некоторые отличия:

Самая большая разница в приведенном выше примере — это расположение разрывов строк. Третья группировка текста, начинающаяся с «Этот текст является SF Semibold», ломается после слова «25» в дизайне, но после слова «указывает» в приложении. Эта же проблема возникает с абзацем текста — разрывы строк непоследовательны.

Другое меньшее различие заключается в том, что ведущий (межстрочный интервал) и отслеживание (расстояние между символами) немного больше в Sketch.

Легче видеть эти различия, когда они непосредственно накладываются:

Как насчет других шрифтов? Заменяя Сан-Франциско Lato (широко используемый бесплатный шрифт), мы получаем следующие результаты:

Намного лучше!

Есть все еще некоторые различия в руководстве и отслеживании, но они, как правило, небольшие. Однако будьте осторожны — если текст необходимо согласовать с другими элементами, такими как фоновые изображения, эти небольшие смещения могут быть заметны.

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

(Примечание стороны: всегда помните, чтобы текстовое поле сильно обтекало текст в эскизе. Это можно сделать, выбрав текст и переключение между выравниванием «Исправлено» и «Авто», а затем сбросьте ширину текстового поля. любое дополнительное расстояние, это может легко привести к неправильным значениям, вводимым в макет.)

2. Тени
В отличие от типографики, которая имеет универсальные правила размещения, тени менее четко определены.

Как мы видим на изображении выше, тени в iOS по умолчанию больше. В приведенных выше примерах это делает наибольшую разницу на верхних краях прямоугольников.

Тени сложны, потому что параметры между Sketch и iOS не совпадают. Самое большое различие заключается в том, что понятие «распространение» на CALayer отсутствует, хотя это можно преодолеть, увеличив размер слоя, который содержит тень.

Тени могут сильно различаться в их различии между Sketch и iOS. Я видел некоторые тени с такими же параметрами, которые выглядят великолепно в Sketch, но почти невидимы при работе на реальном устройстве.

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

// старый
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize (ширина: 0, высота: 4)
layer.shadowRadius = 10
// новый
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize (ширина: 0, высота: 6)
Уровень.shadowRadius = 7
Необходимые изменения варьируются в зависимости от размера, цвета и формы. Здесь нам нужно лишь несколько незначительных корректировок.

3. Градиенты
Градиенты оказываются также неприятными.

Из трех градиентов различаются только «оранжевые» (верхние) и «синие» (внизу справа).

Оранжевый градиент выглядит более горизонтально в Sketch, но более вертикальным в iOS. В результате общий цвет градиента темнее в конечном приложении, чем в дизайне.

Разница более заметна в синем градиенте — угол более вертикальный в iOS. Этот градиент определяется тремя цветами: голубой в левом нижнем углу, синим в середине и розовым в верхнем правом углу.

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

// старый
layer.startPoint = CGPoint (x: 0, y: 1)
layer.endPoint = CGPoint (x: 1, y: 0)
// новый
layer.startPoint = CGPoint (x: 0.2, y: 1)
layer.endPoint = CGPoint (x: 0,8, y: 0)
Здесь нет волшебной формулы * — значения нужно корректировать и повторять до Разкрутка сайтов и в соц сетях тех пор, пока результаты не будут визуально совпадать.

* Jirka Třečák опубликовал отличный ответ со ссылками, объясняющими, как работает рендеринг градиента. Проверьте это, если вы хотите глубоко погрузиться в новый код!

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

Это отличный способ повысить уровень информированности в вашей команде — просто передайте им свой телефон, и они смогут сами убедиться. Просто коснитесь экрана в любом месте экрана, чтобы переключить изображения (похожие на gifs выше).