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

Местоположение

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

Реализм

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

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

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

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

Android

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

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

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

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

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

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

Windows Metro

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

Mac OS X

Хотя и непровозглашенная, система MacOS X очень похожа на модель для iOS и работает с дисплеями не-Retina и Retina с настройками изображений в 100 и 200 %. Где это уместно, можно использовать для интерфейсных элементов Mac Os X PDF изображения, где в одном файле находятся два размера.

Сайты и веб-приложения

Немного неясно, как будут обрабатываться дисплейные пиксельные плотности в вебе в дальнейшем, но применяемые методы, скорее всего, будут очень похожи на методы iOS, Android, Windows Metro и других «родных» платформ.

Некоторые сайты уже включают множество изображений, базирующихся на PPI дисплее, похожем на iOS, Android и Windows Metro. Другие дизайнеры пытаются рисовать все с помощью кода, используя CSS и SVG изображения или встраивая пиктограммы и глифы в шрифтах, поэтому и наборы изображений не требуется.

Рисунок 7.4. Избегайте растровых изображений и всегда используйте векторные формы и эффекты

Очевидно одно: так как дисплеи с высоким PPI становятся более распространенными, придется усовершенствовать разные методы для веба. Любой дизайн будущего нужно создавать так, чтобы можно было изменять масштаб во многих размерах. Итак, как же мы можем добиться этого с помощью Photoshop?

Масштабируемые документы Photoshop

Когда дело дойдет до создания элементов, которые легко масштабировать в Photoshop, избегайте растровых изображений. Растровые изображения по своей природе – это сетки с квадратными элементами изображения (пикселями). Это означает, что нельзя добавлять детали, когда растровое изображение расширяется, потому что дополнительных деталей нет (дополнительные пиксели можно было бы интерполировать из соседних, но это привело бы к размытости).

Также нельзя уменьшать масштаб элементов. Это приводит к явным масштабным дефектам изображения и, отсюда, к созданию низкопробной графики.

Решение тут таково – создавать все, применяя векторные формы и эффекты, которые можно будет восстановить в любом размере. В Photoshop это значит использование однотонных, градиентных слоев с паттернами с векторными масками и стилями слоев. Это позволяет увеличить или уменьшить рисунок, а потом экспортировать его как растровое изображение с установленной пиксельной плотностью.

PDF, SVG, CSS и изображения с помощью кода

Другой метод поддержки разных разрешающих способностей и плотности пикселей – рисовать все, используя векторные изображения (такие как PDF или SVG) или код, либо создавать элементы с помощью CSS. В некоторых ситуациях эти методы работают очень хорошо, как правило, для простых объектов. Данные техники также подходят в тех случаях, когда размер, цвет или другие свойства объектов нужно изменять динамически.

Однако чем сложнее объекты, тем больше ресурсов они тратят. А это может привести к возникновению проблем. Повышенная потребность в ресурсах может обернуться большой проблемой для мобильных устройств. К тому же использование одного векторного SVG или PDF-изображения для всех пиксельных плотностей означает, что вы не сможете проконтролировать, как выглядит результат в каждом размере. А это может быть более важным при изменении масштаба для размера, промежуточного заданным рядам 100, 150, 200 %.

Изображение в SVG или PDF с масштабом в 200 % будет выглядеть ярко и четко, но уменьшение его до 140, 150 или 180 %, вероятнее всего, «размоет» резкость.

Однако прежде чем углубиться в техники Photoshop, давайте подготовим наше рабочее поле.

Подготовка вашего рабочего поля

Рисунок 7.5. Решайте, с чего начнете новый документ: с маленькой пиксельной плотности с увеличением масштаба или наоборот