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

Приложения Магазина 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 имеют общие шаблоны. В 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»
Выступление Пола Гасморино (Paul Gusmorino) на конференции Build 2011, посвященное созданию приложений Магазина Windows с помощью стандартных элементов управления

Принципы

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

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

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

Дополнительные сведения 
Принципы дизайна Майкрософт в Центре разработчиков Windows
Выступление директора по дизайну Windows Сэма Моро (Sam Moreau) на конференции Build 2011 о принципах и персонализации

Платформа

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

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

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

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

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

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

Загрузите видеоролик для просмотра в предпочитаемом медиапроигрывателе. 
MP4 высокого качества |  MP4 низкого качества

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