Подробнее о библиотеке компонентов дизайна материалов Google

  1. Подождите, что это за «Библиотека компонентов материалов»?
  2. Разве библиотека поддержки поддержки и Material Design Lite уже не делали этого?
  3. Android
  4. стриж
  5. Objective-C
  6. Полезные ссылки

Чуть более двух недель назад Google объявил о запуске «Библиотеки компонентов материалов», централизованного репозитория компонентов Material Design, который значительное количество людей восприняло как «вставку копий библиотеки поддержки проектирования».

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

Подождите, что это за «Библиотека компонентов материалов»?

Material Components - это инициатива Google по объединению структур реализации Material Design на разных платформах в одном централизованном репозитории с разработкой, осуществляемой основной командой инженеров и дизайнеров UX в Google. Эти компоненты являются официальными и обрабатываются специальной группой, что обеспечивает надежный рабочий процесс, который позволяет разработчикам использовать их в качестве строительных блоков, на которых они могут продолжать создавать красивые и функциональные пользовательские интерфейсы в парадигме бумаги и чернил. Библиотека включает большинство компонентов Material Design из своей спецификации, таких как флажки, стили текста, карточки, кнопки и т. Д., И ее модульность позволяет разработчикам либо включать весь набор, либо выбирать и выбирать только те компоненты, которые им необходимы.

Компоненты материалов для Android, iOS и веб-разработчиков помогают выполнить Материал Дизайн с модульными и настраиваемыми компонентами пользовательского интерфейса.

Разве библиотека поддержки поддержки и Material Design Lite уже не делали этого?

На этом этапе разработчики Android и интерфейсных приложений наверняка подумают, подождите, я использовал компоненты Material Design, используя библиотеку поддержки проектирования на Android или Material Design Lite в Интернете, зачем мне эта новая библиотека? ? Итак, оба эти варианта перешли в Компоненты конструирования материалов с улучшенной кодовой базой, эффективной модульностью, согласованными кроссплатформенными реализациями и, что наиболее важно, выделенной командой разработчиков и дизайнеров UX в Google, которая следит за ее разработкой, в отличие от ранее фрагментированных подход.

Android

С момента запуска Библиотеки поддержки дизайна в Material Design наблюдается резкий скачок, который в последнее время стал стандартом де-факто для Google, включая библиотеку, а также для предварительной настройки множества конфигураций, ориентированных на Material Design, при создании новый проект в Android Studio. За время, прошедшее с момента его выпуска, DSL значительно вырос, добавив множество компонентов по популярному запросу, а также добавив новые функции и функции для существующих компонентов.

Действует Библиотека компонентов дизайна материалов для Android, DSL перешел на GitHub по новым централизованным шаблонам и в специальную команду Google, сохранив даже прежние операторы импорта Gradle. В нынешнем выпуске ничего не изменилось перед разработчиками, но потенциал для будущего остается безграничным. Использование библиотеки MDC-Android ничем не отличается от использования DSL, добавления его в Gradle и последующего использования представлений в XML.

скомпилировать 'com.android.support:design:25.1.0' <android.support.design.widget.FloatingActionButton android: id = "@ + id / fab" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android : layout_gravity = "bottom | end" android: layout_margin = "@ dimension / fab_margin" android: src = "@ android: drawable / ic_dialog_email" />

IOS

Material Design заметно замедлил рост на мобильной платформе Apple, в первую очередь потому, что он рассматривается как язык дизайна Android, а также из-за отсутствия официальных библиотек поддержки компонентов Material Design, аналогично тому, что делала Библиотека поддержки дизайна на Android уже более двух лет. Компоненты Material Design Components для iOS, или MDC-iOS, как называет это Google, стремятся исправить это, предоставляя набор надежных, простых в использовании и официальных компонентов Material Design, которые написаны на Objective C, но также поддерживают более новый Swift. язык, и Интерфейсный Разработчик XCode.

Google собрал удобный руководство о том, как начать настройку нового проекта с MDC-iOS, но большинство из нас будет лучше относиться к пошаговому руководству для существующих проектов, и в официальном репозитории это тоже есть. Самый простой способ начать работу - использовать CocoaPods, Objective C и менеджер зависимостей Swifts. Если вы еще не используете его, CocoaPods можно установить с помощью простой команды:

sudo gem установить cocoapods cd ваш-проект-каталог pod init

Затем в ваш Podfile необходимо добавить модуль MDC-iOS:

target "MyApp" do ... pod 'MaterialComponents' end

И, наконец, вы готовы установить модуль и начать работу с рабочей областью, созданной для вас CocoaPods:

pod install откройте ваш-проект.xcworkspace

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

стриж

import MaterialComponents.MaterialButtons class ViewController: UIViewController {переопределить func viewDidLoad () {super.viewDidLoad () let liftButton = MDCRaisedButton.init (); riseButton.setTitle ("Поднятая кнопка", forState: .Normal); raiseButton.sizeToFit (); RaEBBTTON.ADDTarget (self, action: #selector (tapped), forControlEvents: .TouchUpInside); self.view.addSubview (raiseButton); } func tapped (отправитель: UIButton!) {NSLog («Кнопка была нажата!»); }}

Objective-C

#import "MaterialButtons.h" @implementation ViewController - (void) viewDidLoad {[super viewDidLoad]; MDCRaisedButton * поднялButton = [MDCRaisedButton новый]; [поднял кнопку setTitle: @ "Поднятая кнопка" forState: UIControlStateNormal]; [поднял размер кнопки ToFit]; [поднялButton addTarget: собственное действие: @selector (tapped :) forControlEvents: UIControlEventTouchUpInside]; [self.view addSubview :gedButton]; } - (void) постучал: (id) sender {NSLog (@ "Кнопка была нажата!"); } @конец

Web

Путешествие Material Design в Интернете началось с запуска Project Polymer, библиотеки веб-компонентов и полифиллов Google, которая включала в себя набор «бумажных компонентов», перенося все от любимой кнопки «Плавающее действие» до захватывающих дух волн, которые все так полюбили. В Интернете мы знаем и любим. Тем не менее, Polymer столкнулся с удручающей скоростью принятия решений из-за широко распространенного колебания веб-разработчиков в отношении принятия всей структуры веб-компонентов, исключительно для того, чтобы придать дизайну Material Design внешний вид, при этом многие вместо этого выбирают самостоятельно реализованные альтернативы CSS. Чтобы устранить эту проблему, Google запустил Material Design Lite, независимый от фреймворка продукт, который позволяет разработчикам реализовывать компоненты Material, просто импортируя несколько скриптов и таблиц стилей через CDN или загружая их и включая в HTML.

Material Design Components для Web стремится стать преемником Material Design Lite, предлагая простую для импорта структуру и легкую площадь, а также опираясь на нее, привнося модульность в картину. Компоненты MDC-Web можно установить с помощью Node Package Manager, либо в виде полного набора, либо в виде отдельных компонентов.

npm install - сохранить материал-компоненты-web npm install - сохранить @ материал / кнопка @ материал / карта

После установки компоненты довольно просто импортировать и использовать, так как пакет обеспечивает встроенную поддержку популярных загрузчиков модулей JavaScript, таких как Webpack или SystemJS, а при импорте модули используются точно так же, как стандартные теги HTML, хотя и с несколькими дополнительными классами CSS.

импортировать {checkbox as mdcCheckbox} из 'material-components-web'; <h2 class = "mdc-typography - display2"> Здравствуйте, компоненты материала! </ h2>

Это оно! Это самый простой способ начать работу с библиотекой MDC-Web. Для более глубокого введения Google собрал Начиная руководство, которое должно оказаться полезным для разработчиков, уже знакомых с импортом и использованием таких платформ.

Полезные ссылки

Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик? Введите адрес электронной почты, чтобы подписаться на нашу рассылку.

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов
Хотите понять, как посетители воспринимают сайт? Это очень просто. Представьте, что вы говорите по телефону с директором, и в это время вам звонит кто-то из родственников, а у вас еще работы на четыре

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

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

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

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

Карта