О размере экрана, пикселя и элемента / Хабрахабр. Привет, username. Свой первый пост я хочу посвятить актуальной проблеме, связанной с появлением большого количества новых форматов дисплеев и непрекращающейся гонкой за плотностью пикселей. В свете появления таких устройств, как очки дополненной реальности, смартчасов, 4к- мониторов и еще более широкого спектра планшетов и ноутбуков, возникает вопрос: какой размер графического элемента/текста следует считать оптимальным и в чем его измерять.
Android- разработчики, несомненно, тут же воскликнут: «Да, конечно, в dp!». Но практика показывает, что дела обстоят несколько сложнее. Проблема. Одна из ключевых задач дизайнера интерфейса заключается в том, чтобы создать оптимальный баланс элементов, который позволяет реализовать бизнес- цели продукта комфортно для пользователя. Методов дифференциации элементов помимо положения не так уж и много: Размер. Цвет и тон. Границы (особый метод, связанный со свойством зрительного центра оформлять отдельные объекты по касанию светотеневой плоскости и фона)Фактурная и графическая насыщенность. Очевидно, что, разрабатывая единый интерфейс для разных устройств, дизайнер предполагает не только схожее соотношение деталей этого интерфейса, но и наибольшую читабельность текста и графических элементов. При этом еще Дэвид Огилви замечает, что рекламный плакат не может быть читабельным на любом расстоянии, но должен быть таковым (и иметь соответствующий баланс элементов) на расстоянии наиболее вероятного сценария просмотра.
В случае с интерфейсами интерактивных устройств сценарии просмотра являются самыми разными, а вот функциональные сценарии обычно сохраняются. Для человека, знакомого с версткой на разных платформах, явственно встает проблема: как обозначить размер элементов, чтобы они занимали необходимое место в угловом пространстве, видимом глазом, вне зависимости от сценария? Синопсис. Подобие стандарта на ppi (pixels per inch) появилось в середине 1. Apple выпустила свои первые компьютеры серии Macintosh.
Здравствуйте! Подскажите, верстка под 17 дюймов - это какая должна.
Разное » (X)HTML/CSS » верстка под 17 дюймовый монитор . Вёрстка HTML для электронной почты — интересная и с сайтов компаний Campaign Monitor и MailChimp (прим. пер: вот здесь. Вёрстка веб-страниц — создание структуры html -кода, размещающего элементы. На момент 2010 года веб-ресурс может быть открыт на любом мониторе от телевизора с предустановленным браузером до мобильного. Тем временем разрешение и диагональ мониторов начали расти как ( пиксели, независимые от масштаба), аналог em в web- верстке всегда равный значению, указанному в font-size тэга html (но не его детей).
. В 2006 году большинство пользователей имело экран монитора 800*600.
боковая колонка смещается согласно расположению в HTML и меняет.. У
каждого свои элементы, своя вёрстка, свои потребности. 2 монитора с IPS или *VA матрицей от 23" и соотношением сторон 16:10 такие например. php, js, my/mssql, sqlite, html, css, it-consult. . Мониторы тех, кто подготавливал контент и их. 1 · Как дизайнеру быть в
курсе возможностей верстки (html/css) и javascript?
У этих компьютеров была 9- дюймовая диагональ экрана с 7. Уже тогда Apple заняла позицию создания собственной экосистемы, поэтому в диапазоне технологических возможностей того времени было выбрано ppi ровно в два раза меньше dpi (dots per inch) эппловского принтера Image. Writer, что давало гарантию, что размер элементов на экране будет точно соответствовать размеру на бумаге.
Однако это касалось только компьютеров фирмы Apple, так как другие производители использовали самые разные ppi, следуя своим возможностям и законам рынка. Этот рудимент видения компьютера как приставки к принтеру привел к появлению в Photoshop галочки Resample Image, при снятии которой разрешение изображения не влияет на его размер, но влияет на качество печати. Тем временем разрешение и диагональ мониторов начали расти как на дрожжах. Если Mac 1. 28k имел разрешение 5. Apple Multiple Scan 1. Display с диагональю 1.
Это значение, вне зависимости от диагонали, оставалось самым популярным разрешением экранов еще 1. Несмотря на попытки выработать какой- то стандарт, к середине 2. Что касается профессионального рынка, где, казалось бы, должна была соблюдаться какая- то стандартизация, то там ситуация была еще хуже. Производители создавали для специалистов мониторы весьма экзотических параметров, которые стоили как паровоз и имели свойство устаревать в течение года. В 2. 00. 8 году я купил ноутбук Lenovo Y7.
К сожалению, на тот момент ни у меня, ни, видимо, у Lenovo не было представления о том, какое это было сильное преимущество для ноутбука: 1. Даже у профессиональных мониторов ppi было ниже, а выше можно было наблюдать уже в совсем специфической технике, вроде медицинских мониторов или мониторов космических устройств, хотя именно в этом году Kopin Corporation представила продукт пика технологических исследований — устройство с 2. Для меня лично дело кончилось тем, что я приучился смотреть видео только HD качества (1. Эта же ситуация подтолкнула меня, как начинающего дизайнера, к самостоятельному осознанию независимости размера элемента от устройства. Кстати, удивительно, но Windows Vista справлялась с масштабированием вполне неплохо. В 2. 01. 0 году Стив Джобс представил дисплей повышенной четкости, названный Retina (“сетчатка”, англ.). При этом в своей презентации он заявил, что ppi ретины превышает таковой у человеческого глаза и, следовательно, считается идеальным.
Как опытный презентатор, Джобс произвел впечателение на общественность, однако по мнению специалистов cultofmac. Эта картинка (открывать на устройстве с Retina) позволит понять, насколько утверждение Джобса соответствует истине. Человек с нормальным зрением без труда найдет на этом изображении как белые и черные полосы шириной в один пиксель, так и цикл (черная и белая полоса рядом) шириной в 2 пикселя по центру. Следует также понимать, что, ввиду ограниченного углового разрешения глаза, ppi для экранов разного размера и находящихся от пользователя на разном расстоянии будет отличаться. Например, для i. Phone это значение должно быть около 9. Pad — 7. 69ppi. Ситуация. На нынешний день мы имеем целый ряд проблем, связанных с историей пикселя.
Совершенно очевидно, что размеры, задаваемые в пикселях, потеряли всякий смысл — только на википедии количество различных значений ppi для мониторов превышает две сотни, а это значит, что размер элемента всегда будет разный. Компания Google описывает в своем девелоперском центре несколько единиц измерений, что по идее должно являться решением: px — Pixels (пиксели), соответствующие реальным физическим пикселям экранаin и mm — Inches и millimiters (дюймы и миллиметры), физические единицы измеренияpt — Points (пойнты), 1/7. Density- independent Pixels (пиксели, независимые от плотности), абстрактная единица, основанная на плотности физических пикселей и соответствующая 1. Scale- independent Pixels (пиксели, независимые от масштаба), аналог em в web- верстке. Кстати, Microsoft по умолчанию считает, что dp = 1/9.
Хочется заметить, что, используя физические значения, лучшей практикой было бы использование миллиметров, как производную от основной единицы СИ. Наиболее близкой к титулу «универсальной» была бы единица sp/em, если бы мы каким- то образом знали базовое оптимальное значение размера кегля. Собственно интуитивное представление дизайнера об оптимуме породило следующий хак в веб- верстке: Тэгу html присваивается font- size: Nxx, N = значение, а xx = пиксели/миллиметры/дюймы (для планшетов я обычно использую 3mm). Во всех дальнейших размерах элементов используется так называемый rem (root em), всегда равный значению, указанному в font- size тэга html (но не его детей). В тэге body указывается font- size непосредственно текста.
Это элегантное решение позволяет автоматически выстраивать элементы по модульной сетке с размером ячейки, очевидно, равной значению rem. Тем не менее, несмотря на преимущества для верстки, оно имеет все те же ограничения: непонятно, как задать элементу абсолютный относительно зрительного восприятия размер. Для того, чтобы разобраться в этой проблеме, нам придется несколько углубиться в физиологию.
Бионика. Зрительный аппарат появился в результате эволюции простейших фоторецепторов, возбуждающихся от яркого света. При этом природа создала аж четыре варианта: глаза моллюсков, формирующиеся из эпителия, обладающие способностью видеть широкий спектр световых волн, глаза млекопитающих, формирующиеся из нервной ткани и изначально предназначенные для нахождения форм и движения объектов, камерные глаза кубомедуз и фасеточные глаза насекомых. Как признак, зрение оказалось весьма полезным инструментом выживания, и поэтому его эволюция у человека (вместе с самим человеком) длилась всего около полумиллиона лет.
Не вдаваясь в подробности, можно сказать, что глаз представляет из себя биологическую линзу, дно которой выстлано слоем рецепторной матрицы из палочек и колбочек — особых клеток, реагирующих на свет и создающих нервные импульсы, идущие дальше в мозг. Однако следует помнить, что, в сетчатке есть например слой амакриновых клеток которые непосредственно учавствуют в первичной переработке информации, отвечая за латеральное торможение: уменьшение количества импульсов в местах яркого диффузного освещения и увеличение в местах резкого перепада освещенности. Система, таким образом, служит для выделения краев тени, падающей на сетчатку или перемещающейся по ней — именно поэтому черный текст на белом фоне читается лучше. Это одна из причин, по которой нейрофизиологи рассматривают сетчатку и зрительный тракт как участников процесса обработки визуальной информации и, следовательно, как часть мозга. В среднем по вертикали поле зрения человека составляет около 1. При этом бинокулярные и хроматические возможности глаза неоднородны по его площади. Источник. Для того, чтобы определить остроту зрения (аналог разрешения камеры), используются таблицы Снеллена — ряды букв разного кегля, где размер и ширина знака подбраны так, чтобы стянуть угол в 1 минуту дуги на определенном расстоянии.
При этом нормой считается зрение, при котором человек различает буквы в шестой строке с расстояния 6 метров, что равняется 5 минутам дуги. В научных исследованиях принято применять кольца Ландольта, так как это позволяет более объективно оценивать данные, без погрешности на узнаваемость типографических знаков и шрифт. В России кольца Ландольта адаптированы С.
Головиным, а таблица Снеллена учеником Головина Д. Сивцевым. Психооптик Гарольд Блэквел выразил понятие о разрешении глаза как углового параметра функции светлости и контраста. Его исследования показали, что этот угол равен приблизительно 0.
Современные исследования ясности зрения оперируют понятием цикл на градус (под циклом понимается черно- белая пара линий) и предлагают значение 7. Опять же, ввиду минимальной ширины цикла в 2 пикселя, мы видим схожие 0. Учитывая угловое пространство глаза, путем простого вычисления 1.