Роль дизайна при разработке приложений
А в более общей форме этот интерфейс восходит еще к Windows Media Center, там впервые появилась концепция "плиток".
Вторым направлением, откуда черпали вдохновение создатели Metro, стал универсальный, чистый, ясный язык транспортных схем.
Из транспортных систем интерфейс Metro заимствовал не только внешнее оформление, но и внутреннюю суть информационной системы.
Как правило, если вы находитесь на транспортном узле, то ваша основная задача - это быстро найти дорогу туда к своей цели. И все, что вам нужно от информационной системы этого транспортного узла: максимально быстро, доступно и удобно показать вам дорогу к вашей цели. Вам не нужны красивые стили, дополнительная информация и т.д. Суть сообщения должна быть ясна и понятна с первого взгляда.
Язык транспортных систем долго совершенствовался. В нем отброшено все лишнее, элементы сделаны настолько ясными и понятными, насколько это возможно. Шрифты читаются с первого взгляда, цветовые решения ориентированы на то, чтобы помочь выделить нужный элемент. В целом, информация доступна и понятна всем, даже плохо знающим язык. Именно эту идеологию заимствовали для интерфейса Metro.
Суть организации интерфейса - в движении вперед.
В получении и раскрытии новой информации, доступе к нужным функциям, удобной интеграции и взаимодействии информационных потоков. У вас всегда должна быть возможность двигаться дальше, получить больше нужной вам информации.
Для языка дизайна Metro разработаны свои базовые принципы, по которым он строится.
- Clean - убрать все ненужные элементы и сосредоточиться на главных задачах. Конечно, вторичные элементы тоже могут пригодиться, но если они сейчас не нужны, не надо их выводить в центр интерфейса. Они не должны отвлекать пользователя от главного, сбивать фокус внимания.
- Light - интерфейс должен быть "легким", т.е. быстрым - и на вид, и для восприятия.
- Open - интерфейс должен быть открытым, т.е. ясным, четким и предсказуемым. Информация должа быть на виду и доступна сразу.
- Fast - быстрая работа интерфейса является краеугольным камнем интерфейса.
- Необходимо уделять внимание шрифтам, их стилю, размерам и т.д. Ведь читаемость и удобство работы со шрифтом представляют собой важнейший элемент работы с системой. Идеальный шрифт должен совмещать отличную читаемость даже мелких элементов, внешнюю аккуратность и привлекательность.
- Интерфейс не должен представлять собой кучу несвязанных между собой меню, он должен быть живой. Элементы должны быть связаны между собой, плавно перетекать друг в друга. Процесс перехода должен быть легким и понятным для пользователя.
- Основной функцией интерфейса является предоставление пользователю нужной информации выполнение им своих задач. Поэтому концентрироваться нужно не на украшательствах интерфейса, дополнительных элементах и пр., а на выполнении им своих основных обязанностей
- Почти все создатели современных интерфейсов в той или иной форме копируют явления нашего окружающего мира с целью сделать интерфейс более привычным и знакомым. Веточки и зеленые листья, тени, физическое поведение в соответствии с законами реального мира - в виртуальных интерфейсах используется очень много элементов, скопированных (причем не всегда удачно) из реальной жизни. В Microsoft при создании языка Metro старались максимально уйти от использования элементов из реальной жизни в виртуальном интерфейсе.
Итак, для достижения указанных выше целей, в новом интерфейсе нужно:
- Максимально исключить ненужные элементы
- Сосредоточиться на основных задачах
- Выполнять как можно больше как можно меньшими средствами
- Эстетически задействовать неиспользуемое пространство
- Полностью задействовать площадь экрана
Это обуславливает переход к более схематичным, но более наглядным визуальным элементам.
Дизайн и расположение элементов должны соответствовать структуре "решетки".
Такой способ организации экранного пространства является очень эффективным с точки зрения структурирования и восприятия информации. Его часто используют в журналах и других печатных изданиях.
Экран делится на отдельные зоны. Надо внимательно рассчитывать их взаимное расположение, взаимодействие, удобство использования. Этот принцип лег в основу дизайна Windows Phone 7.
Важной составляющей интерфейса Metro является то, что он живой, активный, вовлекающий пользователя.
- отзывчивый и живой
- создавать системное восприятие
- отражать контекст и улучшать впечатления от использования
- включать глубины и новые измерения
И в этой связи очень большую роль играет правильная анимация интерфейса.
Конечно, анимация должна быть приятной и вызывать у пользователя приятные эмоции. Однако в первую очередь она должна быть уместной. Анимация должна помогать пользователю дойти до контента, но не должна быть важнее контента. Это касается и времени анимации, и промежуточных стадий, и отрисовки на экране. Должен соблюдаться баланс.
Например, для экрана блокировки движение может указывать путь к контенту (если коснуться экрана, то экран блокировки слегка подпрыгнет и вернется вниз, как упругий мячик. Намекая, что для разблокировки надо сдвинуть картинку вверх).
Главное при создании интерфейса - это помнить, что главное - это пользователь, а не интерфейс. Интерфейс должен быть простым, приятным для глаза, быстрым и, самое главное - просто быстро и удобно давать вам сделать то, что вы хотели сделать. Вы должны работать со своим контентом, а не с интерфейсом.
Правильно организованная анимация играет очень важную роль в формировании положительного впечатления у пользователя. Во-первых, она отвлекает и развлекает его. Это важно, например, при загрузке приложения, ожидании ответа и других операциях, которые требуют времени. Во-вторых, при помощи анимации можно менять восприятие пользователя: например, выделять важные переходы.
Анимация не просто помогает скрашивать ожидание - пользователь вообще может не заметить, что он чего-то ожидал. Ему будет казаться, что это просто красивая анимация перехода. Если бы ее не было, то это время субъективно воспринималось бы, как пустое ожидание, и оставляло неприятное впечатление.
Порогом считается время в 500 миллисекунд. Все, что происходит быстрее, кажется пользователю мгновенным. Поэтому если переход, загрузка элемента или другие действия требуют больше, чем этот временной промежуток, анимация, которая поможет скрасить ожидание, нужна обязательно.
В анимации можно использовать законы физики и аналоги процессов, которые будут создавать у пользователя ощущение естественности. Например, эффект переворота (это примерный аналог пролистывания страниц). Он занимает некоторое время, и пользователь вполне естественно воспримет такую анимацию в интерфейсе, не замечая, что она маскирует работу системы.
Но не надо злоупотреблять анимацией. Не надо вставлять ее в интерфейс только ради того, чтобы она там была. Анимация всегда должна выполнять какую-то задачу. Она может отвлекать и развлекать пользователя. Она может наглядно показывать пользователю, что он перешел из одного важного элемента интерфейса или программы в другой. Но не надо ради анимации затруднять реализацию функций пользователя. Так что, внедряя анимацию, всегда спрашивайте себя - а зачем вы это делаете?
Окна, прерывающие работу и выдающие дополнительные уведомления, не должны уводить пользователя от его контента, т.е. не перекрывают окно приложения.
При создании интерфейса надо помнить, что его главная задача - обеспечивать доступ к контенту пользователя и работу с ним. Интерфейс - не цель сама по себе, и многие второстепенные и декоративные элементы, которые кажутся уместными, на самом деле не несут никакой нагрузки.
Приятное впечатление от работы с приложением должно формироваться в первую очередь благодаря простому и удобному выполнению его основных функций. Информационно и визуально перегруженный интерфейс может красиво выглядеть в первые моменты, но быстро начинает раздражать при постоянной работе. Более того, перегруженный интерфейс затрудняет работу с приложением, т.к. затрудняет работу с главными функциями программы. Поэтому в стиле Metro предлагается сводить все второстепенные и декоративные объекты интерфейса к минимуму или убирать их вообще, чтобы они не мешали пользователю взаимодействовать с контентом.
При проектировании нового интерфейса в основу был положен принцип концентрации на главном: пользователю должна предлагаться только самая необходимая информация и те возможности действовать, которые ему необходимы. Меню не надо перегружать дополнительными элементами, ибо в результате пользователь не сможет использовать ни их, ни основные функции.
Приоритетом Metro является то, что в центре модели дизайна должен стоять пользователь, его потребности и интересы. А не интересы дизайнера и его возможности и желания реализовать ту или иную функциональность. Сокращение количества элементов интерфейса позволяет яснее структурировать информацию и сделать ее более доступной.
Контент должен структурироваться и группироваться так, чтобы в интерфейсе всегда можно было не только выполнить одно нужное действие, но и перемещаться между схожими группами.
Строить работу системы нужно вокруг задач пользователя и контента, который он создает. В том числе речь идет об удобной группировке контента по тому, какие задачи он должен решать. Т.е. пользователь сможет получать доступ ко всей информации одного типа из одного места благодаря удобной группировке.
В дальнейшем Microsoft планирует углублять и улучшать эту интеграцию. В том числе, сторонним разработчикам будет предоставляться больше возможностей взаимодействовать с системными компонентами и данными пользователя. Например, приложение для поиска стихов в интернете может получать информацию от музыкального хранилища о песне, для которой нужно найти стихи. Сторонние приложения могут реализовывать и много других функций.
При создании Metro дизайнеры старались уйти от аналогий а визуальных образов реального мира. Наоборот, они активно изучали фантастические произведения, смотрели фантастические фильмы чтобы понять, какие интерфейсы ожидают от современных и будущих устройств, что в них хотели бы видеть, какова должна быть их идеология.
Современные интерфейсы до сих пор основываются на иконках, которые во многом копируют либо обыгрывают реальные объекты и эффекты окружающего нас мира.
И они считаются тем интереснее, чем больше они копируют эти объекты реального мира, чем точнее и реалистичнее воспроизводятся характерные для реального мира черты: отблески, тени и пр. Это трансляция наших представлений из реального мира в виртуальный, который совершенно другой. В интерфейсе Metro создатели попытались отойти от этой традиции и в полной мере использовать те возможности, которые дает именно виртуальный интерфейс.
Суть подхода инфографики состоит в том, что в интерфейсе на первый план выходят другие приоритеты:
- точное отображение контента
- удобство взаимодействия с интерфейсом
- сбор и удобное предоставление всей цифровой информации.
Т.е. для такого интерфейса важнее цифровой контент, информирование и взаимодействие с пользователем, в т.ч. предоставление ему нужной информации и прием команд. Использование объектов реального мира идет только там, где оно оправдано (например, в случае работы с фотографиями).
Говоря о взаимодействии с интерфейсом нужно учитывать и то, как телефон реагирует на воздействие пользователя. Формы и методы приема информации также играют важную роль и во многом формируют мнение пользователя о платформе, интерфейсе, приложениях и системе в целом.
В предыдущей лекции мы рассматривали важные элементы управления Panorama и Pivot теперь познакомимся с оставшимися – это Application Bar и Live Tiles.
Рассмотрим элемент управления Application Bar.
Это небольшая полоска внизу экрана, предназначенная для осуществления действий и реализации выбора пользователя. В идеологии WP7 размещать кнопки (например, подтвердить, отказаться и т.д.) следует именно здесь, а не на самом экране приложения. Помимо кнопок, сюда может быть запрограммировано контекстное меню, которое появляется при нажатии в правом углу. О его наличии предупреждает символ в виде трех точек справа.
Этот элемент надо использовать только для самых важных и универсальных функций приложения. Не стоит использовать их просто для навигации, эти элементы удобнее делать внутри страницы.
Поговорим о Live Tiles.
Это дополнительный элемент приложения. Этот элемент выносится в главное меню и выполняет несколько задач. Во-первых, это кнопка вызова приложения. Именно этот элемент в первую очередь развлекает и привлекает пользователя. Во-вторых, он несет информационную нагрузку. Чаще всего, это уведомление о новых событиях (например, количество непрочитанных писем).
Важной особенностью элемента Live Tiles является то, что на них можно размещать графическую информацию: картинки, анимацию, фото. И динамически обновлять графическую информацию.
Построение и функционирование тайлов настраивается индивидуально, что удобно и для разработчика, и для пользователя. Можно подчеркнуть, выделить нужную функциональность.
Ну и резюме: в мире много хороших идей. Однако для каждой идеи необходима еще и грамотная реализация и доведение ее до стадии рыночного продукта.
Чтобы создать хороший интерфейс нужно не просто иметь идею. Нужно четко представлять, что ты хочешь сделать, как это делать. И довести идею до выхода конкретного приложения на рынок.
Ключевые термины
Application Bar – элемент управления представляющий собой всплывающую панель внизу окна приложения, которая может содержать от одной до четырех кнопок, позволяющих выполнить какие-то действия. Кроме того, тут может присутствовать не иерархическое текстовое меню. Меню может быть привязано к одной из кнопок панели и в основном используется для выбора одной из опций приложения.
Live Tiles – так называемые "живые плитки", которые отражают информацию в режиме реального времени без участия пользователя.
Metro Design Language – внутреннее кодовое название дизайнерского языка компании Microsoft, ориентированного на типографское оформление. Язык разработан Майкрософт для создания пользовательского интерфейса в Zune и Windows Media Center в мобильной операционной системе Windows Phone 7.
Краткие итоги
В данной лекции мы:
- изучили основы Metro – дизайна;
- разобрали аспекты применения шрифтов, изображений, тех или иных элементов управления;
- рассмотрели базовые принципы построения приложений и их дизайна.
Набор для практики
Упражнения
Разработайте своё самостоятельное приложение, с использованием всех изученных элементов управления.