Содержание
Понимание разрешения экрана в контексте адаптивного дизайна
Расчетное время чтения: 10 минут
Пользователям требуется всего 0,05 секунды, чтобы сформировать мнение о вашем веб-сайте, и подавляющее большинство этих первых впечатлений основано на вашем дизайне. .
Принимая во внимание количество устройств и экранов, которые мы сейчас используем ежедневно, очевидно, что внешний вид вашего сайта может варьироваться от одного пользователя к другому.
Одним из ключей к оптимизации для этих различных возможностей является понимание разрешения экрана и роли, которую оно играет в том, как ваш веб-сайт или интернет-магазин будет выглядеть на разных экранах, которые используют ваши клиенты.
В этой статье мы обсудим основы разрешения экрана, адаптивного дизайна и почему понимание этих концепций имеет решающее значение для вашего UX и оптимизации коэффициента конверсии.
Какое разрешение экрана?
Разрешение экрана — это количество пикселей, отображаемых на экране монитора.
Обычно это выражается как (пикселей по горизонтали) x (пикселей по вертикали) .
Например, 1920×1080, наиболее распространенное разрешение экрана рабочего стола, означает, что на экране отображается 1920 пикселей по горизонтали и 1080 пикселей по вертикали.
Экраны с высоким разрешением отображают больше пикселей (и, следовательно, больше элементов на веб-странице), чем экраны с более низким разрешением.
Разрешение экрана не следует путать с размером экрана , который просто относится к физическому размеру экрана (т.е. ширина x длина). Устройства с одинаковым размером экрана могут иметь разное разрешение, точно так же, как разные размеры экрана могут отображать одно и то же разрешение.
Однако размер влияет на оптимальное разрешение экрана для устройства: экрану меньшего размера требуется меньше пикселей (более низкое разрешение) для правильного отображения элементов на экране, в то время как экран большего размера должен отображать более высокое разрешение, чтобы обеспечить четкость изображения.
просмотр изображений и других визуальных элементов.
Настройки дисплея и разрешение экрана
Различные устройства поставляются с различными предустановленными настройками, которые влияют на то, как на них будет отображаться ваш веб-сайт или интернет-магазин.
Например, ноутбук среднего класса обычно имеет разрешение 1920×1080 пикселей — такое же разрешение, как у большинства стандартных настольных мониторов. Однако, поскольку размер экрана ноутбука меньше, при разрешении 1920×1080 элементы на этом дисплее будут меньше, что повлияет на удобство использования и читабельность.
Чтобы обойти эту проблему, большинство дисплеев ноутбуков «увеличены» до рекомендованного значения, которое соответствует размеру экрана, что делает элементы больше, а текст более читаемым.
В приведенном выше примере настроек по умолчанию ноутбук имеет разрешение 1920×1080, но установлен рекомендуемый масштаб 150%, чтобы элементы на экране могли отображаться правильно относительно физического размера экрана (примерно 12,2×7 дюймов).
( Ноутбук в примере выше)
Чтобы узнать реальное разрешение экрана в данном случае, можно воспользоваться формулой:
разрешение экрана / (масштаб/100)
Итак, 1920 пикселей по горизонтали / (150/100)
= 1920 / 1,5 = 1280
И 1080 пикселей по вертикали / (150/100)
= 1080 / 1,5 = 720
В нашем примере ноутбук фактически отображает 1280 пикселей по горизонтали (т.е. по ширине) и 720 пикселей по вертикали (т.е. по всей длине, без прокрутки), в масштабе 150% от исходного 19Разрешение 20×1080 из-за этого параметра конфигурации.
Здесь также важно отметить, что, поскольку исходное разрешение выше, увеличенный дисплей также намного четче по сравнению с экраном с разрешением по умолчанию 1280×720 при 100% из-за плотности пикселей.
Вот тот же ноутбук в масштабе 100% (обратите внимание, что элементы на странице стали меньше).
Адаптивный дизайн сегодня является стандартным подходом к разработке веб-сайтов.
Адаптивная веб-страница в основном означает, что она отвечает устройству, на котором он просматривается, и соответствующим образом регулирует макет, размещение и размер содержимого и элементов, чтобы страница выглядела хорошо независимо от того, на каком экране она просматривается.
О точках останова
Стандартная реализация адаптивного дизайна позволяет веб-странице автоматически масштабироваться и подстраиваться под экран, на котором она просматривается. Это означает, что независимо от того, просматривается ли страница на экране с высоким или низким разрешением, макет и относительное расположение элементов на странице будут более или менее сохранены.
Обычно это относится к ряду экранов с небольшими различиями в размерах, например, к настольному компьютеру и ноутбуку. Однако по мере того, как вы переходите от большого к меньшему (например, от настольного компьютера к смартфону), есть определенные моменты, когда необходимо настроить макет страницы).
Например, макет с двумя столбцами может прекрасно вписаться в большие экраны, но когда вы начнете уменьшать масштаб, ширина столбцов в какой-то момент станет слишком узкой для правильного просмотра содержимого, что делает необходимым преобразование макет всего в один столбец.
(Пример двухколоночного макета)
(Та же страница на меньшем мобильном экране, преобразованная в одну колонку)
5 точки останова», которые обозначают точку, в которой необходимо обновить макет для обеспечения комфортного взаимодействия с пользователем.
Точки останова обычно рассматриваются с точки зрения разрешений настольных компьютеров, планшетов и мобильных устройств.
В этом примере макета для настольного компьютера текст относительно большой, и на странице много места для элементов.
По мере того, как вы начинаете уменьшать масштаб до меньших размеров или более низких разрешений, требуется адаптивный дизайн, чтобы размер шрифта и изображения также уменьшались.
Это делается для того, чтобы сохранить общий вид макета и избежать интерфейса, в котором текст становится слишком большим для своего контейнера, а экран переполнен слишком большими элементами.
Давайте посмотрим на макет рабочего стола выше в разрешении планшета:
Хотя этот образец макета планшета является адаптивным в том смысле, что он правильно уменьшен, чтобы соответствовать меньшему размеру экрана, с ним есть определенные проблемы, которые могут влияют на пользовательский опыт (см. примечания на снимке экрана).
На данный момент требуется обновление макета.
В этом образце расположение элементов было немного изменено с сохранением общей концепции дизайна исходного макета рабочего стола, но обновлено таким образом, чтобы лучше соответствовать устройству и разрешению экрана, на котором он просматривается.
Это стало возможным благодаря добавлению точки останова для разрешений 768×1024 и ниже.
Как вы решаете, какие точки останова добавить?
Наиболее идеальные контрольные точки для вашего дизайна зависят от содержания вашего сайта и других элементов.
Ваш веб-дизайнер и разработчик должны будут проверить, как выглядит ваш сайт при увеличении или уменьшении масштаба до различных разрешений, чтобы определить, когда необходимо изменить макет.
Как упоминалось выше, дизайнеры обычно рассматривают следующие контрольные точки:
Рабочий стол
- 1920×1080 (стандартные настольные мониторы)
- 1440×1280 (обычное разрешение Macbook)
- 1280×720 (маленькие ноутбуки)
Планшет
- 1024×768 (альбомная ориентация)
- 768×1024 (книжная ориентация)
Мобильный
- 375×667 (iPhone 6s и аналогичные размеры)
В некоторых случаях вы даже можете добавить незначительные точки останова, когда нет радикальных изменений в общем макете, но когда ваш дизайнер и/или разработчик внешнего интерфейса должны настроить незначительные вещи, такие как отступы, поля или размер шрифта, для улучшения UI/UX. .
Знайте самые популярные разрешения экрана ваших пользователей
Чтобы улучшить дизайн для ваших реальных пользователей, полезно знать, какие устройства и разрешения экрана они фактически используют для просмотра вашего веб-сайта.
С помощью этой информации вы можете оптимизировать свой дизайн для разрешения экрана, используемого большинством ваших посетителей. Если у вас есть учетная запись Google Analytics, это довольно легко узнать.
(по состоянию на июль 2020 г.)
- На панели управления Analytics выберите «Аудитория» > «Технологии» > «Браузер и ОС»
- Щелкните раскрывающийся список «Вторичное измерение» и найдите «Разрешение экрана», затем щелкните, чтобы добавить его в таблицу.
- Чтобы отсортировать по самым популярным, просто нажмите на столбец «Пользователи».
- Вы можете уточнить данные, выбрав диапазон дат в правом верхнем углу панели мониторинга. Данные за один год могут быть хорошим ориентиром.
.
(данные Sample Analytics для основных разрешений экрана)
Общие сведения о дисплеях Retina
Retina — это термин, придуманный Apple для обозначения разрешения экрана своих устройств.
В двух словах, у дисплея Retina в два раза больше пикселей (по горизонтали и вертикали), поэтому он, по сути, имеет в четыре раза больше пикселей, чем экраны без Retina.
Вдобавок к этому каждый элемент также удваивается в размере, что делает его по-прежнему того же размера, что и на дисплее без сетчатки, но намного более четким и четким. (Думайте об этом как о рабочем столе Windows с увеличенным на 200% дисплеем.)
В контексте адаптивного дизайна для экранов Retina не требуется особого рассмотрения макета, поскольку их дисплеи имеют то же базовое разрешение, что и их аналоги без Retina.
Излишне говорить, что невозможно сделать так, чтобы ваш веб-сайт выглядел на 100 % одинаково при разных разрешениях экрана.
Но смысл адаптивного дизайна не в том, чтобы ваш сайт всегда выглядел одинаково; скорее, он оптимизирован для наилучшего внешнего вида и взаимодействия с пользователем независимо от устройства, разрешения экрана и размера экрана.
Вот несколько важных моментов, на которые следует обратить внимание:
- Видны ли ваши самые важные элементы в верхней части экрана на всех экранах?
Учитывая, что не все пользователи прокручивают веб-страницу до конца, убедитесь, что вся ключевая информация, такая как ценностное предложение и призыв к действию, всегда видна вверху страницы на разных экранах, больших и малых.
- Ваш текст легко читается?
Отрегулируйте размер шрифта и контейнеры для текста в соответствии с оптимизацией для удобочитаемости, всегда. По данным Google, идеальный столбец должен содержать от 70 до 80 символов в строке, поэтому, когда текстовый блок превышает это число, рассмотрите возможность добавления точки останова.
Хотите узнать больше? Свяжитесь с нами сегодня, и наши руководители проектов будут рады помочь вам.
Dell XPS 15 Несколько мониторов
AlleshoppingVideOsBilderMapsNewsbücher
Sucoptionen
[PDF] XPS 15 9510 Руководство по внешнему дисплею-Dell
Dl.Dell.com ›TopicsPDF› xps-15-9510-heslede-hesleder
Вы можете подключить до трех внешних дисплеев с разрешением 4K или один дисплей с разрешением 5K или один дисплей с разрешением 8K или выше, используя порты USB-C, имеющиеся на вашем XPS 15 9510.
Ähnliche Fragen
Можно ли подключить 2 монитора к Dell XPS 15?
Сколько мониторов можно подключить к Dell XPS 15?
Можно ли подключить 2 внешних монитора к моему ноутбуку Dell XPS?
Есть ли в Dell XPS 15 два слота для твердотельных накопителей?
Руководство по подключению внешнего дисплея XPS 15 9510 | Dell US
www.
dell.com › Поддержка › Поддержка продукта
Вы можете подключить до трех внешних дисплеев с разрешением 4K или один дисплей с разрешением 5K или один дисплей с разрешением 8K или выше, используя порты USB-C, имеющиеся на вашем XPS 15 9510.
Необходимо настроить два внешних монитора на XPS15 9560, но я не …
www.dell.com › community › XPS › td-p
Решено: мне нужно настроить два внешних монитора на моем Dell XPS15 9560, но я не знаю, что нужно. Это машина USB 3 без VGA или DVI.
Решено: XPS 15 9560 на два внешних монитора — Dell Community
www.dell.com › community › XPS › td-p
02.09.2018 · У меня есть ноутбук XPS 15 9560 с Thunderbolt, HDMI и USB порты. Я хочу подключить его к двум внешним мониторам, которые у меня есть: DELL P2715Q.
Dell XPS 15 9550 — Вопросы по настройке нескольких мониторов
www.dell.com › сообщество › XPS › td-p
05.12.2020 · На самом деле он вообще не задает никаких вопросов.
Но если некоторая общая информация поможет, XPS 15 может одновременно работать с тремя независимыми дисплеями, …
Решено: Настройка трех мониторов Dell XPS 15 9500 — Dell Community
www.dell.com › community › XPS › td-p
@ Someshwar21 XPS 15 9500 поддерживает всего три активных дисплея, независимо от того, как они подключены. Если вам нужны три внешних дисплея, вам понадобится …
XPS 15 9520 Руководство по подключению внешнего дисплея | Dell US
www.dell.com › Поддержка › Поддержка продукта
Вы можете подключить до трех внешних дисплеев напрямую к портам Type-C на вашем компьютере или вы можете подключить дисплеи к компьютеру с помощью док-станции …
Лучшая установка Dell XPS 2020! — YouTube
www.youtube.com › смотреть
27.05.2020 · Новая идеальная конфигурация стола для моего dell XPS 15! Мне очень нравится этот стол с двумя мониторами …
Добавлено: 5:02
Прислано: 27.