uzluga.ru
добавить свой файл



Windows 8



WinRT API



API Metro-приложений



демонстрация

WinRT в C#

Что мы увидели

  • WinRT API — асинхронные

  • WinRT API обеспечивают доступ к устройствам, операционной системе и сервисам

  • WinRT API — native для C#, JavaScript и C++



Языковые проекции



Дизайн в стиле Metro



8 характеристик Metro-приложений

  • Дизайн в стиле Metro

  • Быстрое и подвижное

  • Прекрасно при «парковке» и масштабировании

  • Использует правильные контракты

  • Инвестирует в великолепную плитку

  • Кажется соединенным и живым

  • Синхронизируется через облако

  • Принимает принципы Metro



Контент на первом месте



Контент на первом месте

  • Все начинается с контента.

    • Дайте пользователям возможность погрузиться в то, что им нравится
  • Оставьте на экране только самые важные элементы, чтобы уменьшить раздражители

  • Обычно «оболочка» добавляется для:

    • Компоновки
    • Взаимодействий
    • Навигации


Компоновка

  • Обеспечьте достаточно пространства контенту

  • Свободное пространство обрамляет контент и позволяет глазам сфокусироваться в нужном месте

  • Не используйте линии и рамки как способ группировки и организации контента





Компоновка

  • Используйте типографику, чтобы добавить ощущение структуры и иерархии вашему контенту

  • Фиксированный набор размеров, насыщенностей и цветов позволяет передать важность блока информации

  • Используйте стили по умолчанию, чтобы соответсвовать базовым размерам шрифта







Компоновка

  • Позвольте контенту заполнить пространство

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

  • Помните об эргономике.

    • Делайте промотку контента вдоль самой длинной стороны
    • Горизонтальная — в ландшафтном режиме
    • Вертикальная — в привязанном (snapped) режиме




Компоновка

  • Создайте визуальное выравнивание, структуру и ясность, используя силуэт Metro-приложений

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

  • Используйте шаблоны Visual Studio для правильной компоновки







Взаимодействие



Использование граней устройства

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

  • Используйте Charms как входную точку для контрактов поиска, общего доступа, настроек и доступа к устровствам



Всплывающие элементы

Используйте всплывающие блоки как легкий способ показать временные и контекстные элементы управления

Навигация по контенту

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

  • Используйте модель хаба и спиц для иерархии информации:

    • Хаб: основная страница, содержащая верхнеуровневые секции, позволяет погрузиться в «спицы»
    • Спица: показывает контент одной из секций, позволяет перейти к детальному представлению
  • Избегайте постоянных элементов навигации вроде вкладок

  • Используйте семантическое масштабирование для перехода между группами внутри списка в уплощенной иерархии







demo



Семантическое масштабирование

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

    • Постарайтесь уместить контент в 1-3 страницы
    • Линейная компоновка, используйте сетку для больших наборов данных
  • Вы можете добавить операции над группами в уменьшенном виде (выбор или переупорядочивание)

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

  • Семантическое масштабирование не является средством перехода между разными уровнями иерархии



Целенаправленные анимации

  • Анимации привносят жизнь в Metro-приложения и поддерживают чувство отточенности и отполированности пользоватлеьского опыта

  • Правильно используемые анимации создают чувство связанности и помогают выстроить доверие пользователя к интерфейсу приложения

  • Используйте встроенные элементы управления со встроенной поддержкой анимаций!

  • Используйте Animation Library, чтобы получить специально подготовленные анимации для различных сценариев

  • Анимации должны иметь цель, а не быть визуальным украшением



Сначала проектируйте для прикосновений

Следуйте языку жестов в Windows 8 и используйте только этот набор:

Сначала проектируйте для прикосновений

  • Обеспечьте мгновенный визуальный отзыв при нажатии и реакцию при отпускании пальцев

  • Действия должны быть отменяемы, чтобы пользователь мог безопасно исследовать

  • Думайте не только о нажатиях, пользуйтесь жестами. Контент должен следовать за вашими пальцами.

  • Прокрутка только в одном направлении. Это необходимо для операций выделения и более стабильного поведения



demo



Интеграция Живые плитки, уведомления, контракты



Живые плитки



Обычные плитки



Живые плитки



демонстрация



Очередь обновлений на плитках



Дополнительные плитки Secondary Tiles



Всплавающие уведомления Toast Notifications



Шаблоны уведомлений



демонстрация



Контракты – часть большого семейства

  • App to App Picking contract

  • Contact Picker

  • File activation

  • Play To contract

  • Print task settings

  • Protocol activation

  • Search contract

  • Settings contract

  • Share contract



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



демонстрация



Разнообразие языков и библиотек для разработки



Платформа Windows 8



HTML5 и JS



Windows 8



Вы можете создавать прекрасные сайты и Metro-приложения с помощью веб-платформы Windows 8



Аппаратно ускоренная веб-платформа IE9

CSS 2D Transforms

CSS Backgrounds & Borders

CSS Color

CSS Fonts

CSS Media Queries

CSS Namespaces

CSS OM Views

CSS Selectors

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

HTML5 Canvas

HTML5 Geolocation

HTML5 Selection

HTML5 semantic elements

HTML5 video and audio

ICC Color Profiles

Selectors API Level 2

SVG, standalone and in HTML

XHTML/XML

Аппаратно ускоренная веб-платформа Windows 8

Animation Frames

CSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid Alignment

CSS Hyphenation

CSS Image Values (Gradients)

CSS Media Queries

CSS multi-column Layout

CSS Namespaces

CSS OM Views

CSS Positioned Floats (Exclusions)

CSS Selectors

CSS Transitions

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

File Reader API

File Saving

FormData

HTML5 Application Cache

HTML5 async

HTML5 Canvas

HTML5 Drag and drop

HTML5 Forms and Validation

HTML5 Geolocation

HTML5 History API

HTML5 Parser

HTML5 Sandbox

HTML5 Selection

HTML5 semantic elements

HTML5 video and audio

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

Resource Timing

Selectors API Level 2

SVG Filter Effects

SVG, standalone and in HTML

Timing callbacks

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

CSS3



HTML5



демонстрация

Metro-приложение на HTML5 и JS

WinJS



Windows Library для JavaScript (WinJS) библиотека для создания приложений в стили Metro с JS



WinJS



Если вы знаете веб-технологии, вы готовы создавать прекрасные приложения в стиле Metro



C# и XAML



У вас уже есть навыки разработки Metro-приложений на C# и VB



демонстрация

Metro-приложение на C# и XAML

Visual Studio Designer



Практически всё напрямую отображается между Windows Runtime и .NET



Большинство различий между Windows Runtime и .NET скрыты



.NET автоматически отображает интерфейсы коллекций в их Windows Runtime эквиваленты



Методы-расширения устраняют пробелы между Windows Runtime и управляемым кодом



C# код, который пишут сейчас…





C# код для Windows 8





C++



Архитектура Windows Runtime



C++ возвращается



C++

  • Visual C++ component extensions (C++/CX)

  • Native WinRT

  • Стандартная библиотека и STL

  • Windows Runtime C++ Template Library (WRL)

  • XAML



XAML и C++ мощное сочетание декларативной разработки UI и языковой платформы. Обе составляющих – часть ОС.



C++

  • Async

  • Parallel Patterns Library

  • С++ Accelerated Massive Parallelism

  • Win32

  • DirectX



демонстрация

Metro-приложение на C++ и XAML

Гибридные приложения

XAML/C#/C++

Портируйте приложения на Windows 8 и в metro-стиль