Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

iPhone 3GS имеет дисплей шириной в 320 пикселей при высоте 480 пикселей. Экран с 3,5-дюймовой диагональю дает пиксельное плотность 163 PPI. Для сравнения, дисплей iPhone 4 Retina имеет точно такой же физический размер, диагональ в 3,5 дюйма, но его разрешение – 640 пикселей в ширину и 960 пикселей в высоту – это практически удвоенный экран iPhone 3GS. Пиксели на iPhone 4 ровно наполовину меньше в ширину и длину, соответственно пиксельное разрешение составляет 326 PPI. Другой способ взглянуть на это: для каждого пикселя на iPhone 3GS существует 4 пикселя на 2 × 2 решетке на iPhone 4.

Рисунок 7.1. Разрешение и размер экрана iMac и некоторых мобильных устройств

С того момента как был разработан первый дисплей, появилась тенденция к увеличению пиксельного разрешения. Скорее всего, она продлится до тех пор, пока все дисплеи или их большинство не будет иметь разрешение от 200 до 350 PPI. Причина этому – существующий предел, при котором человеческий взгляд уже не может различать отдельные пиксели (несмотря на то что точная величина PPI для этого порога будет варьироваться в зависимости от того, насколько близко вы находитесь от экрана, какое у вас зрение и когда вы выпили последнюю чашечку кофе). Мы поговорим о том, как создавать Photoshop-документы так, чтобы они масштабировались равномерно для всех графических целей, требуемых для Web, iOS, Android, Windows Metro и других платформ.

Раньше сайты и приложения просматривались только на настольных компьютерах. Сегодня вы не можете предугадать, будут ли смотреть ваш дизайн на широком экране в офисе, кабинете или холле. Если ваше мобильное приложение предназначено для поиска отличных местных кафешек, то есть большая вероятность, что им будут пользоваться при ярком дневном свете в солнечный денек, и пользователь будет искоса поглядывать на отражение облаков в экране своего телефона. Жизненно важно создать правильный контраст и проверить его на разных устройствах по обычным сценариям. О нескольких методах тестирования дизайна на устройствах мы расскажем вам в конце этого раздела.

Дисплеи с высокой плотностью пикселей, мультитачем и ускоренной графической обработкой данных дают прекрасные возможности для того, чтобы создать более реалистичный дизайн и анимацию для интерфейса пользователя (UI). Сейчас возможны великолепные дизайнерские решения с тонкими штриховками, затемнениями и текстурами. Можно добавлять декоративный дизайн, известный как скеоморфизм. Своим видом он демонстрирует, как нужно взаимодействовать с контентом. Мы можем увидеть открытую книгу. Край у одной из ее страниц загнут и показывает, что можно листать их справа налево. В приложении для игры на синтезаторе можно виртуально переподключать провода, для того, чтобы изменить выход аудиосигнала.

Рисунок 7.2. Приложение Early Edition 2 для чтения rss-лент от компании Glasshouse Apps

Рисунок 7.3. Ностальгический дизайн от GlasshouseApps. Функция «расшаривания» в программе Early Edition сделана в виде виртуального конверта

Такой дизайн необязателен. Для того чтобы приложение функционировало, не нужны отогнутые страницы или нарисованные кабели. Скеоморфизм больше похож на некое связующее звено между реальным и цифровым мирами. При правильном применении эти «украшения» должны сделать дизайн более удобным, потому что они помогают объяснять свойства привычным способом.

Однако будьте осторожны! Добавляя такие вещи в оформление, помните, что пользователи ждут от вас исполнения заложенных в них обещаний. Если страница выглядит перелистываемой, значит, она должна и быть такой. Некоторые связи/аналогии с реальным миром могут быть также слишком скудными. Если ваши пользователи молоды, они могут и не знать, что такое виниловая пластинка, 3,5-дюймовая дискета или вращающийся каталог Rolodex [72].

Как мы говорили, некоторые устройства уже имеют дисплей с высокой пиксельной плотностью. И мы видим, что выпускаются мобильные устройства с еще более высоким PPI. Весьма вероятно, что мы увидим настольные ПК и лэптопы с высоким PPI [73]–Windows, Mac OS X и Сеть в целом будут следовать одной тенденции – мобильности.

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

Для разработки под iOS компания Apple подобрала две дисплейные плотности и поэтому два масштаба пользовательского интерфейса (UI). Новейшие дисплеи имеют в точности удвоенное пиксельное разрешение от устройств раннего поколения. Для iPhone его значение163 PPI для ранее выпущенных моделей. А для дисплеев iPhone 4 Retina и последующих моделей – это 326 PPI.

Для масштабирования это идеальное решение, потому что все, что создано с правильными техниками для малого размера, будет отлично масштабироваться на дисплее Retina. Однако вам понадобятся два полных комплекта изображений: один для дисплеев не-Retina, другой для дисплеев Retina. Apple добавляет @2x к названиям файлов с изображениями для дисплеев Retina. Поэтому myimage.png должно выглядеть как myimage@2x.png.

Таким образом, если ваши первоначальные файлы не для размеров дисплея Retina, то Retina они должны быть отмасштабированы до 200 %.

Операционная система Android схожа с iOS, за исключением того, что она имеет четыре пиксельных плотности вместо двух. Это потому что Android используется в огромном спектре устройств. Android представляет следующие разрешения:

• 120 PPI (низкая плотность),

• 160 PPI (средняя плотность,

• 240 PPI (высокая плотность),

• 320 PPI (сверхвысокая плотность).

Интерфейсы для всех устройств с системой Android масштабируются на основе одного из этих разрешений. Чтобы поддерживать все четыре вам понадобится полный комплект PNG изображений для каждого. Android устройства с низким разрешением – явление нечастое. Поэтому вы, скорее всего, станете поддерживать только три другие плотности. Если изначально ваш дизайн настроен на 160 PPI, потом вам нужно будет изменять масштаб до 100, 150 и 200 %.

Подобно системе Android, Windows Metro была разработана для размещения в широком спектре устройств, так что здесь тоже понадобится большое количество изображений. Исходники для Windows Metro создаются под 100, 140 и 180 %, если только не используется масштабируемая векторная графика (формат SVG).