Презентацию к данной лекции можно скачать здесь.

Windows, Bing, PowerPoint, InternetExplorer, VisualStudio, WebMatrix, DreamSpark и Silverlight являются зарегистрированными товарными знаками или товарными знаками MicrosoftCorporation в США и / или других странах. Другие названия продуктов и компаний, упомянутые здесь, также могут быть торговыми марками их соответствующих владельцев.

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

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

Создан для Microsoft компанией Avlade: http://www.Avlade.com.

Copyright 2012 MicrosoftCorporation.

Обзор

Дизайн новой операционной системы Windows 8, названный новым дизайном Microsoft (Modern UI), можно назвать революционным, так как в нем используются сочные цвета, новое оформление и сенсорное управление. Эта операционная система предоставляет дизайнерам новые возможности. Освоив данную лекцию, вы ознакомитесь с основными принципами этого дизайна и научитесь применять полученные знания на практике.

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

Дизайн для Windows, от концепции программного продукта до готового приложения, не только является современным дизайном интерфейса, но и соответствует ожиданиям пользователей в плане положительного опыта взаимодействия с системой (userexperience, UX). Это дает возможность сосредоточиться на полезном информационном содержании приложений, построенных по новым принципам.

Цель лекции

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

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

Введение

Чтобы пройти данный курс, вам необходимо иметь компьютер с установленной Windows 8.

Узнать подробности об этой операционной системе можно, пройдя по ссылке: http://windows.microsoft.com/ru-ru/windows-8/meet.

Для этой лекции вам нужно установить 2 приложения: Photos и PuzzleTouch. Сделайте следующее, чтобы найти и установить эти приложения.

1. На начальном экране нажмите Магазин (Store), откроется Магазин Windows.
   

   
   Нажмите плитку Магазин (Store), чтобы открыть Магазин Windows
2. Нажмите клавиши Win+С или проведите пальцем справа налево от края экрана, чтобы появилась панель чудо-кнопок. Если вы работаете с Windows 8, которая установлена на компьютере, не оснащённом сенсорным экраном, для вызова панели чудо-кнопок переведите указатель мыши в нижний правый угол экрана или нажмите Win + C.
3. Нажмите на значок поиска и введите в поле для ввода photo. Появятся результаты поиска.

   увеличить изображение	увеличить изображение
   Нажмите на значке поиска и введите photo
4. Нажмите на появившееся приложение Photos, откроется страница приложения. Если появится сообщение, что это приложение у вас уже установлено, то переходите к шагу 6. Если нет - нажмите Install (Установить). Вверху справа появится уведомление о том, что вы устанавливаете приложение.
5. Снова вызовите панель чудо-кнопок.
6. Введите в поле для ввода Puzzle. Если не выбран поиск в магазине, нажмите на значке магазина, в списке, расположенном ниже поля ввода поискового запроса.
   

   
   увеличить изображение
   Найдите приложение PuzzleTouch
7. Выберите PuzzleTouch из результатов поиска, и если оно еще не установлено, установите это приложение.
8. Нажмите Win + C или проведите пальцем справа налево от края экрана, чтобы появилась панель чудо-кнопок, затем нажмите Пуск (Start) для того, чтобы вернуться на начальный экран.

Просмотр установленных приложений

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

1. Вызовите панель чудо-кнопок и нажмите на значок поиска.
2. Выберите Приложения (Apps) и введите в строку поиска finance (финансы). Если это приложение установлено, то оно появится в результатах поиска слева.
3. Если оно не появилось, нажмите на значок Магазин (Store), после чего повторите поиск. Когда приложение появится в результатах поиска, его можно будет установить из магазина приложений Windows.
4. Для установки щелкните по значку приложения и начните установку.
5. Вернитесь на начальный экран нажатием на кнопку Пуск.

Загрузка фотографий

Если на вашем устройстве еще нет изображений, их можно загрузить в папку Pictures (Изображения).

1. На начальном экране нажмите на плитку Рабочий стол (Desktop) или нажмите Win + D.
2. Загрузите изображения в папку, находящуюся по адресу Библиотеки >Изображения (Libraries > Pictures), из сети или с USB устройства.
3. Нажмите Win для того, чтобы вернуться на начальный экран, и откройте приложениеPhotos. Теперь у вас есть изображения для дальнейшей работы с лекцией.

Ключевые концепции дизайна приложений для Магазина Windows

NewWindows UI (новый дизайн пользовательского интерфейса Windows), Modern UI - кодовое название языка дизайна корпорации Microsoft. Новый дизайн Windows основан на так называемом Швейцарском дизайне, в котором сделан акцент на минимализм, ровность линий, читабельность текста, простые и красивые элементы. На новый дизайн также повлияли: Немецкая школа дизайна Bauhaus и интернациональный типографический стиль.

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

К особенностям интернационального типографического стиля относят:

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

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

Примеры Швейцарского дизайна

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

увеличить изображение
В приложениях для Магазина Windows внимание привлекают тексты

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

Сильное влияние на стиль нового дизайна Microsoft оказали дорожные указатели

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

Задание: Изучение WinRT-приложения

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

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

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

   
   увеличить изображение
   Приложение Финансы (Finance) использует текст и изображения в структурированной, лёгкой для восприятия форме
3. Запустите другие приложения и изучите их.
4. Когда закончите, нажмите клавишу Win, чтобы вернуться на начальный экран.