На прошедшей конференции разработчиков от Microsoft — Build2017, был показан достаточно интересный ролик:
Даже просмотрев его пару раз, остается нерешенным вопрос — что же такое Fluent Design?
После Metro-Design это новый виток эволюции дизайна от Microsoft. Metro стили были представлены еще во времена Windows 8 (включая Windows RT и Windows Phone 8), и с тех пор практически не обновлялись. Хотя и появлялся новый функционал, принципиальных отличий в Win10 не произошло. С тех пор появились UWP приложения, и мы прошли UX учитывающий всевозможные размеры экранов. Теперь же Microsoft переходит к новому состоянию — Fluent Design. К счастью для разработчиков и дизайнеров, этот шаг оказался достаточно продуман. Давайте рассмотрим все аспекты новой концепции.
Если вы краем глаза видели прошлогодний Build 2016, то большая часть нововведений покажется вам очень знакомой, однако в то время не было четкой структурированности.
Теперь же представлены 5 важных частей дизайна: Свет, Глубина, Движение, Материал и Масштаб.
Расстановка приоритетов это лишь первый шаг — они задают направления развития, и ролик как раз об этом, показывая больше физические аспекты в реальном мире.
Разработчикам и дизайнерам, к счастью, не придется столкнуться со стеной новых сложных гайдлайнов. Достигается это за счет пошагового их внедрения, и компания готова поделиться первым шагом в этом направлении.
Свет представляется как инструмент помогающий пользователю акцентировать внимание, понимать с чем пользователь взаимодействует, и сфокусировать его на происходящем взаимодействии.
Первый шаг: Раскрывающий свет.
Курсор теперь является небольшим источником освещения, действие которого распространяется на близлежащие элементы интерфейса. Однако этот свет может раскрыть невидимые в тени границы элементов. Это несколько убирает шум с вспомогательных элементов, которые раскрываются только когда пользователь в них заинтересован.
Нажатие курсора на всех элементах генерирует разливающееся освещение от курсора в пределах этих элементов, и это освещение различается в зависимости от конкретного взаимодействия.
Глубина развивает видение слоев в приложении, однако имеет не только визуальную составляющую. К глубине также относится и объемный пространственный звук, помогающий ориентироваться в цифровом мире.
Первый шаг: Перспективный параллакс.
Этот инструмент знаком многим, давно применяется в интернет-страницах, однако не стоит забывать, что это теперь один из столпов нового дизайна, и к нему добавятся новые инструменты по имплементации. Также мы говорим о параллаксе не только в глобальной иерархии страницы, но и проявлении эффекта внутри одного элемента.
Движение всегда было одной из главных индикаций непрерывного и динамичного взаимодействия с пользователем. Пользователь действительно очень любит, когда приложение не представляет статичную картину, а проявляет признаки жизни. Кроме того: «It just feels good!».
Первый шаг: Связанные анимации.
Связанные анимации позволяют легко настроить переходы между элементами с эффектом трансформации одной страницы в другую без потери контекста для пользователя, причем это работает в обе стороны, и в момент перехода на новую страницу, и в момент выхода назад. Пользователь всегда будет понимать где он находится, и что он делал прежде.
В новой концепции дизайнер не должен воспринимать цвета и кисти в приложении как очередную палитру. Отказываясь от цветов мы получаем работу с материалами. Материалы позволяют передать свои физические свойства на экране. Материалы должны подарить чувство теплоты, а также отражать движения в соответствии со своими физическими характеристиками.
Первый шаг: Акриловый материал.
Акриловый материал является продолжением некогда утерянного стекла, которое мы впервые увидели в Windows Vista. Однако это не просто прозрачность с размытием, а целый набор инструкций учитывающий множество параметров и текстур.
На одной из прошлых конференций мы уже видели нечто подобное, и тогда оговаривалось, что эффект достигнут с помощью графических шейдеров. Однако, как мы можем видеть теперь — эти шейдеры проприетарны и каждый из них осознанно и постепенно будет формировать облик приложений в принципах нового дизайна.
Акриловый материал позволяет разделять иерархию в приложении и расширяет его границы связывая окно с окружающим пространством с помощью прозрачности. Однако данный материал может использовать свои преимущества не только с окружением, но и расширяя внутренние элементы. Как пример — возможно вывести карту на всю доступную область окна, в котором меню и заголовок, вместе с системными кнопками будут лежать на акриловой подложке поверх карты, что визуально расширяет полезную область внутри приложения.
Данный пункт несколько глобален и означает развитие UX как адаптивного, отзывчивого и масштабируемого среди всей экосистемы устройств — от бездисплейных систем умного дома, до систем виртуальной и дополненной реальности. Элементы управления должны легко подстраиваться под любую систему без существенной переработки интерфейса.
Первый шаг: Осознанные элементы управления.
Данный тип элементов раскрывает себя только когда это необходимо. Мы все помним тонкий скролл в мобильных устройствах и широкий на настольных системах. В новом дизайне это один элемент, который изначально отображается как мобильная версия, тем самым расчищая пространство и увеличивая полезную область, однако при наведении курсора скролл расширяется в привычный и удобный пользователю элемент. Такая трансформация позволяет эффективно использовать элемент управления, скрывая при этом в отсутствие взаимодействия громоздкий и раздражающий вид, который в конкретный момент и не нужен, что позволяет достичь более чистого интерфейса в целом. Это лишь один из примеров таких элементов управления. Аналогично — элемент текстовое поле, которое может принимать данные как с клавиатуры, так и рукописного и даже голосового ввода. В будущем мы будем видеть все больше и больше адаптивных «чистых» элементов, легко доступных на всей линейке устройств.
Будущее еще не пришло, однако нам уже приоткрыли завесу, что же скрывается за малой частью второго шага в данном дизайне — в основном это принципы Масштаба, однако также Движения и Глубины:
Многое зависит и от обычных разработчиков с дизайнерами, т. к. уже приоткрытые Осознанные заголовки — это конкретная имплементация от приложения Groove. Полагаясь на уже раскрытые принципы, были созданы новые элементы, которые настолько понравились Microsoft, что теперь они смотрят на возможность упрощения и автоматизации достигнутого эффекта для всего сообщества.
Концепция составлена, элементы раскрыты. С разработчиками поделились первыми шагами в новом направлении. Многое из увиденного можно воплощать и старыми средствами, однако, когда это становится частью системы, неизбежно будут представлены простые средства достижения необходимого UX. В будущем нам стоит ждать этих новых инструментов, которые позволят проще раскрыть новую парадигму дизайна от Microsoft.
Мы увидели целых 5 принципов, формирующих новую концепцию. Каждый из них важен, и я надеюсь, что дизайнеры прислушаются или хотя бы примут их к сведению.
За последние пару лет Microsoft дали понять, что они стремятся раскрыть креативный потенциал пользователей. Однако, как я вижу, это должно открыть новый потенциал и среди дизайнеров. Каждый из принципов является планомерным развитием наработок текущего дизайна в сочетании с доступными технологиями и обширной экосистемой различных устройств. Мы получаем универсальность в широком смысле, в которой выигрывает каждый из участвующих элемент��в, размывая свои границы взаимодействия. Становление новой концепции только способствует появлению более привлекательных приложений, создавая широкий простор для фантазии на тему будущего приложений основанных на Fluent Design.
Даже просмотрев его пару раз, остается нерешенным вопрос — что же такое Fluent Design?
Project Neon
После Metro-Design это новый виток эволюции дизайна от Microsoft. Metro стили были представлены еще во времена Windows 8 (включая Windows RT и Windows Phone 8), и с тех пор практически не обновлялись. Хотя и появлялся новый функционал, принципиальных отличий в Win10 не произошло. С тех пор появились UWP приложения, и мы прошли UX учитывающий всевозможные размеры экранов. Теперь же Microsoft переходит к новому состоянию — Fluent Design. К счастью для разработчиков и дизайнеров, этот шаг оказался достаточно продуман. Давайте рассмотрим все аспекты новой концепции.
Если вы краем глаза видели прошлогодний Build 2016, то большая часть нововведений покажется вам очень знакомой, однако в то время не было четкой структурированности.
Теперь же представлены 5 важных частей дизайна: Свет, Глубина, Движение, Материал и Масштаб.
Расстановка приоритетов это лишь первый шаг — они задают направления развития, и ролик как раз об этом, показывая больше физические аспекты в реальном мире.
Разработчикам и дизайнерам, к счастью, не придется столкнуться со стеной новых сложных гайдлайнов. Достигается это за счет пошагового их внедрения, и компания готова поделиться первым шагом в этом направлении.
Свет
Свет представляется как инструмент помогающий пользователю акцентировать внимание, понимать с чем пользователь взаимодействует, и сфокусировать его на происходящем взаимодействии.
Первый шаг: Раскрывающий свет.
Курсор теперь является небольшим источником освещения, действие которого распространяется на близлежащие элементы интерфейса. Однако этот свет может раскрыть невидимые в тени границы элементов. Это несколько убирает шум с вспомогательных элементов, которые раскрываются только когда пользователь в них заинтересован.
Нажатие курсора на всех элементах генерирует разливающееся освещение от курсора в пределах этих элементов, и это освещение различается в зависимости от конкретного взаимодействия.
Глубина
Глубина развивает видение слоев в приложении, однако имеет не только визуальную составляющую. К глубине также относится и объемный пространственный звук, помогающий ориентироваться в цифровом мире.
Первый шаг: Перспективный параллакс.
Этот инструмент знаком многим, давно применяется в интернет-страницах, однако не стоит забывать, что это теперь один из столпов нового дизайна, и к нему добавятся новые инструменты по имплементации. Также мы говорим о параллаксе не только в глобальной иерархии страницы, но и проявлении эффекта внутри одного элемента.
Движение
Движение всегда было одной из главных индикаций непрерывного и динамичного взаимодействия с пользователем. Пользователь действительно очень любит, когда приложение не представляет статичную картину, а проявляет признаки жизни. Кроме того: «It just feels good!».
Первый шаг: Связанные анимации.
Связанные анимации позволяют легко настроить переходы между элементами с эффектом трансформации одной страницы в другую без потери контекста для пользователя, причем это работает в обе стороны, и в момент перехода на новую страницу, и в момент выхода назад. Пользователь всегда будет понимать где он находится, и что он делал прежде.
Материал
В новой концепции дизайнер не должен воспринимать цвета и кисти в приложении как очередную палитру. Отказываясь от цветов мы получаем работу с материалами. Материалы позволяют передать свои физические свойства на экране. Материалы должны подарить чувство теплоты, а также отражать движения в соответствии со своими физическими характеристиками.
Первый шаг: Акриловый материал.
Акриловый материал является продолжением некогда утерянного стекла, которое мы впервые увидели в Windows Vista. Однако это не просто прозрачность с размытием, а целый набор инструкций учитывающий множество параметров и текстур.
На одной из прошлых конференций мы уже видели нечто подобное, и тогда оговаривалось, что эффект достигнут с помощью графических шейдеров. Однако, как мы можем видеть теперь — эти шейдеры проприетарны и каждый из них осознанно и постепенно будет формировать облик приложений в принципах нового дизайна.
Акриловый материал позволяет разделять иерархию в приложении и расширяет его границы связывая окно с окружающим пространством с помощью прозрачности. Однако данный материал может использовать свои преимущества не только с окружением, но и расширяя внутренние элементы. Как пример — возможно вывести карту на всю доступную область окна, в котором меню и заголовок, вместе с системными кнопками будут лежать на акриловой подложке поверх карты, что визуально расширяет полезную область внутри приложения.
Масштаб
Данный пункт несколько глобален и означает развитие UX как адаптивного, отзывчивого и масштабируемого среди всей экосистемы устройств — от бездисплейных систем умного дома, до систем виртуальной и дополненной реальности. Элементы управления должны легко подстраиваться под любую систему без существенной переработки интерфейса.
Первый шаг: Осознанные элементы управления.
Данный тип элементов раскрывает себя только когда это необходимо. Мы все помним тонкий скролл в мобильных устройствах и широкий на настольных системах. В новом дизайне это один элемент, который изначально отображается как мобильная версия, тем самым расчищая пространство и увеличивая полезную область, однако при наведении курсора скролл расширяется в привычный и удобный пользователю элемент. Такая трансформация позволяет эффективно использовать элемент управления, скрывая при этом в отсутствие взаимодействия громоздкий и раздражающий вид, который в конкретный момент и не нужен, что позволяет достичь более чистого интерфейса в целом. Это лишь один из примеров таких элементов управления. Аналогично — элемент текстовое поле, которое может принимать данные как с клавиатуры, так и рукописного и даже голосового ввода. В будущем мы будем видеть все больше и больше адаптивных «чистых» элементов, легко доступных на всей линейке устройств.
Будущее?
Будущее еще не пришло, однако нам уже приоткрыли завесу, что же скрывается за малой частью второго шага в данном дизайне — в основном это принципы Масштаба, однако также Движения и Глубины:
- 360 видео панорамы
- Осознанные заголовки
- Речь
- Расслоение по глубине оси Z
- Пространственный звук
Многое зависит и от обычных разработчиков с дизайнерами, т. к. уже приоткрытые Осознанные заголовки — это конкретная имплементация от приложения Groove. Полагаясь на уже раскрытые принципы, были созданы новые элементы, которые настолько понравились Microsoft, что теперь они смотрят на возможность упрощения и автоматизации достигнутого эффекта для всего сообщества.
Что же теперь?
Концепция составлена, элементы раскрыты. С разработчиками поделились первыми шагами в новом направлении. Многое из увиденного можно воплощать и старыми средствами, однако, когда это становится частью системы, неизбежно будут представлены простые средства достижения необходимого UX. В будущем нам стоит ждать этих новых инструментов, которые позволят проще раскрыть новую парадигму дизайна от Microsoft.
Мы увидели целых 5 принципов, формирующих новую концепцию. Каждый из них важен, и я надеюсь, что дизайнеры прислушаются или хотя бы примут их к сведению.
За последние пару лет Microsoft дали понять, что они стремятся раскрыть креативный потенциал пользователей. Однако, как я вижу, это должно открыть новый потенциал и среди дизайнеров. Каждый из принципов является планомерным развитием наработок текущего дизайна в сочетании с доступными технологиями и обширной экосистемой различных устройств. Мы получаем универсальность в широком смысле, в которой выигрывает каждый из участвующих элемент��в, размывая свои границы взаимодействия. Становление новой концепции только способствует появлению более привлекательных приложений, создавая широкий простор для фантазии на тему будущего приложений основанных на Fluent Design.