За время карьеры мне довелось сотрудничать со многими UI/UX-дизайнерами, и я заметил одну очень интересную особенность их работы: они не используют установленные стандарты для оформления проектов. Если вы новый разработчик в компании, члены команды могут поделиться с вами ссылками на GitFlow или GitHubFlow, и вы изучите все, что нужно знать об управлении репозиториями, за 10 минут. Как разработчики, мы можем добавить какие-то правила к анализаторам кода, и все будут следовать этим установленным требованиям. Но как вы можете координировать дизайнера, чтобы он подготовил все, что вам нужно? Как раз для этой цели мы в Pixel Point подготовили это руководство по передаче Pixel Perfect дизайна в разработку.
Программное обеспечение
В Photoshop есть множество полезных плагинов для контроля рабочего процесса, но мы рекомендуем Sketch или Adobe XD. Эти инструменты сочетают в себе преимущества использования векторной графики с простотой настройки свойств растровой графики. Они особенно полезны при дизайне мобильных приложений на устройствах с большой пиксельной плотностью. В этих случаях вам не нужно беспокоиться о цветовом профиле, размер файлов вашего проекта будет меньше, и вы сможете использовать массу функций, которые помогут работать более эффективно.
Размер файла руководства по оформлению интерфейса iOS для Photoshop и Sketch (http://apple.co/28YytHY)
Наименование исходников
Используйте тире для своих исходников
Google рекомендует это для всех файлов, включая HTML, PDF и .jpg. Вот видео Google WebMasters на эту тему: youtu.be/AQcSFsQyct8. Пока это возможно, переименуйте все на серверной стороне, лучше придерживаться постоянства в именах.
- Используйте только латинские символы.
- Не используйте пробелы.
- Используйте только нижний регистр.
- Используйте постфиксы @2x или @3x для имен изображений под устройства с разной пиксельной плотностью.
- Используйте те же правила и для названий своих папок.
Оптимизация изображений
Кто-то может сказать, что это задача разработчиков. С моей точки зрения, если вы хотите увидеть свой дизайн реализованным именно так, как вы его задумывали, не перекладывайте на разработчика принятие решений касательно визуальных аспектов, в том числе качество изображения, уровень сжатия.
Старайтесь использовать SVG
Когда вы используете SVG для своих иконок и иллюстраций, вам не нужно париться о разных пиксельных плотностях или готовить версии типа @2x и @3x. Кроме того, SVG-графика занимает гораздо меньше места, она эффективно сжимается на серверной стороне с помощью gzip.
Подумайте дважды перед тем, как высылать разработчику исходник весом больше 1МБ.
Вот два вероятных сценария, если вы все-таки рискнете: Первый, разработчик не будет учитывать размеры изображений, и это приведет к слишком долгому времени загрузки сайта. Второй, разработчик сильно сожмет ваше изображение, в итоге получится куча артефактов, низкое качество или изменения в цветовом профиле. Не ленитесь, высылайте программисту уже готовые исходники; вы ответственны за визуальное качество проекта. Ознакомьтесь с руководством по оптимизации графики от Google, и помните следующее:
- Используйте изображения в .jpeg без прозрачности, и тогда, когда вы можете пожертвовать качеством в пользу размера.
- Для лучшего качества и поддержки прозрачности, используйте .png.
- Для анимаций используйте видео-форматы или GIF. Помните, что GIF — очень старый формат, так что ваш файл в видео-формате будет лучше по качеству и меньше по размеру.
Инструменты оптимизации
Используйте инструменты оптимизации по типу Kraken, ImageOptim или Optimage. Инструменты вроде Photoshop и Sketch по умолчанию сохраняют метаданные изображения. И не используют оптимальные алгоритмы, чтобы картинка выглядела также, но занимала при этом меньше места.
В Kraken есть несколько разных опций в режиме Expert Mode для оптимизации графики.
Определите, какой уровень сжатия приемлем для нестатичных изображений
Протестируйте разные уровни сжатия графики в Photoshop или попросите разработчика продемонстрировать, как он будет обрабатывать изображения, чтобы определить приемлемое соотношение качества и размера. Ниже есть таблица размеров, которая подходит для разных типов изображений.
Не делайте спрайты
Спрайт — это файл в формате .jpg, SVG или .png, который содержит всю необходимую графику для вашего сайта, и помогает избежать дополнительных запросов к серверу для извлечения исходников. Это очень эффективный трюк по оптимизации, но не пытайтесь делать спрайты самостоятельно. Разработчик сделает спрайт автоматически, и ему понадобится не только спрайт, но и положение и размер каждого элемента в спрайте. Вы сильно усложните работу программисту, если заставите измерять все элементы вручную. Автоматическая генерация спрайта помогает сохранять иконки в их актуальном состоянии, и не нужно создавать версии @2x или @3x. Даже если вы не используете SVG-спрайты, это поможет сократить хлопоты по добавлению новых изображений в уже существующий спрайт.
SVG
Конвертируйте текст SVG в кривые; в противном случае, вы получите текстовые объекты в шрифте по умолчанию (создайте параметры в Adobe Illustrator).
Убедитесь, что у вас в SVG не вставлено изображение base64. Такое может быть при попытке экспорта как растрированного SVG-изображения.
Оптимизируйте SVG, удалив всю ненужную информацию с помощью SVGOMG. Обычно по умолчанию ваш SVG-файл будет содержать какие-то метаданные (например, title и description). Придется почистить код от неиспользуемых групп, пустых контейнеров. Вы можете почистить все это без потери качества, если воспользуетесь SVGOMG.
Проверяйте SVG в браузере перед добавлением в исходники. Это поможет убедиться, что вы правильно выполнили экспорт, и SVG отрисовался браузером так, как вы планировали. Так вы сможете отследить возможные баги, например, ненастроенную высоту или ширину, проблемы рендеринга до попадания исходников к программисту. Используйте целочисленные значения для ширины, высоты и положения разных элементов.
Favicon
- Подготовьте два файла с разными размерами.
- Назовите первый favicon. png и задайте размер 32×32.
- Все современные браузеры поддерживают .png для иконок favicon, и вам не нужно конвертировать их в формат ico.
- Назовите второй файл favicon-180×180.png, и задайте ему размер 180×180 для мобильных иконок.
Во многих статьях говорится, что вам нужно подготовить множество вариантов favicon разных размеров — 16×16, 24×24 или 48×48. Вам не нужно беспокоиться на этот счет, потому что 32×32 и 180×180 отлично подходят для всех случаев. Браузеры автоматически изменят размер иконки, если это будет необходимо. Не забывайте использовать инструменты для оптимизации изображений и для favicon-ов.
Сетка
Учитывайте поведение сеточных систем CSS при построении дизайна. Посмотрите на сетку Bootstrap. Это очень популярный CSS-фреймворк, который покроет все стандартные случаи, и его легко настроить программисту. Главное, что нужно понимать, это то, что колонки в CSS сетках имеют относительную ширину и статические внутренние отступы. По умолчанию в Bootstrap Grid 12 колонок и внутренний отступ 15px, но вы можете изменять эти параметры. Вы можете сказать, что в Sketch нет относительных численных параметров колонок, и будете правы, потому что там они не нужны.
При построении пользовательского интерфейса вы всегда показываете статичную картинку, и конечно же, есть статичный размер контейнера. Например, если у вас есть артборд размером 1920px и контейнер 960px, у вас будет одна колонка размером 80px и внутренний отступ 15px, то внутренний размер колонки будет 50px. Ознакомьтесь с этой статьей, чтобы лучше понимать, как правильно строить сетку в Sketch.
При разработке UI на базе сеточной системы вроде Bootstrap вам не нужно передавать программисту размер каждой колонки; вам нужно только показать ему колоночный оверлей. Разработчик поймет, какие классы ему нужно использовать в CSS: например, .col-sm-2 или .col-sm-6.
Многие генераторы сеток предлагают свои подходы построения сеток. У них единый размер расстояния между колонками и границы для контейнера. Чтобы лучше понять, о чем речь, используйте это руководство Bootstrap Grid.
Отзывчивый дизайн
Главная ваша цель — показать разработчику, как будет выглядеть каждый элемент при разных разрешениях, и с разными переходами между ними. Мыслите относительными, а не статичными значениями. Если вы подготовите макет с несколькими разрешениями, например, 320×568, 1024×768 и 1920×1080, это не означает, что на этом ваша работа окончена. Вам нужно также показать и объяснить переходы.
- Что будет с колонками и внутри контента при каждом разрешении?
- Как изменится размер контейнера при каждом разрешении (позаботьтесь об относительных значениях параметров колонок)?
- Как эти изменения отразятся на изображениях, подготовили ли вы графику под это поведение? Вот пример: у вас есть картинка 200×200 в десктопной версией, и вы решили сделать ее 100% по ширине для устройства с экраном 375×667. В этом случае вам понадобится картинка шириной более 750px (высокая пиксельная плотность), чтобы избежать размытия на мобильных экранах.
Еще одной типичной ошибкой дизайнеров является игнорирование высоты и продумывание поведения элементов только на основе изменения ширины контейнера. Иногда у вас есть элементы и с относительной высотой, и нужно будет пояснять поведение этих объектов разработчику. Вы должны установить минимальную или максимальную высоту, и позиционировать элементы внутри этого элемента.
Используйте базовые разрешения: 320×568, 375×667, 768×1024, 1024×768, 1280×768, 1366×768 и 1920×1080. И, конечно же, не забывайте тестировать свой дизайн на альбомной ориентации мобильных экранов.
Вот пример текста в колонках, который выглядит хорошо на десктопном экране, но у которого есть проблемы с отзывчивостью. Вы должны определиться, как будете решать подобные проблемы.
Не изобретайте колесо заново
Если у вас нет времени, или вы не уверены, что сможете проработать мелкие компоненты (такие как выпадающее меню) с нуля, спросите разработчика, какую библиотеку он может предложить, и просто отталкивайтесь от готовой версии. Пример — календарь для выбора даты. Очень многие думают, что нужно нарисовать календарь с числами, но вам нужно продумать и это:
- Будете ли вы обозначать даты с предыдущего или со следующего месяца.
- Какой ховер-эффект будет для каждой даты.
- Как вы обозначите текущую дату.
- Как вы обозначите выбранную дату.
- Как вы будете переключать годы и месяцы.
Мы живем в мире, где каждый пытается создать свой собственный стартап. Иногда клиентам лучше получить MVP (продукт с минимальным функционалом), чем тратить свои время и деньги на дизайнера, который пытается быть креативным. Дизайнеры должны понимать, что они могут использовать существующие библиотеки компонентов и полировать их до нужного вида под разные проекты. Это сокращает зачастую неоправданные затраты, даже если нужно придумать какое-то нестандартное решение.
Анимация и кликабельные прототипы
Вместо написания пометок, поясняющих, как анимации должны выглядеть и вести себя, покажите их. Вряд ли ваше описание анимации будет таким же точным, каким ее рисует ваше воображение. Используйте InVision или Axure для прототипирования сценариев пользователя и используйте Principle, Framer или Adobe After Effects для анимаций. Это избавит от недопониманий между вами, разработчиками и клиентами. Это также поможет протестировать ваши собственные предположения перед их внедрением. Анимации и прототипы отлично работают в качестве презентаций для клиентов, и дизайны выглядят особенно проработанными.
Прототипирование iOS-приложения в Sketch и Flinto: часть 1
UI kit
UI kit — это список всех элеменов, которые вы используете в проекте. Этот набор позволяет вам актуализировать все согласно с последними изменениями, и упрощает командную работу над большими проектами.
В комплекте UI вы должны проиллюстрировать такие элементы проекта: цвета, типографику, компоненты вроде кнопок, полей ввода и слайдеров; а также разные состояния — ховер, активное состояние и состояние по умолчанию. Используйте принцип D.R.Y. («Don’t Repeat Yourself» — «Не повторяйся»), когда размышляете, включить или не включить элемент в комплект UI. Если у вас два одинаковых элемента на артбордах, включите один в UI-комплект. В артбордах дизайнеров, которые не используют UI kit вы зачастую найдете две, три или четыре разные кнопки с очень небольшими, незначительными различиями. В этих случаях разработчик, скорее всего, реализует все вариации вместо создания одной унифицированной версии.
Для создания UI-библиотеки ваших проектов мы рекомендуем Craft. Для более крупных размеров было бы неплохо иметь HTML и CSS версии UI-комплекта, используя их как руководство для других элементов.
Экспорт
Сделайте жизнь программиста приятнее и увеличьте свои шансы на создание проекта pixel perfect, используя один из этих инструментов:
- Invision Inspect
- Zeplin
- Sympli
- Sketch Measure
Они могут помочь извлечь цвета, шрифты, размеры, исходники, расстояние между элементами, CSS-параметры и прочие данные из файлов Sketch или PSD. Invision и Zeplin также позволяют делать записи вместо создания дополнительных слоев, как Photoshop.
Состояния элементов
Чтобы избежать недопониманий, мы рекомендуем использовать определенную терминологию для разных состояний элементов, по аналогии с CSS. Разработчики будут знать, о чем вы говорите, без долгих объяснений.
- Default (По умолчанию)
- Hover (Ховер): Это состояние элемента при наведении на него курсора
- Active (Активное): Это состояние элемента при нажатии
- Focus (Фокус): Это состояние элемента, который сейчас является объектом клавиатуры, или активированного мышкой (поля ввода, текстовые области)
- Visited (Посещенные): Это состояние ссылок, на которые уже заходил пользователь
Высота строк
Высота строк — очень важная часть вашего дизайна и процесса его передачи в разработку. Здесь самое важное — понимать, как браузер будет простраивать каждый элемент в окне, и как высота строк на это повлияет. Посмотрите на изображение ниже. Это типичный пример текстового блока, отрисованного браузером. Высота этого элемент такая же, как высота строки, и высота разных символов не идентична.
Преимуществом использования Sketch является прорисовка текстовых объектов по той же логике. Размеры элементов Photoshop не зависят от высоты строки.
Лучшие практики советуют использовать высоту строки такую же, как и в шрифтах. Не используйте слишком отличающиеся, кастомные высоты строк по сайту. В каждом шрифте есть значение высоты строки по умолчанию. Например, в Roboto высота строки равна 1.4x размер шрифта; если у вас размер шрифта 16px, то высота строки будет 22px.
Даже если вы решите не использовать значение по умолчанию, попытайтесь следовать той же пропорции по всему сайту. Типичные значения — 1.3−1.6 от размера шрифта. Разработчикам это понравится, потому что они предпочитают задавать глобальное значение высоты строки и забыть об этом вопросе на протяжении всего проекта, уделяя внимания только размерам шрифта.
А теперь немного о поведении плавающих чисел в разных браузерах. Например, такие значения:
- Размер шрифта: 36px
- Высота строки: 1.4
Chrome, Safari, Opera: Вычисляют только целочисленные значения и обрезают дробные части. 36px * 1.4 = 50.4, значение округлится до 50px.
Firefox: Вычисляет с дробной частью. 36px * 1.4 = 50.4, значение так и останется 50.4px. Если у вас две строки текста, как в примере ниже, то получится 100.8px. Главное отличие Safari и Chrome в том, что если вы выберите высоту строки, например, 1.41, вы получите 100px; в Firefox, вы получите контейнер размером 101.533px.
Вывод прост: в Firefox более точные значения высот строки, например, 1.33 333. Если это вас не беспокоит, остановитесь на более красивых и округленных числах, например, 1.3.
Шрифты
Для начала попытайтесь найти приемлемые шрифты в Google Fonts. Браузеры поддерживают разные форматы шрифтов. Это означает, что используя кастомные шрифты, программисту понадобится подготовить их с помощью специальных сервисов, конвертируя ttf/otf в woff, woff2 или eot. Во время этого процесса шрифты могут потерять свое качество. Поэтому я советую прибегать к кастомным шрифтам только если вы знаете, что ваш программист с ними справится. Они должны знать, как работать с такими шрифтами.
Вот парочка важных моментов, которые нужно помнить касательно шрифтов:
- Не используйте более двух шрифтов. Это замедляет скорость загрузки шрифтов, особенно если они кастомные.
- Не используйте слишком много разных размеров и стилей (курсив, жирный, ненасыщенный, тонкий, обычный).
Разработчики и дизайнеры
Дизайнеры иногда ненавидят программистов, потому что они не могут реализовать их идеи; разработчики иногда ненавидят программистов, потому что они требуют возможности, которые технически сложно реализовать. Эти проблемы можно решить простым способом: разговор. Поговорите со своими дизайнерами, и не только на финальной стадии проекта. Обсуждайте свои идеи до того, как начнете их рисовать, потому что так вы гораздо проще избавитесь от нереализуемых идей на раннем этапе. Так вы меньше рискуете разочароваться результатом.
Мы думаем, что дизайнер и программист всегда могут найти приемлемый компромисс, и работать вместе эффективно, сокращая затраты и время на разработку своих проектов.
Нет комментариев