Ръководство на дизайнера за DPI – Преобразуване в реални размери на света

Разкриване на информация Вашата поддръжка помага за поддържането на сайта! Печелим такса за препращане за някои от услугите, които препоръчваме на тази страница.


В мрежата DPI означава пиксели на плътност на инч. PPI просто означава пиксели на инч. (Въпреки че DPI произхожда от индустрията за печат, той често се използва вместо PPI в мрежата поради модернизираната си дефиниция.)

Независимо от предпочитания от вас вариант, трябва да разберете как настройките на DPI влияят върху начина, по който графиката ви ще се показва на екрана, ако проектирате уебсайтове или приложения.

Неофициалният стандарт за графичен дизайн за мрежата е 72 DPI. Това беше стандартната DPI настройка на Photoshop през дните на първия компютър на Mac, 128K. (Ето хубаво сравнение на плътността на пикселите от 128K спрямо iPad.)

Използвайки 72 DPI, печатът беше по-надежден. И 72 DPI са останали при нас, правилно или погрешно.

На практика много от устройствата, които използваме, имат значително по-висок DPI от 72, което създава много предизвикателства. За щастие има известни конвенции, които ще ви помогнат при разработването на вашия дизайн.

Защо има значение резолюцията на екрана

Представете си, че имате две устройства, които са с еднакъв физически размер. Устройство 1 има екранен дисплей от 72 DPI. Устройство 2 има дисплей от 144 DPI.

Ако проектирате изображение в 72 DPI, то ще се покаже точно в размера, който сте въвели на екрана на 72 DPI. Но на 144 PPI екрана, това ще бъде половината от размера, който сте възнамерявали, защото дисплеят има два пъти повече пиксели.

Запомнете: физическият размер изобщо няма отношение към DPI, с изключение на това, че по-евтините екрани са по-евтини, така че те имат по-висок DPI от големите екрани. На днешните устройства има огромна разлика в DPI, дори и за устройства с подобен размер:

  • Apple Cinema Display: 99
  • Microsoft Surface: 148
  • Amazon Kindle Fire 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • BlackBerry Passport: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Можете незабавно да разберете DPI на вашия екран, за да видите как се сравнява.)

Ако не бяхте правилни за това в дизайна, вашата 72 DPI графика щеше да е мъничка на Sony Xperia Z5 Premium. Ето защо трябва да знаете как да се справите с огромни разлики в разделителната способност на пикселите.

Не разчитайте на брандиране или маркетинг, за да опишете разделителната способност на дисплея по някакъв последователен начин. Например, марката Retina на Apple описва много различни плътности на дисплея, в зависимост от устройството, което гледате. Най-ниският дисплей на Retina е 218 DPI, а най-високият е над 400.

За да разработите последователни дизайни, се нуждаете от различен подход.

Използване на Dp и точки за просто мащабиране

След като разберете мерните единици в iOS и Android, можете напълно да пренебрегнете измерването на пикселите за вашия дизайн.

Вместо това можете да използвате концепцията за виртуални пиксели или CSS пиксели:

Това е малко по-различно в Android vs iOS:

  • dp означава независим от пиксела устройство или независим от плътността пиксел. Използва се на Android. Едното dp е 1/160 инча.
  • Точките са еквивалент за iOS. Една точка е 1/163 от инч.

Тъй като има фина разлика в плътността, системите са много сходни.

Ако проектирате с dp измерване за оформление на приложение за Android, не е необходимо да знаете точно какви са измерванията за всяко устройство, което ще показва това оформление. Устройството познава собствения си умножител и го прилага към dp стойността, така че автоматично ще представи вашия дизайн в предвидения размер. Има повече неща за това в документацията за програмисти за Android.

Ако проектирате с помощта на точки за iOS, всичко, което трябва да знаете, е, че някои устройства на Apple показват точка като квадрат с 1 пиксел, някои я показват като квадрат от 4 пиксела, а някои я показват като квадрат с 9 пиксела. С други думи, измерването на точката подлежи на умножител 1, 2 или 3, за да отговаря на необходимата разделителна способност на екрана за всяко iOS устройство.

Използване на квалификатори за плътност на екрана на Android

Всяко Android устройство се категоризира в категории или кофи според плътността на екрана. Има хиляди различни устройства, така че тази концепция помага да се опрости подготвителната работа на дизайнера чрез стесняване на устройствата, от които се нуждаят, за да създават изображения за.

Когато създавате изображение за Android, като икона на приложение, има шест квалификатори, за които трябва да знаете:

  • Ниска (LDPI): всяко устройство до 120 DPI, множител от 0,75
  • Средно (MDPI): между 120 и 160 DPI, умножител на 1 (базова плътност)
  • Висока (HDPI): между 160 и 240 DPI, умножител на 1.5
  • Изключително висок (XHDPI): 240 до 320 DPI, умножител на 2
  • Екстра-екстра-висок (XXHDPI): 320 до 480 DPI, умножител на 3
  • Extra-extra-extra-high (XXXHDPI): 480 до 640 DPI, умножител на 4.

Когато създавате изображения или икони на приложението си, просто ги поставете в папки според създадените от вас кофи. Заедно с dp измерванията за създаденото от вас оформление, Android автоматично ще избере най-добрите изображения за работата.

Проектиране за докосване

Има един финал в пъзела на DPI и това е разликата между сензорните екрани и обикновените дисплеи. Въпреки че не е пряко свързано с DPI, е добре да се помисли.

Графиката очевидно изглежда еднакво на сензорни екрани или без сензорни екрани, като се предполага, че имат една и съща разделителна способност на екрана. Но има много важна разлика: хората не ги навигират по същия начин. Докосването на пръст е много по-малко прецизно от показалеца на мишката.

Целите за докосване са 44x44pt в iOS и 48x48pt квадрат за Android. Ще трябва да увеличите цялата си навигация и да увеличите разстоянието около нея, за да избегнете потенциал за грешки.

ресурси

  • Преобразуване на DP в PPI: Ръководство от уебсайта на Android Developer
  • Pixplicity DP към PPI конвертор: Отличен калкулатор и конвертор
  • Съвети за дизайнери: Научете повече за квалификациите за плътност на Android и изчисленията на dp
  • BBC Mobile Accessibility Guide on Touch Target Size: Тази статия предлага отлични съвети за най-добри практики за проектиране на достъпни мобилни оформления в HTML
  • Указания за дизайн на iOS: Обхваща разделителна способност, прекъсване на изображението, икони, типография, стандартни компоненти на оформлението и автоматични ефекти на иконите.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map