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

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

Дисплеи с высокой плотностью пикселей, мультитачем и ускоренной графической обработкой данных дают прекрасные возможности для того, чтобы создать более реалистичный дизайн и анимацию для интерфейса пользователя (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 представляет следующие разрешения: