iOS-Разработка
Почему ваше приложение выглядит в Sketch лучше, чем в iOS?
Nathan Gitter
Студенты на курсе «iOS-разработчик» жалуются, что между дизайнерами и разработчиками вечный холивар. Дизайнер недоволен, что готовое приложение выглядит совсем не так, как в его макете, а разработчик пытается объяснить, что невозможно сделать «как на картинке».

Давайте посмотрим, как можно помирить две вселенные с помощью советов от Натана Гиттера, редактора SwiftKick Mobile. Мы перевели и адаптировали его материал для вас. Вот линк на оригинал.
11 июля 2018
designer + engineer, iOS app maker, writing about the intersection of art and tech

Editor of SwiftKick Mobile
Сыграем в игру?
Найдите отличия:
Блок слева — из Sketch, а справа — результат преобразования дизайна в код.

Если присмотреться, то у блока справа:

  1. Тень гораздо больше.

  2. Точка градиента смещена.

  3. Висячий предлог "in" в первой строке абзаца.

Различия возникают при реализации макета и, несмотря на одинаковые параметры шрифта, интервала, радиуса тени и градиента, в итоге мы имеем не совсем то, за что заплатили дизайнеру.


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

Есть ряд причин, по которым приложения могут отличаться от оригинального дизайна, и в этой статье мы рассмотрим самые распространенные различия в рендеринге между Sketch и iOS.
Основные различия в рендеринге
Поговорим о трех основных элементах: типографике, тенях и градиенте.
01
Типографика
Типографику можно реализовать различными способами, для примера мы использовали labels (элемент Text в Sketch и UILabel в iOS).


Самая большая проблема в приведенном выше примере - это разрыв строк. Отличие хорошо видно в строке "This text is SF Semibold ...", которая обрывается после "25" в Sketch, а в приложении после слова "points".

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


А что насчет других шрифтов? Заменим шрифт San Francisco на Lato (популярный, бесплатный шрифт) и взглянем на результат:



Гораздо лучше! Хотя все еще есть некоторые различия в интерлиньяже и трекинге, но совсем небольшие. Правда эти различия могут быть заметны, к примеру, если текст привязан к элементам фона.
Как исправить?

Причиной тому шрифт San Francisco, который установлен в iOS по умолчанию. Разработчики Apple сделали его динамическим, чтобы было удобно читать как на маленьких, так и на больших экранах. Система автоматически регулирует размер шрифта на основании настроек пользователя и размера точки (pt).

О том, как это делает iOS, а также с таблицей зависимостей можно ознакомиться на официальном сайте Appel.

Для фанатов San Francisco и Sketch разработан специальный плагин: SF Font Fixer, который учитывает все эти значения и значительно облегчает жизнь.

02
Тени
С типографикой все более ли менее ясно, для неё существуют определенные правила, а вот с тенями все немного сложнее.


На картинке выше очень хорошо видно, что на iOS тени выглядят шире, особенно на верхних краях.

Дело в том, что Sketch и iOS по-разному обрабатывают задаваемые параметры, а именно растяжение тени (spread), в CALayer оно просто отсутствует. Но и это можно исправить, увеличив слой, который содержит тень.



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

Работа с тенями приносит много головной боли и все косяки зачастую приходится исправлять руками, чтобы все было «как на картинке». Чаще всего радиус тени должен быть меньше, а прозрачность больше.


Подбор параметров зависит от размера, цвета и формы. В этом примере изменения незначительны, но дают нужный результат.
03
Градиент
С градиентом тоже не все так просто.


Как видно в примере выше, два из трех градиентов отличаются: оранжевый и синий. В приложении угол оранжевого градиента завален вправо и по итогу мы имеем слишком темный оттенок. Разница хорошо видна на синем цвете.

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

Меняйте параметры начальной и конечной точки, если вы используйте линейный градиент. Попробуйте изменить startPoint и endPoint для CAGradientLayer, чтобы добиться результата.

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

Исходник доступен по ссылке. Не забудьте рассказать об этом своей команде, а лучше просто покажите им на своем устройстве.
Подведем итоги
Не надейтесь, что указав одинаковые параметры, вы получите одинаковый результат. По итогу релиза вашего приложения, посадите рядом с собой дизайнера и внимательно все перепроверьте. Коммуникация в команде — залог качественного и успешного продукта.
Авторский курс
по iOS-разработке
от Redmadrobot
Этот курс поможет вам быстро освоить азы разработки мобильных приложений под iOS.

Вы научитесь писать чистый код, который соответствует стандартам оформления кода в современных командах.

Ведущие разработчики из Redmadrobot дадут вам концентрат из опыта, best practice, техник и инструментов, использующихся в компании №1 в мобильной разработке.
1
2
3
Понравилось? Поделитесь с друзьями