Керівництво для дизайнера DPI



Це керівництво — початковий матеріал про крос-DPI і кроссплатформенном дизайні для початківців і середніх дизайнерів, які бажають дізнатися про нього з самого початку або отримати більше знань. Без складних математичних і незрозумілих діаграм, тільки безпосередні пояснення, впорядковані в невеликих розділах, для розуміння і застосування їх безпосередньо до вашої дизайнерської роботи.

Автор — Sebastien Gabriel.

Я не знаю всього, так що, якщо на вашу думку я десь помиляюся або вам потрібно уточнити щось, або у вас є пропозиції або питання для покращення даного посібника, надішліть листа (на англ) sgabriel.contact@gmail.com. Ви також можете знайти на мене Twitter, G+ або Facebook.

Що таке DPI і PPI
DPI (Dots Per Inch) «точок на дюйм» є мірою просторової щільності точок, спочатку використовувалася в друку. Це кількість крапель чорнила, що ваш принтер може вмістити в один дюйм. Менше DPI дає менш детальне зображення.

Ця концепція застосовується до комп'ютерних екранів під назвою PPI (пікселів на дюйм). Той же принцип: підраховується кількість пікселів, які екран може відображати на дюйм. Назва DPI також використовується в екранах.

У комп'ютерів з Windows за замовчуванням 96 PPI. Mac використовує 72, хоча це значення не було точним з 80-х. Звичайні, не retina ПК (Mac також будуть мати від 72 PPI мінімум до близько 120 максимум. Проектування з PPI між 72 і 120 забезпечить вашій роботі скрізь приблизно те ж саме співвідношення розмірів.

Ось прикладної приклад: екран Mac Cinema 27 дюймів має 109 PPI, що означає, що він відображає 109 пікселів на дюйм екрана. Ширина з рамкою є 25,7 дюймів (65 см). Ширина фактичного екрану складає приблизно 23,5 дюйма, так 23,5 * 109 ~ 2560, що робить фізичний дозвіл екрану 2560x1440px. *Я знаю, що 23,5 * 109 не одно точно 2560. Це насправді +23,486238532 дюймів. Було б точніше пікселів на сантиметр, але ви мене зрозуміли.



Вплив на ваш дизайн
Припустимо, ви малюєте синій квадрат 109 * 109 пікселів на екрані, обумовленому вище. Цей квадрат буде мати фізичний розмір на екрані 1 * 1 дюйм. Але якщо ваш користувач має екран з 72 PPI, синій квадрат буде виглядати фізично більше, оскільки для 72 PPI екрану знадобиться приблизно півтора дюйма, щоб відобразити ваш синій квадрат 109px. Дивіться нижче моделювання ефекту.



Запам'ятайте: залишивши в бік розбіжності кольору і дозволу, майте на увазі, що всі будуть бачити ваш дизайн по різному. Ви повинні прагнути до найкращого компромісу і створювати для найбільшого відсотка користувачів. Не думайте, що користувач такий же екран, як у вас.

Дозвіл екрану (і рідне дозвіл)
Дозвіл екрану може мати величезний вплив на те, як користувач сприймає ваш дизайн. На щастя, так як РК-монітори замінили ЕПТ, тепер користувачі, як правило, мають рідні дозволу екрану з хорошим співвідношенням розмір екрану до PPI.

Дозвіл визначає кількість відображуваних на екрані пікселів (наприклад: 2560 * 1440px для Cinema екрану 27 дюймів) 2560 ширина, висота 1440. Тепер, звичайно, коли ви знаєте, що означає PPI, ви розумієте, що це не може бути одиницею виміру фізичного розміру. Ви можете мати екран 2560x1440 розміром з вашу стіну і інший розміром з вашу голову.

Сучасні РК-монітори мають дозвіл, визначене за замовчуванням, воно ж рідне, яке буде обробляти точне число пікселів, яке екран здатний відображати. У старих ЕПТ-моніторів трохи по-іншому, але так як їх можна вважати мертвими, давайте не вдаватися в деталі (і не зачіпати моє часткове розуміння старих добрих телевізорів).

Візьмемо наш 27 дюймовий Cinema екран, який може відображати 109 PPI в рідному дозволі 2560 * 1440 пікселів. Якщо зменшити дозвіл, елементи будуть здаватися більше. Зрештою, у вас тільки 23,5 горизонтальних дюйма для заповнення віртуально меншим числом пікселів.



Я сказав віртуально, тому що в цьому випадку так і буде. Екран має рідне дозвіл 2560 * 1440 пікселів. Якщо дозвіл зменшується, то всі пікселі також відображаються в 109 PPI. Щоб заповнити цей простір і весь екран, ваша ОС буде все розтягувати, ваш GPU / CPU візьме всі пікселі і обчислить їх з новим співвідношенням.

Якщо ви хочете зробити дозвіл 1280 * 720 (половина ширини, половина висоти від попереднього) на 27 дюймів, то вашому GPU, щоб заповнити екран, доведеться імітувати вдвічі збільшений піксель. Який буде результат? Так ось — розмиття. Поки поділ на два відносини сторін буде виглядати досить добре, з-за простого дільника, але якщо ви захочете 1/3 або 3/4 від відносини сторін, то у вас будуть числа із знаками після коми, і ви НЕ МОЖЕТЕ розділити піксель. Дивіться приклад нижче.



Примітка:зліва: візуалізація вікна OSX в рідному дозволі (1400*900px): праворуч візуалізація вікна OSX в симулированном меншому дозволі (1024*640px retina).

Розглянемо нижче інший приклад. Візьмемо лінію в 1 піксель на екрані з роздільною здатністю. Тепер зробимо дозвіл на 50% менше. Для заповнення екрану CPU доведеться генерувати 150% зображення, множачи все на 1,5, 1 * 1,5 = 1,5, але ви не можете поділити пікселі вдвічі. А буде наступне: він заповнить навколишні пікселі часткою кольору (by a fraction of the color), створюючи розмиття.



Примітка: зліва лінія товщиною в 1 піксель на будь-якому дозволі за замовчуванням, праворуч лінія товщиною в 1 піксель в меншому на 150% дозволі.

Тому, якщо у вас є Retina Macbook Pro і ви хочете змінити дозвіл, він покаже вікно нижче, даючи вам знати (на скріншоті нижче) як це дозвіл буде «виглядати» 1280 * 800px. Він використовує досвід сприйняття користувачем дозволу екрану, щоб виразити відношення розмірів.



Це дуже суб'єктивне уявлення, тому що він використовує дозвіл пікселя в якості одиниці фізичного розміру, але це правда, принаймні, з їх точки зору.

Запам'ятайте: якщо ви хочете завжди бачити свій дизайн (або будь-який дизайн) пиксельно ідеально, ніколи не використовуйте для вашого екрану дозвіл, відмінне від рідного. Так, вам може бути більш зручно з меншим співвідношенням, але коли справа доходить до пікселів, вам хочеться бути як можна більш точним. На жаль, деякі люди використовують дозвіл як спосіб, щоб краще бачити, що відбувається на екрані (особливо на робочому столі), коли їм слід було б використовувати параметри спеціальних можливостей. Від цього ваш дизайн, як і раніше буде виглядати погано, але з цієї точки зору, користувачі шукають поліпшення читаності, а не блиску.

Що таке 4k
Можливо, останнім часом ви багато чули про термін 4K (принаймні, коли я писав про це, на початку 2014-го року), 4k досить модна тема. Щоб зрозуміти, що це таке, давайте спочатку зрозуміємо, що означає «HD».

Обережно, це сильне спрощення. Я буду говорити лише про найбільш поширених дозволах. Існує різні категорії HD. Термін HD застосовне до будь-яких дозволів, починаючи з 1280x720px або 720p для горизонтальних ліній 720 пікселів. Також деякі можуть називати це дозвіл SD (standard definition; стандартне визначення).

Термін Full HD застосовується до екранів 1920x1080px. Більшість телевізорів і телефонів високого класу (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) використовує це дозвіл.

4K починається з 3840x2160 пікселів. Його також називають Quad (четверний) HD і може називатися UHD від Ultra (понад) HD. Простіше кажучи, на екрані 4K ви можете вкласти 4 1080p, в понятті числа пікселів. Інше дозвіл 4K — 4096x2160. Це трохи більше і використовується для проекторів та професійних камер.



Що станеться, якщо я підключу 4K дисплей до комп'ютера
Сучасні ОС не масштабують 4K, це означає, що якщо ви підключите дисплей 4K до Chromebook або MacBook, він буде використовувати ресурси з найбільшою DPI, у цьому випадку 200% або @ 2x (у два рази більше) і показувати їх в звичайному співвідношенні. Від цього все буде добре виглядати, але маленьким.

Гіпотетичний приклад: якщо ви підключите 12 дюймовий 4K екран до комп'ютера з 12-дюймовим екраном високого дозволу (2x), все буде виглядати в два рази менше.

Запам'ятайте:
  • 4k — це 4 рази Full HD;
  • Якщо використовується ОС працює з 4K, але не масштабує його, це означає, що в 4K ще немає певних графічних ресурсів;

  • На сьогоднішній день жоден телефон або планшет не використовує 4K.


Герці монітора
Тут ми трохи відпочинемо від PPI і дозволу екрану. Можливо, ви бачили, що біля налаштувань дозволу для екрану є значення Гц монітора. Воно не має нічого спільного з PPI, але на всяк випадок, якщо вам цікаво, Герц монітора — або частота оновлення — це одиниця швидкості, з якою ваш монітор буде відображати фіксоване зображення або кадр за секунду часу. Монітор з 60 Гц зможе відображати 60 кадрів в секунду. Монітор 120 Гц — 120 кадрів в секунду і т.д.

У контексті інтерфейсу користувача значення Герц(Гц) буде визначати, наскільки гладкою і деталізованої буде виглядати ваша анімація. Більшість екранів працюють на 60 Гц. Зверніть увагу, що кількість кадрів, які відображаються в секунду, також залежить від обчислювальної та графічної потужності пристрою. Підключення екрану 120 Гц до Atari 2600 буде абсолютно марним.

Для кращого розуміння погляньте на приклад нижче. T-Rex йде з точки А в точку B з однаково рівним і швидкому і кроком на 60 Гц і 120 Гц екрані. Екран з частотою 60 кадрів в секунду здатний відображати 9 кадрів під час анімації, в той час як з 120 кадрів в секунду відображає в тому ж відрізку часу логічно вдвічі більше кадрів. Анімація буде виглядати більш гладко на екрані 120 Гц.



Запам'ятайте: Деякі люди можуть сказати, що людське око не може побачити більше 60 кадрів в секунду. Це неправильно. Не слухайте і йдіть, сміючись істеричним реготом.

Що таке дисплей retina
Apple представила термін дисплей «Retina » для випуску смартфонів iPhone 4. Він називається Retina (в перекладі сітківка) тому, що PPI пристрою була настільки високо, що ймовірно, сітківка людини не змогла б побачити окремі пікселі на екрані.

Це твердження вірне для розмірів екрану діапазону пристрої, в яких воно використовується, але в той час як екрани стають все краще і краще, наші очі зараз навчені достатньо для сприйняття пікселів — особливо для округлих елементів користувальницького інтерфейсу.

Технічно вони відображають в два рази більше пікселів по висоті і ширині в тому ж фізичному розмірі.

IPhone 3G / S був з діагоналлю 3,5 дюйма і роздільною здатністю 480 * 320px і 163PPI.
iPhone 4 / S був з діагоналлю 3,5 дюйма і роздільною здатністю 960 * 640px і 326ppi.



БУМ! Рівно в два рази. Простий множник. Тому елементи на екрані замість того, щоб бути менше, виглядають удвічі візуально різкіше, тому що вони мають у два рази більше пікселів і точно таких же фізичних розмірів. Один нормальний піксель дорівнює 4 пікселям retina.

Розглянемо приклад нижче для прямого застосування в складному дизайні.



Примітка до зображення: важко імітувати різне якість зображення з двох пристроїв на третє пристрій, тобто те, на яке ви дивитеся на прямо зараз. Якість зображення буде виглядати в два рази краще і різкіше для музичного плеєра на retina, навіть займаючи той же фізичний простір, Якщо ви хочете перевірити його самі, я використав одну з моїх безкоштовних програм, ви можете завантажити вихідний код.

Термін дисплей «Retina» належить Apple, тому інші компанії будуть використовувати «HI-DPI або " Super power pixel maximum sp33d display " (я збираюся зареєструвати останню марку) або взагалі нічого з цього. Вам залишиться, читаючи характеристики пристрою, з'ясувати, який же DPI розмір екрану (як весело).

Запам'ятайте: продукти Apple, є відмінним способом познайомитися з перетворення DPI і зрозуміти відмінності між роздільною здатністю, PPI і співвідношенням фізичного розміру, тому що вам треба турбуватися тільки про 1 множнику.

Що таке множник
Коли справа дійде до перетворення вашого дизайну для всіх можливих PPI, множник буде вашим математичним спасителем. Якщо ви знаєте множник, вам більше не доведеться піклуватися про детальні характеристики пристрою.

Давайте візьмемо наш приклад з iPhone 3G і 4. У вас є в два рази більше пікселів в тому ж фізичному розмірі. Тому ваш множник 2. Це означає, щоб зробити ваші графічні ресурси сумісними з роздільною здатністю 4G, ви просто повинні помножити розмір своїх графічних ресурсів на 2 — і все.

Припустимо, ви створюєте кнопку 44 * 44px, яка є рекомендованою iOS сенсорної метою (я буду говорити про це пізніше). Давайте назвемо його типовим назвою кнопки «JIM».

Щоб добре зробити JIM на iPhone 4, вам треба створити його версію збільшену удвічі. Що ми і робимо нижче.



Примітка: зліва — 2px закруглені кути 16px розмір шрифту, праворуч 4px закруглені кути 32px розмір шрифту.

Досить просто. Тепер JIM має версію Jim.png для нормального PPI (IPhone 3) і версію Jim@2x.png для 200% PPI (iPhone 4).

Тепер ви запитаєте: «Але зачекайте! Я впевнений, що є й інші множники крім всього двох. Так, є, і ось тут це стає кошмаром. Добре, може бути, не кошмаром, але я впевнений, що ви воліли б провести день, гладячи ваші шкарпетки, ніж справлятися з безліччю множників. На щастя, це не так страшно, як ви думаєте, ми повернемося до цього пізніше.

Давайте спочатку поговоримо про одиницях виміру, тому що тепер вам потрібна буде одиниця измерени, відмінна від пікселя — для опису ваших мульти DPI дизайнів. От коли приходить час DP і PT.

Запам'ятайте: для кожного дизайну над яким ви працюєте потрібно знати множник. Множники, тримають разом цей світ хаосу розмірів екранів і PPI і роблять його зрозумілим для людини.

Що таке DP, PT і SP
DP або PT є одиницею виміру, що використовується для створення опису до вашим макетом, створених для багатьох пристроїв і DPI.
DP або DiP розшифровується як Device independent Pixel (піксель незалежний від пристрою) і PT як Point (точка). PT використовують Apple; DP використовують Android, проте по суті — вони однакові. Коротше кажучи, вони визначають розмір незалежно від множника пристрою. Це дуже допомагає при обговоренні тех. завдань між такими різними суб'єктами, як дизайнер та інженер.

Давайте візьмемо наш попередній приклад кнопки, „JIM“.
Джим має ширину 44px для звичайних, не екранів retina, і ширину 88px для екранів retina. Перейдемо до технічних подробиць і додамо відступ (padding) навколо Джима на 20px, тому що він любить вільний простір. Тоді відступ буде 40px для retina. Але насправді не має сенсу враховувати retina пікселі при проектуванні на не retina екрані.

Ми поступимо таким чином: візьмемо за основу 100% співвідношення сторін звичайного не retina дисплея.



У цьому випадку JIM буде мати розмір 44 * 44DP або PT і відступи 20DP або PT. Ви можете віддавати своє тех. завдання в будь-якому PPI, JIM буде 44 * 44dp або pt.

Android і IOS адаптують цей розмір до екрану і конвертують з правильним множником. Ось чому я думаю, що легше завжди проектувати з PPI за замовчуванням для вашого екрану.

SP використовується окремо від DP і PT, але працює так само. SP розшифровується Scale-independent pixels (масштабно незалежний піксель) і використовується для визначення розмірів шрифту. SP залежить від налаштувань gnome користувачів Android пристроїв. Для дизайнера визначення SP таке ж, як визначення DP для всього іншого. Візьміть за основу те, що читається при 1х масштабі (16SP, наприклад, це відмінний розмір шрифту для читання).

Запам'ятайте: коли складаєте тех. завдання, завжди використовуйте значення незалежні від дозволу / масштабу. Завжди. Чим більше відрізняється розмір екрану / дозвіл, тим це більш істотно.

Налаштування PPI
Тепер, коли ви знаєте, що таке PPI, retina і множник, важливо сказати, про що мене зовсім мало питали, і це збиває з пантелику: »Що станеться, якщо змінити конфігурацію PPI в моєму графічному редакторі?"

Якщо ви поставили собі це питання, це означає, що ви трохи знайомі з графічними редакторами. Тепер дуже важливо зрозуміти те, на що мені було потрібно якийсь час: Для всього, що не для друку, використовуються розміри в пікселях, незалежно від початкової конфігурації PPI.

Налаштування PPI у програмах є спадщиною друкарської справи. Якщо ви проектуєте тільки для інтернету, PPI не буде мати ніякого впливу на розмір растрового зображення. Ось чому ми використовуємо множники, а не конкретні значення PPI. Ваш полотно і графіка завжди будуть перетворені в пікселі з допомогою програмного забезпечення, використовуючи відповідний множник.

Ось, наприклад. Ви самі можете спробувати в програмі, яка дозволяє налаштувати PPI, наприклад, Photoshop. Я намалював квадрат 80 * 80px і текст з розміром 16pt в Photoshop з конфігурацією 72ppi. Друге те ж саме з конфігурацією 144PPI.




Як ви бачите, текст став досить великим, точніше в два рази більше, в той час як квадрат залишився тим же. Причиною цього є те, що програма Photoshop (в даному випадку) масштабує (як і повинна) значення pt на основі значення PPI, в результаті подвоюючи розмір візуалізації тексту налаштуваннях подвоєного PPI. З іншого боку, те, що було визначено за допомогою пікселів — синій квадрат — залишається точно таке ж розміру. Піксель — це піксель і залишиться пікселем незалежно від налаштувань PPI. Вони відрізняються один від одного тільки PPI екрану, що їх відображає.

Важливо пам'ятати, що при проектуванні для цифрової техніки PPI буде впливати тільки на те, як ви сприймаєте свій дизайн на ваш робочий процес і на графіку pt розмірах, таку як шрифт. Якщо ви включите в свою роботу вихідні файли з різними налаштуваннями PPI, програма змінить розміри будь-якого переданого зображення між різними файлами ставленням PPI приймаючого файлу. Це стане для вас проблемою.

Рішення? Використовуйте PPI (для 1x дизайну переважно в діапазоні 72-120) і дотримуйтеся його. Я особисто використовую 72 ppi, тому що це налаштування за замовчуванням в Photoshop, і більшість моїх колег роблять те ж саме.

Запам'ятайте:
  • налаштування PPI не впливають на експорт для інтернет.
  • налаштування PPI будуть тільки впливати на графіку створену на основі PPI-незалежних вимірюваннях, таких як PT

  • Піксель одиниця виміру для всього цифрового.
  • Тримаєте в розумі множники і те що ви розробляйте, а не PPI.
  • Використовуйте реалістичні налаштування PPI при проектуванні для цифрової техніки, які дають вам відчуття того, як це буде виглядати на цільових пристроях (наприклад 72-120ppi для 1x інтернет сайтів/ настільних комп'ютерів).
  • Дотримуйтеся однакових налаштувань PPI для всіх ваших файлів.
  • Додатково можна прочитати про це в найцікавіший пості на StackExchange .


Обробка PPI в iOS
Прийшов час для занурення в платформно-залежний дизайн. Давайте пройдемося по пристроях з IOS на початок 2014 року. Щодо розмірів екрану і DPI, c iOS є 2 типи мобільних пристроїв і 2 типи екранів для ноутбуків / настільних комп'ютерів. У категорії мобільних у них, звичайно, є iPhone і iPad.

У категорії телефонів у вас є старий 3GS (ще підтримується iOS6) і вище. Тільки iPhone 3GS не з retina. iPhone 5 і вище використовують більш високий екран з тим же DPI, як у iPhone 4 і 4s. Дивіться шпаргалку нижче:



Примітка: 1) множник 1х, 2) множник 2, 3) множник 2х.

У вересні 2014-го Apple презентувала 2 нові категорії iPhone: iPhone 6 і iPhone 6 Plus. iPhone 6 більше, ніж iPhone 5 (на 0.7 дюйма), але з тим же PPI. З іншого боку, iPhone 6 представляє абсолютно новий множник для iOS, @3x з-за свого розміру, 5.5 дюймів.



Є дещо особливе, що вам треба знати про те, як iPhone 6 Plus обробляє свій дисплей щодо всіх інших iPhone.

Він зменшує розмір зображень.

Наприклад, коли ви проектуєте для iPhone 6, ви проектуєте на полотні 1334*750px і телефон також рендерить 1334*750 фізичних пікселів. У разі iPhone 6 Plus у телефону дозвіл менше, ніж візуалізація зображення, так що вам треба проектувати для вирішення 2208*1242px і телефон зменшить розмір до дозволу 1920*1080px. Дивіться малюнок нижче:



Фізичний дозвіл на 13% нижче, ніж отрендеренное дозвіл. Це створює пару глюків, таких як напів-пікселі, роблячи дуже дрібні деталі розмитими. Хоча дозвіл так велике, що це буде непомітно, тільки якщо ви будете дивитися дуже близько. Так що проектуйте на полотні 2208*1242px і будьте обережні з дуже маленькими елементами дизайну, такими як супер роздільники. Дивіться нижче симуляцію того, що відбувається:



Спасибі Paintcode за чудове пояснення цього, відразу після основної доповіді. Дивіться їх веб сторінку. Це пояснення виходить з їх класних схем.

Потім у вас є категорія iPod Touch. Розглядайте дизайн для них так само, як для iPhone. iPod 4-го покоління і нижче використовує iOS6 і не retina. iPod п'ятого покоління і вище використовує retina екрани і сумісний з iOS7. Відповідно, у iPod п'ятого покоління розмір екрану такий же, як у iPhone 5.

Нарешті у вас є iPad. За винятком iPad (застарілих) першого покоління всі вони працюють на iOS7, і тільки iPad2 і IPad mini першого покоління використовують не-retina екран. Якщо вам цікаво, який iPad mini з точки зору дизайну, це звичайний iPad (екран з тим же PPI), але фізично менше. Під цим я розумію, що вони взяли такий же дозвіл і зменшили його з 9.7 дюймів до 7.9 дюймів. З тим же співвідношенням сторін, отже, збільшуючи щільність пікселів. Ваші графічні ресурси будуть виглядати трохи менше.





Що стосується категорії настільний ПК/ноутбук, ми не будемо розглядати всі розміри екранів, пропонованих Apple. На сьогоднішній день компанія Apple пропонує більшість своїх екранах з множником 1x (Macbook, Macbook Air, старих MacBook Pro, настільних екранах.). Retina є тільки в 13 і 15-дюймових MacBook Pro. Множник 2x, такий же, як у iPad і iPhone. Навіть якщо проектування для настільних ПК відрізняється від мобільних пристроїв, ви будете створювати графічні ресурси таким же чином для роботи на 2 різних типів екранів.

При наявності тільки одного множника, створення графічних ресурсів для iOS і OSX досить просте. Я пропоную почати проектування для базового PPI (тобто 100% / 1x) і потім множити на 2 для роботи вашого дизайну на @ 2x екрані і генерує @ 2x графічні ресурси. Коли ви освоїтеся з перемиканням між 1х і 2х, ви будете в змозі проектувати безпосередньо в @ 2x, масштабуючи свої графічні ресурси для більш низького дозволу. Це буде особливо корисно, якщо ви розробляєте на екрані retina (MacBook Pro).

Необхідні графічні ресурси, приклад Chrome


Як ви бачите, кожен раз ми повинні створювати за два зображення на 1 графічний ресурс. Не retina зображення називаються name.png. Для retina зображень ми додаємо @ 2x, щоб стало name@2x.png. Це конвенція iOS і її треба дотримуватися.

Якщо ви створюєте зображення, яке буде використовуватися тільки на iPad, ми використовуємо ~ipad після. @ 2x. Це всього лише конвенція Chrome. Повторіть цей процес для кожного потрібного вам графічного ресурсу. Ніколи віддавайте тільки одну версію графічного ресурсу, створюйте для всіх DPI.

Запам'ятайте правила для IOS:
— @ 2x графічний ресурс завжди повинен бути збільшеним удвічі 1x графічним ресурсом.
— Додайте @ 2x для retina ресурсів.
— Завжди створюйте 100% і 200% зображення.
— Завжди використовуйте однакове ім'я для 1х і 2х графічних ресурсів.
— Почніть проектування в 100%, потім множте.
— Віддавайте .png зображення.
— Складайте тех. завдання pt, а не пікселях.


Використання PPI на Android
У платформи Android більш широкий спектр пристроїв, ніж у iOS. Причина в тому, що будь-який виробник може створити пристрій і з деякими обмеженнями в поняттях масштабу і встановити на нього свою власну версію Android. В результаті у вас практично необмежена різноманітність розмірів екранів і DPI, від телефонів, великих, як планшети, до невеликих планшетів, маленьких, як телефони. З цієї причини ваш дизайн завжди повинен бути адаптивним.

У цьому розділі ми будемо використовувати інший підхід, ніж для IOS. Спочатку поговоримо про множниках і категоріях DPI.
Як і з iOS, у вас є дві категорії пристроїв: телефони та планшети. Обидві категорії можуть бути організовані в різних DPI категоріях: ldpi, mdpi, tvdpi, hdpi, xhdpi, xxhdpi і xxxhdpi.

На щастя, одні з них використовуються частіше, ніж інші, а деякі вже застаріли.
Перше, що ми повинні зробити, це знайти базову одиницю вимірювання, яка є еквівалентом 1х для IOS. На Android — це MDPI.
Давайте поглянемо на множники в шпаргалці нижче.



Так, це багато, і це ще не кінець. Існує ще один.



Ефективно використовуються чотири DPI: MDPI, HDPI, XHDPI і XXHDPI. LDPI — це застаріле DPI і більше не використовується, TVDPI — це особливий варіант для інтерфейсу користувача в телевізорах і одноразово був використаний для Nexus 7 виробництва 2012 р. Їх можна вважати не обов'язковими для використання в мобільних телефонах і планшетах. Хоча, є примітка: множник TVDPI (1.33x) використовується в деяких переносних пристроях Android, таких як годинник LG G, але ми поговоримо про це трохи пізніше.

Давайте сумісний все в перспективі, пов'язуючи Android телефони і планшети з їх відповідним DPI.













В даний час повинно бути одне пристрій, що використовує XXXHDPI для фактичних графічних ресурсів додатків, але вони все ще дуже рідкісні. Якщо у вас є додатковий час, генерація XXXHDPI графічних ресурсів створить заділ на майбутнє вашому додатку.

Необхідні графічні ресурси, приклад Chrome
Вам потрібно створити по 4 зображення для 1-го графічного ресурсу, від MDPI в XXHDPI. LDPI можна не чіпати. Зверніть увагу, що у разі версії Chrome, показаної нижче, був експортований TVDPI, тому в даному конкретному випадку 5 зображень для 1-го графічного ресурсу. Як і для iOS, я пропоную вам взяти 100% або множник 1x в якості основи для вашого дизайну. Це полегшує підготовку вашого дизайну для інших множників, особливо на Android — з такими множниками, як 1,33 і 1,5.

Дивіться нижче приклад кнопки назад браузера Chrome на Android:



Іменування з додаванням DPI, запропоноване тут, не обов'язково і не представлено в офіційних довідниках Android. У зв'язку з обмеженням поточних засобів проектування так ми називаємо наші графічні ресурси з-за обмежень поточних інструментів дизайну, які ускладнюють визначення конкретних шляхів для експорту графічних ресурсів.

Враховуючи, що джерело графічних ресурсів може містити сотні графічних ресурсів, оскільки менш болісно робити процес експорту і уникати помилок дублювання імен з боку дизайнера. У вихідному сховище графічні ресурси структуровані наступним чином:

— drawable-mdpi/asset.png
— drawable-hdpi/asset.png

— і т.д. ...


Як ви бачите, графічний ресурс заснований на квадраті в 32 * 32dp. Проблема Android множників в тому, що деякі з них зі знаками після коми. Якщо помножити число на 1,33 або 1,5, швидше за все ви в кінцевому підсумку отримаєте число зі знаками після коми. У цьому випадку ви хочете округлити число в потрібну сторону, так як ви гадаєте, що має сенс. У наведеному випадку 32 * 1,33 = 42,56, тому ми округляємо його до 43px.

Будьте обережні з елементами піксельних розмірів, таких як штрихи. Вам потрібно переконатися, що ваш штрих або 1px шириною, або 2px по ширині і не розмитий, так як описано в розділі дозвіл екрану.

Запам'ятайте правила Android:
  • Android має 7 різних DPI, вам потрібно турбуватися про 4: mdpi, hdpi, xhdpi, xxhdpi плюс XXXHDPI, якщо ви хочете зробити заготовку на майбутнє своєї програми.
  • MDPI є базовим DPI або вашим множником 1x

  • Android використовує dp замість pt для специфікації, але вони однакові
  • Округляйте в підходящу для вас сторону для множників з цифрами після коми.
  • Віддавайте роботу в .png зображеннях.
  • Обговоріть конвенцію іменування і процес експорту з людиною, відповідальним за реалізацію.


PPI Mac і Chrome
У поняттях обробки PPI Mac (OSX) і Chrome OS ведуть себе однаково. Обидві ОС підтримують звичайне PPI (100%) і PPI високого дозволу retina (200%). Є тільки 2x множник також як для Iphone і iPad.

Навіть якщо більшість ваших користувачів, як Mac, так і Chrome OS, з невеликим дозволом екрану (на даний момент), я дуже рекомендую підготувати на майбутнє ваші програми для екранів високого дозволу. Заготівля на майбутнє для ос chrome означає створення графічних ресурсів з високим дозволом для веб-додатки або веб-сайту, це ніколи не буде даремно витраченим часом.

В даний час існує в загальній складності 3 ноутбука, що використовують цей PPI, MacBook Pro 13 ", 15" і Chromebook Pixel. Крім цього, Chromebook Pixel з сенсорним екраном.



Необхідні графічні ресурси, приклад Chrome
Прекрасним прикладом цього подібності був би графічний ресурс кнопки панелі інструментів Chrome. Ми використовуємо одні й ті ж графічні ресурси на обох платформах. Хоча код відрізняється, візуально відмінностей немає. Дивіться нижче приклад кнопки меню Chrome.



Запам'ятайте:
  • Chrome OS і OSX використовують той же множник, 2
  • сенсорні тільки дисплеї високого дозволу Chrome

.


Растягиваемые графічні ресурси
Незалежно від того, для десктопів або мобільних пристроїв ваш додаток, майже завжди потрібні розтягуються графічні ресурси. Розтягувати графічний ресурс так влаштований, що код зможе його збільшувати до потрібних розмірів без погіршення візуалізації. Вони відрізняються від повторюваних графічних ресурсів, які працюють по-іншому, навіть коли іноді відображають один і той же результат.

Дивіться нижче приклад Chrome. Панель інструментів на iOS генерується з використанням тільки одного супер тонкого графічного ресурсу, який повторюється на осі Х на весь екран.



В даний момент нам це не підійде, давайте подивимося, як різні платформи справляються з такими, що розтягуються графічними ресурсами.

Растягиваемые графічні ресурси на iOS
IOS дозволяє дизайнеру це легко зробити, так як розтягування визначається у коді на відміну від нарізки шматків графічних ресурсів або маркування. Все, що вам потрібно зробити, це надати базове зображення, і якщо не ви його створюєте — опишіть цей графічний ресурс як розтягувати по горизонталі, вертикалі або в обидві сторони. Дивіться приклад нижче, який є на iOS Chrome кнопкою за замовчуванням для контенту.



Растягиваемые графічні ресурси на Android
У Android, на відміну від iOS, інший спосіб створення растягивающихся графічних ресурсів. Він більше покладається на дизайнера. Для цієї платформи ви будете використовувати напрямні 9-patch. Ці напрямні складаються з 4 ліній, що оточують сам графічний ресурс. Вони повинні бути надані шматками / зображеннями, як ніби вони є частиною самого зображення, буквально візуально відображаючи в ньому його характеристики. Вони визначають дві речі: масштабовану і область заливки. Після того, як вони визначені, код зможе тільки протягнути те, що ви визначили і вставити контент — туди, куди його визначили.

Дивіться приклад нижче кнопки за замовчуванням для Android версії Chrome, показаною раніше. В цілях демонстрації я зробив її більше.



Як ви можете бачити, 9-патч являє собою набір з 4 чистих чорних (# 000000) смужок. Вони повинні мати ширину 1px для будь-якого DPI; це індикація для коду. Котра розтягується площа не включає в себе закруглені кути, тому що це можна повторити (або це буде виглядати жахливо.) У цьому випадку, ми додали 10dp відступи для кнопки. Це не доведеться включати специфікацію. Індикатори .9 потрібно також закласти і 100% прозору частину нарізки графічного ресурсу. В іншому випадку, це не спрацює і потребує модифікації.



Використання 9-патч вимагає, щоб ви додали .9 до імені, також як ви додаєте @ 2x для графічних ресурсів iOS. Знову візьмемо наш приклад графічного ресурсу кнопки нижче:



Зверніть увагу, що ви повинні бути обережні з розмірами вашого графічного ресурсу. Для демонстрації я зробив його досить великим. Важливо, щоб ви оптимізували ваш вага графічного ресурсу, знижуючи його розмір до мінімуму, як показано нижче. Я залишив кути, як вони були, але скоротив область розтягування та вмісту до мінімуму.



Перевіряйте, щоб маркування 9-патч не перекривала ваш дизайн і щоб нарізка графічного ресурсу була правильна. .9 повинен бути як можна ближче до графічного ресурсу, без його перекриття, намагайтеся не вбудовувати відступи. Попередній приклад має вбудовані відступи через затінення.
9-патч не замінює експорт вашого графічного ресурсу у всі DPI. Це треба зробити для кожної версії графічного ресурсу.

І останнє, .9 може мати кілька растягиваемых областей (верхня та ліва). Хоча я не стикався з цим в роботі, але це варто згадати.

Запам'ятайте: завжди запитуйте людини реалізує ваш дизайн, яке найкраще рішення прийняти, особливо для настільних комп'ютерів. Чим більше зображення, тим важче буде додаток, і вам буде важче відстежувати і оновлювати свої графічні ресурси. 9-патч повинен використовуватися тільки з хорошими правилами іменування і хорошою організацією ваших вихідних файлів.

Сенсорне управління і сенсорні цілі
Перше, що тут треба зрозуміти, створення чого-небудь для сенсорного управління не має нічого спільного з DPI. Але коли справа доходить до створення користувальницького інтерфейсу або генерування графічних ресурсів, важливо зрозуміти взаємозв'язок між сенсорним управлінням і DPI.

Вибір між сенсорним або не сенсорним буде залежати від мети вашого додатки, де воно має бути розгорнуто і яким повинен бути користувальницький досвід.

Давайте розділимо його на прості категорії, настільну несенсорную, і мобільний.

Настільні комп'ютери, без сенсорного управління
Я не буду тут давати уроки історії, але якщо ви народилися до 2005 року, ви знаєте, що обчислювальна техніка не була створена з задумкою сенсорного управління.

Ми використовуємо мишу і клавіатуру, які є надзвичайно точними інструментами для навігації по інтерфейсу. Точність курсору миші 1pt. В теорії ви могли створити кнопку 1x1 pt, яка була б кликабельна будь-надлюдиною.
Дивіться малюнок нижче.



Це 20x версія курсору Chrome OS.
Червона крапка — це фактична область, яка викликає дію на інтерфейсі користувача. Досить точно.
Здогадуєтеся, куди я хилю. Що не дуже точно? Наші пальці.

Отже, як вам робити дизайн для сенсорного управління? Ну, зробіть все більше.

Розмір пальців
Ось середній розмір двох найбільш часто використовуваних пальців для взаємодії з інтерфейсом користувача, вказівного і великого пальця. Він являє собою як зону дотику і зону загороджену пальцем. Фактична зона торкання (тобто частина пальця, яка знаходиться в контакті з екраном), звичайно, буде менше і трохи більш точною, якщо ви звичайно не тисніть своїм пальцем екран.

При проектуванні для сенсорного управління, безпечніше переоцінити розмір, необхідний для сенсорних цілей, ніж недооцінити його.



Примітка: зліва середня область дотику вказівного, праворуч великого пальця.

Як застосувати це до моєї дизайнерської роботи
Як ми вже бачили, дюйми або сантиметри не найкращий спосіб для розрахунків в піксельному світі. Фактично, навіть піксель не дуже хороший спосіб підрахунку. Отже, як вам переконатися, що ваш дизайн готовий для сенсорного управління?

Я скажу очевидне, але ви завжди повинні тестувати свій дизайн на цільових пристроях / платформах.
Але, щоб не втратити занадто багато часу, є деякі базові розміри в пікселях, які вважаються безпечними у використанні і рекомендовані як базові для операційної системи

Рекомендовані сенсорні цілі для платформ
Знову ж таки, обережніше, ці розміри для зручності і не є одиницями вимірювання чого-небудь в реальному житті. Вони працюють, тому що OEM і виробники слідують посібникам по створенню сумісних екранів в понятті співвідношення: розмір /dpi( точок на дюйм).



Як ви бачите, кожна ОС має свій власний набір рекомендацій, але всі вони близько 48pt. Windows у своїх специфікаціях включає відступи, тому я додав їх сюди.

Різниця цих розмірів походить від різних факторів.

Apple контролює своє апаратне забезпечення, знає якість сенсорного екрану і контролюють точне співвідношення сторін екрану. Вони можуть покладатися на сенсорні мети менших розмірів. Додатково їх обладнання, як правило, фізично менше.

Android і Windows, з іншого боку, мають різних OEM-виробників, кожен з яких створює власне апаратне забезпечення і використання великих сенсорних цілей робить їх «безпечніше». Їх інтерфейси користувача також більш розтягнуті (особливо вікна та їх обладнання, як правило, фізично більше.

Приклад Chrome
Ось як це застосовується в Chrome. Програмовані сенсорні цілі відображаються синім кольором.



Як ви можете бачити, обидві панелі інструментів використовують рекомендовану висоту сенсорної цілі для кожної платформи. Також область навколо зображення — це квадрат 44x44pt і 48x48pt для iOS і Android відповідно. Не тільки це робить інтерфейс узгоджувався з іншою частиною операційної системи в поняттях розмірів, але це відмінний спосіб для вас мати мінімальний розмір для всього, з чим ви хочете, щоб користувач взаємодіяв.

Windows 8 І Chrome
Windows 8 і Chrome OS підтримують як сенсорні, так і безконтактні інтерфейси. Якщо ви проектуєте для програми Windows 8, я б дуже рекомендував наслідувати посібникам для сенсорних цілей.

Керівництво для Chrome OS ще не випущено, але і використання Pixel (з сенсорним екраном) не велике. Однак, оскільки всі додатки Chrome OS засновані на веб, я запропонував би в будь-якому випадку проектувати для сенсорних екранів. Моєю рекомендацією буде застосовувати керівництво Android для сенсорних цілей.

Веб, гібридні пристрої і майбутнє
Вам буде ясно, яке прийняти рішення, якщо ви розробляєте для мобільних. Робіть для сенсорних екранів. Якщо ви розробляєте для настільних комп'ютерів, виберіть несенсорные. Це звучить просто, але це ігнорує нову тенденцію — гібридні пристрої.

Гібридним пристроєм є пристрій, яке нібито надає як сенсорне управління, так і несенсорное. Chromebook Pixel, Surface Pro і Lenovo Yoga є гарним прикладом.

Що робити в цьому випадку? Ну, тут немає простої відповіді, але я забіжу вперед і дам один: виберіть сенсорне управління. Ось куди буде розвиватися технологія.

Якщо дизайн для веб, або чого-небудь подібного, думайте про сенсорному управлінні.

Запам'ятайте:
  • Для майже все, що ви будете робити в майбутньому думайте про мобільних і про сенсорному управлінні.
  • Використовуйте рекомендовані сенсорні цілі для кожної ОС. Це допоможе зробити ваш дизайн краще і допомогти вам досягти узгодженості з ОС.

  • Сенсорні мети є орієнтовними, це не значить, ви повинні слідувати їм буквально. У кінцевому рахунку, ви контролюєте досвід.


Графічне програмне забезпечення
Програмне забезпечення не зробить з вас дизайнера, але вибір правильного програмного забезпечення для поставленої задачі може сильно поліпшити вашу продуктивність і спростити роботу. «Ноу-хау» програмного забезпечення не повинно бути вашим єдиним вмінням, але навчання та освоєння правильного інструменту буде великим внеском для втілення ваших ідей.

Коли справа доходить до обробки зміни DPI в дизайні інтерфейсу, всі програми працюють по-різному. Деякі з них краще, ніж інші в конкретних завданнях. Ось найбільш поширені:



Photoshop
Мати інструментів проектування інтерфейсу. Ймовірно, найбільш використовуваний інструмент сьогодні. Для нього існує нескінченна кількість ресурсів, навчальних посібників, статей. Photoshop існує майже з моменту виникнення дизайну інтерфейсу.

Як випливає з назви, перша мета програми не була в дизайні інтерфейсу, а була ретуші фотографій або растрових зображень. Він розвивався протягом року і з народженням дизайну інтерфейсу, дизайнери змінили його призначення. Почасти це було тому, що вони звикли до нього, і тому, що він був єдиною програмою, яка була в стані зробити речі так добре, як це необхідно.

Photoshop і донині є майстром редагування растрових зображень і раніше є найбільш використовуваною програмою для дизайну користувальницького інтерфейсу. Його десятирічне спадщина робить „Фотошоп“ важкодоступній програмою для навчання. Використовуючи „Фотошоп“ як гігантської швейцарський армійський ніж ви зможете зробити все, але не завжди в найбільш ефективним способом.

Так як він спочатку заснований на растровому зображенні, він DPI залежний, протилежно йому Illustrator і Sketch описані нижче.

Ілюстратор
Векторний редактор, рідний брат Photoshop. Як вказує його назва, він спрямований на ілюстраторів, але його також можна використовувати в якості інструменту дизайну інтерфейсу.

Ілюстратор підходить для поліграфічного дизайну, а тому його інтерфейс, керування кольором, масштаб, лінійки та одиниці виміру можуть відштовхнути вас і він вимагає кілька налаштувань для того, щоб його легко можна було використовувати тільки для дизайну інтерфейсу. Як і Photoshop, це неймовірно потужний інструмент, за крутий кривий навчання.

Він відрізняється від Photoshop тим, що він не залежить DPI за рахунок підстави на векторних формах. На відміну від растрових зображень, графіка, зроблена з допомогою векторних фігур, спирається на математичні формули і буде перерахована програмно без втрати якості.
Розуміння різниці між растровим і векторним зображенням є ключем до створення масштабованого візуального дизайну та графічних ресурсів.

Якщо ви хочете почати роботу з використанням Illustrator для веб-дизайну / інтерфейсу, я рекомендую прочитати»Моя робота з вектором" (англ.) janoskoos.

Sketch 3.0
Sketch — це новий продукт, порівняно з Photoshop і Illustrator. Йому лише 4 роки, ця програма викликала великий ажіотаж (в хорошому сенсі) в індустрії дизайнерів інтерфейсу. Причина в тому, що Sketch з самого початку націлена для використання дизайнерами і дизайнерами досвіду користувача (UX). Без спадщини Photoshop Illustrator або Sketch позиціонує себе як прекрасно адаптований інструмент для ніші користувачів, що складається з дизайнерів інтерфейсів.

Sketch підходить для швидкого створення каркасів а також більш складного візуального дизайну. Він повністю на основі вектора, як і Illustrator, з мінімальним і добре продуманим інтерфейсом користувача. Поєднання монтажних областей, простота використання і гнучкість її системи генерації графічних ресурсів робить його найшвидшим інструментом для мульти-DPI і мульти платформного дизайну. Недавній випуск версії 3.0 роблять його дуже хорошою альтернативою Photoshop.

З іншого боку, Sketch підтримується меншою командою і як і раніше порівняно молодий. Його команда надзвичайно швидка, але не має масштаб Adobe (Photoshop, Illustrator). Sketch пропонує (по дизайну) самий мінімум, коли справа доходить до редагування растрових зображень. Photoshop краще підходить для такого роду роботи. Нарешті, у зв'язку з його юністю, ресурси у вигляді вихідних файлів, навчальні посібники і все співтовариство на порядок менше, ніж у Photoshop. Як було сказано вище, спільнота дуже активно і мотивовано.

Суб'єктивно, я був користувачем Photoshop з тих пір, як я почав працювати з дизайном 8 років тому, але нещодавно я переключився на Sketch 3.0 у більшої частини мого процесу проектування. Це не оцінка якості, Photoshop ще чертовски хороша програма, але він (Sketch) просто задовольняє моїм потребам краще.

Якщо ви хочете дізнатися більше про моєму конкретному досвіді, я рекомендую вам прочитати мою статтю Месяц з Sketch 3.0 (англ) або мій «Sketch tutorial_01» (англ.).

Хочете зануритися ще глибше і зрозуміти, як вектори працюють в Sketch? Переходьте до статті @ pnowelldesign «Harnessing vector awesomeness in Sketch».

Запам'ятайте: немає ідеального інструменту для роботи, крім того, який вам комфортно використовувати. Якщо ви можете собі дозволити витрачати час і гроші, я рекомендую вам спробувати їх все, щоб скласти свою власну думку.

Документації та ресурси
Це керівництво тільки введення, прийшов час зробити і дізнатися більше. Якщо ви хочете дізнатися більше або уточнити деталі за темами, які ми обговорювали, ось кілька посилань (англ):

Platform documentation
Android UI guidelines
Google Material guidelines
iOS7 UI guidelines
iPhone 6 Screens Demystified
Windows UI guidelines
Google dev Principles of site design

Cheat-sheets and templates
Screen sizes, ratio and PPI
iOS7 designer cheat sheet
iOS7 design resource (requires Apple account)
App icons template, Android and iOS
Bjango blog (A design article gold mine)
iPhone GUI and iPad GUI(.psd) by @teehanlax

Tools
Density converter by @brdrck
Чоловічий asset generation by @brdrck
Чоловічий design tips by @destroywerk and @BPScott
9patch creation in Android by @romannurik
Чоловічий asset studio by @romannurik. Lots of great tools for Android specific asset creation.

Learn more and other reads
Device independent pixel formula for Mobile devices
More information about 4K by Cnet.com
More informations about touch targets by Smashing Mag
The Screen Android Fragmentation Myth

Про мене


Я Себастьян Габріель ака Kounterb і я візуальний дизайнер для google chrome. Мені подобається писать речі і створюватибезкоштовні утиліти.

Коли я починав, я хотів одне, ясна керівництво, пояснює що таке DPI і які виникнуть проблеми з мульти-платформних дизайном. Це те, що я намагаюся тут зробити. При проектуванні Chrome майже для кожної платформи, я дізнався багато нового про цих питаннях, і я постарався надати їх найпростішому вигляді. Як згадувалося у вступі, якщо ви думаєте, що я щось неправильно розумію, або не вистачає детального опису або якщо ви хотіли б дізнатися більше про що-небудь, надішліть мені повідомлення на sgabriel.contact@gmail.com.

Посилання на оригінал.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.