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

Когда несколько лет назад команда дизайна решила попробовать начать с чистого листа, вместо того, чтобы смотреть на то, что уже есть на различных, в общем-то, однообразных платформах, она сконцентрировалась на том, что действительно вдохновляет — лучших образцах дизайна: от Josef Müller-Brockmann (швейцарский дизайнер, известный своим простым дизайном с ярким использованием типографики, формы и цвета, вдохновивший своими работами многих современных графических дизайнеров) и других пионеров International Style, дизайнерской системы Massimo Vignelli карты нью-йоркского метро и известных брендов вроде American Airlines до концептуальных работ Experimental Jetset.

Схожие источники вдохновления использовались при дизайне Windows Media Center, Zune и Xbox — и в этом смысле это продукты одной дизайнерской мысли.

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

Приоритезируйте, выделив основные задачи, старайтесь достигать большего меньшими средствами и убирать все лишнее. И, конечно, свободное пространство — тоже один из важных компонентов проектируемого UI. Пустого пространства не надо бояться — надо уметь с ним работать. Заполнить все имеющееся пространство чем-либо не должно быть самоцелью. Многие вещи можно упростить, показать схематично или заведомо символично.
Продумывайте функционал вашего приложения и выстраивайте его в соответствии с важностью и частотой использования, выставляя на первое место именно то, зачем пришел пользователь, и убирая все остальное на второй план.
Metro-дизайн в значительной степени инспирирован лучшими образцами качественной типографики. Похоже, пришло время пользовательскому интерфейсу также быть завязанным на типографику. Шрифт — это информация. Красота, четкость и правильность выбора шрифта — путь к открытому и понятному информационному дизайну.

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

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

Контент не должен быть просто сам по себе, он является частью частью UI — и даже больше: контент и есть UI.

И в отличие от традиционных иконкографичных систем:

системы с metro-дизайном больше ориентированы на инфографику, в которой даже элементы на стартовом экране наполнены жизнью и информацией, а во внутреннем содержании приоритет отдан контенту, а не оформлению и кнопкам ;)

Если первый подход наполнен реалистичными метафорами из реального мира — этаким гиперреализмом в дизайне, в котором аналоговый контент преображается в цифровые аналоги и работа строится вокруг организации и манипуляциями над контентом, то второй стремится предоставить контент в том виде, как он есть, помня о том, что цифровая форма может давать дополнительные преимущества и возможности, и не всегда прямая аналогия — самый лучший способ. Инфографичный подход расширяет объекты (например, людей и места) релевантной имеющейся информацией, позволяет накладывать информацию и напрямую с ней взаимодействовать.

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

UI не должен быть тем, чем он не является. Будьте честными со своими пользователями.
Не всегда прямой перенос решения с другой платформы на WP7 без учета особенностей дизайна будет самым лучшим решением. Попробуйте встроиться в платформу и в те особенности дизайна, которой она живет.

Заставьте metro работать на себя.

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

Уже сегодня вы можете попробовать MetroTwit — клиент для Twitter, сделанный в metro-стиле, или MetroTwit Show — интересное приложение для демонстрации потока твитов (например, во время конференции или просто в качестве экранной заставки).

Специальная metro-тема есть для приложений, сделанных c помощью Visual Studio LightSwitch.

И давно существует своя metro-тема для любых приложений на Silverlight и WPF. А многие наши партнеры (например, telerik), выпускающие контролы для платформы Microsoft, также трудятся над тем, чтобы они были в стиле Metro UI. Вот еще один пример metro в Silverlight от Alex Knight.

Еще один интересный пример — сайт про Windows Live Hotmail. Кстати, в нем используется HTML5.
Наконец, вы наверняка уже видели наш обновленный сайт MSDN или сайт P&P Summit. Совершенно верно, metro-проникает в сайто-строение не меньше, чем на десктопе или мобильные платформы.
И, хотя, в первую очередь, во всех этих случаях в глаза бросается узнаваемость стилистики, самое важное — это чтобы за использованием тех или иных графических элементов не терялась суть, то есть те принципы, о которых мы говорили с самого начала:

Хотя мы не можем рассказать каких-либо дополнительных деталей сегодня, вы, наверняка,
уже видели обзор интерфейса следующей версии Windows. В блоге Building Windows 8 (кстати, есть версия на русском) вы сможете найти некоторые дополнительные детали в статье Designing for Metro style and the desktop.
См. также мой доклад на предыдущем BizSpark Camp по Windows Phone.
И не пропустите трансляцию с Windows Phone 7 Camp 5 сентября.

Когда несколько лет назад команда дизайна решила попробовать начать с чистого листа, вместо того, чтобы смотреть на то, что уже есть на различных, в общем-то, однообразных платформах, она сконцентрировалась на том, что действительно вдохновляет — лучших образцах дизайна: от Josef Müller-Brockmann (швейцарский дизайнер, известный своим простым дизайном с ярким использованием типографики, формы и цвета, вдохновивший своими работами многих современных графических дизайнеров) и других пионеров International Style, дизайнерской системы Massimo Vignelli карты нью-йоркского метро и известных брендов вроде American Airlines до концептуальных работ Experimental Jetset.

Схожие источники вдохновления использовались при дизайне 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 наполняют жизнью взаимодействие с системой. См. также множество видео с обзорами на канале Windows Phone на Youtube.
Контент прежде всего
Пользователь приходит за информацией, а не нажимать на кнопки. Уменьшение визуальной составляющей, не являющейся контентом, поможет вам создать открытый и легкий UI. Информация должна располагаться так, чтобы побуждать пользователя ее исследовать и взаимодействовать с ней напрямую, а не через специальные кнопки. Важная информация должна преподноситься сразу, вторичная и детальная уходить на второй план, но быть доступной в одно действие.

Контент не должен быть просто сам по себе, он является частью частью UI — и даже больше: контент и есть UI.

И в отличие от традиционных иконкографичных систем:

системы с metro-дизайном больше ориентированы на инфографику, в которой даже элементы на стартовом экране наполнены жизнью и информацией, а во внутреннем содержании приоритет отдан контенту, а не оформлению и кнопкам ;)

Если первый подход наполнен реалистичными метафорами из реального мира — этаким гиперреализмом в дизайне, в котором аналоговый контент преображается в цифровые аналоги и работа строится вокруг организации и манипуляциями над контентом, то второй стремится предоставить контент в том виде, как он есть, помня о том, что цифровая форма может давать дополнительные преимущества и возможности, и не всегда прямая аналогия — самый лучший способ. Инфографичный подход расширяет объекты (например, людей и места) релевантной имеющейся информацией, позволяет накладывать информацию и напрямую с ней взаимодействовать.

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

UI не должен быть тем, чем он не является. Будьте честными со своими пользователями.
Не всегда прямой перенос решения с другой платформы на WP7 без учета особенностей дизайна будет самым лучшим решением. Попробуйте встроиться в платформу и в те особенности дизайна, которой она живет.

Заставьте metro работать на себя.

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

Уже сегодня вы можете попробовать MetroTwit — клиент для Twitter, сделанный в metro-стиле, или MetroTwit Show — интересное приложение для демонстрации потока твитов (например, во время конференции или просто в качестве экранной заставки).

Специальная metro-тема есть для приложений, сделанных c помощью Visual Studio LightSwitch.

И давно существует своя metro-тема для любых приложений на Silverlight и WPF. А многие наши партнеры (например, telerik), выпускающие контролы для платформы Microsoft, также трудятся над тем, чтобы они были в стиле Metro UI. Вот еще один пример metro в Silverlight от Alex Knight.

Еще один интересный пример — сайт про Windows Live Hotmail. Кстати, в нем используется HTML5.
Наконец, вы наверняка уже видели наш обновленный сайт MSDN или сайт P&P Summit. Совершенно верно, metro-проникает в сайто-строение не меньше, чем на десктопе или мобильные платформы.
И, хотя, в первую очередь, во всех этих случаях в глаза бросается узнаваемость стилистики, самое важное — это чтобы за использованием тех или иных графических элементов не терялась суть, то есть те принципы, о которых мы говорили с самого начала:
- Легкий, простой, открытый и быстрый
- Качественная типографика
- Живой в движении
- Контент прежде всего
- Цифровая честность
Windows 8

Хотя мы не можем рассказать каких-либо дополнительных деталей сегодня, вы, наверняка,
уже видели обзор интерфейса следующей версии Windows. В блоге Building Windows 8 (кстати, есть версия на русском) вы сможете найти некоторые дополнительные детали в статье Designing for Metro style and the desktop.
Полезные ссылки
- Application Design for Windows Phone by Megan Donahue
- .toolbox design trainings
- Windows Phone Design Day Recordings
- WP7 UI Guide & Design Templates
- User Experience Design Guidelines for Windows Phone
- Книга Designing for Windows Phone
- Обновленные бесплатные инструменты для разработки и дизайна
— Windows Phone SDK 7.1 RC, включающие
Microsoft Expression Blend SDK for Windows Phone 7.1
См. также мой доклад на предыдущем BizSpark Camp по Windows Phone.
И не пропустите трансляцию с Windows Phone 7 Camp 5 сентября.