Изучение ключевых принципов Fluent Design System

Обновление Fall Creators Update для Windows 10 от Microsoft может и имеет парадоксально не творческое название, но само обновление сочетается с художественным потенциалом и полезными функциями. Оно предоставит пользователям временную шкалу для управления сложными рабочими сессиями, APIs, что связывают вместе все службы Microsoft и, в частности, новую дизайнерскую парадигму, предназначенную для коренного пересмотра пользовательского интерфейса, в виде плоского прямоугольника. Fluent Design System от Microsoft фокусируется на пяти принципах, которые помогают разработчикам создавать более творческие и привлекательные пользовательские интерфейсы: глубина, материал, свет, масштаб и движение.

Эти принципы призваны провести черту между закостенелым, старым дизайном Microsoft и новым будущим интерактивных пользовательских интерфейсов. «Пришло время выйти за рамки простых прямоугольников, ограниченных плоскостью», — заявил вице-президент Microsoft Джо Бельфиоре, представив язык дизайна на конференции Build. «Речь идет не только о визуальных эффектах, это касается интерактивных моделей и пространств, и того, как все это сочетается». Давайте быстро рассмотрим каждый элемент и то, как он может изменить способ разработки приложений Windows.

Свет

Fluent Design System, свет

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

Глубина

Fluent Design System, глубина

Между классической эпохой серых, унылых меню и недолговечным, невразумительным языком дизайна «Metro», Windows почти исключительно полагалась на скучные квадратные рамки, чтобы представить пользователям информацию и инструменты. С Fluent Design Microsoft бросает вызов разработчикам — убить эту парадигму, разбивая информацию и объекты, не имеющие традиционного 2D-фрейма.

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

Движение

Fluent Design System, движение

Хорошо анимированный интерфейс — привлекательный интерфейс. И решение добавить «движение» направлено на то, чтобы удерживать внимание пользователя, давая ему что-то активное, на что можно смотреть и с чем можно взаимодействовать. Бельфиоре сравнивает использование движения в Fluent Design с режиссером, использующим движение, чтобы привести зрителя к истории, которую он хочет рассказать. «Анимационный дизайн обладает особой силой, способной оживить весь наш жизненный опыт. И привести людей из одной задачи в другую с кинематографической легкостью», — говорит он.

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

Материал

Fluent Design System, материал

Как и большинство основных концепций Fluent Design, «материал» походит на копание в визуальном стиле прошлого Windows. Функциональные квадраты традиционного интерфейса Microsoft могут быть функциональными, но не имеют связи с физическим миром. Бельфиоре предполагает, что ключ к тому, чтобы заставить пользователей полюбить дизайн приложений Windows состоит в том, чтобы подражать «чувственным и придающим сил» ощущениям материалов, которые составляют реальный мир.

«Мы хотим привнести больше этой характеристики в наши дизайны правильным способом, с физическим качеством», — говорит он. «Побуждать людей к прикосновению и взаимодействию». Это утверждение можно было бы легко пропустить мимо ушей, как попытку дать приложениям более интересные текстуры, но в Windows 10 идея сделать интерфейс для ПК приятным на ощупь имеет некоторые достоинства. Мы можем думать о ПК как о простом, традиционном интерфейсе под клавиатуру и мышь, но обновление Fall Creator Update делает упор на лучшее управление голосом, лучшее касание и ощущаемый естественным ввод с помощью стилуса. Построение интерфейса, который побуждает к такому взаимодействию, имеет большой смысл.

Масштаб

Fluent Design System, масштаб

Большая часть нового языка дизайна Microsoft кажется ориентирована на улучшение традиционной вычислительной среды — объектов под стеклом, управляемых периферийными устройствами и аксессуарами. «Масштаб» немного отличается. Здесь Microsoft смотрит в будущее. В частности, масштаб цифровых объектов, используемых в 3D-интерфейсах и виртуальной / расширенной реальности.

Относительный «размер» цифровых ресурсов — это то, над чем разработчики VR работают уже несколько лет. Объект, который может быть правильно масштабирован при просмотре через монитор компьютера, может показаться невероятно большим или удивительно малым при просмотре через AR или VR-гарнитуру. Правильный размер виртуальных объектов имеет первостепенное значение для создания хорошего интерфейса от первого лица. Попросив разработчиков задуматься о масштабе своего интерфейса с точки зрения 3D-среды, Microsoft просит их представить себе, как их продукт можно просматривать посредством очков от Hololens.

Fluent Design System, виртуальна реальность

Теоретически все пять основных принципов дизайна могут помочь разработчикам Windows создавать более надежные и интерактивные пользовательские интерфейсы. Но, как на самом деле, Fluent Design повлияет на внешний вид Windows? Microsoft не много раскрыла во время основного доклада на конференции Build, но в конце тизерного ролика о стилях, на экране мелькнуло несколько кратких примеров, в том числе макеты для Fluent Design календаря и возможного нового рабочего стола Windows.

На данный момент эти образы почти наверняка всего лишь концепт-арт, но они, безусловно, воплощают в себе принципы Fluent Design. Этот новый рабочий стол, например, источает глубину — с помощью света и тени четко определяется местоположение каждого окна в физическом пространстве. Каждый объект в сцене имеет отчетливое ощущение материального элемента, что делает его более ощутимым, чем стандартное квадратное окно. Свет, глубина и материальные элементы также подчеркивают идею масштаба между объектами, что позволяет легко представить, что эти окна интерфейса проектируются на стене в среде с расширенной реальностью.

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