Единицы измерения в iOS и Android
Разработать и оптимизировать отображение сайта на мобильных устройствах — обязательное условие процесса создания сайта в наше время. Мир изменился, новое поколение уже не представляет интернет без мобильных устройств. И вновь очень важно учитывать скорость загрузки контента. Да, широкополосные 100 мбит ушли коту под хвост, вновь сайты в идеале весят 150 кб (конечно, только мобильные! >: ). Проект начинается с UX (проектирование), иногда с участием бизнес-аналитика. И они должны решить, как продукт будет смотреться на всех устройствах.
Раз уж всё должно масштабироваться под множество различных устройств, то важно понимать возможности масштабирования контента. Начнём с единиц измерения:
Pixel — самый незамысловатый вариант, и теперь уже довольно непрактичный, так как на экране 320×240 кнопка размером 8×8 px станет непростительно маленькой, едва заметной и совершенно не похожей на кнопку.
In/pt — эти единицы измерения не дадут кнопке масштабироваться, и она может попросту не влезть в экран. Технически эта единица измерения очень привязана к плотности пикселей на мобильных устройствах. Pt это точка, а не пиксель, при разрешении «1x» (или @ 1x) 1pt = 1px. При разрешении «2x» (@ 2x) 1pt = 4px, потому что разрешение удваивается по осям X и Y, делая его шириной 2px и высотой 2px. При разрешении «3x» (@ 3x) 1pt = 9px (3px x 3px) и так далее.
Dip – а вот это уже наш клиент. Абстрактные пиксели, не зависящие от плотности экрана. Количество пикселей в физической области экрана, как правило, называют DPI (точки на дюйм). Dp — размеры экранного элемента, sp — размер шрифта. На экране с плотностью размещения пикселей 160 dpi (mdpi) 1px=1dp. Это соотношение изменяется при изменении плотности пикселей на разных устройствах, но соотношение пропорций остается одинаковым.
Описать dpi можно и по другому. Это коэффициент, показывающий сколько пикселей уложится в один сантиметр (дюйм) отпечатка или экрана. Разрешение измеряется в количестве пикселей на 1 дюйм — ppi (pixels per inch)
Попробуем дать более толковое определение независимой точке (DP). Эти единицы помогут ваши макеты сделать независимыми от плотности пикселей на экране. Одна DP точка равна пикселю на 160 dpi (является средней плотностью экрана). Когда приложение запущено, система обрабатывает изменения в масштабе экрана исходя из плотности используемого экрана, и меняет параметры по формуле: 1 пиксель = DP * (DPI/ 160). Экран 240 dpi: 1 dp = 1,5 физических пикселя.
Адаптивная вёрстка.
Целью адаптивного веб-дизайна является возможность просматривать одну и туже веб-страницу со всего многообразия мобильных устройств без серьёзных косяков в отображении сайта. Я просто обозначу основной плюс: адаптивный сайт распознаёт ширину браузера и подстраивается под неё, тогда как мобильные сайты должны распознать устройство, а устройств появляются всё больше и больше, и приходится скрипт определения устройства постоянно обновлять. Для адаптивной вёрстки, надо просто продумать три типа страниц для экранов с шириной 1024х (компьютер), 768х (iPad в вертикальной ориентации) и 320х (iPhone в вертикальной ориентации). Многие приложения имеют двойную ориентацию: горизонтальную и вертикальную. iPhone 4 имеет новый дисплей «retina», который удваивает количество пикселей в пределах одного экрана вплоть до 2048×1536. Нужно делать дизайн изначально для Retina, а затем сжимать до обычного экрана (-50%). Это означает, что вам также необходимо создать 2 набора иконок для ваших макетов. Первоначально иконки будут в 163 ppi, но вам нужно включить иконки с 326 ppi для iPhone 4. Для настройки под различную плотность экрана устройства, мы должны следовать соотношению масштабирования 3:4:6:8, соответственно четырем размерам плотности (для iPhone это легко: соотношение 2:1 между 4 и iPhone 3GS). Иконки традиционно отмечаются @2x в конце названия их файлов, например «home@2x.png».
Сайты дизайнер должен рисовать под следующие размеры:
320 px — Мобильные устройства в портретной ориентации
568 px — IPhone 5
640 px — Небольшие планшеты
768 px — Планшеты в портретной ориентации
1024 px — Планшеты в альбомной ориетации, мониторы в гос. конторах
1280 px и более — настольные компьютеры
Навигация.
Поговорим о кнопках. Теперь данные вводятся не с клавиатуры, и кликнуть мышкой нельзя. Поэтому большие кнопочки лучше маленьких, т.к. в них проще попасть пальцем. Нужно добиться, чтобы движения были естественны для человека, и всегда была видна реакция и изменения. И да, хорошо, если ссылки это кнопки, а не куча синих подчёркнутых строчек, и не надо скупиться на размер шрифта. Но насколько кнопки должны быть большие? 44х44 пикселя для iPhone, 48dp для Android, 36×36 для Windows Phone, Nokia же рекомендует делать кнопку не менее 1 см. Это информация из официальных гайдлайнов, в которых даже единицы измерения разнятся. Придётся поделиться выводом из собственного опыта: кнопка хорошо нажимается, если её размеры 45-75 dp в зависимости от задачи. Минимальная сенсорная область это 7×7 мм, средняя ширина пальца 25 мм. Но рекомендации из гайдлайнов не стоит игнорировать, и если вы понимаете, что не можете сделать исходя из своего опыта, делайте по гайдлайнам (и вы всё ещё помните, что реальный размер зависит от плотности пикселей конкретного устройства : ).
Как вы понимаете, большие кнопки в интерфейсе — меньше кнопок влезет на экран, и это хорошо для мобильных приложений.После эпического нажатия по удобной кнопке, пользователь переходит на какую то страницу. Это важный момент, т.к. человек должен чётко осознавать, где он, откуда он, почему? зачем? кому? что? как вернуться? В айфонах и айпадах используется очень правильный, кинематографичный приём переход справа налево и обратно, что оставляет визуальную связь в структуре окон интерфейса.
Цифры маководам:
iPad: 768 x 1024 pixels, 1024 x 768 pixels, разрешение экрана: 72 ppi, формат файлов: PNG-24. IPad позволяет запускать любые приложения, разработанные под Iphone. Но в этом случае они просто масштабируются под большие размеры экрана. Размер иконки: 72×72px и радиус скругления 12px.
Other iPhone and iPod touch devices: 320 x 480 pixels, разрешение экрана: 72 ppi, размер иконки: 57 x 57 px, радиус скругления 10px, формат файлов: PNG-24.
Графика для AppStore: иконки 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB, важно отразить основную идею), скриншоты для iPhone: 320 x 480 px или 640 x 960 px (.tif, .jpg or .png, 72dpi, RGB), скриншоты для iPad: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB).
Иконках для поиска: размер 29×29px, радиус скругления углов – 5px.
For iPhone 6:
750 x 1334 (@2x) for portrait
1334 x 750 (@2x) for landscape
For iPhone 6 Plus:
1242 x 2208 (@3x) for portrait
2208 x 1242 (@3x) for landscape
Default@2x 640-960
Default-568h@2x 640-1136
Default-667h@2x 750-1334
Default-736h@3x 1242-2208
В итоге фоны должны быть 640×960, 640×1136, 750×1334, 1080×1920;
Иконки делаем следующих размеров: 512×512 (iTunesArtwork), 57×57 (Icon.png), 114×114 (Icon@2x.png), 72×72 (Icon-72.png), 29×29 (Icon-Small.png), 50×50 (Icon-Small-50.png), 58×58 (Icon-Small@2x.png) и 144×144.
В строке меню на MacOS нужно рисовать набор белых/черных и ретиновых/неритиновых файлов в формате ICNS.
Заодно, отвечу на регулярно встречающийся вопрос про модульные сетки: 44, 88, 176 — хорошие значения для проектирования модульных сеток. Разместите кнопки и контент по этой сетке, и всё будет не плохо.
Но не одними айфонами живо мобильное интернет-пространство. Сейчас на рынок выходит все больше и больше мобильных устройств, количество сенсорных экранов увеличивается. Несмотря на то, что мы говорили о дизайне iOS приложении, дизайнерам стоит учитывать и прочие устройства. Чтобы не перерисовывать под каждое устройство сайт, в исходниках необходимо всё в shape layers или vector smart objects, тогда не возникнет серьезных проблем с масштабированием.
Теперь уделим немного внимания Android. Чем отличается iOS и Android? У одного вкладки сверху, у другого — снизу. А ещё всё весьма запутанно с единицами измерения. Для android существует четыре основные плотности экрана: LDPI (низкий), MDPI (средний), HDPI (высокий), и XHDPI (дополнительный высокий, начиная с Android 2.2), они означают, сколько пикселей может поместиться на один дюйм. Как минимум, дизайнер на выходе должен предоставить вам MDPI и HDPI наборы графики для любого смартфон-приложения (я обычно ограничиваюсь MDPI, HDPI и XHDPI).
Постараюсь не вдаваться в подробности, а сразу привести нужные цифры. У android имеются следующие плотности экрана:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Как показал опыт, имеется два наиболее популярных соотношения сторон:
а) 1.77 (480×854, 960×540, 1280×720 )
б) 1.6 (480×800, 1280х800)
А вот размеры шрифтов зачастую бывают весьма непривлекательными
17sp:
ldpi — 12.75px
mdpi — 17px
hdpi — 25.5px
xhdpi — 34px
23sp:
ldpi — 17.25px
mdpi — 23px
hdpi — 34.5px
xhdpi — 46px
SP это scaled points, привязаны к физическим единицам. Шрифт должен быть одинакового размера и на вашем телефоне, и на стареньком телефоне с маленьким экраном, и на хорошем дорогом планшете. Размер шрифта диктуется не размером экрана — это классическая ошибка.
Ниже приведу рекомендации Google. Именно эти значения помогут вам избегать дробных чисел при ресайзах.
- mdpi – 24
- hdpi – 36
- xhdpi – 48
- xxhdpi – 72
- xxxhdpi – 96
При нарезке важна только плотность: dp = 1px в mdpi. Со шрифтами ситуация аналогична, но единицы измерения sp. Ритм 48 dp. А такие размеры использую я. Вам решать, какие размеры использовать для вашего мобильного проекта.
- mdpi – 36
- hdpi – 54
- xhdpi – 72
- xxhdpi – 108
- xxxhdpi – 144
Как это ресайзить? Вот пример:
24 × 24 для экранов низкой плотности (т.е. × 0,75) это ldpi;
32 × 32 для экранов средней плотности (наш базовый 1 × 1 ) это mdpi;
48 × 48 для экранов с высокой плотностью (× 1,5) это hdpi;
64 × 64 для экранов очень высокой плотности (× 2,0) это xhdpi;
И для прочей информации:
low-density (ldpi) экран (~120dpi)
medium-density (mdpi) экран (~160dpi) – базовое.
high-density (hdpi) экран (~240dpi).
extra high-density (xhdpi) экран (~320dpi).
А когда даем нарезанной графике какие то имена, то придерживаемся правил: нижний регистр, без пробелов, без дефисов, найн-патч с «.9» перед расширением. Подчёркивания использовать можно.
На данный момент актуально создавать и xxhdpi-нарезку, начиная с 2014 года я не отдаю проектов без такой плотности экрана.
Соответственно, формулы для получения размеров: 160 это mdpi.
ldpi
Vertical = 426 * 120 / 160 = 319.5px
Horizontal = 320 * 120 / 160 = 240px
Сколько dp на экране android
При разработке приложений под Android мы можем использовать различные типы измерений:
- px : пиксели текущего экрана. Однако эта единица измерения не рекомендуется, так как реальное представление внешнего вида может изменяться в зависимости от устройства; каждое устройство имеет определенный набор пикселей на дюйм, поэтому количество пикселей на экране может также меняться
- dp : (density-independent pixels) независимые от плотности экрана пиксели. Абстрактная единица измерения, основанная на физической плотности экрана с разрешением 160 dpi (точек на дюйм). В этом случае 1dp = 1px. Если размер экрана больше или меньше, чем 160dpi, количество пикселей, которые применяются для отрисовки 1dp соответственно увеличивается или уменьшается. Например, на экране с 240 dpi 1dp=1,5px, а на экране с 320dpi 1dp=2px. Общая формула для получения количества физических пикселей из dp: px = dp * (dpi / 160)
- sp : (scale-independent pixels) независимые от масштабирования пиксели. Допускают настройку размеров, производимую пользователем. Рекомендуются для работы со шрифтами.
- pt : 1/72 дюйма, базируются на физических размерах экрана
- mm : миллиметры
- in : дюймы
Предпочтительными единицами для использования являются dp. Это связано с тем, что мир мобильных устройств на Android сильно фрагментирован в плане разрешения и размеров экрана. И чем больше плотность пикселей на дюйм, тем соответственно больше пикселей нам будет доступно:
Используя же стандартные физические пиксели мы можем столкнуться с проблемой, что размеры элементов также будут сильно варьироваться в зависимости от плотности пикселей устройства. Например, возьмем 3 устройства с различными характеристиками экрана Nexus 4, Nexus 5X и Nexus 6P и выведем на экран квадрат размером 300px на 300px:
В одном случае квадрат по ширине будет занимать 40%, в другом — треть ширины, в третьем — 20%.
Теперь также возьмем квадрат со сторонами 300х300, но теперь вместо физических пикселей используем единицы dp:
Теперь же размеры квадрата на разных устройствах выглядят более консистентно.
Для упрощения работы с размерами все размеры разбиты на несколько групп:
- ldpi (low) : ~120dpi
- mdpi (medium) : ~160dpi
- hdpi (high) : ~240dpi (к данной группе можно отнести такое древнее устройство как Nexus One)
- xhdpi (extra-high) : ~320dpi (Nexus 4)
- xxhdpi (extra-extra-high) : ~480dpi (Nexus 5/5X, Samsung Galaxy S5)
- xxxhdpi (extra-extra-extra-high) : ~640dpi (Nexus 6/6P, Samsung Galaxy S6)
Установка размеров
Основная проблема, связанная с размерами, связана с их установкой в коде Java. Например, некоторые методы принимают в качестве значения физические пиксели, а не density-independent pixels. В этом случае может потребоваться перевести значения из одного типа единиц в другой. Для этого требуется применить метод TypedValue.applyDimension() , который принимает три параметра:
public static float applyDimension(int unit, float value, android.util.DisplayMetrics metrics)
Параметр unit представляет тип единиц, из которой надо получить значение в пикселях. Тип единиц описывается одной из констант TypedValue :
- COMPLEX_UNIT_DIP — dp или независимые от плотности экрана пиксели
- COMPLEX_UNIT_IN — in или дюймы
- COMPLEX_UNIT_MM — mm или миллиметры
- COMPLEX_UNIT_PT — pt или точки
- COMPLEX_UNIT_PX — px или физические пиксели
- COMPLEX_UNIT_SP — sp или независимые от масштабирования пиксели (scale-independent pixels)
Параметр value представляет значение, которое надо преобразовать.
Параметр metrics представляет информацию о метрике, в рамках коорой надо выполнить преобразование.
В итоге метод возвращает преобразованное значение. Рассмотрим абстрактный пример. Например, нам надо получить из 60dp обычные физические пиксели:
int valueInDp = 60; int valueInPx = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, valueInDp, getResources().getDisplayMetrics());
В качестве третьго аргумента передается вызов метода getResources().getDisplayMetrics() , который позволяет получить информацию о метрике, связанной с текущим устройством. В итоге мы получим из 60dp некоторое количество пикселей.
Как узнать сколько px равен переданный в xml значение в dp?
Вот написал программу, которая автоматический изменяет размеры View элементов исходя из того, на каком устройстве программа запускается. Появилась проблема в связи с правильным изменением размеров этих элементов в автоматическом режиме при определенных ситуации, и из за того, что я изначально все значения передал в dp а не в px — появились лишние проблемы. Вот к примеру. Превью выполняется в режиме width:height (1080:1920); 420dpi Как узнать, сколько пикселей равна скажем width одного View элемента, если я дал значение скажем 100dp? Или как узнать сколько dp равны width и height всего экрана? Естественно, 420dpi не может означать что и width и height равны 420dp. Это даже на превью без каких либо расчетов видно. Прочитал конечно это инфо в startandroid
- low (ldpi) = 0,75
- medium (mdpi) = 1
- tv (tvdpi) = 1,33
- high (hdpi) = 1,5
- extra high (xhdpi) = 2
Но как мне понять как сделать правильный расчет? К примеру как узнать, в каком режиме из выше перечисленных вариантов отображается превью и результат во время запуска в моем телефоне?
Отслеживать
задан 1 апр 2020 в 10:53
Ruben Kubalyan Ruben Kubalyan
593 1 1 золотой знак 5 5 серебряных знаков 15 15 бронзовых знаков
Будет ли эта информация вам полезна?
1 апр 2020 в 10:59
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы можете получить значение в dp, зная значение в пикселях:
final float scale = getContext().getResources().getDisplayMetrics().density; //множитель int px = . ; //известное значение в пикселях int dp = (int) ((px - 0.5f) / scale); //полученное значение в dp Очевидно, зная значение в dp, можно получить значение в px:
int px = (int) ((dp * scale) + 0.5f) Варианты превью в студии:
Единицы измерения в iOS и Android. PX,DP, PT, SP, DPI и PPI
Для удобства все координаты в figma представлены в px, а фреймы имеют размеры соответствующие базовому(Android) или логическому(iOS) разрешению экрана устройства. Это позволяет не беспокоиться о последующем представлении данных. Нужно только знать под какую модель iPhone требуется дизайн, нужна ли адаптация под другие модели и, если потребуется, с каким коэффициентом плотности (@x1,2,3,4) нужно подготовить ассеты. При работе с Android системами обычно выбирается базовый экран 360×640, для адаптации под удлиненные экраны 18:9 можно использовать размер фрейма 360×720.
В большинстве случаев UI-дизайнеру этого достаточно, но если вы хотите лучше понимать, что происходит с вашим дизайном после сдачи макетов и уверенно оперировать терминологией, то прочитайте эту статью.
Android
DPI устройства задаёт разрешение изображения всего экрана, который будет показан на устройстве. Используется для масштабирования интерфейса. Значение DPI присвоено устройству и задается программно. При масштабе интерфейса по умолчанию в 100% значения DPI и PPI равны.
В Android для различения значений вместо PPI изображения стали использовать DPI, что, привело дизайнеров к еще большей запутанности.
Один dp равен одному пикселю на экране с плотностью 160 DPI. Масштабируемые пиксели sp это то же, что dp, но для шрифтов. Они нужны для того, чтобы система или пользователь могли изменить масштаб шрифта без изменения размеров интерфейса. По умолчанию значение sp равно dp.
Экран с плотностью 160 DPI взят за основу и ему присвоено значение плотности mdpi. В figma такой экран соответствует фрейму 360х640.
На данный момент существует несколько значений плотности для поддержки экранов от 120 до 640 DPI. Их так же называют квалификаторы плотности. Моделей матриц экранов очень много, их плотность редко совпадает с квалификатором, так что берется приближенное значение.
Квалификатор плотности сообщает во сколько раз нужно увеличить детализацию ассетов (@1x, @2x, @3x, @4x). Этот множитель называют коэффициентом масштабирования.
Единицы измерения Android — там есть формулы для расчета. перевод
iOS
Каждому устройству с iOS присвоено свое логическое разрешение. Оно приблизительно соответствует физическому разрешению экранов первых моделей iPhone и iPad. Логическое разрешение используется так же, как базовое разрешение mdpi в Android.
Логическое разрешение обозначается указанием ширины и высоты экрана в поинтах (pt).
Для размеров шрифта так же, как в Android, используется sp.
Pt это еденицы координат. Они используются только для размещения элементов интерфейса и никак не отображаются для пользователя.
Коэффициент масштабирования (ретина-коэффициент) в iOS присваивается каждой новой модели в зависимости от характеристик экрана.
Render
Устройство на основе верстки и ассетов выполняет отрисовку и преобразует её в пиксели изображения экрана. Этот процесс называют растеризация.
Downscale
Прежде чем полученное изображение можно будет отобразить, устройству необходимо уменьшить его разрешение до разрешения матрицы дисплея. Полученные таким образом пиксели отображаются на экране устройства пользователя.
Все это может показаться сложным и нам кажется, что так оно и есть, раз уж этот вопрос неизменно поднимается на различных форумах, посвященных дизайну. Если после прочтения статьи вы все же не до конца разобрались в вопросе — не беспокойтесь, если вы опираетесь на гайдлайны и правильно используете современные инструменты UI дизайна, тогда вам не обязательно обладать техническими знаниями о том, как ваш дизайн будет работать за пределами Figma.