1 4 1160x437 - Привязка к пикселям в дизайне иконок

Мы хотим, чтобы наши дизайны четко отображались на всех платформах для всех пользователей. Чтобы достичь этой цели с цифровыми иконками, следует придерживаться отраслевого стандарта. Рекомендуется применять привязку к пикселям (pixel-snapping или pixel-fitting), чтобы иконки точно размещались на пиксельной сетке. Это означает, что все обводки и фигуры привязываются к шагу в 1 пиксель и располагаются четко на пикселях.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок

Большинство дизайн-систем и рекомендаций по иконкам отражают это в своих спецификациях – Google MaterialAdobe SpectrumIBM Carbon и Firefox Photon и многие другие.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок
Иконка Adobe Fill and Sign из набора  иконок  Phosphor

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок

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

Чтобы ответить на эти вопросы, я провел тест.

Порядок действий

Я создал 4 тестовых иконки на холсте размером 48 x 48px, используя обводку 2px и ряд прямых линий и кривых.

  • Вариант 1 был привязан к 1 пикселю
  • Вариант 2 был привязан к 0,5 пикселя
  • Вариант 3 был привязан к 0,25 пикселя
  • Вариант 4 использовал нечетное субпиксельное число (0,315 пикселя)
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок
4 тестовых варианта

Я экспортировал их из Illustrator и Sketch, в форматах SVG и PNG, и отобразил их на HTML-странице в 4 размерах (оригинал 48 x 48px, 64 x 64px32 x 32px24 x 24px). Затем я провел тест, изучив эти активы в 3 браузерах на 7 устройствах:

  • MacBook Pro (Chrome, Firefox, Safari)
  • Lenovo Thinkpad (Chrome, Firefox)
  • Windows 10 игровой ПК с монитором Acer P244W (Chrome, Firefox)
  • iPad Pro (Chrome, Firefox, Safari)
  • Pixel 3a (Chrome, Firefox)
  • Motorola Moto E4 (Chrome, Firefox)
  • iPhone 11 Pro (Chrome, Firefox, Safari)

Я повторил процесс 3 раза, чтобы быть уверенным в полученных результатах.

Результаты

Для наших целей я подведу итог здесь. К сожалению, я не могу проиллюстрировать все результаты, это было бы похоже на разговор о матрице внутри матрицы. 🙃

  • Привязка к 1px и 0,5px в целом дала наилучшие результаты, но не всегда работала идеально. В некоторых случаях эффект привязки к пикселям был сильнее, в других – меньше. Отсутствие привязки пикселей на мониторе Acer дало чрезвычайно размытые результаты, в то время, как устройства Apple были более щадящими в рендеринге всех вариантов. Казалось, что чем ниже разрешение, тем важнее привязка к пикселям. Иногда привязка к целому пикселю давала максимальную резкость картинки (ThinkPad, Acer), иногда привязка к половине пикселя (Pixel 3a, Motorola в одном случае), а иногда привязка к 1px и 0,5px давала примерно одинаковый результат (устройства Apple: MacBook Pro, iPhone 11 Pro, iPad Pro). Привязка к 0,5px привела к наименьшей резкости на мониторе Acer. Важно отметить, что я оценивал резкость иконок на очень близком расстоянии (~ 10-12 см) от экрана. При просмотре на нормальном расстоянии, картинка может быть лучше.
  • Устройство (аппаратное обеспечение + операционная система + монитор) оказывает большее влияние на рендеринг, чем браузер. Различия между браузерами на одном устройстве были незначительными, в то время, как различия между устройствами были более заметными. Например, Pixel 3a был довольно беспристрастным в рендеринге, довольно хорошо сглаживая все варианты. Напротив, дисплей Lenovo Thinkpad выводил более резкую картинку с зубчатыми краями (эффект лесенки). Когда дело доходит до определения того, какой уровень привязки обладал наибольшей резкостью, устройства под управлением Windows 10 демонстрировали схожие результаты, устройства под управлением Android – схожие результаты, и устройства под управлением Apple OS – схожие результаты. Кажется, операционная система оказывает большое влияние на рендеринг.
  • Помимо дизайна иконок и экспорта, множество факторов влияет на резкость картинки. Увеличение экрана браузера (до 110%, 125%, 200% и т. д.) изменило иконки, казавшиеся более четкими. Изменение размера иконок в коде (до 24px, 32px, 64px) также привело к непредсказуемым результатам. Теоретически, иконка 24px (обводка 1px) будет резче, чем иконка 32px (обводка 1.33px), но это не всегда было так. Помимо этого, есть много других факторов: модель видеокарты, настройки сглаживания, защитные экраны и пленки, расстояние зрителя от экрана, условия окружающего освещения и т. д.
  • Экспорт в Illustrator и Sketch был идентичным, хотя я предпочитаю Sketch. SVG активы из Illustrator и Sketch были неотличимы друг от друга. Для PNG разница была более заметной, особенно в увеличенном масштабе, но вы, вероятно, никогда не будете просматривать иконки в масштабе 3200%. Кажется, что Sketch применяет более плавное сглаживание.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок
  • SVG превзошли PNG. На ноутбуках и планшетах производительность SVG и PNG была сопоставимой. На мобильных устройствах SVG файлы явно были более четкими. В целом, при отсутствии привязки к пикселям, SVG изображения лучше отрисовывались, и были более гибкими для увеличения и уменьшения, поскольку это векторный формат.
  • «Резче» не всегда значит лучше и, вероятно, нужно более точное определение. Есть разные виды резкости. Мы начали с общего понимания этого слова, но в его применении есть нюанс. В моем исследовании иконки иногда выглядели резкими, но при этом имели зубчатые края (Motorola, Thinkpad). Возможно, «четкий» будет более подходящим словом.

Рекомендации

Результаты этого теста привели меня к одной (не новой) важной рекомендациипо возможности используйте SVG-файлы. Это самый гибкий формат, который в целом лучше работает:

  • Дизайнер иконок может спроектировать один размер, который дизайнер интерфейса может масштабировать до различных размеров (насколько это позволяют детали; разные размеры могут требовать разный уровень детализации)
  • Программист может динамически изменять размер иконки в коде и применять другие преобразования, например, цвет заливки, цвет обводки и ширина обводки.
  • Конечный пользователь может увеличить масштаб своего браузера без ущерба для качества иконок.
  • SVG, как правило, выглядят четче, чем PNG, даже, если они не привязаны к пикселям
  • Размер SVG-файлов меньше, чем PNG

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

Еще несколько предложений. Привязка к 1px или 0,5px является предпочтительной как для SVG, так и для PNG файлов. Проектируйте с наименьшим общим размером (создавайте дополнительные нестандартные размеры по мере необходимости) и избегайте масштабирования используемых PNG файлов. Для поддержки старых устройств с более низким разрешением, лучше использовать привязку к 1px. Независимо от того, что вы решите с точки зрения привязки, для достижения согласованности важно разработать набор стилистических правил для ваших иконок. Упростите для себя математические расчеты и не забудьте проверить иконки «вживую» в контексте проекта.

Послесловие: ожидание против реальности

Предпочтительнее использовать привязку к пикселям, но не зацикливайтесь. Если это мешает ясности сообщения или желаемой эстетике, не используйте ее.

Несмотря на строгие спецификации, предъявляемые отраслью, существует серьезная нехватка системности. Вы увидите это, если исследуете цифровые продукты, веб-сайты, библиотеки иконок и исходные файлы вокруг нас. Быстрый аудит иконок на целевых страницах Facebook, Instagram, Google и Twitter показывает, что часть из них привязана к пикселям, но большинство – нет. Более глубокий анализ иконок IBM Carbon показывает, что иногда они нарушают правила:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Привязка к пикселям в дизайне иконок

Когда мы только начинали проектировать для мира цифровых технологий, мы закодировали все в точные пиксели, чтобы получить желаемый вид. Мы были настроены на идеальный пиксель. Но со временем мы поняли, что цифровая среда является гибкой, а наше полотно не точным. Наш код адаптирован для обслуживания множества форм-факторов с использованием относительных единиц, блоков контента на основе процента, гибкой передачи контента. Я бы предложил аналогичный адаптивный подход к иконкам – немного поступиться точностью ради большей гибкости. Многие великолепные наборы иконок, такие как Feather и Remix, делают именно это.

🙏 Спасибо: Toby Fried, Lonny Huff и Monica Chang

Свежие вакансии
                        Geoscan Geoscan Технический дизайнер Офис Санкт-Петербург 60 000 - 80 000 ₽
                        Eiter-mortgage Eiter-mortgage Директор по UXUI дизайну Офис Ереван
                        Intermedia Intermedia Intermedia Офис Санкт-Петербург
                        Perfluence Perfluence Perfluence ищет UX/UI-дизайнера Удаленно Москва От 90 000 ₽
                        Кометрика Кометрика Кометрика ищет Middle UI/UX Полная Москва, Казань, Нижний Новгород от 100 000 ₽
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Я проиллюстрирую признаки качества иконок с помощью 7 принципов и множества реальных примеров

Редизайн более 100 иконок продуктов Microsoft при помощи новых цветов, материалов и отделки

В прошлом году мы выпустили новые иконки Office, чтобы показать клиентам, что мы усовершенствовали наши продукты