nicuini 10 июл 2014 в 12:36

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

9 мин

195K

Интерфейсы*

Из песочницы

+91

Комментарии 28

Peter_Zhizhin 10 июл 2014 в 13:13

Пятиминутка ненависти.

Для того, чтобы определить остроту зрения (аналог разрешения камеры), используются таблицы Снеллена — ряды букв разного кегля, где размер и ширина знака подбраны так, чтобы стянуть угол в 1 минуту дуги на определенном расстоянии.

— Какое у тебя зрение?
— Минус два
— Ты понимаешь, что минус два — это диоптрии для очков, которые ты носишь?
— Что? О чем ты? Какие ещё диоптрии?
— Вот приходишь ты к окулисту и видишь таблицу. Сколько там строк видишь? Вот это и есть твое зрение.
— Да ладно тебе, я к окулисту пришел, он мне сказал: «зрение минус два».

zomby 10 июл 2014 в 21:31

Сколько там строк видишь?

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

Deranged 10 июл 2014 в 13:44

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

Это с какой такой радости? Не знаю как там было в Windows 3.11, но в Windows 7 Microsoft считает, что px = dp / DPI, а DPI по умолчанию 96. dp при этом не физическая, а абстрактная величина, коэффициент масштабирования (DPI) можно изменить в панели управления.

nicuini 10 июл 2014 в 13:51

Спасибо, поправил

PaulZi 10 июл 2014 в 15:17

В вебе, к сожалению, тоже пришли к какому-то печальному решению:
1) px — теперь не физический пиксель, а window.devicePixelRatio пикселей.
2) Все абсолютные величины — cm, mm, ..., тоже не имеют с реальными единицами измерения ничего общего, а лишь «примерно соответствуют им», исходя из window.devicePixelRatio и некому стандартному количеству пикселю в дюйме (72 или 96 не помню).
3) Реальный физический размер экрана не доступен из веба

nicuini 10 июл 2014 в 15:37

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

nicuini 10 июл 2014 в 15:38

misclick post

Error1024 10 июл 2014 в 15:59

Разрешение экрана все растёт и растёт, а вот информации на экран помещается все меньше. Мне нравятся старые «пиксельные» интерфейсы, где все было подогнано пиксель к пикселю, и на экран помещалось максимум информации, сейчас сделать такой интерфейс уже не реально. Да и не было «мыла», которое приносит нам вектор.
Кроме того ощущение что ты можешь различить каждый отдельный пиксель своего устройства, грело душу, сейчас курсор навести на нужный пиксель проблематично.
Правда все это в малой степени относится к приложениям win32, т.к. обычно там все контроллы с абсолютным позиционированием, да и сама windows не умеет нормально работать с высоким dpi, поэтому наверное не скоро ноутбуки с windows на ретину перейдут.

bodqhrohro 10 июл 2014 в 17:13

Невидимость пикселей значительно усложняет работу с графикой, например, так как становится сложнее точно подгонять элементы без костылей типа сеток и снаппинга… Интерфейсы как раз сильно абстрагированнее от пиксельной сетки не стали, причина примитивизации — в ёмкостных тачскринах: с ними by design невозможно точное позиционирование (опять-таки, без костылей типа «лапок» для выделения текста). Разрешение повышают исключительно для повышения чёткости — уменьшать размеры экранных объектов, не увеличивая резко нагрузку на зрение, уже давным-давно некуда, разве только в очках виртуальной реальности с призматическими линзами. Так-то и в старых мобильниках с DPI, близким к классическому десктопу (100-120) можно извратиться и сделать мелкие шрифты (например, в MiniCommander), чтобы больше на экран влезало, но постоянно таким пользоваться…

Error1024 11 июл 2014 в 04:33

Говоря о мыле я имел в виду wpf, даже в visual studio 2010, заметно замыливание интерфейса.

bodqhrohro 11 июл 2014 в 12:42

Мыло из-за кривого рендеринга конкретно в винде.

olegkrasnov 14 июл 2014 в 05:51

Тёплые, ламповые пиксели :)

POPSuL 10 июл 2014 в 16:58

Вы как хотите, обсуждайте поддержку HDPI в Windows, и прочите технические особенности, а я буду наслаждаться тем, что прочел крайне интересную статью!
Узнал очень много нового! Спасибо!

Спойлер

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

nicuini 10 июл 2014 в 17:04

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

POPSuL 10 июл 2014 в 17:06

Обязательно пишите! С удовольствие прочту! Да и уверен в том, что не только я с удовольствием прочту подобные статьи! :)

Meklon 10 июл 2014 в 18:19

Спасибо за статью, очень интересно. Разрешите я дополню ссылкой на свою статью Сколько мегабит/с можно пропустить через зрительный нерв и какое разрешение у сетчатки? Немного теории

nicuini 10 июл 2014 в 22:22

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

Meklon 10 июл 2014 в 23:27

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

Meklon 10 июл 2014 в 23:29

Кстати, у нас эту таблицу называют таблицей Сивцева.

nicuini 10 июл 2014 в 23:42

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

Nashev 11 июл 2014 в 13:24

подписали б, что «адаптированные к русскому языку Сивцевым»

nicuini 11 июл 2014 в 13:42

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

belkin_ai 10 июл 2014 в 23:11

Не обязательно проверять UA, сейчас производители устройств и браузеров нормально работают с такой штукой как DeviceAspectRatio, который может принять довольно ограниченный диапазон значений, так что вариантов устройств может быть не несколько десятков, а 3 — 4. Но даже и этот параметр не обязательно проверять, движок сам обрабатывает значения максимально комфортно.

Например, мы укажем размер текста 16px. Устройство с экраном 5 дюймов и 1080x1920 будет иметь AspectRatio равный 3, значит по высоте у него будет 640 виртуальных пикселей. Высота текста физически будет равна примерно 4,36" * 16 / 640 = 0,11 дюйма.
Возьмем другой аппарат: 4,5", 720x1280. AspectRatio будет уже 2. Те же 640px высоты. Высота текста около 3.92" * 16 / 640 = 0,1 дюйма.

Т.о. на девайсе, который мы держим чуть дальше от глаз, текст как раз чуть более крупный. В целях улучшения UX можно отловить ширину и AspectRatio и задать индивидуальный размер, это всего 3-5 вариантов. Хотя можно отталкиваться и только от ширины устройства, мне кажется этого достаточно в 95% случаев. Делаем разметку чуток резиновой местами и она будет как влитая.

И да, я за размеры в px. Потому что любые относительные величины все равно пересчитаются движком в пиксели. Любые хаки, хуки и прочие хеки разве что ускорют написание условий типа media queries. Вот в примере задан размер html в пикселях. И у body тоже. Всё дочернее, как бы вы ни описывали, все равно пересчитается в пиксели. И, как видно, эти пиксели индивидуальны для устройств и браузеров. Так что разницы на продакшене нет. Совсем. Только удобство разработки. Хотя и это тоже относительно. Лучше я буду знать, что у меня строка высотой 28px, чем пересчитывать цепочку наследований. И пиксели всё-таки могут быть более понятными. Если я знаю что девайс 540 — 640 пикселей в высоту, я примерно представляю, сколько пикселей выделить тексту. А вот сколько rem? Или dp? Каждый раз для каждого девайса пересчитывать? Нет уж, пиксели гораздо роднее и теплее.

norguhtar 11 июл 2014 в 06:57

Производителям мониторов необходимо всегда через драйвера сообщать ОС свой физический размер для приблизительного определения расстояния от экрана.

Через какие еще драйвера? Это стандартная фича, отдается через EDID

Вот к примеру вывод EDID от моего монитора

[     6.070] (II) intel(0): EDID for output HDMI2
[     6.070] (II) intel(0): Manufacturer: BNQ  Model: 7b26  Serial#: 21573
[     6.070] (II) intel(0): Year: 2010  Week: 29
[     6.070] (II) intel(0): EDID Version: 1.3
[     6.070] (II) intel(0): Digital Display Input
[     6.070] (II) intel(0): Max Image Size [cm]: horiz.: 53  vert.: 30
[     6.070] (II) intel(0): Gamma: 2.20
[     6.070] (II) intel(0): DPMS capabilities: Off
[     6.070] (II) intel(0): Supported color encodings: RGB 4:4:4 YCrCb 4:4:4
[     6.070] (II) intel(0): Default color space is primary color space
[     6.070] (II) intel(0): First detailed timing is preferred mode
[     6.070] (II) intel(0): redX: 0.640 redY: 0.330   greenX: 0.300 greenY: 0.600
[     6.070] (II) intel(0): blueX: 0.150 blueY: 0.060   whiteX: 0.313 whiteY: 0.329
[     6.070] (II) intel(0): Supported established timings:
[     6.070] (II) intel(0): 640x480@60Hz
[     6.070] (II) intel(0): 800x600@60Hz
[     6.070] (II) intel(0): 1024x768@60Hz
[     6.070] (II) intel(0): Manufacturer's mask: 0
[     6.070] (II) intel(0): Supported standard timings:
[     6.070] (II) intel(0): #0: hsize: 1024  vsize 576  refresh: 60  vid: 49249
[     6.070] (II) intel(0): #1: hsize: 1280  vsize 800  refresh: 60  vid: 129
[     6.070] (II) intel(0): #2: hsize: 1280  vsize 720  refresh: 60  vid: 49281
[     6.070] (II) intel(0): #3: hsize: 1280  vsize 960  refresh: 60  vid: 16513
[     6.070] (II) intel(0): #4: hsize: 1280  vsize 1024  refresh: 60  vid: 32897
[     6.070] (II) intel(0): #5: hsize: 1600  vsize 900  refresh: 60  vid: 49321
[     6.070] (II) intel(0): #6: hsize: 1680  vsize 1050  refresh: 60  vid: 179
[     6.070] (II) intel(0): #7: hsize: 1920  vsize 1080  refresh: 60  vid: 49361
[     6.070] (II) intel(0): Supported detailed timing:
[     6.070] (II) intel(0): clock: 148.5 MHz   Image Size:  531 x 298 mm
[     6.070] (II) intel(0): h_active: 1920  h_sync: 2008  h_sync_end 2052 h_blank_end 2200 h_border: 0
[     6.070] (II) intel(0): v_active: 1080  v_sync: 1084  v_sync_end 1089 v_blanking: 1125 v_border: 0
[     6.070] (II) intel(0): Serial No: X7A00693SL0
[     6.070] (II) intel(0): Ranges: V min: 50 V max: 76 Hz, H min: 30 H max: 83 kHz, PixClock max 175 MHz
[     6.070] (II) intel(0): Monitor name: BenQ VW2420H

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

nicuini 11 июл 2014 в 12:34

Спасибо за EDID. Однако, должен заметить что а) в вебе к этой информации доступа нет и б) виндовый DPI-scaling в основном предназначен для того чтобы решить проблему увеличения ppi монитора тогда как угловые размеры элементов заметно отличаются.