Создание Tinkoff Design System. Первые шаги. Интерьер системс

Создаем дизайн-систему / Блог компании Everyday Tools / Хабр

Вне всякого сомнения, о дизайн-системах меня спрашивают чаще, чем о чем-либо другом. За последние несколько лет я посвятил много времени размышлениям о том, как выстраивать, реализовывать и представлять дизайн-системы для таких продуктов, как Marvel, Bantam и Modulz, и теперь решил, что пришла пора поделиться тем, чему научился в процессе.

Что такое дизайн-система?

Ни для кого не секрет, что дизайнеры любят хорошие UI-киты. Но, по моим наблюдениям, в последнее время все больше внимания уделяется не просто наборам инструментов и руководствам по стилю, а созданию систем, которые связывают воедино целые продукты. Компании вроде Shopify и Intercom формируют особые команды, которые занимаются только и исключительно дизайн-системами. Люди начинают осознавать, как важен системный подход в дизайне. Это внушает оптимизм. Кто знает, возможно, в один прекрасный день появится инструмент для дизайнеров, который не будет предполагать, что в каждом новом проекте мы начинаем все с нуля.

Дизайн-система (применительно к IT продуктам) — это не просто фреймворк, набор UI-инструментов или библиотека компонентов. Это больше, чем руководство по стилю или набор инструкций по написанию кода. Больше даже, чем все перечисленное в совокупности. Дизайн-система — это постоянно эволюционирующий свод правил, который определяет порядок создания продукта.

Хорошая дизайн-система многогранна — она включает в себя всё, от культуры и миссии компании и вплоть до брендинга, копирайтинга, библиотек компонентов и прочих языков дизайна. Элементы высшего уровня можно назвать самыми важными аспектами системы (хотя это спорный момент), но в данной статье мы будем считать, что вы, как компания, знаете, кто вы есть, какая у вас миссия, как должны выглядеть ваши продукты, какое впечатление оставлять и как работать.

Определившись с этими ключевыми параметрами, вы можете стройно и последовательно изложить свое видение средствами дизайна.

Создаем палитру стилей

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

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

Так мы должны разбирать каждый компонент, пока не останутся мельчайшие элементы, которые уже не разложишь — это и будут базовые стили. Начать можно со списка атрибутов стилей CSS. Большинство из атрибутов могут принимать только предзаданные значения и, соотвественно, могут применяться на любом сайте в Интернете. Те атрибуты, которые принимают произвольные значения, в конечном итоге и составляют то, что отличает наш продукт от всех прочих. Эти произвольные значения будут определять палитру стилей на глобальном уровне. Глобальную палитру стилей мы будем использовать при создании абсолютно всех аспектов каждого из продуктов компании.

Когда все будет готово, в продукте не должно использоваться ни единого стиля, который не был изначально включен в глобальную палитру стилей.

Цвет

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

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

Цвета бренда

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

Цвета для обозначения успеха/неудачи

Ну и наконец, нам еще понадобится серый цвет. В большинстве интерфейсов нужны как минимум следующие оттенки серого:

• очень светлый оттенок для фонов;
• оттенок чуть потемнее для границ, линий, обводки и разделителей;
• оттенок средней насыщенности для подзаголовков и вспомогательного текста;
• темно-серый для заголовков, основного текста и фона.

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

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

Окончательный вариант палитры

Тени

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

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

Четырех разновидностей теней должно быть достаточно, чтобы реализовать любой компонент в системе:

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

Все виды теней, от легкой до удаленной

Размер шрифта

Чтобы выстроить на каждом экране нужную визуальную иерархию, нам необходимо определиться, какие размеры шрифтов будут использоваться.

Шрифты в нашем дизайне должны выстраиваться в гамму, как ноты в мелодии. Это помогает выдержать стройный ритм по вертикали. Все эти сравнения вас, возможно, немного обескуражили, но, на наше счастье, умные люди уже успели во всем разобраться за нас. Tim Brown создал отличный вебсайт, на котором представлены наборы шрифтов разных размеров. Adam Morse выложил в открытый доступ свою имплементацию диатонической шкалы шрифтов. На мой взгляд, терция подходит для большинства продуктов.

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

• в качестве исходного (1em) размера текста, который будет часто появляться на нашем маркетинговом сайте, в интерфейсе и так далее, я предлагаю взять 16px, как размер, который выставляется в браузерах по умолчанию;
• размер побольше для крупного текста — постов в блоге, допустим;
• еще пара вариантов покрупнее для заголовков и подзаголовков;
• до неприличия огромный шрифт — его мы будем использовать, например, чтобы выделять цены на соответствующих страницах;
• также нужно включить несколько вариантов поменьше для примечаний «мелким шрифтом», подсказок в полях ввода и прочих вспомогательных текстов.

Шкала шрифтов

Закругление углов

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

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

Разные радиусы скругления: 2px, 4px и 8px

Примечание: понадобится также значение 50% для создания круглых компонентов — аватарок и так далее.

Расстояние

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

Как и в случае со шрифтом, только придерживаясь определенной шкалы, мы можем быть уверены, что все компоненты и макеты будут выглядеть одинаково. Я лично больше всего люблю и чаще всего применяю как шкалу сетку в 8dp от Material Design. Elliot Dahl написал отличную статью о преимуществах, которые она дает.

Выдерживая шаг в 8dp, мы можем рассчитывать расстояние между различными компонентами в макете любого из нашей линейки продуктов.

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

Разрядка

Как я уже упоминал, размер — не единственный атрибут стиля, который нам нужно будет задать для шрифта. Расстояние между буквами — еще один полезный атрибут, с помощью которого можно сделать крупные заголовки покомпактней, а мелким заголовкам дать немного простора.

3-4 значений для разрядки должно хватить.

Создаем библиотеку компонентов

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

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

Dave Rupert недавно устроил на своем Твиттере опрос для читателей на следующую тему: куда помещать код, который переопределяет стиль компонента кнопки, например, если эта кнопка, в свою очередь, находится внутри модального компонента.

Harry Roberts (обязательно ознакомьтесь с его работами) позже высказал свои соображения по этому поводу в статье. Позже Jonathan Snook раскрыл тему, добавив свои мысли. Хоть я и согласен с теми выводами, к которым пришли они оба, мне кажется, что всю эту дискуссию можно было даже не начинать.

Это парадокс — создавать компонент дизайна с намерением использовать его многократно на глобальном уровне, а потом видоизменять его для какой-то отдельной части продукта. Тогда само создание библиотеки компонентов теряет смысл. Когда я вижу, как один стиль переопределяет другой, обычно это объясняется либо отчаянными попытками впихнуть компонент куда-то, куда он не влезает, либо тем, что дизайн был недостаточно подробно спланирован на ранних стадиях, и теперь дизайнер вынужден прибегать к вариациям.

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

Теперь давайте возьмем несколько стандартных компонентов и разберем, как можно их построить, применяя только те стили, которые включает созданная нами палитра.

Просто кнопка

Начнем с самого незамысловатого примера — кнопки и посмотрим на нем, возможно ли сделать компонент из предзаданной палитры стилей.

Другие компоненты

И опять: все эти цвета, размеры шрифта, тени и отступы были взяты непосредственно из палитры, которую мы составили в предыдущих параграфах.

Попробуем кое-что позатейливее…

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

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

Пара советов напоследок

• Для некоторых компонентов понадобятся величины, которые мы не определяли в палитре (скажем, ширина боковой панели). Иногда эти величины будут определяться просто как «треть ширины области просмотра» или что-то в этом роде. В других случаях это будут произвольные величины, которые используются только в этом конкретном случае — ничего страшного в этом нет. Смысл в том, чтобы продумать, какие величины можно использовать многократно (таких большинство), а какие — нет.
• Позвольте компонентам жить своей жизнью. Не пытайтесь задавать размер поля для кнопок, окошек ввода, заголовков и так далее. На уровне компонентов вам следует определять только те стили, которые имеют одинаковый вид во всех случаях употребления данного компонента. Так как ширина поля отличается от случая к случаю, лучше применять враппер . Harry Robberts написал отличную статью на эту тему.

habr.com

Создание Tinkoff Design System. Первые шаги

Необходимость дизайн-системы

Дизайн-система — довольно широкое понятие и применяется в разных сферах: от полиграфии до архитектуры. Для пользовательских интерфейсов она включает в себя:

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

В небольших компаниях с одним продуктом можно обойтись без дизайн-системы. Одно небольшое приложение, один дизайнер, небольшой Sketch-файл, в котором можно всё увидеть.

Но что делать, если у вас больше десяти продуктов, сотни Sketch-файлов, а в дизайн-команде больше десяти человек? Нужно вводить правила построения интерфейсов и распространять их среди команд дизайнеров и разработчиков.

Иначе новые фичи некогда будет придумывать: два дизайнера нарисуют разные отступы для одного элемента, и всё время уйдет на приведение дизайна к одному знаменателю…

Отсутствие дизайн-системы ведет к:

• десинхронизации внутри дизайн-команды и между командами дизайнеров и разработчиков
• увеличению времени обучения новых участников дизайн-команды
• несостыковке дизайн-макетов и верстки
• постоянному исправлению созданных макетов
• медленному внедрению новых фич

Система хороша тогда, когда она работает.

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

Атомарный дизайн

Для создания нашей дизайн-системы мы выбрали методологию Atomic Design, которую в 2013 году предложил Брэд Фрост (http://bradfrost.com/blog/post/atomic-web-design/). Идея методологии пришла из химии: атомы собираются в молекулы, молекулы — в организмы, а организмы собираются в страницы по заданным правилам (шаблонам, лэйаутам).Преимущества методологии атомарного дизайна:

• Контроль использования элементов. Четкое разделение на атомы, молекулы и организмы позволяет следить, где и какие элементы используются, из каких атомов и молекул состоят организмы.
• Отличная читаемость и консистентность кода. Атомарный дизайн — заранее подготовленные атомы и молекулы, используемые на разных страницах сайта или приложения. Поэтому элемент редко бывает продублирован или изменен.
• Не надо постоянно думать о пикселях. Заранее подготовленные элементы уже отвечают заданным требованиям, нет необходимости проверять новые сверстанные страницы на pixel perfect design. Все элементы уже использовались ранее.
• Быстрое создание страниц. Созданные наборы элементов (атомы, молекулы и организмы) позволяют быстрее собирать страницы дизайнерам и разработчикам.
• Компонентный апдейт, тестирование и внедрение. Атомарный дизайн имеет модульную структуру. Мы можем изменить элемент в одном месте, протестировать его и распространить апдейт на все страницы, где этот элемент используется.

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

Перед нами стояла непростая задача: понять, из каких атомов и молекул состоят работающие элементы. Мы разбивали большие элементы на элементы поменьше, пока не дошли до элементов, которые разбить на части нельзя.

Разбивайте до тех пор, пока можно разбивать.

Мы разобрались с атомами и молекулами. Перед нами встал следующий вопрос: как сделать все организмы универсальными, чтобы мы могли применять их в любом продукте?

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

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

Любая методология — это только фундамент.

Мы ввели дополнительный продуктовый уровень в методологию атомарного дизайна и получили гибкую структуру, в которой все продукты состоят из одних и тех же атомов и молекул. При этом во всех продуктах есть общие организмы (Base Organisms). А есть уникальные — те, которые относятся к отдельно взятому продукту (Unique Organisms). Поэтому для каждого продукта созданы собственные шаблоны, по которым собираются страницы из общих и уникальных организмов.

Синхронизация. Дизайн и разработка

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

Дизайнеры и разработчики — это одна команда.

Нужно достичь полной синхронизации в:

• базовых принципах: текстовые стили, цвета, сетка, размеры и типы иконок — всё должно быть идентично;
• нейминге элементов: должна быть принята единая система нейминга. Если в дизайне это «btn_alert», значит, и в коде это «btn_alert»;
• количестве элементов: если в дизайн-макете всего два варианта кнопки (primary и secondary), то и у разработчиков должно быть всего два варианта кнопки;
• Состоянии элементов: у каждого элемента есть определенное количество состояний (default, hover, pressed, disabled и так далее). Количество состояний должны совпадать для каждого элемента;
• внешнем соответствии: верстка элемента должна соответствовать дизайн-макету;
• лэйаутах: элементы идентично располагаются и ведут себя на страницах продукта или приложения;
• версионность: разные версии дизайн-системы поддерживаются и разработчиками, и дизайнерами.

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

Документация

Для каждой системы создается документация. Неважно, как это будет сделано — главное, это должно быть записано и согласовано. Вы можете использовать Google Документы с картинками или собрать с разработчиками живой GUI с версткой. Создание документации — это долгий процесс, но на выходе получится огромная библиотека знаний, которая будет ежедневно помогать дизайнерам, разработчикам и менеджерам.

В любой документации дизайн-системы для интерфейсов должны быть регламентированы:

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

Можно добавлять в документацию то, что считаете необходимым.

Что получится в итоге?

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

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

В следующих статьях я расскажу о создании UI Kit, контроле версий и необходимых для успешной работы дизайн-системы регламентах.

designmojo.ru

Салон Интерьер. Мебель Прованс, итальянская мебель, декор, предметы интерьера

«Интерьер» — единственная в своем роде сеть интерьерных салонов, в которых представлен широчайший выбор мебели и предметов интерьера в классическом стиле. За свою 19-летнюю историю «Интерьер» стал одним из лидеров мебельного рынка Ростова-на-Дону, завоевав доверие клиентов высоким качеством продукции, постоянно пополняющимся ассортиментом и разумными ценами. Неповторимая, теплая атмосфера шоу-рума и внимательное отношение к каждому клиенту — визитная карточка салона.

Салон «Интерьер» работает напрямую с ведущими фабриками Италии, Испании, Голландии, Англии и других стран, что гарантирует высокую скорость исполнения заказов и низкие цены. Среди наших партнеров - Provasi, Vittorio Grifoni, Theodore Alexander, Jansen, Antic Line, Francesco Molon , La Tre Ci, Maggi Massimo и многие другие производители, продукция которых проверена временем.

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

В салоне Вас ждет дизайнер-декоратор, к которому можно всегда обратиться за советом или обсудить Ваш будущий интерьер за чашкой ароматного кофе.

Возможность заказа по каталогам, тщательная подборка товара позволяет с помощью «Интерьера» декорировать не только частные, но и общественные интерьеры – гостиницы, рестораны, кафе.

«Интерьер» – это всегда история с продолжением, помогающая раскрыть волшебство пространства Вашего дома, и сделать его атмосферу неповторимой!

interior-system.ru

Ключевые принципы новой дизайн системы Fluent Design System от Microsoft

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

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

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

Свет

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

Глубина

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

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

Движение

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

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

Материал

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

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

Масштаб

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

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

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

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

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

sketchapp.me

design system — с английского на русский

Data Design System — ASA Type Public Industry CAD, Building Information Modeling Software Founded Stavanger, Norway (1984) Headquarters Stavanger, Norway …   Wikipedia

RAL-Design-System — Das RAL Design System (Produktbezeichung: RAL DESIGN) ist ein Farbsystem, das vom RAL Institut herausgegeben wird. Im Gegensatz zu den Farbfächern RAL Classic und RAL Effect, die reine Farbkataloge sind, weist das RAL Design System eine… …   Deutsch Wikipedia

Advanced Design System — (ADS) is an electronic design automation software system produced by Agilent EEsof EDA [ [http://eesof.tm.agilent.com/find/eesof Agilent EEsof EDA home page] ] , a unit of Agilent Technologies. It provides an integrated design environment to… …   Wikipedia

computer-aided design system — kompiuterinio projektavimo sistema statusas T sritis automatika atitikmenys: angl. computer aided design system; computer based design system; computer controlled design system vok. rechnergestütztes Entwurfssystem, n rus. система… …   Automatikos terminų žodynas

computer-based design system — kompiuterinio projektavimo sistema statusas T sritis automatika atitikmenys: angl. computer aided design system; computer based design system; computer controlled design system vok. rechnergestütztes Entwurfssystem, n rus. система… …   Automatikos terminų žodynas

computer-controlled design system — kompiuterinio projektavimo sistema statusas T sritis automatika atitikmenys: angl. computer aided design system; computer based design system; computer controlled design system vok. rechnergestütztes Entwurfssystem, n rus. система… …   Automatikos terminų žodynas

Electromagnetic Design System — (EMDS) is a commercial finite element method solver for electromagnetic structures from EEsof [ [http://eesof.tm.agilent.com/products/emds main.html EMDS home page] ] . EMDS can perform electromagnetic simulation of arbitrarily shaped, passive… …   Wikipedia

Advanced Design System — Advanced Design System, kurz ADS, ist eine spezielle Simulationssoftware der Firma Agilent zur Simulation von elektrischen Schaltungen für die Hochfrequenztechnik und stellt in diesem Segment einen Industriestandard dar. ADS stellt unter anderem… …   Deutsch Wikipedia

turnkey computer-aided design system — visiškai parengta kompiuterinio projektavimo sistema statusas T sritis radioelektronika atitikmenys: angl. turnkey computer aided design system vok. schlüsselfertiges rechnergestütztes Entwurfssystem, n rus. система автоматизированного… …   Radioelektronikos terminų žodynas

Pattern Design System — (PDS)    See Pattern …   Historical Dictionary of the Fashion Industry

Design rule checking — or Check(s) (DRC) is the area of Electronic Design Automation that determines whether the physical layout of a particular chip layout satisfies a series of recommended parameters called Design Rules. Design rule checking is a major step during… …   Wikipedia

translate.academic.ru

---

• 
  Озеленить интерьер
• 
  Гдр интерьер
• 
  Совковый интерьер
• 
  Азербайджанский интерьер
• 
  Фотобанк интерьеров
• 
  Интерьер рифма
• 
  Кадышевой интерьер
• 
  Интерьер амг
• 
  Фестиваль интерьеров
• 
  Буше интерьер
• 
  Интерьер коми