Размер экрана в пикселях: Таблица разрешений экранов популярных смартфонов

Таблица разрешений экранов популярных смартфонов

Apple iPhone 4/4S	3	640×960
Apple iPhone 5	4	640×1136
Apple iPhone 5C/5S	4	640×1136
Apple iPhone 6	4.7	1334×750
Apple iPhone 6 Plus	5.5	1920×1080
Apple iPhone 6S	4.7	1334×750
Apple iPhone 6S Plus	5.5	1920×1080
Apple iPhone 7	4.7	1334×750
Apple iPhone 7 Plus	5.5	1920×1080
Apple iPhone SE	4	1136×640
ASUS Zenfone 2 Lazer ZE500KL	5	1280×720
BlackBerry Bold 9900	2.8	640×480
BlackBerry Z10	4.2	768×1280
Fly IQ451 Vista	5	720×1280
HTC Desire 600	4.5	540×960
HTC Desire C	3. 5	320×480
HTC Desire SV	4.3	480×800
HTC Desire V	4	480×800
HTC Desire X	4	480×800
HTC One	4.7	1080×1920
HTC One 32Gb	4.7	1080×1920
HTC One S	4.3	540×960
HTC One SV	4.3	480×800
HTC One X	4.7	720×1280
HTC One X+	4.7	720×1280
HTC Windows Phone 8s	4	480×800
HTC Windows Phone 8x	4.3	720×1280
Huawei Ascend G630	5	720×1280
Huawei Honor 5X	5.5	1920×1080
Huawei Honor 6	5	1080×1920
Huawei Honor 7	5.2	1920×1080
Jiayu G6 Advanced	5.7	1080×1920
Lenovo IdeaPhone P770	4. 5	540×960
Lenovo IdeaPhone S720	4.5	540×960
Lenovo K900	5.5	1080×1920
Lenovo P70	5	1280×720
Lenovo S60	5	1280×720
Lenovo Vibe Shot	5	1920×1080
LG G2 D802	5.2	1080×1920
LG Nexus 4 16Gb	4.7	768×1280
LG Nexus 5	4.95	1080×1920
LG Optimus 4X HD	4.7	720×1280
LG Optimus G	4.7	768×1280
LG Optimus G Pro E988	5.5	1080×1920
LG Optimus L5	4	320×480
LG Optimus L5 II Dual E455	4	480×800
LG Optimus L7 II Dual P715	4.3	480×800
LG Optimus L7 P705	4.3	480×800
LG Optimus L9	4.7	540×960
Meizu M2 Note 16Gb	5. 5	1920×1080
Nokia 808 PureView	4	360×640
Nokia Asha 311	3	240×400
Nokia Lumia 520	4	480×800
Nokia Lumia 620	3.8	480×800
Nokia Lumia 720	4.3	480×800
Nokia Lumia 800	3.7	480×800
Nokia Lumia 820	4.3	480×800
Nokia Lumia 920	4.5	768×1280
Nokia Lumia 925	4.5	768×1280
Nokia X Dual Sim	4	480×800
Philips Xenium W732	4.3	480×800
Philips Xenium W832	4.5	540×960
Samsung Ativ S 16Gb GT-I8750	4.8	720×1280
Samsung Galaxy A5	5	1280×720
Samsung Galaxy A5 2016	5.2	1920×1080
Samsung Galaxy Ace Duos GT-S6802	3. 5	320×480
Samsung Galaxy Ace GT-S5830	3.5	320×480
Samsung Galaxy Ace II GT-I8160	3.8	480×800
Samsung Galaxy Grand GT-I9082	5	480×800
Samsung Galaxy Mega 5.8 GT-I9152	5.8	540×960
Samsung Galaxy Mega 6.3 8Gb GT-I9200	6.3	720×1280
Samsung Galaxy Nexus GT-I9250	4.65	720×1280
Samsung Galaxy Note GT-N7000	5.3	800×1280
Samsung Galaxy Note II GT-N7100	5.55	720×1280
Samsung Galaxy S Duos GT-S7562	4	480×800
Samsung Galaxy S II GT-I9100	4.27	480×800
Samsung Galaxy S II Plus GT-I9105	4.3	480×800
Samsung Galaxy S III GT-I9300 16Gb	4.8	720×1280
Samsung Galaxy S III mini GT-I8190	4	480×800
Samsung Galaxy S4 GT-I9500	5	1080×1920
Samsung Galaxy S4 GT-I9505	5	1080×1920
Samsung Galaxy S4 mini GT-I9190	4	540×960
Samsung Galaxy S4 mini GT-I9195	4. 27	540×960
Samsung Galaxy S4 Zoom SM-C101	4.3	540×960
Samsung Galaxy S5	5.1	1080×1920
Samsung Galaxy S6 SM-G920F	5.1	2560×1440
Samsung Galaxy Win GT-I8552	4.7	480×800
Samsung Galaxy Y Duos GT-S6102	3.14	240×320
Samsung Galaxy Y GT-S5360	3	240×320
Sony Xperia acro S	4.3	720×1280
Sony Xperia E dual	3.5	320×480
Sony Xperia go	3.5	320×480
Sony Xperia ion	4.55	720×1280
Sony Xperia J	4	480×854
Sony Xperia L	4.3	480×854
Sony Xperia miro	3.5	320×480
Sony Xperia P	4	540×960
Sony Xperia S	4.3	720×1280
Sony Xperia sola	3. 7	480×854
Sony Xperia SP	4.6	720×1280
Sony Xperia tipo	3.2	320×480
Sony Xperia TX	4.55	720×1280
Sony Xperia V	4.3	720×1280
Sony Xperia Z	5	1080×1920
Sony Xperia Z1	5	1080×1920
Sony Xperia Z1 Compact	4.3	720×1280
Sony Xperia Z2	5.2	1080×1920
Sony Xperia ZL	5	1080×1920
Sony Xperia ZR LTE (C5503)	4.55	720×1280
YotaPhone — цвет.	4	720×1280
YotaPhone — чб	4	360×640

О размере экрана, пикселя и элемента / Хабр

Привет, username. Свой первый пост я хочу посвятить актуальной проблеме, связанной с появлением большого количества новых форматов дисплеев и непрекращающейся гонкой за плотностью пикселей. В свете появления таких устройств, как очки дополненной реальности, смартчасов, 4к-мониторов и еще более широкого спектра планшетов и ноутбуков, возникает вопрос: какой размер графического элемента/текста следует считать оптимальным и в чем его измерять. Android-разработчики, несомненно, тут же воскликнут: «Да, конечно, в dp!». Но практика показывает, что дела обстоят несколько сложнее.

Проблема

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

1. Размер
2. Цвет и тон
3. Границы (особый метод, связанный со свойством зрительного центра оформлять отдельные объекты по касанию светотеневой плоскости и фона)
4. Фактурная и графическая насыщенность

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

Синопсис

Подобие стандарта на ppi (pixels per inch) появилось в середине 1980-х, когда Apple выпустила свои первые компьютеры серии Macintosh. У этих компьютеров была 9-дюймовая диагональ экрана с 72 пикселями на каждый квадратный дюйм. Уже тогда Apple заняла позицию создания собственной экосистемы, поэтому в диапазоне технологических возможностей того времени было выбрано ppi ровно в два раза меньше dpi (dots per inch) эппловского принтера ImageWriter, что давало гарантию, что размер элементов на экране будет точно соответствовать размеру на бумаге.

Тем временем разрешение и диагональ мониторов начали расти как на дрожжах. Если Mac 128k имел разрешение 512×342 пикселя, то к 1996 году эта же компания выпустила Apple Multiple Scan 15 Display с диагональю 13.3 дюйма и потрясающим для тех времен разрешением 1024х768px. Это значение, вне зависимости от диагонали, оставалось самым популярным разрешением экранов еще 12 лет.

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

В 2008 году я купил ноутбук Lenovo Y710-200, имевший диагональ 17 дюймов и разрешение 1920х1200px. К сожалению, на тот момент ни у меня, ни, видимо, у Lenovo не было представления о том, какое это было сильное преимущество для ноутбука: 132ppi! Даже у профессиональных мониторов ppi было ниже, а выше можно было наблюдать уже в совсем специфической технике, вроде медицинских мониторов или мониторов космических устройств, хотя именно в этом году Kopin Corporation представила продукт пика технологических исследований — устройство с 2272ppi. Для меня лично дело кончилось тем, что я приучился смотреть видео только HD качества (1920х1080), поскольку на этом экране видео 720p или 480p было очень маленьким. Эта же ситуация подтолкнула меня, как начинающего дизайнера, к самостоятельному осознанию независимости размера элемента от устройства.

В 2010 году Стив Джобс представил дисплей повышенной четкости, названный Retina (“сетчатка”, англ.). При этом в своей презентации он заявил, что ppi ретины превышает таковой у человеческого глаза и, следовательно, считается идеальным.

Эта картинка (открывать на устройстве с Retina) позволит понять, насколько утверждение Джобса соответствует истине. Человек с нормальным зрением без труда найдет на этом изображении как белые и черные полосы шириной в один пиксель, так и цикл (черная и белая полоса рядом) шириной в 2 пикселя по центру.
Следует также понимать, что, ввиду ограниченного углового разрешения глаза, ppi для экранов разного размера и находящихся от пользователя на разном расстоянии будет отличаться.

Ситуация

На нынешний день мы имеем целый ряд проблем, связанных с историей пикселя. Совершенно очевидно, что размеры, задаваемые в пикселях, потеряли всякий смысл — только на википедии количество различных значений ppi для мониторов превышает две сотни, а это значит, что размер элемента всегда будет разный. Компания Google

в своем девелоперском центре несколько единиц измерений, что по идее должно являться решением:

• px — Pixels (пиксели), соответствующие реальным физическим пикселям экрана
• in и mm — Inches и millimiters (дюймы и миллиметры), физические единицы измерения
• pt — Points (пойнты), 1/72 физического дюйма экрана
• dp — Density-independent Pixels (пиксели, независимые от плотности), абстрактная единица, основанная на плотности физических пикселей и соответствующая 160 dpi экрану (на котором 1dp приблизительно равен 1px)
• sp — Scale-independent Pixels (пиксели, независимые от масштаба), аналог em в web-верстке

Кстати, Microsoft по умолчанию считает, что dp = 1/96 логического дюйма, dpi которого можно настроить в панели управления. Хочется заметить, что, используя физические значения, лучшей практикой было бы использование миллиметров, как производную от основной единицы СИ.

Наиболее близкой к титулу «универсальной» была бы единица sp/em, если бы мы каким-то образом знали базовое оптимальное значение размера кегля. Собственно интуитивное представление дизайнера об оптимуме породило следующий хак в веб-верстке:

• Тэгу html присваивается font-size: Nxx, N = значение, а xx = пиксели/миллиметры/дюймы (для планшетов я обычно использую 3mm).
• Во всех дальнейших размерах элементов используется так называемый rem (root em), всегда равный значению, указанному в font-size тэга html (но не его детей).
• В тэге body указывается font-size непосредственно текста.

html {
    font-size: 22px;
}

body {
    font-size: 14px;
    line-height: 1rem;
}

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

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

Бионика

Зрительный аппарат появился в результате эволюции простейших фоторецепторов, возбуждающихся от яркого света. При этом природа создала аж четыре варианта: глаза моллюсков, формирующиеся из эпителия, обладающие способностью видеть широкий спектр световых волн, глаза млекопитающих, формирующиеся из нервной ткани и изначально предназначенные для нахождения форм и движения объектов, камерные глаза кубомедуз и фасеточные глаза насекомых. Как признак, зрение оказалось весьма полезным инструментом выживания, и поэтому его эволюция у человека (вместе с самим человеком) длилась всего

лет.

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

В среднем по вертикали поле зрения человека составляет около 135 градусов, а по горизонтали — 155. При этом бинокулярные и хроматические возможности глаза неоднородны по его площади.

Источник

Для того, чтобы определить остроту зрения (аналог разрешения камеры), используются таблицы Снеллена — ряды букв разного кегля, где размер и ширина знака подбраны так, чтобы стянуть угол в 1 минуту дуги на определенном расстоянии. При этом нормой считается зрение, при котором человек различает буквы в шестой строке с расстояния 6 метров, что равняется 5 минутам дуги. В научных исследованиях принято применять кольца Ландольта, так как это позволяет более объективно оценивать данные, без погрешности на узнаваемость типографических знаков и шрифт. В России кольца Ландольта адаптированы С. Головиным, а таблица Снеллена учеником Головина Д. Сивцевым.

Психооптик Гарольд Блэквел выразил понятие о разрешении глаза как углового параметра функции светлости и контраста. Его исследования показали, что этот угол равен приблизительно 0.7 минут дуги для определения пятна неточечного объекта (чтобы сказать, что пятно не является точкой, наблюдателю необходимо минимум 2 пикселя), что результирует минимальную разрешающую способность в 0.35 минут дуги.

Современные исследования ясности зрения оперируют понятием цикл на градус (под циклом понимается черно-белая пара линий) и предлагают значение 77 циклов на градус, что приблизительно равно 78 циклам на градус дуги. Опять же, ввиду минимальной ширины цикла в 2 пикселя, мы видим схожие 0.39 минут дуги.

Учитывая угловое пространство глаза, путем простого вычисления 100 * 100 * 60 * 60 / (0.3 * 0.3) = 400 мегапикселей мы получаем значение, весьма близкое к общему количеству фоторецепторов в сетчатке.

Следует понимать, что в то время, как область ясного видения дает довольно четкое представление о минимально допустимом размере объектов и их разрешении, механика восприятия в периферической области несколько отличается, так как оно в большей степени отвечает за бессознательное сканирование и приоритезацию. Особенность человеческого глаза иметь максимальное разрешение и когнитивный фокус в области фовеа (так называемое желтое пятно), например, позволяет таким сервисам как Spritz увеличить скорость восприятия текста (помимо сокращения «лага» за счет отсутствия движений глаз), умещая слово в область ясного видения.

Помимо этого, приведенная схема дает нам четкое представление о рекомендуемых размерах элементов. Ясно, что для комфортного ориентирования по интерфейсу интерактивный элемент, на котором в текущем сценарии сфокусировано внимание, не должен превышать область макулы (7°х5.5°), а блок/группа/список, в котором он находится, — область ясного видения (16-20°x12-15°). Именно этот факт косвенно поддерживает предлагаемую в Google гипотезу, что маленький экран не значит меньше информации, так как область когнитивного анализа в принципе довольно мала.

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

Оптимум

выявили наиболее объективные рекоммендации:

• Ключевые элементы должны занимать не меньше 20 минут дуги
• Рекомендуемый размер 20-22 минуты дуги
• Следует избегать символьных элементов размером меньше 16 минут дуги,
• Разрешение хорошего человеческого зрения = 0. 4 минут дуги
• Среднее разрешение (с учетом всех возрастов) = ~1 минута дуги

Формула для расчета размера элемента в зависимости от расстояния:

h = 2 *d * Tan(x/2)

где

h = искомая высота элемента

d = расстояние в миллиметрах

x = размер элемента выраженный в радианах (

)

Примеры округленных расчетов рекомендуемого размера шрифта (21 минута дуги) в миллиметрах

Следует отдельно заметить, что устройства вроде Oculus Rift, находящиеся в непосредственной близости от глаза, следуя этой формуле, в идеале должны обладать огромным ppi со значением больше 2000.

Выводы

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

• Производителям мониторов необходимо всегда через драйвера сообщать ОС свой физический размер для приблизительного определения расстояния от экрана.
• ОС должна не просто масштабировать элементы в процентах, но и уметь рассчитывать размер dp исходя из данных от монитора, чтобы элементы занимали необходимое место в угловом пространстве, видимом глазом
• Для дополнительной калибровки можно использовать данные с камеры, чтобы оценить среднее расстояние от глаз до монитора.
• Очевидно, что наиболее универсальной единицей явились бы сами am — arc minutes (градусы дуги). Помимо всего прочего 1am неплохо описывает толщину оптимальной для глаза линии в соответствующей классическому 1px линии на среднестатистическом мониторе.

На данный момент времени единственный способ решить эту проблему существующими методами — это узнавать параметры устройства через user-agent и подгонять под него переменную rem модульной сетки. Однако такое решение, вероятно, подходит только для больших компаний, которые могут позволить себе анализ и тестирование верстки на десятках видов устройств.

PS В некоторых абзацах, описывающих точные данные, источники были переведены без изменений.

Разрешение экрана — что это такое и какое лучше | Телевизоры 4K | Блог

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

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

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

Разрешение экрана напрямую влияет на качество изображения. Однако этот параметр не соотносится с физическими размерами экрана.  Например, есть два монитора разрешением 1920х1080, но один из них имеет диагональ 24 дюйма, а второй — 27. Несмотря на одинаковое разрешение, детализация будет разной.

Все дело в еще одном важном параметре — плотность пикселей на дюйм (PPI – pixel per inch). Чем выше этот параметр, тем выше будет детализация картинки.

Однако PPI существенно различается для разных классов устройств. На плотность влияет точность метода ввода (сенсор или курсор), физические размеры экрана и расстояние пользователя от дисплея. Если телефон мы используем на расстоянии 10–20 сантиметров от глаз, то для телевизора это несколько метров. В связи с этим, и плотность пикселей будет существенно отличаться.

Делать выводы о качестве картинки по PPI для разных классов устройств будет не совсем корректно. В сети также можно встретить утверждение, что человеческий глаз не способен распознать плотность пикселей выше 300 ppi. Различия между 500 ppi и 300 ppi на самом деле заметить смогут только люди с высокой остротой зрения, да и отличия будут настолько несущественные, что в повсеместном использовании разница просто незаметна. 2) = 2203. Далее делим полученное разрешение на диагональ: PPI =  2203/23,8 = 93. 

Представленные характеристики соответствуют монитору Acer KA242Ybi, и, если вы изучите его параметры, то обнаружите, что PPI действительно составляет 93 пикселя на дюйм.  

Откуда взялись 2К, 4К, 8К

Существуют больше 30 разнообразных форматов разрешений, начиная от QVGA 240х320 px и заканчивая ошеломляющим 10K с разрешением 10240×5760 px. Самые распространенные разрешения экрана вы можете изучить ниже.

Внимательные читатели заметили, что в таблице есть пара разных строк с обозначениями 2К. Аналогичная ситуация и с разрешением 4К. На самом деле под формат 4К существуют сразу несколько разных разрешений:

По горизонтали практически все они приближены к четырем тысячам пикселей, а вот разрешение по вертикали напрямую зависит от соотношения сторон. Истинным 4К в данном случае называют DCI 4К, используемый в кинематографе. Однако соотношение сторон такого формата не подходило для мониторов и телевизоров. Именно поэтому Ассоциация потребительской электроники (CEA) в 2012 году утвердила единый 4К формат для цифровой электроники, который и получил название Ultra HD 4K.

Это означает, если на коробке монитора или телевизора указано 4К, то согласно принятой спецификации он будет иметь разрешение именно 3840х2160.

Аналогичная ситуация и с 2К — истинным считается DCI 2K 2048×1080, однако среди мониторов и телевизоров под 2К понимают форматы UWHD (2560×1080) или QHD (2560×1440).

По аналогии с уже установившимися 2К и 4К, формату 8К соответствует разрешение 7680×4320 пикселей.

Соотношение сторон экрана

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

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

Самые популярные соотношения сторон, под которые адаптирована большая часть мультимедийного контента — 16:10 и 16:9.

Про разрешения экрана смартфонов

С мобильной электроникой все намного сложнее, поскольку разнообразия форм-факторов куда больше. Если рассмотреть линейку смартфонов от Apple, то здесь ситуация следующая:

_

Разрешения FullHD 1920х1080 разработчикам удалось добиться при диагонали 5,5 дюйма, а максимальное 2688х1242 доступно на смартфонах диагональю 6,5 дюйма. Условно его можно назвать приближенным к 2К.

Для Android-гаджетов все еще сложнее, поскольку рынок представляют сотни разнообразных моделей. Условно можно выделить общую классификацию из пяти категорий:

Выпускаются и смартфоны с 4К дисплеем. Например, Xperia XZ2 Premium оснащен IPS-дисплеем с диагональю 5,8 дюйма и разрешением 3840×2160. Фактически, это «классический телевизионный» стандарт Ultra HD 4K, а плотность пикселей доходит до впечатляющих 765 ppi. Если вы ожидаете беспрецедентной четкости, то вас может ждать разочарование. Проблема в том, что увидеть разницу между FHD+ и 4К практически невозможно, особенно, в рамках дисплеев на 5-6 дюймов.

При подборе монитора для гейминга  согласовывайте разрешение с железом. Не стоит гнаться за 2К и 4К мониторами, если у вас слабая видеокарта и процессор. Телевизоры для просмотра кино лучше брать с разрешением от 2К и соотношением сторон 16:9 или 16:10, чтобы в полной мере наслаждаться детализированной картинкой.

При покупке смартфона определяющим является плотность пикселей на дюйм, поскольку дисплей всегда находится перед глазами и «зернистость» увидеть проще всего. Ищите смартфоны с 300-450 ppi. Большую плотность ваш глаз уже не различит.

Размеры экрана Android в пикселях для ldpi, mdpi, hpdi? Oh! Android

Я прочитал 10 статей, но все еще не могу найти никакого отношения между ldpi, mdpi, hdpi и фактическими размерами в пикселях !? Может ли кто-нибудь дать простой ответ, пожалуйста (если он есть!)

Я в основном пытаюсь собрать заставку, которая должна работать на нескольких устройствах без растягивания – но я борюсь, поскольку все, что я пытаюсь, либо раздавлено, либо растянуто !?

Ldpi, mdpi и hdpi относятся к плотности экрана, что означает, сколько пикселей может вписаться в один дюйм.

Соотношение между пикселями между ними:

• Ldpi = 1: 0,75
• Mdpi = 1: 1
• Hdpi = 1: 1,5
• Xhdpi = 1: 2
• Xxhdpi = 1: 3
• Xxxhdpi = 1: 4

Поэтому давайте возьмем изображение размером около 100X100:

• Для mdpi он должен быть 100X100
• Для ldpi это должно быть 75X75
• Для hdpi должно быть 150X150
• Для xhdpi должно быть 200X200
• Для xxhdpi должно быть 300X300
• Для xxxhdpi должно быть 400X400

Таким образом, для экранов с одинаковым размером, но с разными DPI, все изображения кажутся одинаковыми по размеру на экране.

Также у вас есть несколько типов размеров экрана: маленький, обычный, большой, большой, и каждый из них может быть ldpi, mdpi, hdpi, xhdpi, xxhdpi (Nexus 10) или xxxhdpi.

Вы можете попытаться создать изображение заставки, которое соответствует каждому типу экрана, который дает вам 4 * 5 = 20 разных изображений (мне кажется, это очень важно).

Пока только Nexus 10 находится в категории xxhdpi.

Установите ImageMagick и используйте этот сценарий оболочки для генерации ваших файлов всплесков и значков для нескольких устройств – iOS, Android, Bada и Windows Phone. Вы можете использовать cygwin / gitbash, если находитесь в Windows

Я только что сделал, и я очень доволен этим 🙂

Размеры экрана находятся внутри скрипта и являются –

480x800 - screen-hdpi-portrait.png 320x200 - screen-ldpi-landscape.png 720x1280 - screen-xhdpi-portrait.png 320x480 - screen-mdpi-portrait.png 480x320 - screen-mdpi-landscape. png 200x320 - screen-ldpi-portrait.png 800x480 - screen-hdpi-landscape.png 

Определения:

• Xlarge экраны не менее 960dp x 720dp. Большие экраны составляют не менее 640dp x 480dp. Нормальные экраны не менее 470dp x 320dp. Маленькие экраны составляют не менее 426dp x 320dp. (Android в настоящее время не поддерживает экраны меньше этого.)

Кроме того, ознакомьтесь с этим блогером от Dianne Hackborne: http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html

Наверное, проще всего использовать представление изображения и установить для него значение типа CENTER_CROP. (Равномерно масштабируйте изображение (поддерживайте пропорции изображения), чтобы обе размеры (ширина и высота) изображения были равны или больше соответствующего размера представления).

Убедитесь, что вы используете тег src, а не устанавливаете фон.

 <ImageView android:id="@+id/home_video_layout" android:src="@drawable/splash_image" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" /> 

Обновлено:

Понимание плотности экрана и «dp»

Разрешение – это фактическое количество пикселей, доступных на дисплее, плотность – это количество пикселей в пределах постоянной области дисплея, а размер – это количество физического пространства, доступного для отображения вашего интерфейса. Они взаимосвязаны: увеличивайте разрешение и плотность вместе, а размер остается примерно одинаковым. Вот почему экран 320×480 на экране G1 и 480×800 на Droid имеет одинаковый размер экрана: на экране 480×800 больше пикселей, но это также более высокая плотность.

Чтобы удалить вычисления размера / плотности с рисунка, платформа Android работает везде, где это возможно, в единицах «dp», которые корректируются для плотности. В экранах средней плотности («mdpi»), которые соответствуют оригинальным телефонам Android, физические пиксели идентичны dp; Размеры устройств – 320×480 в любом масштабе. Более поздний телефон может иметь физико-пиксельные размеры 480×800, но быть устройством с высокой плотностью. Коэффициент преобразования от hdpi до mdpi в этом случае равен 1,5, поэтому для целей разработчика устройство составляет 320×533 в dp.

Я поддерживаю предыдущие ответы, но не забываю силу Draw9Patch или используя NinePatchDrawables

Они относятся к плотности пикселей экрана, а не к размеру экрана. Вам нужно заглянуть в спецификаторы размера экрана, такие как малый, средний, большой и xlarge, если вам действительно нужно изменить поведение на основе размера экрана в пикселях.

В документах Android объясняется, какие плотности и размеры соответствуют этим идентификаторам.

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

Разрешение экрана смартфона для «чайников». А вы видите свыше 300 ppi?

Нужно ли при выборе смартфона ориентироваться на разрешение экрана? Есть ли смысл в покупке 4K или 8K телевизора? Является ли Retina-дисплей iPhone (с плотностью пикселей ~300 ppi) оптимальным выбором, если это уже предел человеческого зрения, как утверждает компания Apple?

На все эти вопросы вы получите исчерпывающие ответы в этой статье!

Однако следует помнить, что разрешение (как и ppi или плотность пикселей) — это далеко не единственный параметр, на который нужно обращать внимание при выборе любого экрана. Цветопередача, яркость, контрастность, цветовой охват, энергоэффективность — всё это не менее важно.

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

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

Минуты, секунды, углы…

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

Представьте, что вы смотрите на две точки определенного размера с какого-то расстояния:

Сможете ли вы с точностью сказать, что перед вами две точки, а не одна? Судя по картинке, ответ очевиден. Мы можем в этом легко убедиться и проследить за тем, как свет от этих точек попадает на сетчатку — «матрицу» нашего глаза:

Каждая точка оставила четкий «след» на сетчатке и мы их легко различаем. Но когда эти точки начнут сближаться, в какой-то момент их «следы» на сетчатке начнут сливаться в одно пятно:

Если мы приблизим картинку, то увидим примерно следующее:

Так происходит по той причине, что свет имеет двойную природу. Это и маленькие «шарики» энергии, которые сталкиваются с предметами и отлетают от них в разные стороны, словно шары для бильярда. И в то же время это волны — как те, что мы привыкли видеть на воде.

Когда свет проходит через маленькое круглое отверстие (зрачок глаза или диафрагму объектива), он проявляет свойства волны и оставляет на сетчатке размытые следы от этих волн. Чем меньше отверстие, тем более размытыми будут точки. Это явление называется дифракцией.

Если расстояние между точками будет небольшим, в какой-то момент их образы просто сольются в одно пятно и глаз уже не будет их различать. Наступление этого момента хорошо описал британский физик Рэлей еще в 1879 году (так называемый критерий Рэлея).

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

Мы видим простую закономерность — чем ближе точки друг к другу, тем меньше угол между лучами, исходящими от них. На картинке слева лучи от двух точек сходятся под бóльшим углом (a), чем на примере справа (угол b).

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

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

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

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

А если мы знаем расстояние до этого объекта, то можем легко высчитать и его реальный размер. Ведь это простой треугольник с одним известным углом (под которым пересекаются лучи света) и одной известной стороной (расстояние до объекта), а другая сторона (она и будет размером объекта) высчитывается по элементарной школьной формуле.

Это и есть основные понятия, которые нужны нам для дальнейшего разговора!

Давайте еще раз подытожим:

• Наш глаз видит какой-то объект или расстояние между объектами только в том случае, если от них исходят лучи света и попадают к нам на сетчатку;
• Чем ближе объекты друг к другу или чем меньше сам объект, тем меньше будет угол, под которым пересекаются лучи света в нашем глазу;
• Существует минимальный угол (угловой размер), при котором наш глаз еще способен увидеть объект или различить два объекта на небольшом расстоянии друг от друга. Все, что меньше этого угла — либо неразличимо (если мы говорим о расстоянии между двумя объектами), либо вообще невидимо без приборов (если речь идет просто о маленьком объекте).

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

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

Это так называемая таблица Сивцева для проверки зрения. Сами буквы и их размер здесь подобраны неслучайно.

К примеру, обратите внимание на букву Ш. Главное в этой букве — 3 вертикальных палочки определенной толщины. Если взять 10-й ряд сверху (очень мелкий шрифт), то ширина каждой палочки этой буквы и расстояние между палочками равняются 1.45 мм:

Если вы правильно назовете букву в 10-м ряду с 5 метров, тогда у вас нормальное зрение. Не лучшее, не идеальное, а просто нормальное. Получается, любой человек с обычным зрением способен увидеть с пяти метров две контрастные палочки толщиной 1.45 мм, которые находятся на расстоянии 1. 45 мм друг от друга.

Если бы мы провели лучи света от двух палочек буквы Ш из 10-го ряда, то угол пересечения этих лучей с расстояния 5 метров был бы настолько маленьким, что изобразить его на экране просто не представляется возможным. Но для наглядности приведу грубый пример:

И теперь возникает вопрос — под каким же углом пересекаются эти лучи? Думаете это 1°? На самом деле — в 60 раз меньше!

То есть, мы способны различить два объекта, лучи от которых пересекаются под углом всего 0.0166° (1/60). И это не идеальное зрение и даже не выше среднего. Это просто нормальный показатель.

Конечно, пользоваться числом 1/60 градуса не очень удобно, поэтому для него придумали название — 1 угловая минута или просто 1′. Хотите нарисовать угловую минуту — нарисуйте транспортиром 1°, а затем разделите его на 60 ровных отрезков и вы получите нужный угол. В свою очередь, 1 угловая минута также состоит из 60 отрезков — угловых секунд.

Так вот, идеальное зрение — это способность различать две точки, если угловое расстояние между ними всего 28 угловых секунд или 0. 47 угловых минут! Возвращаясь к примеру с буквой Ш, можно посчитать, что с 5 метров такой «идеальный глаз» способен различить 2 черточки, толщиной 0.68 мм каждая, на расстоянии 0.68 мм друг от друга!

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

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

И здесь важно упомянуть еще одну деталь. Думаю, вы обратили внимание на то, что я постоянно указываю расстояние до объекта. Делаю я это неспроста.

Очевидно, что различить 2 точки на расстоянии 1 мм друг от друга гораздо проще с двадцати сантиметров, чем с пяти метров. Почему тогда зрение проверяется с пяти метров? И почему 1 угловая минута равна толщине или расстоянию в 1. 45 мм? Как интерпретировать угловые размеры, если мы смотрим в экран смартфона с 25 сантиметров?

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

Если острота зрения человека составляет 1 угловую минуту, то с 25 см он сможет разглядеть точку диаметром 0.07 мм, с 5 метров — точку 1.5 мм, а со 100 метров — точку 3 см:

Получается, нет никакой разницы, будет ли человек с пяти метров разглядывать картину, состоящую из точек диаметром 1.5 мм, или со ста метров — картину из точек диаметром 3 см, никакой разницы в детализации он физически не способен заметить.

Из этого следует один очень важный вывод: с определенного расстояния плотность пикселей (и разрешение экрана) не играют никакой роли. То есть, человек с хорошим зрением не сможет отличить 8K экран от FullHD или даже HD (720p), если смотреть на такие экраны с разного расстояния.

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

Мы все равно увидим одно зеленое пятно без каких-либо деталей. Так как всё, что не выходит за пределы минимального угла, не различимо для глаза.

Теперь, когда мы разобрались со всем этим, давайте перейдем к экранам.

Разрешение экрана и плотность пикселей (ppi)

Разрешение экрана — это количество светящихся точек (пикселей) по горизонтали и вертикали. К примеру, разрешение экрана iPhone 8 составляет 750 x 1334 пикселя:

Зная это число, а также зная физический размер экрана в дюймах, мы можем легко посчитать плотность пикселей или ppi (количество пикселей на один дюйм). Для этого делим количество пикселей по горизонтали на ширину экрана в дюймах: 750/2.3 (ширина экрана — 2.3 дюйма). Получаем 326 ppi или 326 пикселей на дюйм.

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

Длины катетов мы знаем (это разрешение по горизонтали и вертикали), а гипотенузу находим по теореме Пифагора (квадрат гипотенузы равен сумме квадратов катетов). Для нашего iPhone 8 диагональ²=750²+1334², отсюда диагональ = 1530 пикселей. Теперь делим это число на диагональ экрана в дюймах (4.7) и получаем 326 ppi.

Если бы мы взяли тонкую полосочку толщиной в 1 пиксель и длиной в 1 дюйм (2.54 см), то эта полоска состояла бы ровно из 326 светящихся точек. Это и есть ppi.

Из этого следует, что размер одной точки (одного пикселя) составляет примерно 0.078 мм или 78 мкм (25.4 мм делим на 326 точек). Можем ли мы заметить на таком экране отдельные точки? Способен ли наш глаз различить пиксели размером примерно 0. 08 мм?

Как вы уже понимаете, вопрос поставлен не совсем корректно. Ведь угловое разрешение глаза учитывает расстояние до предмета. Если мы берем нормальное зрение (1 угловую минуту), тогда с расстояния 50 см глаз способен различить точку диаметром 145 мкм (0.145 мм), что почти вдвое превышает размер пикселя iPhone.

Даже если брать человека с очень хорошим зрением (0.8 угловых минут), то его глаз способен различить на таком расстоянии точку в 116 мкм (0.116 мм), что снова гораздо больше точки на экране iPhone (78 мкм).

Однако многие люди смотрят в экран с расстояния 20-25 см (например, когда мы читаем книгу на смартфоне). И вот здесь всё становится гораздо интереснее.

На презентации первого смартфона с экраном высокой четкости, Стив Джобс дословно сказал, что 300 точек на дюйм (300 ppi) — это предел сетчатки человека, если смотреть в экран с расстояния 25-30 см.

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

Если мы берем среднестатистическое зрение, то это 1 угловая минута или 1/60° (0.0166). Смотрим на калькуляторе, чему равняется tg(0.0166). Это будет 2.9*10^-4. Теперь умножаем это число на 30 см и получаем 0.0087 см или 0.087 мм, или 87 мкм.

Действительно, человек с обычным зрением с расстояния 30 см тоже не сможет различить отдельные точки на экране с плотностью пикселей 326 ppi, где каждая точка имеет размер 78 мкм.

Но уже с 25 см глаз среднестатистического человека различает предметы 72 мкм. А если брать хорошее зрение (0.8 угловых минут), то такой человек способен с 25 см увидеть отдельные точки размером 58 мкм, что значительно меньше точек iPhone.

Говорить об идеальном зрении (0.47 угловых минут) и вовсе неуместно. Такой «эталонный глаз» теоретически способен различить точку 34 мкм с расстояния в 25 см! Естественно, для обладателя такого глаза пикселизация Retina-экрана будет ужасающей.

Рассчитываем лучшее разрешение

Итак, мы убедились, что с расстояния в 25 см даже самый обычный глаз с разрешением в 1 угловую минуту способен различить пиксели на экране с плотностью 326 ppi. А человек с хорошим зрением (0.8′) — и подавно!

Но здесь важен не только сам факт того, заметите ли вы сознательно отдельные пиксели или нет. Я прекрасно помню, с каким удовольствием в начале нулевых читал книги на своем КПК iPAQ 1940. Четкость его экрана с разрешением 240 на 320 точек казалась мне исключительной, хотя объективно размер этих точек был просто огромным.

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

Конечно, нельзя сравнивать старые 240p-экраны с новыми дисплеями даже бюджетных аппаратов. Но когда вы переходите с того же iPhone 8 (с экраном 326 ppi) на устройство с экраном 400 ppi, вы вполне можете ощутить разницу в четкости изображения (например при чтении текста), даже не обращая внимания на отдельные пиксели.

Если же брать верхнюю границу, за которой уже нет смысла повышать количество точек на дюйм (ppi), то мы можем составить такую таблицу (в первой колонке До экрана указано расстояние, с которого мы смотрим в экран):

Из этого следует, что если человек с отличным зрением смотрит в экран своего устройства с расстояния в 40 см, он не заметит никакой разницы между дисплеем с плотностью точек 552 ppi, 328 ppi или 273 ppi. Во всех этих случаях картинка будет идентичной по четкости и смысла в более высоком разрешении нет никакого.

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

Кроме того, нужно учитывать еще один важный момент — всё, что было сказано выше, справедливо только для IPS-экранов, у которых «один пиксель» физически состоит из 3 субпикселей одинакового размера — красного, зеленого и синего:

Если мы говорим, что плотность пикселей IPS-экрана составляет 326 ppi, это значит, в 1 дюйме помещается 326 синих, 326 зеленых и 326 красных субпикселей.

Но когда речь идет об AMOLED-экранах, здесь ситуация сильно отличается, так как практически в любом AMOLED-экране количество красных и синих субпикселей в 2 раза меньше количества зеленых субпикселей:

Поэтому, когда вы видите, что экран iPhone 12 Pro имеет плотность пикселей 458 ppi, не обольщайтесь. Это значит, что в этом экране 458 зеленых субпикселей на 1 дюйм. Но когда мы посчитаем количество красных или синих субпикселей, то их окажется заметно меньше — 324 ppi.

Повторюсь, это касается практически любого AMOLED-экрана. И по этой причине приведенная выше таблица будет выглядеть несколько иначе для AMOLED-экранов. Так как иногда на контрастных границах изображения человек даже с обычным зрением (1′) сможет с 25 сантиметров заметить неровность шрифтов на AMOLED-экране с плотностью пикселей 450 ppi.

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

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

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

Эта статья отвечает лишь на один конкретный вопрос — есть ли смысл в увеличении разрешения экрана и до каких пределов можно увеличивать плотность пикселей, замечая (при желании) разницу в четкости картинки.

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

Конечно, детализация — это лишь часть общей картины, но для многих она важна. И 300 ppi — это далеко не предел человеческого зрения.

Алексей, глав. редактор Deep-Review

Экраны и плотность пикселей. Основы UI дизайна — UXPUB

Мир – это ваш холст, но у него есть определенные ограничения.

Добро пожаловать в четвертую часть основ UI-дизайна. На этот раз мы рассмотрим экраны, для которых вы, вероятно, будете проектировать. Это также часть бесплатных глав из книги «Designing User Interfaces».

99% интерфейса = пиксели экрана*

• 1% предназначен для голосовых интерфейсов и, возможно, в ближайшем будущем для нейронных соединений.

Дизайн интерфейса сводится к дисплеям. Поскольку пользовательский интерфейс – это все, что мы видим, важно понимать, на что мы смотрим.

На заре Интернета все было довольно просто – вы проектировали где-то между разрешением в 640 x 480 и 800 x 600 пикселей. Мы, конечно, можем вернуться еще дальше – к первому Macintosh или самому первому десктопному интерфейсу Xerox, но давайте возьмем за основу старые цветные ЭЛТ-мониторы. Именно тогда я начал проектировать для Интернета (1998).

Но это было в конце 90-х, и после этого все начало быстро меняться. Большинство дисплеев той эпохи имели одинаковые диапазоны разрешения, были очень тяжелыми и не могли отображать слишком много цветов. У них также была низкая частота обновления, что приводило к некачественному скроллу страницы. Дисплеи той эпохи часто ограничивали визуальные возможности веб-сайтов.

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

PPI или пиксели на дюйм

В какой-то момент 72 пикселя на дюйм стали стандартом для этих ЭЛТ-мониторов, и так продолжалось долгое-долгое время. Сейчас и наши ноутбуки, и мобильные устройства имеют гораздо более высокое разрешение и плотность пикселей.

Руководство дизайнера по DPI и PPI

Но в чем разница?

Разрешение – это количество отдельных пикселей дисплея. Например, первый iPhone имел базовое разрешение 320 x 480. Apple решила, что такого разрешения должно быть достаточно для удобного интерфейса, поэтому установила для платформы базовую планку плотности 1x.

Все изменилось после появления iPhone 4 с Retina-дисплеем. Суть нового дисплея заключалась в том, что пиксели были настолько плотными, что больше не было видно отдельных пикселей. Базовое (или 1x) разрешение было таким же, как у предыдущего iPhone, но плотность пикселей была множителем этого разрешения, что приводило к более четкому тексту и изображениям. iPhone 4 удвоил количество пикселей до 640 x 960, но фактический дизайн элементов был сохранен на уровне 320 x 480 и увеличен на устройстве.

Хорошо, но почему дизайн все еще вел себя, как 320 x 480? Почему бы просто не использовать 640 x 960 в качестве «видимого разрешения»?

После двукратного увеличения количества пикселей в iPhone 4 мы увидели 3-кратную, 4-кратную и большую плотность пикселей как на телефонах, так и на планшетах и ноутбуках.

Например, современный iPhone X использует базовое разрешение 375 на 812 пикселей, но фактическое количество пикселей в три раза больше (3x) и составляет 1125 на 2436 пикселей.

Приведу пример – если вы проектируете кнопку, вам нужно сделать ее высотой не менее 44 точек. Это означает, что при проектировании в масштабе 1x это будет 44 пикселя (при 1x пиксель – это то же самое, что и точка), а при 2x это будет 88 пикселей, но в вашем дизайне будут все те же 44 точки.

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

Но вам не нужно помнить об этом

Большинство инструментов дизайна предоставляют вам шаблон 1x для всех популярных размеров экрана. Вы просто проектируете на 1x, а закодированный интерфейс автоматически масштабируется. Какое облегчение! 🥳

Но имейте в виду, что есть фрагментация.

Что такое фрагментация?

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

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

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

Но больше всего страдает фрагментация внутри одной категории устройств. Самый распространенный пример – мобильный телефон – имеет так много возможных разрешений и соотношений сторон, что невозможно сделать один дизайн подходящий для всех. В магазине Google Play представлены десятки разрешений экрана для мобильных Android-устройств. Несколько лет назад Apple использовала более последовательный набор настроек, но с тех пор отказалась от этого пути и перешла к индивидуальным разрешениям почти для всех устройств.

Как бороться с фрагментацией?

Единственный способ бороться с этой тенденцией (и победить ее) – создавать дизайн с минимально возможным разрешением, по крайней мере, до тех пор, пока оно не станет юридически устаревшим. Затем переключитесь на следующее самое маленькое возможное разрешение.

Проще говоря: не создавайте дизайн специально для iPhone Pro Max. Проектируйте для iPhone Pro.

Доступность для большого пальца

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

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

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

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

Основные выводы

Вот все, что вам нужно помнить при проектировании для любых типов экранов:

1. Всегда учитывайте плотность пикселей 1x.
2. Все инструменты дизайна имеют встроенные размеры экрана (не нужно их запоминать).
3. Сделайте основную навигацию доступной на мобильных устройствах.

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

Статьи из серии:

Часть 1: Заливки и границы. Основы UI дизайна

Часть 2: Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна

Часть 3: Тени и размытие. Основы UI дизайна

Часть 4: Экраны и плотность пикселей. Основы UI дизайна

Часть 5: С чего начать проектирование мобильного приложения. Основы UI дизайна

Часть 6: 5 советов по улучшению дизайна кнопок. Основы UI дизайна

Детальный размер экрана Android, адаптация экрана

1. Важные концепции

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

Давайте сначала разберемся с несколькими важными концепциями:

Каковы размер экрана, разрешение экрана и плотность пикселей экрана? Чтобы
Что такое dp, dip, dpi, sp, px? Какая между ними связь? Чтобы
Что такое mdpi, hdpi, xdpi, xxdpi? Как рассчитать и отличить?

(1) Размер экрана

Размер экрана относится к длине диагонали экрана в дюймах, 1 дюйм = 2,54 см,

Например, распространенные размеры экрана: 2,4, 2,8, 3,5, 3,7, 4,2, 5,0, 5,5, 6,0 и т. Д.

(2) Разрешение экрана

Под разрешением экрана понимается количество пикселей в горизонтальном и вертикальном направлениях, единица измерения — пиксель, 1 пиксель = 1 пиксель. Обычно вертикальные пиксели * горизонтальные пиксели, например 1960 * 1080.

(3) Плотность пикселей экрана

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

（4）dp、dip、dpi、sp、px

(1) пиксель должен быть нам знаком. Предыдущее разрешение — это пиксель, используемый как единица измерения. В большинстве случаев, таких как дизайн пользовательского интерфейса и собственный API Android, пиксель используется в качестве единой единицы измерения, например для получения ширины экрана и высота.

(2) dip и dp означают одно и то же, оба являются аббревиатурами для Density Independent Pixels, то есть пикселей, не зависящих от плотности. Как мы сказали выше, dpi — это плотность пикселей экрана. Если в дюйме 160 пикселей, пиксель плотность этого экрана 160dpi. Тогда как в таком случае конвертировать dp и px? В Android правило: 160 точек на дюйм (320 * 480), 1dip = 1px, если плотность 320dpi, то 1dip = 2px и так далее, соотношение: px = dp * (dpi / 160).

Если вы также нарисуете линию 320 пикселей, она будет отображаться как 2/3 ширины экрана на мобильном телефоне с разрешением 480 * 800 и будет занимать весь экран на мобильном телефоне 320 * 480. Если вы используете dp в качестве единица измерения, два разрешения. При такой скорости 160dp отображается как половина длины экрана. Вот почему при разработке под Android вы должны пытаться использовать dp вместо px при написании макетов.

(3) И sp, а именно масштабно-независимые пиксели, аналогичен dp, но может масштабироваться в соответствии с предпочтением размера текста, которое является основной единицей для установки размера шрифта.

（5）ldpi、mdpi、hdpi、xdpi、xxdpi、xxxdpi

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

из их:
ldpi:mdpi:hdpi:xhdpi:xxhdpi:xxxdpi = 0.75:1:1.5:2:3:4 = 3:4:6:8:12:16

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

2. Анализ некоторых тестовых машин Android

Сначала посмотрите на две формулы расчета:
(1) dpi = √ (длина пикселей² + ширина пикселей²) / диагональ экрана в дюймах
（2）px = dp * (dpi / 160)

В процессе разработки проекта я столкнулся с мобильным телефоном с большим экраном, но отображаемые значки были очень маленькими, что не соответствовало ожиданиям, например, модель Huawei MT1-U06. Чтобы
Причина в том, что разрешение реального экрана будет стандартным, наиболее близким к стандарту Google, а затем плотность будет определяться в соответствии с ближайшим разрешением.

Расчет размера экрана и разрешения для некоторых моделей:

(1) OnePlus A1001, размер основного экрана: 5,5 дюйма, 1920 × 1080 пикселей, протестировано как xxdpi:

dpi = √ (длина пикселей² + ширина пикселей²) / диагональ экрана в дюймах = √ (1920² + 1080²) / 5,5 = √ 3686400 + 1166400 / 5,5 = √ 4852800 / 5,5 = 2202,9 / 5,5 = 440,6
density = dpi/160 = 440.6/160 = 2.75 
Принцип близости, соответствующее dpi равно xxdpi, что согласуется с результатом теста.

(2) Nexus 5, размер экрана: 4,95 дюйма, разрешение 1920 × 1080 пикселей (FHD), тест xxdpi:

dpi = √ (длина пикселей² + ширина пикселей²) / диагональ экрана в дюймах = 2202,9 / 4,95 = 445
density = dpi/160 = 445/160 = 2.78 
Аналогично принципу близости, соответствующее dpi равно xxdpi, что согласуется с результатом теста.

(3) Huawei MT1-U06, экран: 6,1 дюйма (размер корпуса: 64,8 * 129 * 7,69 мм), пиксель 1280 × 720 пикселей, что соответствует hdpi:

dpi = √ (длина пикселей² + ширина пикселей²) / диагональ экрана в дюймах = √ (1280² + 720²) / 6,1 = √ 1638400 + 518400 /6,1 = √ 2156800 /6,1 = 1468,6 / 6,1 = 240,75
density = dpi/160 = 240.75 /160 = 1.5 
Это значение просто hdpi.

(4) Samsung galaxy s4, главный экран: 5 дюймов, 1920×1080 пикселей, xxdpi:

dpi = √ (длина пикселей² + ширина пикселей²) / диагональ экрана в дюймах = 2202,9 / 5 = 440,6
density = dpi/160 = 440.6/160 = 2.75 
Аналогично принципу близости, соответствующее dpi равно xxdpi, что согласуется с результатом теста.

Это объясняет, почему экран был большим, а значки — маленькими.

Измените разрешение экрана

Поддержка Windows 7 закончилась 14 января 2020 г.

Мы рекомендуем вам перейти на компьютер с Windows 10, чтобы продолжать получать обновления безопасности от Microsoft.

Учить больше

Разрешение экрана означает четкость текста и изображений, отображаемых на экране. При более высоком разрешении, например 1600 x 1200 пикселей, объекты выглядят более резкими.Они также кажутся меньше, поэтому на экране помещается больше элементов. При более низком разрешении, например 800 x 600 пикселей, на экране помещается меньше элементов, но они выглядят крупнее.

Разрешение, которое вы можете использовать, зависит от разрешений, поддерживаемых вашим монитором. ЭЛТ-мониторы обычно имеют разрешение 800 × 600 или 1024 × 768 пикселей и могут хорошо работать с разными разрешениями. ЖК-мониторы, также называемые плоскими дисплеями, и экраны ноутбуков часто поддерживают более высокое разрешение и лучше всего работают при определенном разрешении.

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

Чтобы изменить разрешение экрана

1. Откройте разрешение экрана, нажав кнопку Start , нажав Control Panel , а затем в Appearance and Personalization нажав Adjust screen resolution .

2. Щелкните раскрывающийся список рядом с пунктом Разрешение , переместите ползунок к желаемому разрешению и нажмите Применить .

3. Щелкните Сохранить , чтобы использовать новое разрешение, или щелкните Вернуть , чтобы вернуться к предыдущему разрешению.

Собственное разрешение

, включая экраны ноутбуков, обычно лучше всего работают при собственном разрешении .Вам не нужно настраивать монитор для работы с этим разрешением, но обычно рекомендуется, чтобы вы могли видеть как можно более четкий текст и изображения. ЖК-мониторы обычно бывают двух форм: стандартное соотношение ширины к высоте 4: 3 или широкоэкранное соотношение 16: 9 или 16:10. Широкоэкранный монитор имеет более широкую форму и разрешение, чем монитор со стандартным соотношением сторон.

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

• 19-дюймовый экран (стандартное соотношение сторон): 1280 x 1024 пикселей

• 20-дюймовый экран (стандартное соотношение сторон): 1600 x 1200 пикселей

• 22-дюймовый экран (широкоформатный): 1680 x 1050 пикселей

• 24-дюймовый экран (широкоформатный): 1900 x 1200 пикселей

Примечания:

• Когда вы меняете разрешение экрана, это влияет на всех пользователей, которые входят в систему.

• Когда вы устанавливаете для монитора разрешение экрана, которое он не поддерживает, экран станет черным на несколько секунд, в то время как монитор вернется к исходному разрешению.

популярных разрешений экрана | Media Genesis »Media Genesis

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

Размер экрана, разрешение и область просмотра: что все это значит?

Когда вы покупаете устройство, вы часто видите размер экрана и разрешение, указанные в спецификациях. Размер экрана — это физический размер экрана в дюймах по диагонали.Это не следует путать с разрешением, которое представляет собой количество пикселей на экране, часто отображаемых в виде ширины по высоте (например, 1024 × 768). Поскольку устройства с одинаковым размером экрана могут иметь очень разное разрешение, разработчики используют области просмотра при создании страниц, удобных для мобильных устройств. Видовые экраны — это уменьшенные версии разрешений, которые позволяют более единообразно просматривать сайты на разных устройствах. Видовые экраны часто более стандартизированы и меньше размеров разрешения.

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

Нужна помощь в определении отзывчивости вашего веб-сайта? Воспользуйтесь нашим бесплатным инструментом MG, Responsive Design Checker.

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

Адаптивный стиль

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

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

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

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


/ * запуск стилей рабочего стола * /

@media screen и (max-width: 991px) {
/ * начало стилей больших планшетов * /

}

@media screen и (max-width: 767px) {
/ * начало средних стилей планшета * /

}

@media screen и (max-width: 479px) {
/ * начало стилей телефона * /

}

Самые популярные разрешения экрана

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

1024 × 768 пикселей или выше

Есть еще советы или предложения по работе с экранами разных размеров и разрешений? Поделитесь с нами на Facebook!

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

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

Рекомендованная производителем розничная цена HP может быть снижена. Рекомендуемая производителем розничная цена HP указана либо как отдельная цена, либо как сквозная цена, а также указана цена со скидкой или рекламная цена. На скидки или рекламные цены указывает наличие дополнительной более высокой начальной цены MSRP

Следующее относится к системам HP с Intel 6-го поколения и другим процессорам будущего поколения в системах, поставляемых с Windows 7, Windows 8, Windows 8.1 или Windows 10 Pro с пониженной версией до Windows 7 Professional, Windows 8 Pro или Windows 8.1: эта версия Windows, работающая с процессором или наборами микросхем, используемыми в этой системе, имеет ограниченную поддержку со стороны Microsoft. Дополнительные сведения о поддержке Microsoft см. В разделе часто задаваемых вопросов о жизненном цикле поддержки Microsoft по адресу https://support.microsoft.com/lifecycle

Ultrabook, Celeron, Celeron Inside, Core Inside, Intel, логотип Intel, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, логотип Intel Inside, Intel vPro, Itanium, Itanium Inside, Pentium, Pentium Inside, vPro Inside, Xeon, Xeon Phi, Xeon Inside и Intel Optane являются товарными знаками корпорации Intel или ее дочерних компаний в США.С. и / или другие страны.

Гарантия для дома доступна только для некоторых настраиваемых настольных ПК HP. Потребность в обслуживании на дому определяется представителем службы поддержки HP. Заказчику может потребоваться запустить программы самопроверки системы или исправить обнаруженные неисправности, следуя советам, полученным по телефону. Услуги на месте предоставляются только в том случае, если проблема не может быть устранена удаленно. Услуга недоступна в праздничные и выходные дни.

HP передаст в Bill Me Later® информацию о вашем имени и адресе, IP-адрес, заказанные продукты и связанные с ними расходы, а также другую личную информацию, связанную с обработкой вашего заявления.Bill Me Later будет использовать эти данные в соответствии со своей политикой конфиденциальности.

Microsoft Windows 10: не все функции доступны во всех выпусках или версиях Windows 10. Для использования всех функций Windows 10 системам может потребоваться обновленное и / или отдельно приобретенное оборудование, драйверы, программное обеспечение или обновление BIOS. Windows 10 обновляется автоматически, что всегда включено. Могут применяться сборы интернет-провайдера, и со временем могут применяться дополнительные требования для обновлений. См. Http://www.microsoft.com.

Соответствующие требованиям HP Rewards продукты / покупки определяются как продукты / покупки из следующих категорий: Принтеры, ПК для бизнеса (марки Elite, Pro и Workstation), выберите Аксессуары для бизнеса и выберите Чернила, Тонер и бумага.

Размер области просмотра Google Pixel, разрешение, PPI, характеристики экрана и медиа-запросы CSS

Размеры Google Pixel

  @media only screen and (min-width: 412px) and (max-width: 767px) {/ * Your Styles ... * /}  

  @media only screen and (min-width: 412px) {/ * Your Styles... * /}  

  @media only screen and (min-height: 732px) {/ * Your Styles ... * /}  

  @media only screen and (min-width: 732px) and (Ориентация: альбомная) {/ * Ваши стили ... * /}  

  @media only screen and (min-width: 412px) and (Ориентация: книжная) {/ * Ваши стили... * /}  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 2.625),
  только экран и (min - moz-device-pixel-ratio: 2.625),
  только экран и (-o-min-device-pixel-ratio: 2,625 / 1),
  только экран и (min-device-pixel-ratio: 2,625),
  только экран и (минимальное разрешение: 441dpi),
  только экран и (мин-разрешение: 2.625dppx) {
    / * Здесь стили Retina * /
}
                                  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 2),
  только экран и (min - moz-device-pixel-ratio: 2),
  только экран и (-o-min-device-pixel-ratio: 2/1),
  только экран и (min-device-pixel-ratio: 2),
  только экран и (минимальное разрешение: 192dpi),
  только экран и (минимальное разрешение: 2dppx) {
    / * Здесь стили Retina * /
}
                                  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 3),
  только экран и (min - moz-device-pixel-ratio: 3),
  только экран и (-o-min-device-pixel-ratio: 3/1),
  только экран и (min-device-pixel-ratio: 3),
  только экран и (минимальное разрешение: 384dpi),
  только экран и (минимальное разрешение: 3dppx) {
    / * Здесь стили Retina * /
}