Лого vc.ru

Что такое плотность пикселей и как её учитывать при проектировании мобильных интерфейсов

Что такое плотность пикселей и как её учитывать при проектировании мобильных интерфейсов

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

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.

Поделиться
В видео затронуто большинство тем статьи, но если вы заинтересованы в подробностях, — продолжайте читать

Плотность пикселей — это количество пикселей, вмещающееся в определенном физическом размере (обычно, в дюйме). На первом компьютере Mac было 72 пикселя на дюйм, — число кажется большим, но на самом деле это были огромные пиксели, под которые подходила не каждая графика.

Иконки на компьютере Macintosh 1984 года. Дизайнер Сьюзан Каре

С тех времен технологии экранов заметно продвинулись вперед, — сейчас даже самые простые дисплеи имеют разрешение между 115 и 160 пикселей на дюйм (PPI— pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с Retina-дисплеем — суперчетким экраном, удвоившим количество пикселей на дюйм. В результате графика стала четче, чем когда-либо.

Разница особенно хорошо заметна в иконке приложения почты и в тексте

Чтобы поддерживать те же физические размеры элементов пользовательского интерфейса, пришлось увеличить количество пикселей на дюйм. Кнопка, которая раньше занимала 44px, стала занимать 88px.

Для совместимости между разными устройствами дизайнеры должны выпускать графику для обычных дисплеев и для Retina-дисплеев. Но тут возникла еще одна проблема: теперь дизайнер не может сказать, что какой-то элемент должен быть, например, 44 пикселя в высоту, потому что на другом устройстве этот же элемент должен быть в два раза выше.

Решением стали пункты (points), или pt. Один пункт соответствует одному пикселю на экранах до поколения Retina и двум пикселям на экранах с Retina. Теперь, если дизайнеру говорят, что высота какого-либо элемента — 44 пикселя, он может адаптировать этот размер под любой коэффициент плотности пикселей — 1х, 2х или 3х в случае с iPhone 6 Plus.

PT и DP

Конечно, это все актуально не только для устройств Apple. Каждая операционная система — десктопная или мобильная — поддерживает экраны с высоким ppi/dpi. В Google придумали свою независимую от пикселей единицу измерения для Android, которая называется DIP — пиксель, не зависящий от плотности, сокращенно «dp». Это не эквивалент пунктам в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x и так далее).

Возможно, вас интересует физический размер пункта. На самом деле, дизайнеры интерфейсов не должны об этом думать, так как у них нет контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов в 1x, 2x, 3x и так далее.

В устройствах Apple нет единой плотности пикселей, которая представляет один пункт — это зависит от конкретного устройства (см. «Восприятие масштаба» ниже). В iOS пункт варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.

Контролируемый хаос

На ранних порах развития мобильных устройств с высоким разрешением плотность пикселей была просто 1х или 2х. Но сейчас все иначе — есть масса пиксельных плотностей, которые должен поддерживать интерфейс. В Android есть отличный пример: на момент написания этого поста разные производители поддерживают шесть разных плотностей пикселей. Это означает, что иконка, которая имеет одинаковый размер на всех экранах, на самом деле должна быть выполнена в шести разных вариациях. Для Apple актуально два или три разных исходника.

Дизайн в векторе

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

Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.

Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 — это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.

Притворяйся, пока это не станет правдой

Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.

Создавайте дизайн под iPhone Plus так, как если бы он был 3x. Телефон сам отмасштабирует его в 87%

Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно — линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.

Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не слишком качественно.

Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.

Восприятие масштаба

Должна ли кнопка быть одинакового размера на разных устройствах? Ответ зависит от
  • точности метода ввода (сенсор или курсор);
  • физических размеров экрана;
  • расстояния до экрана.
Последние два фактора идут рука об руку, потому что у планшетов большие экраны по сравнению со смартфонами, и мы держим его дальше от себя. Еще есть ноутбуки, настольные компьютеры, телевизоры — расстояние между глазами и экраном увеличивается вместе с размером последнего.

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

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

Низкая плотность пикселей

Крупные экраны, на которые мы смотрим на расстоянии, обычно располагают меньшей пиксельной плотностью. У телевизора может быть 40 пикселей на дюйм — и, как правило, этого хватает. Плотность пикселей Retina-дисплеев на iPad составляет около 264 ppi; на iPhone — 326 ppi. Так как пиксели на iPad больше (а плотность меньше), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.

Разные размеры

Иногда низкой плотности пикселей недостаточно — отдельные элементы дизайна должны быть еще больше. Это случилось с иконками на iPad. На iPhone их размер 60×60 пикселей, но экран на iPad больше, так что практичнее иконки размером 76×76 пикселей.

Изменение размера элементов интерфейса под разные устройства — дополнительная работа дизайнера.

Материалы по теме

Мы только что обсудили массу сложностей, с которыми сталкиваются дизайнеры. К счастью, в разработке интерфейсов используются единицы, которые не зависят от плотности (как pt или dp).

Список ресурсов по данной теме:

  • Google Device Metrics — список спецификаций для устройств всех типов (Android, iOS, macOS, Windows). Размеры экранов, плотность пикселей и даже примерное расстояние, на котором экран расположен от глаз пользователя.
  • Шаблоны иконок приложений Bjango. Эти шаблоны (доступные всем главным дизайн-редакторам) полезны как в практическом смысле, так и для справок по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone.
  • Руководство по DPI и PPI. Подробное руководство дизайнера Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.

Есть еще некоторые ресурсы по пиксельной плотности для дизайнеров.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Статьи по теме
DPI, пиксели, Retina: Как устроены экраны устройств05 апреля 2016, 11:13
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Почему бы не делать весь дизайн изначально в векторной графике?

А потому что в Photoshop вектор рисовать неудобно.

А то, что Photoshop не лучший инструмент для создания дизайна, нашим дизайнерам не объяснить

Какой инструмент лучший по вашему?

0

Вообще все и делается в векторе, просто под разные устройства экспортируется под определенными параметрами.

0

У нас в студии с недавних времен обязательное требование — то что можно отрисовать в векторе, должно быть отрисовано в векторе!

Есть и другой вопрос: почему не сделано так, чтобы мобильные ОС использовали в качестве графических элементов приложений векторные рисунки? Да хоть тот же SVG. А то получается в одно iOS приложение надо запихнуть 3 варианта картинок для ВСЕХ элементов дизайна и в итоге получаются какие-нибудь простые приложения в 60 Мб весом.

Все равно, svg пооом переводиться в растр. Если весь интерфейс будет из него состоять. Наверняка можно предположить что просто устройство не выдержит поддерживаться столько данных так как. SVG свод формул и параметров которые надо рендерить. Лучше не к технологиям придираться, к унифицировать дисплеи для всех устройств и наконец-то нормально их классифицировать.

0

Эта проблема на самом деле решается легко и просто: на этапе установки из стора svg графика конвертится в png под нужный dpi данного устройства. Все. Вместо того, чтобы хранить кучу ненужного хлама в памяти.

Пытались как-то использовать SVG'шки в браузерном приложении для улучшения графики. Графика оказалась хуже, т.к. браузеры экономят на рендеринге и скорость упала просто катастрофически.

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

Что касается вашего предложения рендерить в момент установки. На мой взгляд так не получится. Во-первых это скорость установки резко подрежет. Во-вторых, у рендеринга есть разные технологии и разные подстроечные параметры, связанные в первую очередь со сглаживанием. И под присмотром специалиста всегда отрендерится лучше, чем сделает автоматика.

Так что остаётся старый проверенный способ: зашивать в приложение (или докачивать после установки) графические паки под разные разрешения экрана.

0

На самом деле Android это уже умеет. Конкретно - SVG в XML. И вместо ассетов для кучи dpi получится один файл на одну, скажем, иконку и впоследствии значительно уменьшенный размер .apk.

Подробнее об этом опыте можно почитать, например, здесь -
www.dadapixel.com/blog/2015/2/24/shrinking-today-calendar-with-vector-assets-designing-for-purpose

0

Во. А чел выше говорит, что это не тру

0

Все всё и рисуют в векторе. Но мобильные операционные системы вектор "не едят". И результат экспортируется всё-равно в .png. android поддерживает svg, но всё-равно сам конвертит в пнг конечные иконки и графику. Кроме того, вектор — не панацея. Пиксель-пёрфект-эффекта всё-равно не всегда удается добиться, масштабируя векторное изображение. Это у вас в редакторе оно будет выглядеть идеально. А пикселещированное экспортированное изображени может быть с размытыми краями. Особенно, если масштабирование не на 2x/3x, а на 2,5, к примеру.

простой способ делать дизайн в 1x (=mdpi). Для iOS достаточно экспортировать в PDF, уже год так у себя делаем и не знаем бед. А вот с андроидом хуже дела обстоят: pdf не воспринимает, а svg коряво воспроизводит, некоторые теги экспорта не совпадают с тегами восприятия андроида, ждём пока починят, год ждём

0

Т.е. iOS всё-таки работает напрямую с вектором? Или потом из пдф экспортите в растр?

0

Работает только с последними версиями ios, и в конечном счёте всё-равно переводит в растр

0

Лучше бы статью о приватности в сети написали и о мессенджерах которые не читаются, а то соц сети все читают вдоль и поперек я общаясь с друзьями на важные темы использую приватный мессенджер, друзья посоветовали Eleet

Согласна а то взламывать уже соцсети надоели!

0

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

В наше время, если вы не делаете приложение под одно конкретное устройство, вы неизбежно сталкиваетесь с таким зоопарком устройств, что рассчитывать на какие-то строгие 1х, 2х или 1.5х - наивно. Всё что только можно должно быть в векторе, с той детализацией, которая соответствует наиболее вероятному физическому размеру. Весь растр по возможности должен быть избыточного размера - в три-четыре раза больше, либо не должен предполагать четкости и качества (ну например если это размытая фотка на фоне).

Вот и всё, что нужно знать о плотности пикселей.

Не слушайте этого человека! Никогда не думайте о физическом размере устройства!

0

>> нужно думать о физических размерах предполагаемого устройства
Вы видели сколько устройств на андройде? Там такое количество разны размеров, что думать о каждом как раз-таки нельзя.

0

>> нужно думать о физических размерах предполагаемого устройства

Вы видели сколько устройств на андройде? Там такое количество разны размеров, что думать о каждом как раз-таки нельзя.

0

не туда, это выше

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Михаил Фомин

делаешь крупный масштаб. В одном слое скрины, во втором нужные тебе соединяющие линии. Всё.

«Студия Артемия Лебедева» представила редизайн приложения такси-сервиса «Ситимобил»
0
Роман Романович
SmartXML

Ну что вы напали на мужика. Просто Майк Батчер каждый день сталкивается с инновациями стартапами и всевозможными новинками в сфере технологий, общается только с такими же гиками. Он весь мир видит через призму новых высоких технологий, несколькно оторванных от реальности.

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

«Боты станут умнее, а вы потеряете свою работу»
0
Евгений Разманов

Наверное, всё от отделения зависит. Ровно неделю назад продлял зарплатную карту: пришёл, увидел, победил. На всё-провсё - 10 минут.

Единственное - до этого ни позвонили, ни СМСку не отправили, а месяц уже заканчивался. Позвонил в итоге сам оператору, чтобы узнать, точно ли карта на месте.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Юрий Катков

а страхование вкладов не работает в этом случае?

Путин разрешил налоговикам требовать долги компаний с их владельцев и учредителей
0
Газиз Исмаил

Такими темпами боюсь скоро не только инвесторам, но и всем людям придется думать о "пороге входа".

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

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

«Боты станут умнее, а вы потеряете свою работу»
0
Показать еще