Я только что взял проект по дизайну приложений для Android. Я начинаю узнавать о дизайне приложений, и эти вещи с dpi действительно выбрасывают меня за борт. Мои основные опасения:
1) Что такое Dpi(я не программист поэтому знаний в этой области 0)
Как меняется Dpi от устройства к устройству. Пожалуйста, объясните на примерах. Я начал проектировать для экрана Nexus 5 (1020x1920), который также является шаблоном дизайна приложения по умолчанию в PS.
а) Дело в том, что Google заявил, что nexus5 - это xxhdpi, поэтому я использовал значки 48dp из их ресурсов значков, которые огромны.
б) Как масштабируются значки в зависимости от dpi и т. д. и какой должен быть правильный размер для nexus5
в) Обычно я разрабатываю веб-сайты, поэтому застрял на пикселях. Поэтому, пожалуйста, объясните, что касается пикселей (или любого другого способа, который лучше всего подходит для дизайна приложений)
2) Размеры экрана и рекомендации
Проведя небольшое исследование, я понял, что дизайн должен адаптироваться к разным размерам экрана. Итак, с чего мне начать и что является наилучшей практикой. Пока я понял, что 5-дюймовые экраны лидируют, за ними следуют 5,5-дюймовые SG Notes и т. д. В моей стране максимально используется 5-дюймовый экран. Пожалуйста, предложите.
3) Типографика. Это огромная проблема. Какой размер шрифта лучше всего подходит для (1020x1920) и (720x1280) или любого другого размера, который вы скажете.
а) Каков стандартный размер заголовка/панели действий.... Заголовок основной карточки и обычный текст в карточках. б) Как sp меняется с устройством на устройство (dpi и т. д.). И как посчитать эти вещи в пикселях.
Я знаю, что вопросов много, но я действительно застрял. Если я закончу этот проект... это кардинально изменит мою дизайнерскую карьеру.
Пожалуйста помоги
Спасибо в рекламе.
Вы задаете здесь сразу несколько вопросов — слишком много, чтобы на все из них можно было ответить одним ответом. Здесь я ограничусь объяснением того, что, по моему мнению, является основным источником вашей путаницы: разные единицы измерения.
DPI — это количество точек на дюйм (это можно легко найти — это даже в большинстве словарей), которое используется для определения плотности сканеров, принтеров и других «реальных» вещей. Для экранов традиционной единицей измерения является PPI, пиксели на дюйм (хотя некоторые, например, страница документации Android, ссылка на которую приведена ниже, несколько ошибочно используют DPI и для экранов).
DP — это независимые от плотности пиксели , единица измерения, созданная для учета разной плотности (в PPI) разных типов экранов.
«Плотность», как следует из названий DPI и PPI, относится к тому, сколько пикселей экран данного типа содержит физическое пространство в один дюйм, т. е. к физическому размеру каждого отдельного пикселя.
Если у вас есть экран с физическим размером 5 дюймов на 5 дюймов (давайте просто предположим, что он прямоугольный для простоты вычислений) и плотностью 96 пикселей на дюйм (достаточно распространено на старых мобильных экранах), весь экран состоит из (5 x 96 пикселей). ) x (5 x 96) пикселей = 480 x 480 пикселей = 230 400 пикселей. Если вы сделаете прямоугольник шириной 480 пикселей и высотой 120 пикселей, он заполнит всю ширину экрана и одну четвертую его высоты.
Если у вас более новый экран того же физического размера, но с меньшими пикселями (326 пикселей на дюйм), это число резко изменится: (5 x 326) x (5 x 326) пикселей = 1980 x 1980 пикселей = 7 762 392 000 пикселей. Это примерно в 33 690 раз больше пикселей в том же физическом пространстве. Очевидно, что если вы посмотрите на тот же блок размером 480 x 120 пикселей, что и раньше, на этом экране, он займет менее одной четверти ширины экрана и только около одной шестнадцатой высоты: он будет крошечным .
Независимые от плотности пиксели — способ обойти это, по крайней мере, частично. Они основаны на конкретной плотности 160 пикселей на дюйм, игнорируя реальную плотность экрана. Давайте снова используем тот же блок на тех же двух экранах, но на этот раз определим его в dp вместо px. Чтобы рассчитать, насколько большой блок будет отображаться на экранах, нам теперь нужно найти соотношение между воображаемым базовым экраном (160 пикселей на дюйм) и физическим экраном: маленький экран с разрешением 96 пикселей на дюйм имеет соотношение 160/96 ≈ 1,67 ( 1 ²⁄₃), а у большого с 326 ppi соотношение 160/326 ≈ 0,5. Размер блока, который будет отображаться на экранах, равен его размеру в dp, деленному на это соотношение:
Если мы возьмем эти размеры как относительные к размеру всего экрана, мы увидим, что теперь они намного ближе друг к другу:
Таким образом, если определение размера поля в абсолютных пикселях сделало его 100% x 25% на одном экране и 25% x 6% на другом экране (огромная разница), определение его в dp вместо этого делает их довольно близкими к тому, чтобы казаться одинакового размера на обоих экранах.
Почти то же самое можно было бы сделать, определив его в процентах, но, как вы, вероятно, теперь знаете из «обычного» веб-дизайна, у процентов есть свои проблемы и предостережения; независимые от плотности пиксели — это способ получить более однородный вид из абсолютной единицы измерения.
При работе с типографикой вы должны использовать единицу SP ( независимые от масштаба пиксели ) вместо DP. SP работает так же, как DP, но они также учитывают предпочтения пользователя в отношении размера текста. Таким образом, если пользователь установил базовые настройки на своем телефоне, чтобы всегда использовать более крупный текст (скажем, 120% от нормального размера), текст, установленный в 12sp, будет 12dp x 120% = 14,4 dp; то есть:
Чтобы понять, что они собой представляют, PPI и DPI абсолютно одинаковы, точки или пиксели на дюйм. PPI — это цифровая версия DPI.
Что вам нужно понять, так это то, что точка или пиксель не имеют физического размера. Это может быть 0,0000001 мм 2 или 1 м 2 . Когда вы подходите слишком близко к большому наружному цифровому рекламному щиту, вы действительно можете видеть пиксели, и они довольно большие.
Если файл имеет разрешение 72 DPI/PPI, это означает, что на каждый дюйм приходится 72 точки или пикселя. Чем больше точек/пикселей на дюйм, тем выше будет качество изображения.
Теперь, если я правильно помню, у моего Nexus 5 экран 442 PPI. Это означает, что они разместили 442 пикселя на каждом дюйме. Когда вы смотрите на изображение с разрешением 442 PPI на стандартном экране ноутбука с разрешением 72-96 PPI при 100% увеличении, оно будет почти в 5 раз больше, чем изображение со стандартным разрешением 96 PPI, потому что оно имеет почти в 5 раз больше пикселей.
Итак, суть в том, что для экранов более высокого качества вам нужна более качественная (крупная) графика.
Если кто-то еще застрял там, где я... Я нашел обходной путь. Вот что я сделал, чтобы обойти вычисление пикселей.
1) Создайте новый файл в фотошопе с размерами вашего устройства. у меня это 1080x1920 для nexus5.
3) Перейдите по этой ссылке: https://www.youtube.com/watch?v=8f3h7id7EN0
и обязательно снимите флажок передискретизировать, если вы используете Photoshop cc. или вы измените размеры вашего документа.
4) Теперь все можно измерять в дп.
Я все еще заканчиваю дизайн. Я сообщу, если это работает на самом деле. До сих пор панель действий, строка состояния и панель навигации соответствовали друг другу с точки зрения измерения.
Всем, кто ответил... Спасибо за терпение и руководство. Спасибо вам всем.
Йорик
полмз
полмз
тушар бозе