Material design на русском

Material design базируется на тактильной реальности, его вдохновением стало изучение чернил с бумагой, он технологически продвинут, а также на 100% открыт для воображения и магии

Google

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

Знакомство с Material Design в деталях

Material Design представляет собой качественно новый визуальный язык, представленный компанией-флагманом Google. Он относительно очень молодой, так как в первый раз был представлен только в июне 2014 года, но произвел фурор в дизайн-сообществе моментально. Это и объяснимо, так как он способен систематически решать самые главные проблемы дизайнеров.

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

Основные принципы Material Design

В разных источниках можно встретить разную «разбивку» на принципы, но вернее будет выделить 9 основных аспектов, способных четко охарактеризовать разработку:

Принцип №1: material — это, в первую очередь, метафора, объединяющая корректную организацию пространства, а также движения объекта в нем. Данный дизайн неизменно строится на так называемой тактильной реальности, так как пользователи могут почувствовать грань между плоскостями, которой нет. Принцип №2: всегда интуитивно понятные поверхности. Это значит, что грани с плоскостями всегда обязаны точно передавать смыслы визуального характера. То есть ощущения появляются на подсознательном уровне, благодаря теням, границам. Принцип №3: взаимодействие объектов. Важно абсолютно все: свет, поверхность и ее отображение, движение. Все это становится необходимой базой для последующего взаимодействия объектов. Все должно выглядеть по максимуму реалистично, как будто действие происходит не на экране, а прямо перед пользователем. Принцип №4: применяется единый адаптивный дизайн, но на каждом устройстве будет отражаться свой взгляд на одни и те же элементы, при этом все виды адаптированы к конкретным устройствам, но неизменными остаются цвета, иконки и пространственные отношения. Принцип №5: он акцентирует внимание на графике, цвете и шрифтах. Дизайн должен быть максимально естественным и логичным, все элементы – сбалансированы и гармоничны по отношению друг к другу, чтобы у «юзеру» было комфортно и он понимал, что ему необходимо делать здесь и сейчас! Принцип №6: первоначальность действия. По факту, это самая суть Материал Дизайна, так как посредством действий пользователя меняется дизайн, чтобы облегчить все задачи относительно эксплуатации web-ресурса или приложения. Принцип №7: пользователь неизменно инициатор всех происходящих изменений, совершая определенные действия. Все начинается с «общения» с интерфейсом. Принцип №8: анимационная хореография. Действия каждого объекта по отношению к другому синхронно. Объекты, находящиеся в поле пользовательского зрения, не нарушают базис даже после трансформации и перемещения. Принцип №9: именно движение является обоснованием смысла. Каждый переход в интерфейсе обязан быть понятным и эффективным. Движения объектов существуют для привлечения внимания, неся в себе смысл.

Тем не менее, хотелось бы отдельно выделить 4 более четко сформулированных принципа, которые являются самым «сердцем» Material Design:

В Material Design ставка сделана на тактильную поверхность. Интерфейс складывается из слоёв «цифровой бумаги», как будто осязаемой. Все слои находятся на разных высотах, отбрасывая тени, помогая понять анатомию интерфейса и осознать, как взаимодействовать с ним.

Не менее важна и полиграфия, то есть полиграфический дизайн, ведь, как мы назвали слои «цифровой бумагой», следовательно, во всем, что относится к «цифровым чернилам», используется подход из традиционного дизайна. Если анимация, то только осмысленная, ведь в реальности предметы не могут возникать сами собой и пропадать. Это значит, что в Material Design анимация только обоснованная.

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

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

В качестве резюме

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

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

1

подписаться

Чтоб оставить комментарий нужно войти или зарегистрироваться

Интересные материалы

Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design и как его использовать.

Изначально дизайнеры Google ставили перед собой три глобальные задачи:

  • Создать не просто новый стиль, а целую систему оформления, в которой принципы и правила будут четко прописаны;
  • Обновить существующие стили (FLAT/Metro, минимализм и другие), опираясь на новые технологии.

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

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

«Материал» в дизайне: что это?

Основой стиля стало понятие материала. Это основной «строительный элемент», из которого собираются функциональные блоки дизайна. Кратко его можно описать так:

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

Google material design

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

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

В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги.

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

8 примеров сайтов в стиле Material Design

Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).

Интересно, что разработчики материал дизайна в Гугле даже прописали чётко все параметры для каждого из возможных элементов интерфейса!

Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:

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

Material Design

Матиас Дуарте, один из руководителей дизайнерского подразделения Google раскрыл основы нового типа дизайна, названного Material.

Material Design – происхождение, принципы, особенности

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

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

Материя и форма

Николай Житкофф и Джон Уайли, разработчики поисковой системы Google, рассматривали дизайн Google Now. Тут к ним и пришел ответ. Они оценивали этот карточный интерфейс и задумались – «Что мы увидим, если передвинем карточку?».

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

Это запустило разработку метафорического материала, который был чем-то похож на белую, плоскую бумагу, обладающую реалистичными тенями. С этого все и закрутилось, появились прочие компоненты дизайна. Как все это было воплощено в жизнь мы можем посмотреть на примере Android L. Последовательность, минимализм, яркость, смелось – вот основные особенности Material Design.

Как утверждают Житкофф с Уайли – свершился настоящий переворот в сфере дизайна Google. С 2012 года ведется активная разработка Project Kennedy. Проект предусматривает единый, унифицированный дизайн во всем.

Креатив и границы

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

Все построено на физических процессах и законах. Но, софт может повести себя так, что все они просто разлетаются подобно фантастическим фильмам, когда не реализуется даже простейшая логика. Дуарте четко высказался по поводу нового дизайнерского подхода в Apple iOS – «В пространстве и времени мы не перемещаемся на сверхзвуковой скорости. Есть четкие рамки, в которых идет поиска решения – дизайна. Дизайн – сложное искусство».

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

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

Материализуй

Еще один очень важный момент, который был реализован именно в Material Design – это унификация. Многие годы уходят на работу над всеми сервисами компании Google, что повлекло изменение всех дизайнерских принципов. Material Design убеждает пользователя что на экране именно то что нужно сейчас, ему не нужно настраивать все самостоятельно.

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

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

Android Wear и Android L – это часть того, что действительно охватывает Material Design. Он касается всего над чем работает Google. Здесь затрагивается вопрос ощущений, которыми сопровождается контакт человека и технологий.

Дуарте подчеркивает, что Xerox PARC плодотворно потрудилась, создав привычные нам курсоры и окна. Благодаря этому нововведений удалось воплотить настоящий рабочий стол в виртуальном мире.

Гайдлайны мобильных приложений

Это позволило нам комфортно работать с ПК. Тоже самое получилось и с сенсорными экранами у Apple.

Пришла и очередь Google. Люди сегодня работают с множеством технологий – сенсор, голос, жесты, интеллектуальные идеи. Благодаря Material Design – все они стали одной понятной вещью. В интернете, на Android или в Chrome OS мы имеем одно и то же.

9 принципов

Материал – метафора

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

Интуитивно понятные поверхности

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

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

Взаимодействие исходит из размерности

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

Единый адаптивный дизайн

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

Цвета, графика, шрифты

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

Первичные действия

Смысл дизайна заключается в пользовательских действиях. Дизайн меняется под воздействием первичных действий. Внимание заостряется на функциональности.

Изменения инициируются пользователями

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

Анимационная хореография

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

Смысл в движении

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

В Google говорят, что дизайн – ничто иное, как искусство творить. Цель компании – удовлетворять пользователей во всех отраслях. Их потребности развиваются, поэтому проекты, идеи и философия компании тоже не должны стоять на месте.

Setting up MD Iconic Font can be as simple as adding one line of code to your website — it’s like Font Awesome but with Material Design by Google. Also it plays nicely with Bootstrap 3!

EASY: CSS on CDNjs

Thanks to the cdnjs.cloudflare.com, you can use CDNjs to add MD Iconic Font into your website without downloading or installing anything!

  1. Paste the following code into the section of your site’s HTML.

    Практическое введение в Material Design Lite от Google

    Immediately after release, it takes a bit of time for CDNjs to catch up and get the newest version live on their CDN.

  2. Check out the examples to start using Material Design Iconic Font!

BASIC: Default CSS

Use this method to get the default Material Design Iconic Font CSS.

  1. Download latest version of Material Design Iconic Font from this site or GitHub.
  2. Unpack the entire archive into your project.
  3. In the of your html, reference the location to your material-design-iconic-font.min.css.
  4. Check out the examples to start using Material Design Iconic Font!

PRO: Custom LESS or SCSS

Use this method to customize Material Design Iconic Font using LESS or SCSS.

  1. Download source of Material Design Iconic Font from GitHub.
  2. Open your project’s or and edit the variable to point to your font directory.

    The font path is relative from your compiled CSS directory.

  3. Re-compile your LESS or SCSS if using a static compiler.
  4. Check out the examples to start using Material Design Iconic Font!
  • Chrome 21+
  • Firefox 22+
  • Opera 12.1+
  • Safari 6.1+
  • IE 10+
  • Android Browser 4.3+
  • Not supported in Opera Mini

In fact it can work in earlier versions of browsers accordingly to caniuse.com portal (you can check ttf, woff, transform and animation properties), but I can’t test it.

2.2.0:

  • add 33 new icons
  • change main section in bower.json
  • repair seat and gradient icons
  • change class to
  • change google, google-plus, google-plus-box and paypal icons

2.1.2:

  • add WOFF2 support
  • remove 2.0 SVG icons files
  • add EOT and SVG font files (not included in css)

2.1.1:

  • fix bugs in aliases LASS/SASS files

2.1.0:

  • change base font folder to «fonts»
  • resort and rename icons for better search
  • change variables prefix in LESS/SASS from to
  • change helper classes prefix in LESS/SASS from to
  • change icons variables prefix in LESS/SASS from to
  • some changes with icons to make them look pixel perfect at 14px size
  • add some community icons
  • add some new icons in directional and social sections

All changes in LESS/SASS/CSS has backward compatibility with 2.0.

If you use font as standalone font — you should update it carefully, because 2.1 ttf file cheat sheet hasn’t backward compatibility with 2.0. Sorry for that, but in 2.0 was a bug that I couldn’t remove without breaking backward compatibility.

2.0.2:

  • fix some minor changes in less/scss/css files for better icons display

2.0.1:

  • remove IE8-9 hooks
  • fix «!default» to used properly way in sass code

2.0.0:

  • add new Google icons
  • remove duplicated icons to reduce font size
  • resort and rename icons for better search
  • change icon-prefix to ‘zmdi-‘ for capability with Angular JS
  • add ‘fixed-width’, ‘list’ and ‘stack’ classes
  • add «!default» to scss variables
  • add vars with glyph codes to less/scss
  • add nested pseudo classes for less/scss

First version

  • 1.1.1 — add bower support and Cheatsheet page
  • 1.1.0 — add SCSS support (thanks to @davidkpiano)
  • 1.0.1 — fix bug with battery, charging-battery and wi-fi icons (device section)
  • 1.0.0 — add all available icons from Google

If you want to upgrade from 1.x to 2.x — follow this guide!

The full details of how Material Design Iconic Font is licensed and ‘Thanks to’ section: License page.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *