Почему приложения выглядят иначе, чем в макетах?
Сравниваем, как выглядят приложения в Sketch и iOS
Дизайн играет важную роль в успехе мобильного приложения. Особенно, если это приложение на iOS, где пользователи привыкли, что всё выглядит и работает безупречно. Если вы дизайнер или разработчик мобильных приложений, вы должны знать, какую важную роль в пользовательском опыте играют детали и микровзаимодействия. Часто бывает, что готовые приложения выглядят не так хорошо, как в дизайне. Сегодня мы разберемся в одной из наиболее тонких причин для этого — различии отображения между Sketch и iOS.
Найдите отличия
Видите различия в этих двух изображениях?
Если присмотреться, можно заметить следующие отличия в блоке справа:
- Тень шире;
- Градиент темнее;
- Слово “in” осталось на первой строке.
Блок слева — скриншот из Sketch, справа — его представление в iOS. Эти различия возникли при реализации макета, хотя шрифты, интервалы, тени, цвета и градиенты задавались одинаково.
Некоторые элементы дизайна теряются при реализации в коде. Давайте попробуем разобраться, почему это происходит и как это исправить.
Трудности реализации
Некоторые элементы пользовательского интерфейса заметно различаются в Sketch и iOS. Рассмотрим следующие из них:
- Типографика
- Тени
- Градиенты
1. Типографика
Есть несколько вариантов, как можно реализовать элементы типографики. Мы будем использовать labels (элемент “Text” в Sketch и UILabel в iOS).
Для начала сравним:
Прежде всего в глаза бросается местоположения переносов строк. Например, по дизайну, в третьем блоке (где текст “This text is SF Semibold…”), перенос идет после цифры “25”, а в реализованном приложении — после слова “app”. Та же проблема возникает и с абзацами текста.
Также есть небольшое различие в интерлиньяже (высоте строки) и трекинге (расстоянии между буквами).
Разницу легко заметить, если наложить макеты друг на друга:
А что если использовать другой шрифт? Заменим San Francisco на Lato:
Уже лучше, хотя всё еще есть различия в трекинге и интерлиньяже. Но и это небольшое различие может быть заметно, особенно, если нужно чтобы текст как-то перекликался с фоновыми элементами.
Как исправить?
Часть этих проблем связана с эпловским шрифтом San Francisco. Когда iOS рендерит его, она автоматически включает трекинг, посчитанный на основе размера шрифта. Подробнее об этом расчете можно почитать на сайте Apple. Есть специальный плагин для Sketch, который считает и позволяет отразить все эти значения в макете. Называется “SF Font Fixer”.
2. Тени
В отличие от типографики, которая имеет свои четкие определения, с тенями всё немного сложнее.
Как видно на картинке выше, тени на iOS по умолчанию активнее. Особенно это заметно на углах прямоугольников.
Сложность работы с тенями в том, что они по разному задаются в Sketch и iOS. Основное различие заключается в том, что понятие “Spread” (распространение, если по-русски) в CALayer отсутствует. Это можно преодолеть увеличением слоя, который содержит тень.
Также некоторые тени могут отлично выглядеть в макете, но быть почти незаметными в реальном приложении.
Как исправить?
Работать с тенями сложно и зачастую их приходится подгонять вручную, чтобы всё выглядело как в макете. Зачастую радиус и прозрачности тени должны быть меньше.
// 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. Градиенты
С градиентами тоже всё не так просто.
Из трёх градиентов выше, различаются только два: оранжевый и синий. Оранжевый в приложении отражается вертикальнее, чем в макете, и по итогу содержит больше темного оттенка.
Эта разница лучше заметна в синем. Угол перехода цветов в сверстанном приложении намного выше. Этот градиент определен тремя цветами: голубой в левом нижнем углу, синим в середине и розовым в верхнем правом углу.
Как исправить?
Крутите начальную и конечную точки, если вы используете угловой градиент. Попробуйте посмещать startPoint и endPoint своего 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)
К сожалению, здесь нет какой-то волшебной формулы, которая решила бы все проблемы. Значения нужно докручивать до тех пор, пока градиент не совпадет с тем, что нарисован в макете.
Есть классная статья на тему того, как происходит рендеринг градиентов в приложениях. Если хотите погрузиться глубже в разработку (кодинг) мобильных приложений, то будет хорошо ознакомиться с ней.
Попробуйте сами
Чтобы лучше видеть разницу, я собрал и запустил на устройстве тестовое приложение. Оно включает в себя все примеры, рассмотренные выше. Прикрепляю исходник приложения и скетч, чтобы вы могли всё потестить сами.
Также это отличный способ повысить уровень понимания в команде — просто покажите им телефон с приложением, чтобы все сами во всём убедились.
Вывод
Не всегда одинаковые значения приведут к одинаковому результату. Даже если числа совпадают, результат может отличаться. В конце-концов, по окончанию работы над продуктом, всегда необходимо сесть вместе и всё проверить. Хорошая коммуникация между дизайном и разработкой — ключ к хорошему продукту.
Ставьте лайки (claps 👏👏👏) и подписывайтесь на мой Телеграм-канал, если вам понравилась эта статья. В будущем планирую уделять еще больше времени каким-то полезным хакам и советам по дизайну продукта: как своим собственным, так и переводам. Кстати, если нашли интересную статью на английском и считаете, что её должен прочесть каждый — также пишите мне. Спасибо!
Оригинальная статья:
