Новый подход к дизайну пользовательского интерфейса Windows
Презентацию к данной лекции можно скачать 
здесь.
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. Сделайте следующее, чтобы найти и установить эти приложения.
- На начальном экране нажмите Магазин (Store), откроется Магазин Windows.
- Нажмите клавиши Win+С или проведите пальцем справа налево от края экрана, чтобы появилась панель чудо-кнопок. Если вы работаете с Windows 8, которая установлена на компьютере, не оснащённом сенсорным экраном, для вызова панели чудо-кнопок переведите указатель мыши в нижний правый угол экрана или нажмите Win + C.
- Нажмите на значок поиска и введите в поле для ввода photo. Появятся результаты поиска.
- Нажмите на появившееся приложение Photos, откроется страница приложения. Если появится сообщение, что это приложение у вас уже установлено, то переходите к шагу 6. Если нет - нажмите Install (Установить). Вверху справа появится уведомление о том, что вы устанавливаете приложение.
- Снова вызовите панель чудо-кнопок.
- Введите в поле для ввода Puzzle. Если не выбран поиск в магазине, нажмите на значке магазина, в списке, расположенном ниже поля ввода поискового запроса.
- Выберите PuzzleTouch из результатов поиска, и если оно еще не установлено, установите это приложение.
- Нажмите Win + C или проведите пальцем справа налево от края экрана, чтобы появилась панель чудо-кнопок, затем нажмите Пуск (Start) для того, чтобы вернуться на начальный экран.
Просмотр установленных приложений
Чтобы посмотреть установленные приложения, сделайте следующее.
- Вызовите панель чудо-кнопок и нажмите на значок поиска.
- Выберите Приложения (Apps) и введите в строку поиска finance (финансы). Если это приложение установлено, то оно появится в результатах поиска слева.
- Если оно не появилось, нажмите на значок Магазин (Store), после чего повторите поиск. Когда приложение появится в результатах поиска, его можно будет установить из магазина приложений Windows.
- Для установки щелкните по значку приложения и начните установку.
- Вернитесь на начальный экран нажатием на кнопку Пуск.
Загрузка фотографий
Если на вашем устройстве еще нет изображений, их можно загрузить в папку Pictures (Изображения).
- На начальном экране нажмите на плитку Рабочий стол (Desktop) или нажмите Win + D.
- Загрузите изображения в папку, находящуюся по адресу Библиотеки >Изображения (Libraries > Pictures), из сети или с USB устройства.
- Нажмите Win для того, чтобы вернуться на начальный экран, и откройте приложениеPhotos. Теперь у вас есть изображения для дальнейшей работы с лекцией.
Ключевые концепции дизайна приложений для Магазина Windows
NewWindows UI (новый дизайн пользовательского интерфейса Windows), Modern UI - кодовое название языка дизайна корпорации Microsoft. Новый дизайн Windows основан на так называемом Швейцарском дизайне, в котором сделан акцент на минимализм, ровность линий, читабельность текста, простые и красивые элементы. На новый дизайн также повлияли: Немецкая школа дизайна Bauhaus и интернациональный типографический стиль.
В интернациональном типографическом стиле сделан акцент на чистоту, читабельность и объективность. Отличительными признаками этого стиля являются асимметричное расположение элементов, применение сетки, шрифты без засечек, выравнивание по левому краю. Этот стиль также предпочитает использование фотографий вместо иллюстраций или рисунков.
К особенностям интернационального типографического стиля относят:
- использование математически выверенной сетки для того, чтобы все всегда было на своих местах;
- шрифты без засечек (особенно Helvetica, появившаяся в 1961) с выравниванием по левому краю, с "рваным" правым краем;
- черно-белые фотоснимки вместо рисованных иллюстраций. Все просто и рационально, жестко структурированно и серьезно, четко, объективно и гармонично.
При ознакомлении с современным дизайном важно упомянуть о немецком учебном заведении Bauhaus, работавшем с 1919 по 1933-й год и объединявшем прикладное и изобразительное искусство. В наши дни немецким термином "Bauhaus" называют определенное направление дизайна и архитектуры. Дизайнеры, работающие в этом стиле, стремятся к минимализму и стараются обойтись без ненужных элементов, что вы можете видеть и в новом дизайне Windows. Раньше движение Bauhaus влияло на печатные издания, изготовление механических изделий и мебели, теперь же - на представление информации на экране.
В Windows 8 используется большое количество текста и выравнивания по сеткам, следовательно, в приложениях для данной операционной системы дизайнерам нужно делать то же самое.
В новом дизайне для Windows также присутствуют идеи дорожных указателей, которые интуитивно понятны любому человеку. Эти знаки отображают только нужные и полезные элементы, чтобы путешественники получали только информацию, которая им требуется, и не отвлекались на ненужное.
В этой лекции вы узнаете, как платформа Windows 8 помогает приложениям, интерфейс которых построен по новым правилам, сконцентрировать внимание пользователя на самом важном, используя комбинацию из концепций Швейцарского дизайна, движения Bauhaus и идей дорожных указателей. Также вы узнаете, как платформа Windows 8 с помощью использования собственных компонентов позволяет дизайнерам концентрировать внимание пользователя на том, что важно в данный момент.
Задание: Изучение WinRT-приложения
В этой части вы изучите настоящее приложение и увидите, как текст и изображения используются в новом дизайне Windows.
- На начальном экране выберите одно из недавно установленных приложений, при необходимости воспользовавшись прокруткой. Помните, что, подключив мышь, вы можете пользоваться полосой прокрутки внизу экрана.
- Запустите приложение Финансы (Finance), нажав на его плитку.
Приложение Финансы (Finance) имеет свой уникальный стиль, но текст и изображения используются в том же формате, который существовалв начальном виде экрана.
увеличить изображение
Приложение Финансы (Finance) использует текст и изображения в структурированной, лёгкой для восприятия форме - Запустите другие приложения и изучите их.
- Когда закончите, нажмите клавишу Win, чтобы вернуться на начальный экран.
