Разработка дизайна пользовательского интерфейса для Windows

Посетителей: 1145 | Просмотров: 1250 (сегодня 0) Шрифт:

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

Персонализация

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

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

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

Результаты поиска в предварительной версии Windows 8.1

Схема макета для результатов поиска в предварительной версии Windows 8.1

Мы уверены, что типографика — это красиво. Шрифты играют важную роль в формировании персонализированного нового приложения «Будильники». Мы используем шрифт Segoe UI Light величиной 32 пункта для отображения времени: цифры расположены в центре круглого циферблата, что подчеркивает его значимость. Цветные метки будильников соответствуют цветам самих будильников.

В приложении «Будильники» используются прекрасные шрифты

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

«Список для чтения»

Схема макета «Списка для чтения»

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

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

Шаблоны

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

Главный раздел — это ключевой шаблон для приложений Магазина Windows с богатым содержимым. Этот чрезвычайно гибкий шаблон состоит из групп однородного содержимого и позволяет выполнять согласованную навигацию между разделами и внутри раздела. В Windows 8.1 есть общий элемент управления «Главный раздел» ( WinJS и XAML), поддерживающий шаблон со многими встроенными возможностями (функция вызова основного контента, одинаково удобное управление с помощью мыши, касания и клавиатуры, а также высокая скорость отклика).

Структура «Главного раздела»

Магазин Windows в Windows 8.1 создан с помощью элемента управления «Главный раздел»

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

Магазин Windows использует данную панель для глобальной навигации

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

В полноэкранном режиме метки команд отображаются

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

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

Перетаскивание между списками в «Почте»

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

Принципы

В основе пользовательских интерфейсов Windows лежат пять принципов дизайна. Они воплощают нашу философию дизайна:

• Гордость за искусную работу
  Предоставьте полноценный, продуманный и отшлифованный интерфейс на каждом этапе.
• Быстрота и плавность
  Ускорьте работу пользователей, обеспечьте соединение предыдущих и последующих элементов.
• Подлинно цифровой
  Станьте примером воплощения возможностей аппаратного и программного обеспечения. Воспользуйтесь богатейшими возможностями цифровой среды.
• Делайте больше с меньшими усилиями
  Будьте лучшим в одной сфере, а не средним во многих.
• Победа в единстве
  Оптимизация для общего удобства работы.

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

Платформа

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

Windows позволяет создавать приложения, которые выглядят и работают как приложения Windows, с помощью XAML или HTML/JavaScript на основе возможностей и функций платформы Windows. В предварительной версии Windows 8.1 мы усовершенствовали платформу, в том числе XAML и WinJS/HTML. Теперь она содержит больше встроенных элементов управления, поддерживает шаблоны, которые мы постоянно улучшаем, она более гибкая с точки зрения оптимизации и дифференциации вашего приложения от других, позволяет продемонстрировать его индивидуальность. Кроме того, имеются улучшения в фундаменте платформы, например с точки зрения производительности и функций отладки. Благодаря всему этому вы сможете создавать приложения, которые действительно воплощают наши принципы.

Подведем итоги

При создании дизайна и программировании приложений Магазина Windows воспользуйтесь улучшениями, которые мы сделали для пользовательских интерфейсов:

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

Вы можете получить подробную информацию и больше замечательных примеров из нашего с Полом Гасморино выступления на конференции Build: Designing and Building Windows User Interfaces:

Дайте волю своей креативности и создавайте великолепные приложения для Магазина Windows!

Библиотека пользовательского интерфейса Windows 2.x Windows UI Library 2.x

В библиотеке пользовательского интерфейса Windows предоставляются официальный набор элементов управления пользовательского интерфейса Windows и других элементов пользовательского интерфейса для приложений Windows. The Windows UI Library provides official native Windows UI controls and other user interface elements for Windows apps.

Она поддерживает совместимость низкого уровня с предыдущими версиями Windows 10, поэтому ваше приложение будет работать, даже если пользователи применяют не самую последнюю версию ОС. It maintains down-level compatibility with earlier versions of Windows 10, so your app works even if users don’t have the latest OS.

Ознакомьтесь с предварительной версией 4 библиотеки пользовательского интерфейса Windows 3 (февраль 2021 г.), крупным обновлением, связанным с платформой пользовательского интерфейса Windows 10. Check out the Windows UI Library 3 Preview 4 (February 2021), a major update to the Windows 10 UI platform.

Возможности Features

Новые элементы управления. Библиотека пользовательского интерфейса Windows содержит новые элементы управления, которые не предоставляются на платформе Windows по умолчанию. New controls: The Windows UI Library contains new controls that aren’t shipped as part of the default Windows platform.

Обновленные версии существующих элементов управления. Библиотека также содержит обновленные версии существующих элементов управления платформы Windows, которые можно использовать в более ранних версиях Windows 10. Updated versions of existing controls: The library also contains updated versions of existing Windows platform controls that you can use with earlier versions of Windows 10.

Поддержка более ранних версий Windows 10. API библиотеки пользовательского интерфейса Windows работают в предыдущих версиях Windows 10, поэтому для обеспечения работы пользователей, не использующих последние версии ОС, не нужно добавлять проверки версии или условный код XAML. Support for earlier versions of Windows 10: Windows UI Library APIs work on earlier versions of Windows 10, so you don’t have to include version checks or conditional XAML to support users who might not be running the very latest OS.

Поддержка XamlDirect. Интерфейсы API XAML Direct, предназначенные для разработчиков ПО промежуточного слоя, предоставляют доступ к функциям XAML более низкого уровня, которые обеспечивает более высокую производительность по нагрузке на ЦП и рабочему набору. Support for XamlDirect: The Xaml Direct APIs, designed for middleware developers, gives you access to a lower-level Xaml features which provide better CPU and working set performance. XamlDirect позволяет применять API XamlDirect в более ранних версиях Windows 10, не требуя писать специальный код для работы с несколькими целевыми версиями Windows 10. XamlDirect enables you to use XamlDirect APIs on earlier versions of Windows 10 without needing to write special code to handle multiple target Windows 10 versions.

Примеры Examples

Пример приложения XAML Controls Gallery включает интерактивные демонстрации и примеры кода для работы с элементами управления WinUI. The Xaml Controls Gallery sample app includes interactive demos and sample code for using WinUI controls.

Установите приложение XAML Controls Gallery из Microsoft Store. Install the XAML Controls Gallery app from the Microsoft Store

Также на сайте GitHub доступен открытый код приложения Xaml Controls Gallery. The Xaml Controls Gallery is also open source on GitHub

Документация Documentation

Практические руководства по элементам управления из библиотеки пользовательского интерфейса Windows вы найдете в документации по элементам управления универсальной платформы Windows. How-to articles for Windows UI Library controls are included with the Universal Windows Platform controls documentation.

Справочная документация по API доступна по этой ссылке: API библиотеки пользовательского интерфейса Windows. API reference docs are located here: Windows UI Library APIs.

Установка и использование библиотеки пользовательского интерфейса Windows Install and use the Windows UI Library

План разработки и открытый код Open source and developer roadmap

WinUI — проект с открытым кодом, размещенный на сайте GitHub. WinUI is an open source project hosted on GitHub. Мы рады любым сообщениям об ошибках, запросам на добавление функций и вкладам сообщества в создание кода, вносимым в репозиторий библиотеки пользовательского интерфейса Windows. We welcome bug reports, feature requests and community code contributions in the Windows UI Library repo.

Мы продолжаем разрабатывать и развивать WinUI, чтобы поддерживать новые сценарии разработки. We are continuing to develop and evolve WinUI to support more developer scenarios. Последние сведения о планах по разработке Windows см. в этой статье о стратегии развития, размещенной в репозитории библиотеки пользовательского интерфейса Windows. For the latest details about our plans for WinUI, see our roadmap on the Windows UI Library repo.

Список пакетов NuGet NuGet package list

Библиотека пользовательского интерфейса Windows содержит несколько пакетов NuGet: Список пакетов NuGet для библиотеки пользовательского интерфейса Windows. The Windows UI Library contains multiple NuGet packages: Windows UI Library NuGet package list.