Пользовательский интерфейс приложений Магазина Windows от А до Я (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

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

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

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

Если у вас нет опыта разработки приложений Магазина Windows или вы не знакомы с макетами, навигацией, элементами управления и командами приложения, вам будет полезно просмотреть каждый шаг. Вы также можете просматривать статьи в любом порядке. Мы сгруппировали разделы, касающиеся связанных между собой аспектов разработки пользовательского интерфейса приложения. Представленные здесь рекомендации, задачи и примеры кода описывают разработку приложений Магазина Windows на JavaScript и HTML. Материалы по разработке на C#, VB, C++ и XAML см. в разделе Пользовательский интерфейс приложений Магазина Windows от А до Я (XAML).

Пример

Пример Controls and layout gallery включает все элементы пользовательского интерфейса, которые мы будем здесь рассматривать. Мы часто будем обращаться к этому примеру и показывать вам участки, где реализованы конкретные функции.

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

Шаг 1. Планирование

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

Начните с решения, какую стратегию навигации вы хотите использовать в приложении. В этом учебнике мы начнем с шаблона "Приложение-концентратор". Чтобы спроектировать и разработать пользовательский интерфейс приложения, можно скачать шаблон и попробовать несколько вариантов. Подробнее см. в разделах Шаблоны навигации и Иерархическая навигация (HTML). Или если вы хотите сразу перейти к коду, см. пример Controls and layout gallery.

Создание структуры пользовательского интерфейса Что и где разместить в приложении Магазина Windows? Узнайте, как мы советуем располагать пользовательский интерфейс. В примере показано, как мы использовали руководство, когда проектировали приложение. На холсте главной страницы мы расположили следующие элементы. Список групп элементов управления. Элементы управления сгруппированы по функциям, чтобы ускорить просмотр типов элементов. Список всех элементов управления. Здесь названия элементов отсортированы по алфавиту, чтобы облегчить поиск конкретного элемента. На каждой странице мы добавили элемент навигации на верхнюю панель приложения, чтобы вы могли быстро вернуться на домашнюю страницу. Каждая страница раздела следует стандартному иерархическому шаблону навигации. Она включает список элементов управления и ссылку на страницу с подробной информацией о каждом элементе. Каждая страница раздела и страница с подробными данными включает кнопку "Назад", которая возвращает вас на ту страницу, с которой вы пришли. На каждой странице с подробной информацией ключевое содержимое мы разместили на главном экране приложения: Описание элемента управления Примеры элемента управления, если его можно отобразить на холсте Фрагменты кода для реализации элемента управления

Шаг 2. Выбор добавляемых элементов управления

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

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

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

	Элементы управления по функциям Список элементов управления Ознакомьтесь с полным списком доступных элементов управления и назначением каждого из них, а затем выберите те элементы, которые понадобятся для вашего приложения.
	Краткое руководство: добавление элементов управления HTML и обработка событий Используйте элементы управления HTML, такие как кнопки, флажки и раскрывающиеся списки.
	Краткое руководство: отображение текста Используйте элементы управления HTML, такие как метка, <div>, абзац и текстовое поле, чтобы отображать текст.
	Краткое руководство: ввод и правка текста Используйте элементы управления HTML, такие как текстовое поле, область текста, поле для ввода пароля и поле с форматом (текстовое поле в формате RTF), для ввода и изменения текста.
	Краткое руководство: добавление элементов управления WinJS и стилей Используйте элементы управления из библиотеки Windows для JavaScript, такие как ListView, оценка и всплывающий элемент.

Шаг 3. Создание макета

	Создание макета страницы приложения Узнайте о системе сетки, заголовках, полях и интервалах, а также о том, как с их помощью создать согласованное взаимодействие с пользователем.
	Руководство по взаимодействию с пользователями — макеты и масштабирование Пользователь может изменить размер приложения от минимальной ширины до полноэкранного представления. Он также может запускать приложение на экранах различного размера и разрешения в разных ориентациях. Вы можете создать приложение, которое будет отлично выглядеть в любом размере. В примере мы использовали минимальную ширину по умолчанию — 500 пикселей.
	Краткое руководство: определение макетов приложения Создайте динамический пользовательский интерфейс, который хорошо выглядит и работает при любом размере.
	Краткое руководство: разработка приложений для разных размеров окон Узнайте, как менять минимальную ширину приложения так, чтобы вместо 500 пикселей она составляла 320 пикселей, и изменять дизайн приложения таким образом, чтобы оно хорошо выглядело и работало при небольших значениях ширины. Научитесь проектировать приложение с горизонтальным сдвигом, способное переключаться на вертикальный макет каждый раз, когда высота приложения оказывается больше его ширины.
	Руководство по взаимодействию с пользователями — макеты и масштабирование При увеличении плотности пикселей монитора физические размеры объектов на экране уменьшаются. Когда элементы пользовательского интерфейса станут слишком маленькими для касания, а текст слишком мелким для чтения, Windows изменит масштаб пользовательского интерфейса приложения и системы до следующих значений. Узнайте, как гарантировать отличный вид приложения при масштабировании.

Шаг 4. Выбор местоположения команд и способа использования чудо-кнопок

	Шаблоны команд Узнайте, где размещать команды — на экране, в диалоговых и всплывающих окнах или на панелях приложения, — и решите, где будут находиться команды в вашем приложении.
	Руководство и контрольный список для панелей приложения Краткое руководство: добавление панели приложения с командами Руководство по панелям навигации Краткое руководство: добавление панели навигации Узнайте о группировании команд, согласованном размещении, стилях и значках, а также о других важных рекомендациях для панелей приложения с командами и панелей навигации. В примере мы реализовали кнопку "На главную" на верхней панели приложения, чтобы упростить навигацию.
	Рекомендации и контрольный список для добавления контекстных меню Используйте контекстные меню для предоставления непосредственного доступа к действиям, таким как "Вырезать" или "Вставить". Контекстные меню должны быть короткими и соответствовать выделенному фрагменту содержимого.
	Рекомендации и контрольный список для поиска Краткое руководство: добавление поиска в приложение Узнайте, когда использовать элемент управления поиска в приложении, а когда — контракт "Поиск".
	Рекомендации по общему доступу к содержимому Краткое руководство: общий доступ к содержимому Если у вашего приложения есть данные, которыми можно делиться, то оно является источником данных. Если ваше приложение может получать данные от других приложений, то оно является получателем данных.
	Рекомендации по параметрам приложений Краткое руководство: добавление параметров приложения Используйте чудо-кнопку "Параметры" обдуманно. Параметры должны быть простыми и немногочисленными. Узнайте, какие параметры следует размещать на панели параметров.
	Руководство по справке приложения Руководство по обучающему пользовательскому интерфейсу Краткое руководство: добавление справки приложения Узнайте, как и когда реализовать справку на панели параметров, а когда стоит использовать другие средства помощи пользователю, например советы, демонстрации или переработку пользовательского интерфейса.

Шаг 5. Заключительные действия

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

Следующие действия

Вы познакомились с базовыми принципами, самое время взглянуть на другие примеры из серии Компоненты приложений от А до Я.

Хотите знать больше?

Указатель руководств по взаимодействию с пользователем

Просмотрите полный список руководств по взаимодействию с пользователем.

Взаимодействие с пользователем: сенсорный ввод и многое другое

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

Создание первого приложения Магазина Windows

Если у вас нет опыта создания приложений Магазина Windows и вы хотите создать свое первое приложение, следуйте этой серии учебников.