Принципы Metro Design

Дизайн приложений для WP7.

Если вы видели Windows Phone 7, вы уже видели Metro. Metro — это язык дизайна для приложений, взрощенный в недрах Microsoft, элементы которого уже проникают в разные продукты и, безусловно, это душа платформы WP7. Metro — это старт с нуля, ресет дизайна, переход от трудно поддерживаемого языка Windows Mobile к языку с четкими принципами и задачами. Схожие источники вдохновления использовались при дизайне Windows Media Center, Zune и Xbox — и в этом смысле это продукты одной дизайнерской мысли. Команда, занимающаяся дизайном Windows Phone пошла дальше и разработала набор принципов для направления в правильное русло интерактивного дизайна, дизайна движения и общих впечатлений от работы с телефоном.

Принципы metro-дизайна

Легкий, простой, открытый и быстрый

Этот принцип можно было бы назвать тотальной зачисткой (Fierce Reduction), мы стремимся убрать из UI все элементы, которые кажутся ненужными; причем как визуальные элементы, так и переизбыток функциональности. Это побуждает сфокусироваться на первоочередных задачах UI и позволяет UI выглядеть умным, открытым, быстрым и отзывчивым. UI должен позволить пользователю быстро схватить самую суть информации и только при необходимости погрузиться в детали. И вместе с тем, предложение к погружению и исследованию тоже можеть быть частью UI, именно эту цель, например, решает панорама в Windows Phone. Приоритезируйте, выделив основные задачи, старайтесь достигать большего меньшими средствами и убирать все лишнее. И, конечно, свободное пространство — тоже один из важных компонентов проектируемого UI. Пустого пространства не надо бояться — надо уметь с ним работать. Заполнить все имеющееся пространство чем-либо не должно быть самоцелью. Многие вещи можно упростить, показать схематично или заведомо символично. Продумывайте функционал вашего приложения и выстраивайте его в соответствии с важностью и частотой использования, выставляя на первое место именно то, зачем пришел пользователь, и убирая все остальное на второй план.

Качественная типографика

Metro-дизайн в значительной степени инспирирован лучшими образцами качественной типографики. Похоже, пришло время пользовательскому интерфейсу также быть завязанным на типографику. Шрифт — это информация. Красота, четкость и правильность выбора шрифта — путь к открытому и понятному информационному дизайну. Думая об использовании шрифта, помните о толщине, размере, регистре и балансе различных элементов UI. В частности в разных функциональных блоках может использоваться написание текста строчными, прописными буквами или же как в предложении. В Windows Phone иерархия навигации выстраивается посредством соответствующего /физического/ размещения текстовых блоков относительно друг друга и подчеркивается размером и регистром шрифта. Например, заголовок раздела или приложения в Pivot пишется меньшим шрифтом и в верхнем регистре, а заголовок текущей вкладки крупнее и в нижнем регистре. Для платформы WP7 была разработана модификация семейства шрифтов Segoe — Segoe WP, доступного, как в инструментах дизайна и разработки, так и на самом устройстве.

Живой в движении

Metro — это живая система, в которой движение, отзывчивость и реакция, переходы также важны, как и экраны, с которыми взаимодействует пользователь. Движение придает характер UI и в то же время помогает разобраться в навигационной системе, что помогает улучшить юзабилити. Движение дает ощущение глубины и погружения в контент, переход к деталям или назад к верхнему уровню. Джижение опирается на чувства размера и ориентации в пространстве. Живая система реагирует на действия пользователя, подсказывает, куда можно нажать и с чем можно взаимодействовать. На интуитивном уровне направляет и помогает разобраться, что к чему.

Контент прежде всего

Пользователь приходит за информацией, а не нажимать на кнопки. Уменьшение визуальной составляющей, не являющейся контентом, поможет вам создать открытый и легкий UI. Информация должна располагаться так, чтобы побуждать пользователя ее исследовать и взаимодействовать с ней напрямую, а не через специальные кнопки. Важная информация должна преподноситься сразу, вторичная и детальная уходить на второй план, но быть доступной в одно действие. Контент не должен быть просто сам по себе, он является частью частью UI — и даже больше: контент и есть UI. И в отличие от традиционных иконкографичных систем: системы с metro-дизайном больше ориентированы на инфографику, в которой даже элементы на стартовом экране наполнены жизнью и информацией, а во внутреннем содержании приоритет отдан контенту, а не оформлению и кнопкам 😉 Если первый подход наполнен реалистичными метафорами из реального мира — этаким гиперреализмом в дизайне, в котором аналоговый контент преображается в цифровые аналоги и работа строится вокруг организации и манипуляциями над контентом, то второй стремится предоставить контент в том виде, как он есть, помня о том, что цифровая форма может давать дополнительные преимущества и возможности, и не всегда прямая аналогия — самый лучший способ. Инфографичный подход расширяет объекты (например, людей и места) релевантной имеющейся информацией, позволяет накладывать информацию и напрямую с ней взаимодействовать. Это не означает, что фотографический (медиа) контент теряет актуальность в metro-дизайне. Напритив, он только приобретает важность, так как контент имеет абсолютный приоритет над элементами UI. Фотография — это контент, а не подложка для кнопки.

Цифровая честность

Наконец, metro-дизайн исповедует честность в дизайне. UI создается для пикселей, поэтому в Metro мы стараемся избежать использования аналогий с реальным миром в виде теней и бликов, используемых в некоторых UI для мимикрии под материалы и объекты реального мира (т.н. skeuomorphic-дизайн). Честность предполагает также и дизайн под форм-фактор, учет особенностей взаимодействия с устройством с помощью пальцев рук и, конечно же, прямое изложение информации.

Настоящее и будущее

Хотя переход от Windows Mobile 6.5 к Windows Phone 7 — это сам по себе большой шаг, команда дизайна, занимающаяся Metro, смотрит также и в будущее, предполагая осторожную и продуманную эволюцию. Metro не есть что-то, спроектированное, чтобы быть отличным от всего остального. Это фундамент для будущего развития на протяжении долгого времени, начальная точка на пути туда, что нам кажется следующей эрой в дизайне пользовательских интерфейсов, сфокусированном более на контенте, нежели на метафорах, информации, а не инструментах, и движении, а не статике. Это язык, спроектированный, чтобы четко обозначить информацию вокруг нас, убрав сопровождающий мусор. Интерфейсы вроде тех, что мы все видели в научной фантастике вроде Аватара или Железного человека 2 — это дело нескольких лет, но Metro уже сегодня кажется хорошей стартовой точкой.

Metro-подход в реальных проектах

Идеи metro-дизайна уже во всю применяются в различных проектах (это даже не беря в рассчет тысячи приложений под Windows Phone 7). И, хотя, в первую очередь, во всех этих случаях в глаза бросается узнаваемость стилистики, самое важное — это чтобы за использованием тех или иных графических элементов не терялась суть, то есть те принципы, о которых мы говорили с самого начала: