Мешкова М.А. Диссертация Методология разработки системы тестирования (Методология разработки системы тестирования), страница 8

Рисунок 2 – Передача глубины с помощью теней в Material Design

3.9.2 Правило 2 «Начинать с ограничений»

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

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

3.9.3 Правило 3 «Использование белого пространства»

Использование белого пространства придает интерфейсу легкости, такой интерфейс выглядит более эстетично [36].

3.9.4 Основные положения Material Design

Таблица 8 – Четыре основных принципа Material Design

3.9.5 Тактильные поверхности

Основная идея Material Design заключается в простоте и в отсутствии перегруженного дизайна. В качестве основной поверхности для размещения информации используется так называемая «цифровая бумага», которая оформляется как простой контейнер с тенью (рисунок 3). Но у каждой поверхности существует свое положение в пространстве относительно оси , исходя из этого, каждая поверхность отбрасывает тень на нижнюю поверхность как в реальном мире. Это является достаточным для того, чтобы отличить объекты друг от друга и показать их взаимное расположение. В Material Design для контейнера не используются сложные визуальные эффекты [37].

Рисунок 3 – «Цифровая бумага»

Тени в Material Design используются не для придания объема, а для наглядного представления положения элемента в пространстве. Например, чем ближе поверхность к пользователю, тем большую тень она отбрасывает на задний план (рисунок 4).

Рисунок 4 – Положение элементов в пространстве

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

3.9.6 Полиграфический дизайн

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

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

Рисунок 5 – Группировка текстовых элементов

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

Для расположения элементов на экране в Material Design используются модульные сетки, которые задают отступы от краев экрана (рисунок 6). В Material Design основной контент расположен в правой части экрана, а левая часть экрана обычно является областью для расположения вспомогательных элементов.

Рисунок 6 – Использование модульной сетки

В Material Design обычно используются максимально простые плоские иконки (рисунок 7).

Рисунок 7 – Иконки в Material Design

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

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

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

3.9.7 Осмысленная анимация

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

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

3.9.8 Адаптивный дизайн

Material Design подразумевает единообразие дизайна приложения на различных устройствах.

Чаще всего используется принцип уменьшения количества информации на устройствах с небольшим экраном, при этом данная информация переносится в отдельные блоки или располагается в другом порядке. Многие графические дизайнеры при проектировании интерфейсов начинают построение структуры с маленьких экранов, а затем переходят на большие экраны. Такой подход используют потому, что удобнее сначала проработать структуру на небольшом пространстве, а затем расширить ее для большого пространства, чем наоборот     [38].

Таблица 9 – Основные положения Material Design

3.10 Психофизиология графических интерфейсов

Психофизиология – наука, которая изучает нейрофизические механизмы психических процессов, состояний и поведения [39].

Если рассматривать с точки зрения систем, то можно предположить, что человек является информационной системой, подобно компьютеру. У человека также существуют различные каналы для ввода и вывода информации, например, визуальный, аудиальный и тактильный. Но основным каналом для ввода информации у человека при работе с web-приложениями можно назвать визуальный канал, потому что, прежде всего интерфейс воспринимается зрительными рецепторами. Основываясь на данном заключении, были разработаны психофизиологические особенности интерфейсов [40].

3.10.1 Правило 7 2

Суть данного правила заключается в том, что для решения задачи человеку комфортнее всего воспринимать определенное количество объектов. Их число обычно варьируется от 5 до 9. Данную закономерность вывел Джордж Миллер – американский ученый-психолог в ходе проведения серии экспериментов и изложил результаты наблюдений в труде под названием The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information, (1956 год, журнал Psychological Review).

Считается, что если объектов становится больше 9, то человек старается избегать решения задачи, либо пытается решить ее более простым способом.

При проектировании графических web-интерфейсов данное правило чаще всего используется при определении количества пунктов в навигации.

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

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