Самые «трогательные» интерфейсы

Аввакум

Пророк Аввакум говорит: «Видят люди и удивляются, ибо в наши времена творятся такие дела, что вы не поверили бы, если бы вам об этом рассказали ранее». Все сегодня, от крупных корпораций до парикмахерских, надеются на то, что у клиента в кармане есть айфон (или что-то на Android или WinPhone) — современный смартфон с сенсорным экраном, интернетом и геолокацией. Для подобных устройств выпускают приложения и создают мобильные версии сайтов. Дизайнер должен адаптироваться под требования рынка, изучать подходы проектирования и дизайна сенсорных интерфейсов, новый инструментарий, новые возможности. Но можно этого не делать и рано или поздно оказаться на обочине прогресса…

В 2014 г. появился ряд полезных инструментов в области дизайна сенсорных интерфейсов, о которых мы хотели бы вам рассказать.

Генератор

В конце прошлого века все производители графических редакторов внезапно озаботились интеграцией функционала для создания веб-графики. В 1999 г. в Photoshop и вскоре в Illustrator появилась функция Save for Web, позволявшая резать макет сайта для последующей сборки в таблице — самым модным тогда способом (и на самом деле единственным) контролировать взаимное расположение элементов в HTML.

Времена изменились, и многие, наверное, помнят, как однажды пару лет назад поздним вечером, когда в Калифорнии было утро, появилась в Photoshop функция Adobe Generator. Для тех, кто это событие так и проспал, поясню: Adobe Generator — это методика, позволяющая именовать слои и группы в Photoshop как файлы. А программа их будет (по команде File • Generate • Image Assets) автоматически сохранять в папке рядом с файлом проекта Photoshop. Это полезно для быстрого обновления веб-графики, а также создания версий графики для экранов разного разрешения. Например, слой под именем logo.png будет сохранён как файл PNG-24; слой logo.png8 — как PNG-8. Adobe Generator позволяет задавать имена посложнее. Так имя слоя/группы figure.jpg70, 200% figure.jpg60 сохранит слой как два файла: первый — как JPEG качества 70%, второй — увеличенный в два раза как JPEG качества 60%.

В непростом 2014 г. неутомимые адобовские программисты добавили в Adobe Generator возможность создавать вложенные папки. Для этого в имя слоя/группы надо добавить имя вложенной папки по схеме subfolder/logo.png, где на место subfolder надо подставить имя вложенной папки, которую вы хотите создать или использовать.

Извлекатор

Пока недоумевающая публика засоряла форумы вопросом: «А где Adobe Generator для Illustrator?», всё те же адобовские программисты развивали идею Adobe Generator в Photoshop. На его основе несколько месяцев назад была создана функция Extract Assets (извлечение ресурсов).

Следующий этап эволюции генератора — «извлекатор»

С «Извлекатором» достаточно просто именовать (латинскими буквами без пробелов) слои и папки, не обязательно добавлять расширения. Далее вы выделяете слои или папки, которые хотите сохранить как файлы, и выбираете File • Extract Assets. В открывшемся окне извлечения ресурсов можно назначить сохранение выделенного файла в одном или нескольких форматах. Если надо — назначить размер будущего файла в пикселях или процентах. Обратите внимание на кнопки создания копий в масштабе: вверху справа — кнопки 2x, 3x и т. п. Под шестерёнкой рядом можно также настроить, какие тут будут кнопки и какой каждая будет добавлять суффикс файлам. По умолчанию в двухкратном размере добавляется суффикс к имени @2x (стандарт Apple).

Extract Assets учитывает маски при определении габаритов будущего файла. В процессе Extract Assets переименовывает слои, добавляя расширения в стиле Adobe Generator, и наоборот — может использовать определение расширения из имени слоя, сделанное для Adobe Generator. Т. е. обе функции взаимодополняемые и взаимозаменяемые.

Масштабируемая векторная графика

SVG — открытый формат и тоже пришелец из прошлого века. Данная технология позволяет использовать векторную графику в браузере, причём сам SVG является текстовым XML-файлом. Из последнего факта следует, что в него можно встраивать CSS и JS-код, описание объектов в SVG-коде можно вставлять в HTML (это нужно, чтобы снизить уровень энтропии Вселенной, уменьшив количество обращений к серверу и ускорив загрузку страницы). Однако из того, что SVG — это XML-файл, следует также, что он становится слишком громоздким при сохранении контента, состоящего из большого количества объектов и точек. Поэтому в SVG рекомендуется сохранять относительно несложную графику.

Хотя Adobe разрабатывает SVG давно, причём одно время он даже позиционировался как альтернатива флешу, настоящее продвижение началось только тогда, когда за дело взялся Google и интегрировал поддержку SVG в Chrome без плагина и поддержку SVG-сниппетов (фрагментов) внутри HTML. Между прочим, Muse позволяет вставлять SVG-сниппеты. Для этого достаточно в Illustrator CC скопировать объект в буфер обмена и вставить командой Insert HTML на страницу Muse.

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

Вот некоторые изменения:

textPath включен по-умолчанию. Эта функция поддерживает текст на контуре как объект, не разбивая его на побуквенные фрагменты. Результат — файл меньшего размера.

Появилась новая функция Responsive Design. Будучи включённой, она убирает из файла абсолютные значения в размерах графики. Это позволяет пропорционально масштабировать графику в браузере.

Метод поддержки текста (Type) по умолчанию установлен на SVG, т. е. стандартный метод из спецификации формата вместо старого, подходящего для адобовского плагина поддержки SVG в браузере.

Для значения Decimal Places задано 1. Т. о. дробные координаты точек будут обозначены с не более чем одной цифрой после запятой.

Интересно, что SVG, сделанный в Photoshop, не совсем понятен программе Illustrator. В нём дизайн объектов описан с помощью внедрённых CSS стилей, в то время как сам Illustrator обычно вписывает атрибуты дизайна объекта прямо в его код. SVG, сохранённые в Photoshop, Illustrator открывает как объекты, окрашенные чёрным.

Muse, SVG и отзывчивый дизайн

Есть ещё одна тема, вокруг которой публика имеет тенденцию нервничать, — где же отзывчивый (responsive) дизайн в Adobe Muse? Один из рассказов классика ивритской литературы Йосефа Агнона повествует от первого лица, как один старый еврей из диаспоры пишет ему в Иерусалим и просит прислать горсть святой земли — положить в могилу. Но у главного героя не получается. Возможно, время ещё не пришло. Он пишет ему вновь, но на Масличной горе орудуют разбойники, и Агнон никак не может пробраться туда, чтобы набрать земли. «Время, видимо, ещё не пришло», — снова отвечает тот. Наконец Агнон сумел побывать на Масличной горе и выслать своему другу землю из Иерусалима. И вот с кораблем из Одессы приходит письмо от сыновей того еврея: он успел получить посылку, хоть и был уже при смерти, — она пришла вовремя.

С помощью палитры Content, изменяя текст в любой версии (дектопной или мобильной), дизайнер получает автоматический обновлённый текст в другой версии сайта

Так вот, время отзывчивого дизайна в Muse, очевидно, ещё не пришло. Muse — это про адаптивный дизайн. Десктопная и мобильная версии создаются отдельно и не подгоняются по ширине экрана, сайт определяет, где он показывается, а сервер отображает соответствующую версию. Надеюсь, мы получим отзывчивый дизайн в Muse задолго до того, как окажемся при смерти. И удивимся, что проектировать такой сайт будет не просто.

Тем временем разработчиками было сделано маленькое, но полезное нововведение, позволяющее легче создавать и поддерживать десктопную и мобильную версии сайта — панель Content. Перед тем, как скопировать текстовый объект в мобильную версию из десктопной или наоборот, он выделяется и в палитре Content, где ему присваивается уникальный тег. Впоследствии, изменяя текст в любой версии, дизайнер получает автоматический обновлённый текст в другой версии сайта.

Другое важное нововведение, касающееся разработки сайтов под экраны разного разрешения, — появившаяся поддержка SVG в Muse. Можно импортировать файл, а можно вставить его методом копирования из Illustrator. Смысл SVG в Muse в том, что, во-первых, векторные элементы дизайна независимы от разрешения и, во-вторых, когда таки появится отзывчивый дизайн в Muse (да и сейчас в ряде случаев), будет очень кстати способность векторных элементов без потери качества легко подгоняться под разные экраны.

И ещё хозяйкам на заметку. Muse — это программа вёрстки интерактивных проектов без кода. Она разработана для облегчения создания интерактивного дизайна. Если вдуматься, можно легко прийти к заключению, что Muse — это также отличная программа для прототипирования интерфейсов почти любого типа. Она с лёгкостью может заменить в этой области InDesign, любимый многими специалистами по UX.

Развитие фиксированного макета

С тех пор как летом мы рассказывали о появлении в InDesign возможности создавать публикации ePub фиксированного макета (fixed layout), этот функционал заметно расширен. В FL ePub стала поддерживаться создаваемая InDesign анимация и объекты с несколькими состояниями (multi-state objects, MSO). Надо отметить, что генерация панелью Animation в InDesign HTML-кода (а не только флеш) была реализована ещё в InDesign CS6. Но тогда, очевидно, время ещё не пришло. Метод создания анимации, разработанный специально для целей издательства, и MSO, являющийся важным элементом в DPS, — суть важные составляющие основанных на HTML публикаций для мобильных устройств. Это делает FL ePub, как минимум, достойным внимания.

Ещё не хватает поддержки областей прокрутки, image sequence, ряда других элементов, а главное — способности InDesign экспортировать любой дизайн в FL ePub. Тем не менее массовое внедрение FL ePub, сделанных без кода, где-то рядом.

Мотивация

Легенда гласит, что проект айфона на определённом этапе был на грани срыва, потому что инженерам никак не удавалось научить телефон блокировать сенсорный экран, когда пользователь подносит его к уху. Можно представить, как они пришли с этим к Джобсу, и он сказал им что-то вдохновляющее (надо полагать, в стиле предложений, от которых нельзя отказаться), и у них получилось. Далее кучка азиатских клонеров, разобрав и изучив айфон, наделала свои такие же, только с большим экраном, с ОС от «Корпорации Добра», дешевле и, наверняка, из переплавленных печатных машин. Теперь у каждого в кармане айфон или другой смартфон с похожими возможностями, у многих — планшет, и мы просто не можем игнорировать возможность делать проекты для такой внушительной аудитории — всего мира.

Об авторе: Алексей Клецель (www.kletsel.com, alexey@kletsel.com; г. Холон, Израиль), сертифицированный эксперт и инструктор по Illustrator, InDesign и Adobe DPS.