Исследование разрешений экранов для проектирования интерфейсов

Чтобы интерфейсы веб - и мобильных приложений оставались удобными и привлекательными на всех устройствах, необходимо ориентироваться на реальные параметры экранов, используемых аудиторией — от компактных смартфонов до мониторов
с разрешением 4K.

Мы проанализировали данные из Statcounter, Яндекс.Метрики, Mail.ru
и других источников, чтобы выделить ключевые размеры экранов и помочь:

• Дизайнерам выбрать правильные размеры макетов
• Заказчикам понимать какие размеры макетов заказывать.

Можно промотать сразу к выводу по ссылке

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

Разрешение экрана - это количество пикселей, из которых состоит изображение на дисплее по горизонтали и вертикали. Например, 1920×1080 означает, что экран формирует картинку из 1920 пикселей в ширину и 1080
в высоту. Чем выше разрешение, тем больше деталей может отобразить устройство.

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

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

DPR – это отношение физических пикселей к логическим (CSS px). DPR влияет на чёткость и масштаб интерфейса. Интерфейс проектируется в логическом разрешении, не в физическом.

Пример DPR:

Вот интересная статья, где больше раскрыто про DPR

Мы объединили данные из нескольких источников
и структурировали их по типам устройств, чтобы упростить анализ
и выбор рабочих разрешений.

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

Ниже представлены самые распространённые разрешения экранов по основным категориям устройств.

Данные показывают, что разрешение 1920×1080 (Full HD) занимает 21%
и остаётся основным стандартом для мониторов 23–27 дюймов
и большинства игровых ноутбуков среднего класса.

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

Экраны с разрешением 1536×864 занимают 8.5% и показывают растущий тренд. Такие разрешения становятся востребованными благодаря росту числа ноутбуков с HiDPI-дисплеями — экранами с повышенной плотностью пикселей, которые обеспечивают более чёткое изображение.

Старые разрешения, включая 1366×768, постепенно сокращают
своё присутствие на рынке и занимают около 6.5%.

Они по-прежнему распространены в офисной среде и остаются стандартом для недорогих корпоративных ноутбуков с диагональю 15.6. При разработке B2B-интерфейсов важно заранее проверять корректность отображения
на этом разрешении.

Профессиональный сегмент представлен разрешением 2560×1440 (2K/QHD) с долей 2.6%.

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

Данные исследования (в таблицах представлены только самые используемые разрешения из всех, для сокращения таблиц):

Разрешение 768×1024 (10.5%) удерживает лидерство благодаря iPad разных поколений — от базовых моделей до серии Air. Apple использует этот стандарт уже более десяти лет, поэтому его нужно обязательно учитывать
при тестировании веб-интерфейсов.

Соотношение сторон 4:3 требует особого внимания
к вертикальной структуре страниц: в портретной ориентации ширина составляет всего 768 пикселей, что может создавать сложности при отображении широких таблиц и сложных форм.

Android-планшеты представлены разнообразными разрешениями,
но наиболее значимое — 1280×800 (7.8%) от Samsung и Huawei.
Несмотря на падающий тренд, эти устройства популярны в корпоративном секторе и образовании из-за оптимального соотношения цены и качества. Соотношение 8:5 более вытянутое, чем у iPad, что даёт больше пространства по горизонтали в портретном режиме.

Форматы 800×1280 и 810×1080 распространены среди недорогих Android-планшетов, корпоративных мобильных устройств и образовательных решений. Эти модели часто используются для рабочих сценариев, где нужна простая навигация и базовые приложения.

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

Данные исследования (в таблицах представлены только самые используемые разрешения из всех, для сокращения таблиц):

Разрешение 360×800 занимает 9% рынка, а 360×780 — 6.5%.
Эти показатели подтверждают, что базовые Android-смартфоны
остаются основой мобильного трафика в России.

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

Рост доли разрешения 393×873 (7.5%) связан с распространением смартфонов среднего класса на Android.

Увеличенная ширина на 33 пикселя даёт немного больше пространства
для контента, но не должна рассматриваться как основание для повышения минимальной ширины макета.

Разрешение 414×896 занимает 5.2% и относится к премиальному сегменту смартфонов. Несмотря на относительно небольшую долю, эта аудитория обычно более активна и чаще совершает покупки онлайн, что важно учитывать в e-commerce.

Анализ данных из разных источников показывает,
что при большом разнообразии устройств большинство пользователей сосредоточено вокруг нескольких основных разрешений.

Важный вывод — доля планшетов остаётся минимальной: около 1%
по Statcounter и примерно 4% по данным Mail.ru. Поэтому отдельная планшетная версия нужна только тем проектам, где эта аудитория действительно значима.

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

Десктоп

1) 1366×768 — основное базовое разрешение для проектирования,
так как макеты, созданные под эту ширину, масштабируются и на более широких экранах.

2) 1920×1080 — дополнительное разрешение для проверки, чтобы убедиться, что интерфейс хорошо раскрывается на больших дисплеях
и использует пространство эффективно.

Смартфон

3) 360×800 — базовое разрешение, которое перекрывает большинство мобильных форматов

Планшет (при необходимости)

4) 768×1024 — используем, если проект ориентирован
на аудиторию, активно работающую с планшетов

Такой подход охватывает более 80% устройств и позволяет эффективнее распределять ресурсы на разработку. В следующем материале
мы рассмотрим параметры макетов: особенности колонок, сеток,
точек адаптации и другие технические детали.