Дизайн приложений под retina дисплеи

После недавнего выпуска Retina MacBook Pro , The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для разработчиков и для нас, дизайнеров?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели — привычные нам пиксели: элементы дисплея, каждый из которых имеет свой цвет и яркость.
пиксели экрана
Текстура дерева, скачать

Плотность экрана (Screen density) — это количество физических пикселей дисплея в дюйме матрицы экрана. Измеряется в пикселях-на-дюйм (PPI: pixels per inch). Эппл, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить боОльшую плотность.
разрешение экрана
>
CSS-пиксели
CSS-пиксели (CSS pixels) — абстрактная величина, используемая браузерами для отображения информации на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:

Такой блок на обычных экранах будет занимать область 200×300 пикселей, а на Retina-экранах тот же блок получит 400×600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:
retina и обычный дисплей

Соотношение между физическими и CSS-пикселями можно устанавливать так:

device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {

}

Или так:

device-pixel-ratio,
-o-min-device-pixel-ratio,
min—moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {

}

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели

Растровые пиксели (bitmap pixels) — самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:
растровыt пиксели и retina

Ну так вот.

Что же делать дизайнерам?

Самое лучшее качество — у метода Apple, который выбрали для перехода с iPhone 3GS на iPhone 4 — дизайнить сначала общий интерфейс, а потом подогнать для каждого нужного размера. Это увеличивает объем работы, но обеспечивает то, что все всегда выглядит так хорошо, насколько возможно.
Apple, решили именно удвоить разрешение от iPhone 3GS на iPhone 4, что делает масштабирование еще ​​проще.

В настоящее время существуют четыре разрешения под IOS :
320 × 480 (iPhone / IPod Touch)
640 × 960 (iPhone 4 и 4s с Retina дисплеем)
768 × 1024/1024 × 768 (IPAD)
1536 × 2048/2048 × 1536 (new IPad с Retina дисплеем)

Существуют значительные различия между проектированием iPhone и IPad приложения, поэтому полная переработка макетов приложения представляется необходимой в любом случае — вы не можете просто увеличить панель вашего iPhone приложения, и ожидать, что она будет работать хорошо или хорошо смотрится на iPad. Разница в размере экрана и форм-фактор означает, что каждое устройство должно рассматриваться отдельно. Размер IPad делает возможным показать больше информации на одном экране, в то время как iPhone приложения в целом должны быть глубже, с меньшим количеством информации сразу.

Альтернативный вариант

Можно задизайнить приложение практически полностью в векторе. Неважно, будет это Photoshop, где все отрисовано шейпами или Иллюстратор. Но при этом, уменьшая графику под обычные устройства могу побиться пиксели, стать половинчатными. С этим нетрудно бороться, но время также отнимает. Лично я столкнулся с проблемой того, что если я рисую в Illustrator, у меня хорошее качество, но долго делаются эффекты и что особенно удручает, разработчики незнают этой программы. Поэтому, я рисую в Photoshop в разрешении для retina дисплееев, и практически все векторными шейпами, а потом подгоняют макет под стандарное разрешение.

DataDen в курсе всех тем.Блоги,публикации,новости.

Трансферы Торонто Мэйпл Лифс и состав здесь NHL-Transfer.Ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *