CC BY
7
На сегодняшний день это самые эффективные способы монетизации сайтов. Однако все зависит от тематики сайта, его посещаемости и качества контента. В идеале использовать несколько видов реклам, главное не переборщить.
УДК 004.514
Наточий А.А.
программист БД ООО «Открытые бизнес-решения»
Россия, г. Ростов-на-Дону Подколзина Л.А. студент 2 курса отдел магистратуры Донской государственный технический университет
Россия, г. Ростов-на-Дону ПРИМЕНЕНИЕ ПРИНЦИПОВ MATERIAL DESIGN ПРИ ПОСТРОЕНИИ ЭФФЕКТИВНОГО ГРАФИЧЕСКОГО ИНТЕРФЕЙСА ПОЛЬЗОВАТЕЛЯ
ИНФОРМАЦИОННОЙ СИСТЕМЫ
Статья посвящена использованию Material Design при построении современных мобильных приложений. Рассматриваются основные особенности данного подхода к проектированию интерфейсов. Рассмотрен пример использования Material Design при создании мобильной социальной сети для лиц с ограниченными возможностями.
Ключевые слова: Material Design, GUI, Android-приложение, мобильная разработка, моделирование информационной системы
Natochiy А. А.
database Administrator Programmer, LLC «Open Business Solutions»
Russia, Rostov-on-Don Podkolzina L.A. second-year student of Magistracy Don State Technical University Russia, Rostov-on-Don USAGE OF THE PRINCIPLES MATERIAL DESIGN FOR MODELING EFFECTIVE GRAPHIC USER INTERFACE OF THE INFORMATION
SYSTEM
The article is devoted to the use of materials in the construction material design of modern mobile applications. The main features of this approach to interface design. An example of the use of materials design to create a mobile social network for people with disabilities.
Keywords: Material Design, GUI, Android-application mobile development, modeling of the information system
Material Design (рус. Материальный дизайн) — дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года как дизайн новой операционной системы Android, получившей впоследствии название Lollipop. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно [1]. При этом Material Design зиждется на четырех основных принципах [2]:
1. Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
2. Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
3. Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда — такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
4. Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.
Одна из концепций, которая была взята на вооружение разработчиками Material Design - это так называемый «плоский дизайн» от Microsoft (Microsoft Flat Design [5]). Сама идея отказа от излишеств в пользу плоского цифрового пространства впервые появилась в продуктах Microsoft.
Разработчики iOS стали использовать следующие три принципа дизайна— Clarity, Deference и Depth (ясность, уважение к пользователю и глубина) [3]. Двум из них следует и Material Design. Ясность выражает «чистоту» дизайна. Иконки должны быть чёткими и узнаваемыми, текст — различимым, а контрасты настроены таким образом, чтобы пользователю было удобно ориентироваться в интерфейсе. При этом пользователи любой ОС сильно зависят от собственного опыта. Например, пользователь Android легко опознает знакомую ему иконку на платформе от Google, но чаще всего замешкается, если ему нужно будет сделать то же самое на iOS и наоборот. Второй общий принцип — глубина. В iOS реализуется размытием и
градиентами для передачи многоуровнего дизайна, а в Android — с применением теней, карточек и имитации бумаги.
Как отмечает Менг То [4], обе платформы в целом занимаются переносом предметов и моделей из реальной жизни на экран, с учетом того, что пользователи «переросли» излишне детализированные элементы интерфейса.Однако и принципы дизайна от Apple, и Material Design, считает разработчик, имеют свои слабости.В качестве примера недостатка подхода, используемого в iOS, То приводит несколько слоёв размытия, накладывающихся друг на друга — как ему кажется, это не слишком удачное решение. Концепция карточек, используемая Google, по мнению То, не всегда хорошо работает на круглых экранах.
Плоский дизайн представлял собой полный отказ от скеоморфизма в любых его проявлениях. Материальный же дизайн является смягченной версией этой концепции благодаря имитированию «цифровой бумаги» и «цифровых чернил». Материальный дизайн вобрал в себя лучшее из двух миров - плоские и минималистичные пространства от плоского дизайна и определенный анимированный объем от скеоморфизма.
При создании информационной системы для людей с ограниченными возможностями использовались принципы Material Design. Была определена палитра, формируемая путем выбора основного цвета в диапазоне 500 значений и заполнением тонами с фиксированным шагом диапазона. Определены основные три цвета и один дополнительный, используемый для расставления акцентов. Яркие акценты использовались для обозначения элементов управления (рис.1). Прозрачность элементов (текста, изображений, и пр.) сверху вниз меняется в сторону увеличения. Контент был сгруппирован и грамотно рассредоточен по всей площади экрана. Также были использованы классические принципы полиграфического дизайна в оформлении интерфейса информационной системы. Были использованы крупные заголовки и наборы более мелких элементов, которые отличаются своей насыщенностью (рис.2). При этом явно различима группировка.
V с ) у V __,
4----------v v. j у
Рис.1 - Цветовая палитра Рис. 2 - Полиграфия
Использование Material design, позволяет создавать унифицированные пользовательские пространства на всех платформах, устройствах, независимо от их размера и диагонали экрана. Единая концепция дизайна интерфейса и интеграция всех сервисов позволяет создавать полностью новый пользовательский интерфейс, который интуитивно понятен, приятен и легок в использовании.
Использованные источники:
1.Engadget [Электронный ресурс] // Google's new 'Material Design' UI coming to Android, Chrome OS and the web // Matt Brian. URL: https://www.engadget.com/2014/06/25/googles-new-design-language-is-called-material-design/ (дата обращения: 20.01.2017).
2.Material design [Электронный ресурс] // Introduction // URL: http://www.google.com/design/spec/material-design/introduction.html (дата обращения: 20.01.2017)
3.App design Vault [Электронный ресурс] // Depth, Deference, and Clarity:-Watchwords of the iOS 7 Human Interface Guidelines // URL: http://www.appdesignvault.com/depth-deference-and-clarity-watchwords-of-the-ios-7-human-interface-guidelines/ (дата обращения: 20.01.2017)
4. AndroidPub [Электронный ресурс] // Material Design is Different, Not Better // URL: https://android.jlelse.eu/material-design-is-different-not-better-87909af6ffe1#.kqhvcca9j (дата обращения: 20.01.2017)
5. Microsoft // Modern Flat Design // URL: http://news.microsoft.com/stories/design/mobile.html (дата обращения: 20.01.2017)
