Спонсор: Microsoft
Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 429 / 35 | Длительность: 09:19:00
Специальности: Программист
Лекция 1:

Новый подход к дизайну пользовательского интерфейса Windows

Лекция 1: 12 || Лекция 2 >

Что нового может предложить Windows 8

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

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

Ниже представлены главные элементы интерфейса, которые позволяют строить приложения для Магазина Windows, направленные на максимальное соответствие ожиданиям пользователей.

  • Рабочая поверхность (полотно,холст).
  • Чудо-кнопки Поиск, Общий доступ, Параметры, Устройства.
  • Распознавание прикосновений и жестов.
  • Панель приложения.

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

Полотно

Полотно (canvas) - это рабочая поверхность устройства, посредством которой пользователь взаимодействует с операционной системой и приложениями. В Windows 8 пользователь может выполнять ключевые действия, такие, как запуск приложений, поиск, предоставление общего доступа, навигацию по контенту, используя только рабочую поверхность. Пользователь здесь непосредственно манипулирует контентом, используя рабочую поверхность приложений, что заменяет добавление команд для работы с контентом. На рабочей поверхности могут быть отображены два приложения: одно в виде прикрепленного приложения (Snappedapplication), другое - в виде основного (Mainapplication), его еще называют заполняющим (Filled) приложением.

Полотно включает в себя всё на рабочей поверхности устройства

увеличить изображение
Полотно включает в себя всё на рабочей поверхности устройства

Чудо-кнопки

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

Чудо-кнопки позволяют дизайнерам убрать лишние, ненужные элементы из приложений, так как являются встроенными элементами ОС и расположены в интерфейсе всегда в одном и том же месте. Дизайнерам не придется тратить усилия на внедрение этих элементов в свои приложения.

Проведите пальцем или укажите мышью на нижний правый угол для того, чтобы увидеть панель чудо-кнопок

увеличить изображение
Проведите пальцем или укажите мышью на нижний правый угол для того, чтобы увидеть панель чудо-кнопок

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

Помните, что здесь мы только бегло рассказываем вам о возможностях чудо-кнопок, более детально вы узнаете о них в "Использование чудо-кнопок и контрактов" .

Чудо-кнопка Поиск (Search)

Чудо-кнопка Поиск позволяет пользователю не только искать информацию в активном приложении, но и по всему содержимому в системе. Вы уже видели пример ранее в этой лекции,когда искали приложение Финансы (Finance) и запускали поиск в Магазине Windows. Проделайте следующее, чтобы протестировать возможности поиска.

  1. Находясь на начальном экране, вызовите панель чудо-кнопок нажатием Win+C и нажмите Поиск.
  2. Так как поиск инициирован с начального экрана, он будет производиться по приложениям - Приложения (Apps) выделены в качестве цели поиска. Введите puzzle,и в результатах поиска появится приложение PuzzleTouch.
  3. Теперь выберите InternetExplorer в перечне доступных приложений, результаты поиска puzzle появятся в окне обозревателя.
  4. Нажмите Win + C, чтобы вернуться на начальный экран.

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

Чудо-кнопка Общий доступ (Share)

Чудо-кнопка Общий доступ (Share) дает возможность отправлять содержимое приложения другому пользователю или в другое приложение и принимать общедоступный контент. Так же, как и в случае с другими чудо-кнопками, Общий доступ активируется на стадии разработки приложения; но как дизайнер вы должны определить - что именно может быть предоставлено для общего доступа. Хотите ли вы, чтобы ваше приложение было целевым при обмене данными, может ли другое приложение отправлять контент вашему? Или вы хотите, чтобы ваше приложение стало источником общедоступных данных, выступая в таком случае создателем источника данных?

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

  1. Запустите приложение Photos. Вы можете видеть изображения, загруженные в папку Библиотека изображений (Pictureslibrary).
    Приложение Photos

    увеличить изображение
    Приложение Photos
  2. В этой библиотеке выберите изображение, которое вы хотите превратить в паззл.
  3. Нажмите Win + C и нажмите Общий доступ (Share). Заметьте, что приложение Photos является источником и может отправлять изображения в другие приложения, например, в почтовое приложение или в PuzzleTouch.
  4. Нажмите PuzzleTouch. Вам будут представлены различные варианты действий с изображением. Выберите Intermediate (12 частей, с вращением). Приложение сразу же начнет обработку изображения.
  5. Когда процесс закончится, о чём можно судить по исчезновению прогресс-бара и вариантов действия с изображением,откройте панель чудо-кнопок.
  6. Введите в поиск puzzle, выберите PuzzleTouch, и приложение запустится.
  7. Переместитесь вправо, чтобы обнаружить паззлы среднего размера, и выберите только что созданный пазл. PuzzleTouch настроена в качестве целевого приложения, принимающего данные, и вы можете передавать данные прямо в приложение.

Можете собрать паззл или вернуться на главный экран, воспользовавшись панелью чудо-кнопок.

Чудо-кнопка Устройства (Devices)

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

Чудо-кнопка Параметры (Settings)

Эта чудо-кнопка даёт доступ ко всемпараметрам приложения, что очень удобно для пользователя:он сможет задавать здесь параметры как для конкретного приложения, так и для глобальных настроек.

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

Параметры приложений Finance, PuzzleTouch и Solitaire

увеличить изображение
Параметры приложений Finance, PuzzleTouch и Solitaire
Распознавание прикосновений и жестов

Если у вас есть устройство, обладающее сенсорным экраном, вы можете без проблем пользоваться возможностями операционной системы и приложений, связанными с сенсорным управлением. Распознавание прикосновений и жестов является встроенной частью платформы Windows 8 и приложений для Магазина Windows. ОС поддерживает четкий набор жестов и прикосновений, единообразный во всей системе. Применив данный набор, вы сделаете приложение легким в освоении и в использовании. Более подробно об этом вы узнаете в "Стать быстрым, подвижным и полностью цифровым" .

Если ваше устройство не имеет сенсорного дисплея, не беспокойтесь: Windows 8 полностью поддерживает работу с мышью и клавиатурой. Это взаимодействие имеет много общих черт с управлением жестами и касаниями, в то же время обеспечивая особый стиль взаимодействия с системой, который знаком пользователям и разработчикам приложений.

Панель приложения (Appbar)

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

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

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

  1. Зайдите в приложение Photos и выберите одну из коллекций фотографий.
  2. Вызовите панель приложения и запомните опции, которые сейчас доступны.
    Панель приложения отображает команды тогда, когда они нужны пользователю

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

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

Более детально об этом рассказывается в "Организация соответствий функций сценарию" .

Ориентация экрана в Windows 8

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

Ландшафтная ориентация экрана

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

Вы можете решить оставить ваше приложение в ландшафтном режиме даже тогда, когда экран устройства повёрнут, но отметим, что пользователи могут воспринимать это как ошибку. Solitaire - пример приложения, которое "предпочитает" ландшафтный режим, поскольку карты сложно располагать в портретном режиме.

Приложение Solitaire остаётся в ландшафтной ориентации даже тогда, когда экран устройства поворачивают

увеличить изображение
Приложение Solitaire остаётся в ландшафтной ориентации даже тогда, когда экран устройства поворачивают

Портретная ориентация экрана

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

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

Начальный экран в портретном режиме

увеличить изображение
Начальный экран в портретном режиме

Режим прикрепленного приложения

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

Приложение News находится в прикрепленном режиме. Приложение Solitaire - в режиме основного приложения

увеличить изображение
Приложение News находится в прикрепленном режиме. Приложение Solitaire - в режиме основного приложения

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

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

Режим прикрепленного приложения

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

Итоги

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

Также здесь вы познакомились с различными режимами ориентации экранов.

Самостоятельная работа

Самостоятельно просмотрите различные приложения в системе с установленной Windows 8, чтобы оценить, насколько эффективно они используют возможности чудо-кнопок. В частности, обратите особое внимание на чудо-кнопки Общий доступ (Share) и Параметры (Settings). Функциональность приложения, зависящую от чудо-кнопок, не следует оставлять на последний этап разработки. Её следует принимать во внимание с начала работы над концепцией приложения и до завершения.

Вопросы

  1. Назовите три основных фактора, повлиявших на дизайн приложений в стиле нового пользовательского интерфейса Windows.
  2. Почему дизайнеру необходимо помнить о возможностях чудо-кнопок при создании приложений для Магазина Windows?
  3. О каких ориентациях экрана следует помнить, разрабатывая дизайн приложениядля платформы Windows 8?

Ответы

  1. На новый дизайн для Windows повлияло многое, например:
    • Швейцарский дизайн
    • Интернациональный типографический стиль
    • Немецкая школа дизайна Bauhaus
    • Идея дорожных указателей
  2. 3 ориентации: ландшафтная, портретная, режим прикрепленного приложения.
  3. Использование чудо-кнопок при разработке приложений для нового пользовательского интерфейса Windows важно, так как это позволяет дизайнеру уменьшить количество контента в приложениях. Чудо-кнопки предоставляют единообразный доступ к параметрам приложений, к поисковой функциональности и к возможностям обмена данными.
Лекция 1: 12 || Лекция 2 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва