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

Блог Константина Кичинского

Блог   Дизайн-ресурсы

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

  • Comments 1

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

image

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

image

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

imageimageimageimage

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

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

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

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

Приоритезируйте, выделив основные задачи, старайтесь достигать большего меньшими средствами и убирать все лишнее. И, конечно, свободное пространство – тоже один из важных компонентов проектируемого UI.

Качественная типографика
imageMetro-дизайн в значительной степени инспирирован лучшими образцами качественной типографики. Похоже, пришло время пользовательскому интерфейсу также быть завязанным на типографику. Шрифт – это информация. Красота, четкость и правильность выбора шрифта – путь к открытому и понятному информационному дизайну.

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

Для платформы WP7 была разработана модификация семейства шрифтов Segoe – Segoe WP, доступного, как в инструментах дизайна и разработки, так и на  самом устройстве.

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

Движение дает ощущение глубины и погружения в контент, переход к деталям или назад к верхнему уровню. Джижение ориентируется на чувства размера и ориентации в пространстве.

Отзывчивые элементы UI наполняют жизнью взаимодействие с системой.

Контент, а не фантики
В телефоне людям нужен контент, а не кнопки. Уменьшение визуальной составляющей, не являющейся контентом, поможет вам создать открытый и легкий UI. Это также предполагается, что контент является частью UI и с ним можно напрямую взаимодействовать.

image

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

image

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

image

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

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

Честность предполагает также и дизайн под форм-фактор, учет особенностей взаимодействия с устройством с помощью пальцев рук и, конечно же, прямое изложение информации.

UI не должен быть тем, чем он не является. Будьте честными со своими пользователями.

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

image

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

image

 

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

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

Интерфейсы вроде тех, что мы все видели в научной фантастике вроде Аватара или Железного человека 2 – это дело нескольких лет, но Metro уже сегодня кажется хорошей стартовой точкой.

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

p.s. Написано с использованием фрагментов статьи From Transportation to Pixels – советую также почитать в оригинале, там дополнительно есть хороший обзор эволюции пользовательских интерфейсов – от самых первых образцов до научной фантастики.

   
Leave a Comment
  • Please add 8 and 4 and type the answer here:
  • Post
Page 1 of 1 (1 items)