Новая концепция дизайна Microsoft Metro и пользовательский интерфейс Windows Phone 7

Принципы построения, основные элементы и другие особенности

Новый интерфейс Metro — одна из ключевых особенностей мобильной ОС Wndows Phone 7. Но не только: сейчас уже очевидно, что эта организация пользовательского интерфейса будет использоваться Microsoft во всех продуктах, включая флагманскую Windows 8, которая выходит на рынок в следующем году. Так что интерфейс Metro в любом случае будет существовать еще долго, и стоит познакомиться с ним подробнее. Пока — на примере мобильной операционной системы Windows Phone 7.

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

В этом материале мы остановимся на объективных характеристиках интерфейса: принципах работы, построении, структуре и основных элементов.

Что такое Metro, зачем он нужен и т. д.

Metro — это новый «язык дизайна» Microsoft. Новая концепция, призванная изменить саму логику построения и работы операционной системы и приложений, а также схему взаимодействия пользователя и электронного устройства.

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

В идеале, человек должен быстро и однозначно воспринять всю приведенную на них информацию, а также получить четкие и однозначные указания на нужные действия. Но не только: внешний вид должен быть приятен, опрятен и оставлять приятное впечатление у пользователя.

Представители Microsoft уже больше года активно рассказывают о концепции и особенностях построения нового интерфейса. Судя по тому, что наборы слайдов и тексты выступлений у самых разных специалистов очень похожи, эта информация тщательно готовилась и выверялась PR-подразделениями. С одной стороны, в современном мире это вполне естественно. С другой — слушатели теряют живую связь и эмоциональный контакт с авторами, с творцами. Видят копию, а не оригинал. С этим пытаются бороться с помощью авторских живых вступлений.

Итак, стиль Metro. Microsoft называет его «наш новый язык дизайна».

Для стиля Metro были разработаны собственные принципы, которыми Microsoft руководствовалась при создании операционной системы и собственных приложений. Этими же принципами компания призывает руководствоваться и создателей сторонних приложений.

Главным принципом системы является концентрация на контенте пользователя. Ведь при работе с электронным устройством пользователь хочет либо получить доступ к своим данным, либо быстро, удобно и минимально отвлекаясь от других дел решить какую-то свою задачу. Поэтому роль интерфейса сводится к тому, чтобы быстро и удобно провести пользователя туда, где он сможет сделать то, что хотел. Интерфейс теряет свое самостоятельное значение «лица» устройства, превращаясь просто в указатель пути к нужной пользователю функции. Следуя этой логике, Microsoft призывает максимально «вычистить» интерфейс: убрать все второстепенные и декоративные элементы, которые только отвлекают пользователя, оставив лишь самое главное. Это должно облегчать для пользователя навигацию и восприятие информации.

Разумеется, интерфейс должен быть приятным на вид и оставлять хорошее впечатление. Однако его красота не должна идти в ущерб простоте, скорости и информативности. Поэтому у дизайнеров остается не так уж много визуальных средств для работы. Тем не менее, Microsoft считает, что и имеющимися средствами можно достичь нужных результатов. Во-первых, следует уделять повышенное внимание шрифтам и атрибутам шрифтов. Размер, стиль и расположение надписи сами по себе могут очень многое сказать. Иногда визуальное впечатление от надписи может оказаться чуть ли не сильнее, чем информационная составляющая — и этим надо пользоваться.

Для Windows Phone 7 Microsoft разработала специальный шрифт семейства Segoe.

Особое внимание при разработке шрифта уделили его читаемости. В результате пользователь может распознать надпись даже с одного беглого взгляда, не нужно вчитываться в буквы. Кроме того, шрифт сохраняет читаемость даже в очень мелких надписях. Наконец, и Microsoft это особо подчеркивает, шрифт получился просто визуально красивым.

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

В концепции Metro очень важная роль возложена на анимацию интерфейса. Она должна «отвлекать и развлекать пользователя». Красиво анимированный интерфейс с интересно выстроенными переходами и эффектами уже сам по себе формирует очень хорошее впечатление от работы с ним. Анимация делает интерфейс живым. Microsoft призывает всячески усиливать это впечатление. Например, активные элементы и кнопки должны реагировать на нажатие: колебаться или прожиматься. Переход с экрана на экран обязательно должен осуществляться с анимационным эффектом (кстати говоря, создатели программ, даже центральных, это часто игнорируют).

В системе предусмотрено очень много разных, подчас очень интересных видов анимации. Например, в почтовом клиенте при переходе от просмотра папки «Входящие» к просмотру отдельного письма имя отправителя и тема письма не уходят с экрана, а как бы «перелетают» на новый экран. При нажатии на кнопку «Отправить» письмо уменьшается и улетает за верхнюю грань экрана. Кстати говоря, анимация реализована системными средстами, т. е. раньше разработчикам приходилось придумывать и создавать все эффекты вручную, теперь же достаточно указать системе, какой вид анимации вы хотите увидеть. Это в разы упрощает жизнь разработчикам, хотя и делает практически невозможными нестандартные сценарии работы.

На анимацию возложены и другие задачи. Анимационные переходы маскируют время, необходимое системе на обработку команд пользователя. В идеале, при правильно построенной анимации, пользователь вообще не будет замечать, что приложение «задумалось». Благодаря красивой анимации он вообще не отметит, что переход от одной страницы к другой занял некоторое время.

Microsoft призывает отказаться от копирования в виртуальных интерфейсах предметов и эффектов реального мира, вместо этого более активно используя те возможности, которые дарит виртуальное пространство. Поэтому для интерфейса Metro пропагандируется переход от иконографики к инфографике. Современные меню почти всегда построены на иконках, т. е. статических картинках, которые позволяют только найти и запустить приложение. Нет, на иконку можно налепить сверху «уведомление», но не стоит судить о холодильнике по магнитикам. В общем, иконка служит своего рода идентификатором приложения, но она статична. Поэтому разработчики считают своим долгом создать для приложения максимально привлекательную иконку, как правило стилизованную под кнопку (с имитацией трехмерности и пр.). Визуальный компонент для них решающий.

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

В этом кратком описании идеологии интерфейса Metro мы воспользовались советом Microsoft и отбросили все второстепенные элементы, сосредоточившись на главном. Тем же, кто заинтересовался принципами построения Metro и хочет узнать о них подробнее, мы предлагаем ознакомиться с отчетом о лекции Меган Донахью, одной из создательниц концепции Metro, где она очень подробно рассказывает о принципах дизайна, о подходах, которые выработали для себя разработчики Windows Phone 7, дает советы разработчикам приложений и пр.

А мы тем временем переходим к описанию того, что получилось — т. е. к внешнему виду интерфейса Windows Phone 7, что в нем есть… и чего нет.

Построение интерфейса Windows Phone 7: основные элементы меню

Система имеет три «основных экрана»: экран блокировки, основное главное меню с тайлами (его традиционно показывают на любых презентациях системы), которое обеспечивает быстрый доступ к самым нужным функциям системы, и общее меню приложений (список всех приложений и функций смартфона). Посмотрим, что каждое из них представляет собой в отдельности.

Экран блокировки

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

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

На экране блокировки может появляться панель статуса, а также информационная панель, где находятся уведомления и меню регулировки громкости, о них мы поговорим чуть ниже.

Кстати, в версии 7.5 Mango кнопки управления плеером перекочевали из информационной панели прямо на экран блокировки. Причем они работают прямо с него. Мне лично такое решение кажется странноватым: на экране блокировки не должно быть активных элементов, иначе это не экран блокировки.

Для разблокировки смартфона надо потянуть экран вверх. Кстати говоря, решение неоднозначное, ведь доставая смартфон из кармана, иногда это делаешь случайно, и дальше уже можно случайно что-то нажать в меню (особенно это актуально при входящем звонке). При разблокировке экран блокировки уходит вверх и открывается либо основное меню, либо приложение, которое было открыто до того, как смартфон ушел в спящий режим.

Можно установить пароль, тогда разблокировка будет осуществляться только после его ввода.

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

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

Основное меню

Основное меню — это центральный элемент пользовательского интерфейса Windows Phone 7. Оно состоит из крупных плиток (тайлов). Это меню можно увидеть в любой рекламе новой операционной системы и смартфонов с ней.

Революционность интерфейса, по мнению Microsoft, состоит в том, что каждый элемент может сочетать в себе несколько функций: сразу показывать пользователю нужную ему информацию и обеспечивать доступ к контенту.

Итак, первая особенность тайла состоит в том, что он показывает пользователю какую-то нужную информацию. Либо, на худой конец, развлекательную — как, например, хаб «People», на иконке которого отображаются уменьшенные фотографии из Facebook. Новая информация загружается в телефон автоматически, т. е. вам не нужно для этого нажимать «Обновить». Такая организация позволяет с одного взгляда оценить, что в системе есть нового и чему следует уделить внимание.

Доступ к созданию «живых» тайлов у сторонних разработчиков появился только в WP 7.5 (Mango). Там же реализована технология переворота: тайл может переворачиваться, и можно запрограммировать фон (картинку, иконку и т. д.) и информационные события для обеих сторон тайла — они могут быть разными. Кстати говоря, в Mango появилась еще одна интересная возможность: каждое приложение может иметь несколько тайлов, отображающих разную информацию из приложения, и можно выбрать для показа тот тайл, что вам нужнее, либо вывести на экран сразу несколько.

Во-вторых, тайл служит для доступа к контенту. Причем его функциональность не ограничивается запуском программ: тайл может делать что угодно — управлять смартфоном, запускать программы, открывать напрямую информацию о контакте (откуда можно позвонить либо выбрать любой другой способ коммуникации) или страницу в интернете. В версии 7.5 Mango появилась возможность создавать несколько тайлов для одного приложения, и теперь пользователь может выбрать для себя наиболее интересную функцию из тех, что предоставляет приложение. Кроме того, разные тайлы могут вести в разные «части» программы.

Наличие и значение информационной составляющей самого тайла привело к значительным изменениям в организации интерфейса. В случае организации интерфейса через иконки разумно делать размер иконки поменьше (чтобы по ней только можно было четко попасть пальцем) — ведь так на экране поместится больше элементов. Однако у Windows Phone 7 другие приоритеты: читаемость информации на тайле и удобство работы с тайлами. Поэтому тайлы гораздо крупнее иконок (в сравнении с той же Windows Mobile 6.5 или конкурирующими платформами). Это дает больше места для размещения информации (или графики), а кроме того, так ими гораздо удобнее пользоваться (проще нажимать на тайл, т. к. он крупнее). В принципе, для смартфона с диагональю экрана 3,7 дюйма размеры тайлов для меня лично близки к оптимальным: и информация читается, и при запуске не нужно целиться, причем не возникает сомнений, туда ли я попал. С мелкими иконками часто получается наоборот: и различить издалека сложно, и пальцем иногда не попадаешь.

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

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

Как уже говорилось, главной особенностью тайлов является возможность динамически обновлять содержимое — разумеется, если есть, что обновлять. Например, тайл телефона будет показывать количество пропущенных звонков, а тайл SMS — количество новых сообщений, как и тайл почты. Кстати, для SMS меняется и сама иконка: это простой смайлик, если новых сообщений нет, усмешка, если их где-то от одного до пяти, а если непрочитанных SMS становится много, она сменяется удивленной рожицей. Тайл контакта будет показывать то его имя, то фотографию (если смартфон сумел получить ее из Facebook или если она есть в записной книжке), а если вы получили от абонента сообщение, то тайл отразит и это. Тайл галереи в качестве собственного фона ставит одну из фотографий альбома. На тайле календаря появляется информация о ближайшем событии. В общем, тайлы можно оживлять различными способами: либо выносить полезную информацию из приложения, либо делать что-то веселое.

В реальной жизни тайлы удобны именно информативностью: с первого взгляда видно, кто куда звонил и писал, т. е. оценить состояние системы действительно чрезвычайно просто. Но нужно отметить, что некоторых пользователей может раздражать постоянное мельтешение в главном меню: картинка меняется не только при наступлении событий, но и просто так (например, имя меняется на фото контакта и наоборот). То один тайл перевернется, то другой… Первое время это очень прикольно, но постепенно приедается, а вот когда оно уже приелось — заменить или как-то воздействовать на систему не получится.

Меню приложений

Наконец, третий элемент интерфейса — меню приложений. Это общий список всего, что есть в телефоне: здесь находятся и стандартные приложения, и системные утилиты, и утилиты настройки системы, сюда же попадают все установленные приложения. Это обычный линейный список, отсортированный по алфавиту, т. е. все свалено в общую кучу. Его невозможно отсортировать как-либо иначе, поменять вид или очередность и т. д. Поэтому если ставить приложения активно, он быстро распухает, и им становится неудобно пользоваться.

В Mango в него добавили возможность поиска (вторая иконка в левом поле). Поиск работает примерно так же, как в Windows 7: нужно набрать несколько букв из названия приложения. Т. е. для успешного поиска нужно помнить, как приложние называется. Хотя в Windows 7 такой способ поиска мне нравился, но в телефоне визуальная навигация удобнее. На поиск переходишь только тогда, когда окончательно замусорил главное меню.

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

Также стоит отметить, что в этом списке не показываются игры. Они доступны только внутри хаба Xbox Live. Этот хаб вообще представляет собой что-то типа государства внутри государства, со своими правилами, своим (и очень отличающимся) интерфейсом и т. д. Впрочем, в версии 7.5 его внешний вид поменяли, чтобы он не так сильно выделялся.

Дополнительные элементы

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

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

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

Панель статуса

В WP7 есть панель статуса. В ней отображается время, сигнал сотовой сети, состояние Wi-Fi, Bluetooth и т. д. Здесь же, кстати говоря, отображается треугольник, если вы в роуминге. Конечно, панель со схожей функциональностью есть в любой ОС, но в WP7 она радикально отличается от того, что было раньше.

Во-первых, эта панель не находится на экране постоянно: она появляется из верхней грани экрана при нажатии в этом месте — и через несколько секунд прячется назад. Постоянно на экране остаются только часы, но авторы стороннего приложения могут указать, чтобы и часы с экрана исчезали. Меган Донахью в одном из выступлений пояснила логику такого решения: часы пользователям хотелось бы видеть постоянно — надо же ориентироваться во времени. Вся остальная информация несущественна — зачем постоянно знать о наличии сигнала сотовой сети или Wi-Fi, если все работает? А если не работает, то достаточно коснуться верхней части экрана, чтобы проверить статус системы. То же касается и батареи: пока все в порядке, не стоит и волноваться о уровне заряда, а когда батарея подходит к концу, телефон сам уведомит об этом владельца.

Во-вторых, иконки в этой панели не интерактивны, щелчок по ним не вызывает никаких действий. Получить доступ к управлению функциями из инфопанели невозможно. Это, в частности, привело к необходимости искать другие решения: например, телефон выводит отдельное уведомление об обнаруженных сетях Wi-Fi каждый раз, когда просыпается.

Уведомления

В Windows Phone 7 реализована система push-уведомлений. С технической точки зрения она работает следующим образом: Microsoft поддерживает собственный сервис агрегации уведомлений в сети. Если приложению, установленному в смартфоне, требуется получать данные из интернета, то его необходимо зарегистрировать в этом сервисе. В дальнейшем все уведомления централизованно посылаются на сервер и аккумулируются там, ожидая связи с устройством. Поэтому смартфон, синхронизируясь всего с одним сервисом Microsoft, сразу получает всю нужную информацию. Один из основных плюсов такой схемы — экономия батареи телефона. Теперь ему достаточно проверять наличие новых уведомлений только в одном месте и получать их все сразу — не надо проверять кучу сторонних сервисов.

Всего в Windows Phone 7 предусмотрено три вида различных уведомлений: тайл, тост (toast) и app. В первом случае уведомление меняет отображаемую информацию на тайле (например, уведомление о новом почтовом сообщении). Для пользователя это выглядит просто как изменение состояния тайла. Тост — это вид всплывающего уведомления, появляющегося поверх рабочего окна. С технической точки зрения оно срабатывает, когда приложение запущено, но неактивно. Этот тип уведомления выглядит, как полоска, появляющаяся из верхней части экрана в любом приложении, даже на экране блокировки. Она пошире, чем панель статуса, и на непрозрачном фоне (цвет фона будет таким же, как у основного меню). Уведомления-тосты могут быть самые разные: что пришла SMS, что есть пропущенный вызов, что обнаружены сети Wi-Fi и т. д. Первоначально они показывались только для системных приложений, однако в версии Mango организовывать тосты могут и сторонние приложения. Если успеть щелкнуть по уведомлению, пока оно не ушло с экрана (а уходит оно довольно быстро, секунды через две), то вы перейдете в приложение, откуда пришло уведомление, и сможете полностью прочитать или обработать его. Если уведомление высветилось на экране блокировки (оно появится, когда вы включите экран) и на него щелкнули, то сразу телефон не отреагирует, однако после разблокировки откроется тот элемент, который вызвал уведомление.

Наконец, арр-уведомление: это уведомление проходит, когда приложение активно (!), и предполагает его прямую обработку прямо в приложении. Одним из примеров такой работы является получение текста нового письма. Если приложение не запущено, этот тип уведомления не обрабатывается.

Сервер может проверять, дошло уведомление до мобильного устройства или нет.

Панель управления звуком

В верхней части появляется и панель управления звуком. Она выезжает, если нажать на одну из кнопок регулировки звука. На этой панели слева отображается текущий уровень звука, справа — режим работы смартфона (возможен только выбор между мелодией и вибрацией; сделать телефон полностью беззвучным можно лишь через настройки, отключив, например, вибрацию). В Mango изменили отображение: вместо аналоговой шкалы теперь цифровой уровень вида «15/30» (это середина шкалы).

Уровень звука в WP7 единый. Если вы слушаете музыку и убавили звук, то будильник утром зазвенит тише, на выставленном уровне громкости. И то же самое с входящими телефонными звонками. Вообще, отсутствие тонких настроек немного расстраивает, хотя, с другой стороны, в большинстве случаев действительно достаточно того, что предлагает система.

В первой версии здесь же отображались кнопки плеера, однако в Mango их убрали. А жаль: потерялась возможность вызвать управление плеером буквально из любого места. Как уже говорилось, кнопки перенесли прямо на поверхность экрана блокировки.

Что смешно, закрыть плеер вы не можете. Кнопки управления плеером, если вы им пользовались, остаются на месте до перезагрузки смартфона и не убираются. И в любой момент можно продолжить воспроизведение.

Напоминания

Это большое окно, раскрывающееся от верхней грани экрана. Его размер зависит от текста напоминания. Цель напоминания — донести до пользователя срочную информацию и/или указать ему, что следует совершить определенные действия. Типичный пример — информация о новой встрече из календаря.

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

Теперь посмотрим на те элементы, которые отображаются в нижней части экрана.

Application bar

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

Кроме того, отсюда же можно вызывать дополнительное меню приложения. Справа может находиться значок «…», и если нажать на него, панель раскроется на пол-экрана, выводя дополнительное меню приложения. Там могут быть спрятаны дополнительные функции.

Microsoft рекомендует разработчикам активнее использовать эту панель. Например, если в приложении есть окно авторизации, то правильнее размещать кнопки «ОК» и «Отмена» в Application bar, а не на самом окне. Тем более, что если размещать кнопки в окне, то их перекроет всплывшая клавиатура, а Application bar всегда остается видимым.

Клавиатура

Это тоже одно из основных системных окон. Клавиатура появляется всегда, когда необходим ввод информации — например, при открытии окна поиска, окна новой SMS, окна ввода имени пользователя и т. д. Клавиатура довольно большая и занимает около половины экрана. В альбомном (горизонтальном) положении — еще больше.

Выглядит она довольно просто и без всяких украшательств: серые прямоугольники кнопок (для некоторых системных приложений — белые) с буквами или цифрами на них. Некоторые кнопки клавиатуры могут переназначаться: например, при наборе SMS у вас будет отдельная кнопка для вызова списка смайликов, а при наборе адреса — вместо нее появится кнопка, позволяющая сразу вставить в адрес «.com» (если кнопку подержать, то она раскроется, предлагая другие варианты). Сторонние разработчики на данный момент не имеют доступа к клавиатуре и не могут ее модифицировать никоим образом. Единственная доступная для них возможность — выбор вида клавиатуры (например, чтобы показывалась сразу цифровая клавиатура).

Окно звонка

Наконец, есть еще один вид уведомления — окно входящего звонка. В версии WP 7.0 это было обычное окно уведомления, которое раскрывалось на пол-экрана. Там же выводилась информация о звонящем и две кнопки: принять или отклонить вызов. Поскольку окно рассматривалось как обычное уведомление, то если ткнуть в ту часть экрана, где осталось рабочее пространство текущего приложения, оно снова становилось активным, а входящий звонок сворачивался в обычное маленькое уведомление в верхней части экрана.

Однако в Mango вид этого окна радикально переработали. Теперь оно раскрывается на весь экран, перекрывая все другие приложения, так что при активном звонке уже не так просто переключиться куда-либо еще. Переработан внешний вид кнопок, теперь они похожи на обычные тайлы.

В стандартной поставке других возможностей нет, но пользователи HTC могут поставить приложение Attentive Phone. Одной из его функций является то, что телефон выключит звонок, если положить его экраном вниз на стол во время входящего вызова.

При ответе на звонок открывается полноценное меню приема звонка, где, в частности, находятся дополнительные возможности: включить громкую связь, подключить других участников, отключить микрофон и пр. В Mango его изменили, значительно упростив форму кнопок и т. д. На мой взгляд, меню стало выглядеть не так интересно.

Управление смартфоном Windows Phone 7

Аппаратные кнопки управления

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

Итак, три клавиши расположены на боковых гранях: клавиши регулировки громкости (с ними все очевидно) и клавиша фотокамеры. Последняя запускает приложение камеры, что позволяет довольно быстро приготовиться к съемке. Запуск камеры возможен и с экрана блокировки, и даже из спящего состояния. Кстати, кнопка камеры должна поддерживать два вида нажатия: «полуутоплено» для фокусировки и «утоплено» для спуска. При нажатии на экран происходит фокусировка и съемка (в Mango; в версии 7.0 — только фокусировка). Если вести съемку, нажимая на кнопку, смартфон дергается, и кадры часто получаются смазанными. Кстати, между нажатием на экран и спуском затвора есть существенная разница, порядка секунды или даже больше.

Основные три клавиши находятся на лицевой панели и могут быть сенсорными или механическими. К сожалению, почти все производители делают их сенсорными, ибо это привлекательнее выглядит и вроде бы более технологично (не забивается грязь и т. д., хотя в реальности эти проблемы элементарно обходятся). Но сенсорные кнопки срабатывают от касания, даже самого легкого. Поэтому многие пользователи очень часто нажимают их случайно (я, например, постоянно нажимаю на эти кнопки частью ладони под большим пальцем).

Всего кнопок на лицевой панели три:

  • Назад
  • Windows
  • Поиск

Microsoft выдвигает жесткие требования к производителям ПО: кнопки должны везде работать одинаковым образом (некоторые исключения дозволяются только для кнопки «Назад»). Перепрограммировать их работу невозможно.

Кнопка «Windows» всегда выводит вас к главному меню телефона — это удобно, если вам надо вернуться и начать работу с нуля. Во многих случаях она выступает как кнопка «паники» — если пользователь заблудился, запутался, оказался где-то не там и не знает, как выбраться из ситуации. Microsoft особо подчеркивает, что разработчики должны избегать таких ситуаций. Навигация должна быть логичной, а пользователь должен всегда представлять себе, как он сюда попал и как ему отсюда выйти. Впрочем, выход из приложения через эту кнопку — один из штатных путей, так что ничего страшного в ее применении нет.

Кнопка «Назад». Основной ее функциональностью является работа внутри приложения, перемещение вас на экран назад. Т. е. если вы последовательно прошли внутри приложения с первого экрана на второй и потом на третий, то, нажав «Назад», вы вернетесь на второй экран. Конечно, речь идет о переходе между отдельными экранами приложения, а не о навигации внутри одного элемента. Microsoft в некоторых ситуациях разрешает перехватывать обработку кнопки «Назад» и отправлять пользователя не на предыдущую страницу, а на другую страницу, выбранную разработчиком. Однако делать это можно лишь в ограниченном количестве случаев, т. к. навигация должна быть предсказуема и пользователь должен представлять себе, куда он попадет, если нажмет на эту кнопку.

Третья же кнопка всегда вызывает поиск Bing. Раньше у правила было исключение: в Marketplace включался местный поиск. Но теперь это изменили: при нажатии кнопки всегда открывается Bing, а для дополнительного поиска ввели дополнительную кнопку в Application bar. Согласно последним заявлениям Microsoft, в российских телефонах он будет заменен на поиск Яндекс, т. к. Bing не может полноценно работать в России. Насколько я понял из общения с телефонами Nokia, где так уже сделано, там будет не специальный интерфейс: будет открываться просто вкладка в браузере.

Управление через экран

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

В принципе, все нужные движения одним пальцем в Windows Phone 7 поддерживются: система распознает плавные движения, отделяет прокрутку и пр. Однако из функций мультитача, насколько мне известно, она поддерживает только масштабирование изображения.

Дополнительных особенностей интерфейса, связанных с движением пальца, нет.

Управление голосом

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

Тем не менее, в английской версии управление голосом работает, поэтому кратко расскажем о нем — вдруг когда-то эта функция станет актуальной и для российских аппаратов.

Поддерживается четыре основных голосовых команды:

  • Звонить (call)
  • Посылать SMS (text)
  • Искать в вебе (find)
  • Открывать приложения (open)

Т. е. вы произносите одно из этих слов и дальше уже собственно слова команды: что надо выполнить, найти и т. д. Например, для звонков можно указывать напрямую номер или имя контакта (в том числе, можно указать, на какой из записанных номеров надо позвонить), можно надиктовать SMS и т. д.

С запуском приложений вопросов тоже не возникло: система довольно редко ошибается в распознавании. А вот отправить SMS даже на английском языке у меня не получилось.

Голосовой поиск идет через Bing, только на английском языке, и в каких-то запросах наверняка будет ориентироваться на американские реалии. Однако в целом поисковых возможностей достаточно для комфортной работы. Например, команда «find weather Moscow» (узнать погоду в Москве) выдает вполне адекватные результаты.

Организация работы интерфейса Windows Phone 7

Выше мы уже говорили о том, как организовано главное меню, здесь давайте поговорим о том, по каким принципам организована работа внутри приложений. Суть языка дизайна Metro состоит в следовании определенным принципам, которые едины для всей платформы. Поэтому и системные, и сторонние приложения должны работать по одним и тем же правилам и выглядеть схоже.

Хабы

Одним из основных новшеств системы Windows Phone 7 стало создание так называемых хабов, в которых объединяется определенный вид контента, к которому теперь можно добраться из одного места (впрочем, это уже не новость, хабы сейчас применяются повсеместно).

Раньше естественным (а иногда и единственным) способом доступа к контенту для пользователя было использование соответствующего приложения: заходишь в него и получаешь доступ к контенту. А единственный способ собрать приложения под одной крышей — использовать папки.

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

Таким образом, хабы становятся агрегаторами контента. Например, в хабе «Люди» собраны записная книжка, недавние события (с кем вы недавно вели диалоги) и лента событий друзей в Facebook. Лента новых фото отдельно ведется в другом хабе («Изображения»). При этом физически контент находится в одном месте, но доступ к нему можно получать из разных хабов.

Хаб может быть размером с два тайла. Вроде бы, даже в Mango такая возможность зарезервирована только для системных хабов (или особо доверенных: например, HTC Hub занимает место двух плиток). В то же время, даже отнюдь не все системные хабы используют эту возможность, причем иногда — совершенно необъяснимо. Например, «Изображения» имеют большой тайл, а «Музыка и видео» — нет. Более того, игровой хаб Xbox Live тоже выглядит очень скромно, как один тайл.

С технической точки зрения, хабы и приложения могут использовать один из двух визуальных способов представления: Panorama и Pivot.

Panorama

Panorama представляет собой классическое полотно, которое много где показывается в качестве рекламы Windows Phone 7.

Визуально это горизонтально ориентированный рулон, часть которого отображается на экране. По рулону можно перемещаться вправо и влево, при достижении последнего элемента вы перейдете к первому с другой стороны. В элементе Panorama можно размещать любой вид контента: текст, картинки, тайлы (причем не только квадратные, как в меню, но и другой формы).

В Panorama может использоваться фоновая картинка. Интерфейс можно построить таким образом, что разные элементы при прокрутке будут двигаться с разной скоростью. Это создает ощущение глубины и трехмерного пространства.

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

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

«Люди» — в этом хабе сгруппирована информация о ваших контактах из телефонной записной книги, адресной книги и Facebook. Здесь можно посмотреть список контактов (навигация предусмотрена по первым буквам: если нажать на букву, например, «А», то появится алфавит, где можно выбрать первую букву нужного имени), куда попадают все аккаунты — и из почты, и из телефона, и из Facebook. Сортировка возможна по имени или фамилии, но показываются имена всегда в формате «имя-фамилия», т. е. Георгий Иванов может находиться в группах «Г» или «И», но имя на экране всегда будет начинаться с «Георгий». Здесь же находится лента друзей из Facebook, где можно посмотреть новости и т. д. А также список тех, с кем вы недавно общались.

«Изображения» — этот хаб объединяет в себе фотографии и картинки. Сюда попадают и фотографии с вашего большого компьютера, и фотографии, сделанные камерой вашего смартфона. Картинки можно отсортировать по времени создания. Можно настроить синхронизацию с облачным сервисом Live.com: сделанные фотографии будут отсылаться в облако, а загруженные туда с большого компьютера картинки или фотографии — попадать в телефон (впрочем, это, вроде бы, происходит автоматически). Фотографии можно синхронизировать и локально, через Zune, установленный на большом компьютере.

«Marketplace» — это место для поиска музыки и программ для вашего телефона. В изначальной версии Windows Phone 7 поиск осуществлялся по всему сразу, т. е. результаты поиска программ, например, были замусорены музыкальными треками. В Mango это убрали, но зато вынесли на экран кнопку поиска (раньше поиск по Marketplace открывался нажатием на телефонную кнопку «Поиск»).

«Игры» — в первой версии, как уже говорилось, это было государство в государстве. Чтобы подчеркнуть это, хаб использовал в качестве фона насыщенный зеленый цвет, чем резко выделялся среди других хабов. Игры при установке напрямую попадают в него и не отображаются в списке приложений. Кстати, скачивать и запускать игры можно тоже напрямую из хаба. Отсюда же можно управлять и своим игровым аватаром. В Mango внешний эффект непохожести хаба немного смягчили.

«Музыка и видео» — в этот хаб попадает музыкальный и видеоконтент. Видео, снятое камерой смартфона, показывается и здесь, и в хабе «Изображения». В основном контент попадает сюда путем синхронизации с настольным плеером и медиакаталогом Zune. Причем Zune берет файлы из медиатеки компьютера, и в том случае, если сам Zune смог проиграть файл, тот без проблем попадет в телефон. При синхронизации файлы конвертируются в формат, поддерживаемый телефоном, но это происходит прозрачно для пользователя.

«Офис» — одно из основных достоинств системы Windows Phone 7. В поставку сразу входят некоторые приложения MS Office: Word, Excel, PowerPoint и OneNote. Они позволяют не только смотреть, но и редактировать файлы приложения Office с настольных систем. Поддерживается работа с Microsoft Sharepoint.

На этом мы заканчиваем знакомство с элементом Panorama и переходим ко второму способу организации интерфейса.

Pivot

Pivot — это основной элемент организации приложений. На Panorama похож тем, что элементы можно прокручивать по горизонтали по кругу. Но здесь другой принцип: информация либо меню выстраивается по вертикали, а с помощью горизонтальных перемещений можно переходить между сходными типами данных. В Pivot не предусматривается графика, как в Panorama, здесь используются меню, построенные вертикально и вертикально же прокручиваемые.

Разработчики специально предостерегают от использования этого элемента в качестве аналога «wizard». Т. е. горизонтальная прокрутка не должна использоваться для продвижения от ступени к ступени.

Вертикальная и горизонтальная работа с интерфейсом

Интерфейс Windows Phone 7 поддерживает и вертикальную, и горизонтальную работу с интерфейсом. Разворачивать смартфон «на бок» можно в любую сторону, а вот вверх ногами переворачивать не стоит — интерфейс не перевернется.

Как нетрудно догадаться, элемент «Panorama» из-за особенностей своей организации не повернется и в альбомный вид. Так что практически все хабы работают только при вертикальной ориентации корпуса.

А вот игры, наоборот, почти всегда работают именно в горизонтальной ориентации, по крайней мере у меня при проверке почти все работали именно так.

Все остальные элементы переворачиваются. При повороте на 90 градусов панели (инфопанель сверху, Application bar снизу) остаются пристыкованными к тем же «своим» граням (т. е. при горизонтальной ориентации — к левой и правой). А вот клавиатура поворачивается. Печатать становится немного удобнее, проще пользоваться двумя пальцами. Зато в этом положении клавиатура перекрывает бо́льшую часть экрана, хотя в Mango ее немного ужали.

Выводы

На мой взгляд, у Microsoft получилось очень интересное творение. Можно спорить о многочисленных плюсах и не менее многочисленных минусах, но у него как минимум интересная концепция. А главное — у операционной системы Microsoft есть свое лицо, которое выделяет ее на рынке.

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

На этом мы завершаем рассмотрение концепции интерфейса Windows Phone 7. В следующем материале речь пойдет об обновлении Mango, и там подробно будет рассмотрено, что нового версия 7.5 привнесла в построение системы и в интерфейс, ибо важных изменений было действительно очень много. А уже после этого вернемся к пользовательскому интерфейсу Windows Phone 7, но совсем с другой стороны: мы поговорим о субъективных впечатлениях от работы с ним.

Редакция выражает благодарность представительству компании НТС за предоставленный телефон HTC Mozart с ОС Mango 7.5 (локализованная версия), использованный в сравнении в этой статье.

Редакция выражает благодарность представительству компании Micorosft за предоставленный для длительного тестирования телефон HTC Mozart с ОС Windows Phone 7, на примере которого и писался этот цикл статей

29 ноября 2011 Г.

Microsoft Metro Windows Phone 7

Microsoft Metro Windows Phone 7

,

Metro — Wndows Phone 7. : , Microsoft , Windows 8, . Metro , . — Windows Phone 7.

, Windows Phone 7.5 Mango, . , .

: , , .

Metro, . .

Metro — « » Microsoft. , , .

. : , , .

, , . : , .

Microsoft . , , PR-. , . — , . , . .

, Metro. Microsoft « ».

Metro , Microsoft . .

. , , - . , , , . «» , . , Microsoft «» : , , . .

, . , . . , Microsoft , . -, . , . , — .

Windows Phone 7 Microsoft Segoe.

. , . , . , Microsoft , .

: . , , , , . ( ) , .

Metro . « ». . . Microsoft . , : . ( , , , ).

, . , «» , «» . «» . , , . . , , . , .

. , . , , , «». , .

Microsoft , , . Metro . , . . , . , «», . , , . , ( .). .

, , , : , , . , , , , , .

Metro Microsoft , . , Metro , , Metro, , , Windows Phone 7, .

, — . . Windows Phone 7, … .

Windows Phone 7:

« »: , ( ), , ( ). , .

, ; , . ().

: , (, SMS, . .), . , , , . . , , .

, , , .

, 7.5 Mango . . : , .

. , , , , - ( ). , , , .

, .

Windows Phone 7 , . , , .

. , , , .

— Windows Phone 7. (). .

, Microsoft, , : .

, , - . , , — , , «People», Facebook. , . . «». , .

«» WP 7.5 (Mango). : , (, . .) — . , Mango : , , , , .

-, . : — , , ( ) . 7.5 Mango , , . , «» .

. ( ) — . Windows Phone 7 : . ( Windows Mobile 6.5 ). ( ), , ( , . . ). , 3,7 : , , , . : , .

4 . , , ( — ) , , .

, , . , , , : , , - . . , , . , , , . , , .

, — , , . , , SMS — , . , SMS : , , , - , SMS , . , ( Facebook ), , . . . , : , - .

: , , . . . , : , (, ). , … , , — - .

, — . , : , , , . , , . . . - , . . , , .

Mango ( ). , Windows 7: . . . , . Windows 7 , . , .

, , , . , . , .

, . Xbox Live. - , , ( ) . . , 7.5 , .

Windows Phone 7. , . , , . . , . .

: , . , — .

, , . , . , , . .

WP7 . , , Wi-Fi, Bluetooth . . , , , . , , WP7 , .

-, : — . , , . : — . — Wi-Fi, ? , , . : , , , .

-, , . . , , : , Wi-Fi , .

Windows Phone 7 push-. : Microsoft . , , , . , . , Microsoft, . — . — .

Windows Phone 7 : , (toast) app. (, ). . — , . , , . , , , . , , ( , ). - : SMS, , Wi-Fi . . , Mango . , ( , ), , , . ( , ) , , , .

, -: , (!), . . , .

, .

. , . , — ( ; , , , ). Mango : «15/30» ( ).

WP7 . , , . . , , , , , .

, Mango . : . , .

, . , , . .

, . . — / , . — .

, . . . , ( , , ), . , , .

, .

Application bar

. ( ), . , SMS- , . . . .

, . «…», , -, . .

Microsoft . , , «» «» Application bar, . , , , Application bar .

. , — , , SMS, . . . () — .

: ( — ) . : , SMS , — , «.com» ( , , ). . — (, ).

, — . WP 7.0 , -. : . , , , , .

Mango . , , - . , .

, HTC Attentive Phone. , , .

, , , : , , . Mango , . . , .

Windows Phone 7

, Windows Phone 7 , . , , , .

, : ( ) . , . , . , : «» «» . ( Mango; 7.0 — ). , , , . , , .

. , , ( . ., ). , . (, , ).

:

  • Windows

Microsoft : ( «»). .

«Windows» — , . «» — , , - , . Microsoft , . , , . , — , .

«». , . . . , , «», . , , . Microsoft «» , , . , . . , , .

Bing. : Marketplace . : Bing, Application bar. Microsoft, , . . Bing . Nokia, , : .

. Windows Phone 7 , . , — .

, Windows Phone 7 : , . , , .

, , .

. , , — , . . . : , . , .

, , — - .

:

  • (call)
  • SMS (text)
  • (find)
  • (open)

. . : , . . , ( , , ), SMS . .

: . SMS .

Bing, , - . . , «find weather Moscow» ( ) .

Windows Phone 7

, , , . Metro , . , .

Windows Phone 7 , , (, , ).

( ) : . — .

Windows Phone 7 : , , . , . . , . - , Windows 7.

, . , «» , ( ) Facebook. («»). , .

. , Mango ( : , HTC Hub ). , , — . , «» , « » — . , Xbox Live , .

, : Panorama Pivot.

Panorama

Panorama , Windows Phone 7.

, . , . Panorama : , , ( , , ).

Panorama . , . .

Panorama ( Pivot). — , . Panorama - . , .

, Panorama . Windows Phone 7 ( , , , . . , , , . .). , :

«» — , Facebook. ( : , , «», , ), — , , Facebook. , «-», . . «» «», «». Facebook, . . , .

«» — . , , . . Live.com: , — (, , , ). , Zune, .

«Marketplace» — . Windows Phone 7 , . . , , . Mango , ( Marketplace «»).

«» — , , . , , . . , . . Mango .

« » — . , , , «». Zune. Zune , , Zune , . , , .

«» — Windows Phone 7. MS Office: Word, Excel, PowerPoint OneNote. , Office . Microsoft Sharepoint.

Panorama .

Pivot

Pivot — . Panorama , . : , . Pivot , Panorama, , .

«wizard». . . .

Windows Phone 7 , . « » , — .

, «Panorama» - . .

, , , .

. 90 ( , Application bar ) «» (. . — ). . , . ́ , Mango .

, Microsoft . , . — Microsoft , .

, — — . , .

Windows Phone 7. Mango, , 7.5 , . Windows Phone 7, : .

HTC Mozart Mango 7.5 ( ), .

Micorosft HTC Mozart Windows Phone 7,