---

Специальные Windows 10 выпуск 2015

Объем 30 Номер 11

Дизайн UI - Адаптивный дизайн для UWP-приложений

Майк Джейкобс | Windows 2015

Продукты и технологии:

Universal Windows Platform (UWP)

В статье рассматриваются:

• методы адаптивного дизайна для UWP-приложений, выполняемых на различных семействах устройств;
• строительные блоки UI, включенные в Universal Windows Platform (UWP);
• профиль типов устройств, поддерживаемых UWP, их специфические характеристики UI.

Универсальное Windows-приложение может работать на любом устройстве с Windows — от смартфона до планшета и ПК. Вы даже можете создавать универсальные Windows-приложения, выполняемые на компактных устройствах, таких как нательные устройства или бытовая техника. Вы можете ограничить ваше приложение одним семейством устройств (например, семейством мобильных устройств) или сделать его доступным для всех устройств, работающих под управлением Windows.

Проектирование приложения, которое хорошо выглядит на столь широком спектре устройств может оказаться очень трудной задачей. Как же начинать проектировать приложение, которое предоставляет отличную пользовательскую среду (UX) на устройствах с кардинально разными размерами экранов и методами ввода? К счастью, Universal Windows Platform (UWP) предоставляет набор встроенных средств и универсальных строительных блоков, помогающих добиться именно этой цели. В этой статье описываются средства дизайна на платформе UWP и даются рекомендации по созданию адаптивных UI, подстраивающихся под разные устройства и форм-факторы.

Начнем с рассмотрения некоторых средств, находящихся в вашем распоряжении при создании универсального Windows-приложения. Вам не понадобится никаких усилий для использования преимуществ этих средств — они «запечены» в UWP.

Одно из таких средств — масштабирование платформы, которое оптимизирует UI на основе типа используемого устройства с Windows. Система применяет алгоритм для нормализации того, как элементы управления, шрифты и другие UI-элементы отображаются на экране. Этот алгоритм масштабирования принимает во внимание расстояние от глаз пользователя до экрана и экранную плотность (screen density) (количество пикселей на дюйм), чтобы выполнять оптимизацию в расчете на воспринимаемый размер (perceived size), а не на физический. Алгоритм масштабирования гарантирует, что шрифт размером в 24 пикселя на экране Surface Hub, отстоящем на 10 футов от глаз пользователя, будет столь же легко читаемым, что и тот же шрифт на пятидюймовом экране смартфона в нескольких дюймах от глаз. Из-за того, как работает система масштабирования, при проектировании своего универсального Windows-приложения вы оперируете эффективными пикселями, а не реальными, физическими.

Другое встроенное средство UWP — универсальный ввод, реализуемый через смарт-взаимодействия. Хотя вы можете проектировать приложения в расчете на специфические режимы ввода и устройства, вы не обязаны делать это. Все это благодаря тому, что универсальные Windows-приложения по умолчанию полагаются на смарт-взаимодействия. То есть вы строите дизайн вокруг щелчка, не зная и не определяя, каким образом произойдет этот щелчок — из-за щелчка кнопки реальной мыши или касания пальца.

Универсальные строительные блоки

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

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

UWP также автоматически дополняет ваши приложения набором стилей по умолчанию, который оптимизирует представление для каждого целевого форм-фактора. Вы можете настраивать стили по умолчанию или полностью заменять их для создания уникальных визуальных представлений. Универсальные стили обеспечивают ряд возможностей, в том числе:

• набор стилей, автоматически дающих приложению выбор между светлой или темной темой и способных включать предпочитаемый пользователем акцентный цвет (accent color);
• набор шрифтов на основе Segoe (Segoe-based type ramp), который обеспечивает четкость текста на всех устройствах;
• анимации по умолчанию для взаимодействий;
• автоматическую поддержку высококонтрастных режимов. Эти стили разрабатывались с учетом высокой контрастности, поэтому, когда приложение выполняется на устройстве в высококонтрастном режиме, оно должным образом отображает шрифты;
• автоматическую поддержку других языков. Стили по умолчанию автоматически выбирают правильный шрифт для каждого языка, поддерживаемого Windows. Вы даже можете использовать несколько языков в одном приложении, и тексты на всех языках будут отображаться корректно;
• встроенную поддержку для чтения справа налево.

Наконец, UWP предоставляет универсальные шаблоны для Adobe Illustrator и Microsoft PowerPoint и содержит все необходимое для того, чтобы приступить к проектированию UWP-приложений. Эти шаблоны содержать универсальные элементы управления и разметки для каждого универсального класса размеров устройств. Чтобы скачать эти шаблоны, перейдите в раздел скачивания Design на сайте Windows Dev Center (bit.ly/1KHun6J).

Изучайте устройства

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

Смартфоны        Самые широко используемые вычислительные устройства, смартфоны способны на многое даже при ограниченных размерах экранов и базовых средств ввода. Они имеют разнообразные размеры, чаще всего от четырех до шести дюймов по диагонали, хотя смартфоны с экранами более шести дюймов часто называют фаблетами (phablets). Хотя UX на фаблетах похожа на таковую на смартфонах стандартных размеров, более крупные экраны требуют некоторых важных изменений в подаче контента.

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

Пользователи взаимодействуют со своими смартфонами через сенсорный и голосовой ввод. Большинство смартфонов предоставляет камеру, микрофон, датчики движения и датчики расположения (location sensors).

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

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

УстройстваMicrosoftSurface Hub            Это устройство для коллективной работы в группе, имеющее большой экран, предназначено для одновременного использования несколькими людьми. Surface Hub доступен с экранами размером 55 и 84 дюйма. Приложения Surface Hub совместно используются в течение коротких периодов времени, например на совещаниях, и могут появляться в одном из четырех состояний: с заполнением свободного места (fill)(фиксированное представление, которое занимает доступную область на экране), полном (full) (стандартное полноэкранное представление), с фиксацией (snapped) (переменное представление, которое занимает правую или левую сторону доступной области экрана) и фоновом (background) (скрытом из виду, хотя приложение по-прежнему выполняется и доступно в переключателе задач [task switcher]). Surface Hub поддерживает сенсорное, перьевое, голосовое взаимодействие, клавиатуру и включает камеру и микрофон.

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

Проектирование для конкретных устройств

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

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

Давайте немного подробнее поговорим об эффективных пикселях. Как я упоминал ранее, проектируя универсальное Windows-приложение, вы оперируете в эффективных пикселях, а не в физических. Эффективные пиксели позволяют вам сосредоточиться на реально воспринимаемом размере UI-элемента, не беспокоясь о плотности пикселей или о расстоянии от глаз пользователя на разных устройствах. Например, когда вы проектируете элемент размером 1 × 1 дюйм, этот элемент будет появляться приблизительно дюймовым на всех устройствах. На чрезвычайно больших экранах с высокой плотностью пикселей этот элемент может занимать 200 × 200 физических пикселей, тогда как на меньших устройствах вроде смартфонов — 150 × 150 физических пикселей.

Как это влияет на способ проектирования приложения? Вы можете игнорировать при проектировании плотность пикселей и реальное разрешение экрана. Вместо этого рассчитывайте дизайн на эффективное разрешение (т. е. на разрешение в эффективных пикселях) для класса размеров. Я подробнее расскажу о разрешениях класса размеров чуть позже в этой статье. Кроме того, один совет навскидку: при создании имитаций экрана в программах для редактирования изображений обязательно установите PPI в 72 и задайте размеры изображения равными эффективному разрешению для целевого класса размеров.

Чтобы гарантировать четкое масштабирование, важно соблюдать правило четырех: размечайте свой дизайн по сетке 4×4 пикселя. Делайте свои поля (margins), размеры и позиции UI-элементов, включая позицию текста, кратными четырем эффективным пикселям. На рис. 1 показаны элементы дизайна, которые сопоставлены с сеткой 4×4 пикселя. В этом случае элемент дизайна всегда будет иметь четкие, резкие края. В противоположность этому элементы дизайна, не сопоставленные с сеткой 4×4 станут с размытыми краями на некоторых устройствах.

Рис. 1. Выравнивайте по сетке 4×4 пикселя для визуализации четкого текста и изображений

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

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

Наконец, вы, вероятно, захотите оптимизировать дизайн под ввод. Библиотека универсальных элементов управления работает со всеми типами ввода (сенсорным, перьевым, с клавиатуры и от мыши), но, тем не менее, вы можете оптимизировать дизайн под определенные типы ввода, переупорядочив свои UI-элементы. Так, если вы помещаете элементы навигации в нижнюю часть экрана, к ним легче обращаться пользователям смартфонов, но большинство пользователей ПК ожидает увидеть элементы навигации в верхней части экрана.

Методы адаптивного дизайна

Оптимизируя UI приложения под экраны конкретной ширины, вы создаете адаптивный дизайн (responsive design). Существует ряд полезных методов адаптивного дизайна, которые можно применять для подстройки UI и использования всех преимуществ экранного пространства и доступных возможностей различных типов устройств. Следует рассматривать шесть методов: перестановка (reposition), изменение размеров (resize), пересчет позиций (reflow), проявление (reveal), замена (replace) и перепланировка (rearchitect).

Перестановка UI-элементов приложения — один из способов выжать максимум возможного из каждого устройства. На рис. 2 книжная ориентация на смартфоне или фаблете вызывает необходимость в прокрутке UI, поскольку единовременно видим лишь один полный фрейм. Когда приложение переводится на планшет или другое устройство, которое поддерживает два полных фрейма на экране — в книжном или альбомном режиме, — фрейм B может сдвинуться, чтобы занять выделенное пространство. Если вы используете сетку для позиционирования, то можете придерживаться той же сетки при перестановке UI-элементов.

Рис. 2. Перестановка фреймов для использования преимуществ экранов большего размера

Вы также можете оптимизировать фрейм, изменяя размеры полей (margins) и UI-элементов, чтобы задействовать возможности меньших и более крупных экранов. Например, это позволяет расширять контент для чтения на более крупных экранах, увеличивая размер фрейма контента, что оставляет больше места для текста и уменьшает потребность в прокрутке. Подобным же образом разные размеры фрейма дают возможность пересчета UI-элементов на основе устройства и его ориентации. Так, на экране большего размера может иметь смысл использовать более крупные контейнеры, добавить столбцы и генерировать элементы списка иначе, чем на смартфоне.

Проявление UI-элементов — мощный метод, который позволяет открывать доступ к функциональности на специфическом устройстве (например, к камере смартфона), в то же время предоставляя возможность использовать преимущества экранов других размеров и ориентаций. Распространенный пример проявления или скрытия UI — элементы управления мультимедиа-проигрывателем, где набор кнопок сокращается на меньших устройствах и расширяется на более крупных. Например, мультимедиа-проигрыватель на ПК может обрабатывать гораздо больше функциональности на экране, чем это возможно на смартфоне.

Метод проявления-скрытия, в том числе, включает выбор того, когда отображать больше метаданных. Когда экранное пространство на вес золота, лучше всего показывать минимальный объем метаданных, а на лэптопе или настольном ПК можно отображать значительное количество метаданных. Некоторые примеры того, как обрабатывать вывод или скрытие метаданных, включают:

• приложение электронной почты — отображение аватара пользователя;
• музыкальный проигрыватель — отображение больше сведений об альбоме или исполнителе;
• проигрыватель видео — отображение больше сведений о фильме или шоу, например об актерском составе и съемочной группе;
• любое приложение — разбиение на столбцы и вывод большего количества детальных сведений;
• любое приложение — вертикально расположенная стопка чего-либо раскладывается встык по доступному экрану. На более крупных устройствах расположенные друг над другом элементы списка можно изменять для проявления строк элементов списка или столбцов метаданных.

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

Наконец, вы можете сворачивать или разветвлять планировку UI приложения для лучшей подгонки под целевые устройства. В примере на рис. 3 демонстрируется объединение страниц при переходе между устройствами (слева направо). Иллюстрация показывает приложение «умного дома», которое на более крупном устройстве объединяет элементы управления домом и панель настроек в один экран. На меньшем устройстве эти элементы управления и настройки выводятся на разных экранах.

Рис. 3. Перепланировка экрана приложения на дисплеях разных размеров

Пограничные значения в дизайне

Количество целевых устройств и размеров экранов в экосистеме Windows 10 слишком велико, чтобы заботиться об оптимизации UI под каждое из них. Вместо этого рекомендуется проектировать в расчете на три ключевые ширины (также называемые пограничными значениями [breakpoints]): 320, 720 и 1024 эффективных пикселей. Эти пограничные значения описываются в табл. 1.

Табл. 1. Пограничные значения для адаптивного UI

Класс размеров	Малый	Средний	Большой
Ширина в эффективных пикселях	320	720	1024
Типичный размер экрана (по диагонали)	От 4" до 6"	От 6"+ до 12"	13" и шире
Типичные устройства	Смартфоны	Планшеты и смартфоны с крупным экраном	ПК, лэптопы, устройства Surface Hub

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

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

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

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

Universal Windows Platform открывает вашим приложения целый спектр устройств — от нательных электронных устройств с крошечными экранами до огромных Surface Hub. Реализуя методы адаптивного дизайна и используя преимущества встроенных средств и строительных блоков этой платформы (элементов управления и стилей), можно создавать UI, который великолепно выглядит на устройствах всех типов и размеров.

---

Майк Джейкобс (Mike Jacobs) — старший разработчик контента в Microsoft. В течение многих лет занимался документированием графики и презентационных аспектов технологий Microsoft — от Direct2D до Windows Presentation Foundation и Silverlight.

Выражаю благодарность за рецензирование статьи экспертам Microsoft Джефу Арнольду (Jeff Arnold), Евгению Гаврилову (Eugene Gavrilov), Россу Хитеру (Ross Heeter), Чигуса Сансен (Chigusa Sansen), Джо Тобенсу (Joe Tobens), а также Майку Боттемиллеру (Mike Bottemiller) из Murphy & Associates.