Pull to refresh
0
Microsoft
Microsoft — мировой лидер в области ПО и ИТ-услуг

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

Reading time 6 min
Views 42K
Если вы видели 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 пошла дальше и разработала набор принципов для направления в правильное русло интерактивного дизайна, дизайна движения и общих впечатлений от работы с телефоном.

(Честно говоря, мне трудно было дословно перевести все принципы, но я постараюсь сохранить содержательную сущность.)

Принципы 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.

Полезные ссылки


См. также мой доклад на предыдущем BizSpark Camp по Windows Phone.


И не пропустите трансляцию с Windows Phone 7 Camp 5 сентября.
Tags:
Hubs:
+67
Comments 62
Comments Comments 62

Articles

Information

Website
www.microsoft.com
Registered
Founded
Employees
Unknown
Location
США