Как реализовать пиксельный дизайн пользовательского интерфейса iOS

Вы, наверное, слышали фразу «пиксельно-идеальный дизайн» бесчисленное количество раз, даже не задумываясь о том, что она означает или что она должна означать. В последние месяцы вы, возможно, слышали об упадке концепции идеального до пикселя дизайна, но с этими утверждениями есть небольшая проблема, особенно когда речь идет о дизайне пользовательского интерфейса iOS.

А именно, определение идеального до пикселя дизайна не высечено на камне, как большинство руководств по пользовательскому интерфейсу iOS. Люди интерпретируют его по-разному, отсюда и проблема — совершенство пикселей может показаться кому-то устаревшим, но другие будут продолжать использовать этот принцип еще долгие годы, хотя и под другим названием. В основном это проблема номенклатуры.

Что такое идеальный до пикселя дизайн пользовательского интерфейса?

Поскольку четкого определения совершенства пикселей не существует, мое понимание концепции дизайна с идеальными пикселями заключается в том, что все делается для максимальной четкости и точности. После того, как дизайн реализован, он выглядит одинаково на любом дисплее iPhone без каких-либо артефактов или проблем.

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

Но почему пиксельный дизайн?

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

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

Из-за высокой конкуренции в Apple App Store приветствуются любые доработки, улучшающие внешний вид и удобство работы пользователей. Это может помочь выделить ваше приложение и сделать его более заметным и, следовательно, более прибыльным.

Это краткое руководство по дизайну пользовательского интерфейса iOS проведет вас через весь процесс от базовой стадии проектирования до реализации с точки зрения дизайнера и разработчика.

Создание дизайна пользовательского интерфейса iOS

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

Основные инструменты дизайна интерфейса iOS

Думаю, я прав, говоря, что Sketch стал стандартом де-факто для веб- и мобильных UI/UX-дизайнеров. Хотя Adobe XD является многообещающей альтернативой, она отстает от Sketch с точки зрения популярности.

Далее мы выберем размер артборда. В настоящее время у нас есть устройства iOS с разными размерами экрана и соотношением сторон, и нам нужно выбрать один размер для создания нашего дизайна. Благодаря Auto Layout он будет легко адаптирован к другим размерам дисплея. При необходимости вы можете создать разные варианты макета для разных классов размеров .

Единственный реальный вопрос здесь: как дизайнер должен делиться информацией об адаптации дизайна для различных дисплеев с разработчиком?

К счастью, нет необходимости записывать спецификации для каждого из них, так как об этом позаботится плагин Auto Layout для Sketch. Дизайнеру просто нужно установить желаемую автоматическую компоновку, экспортировать в разные размеры экрана одним щелчком мыши, а разработчик поймет, как разместить ограничения макета и убедиться, что все выглядит хорошо, будь то iPhone X или старый добрый iPhone 5.

Примечание. Начиная с версии 44 команда Sketch значительно улучшила элементы управления изменением размера, предоставив пользователям больше возможностей и контроля над поведением слоев при изменении размера их родителя.

Настройка вашего дизайна

Звучит здорово, но мы еще не выбрали размер, который будем использовать для создания нашего дизайна. Согласно статистике iOS Дэвида Смита, 57% всех пользователей iPhone полагаются на 4,7-дюймовые дисплеи, представленные в iPhone 6/6s и впоследствии используемые в iPhone 7 и даже в недавно выпущенном iPhone 8.

Я уверен, что вы уже знакомы с 4,7-дюймовыми дисплеями Apple, но, если вы не разбираетесь в цифрах, мы говорим о дисплеях с разрешением 750x1334 пикселей и плотностью 326 пикселей на дюйм (PPI). Это стандартный дисплей Retina, и в коде у нас будет половина разрешения. Поэтому я предлагаю вам начать с 375x667 пикселей.

Далее нам нужно убедиться, что дизайн пользовательского интерфейса iOS обеспечивает максимальную резкость. Чтобы достичь этой цели, вам нужно включить подгонку пикселей :

Вот пример простого прямоугольника с подгонкой пикселей и без нее:

Используйте Round: Full Pixels при редактировании векторных объектов:

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

Не стесняйтесь использовать сложные векторные анимации, потому что разработчик может легко воспроизвести их с помощью библиотеки Lottie. Вы можете воспроизводить анимацию Adobe After Effects на мобильном устройстве, не страдая от артефактов масштабирования. Просто предоставьте файл JSON разработчику и все.

Максимально используйте цветовой профиль sRGB. Если sRGB недостаточно на дисплеях с широкой гаммой, вам потребуется предоставить либо цвета, либо графические ресурсы (один sRGB, а другой со встроенным цветовым профилем). Подробная информация о цветовых профилях доступна в руководстве Apple по HID, если она вам понадобится.

Пользовательский код для идеальных результатов

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

Выбор правильных инструментов

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

Еще один классный инструмент — PaintCode, который может генерировать код из векторных изображений. PaintCode использует ваши пути SVG и данные о цвете для создания классов Swift или ObjC. С PaintCode вы можете использовать выражения, переменные и т. д. для создания пассивных/активных состояний ваших кнопок, состояний вверх/вниз, динамического текста, анимации из переменных и многого другого.

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

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

Хорошо, у разработчика наконец-то есть все, что ему нужно, так как же нам идеально реализовать идеальный до пикселя дизайн (извините за каламбур)?

Настройка и синхронизация ваших инструментов

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

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

Чтобы сделать это правильно, вам нужно синхронизировать ваши инструменты:

• Установите цветовой профиль дисплея на sRGB: перейдите в « Системные настройки» — «Дисплеи» — «Цвет » и выберите sRGB IEC61966-2.1 .

• В Digital Color Meter или любом другом инструменте выбора цвета выберите отображение в sRGB .

• Убедитесь, что цветовой профиль в цветовой палитре Xcode установлен на Device RGB.

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

В Xcode 9 не забудьте сохранить векторные данные , когда это необходимо. Хотя это увеличит размер приложения, это также позволит вам использовать изображение для любого размера экрана. Однако в iOS 10 и более ранних версиях мобильной ОС Apple изображения не будут масштабироваться с использованием дополнительных векторных данных.

Вместо этого более старые версии ОС будут использовать устаревшие механизмы масштабирования и оставят вас с размытым изображением при масштабировании сверх исходного размера. Вы можете ознакомиться с официальной документацией Apple для получения дополнительной информации по этому конкретному вопросу.

Наконец, разработчику необходимо убедиться, что размеры и расстояния максимально точно соответствуют исходному проекту. Если в Zeplin есть какая-либо сомнительная информация, вы можете измерить расстояния между различными компонентами пользовательского интерфейса iOS с вариациями правил экрана. Одним из них является xScope, экранная линейка с множеством практических функций.

Воплощение вашего дизайна интерфейса iOS в жизнь

Когда дело доходит до реализации дизайна пользовательского интерфейса iOS, есть несколько подходов на выбор: раскадровка, XIB и пользовательский код.

• Раскадровка — визуализирует экраны и навигацию между ними, но нет возможности наследовать дизайн из одного контроллера в другой.

• XIBs — Визуализирует один экран или его часть, легко наследоваться. До Xcode 9 не было возможности использовать верхние/нижние направляющие макета, в то время как в Xcode 9 мы можем использовать Safe Area .

• Код — безусловно, самый гибкий вариант, но не обеспечивает мгновенную визуализацию.

Для раскадровки вам нужно будет разделить свой дизайн на потоки, например, LoginFlow.storyboard, SettingsFlow.storyboard или NewsFeedFlow.storyboard. Таким образом, ваши раскадровки будут легкими.

Сгруппируйте элементы пользовательского интерфейса в блоки. Это упрощает поддержку всех ограничений. Не ленитесь и размещайте именованные виды по порядку, так как они появляются на экране сверху вниз. Имейте в виду, что нижняя будет отображаться над верхней. Это поможет вам быстрее находить разные виды.

См. следующий пример для несгруппированных и сгруппированных элементов:

Если у вас есть несколько объектов, выровненных по левому/правому краю, не выравнивайте их по краю со смещением. Лучшим подходом является выравнивание по предыдущему элементу или реализация специального представления _ffset_с ограничением ширины. Если вам понадобится изменить смещение когда-нибудь в будущем, это несколько упростит задачу.

Чтобы использовать цвета в IB, вы можете подготовить палитру в нижней части палитры цветов Xcode.

Примечание. Если минимальная версия iOS вашего приложения — 11, вы можете использовать параметр «Именованные цвета» в каталоге ресурсов.

Подведение итогов

Вот и все. Теперь осталось отправить результат команде QA, проверить, что все в порядке, и вуаля! Наше идеальное по пикселям приложение готово.

Цель этой статьи состояла в том, чтобы предоставить линейный и простой пример идеального до пикселя дизайна пользовательского интерфейса iOS, позволяющего получить наилучшие результаты за минимально возможное время. Сотрудничество между дизайнерами пользовательского интерфейса и разработчиками не всегда бывает таким простым и беспроблемным, но это тема для другой статьи.