29 Apr 12:54

Материальный дизайн - перевод официальной спецификации Google

Дизайн и юзабилити: Материальный дизайн - перевод официальной спецификации Google

Мы поставили перед собой задачу по созданию для своих пользователей визуального языка, который бы сочетал в себе классические принципы хорошего дизайна с инновациями и возможностями технологий и науки. Перед вами материальный дизайн. Данная спецификация всё еще находится в разработке и будет обновляться по мере развития правил и специфик материального дизайна.
Перевод официальной документации Google: http://www.google.com/design/spec/material-design/.

Цели

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

Дизайн и юзабилити: materialdesign_goals_language

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

Дизайн и юзабилити: materialdesign_goals_system

Принципы

Дизайн и юзабилити: materialdesign_principles_metaphor

Материал — это метафора

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

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

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

Дизайн и юзабилити: materialdesign_principles_bold

Четкий, наглядный, интуитивный

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

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

Дизайн и юзабилити: materialdesign_principles_motion

Движение открывает смысл

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

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

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

Трехмерный мир

Материальная среда является трехмерным пространством, а это значит, что все объекты располагаются в плоскостях x, y и z. Ось z расположена перпендикулярно плоскости отображения, и ее положительная шкала направлена на зрителя. Каждый лист материала занимает единицу пространства на оси z и имеет стандартную толщину 1dp.

Дизайн и юзабилити: whatismaterial_environment_3d

Свет и тень

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

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

Дизайн и юзабилити: whatismaterial_environment_shadow1

Тень, отбрасываемая от основного источника света

Дизайн и юзабилити: whatismaterial_environment_shadow2

Тень, отбрасываемая от общего источника света

Дизайн и юзабилити: whatismaterial_environment_shadow3

Комбинированная тень от основного и общего источника света

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

Физические свойства

Материал обладает изменяющимися размерами по осям x и y (измеряются в dps) и единой толщиной (1dp). Толщина материала не может быть равной 0.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesПравильно

Высота и ширина материала могут изменяться.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noНеправильно

Толщина материала всегда равна 1dp.

Материал — единое целое.

События ввода не могут пройти сквозь материал.

Дизайн и юзабилити: whatismaterial_properties_physical3Правильно

Дизайн и юзабилити: whatismaterial_properties_physical4Неправильно

Несколько элементов материала не могут одновременно занимать одну и ту же точку в пространстве.

Дизайн и юзабилити: whatismaterial_properties_physical5Правильно

Дизайн и юзабилити: whatismaterial_properties_physical6Неправильно

Материал не может проходить сквозь другой материал.

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

Дизайн и юзабилити: whatismaterial_properties_physical7Неправильно

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

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

Высота

Высота — это относительное положение объекта на оси z его родителя. Высота — это относительная величина между родительским и дочерним объектом.

Высота измеряется в тех же единицах, что и оси x и y: обычно в не зависящих от плотности пикселях (density independent pixels, dp). Поскольку стандартная толщина материала составляет 1 dp, все высоты рассчитываются, как разность расстояний от одной верхней плоскости до другой.

Дизайн и юзабилити: whatismaterial_3d_elevation1

Высота в состоянии покоя

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

Дизайн и юзабилити: whatismaterial_3d_elevation2

Примеры типовых высот компонентов в состоянии покоя.

В статичном положении высота объекта в состоянии покоя не изменяется. Она едина для всего приложения. Если высота объекта изменяется, он должен как можно быстрее вернуться на свою высоту в состоянии покоя.

Дизайн и юзабилити: whatismaterial_3d_elevation3

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

Дизайн и юзабилити: whatismaterial_3d_elevation4

Отзывчивая высота и динамические сдвиги по высоте

Компоненты некоторых видов имеют отзывчивую высоту, то есть их высота изменяется в ответ на ввод данных пользователем или на системные события. Различные состояния компонентов (например, нормальное, нажатое, в центре внимания) могут вызывать различные изменения высоты, которые реализуются согласованно с помощью динамических сдвигов по высоте.

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

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

Дизайн и юзабилити: whatismaterial_3d_elevation5

Функциональные тени

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

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow1

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

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow2

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

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow3

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

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

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow4

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

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow5
Тень увеличивается в размерах и становится мягче с увеличением высоты объекта. Она становится четче и меньше в размерах при уменьшении высоты.

Дизайн и юзабилити: whatismaterial_3d_elevation_shadow6

В данном случае постоянство тени позволяет пользователю понять, что объект изменяет свою форму, а не высоту.

Связи между объектами

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

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

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

Дизайн и юзабилити: whatismaterial_3d_relationship1

Приподнятая кнопка (дочерний элемент) уходит за пределы экрана при прокрутке содержимого ее родителя.

Дизайн и юзабилити: whatismaterial_3d_relationship2

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

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

Масса и вес

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

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

Особые случаи: Вход и выход из кадра

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

Внесение поправок

Не все объекты двигаются одинаково. Более легкие/маленькие объекты могут ускоряться/замедляться быстрее, потому что обладают меньшей массой и требуют для этого меньшего усилия. Более крупным/тяжелым объектам может понадобиться больше времени, чтобы достигнуть пиковой скорости и перейти в состояние покоя. Подумайте о том, как это отражается на разных элементах UI в вашем приложении, и решите, как следует представить их движение.

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

Ввод данных пользователем

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

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


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

Реакция поверхности

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

Основным визуальным механизмом для выражения этой связи является «Рябь от прикосновений». Этот прием четко определяет начало и продолжительность события касания, а также его динамические аспекты, такие как амплитуда голоса или проанализированная сила нажатия при касании.

Передовые методы

Ввод данных происходит в определенных точках: в точке касания пальца или у иконки микрофона (в случае голосового ввода). Начиная с этой точки, визуальную реакцию следует сделать радиальной.

Реакция материала

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

Точка появления

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

Подъем при касании

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

Радиальное воздействие

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

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


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

Визуальная целостность

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

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


Важные аспекты

Создавая анимации, учитывайте следующие моменты:

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

Иерархическая синхронизация по времени

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

Однако это не просто формула, по которой самая важная вещь начинает движение первой, а наименее важная — последней. Временная синхронизация элементов перехода должна происходит плавно и не допускать возникновения ощущения разрозненности.

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

Единая хореография

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

Хорошо скоординированное приложение предоставляет и возможности для обучения. Если перемещение элементов скоординировано, понимание приложения пользователем увеличивается. Он понимает приложение, он не чувствует себя дезориентированным анимацией.

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

Передовые методы

  • Избегайте прямолинейных пространственных маршрутов, за исключением случаев, когда движение ограничивается одной осью или направлено к конкретной точке/от конкретной точки и согласовано с другими элементами.
  • Проследите, чтобы направление, в котором двигаются элементы, было согласованным на протяжении всего перехода. Избегайте сталкивающихся движений и накладывающихся друг на друга маршрутов.
  • Помните о глубине: что проходит под чем и почему?
  • Если бы все движущиеся элементы оставили на экране след от своего маршрута, насколько красивым и организованным он бы получился? Создаёт ли он четкую картину, куда должно быть обращено внимание?
  • Поддерживайте пространственные отношения, согласовывая движение входящих и исходящих элементов.


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

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

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

Цветовая палитра

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

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные — в качестве акцентных цветов.

Скачать цветовые образцы

Использование цветов в UI

Выберите палитру

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

Дизайн и юзабилити: style_color_uiapplication_palette1Пример основной цветовой палитры

Дизайн и юзабилити: style_color_uiapplication_palette2Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

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

Дизайн и юзабилити: style_color_uiapplication_palette1Темный текст на светлом фоне

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noБелый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Темный текст (#000000)НепрозрачностьОсновной текст87%Вспомогательный текст54%Подсказки (текстовые поля, метки)26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF)НепрозрачностьОсновной текст100%Вспомогательный текст70%Подсказки (текстовые поля, метки)30%

Текст на цветном фоне

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

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesДизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_no

Акцентный цвет

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noВ плавающей кнопке действия используется акцентный цвет.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noПереключатель, использующий акцентный цвет.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesПравильно

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesНеправильно

Не используйте акцентный цвет в качестве цвета основного текста.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesПравильно

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noНеправильно

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

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesПравильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noНеправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

Темы

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

Скачать темы

Светлая тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noПалитра светлой темы

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noПрименение в UI

Темная тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noПалитра темной темы

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noПрименение в UI

Иконки приложений

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

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Подход к проектированию

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesФизический прототип

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noИзучение света

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesМатериальный прототип

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noИзучение цвета

Сетка иконки приложения

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesСетка

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noКонтуры

Формы контуров

Формы контуров лежат в основе сетки. Руководствуясь этими базовыми формами, вы можете сохранять единые визуальные пропорции во всех иконках взаимосвязанных приложений.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesКвадрат

Высота: 152dp
Ширина: 152dp

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noКруг

Диаметр: 176dp

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesВертикальный прямоугольник

Высота: 176dp
Ширина: 128dp

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noГоризонтальный прямоугольник

Высота:128dp
Ширина:176dp

Сетка с единицей измерения DP

На мобильных устройствах иконки запуска приложений имеют размер 48 dp, с толщиной боковой грани 1 dp. При создании иконки используйте систему координат со стороной 48 единиц, но масштабируйте ее до 400%, до размера 192 х 192 dp (толщина грани становится равна 4 dp).

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesСетка 1:1 ед..

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_02_noСетка 4:1 ед.

Геометрия

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

Дизайн и юзабилити: style_logos_product_grid_geometry1
Дизайн и юзабилити: style_logos_product_grid_geometry1
Дизайн и юзабилити: style_logos_product_grid_geometry3
Дизайн и юзабилити: style_logos_product_grid_geometry4

Анатомия иконки приложения

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

  1. Внешний слой
  2. Задний план материала
  3. Передний план материала
  4. Цвет
  5. Тень

Дизайн и юзабилити: style_logos_product_anatomy_componentsКомпоненты

Каждый компонент располагается над предыдущим, точка обзора располагается прямо над иконкой

Дизайн и юзабилити: style_logos_product_anatomy_components_perspectiveПерспектива конструкции

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

Дизайн и юзабилити: style_logos_product_anatomy_material_backgroundЗадний план материала

Самый глубоко расположенный элемент материала.

Дизайн и юзабилити: style_logos_product_anatomy_material_foregroundПередний план материала

Элемент материала, приподнятый над задним планом, и отбрасывающий на него тень.

Дизайн и юзабилити: style_logos_product_anatomy_color_spotЦветовое пятно

Цвет, использованный на небольшом участке элемента.

Дизайн и юзабилити: style_logos_product_anatomy_color_floodingЗаливка

Цвет, использованный на всём элементе, от края до края.

Дизайн и юзабилити: style_logos_product_anatomy_edges_tintedСветлая грань

Верхняя грань элемента материала. Светлый оттенок — это смесь цвета с белым светом, который осветляет оригинальный цвет.

Дизайн и юзабилити: style_logos_product_anatomy_edges_shadedЗатемненная грань

Нижняя грань элемента материала. Темный оттенок — это смесь цвета с более темным тоном, который затемняет оригинальный цвет.

Дизайн и юзабилити: style_logos_product_anatomy_shadowКонтактная тень

Мягкая тень вокруг всех граней приподнятого элемента материала.

Дизайн и юзабилити: style_logos_product_anatomy_finishВнешний слой

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

Метрики иконки приложения
Освещение

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

Дизайн и юзабилити: style_logos_product_lighting_lighting_topВерхний

Дизайн и юзабилити: style_logos_product_lighting_lighting_45Угол 45º

Тени

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

Дизайн и юзабилити: style_logos_product_lighting_shadowМетрики отбрасываемой тени

Режим: Обычный (Normal)
Непрозрачность: 20%
Отступ по оси X: 0px
Отступ по оси Y: 6px
Размытие: 6px
Цвет: См. значения светлого, темного оттенков и тени

Светлая и затемненная грани

Верхняя и нижняя грани элементов материала создают ощущение глубины и нахождения на поверхности. Элементы материала имеют стандартную толщину 1 dp. Все расстояния до края рассчитываются от внутренней грани элемента.
Светлый оттенок подсвечивает верхнюю грань всех элементов. Он не используется на левой, правой и нижней гранях.
Темный оттенок оттеняет нижнюю грань всех элементов. Он не используется на левой, правой и верхней гранях.

Дизайн и юзабилити: style_logos_product_anatomy_edges_tintedСветлая грань

Высота: 1dp
Непрозрачность: 20%
Цвет: Белый (#FFFFFF)

Дизайн и юзабилити: style_logos_product_anatomy_edges_shadedЗатемненная грань

Высота: 1dp
Непрозрачность: 20%
Цвет: См. значения светлого, темного оттенков и тени

Внешний слой

Внешний слой возникает в результате освещения виртуальным источником света, расположенным под углом 45º. Он простирается от левого верхнего угла до внешнего края силуэта иконки. Внешний слой всегда располагается в этих границах.

Дизайн и юзабилити: style_logos_product_lighting_finishМетрики градиента

Тип: Радиальный (Radial)
Угол: 45º

Цвет: Белый (#FFFFFF)
Местоположение средней точки: 33%

Слайдер 1

Непрозрачность: 10%
Местоположение: 0%

Слайдер 2
Непрозрачность: 0%
Местоположение: 100%

Значения светлого, темного оттенков и тени

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

Дизайн и юзабилити: style_logos_product_lighting_values_cool
Дизайн и юзабилити: style_logos_product_lighting_values_fresh
Дизайн и юзабилити: style_logos_product_lighting_values_warm
Дизайн и юзабилити: style_logos_product_lighting_values_hot
Дизайн и юзабилити: style_logos_product_lighting_values_neutral

Структура иконок приложений

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

Цвет

Цветные элементы располагаются на одном уровне с поверхностью бумаги.

Не следует украшать цветные элементы гранями или тенями.

Дизайн и юзабилити: style_logos_product_patterns_color_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_color_dontНеправильно

Слой

Элементы бумаги, расположенные слоями, создают глубину, благодаря граням и теням.

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

Дизайн и юзабилити: style_logos_product_patterns_layer_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_layer_dontНеправильно

Подъем

Подъем главного элемента материала над незатейливым силуэтом заднего плана заставляет сосредоточить внимание на центре.

Не обрезайте приподнятые элементы материала другой формой.

Дизайн и юзабилити: style_logos_product_patterns_elevate_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_elevate_dontНеправильно

Сгиб

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

Не используйте несколько сгибов одновременно, и не размещайте сгиб вне центра.

Дизайн и юзабилити: style_logos_product_patterns_score_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_score_dontНеправильно

Складывание

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

Дизайн и юзабилити: style_logos_product_patterns_fold_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_fold_dontНеправильно

Наложение

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

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

Дизайн и юзабилити: style_logos_product_patterns_overlap_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_overlap_dontНеправильно

Гармошка

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

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

Дизайн и юзабилити: style_logos_product_patterns_accordian_doПравильно

Дизайн и юзабилити: style_logos_product_patterns_accordian_dontНеправильно

Искривление

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

Дизайн и юзабилити: style_logos_product_patterns_distort_doНеправильно

Дизайн и юзабилити: style_logos_product_patterns_distort_dontНеправильно

Иконки с изображениями людей

Представленные ниже рекомендации и примеры демонстрируют передовые методы использования иконок с изображениями людей в вашем UI.

Форма

Дизайн и юзабилити: style_icons_product_human_form1Построение

Дизайн и юзабилити: style_icons_product_human_form2Расположение контуров

Формы контуров

Дизайн и юзабилити: style_icons_product_human_keyline1Квадрат

Дизайн и юзабилити: style_icons_product_human_keyline2Круг

Дизайн и юзабилити: style_icons_product_human_keyline3Вертикальный прямоугольник

Дизайн и юзабилити: style_icons_product_human_keyline4Горизонтальный прямоугольник

Бумага и цвет

Дизайн и юзабилити: style_icons_product_human_dimension1Бумага

Дизайн и юзабилити: style_icons_product_human_dimension2Цвет

Жесты

Дизайн и юзабилити: style_icons_product_human_gestures1Построение

Дизайн и юзабилити: style_icons_product_human_gestures2Композиция

Правила использования иконок с изображениями людей

Дизайн и юзабилити: style_icons_product_human_best_do1Правильно

Используйте простые формы для силуэтов заднего плана.

Дизайн и юзабилити: style_icons_product_human_best_dont1Неправильно

Не используйте сложные формы для силуэтов заднего плана.

Дизайн и юзабилити: style_icons_product_human_best_do2Правильно

Всегда используйте корректные и последовательные человеческие формы.

Дизайн и юзабилити: style_icons_product_human_best_dont2Неправильно

Не используйте некорректные человеческие формы и не добавляйте им сложные детали.

Дизайн и юзабилити: style_icons_product_human_best_do3Правильно

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

Дизайн и юзабилити: style_icons_product_human_best_dont3Неправильно

Не изображайте концы рук округлыми или обрезанными.

Системные иконки

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

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

Дизайн и юзабилити: style_icons_system_intro

Принципы дизайна

Формы выразительны и геометричны.

Симметрия и последовательность форм наделяет иконки уникальными качествами, при этом оставляя их простыми и выразительными.

Дизайн и юзабилити: style_icons_system_intro_principles_simpleПростая

Дизайн и юзабилити: style_icons_system_intro_principles_intuitiveПонятная

Дизайн и юзабилити: style_icons_system_intro_principles_actionableПоследовательная

Дизайн и юзабилити: style_icons_system_intro_principles_consistentПризывающая к действию

Сетка, пропорции и размер

Сетка с единицей измерения DP

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

Дизайн и юзабилити: style_icons_system_grid_unitgrid_100Масштаб 100%

Дизайн и юзабилити: style_icons_system_grid_icongrid_800Масштаб 800%

Сетка иконки

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

Дизайн и юзабилити: style_icons_system_grid_icongrid_gridСетка

Дизайн и юзабилити: style_icons_system_grid_icongrid_keylinesКонтуры

Зона контента

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

Дизайн и юзабилити: style_icons_system_grid_area_liveЖивая зона

Дизайн и юзабилити: style_icons_system_grid_area_trimЗона обрезки

Формы контуров

Формы контуров являются основой сетки. Руководствуясь этими основными формами, вы сможете поддерживать единые визуальные пропорции во всех системных иконках.

Дизайн и юзабилити: style_icons_system_grid_shapes_squareКвадрат

Высота: 18dp
Ширина: 18dp

Дизайн и юзабилити: style_icons_system_grid_shapes_circleКруг

Диаметр: 20dp

Дизайн и юзабилити: style_icons_system_grid_shapes_vert_rectangleВертикальный прямоугольник

Высота: 20dp
Ширина: 16dp

Дизайн и юзабилити: style_icons_system_grid_shapes_hori_rectangle

Высота: 16dp
Ширина: 20dp

Геометрия

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

Дизайн и юзабилити: style_logos_product_grid_geometry1Построение

Дизайн и юзабилити: style_logos_product_grid_geometry1Композиция

Анатомия системной иконки
  1. Конец штриха
  2. Угол
  3. Контр-участок
  4. Штрих
  5. Контр-штрих
  6. Окаймляющий участок

Дизайн и юзабилити: style_icons_system_anatomy

Углы

Единые радиусы закругления углов — это ключ к унификации всего семейства системных иконок. В форме силуэта иконки использован радиус закругления величиной 2dp. Не закругляйте углы штрихов (форм шириной 2dp и менее).

Внутренние углы должны быть прямоугольными. Не закругляйте углы у внутренних форм.

Дизайн и юзабилити: style_icons_system_anatomy_corner_exteriorВнешние углы

Дизайн и юзабилити: style_icons_system_anatomy_corner_interiorВнутренние углы

Штрихи

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

Дизайн и юзабилити: style_icons_system_anatomy_strokes_consistencyЕдинообразие

Дизайн и юзабилити: style_icons_system_anatomy_strokes_curvesКривые и углы

Дизайн и юзабилити: style_icons_system_anatomy_strokes_terminalКонец штриха

Дизайн и юзабилити: style_icons_system_anatomy_strokes_counterКонтр-штрих

Оптические корректировки

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

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

Дизайн и юзабилити: style_icons_system_anatomy_optical_complexСложная

Дизайн и юзабилити: style_icons_system_anatomy_optical_smallМелкий масштаб

Свободное пространство

Для придания иконки разборчивости и доступности для нажатия вокруг нее следует обеспечить достаточное количество свободного пространства.

Дизайн и юзабилити: style_icons_system_anatomy_clearance_areaУчасток свободного пространства

Дизайн и юзабилити: style_icons_system_anatomy_clearance_placementРазмещение

Передовые методы

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

Дизайн и юзабилити: style_icons_system_best_do1Правильно

Используйте штрихи с одинаковым весом и с прямоугольными концами.

Дизайн и юзабилити: style_icons_system_best_dont1Неправильно

Не используйте штрихи с различным весом или со скругленными концами.

Дизайн и юзабилити: style_icons_system_best_do2Правильно

Иконки должны быть направлены прямо и выглядеть надежно.

Дизайн и юзабилити: style_icons_system_best_dont2Неправильно

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

Дизайн и юзабилити: style_icons_system_best_do3Правильно

Упрощайте иконки для большей понятности и удобочитаемости.

Дизайн и юзабилити: style_icons_system_best_dont3Неправильно

Не будьте излишне буквальны и избегайте сложных иконок.

Дизайн и юзабилити: style_icons_system_best_do4Правильно

Иконки должны быть четкими и выразительными.

Дизайн и юзабилити: style_icons_system_best_dont4Неправильно

Не используйте нежные, тонкие штрихи.

Дизайн и юзабилити: style_icons_system_best_dont5Правильно

Используйте геометрические и согласованные формы.

Дизайн и юзабилити: style_icons_system_best_dont5Неправильно

Не используйте жестикуляционные или нестрогие органические формы.

Дизайн и юзабилити: style_icons_system_best_do6Правильно

Располагайте иконки «на пикселях», то есть, их координаты по осям X и Y должны быть целыми числами, не содержащими дробной части.

Во избежание искажения иконок они должны иметь одинаковую высоту и ширину (например, 24×24).

Дизайн и юзабилити: style_icons_system_best_dont6Неправильно

Не помещайте иконки в координатах, не являющихся целым числом.

Не искажайте иконку, задав ей различные значения высоты и ширины.

Иконки с изображениями людей
Анатомия иконки с изображением человека
  1. Голова
  2. Шея
  3. Верхняя часть тела
  4. Рука
  5. Нога

Дизайн и юзабилити: style_icons_system_human_anatomy1Тело целиком

Дизайн и юзабилити: style_icons_system_human_anatomy1Верхняя часть тела

Форма

Дизайн и юзабилити: style_icons_system_human_form1Пример тела целиком

Дизайн и юзабилити: style_icons_system_human_form2Пример верхней части тела

Дизайн и юзабилити: style_icons_system_human_form3Пример использования обрезки

Дизайн и юзабилити: style_icons_system_human_form4Пример подробного изображения части тела

Тело целиком

Дизайн и юзабилити: style_icons_system_human_fullbody1Примеры тела целиком

Дизайн и юзабилити: style_icons_system_human_fullbody2

Дизайн и юзабилити: style_icons_system_human_fullbody3
Визуальное выравнивание

Верхняя часть тела

Дизайн и юзабилити: style_icons_system_human_upperbody1Примеры верхней части тела

Дизайн и юзабилити: style_icons_system_human_upperbody2

Дизайн и юзабилити: style_icons_system_human_upperbody3Визуальное выравнивание

Размещение внутри другой формы

Дизайн и юзабилити: style_icons_system_human_contained1Примеры использования обрезки

Дизайн и юзабилити: style_icons_system_human_contained2

Подробное изображение частей тела

Дизайн и юзабилити: style_icons_system_human_detailedparts1Примеры подробного изображения частей тела

Дизайн и юзабилити: style_icons_system_human_detailedparts2

Правила использования иконок с изображениями людей

Дизайн и юзабилити: style_icons_system_human_best_do1Правильно

Для рук и ног используйте штрихи одинаковой толщины с прямоугольными концами.

Дизайн и юзабилити: style_icons_system_human_best_dont1Неправильно

Не используйте штрихи различной толщины и закругленные концы для рук и ног.

Дизайн и юзабилити: style_icons_system_human_best_do2Правильно

Выравнивайте элементы для упрощения силуэта.

Дизайн и юзабилити: style_icons_system_human_best_dont2Неправильно

Не обрезайте части рук или ног.

Дизайн и юзабилити: style_icons_system_human_best_do3Правильно

Если элементы расположены внутри другой формы, помещайте их туда полностью.

Дизайн и юзабилити: style_icons_system_human_best_dont3Неправильно

Не нарушайте границы контейнера элементами.

Дизайн и юзабилити: style_icons_system_human_best_do4'Правильно

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

Дизайн и юзабилити: style_icons_system_human_best_dont4Неправильно

Не добавляйте элементы с изображениями людей, если они усложняют иконку.

Дизайн и юзабилити: style_icons_system_human_best_do5Правильно

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

Дизайн и юзабилити: style_icons_system_human_best_dont5Неправильно

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

Цвет

Стандартная непрозрачность активной иконки на светлом фоне — 54% (#000000). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 26% (#000000).

Стандартная непрозрачность активной иконки на темном фоне — 100% (#FFFFFF). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 30% (#FFFFFF).

Дизайн и юзабилити: style_icons_system_color1
Дизайн и юзабилити: style_icons_system_color2

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

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

Содержание

  • Принципы
  • Передовые методы
  • Интеграция в UI

Принципы

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

Дизайн и юзабилити: style_imagery_principles1Личное соответствие

Изображения могут отражать контекст и мир, в котором живет пользователь

Дизайн и юзабилити: style_imagery_principles2Информация

Изображения могут передавать особую информацию, которая упрощает и ускоряет восприятие.

Дизайн и юзабилити: style_imagery_principles3Удовольствие

Эстетичное изображение контекста сделает ваш продукт уникальным и доставит удовольствие пользователю.

Уделяйте внимание контексту

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

Дизайн и юзабилити: style_imagery_principles4

Используйте изображения, имеющие отношение к контексту.

Создавайте эффект погружения

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

Дизайн и юзабилити: style_imagery_principles5

Вводя пользователя в контакт с контентом на переднем плане, можно заслонить изображение на заднем плане.

Передовые методы

Используйте различные средства выражения

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

Дизайн и юзабилити: style_imagery_bestpractices_mediums1Правильно

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

Дизайн и юзабилити: style_imagery_bestpractices_mediums2Правильно

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

Держитесь подальше от фотостоков

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

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

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yesПравильно

Старайтесь использовать изображения, рассказывающие оригинальные истории.

Дизайн и юзабилити: style_imagery_bestpractices_stock2Неправильно

Стоковые изображения могут казаться наигранными.

Дизайн и юзабилити: style_imagery_bestpractices_stock3Правильно

Для представления конкретных вещей используйте конкретные изображения.

Дизайн и юзабилити: style_imagery_bestpractices_stock4Неправильно

Не стоит при первой возможности использовать лишенные оригинальности стоковые фотографии.

Создайте центр внимания

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

Дизайн и юзабилити: style_imagery_bestpractices_focus1Правильно

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

Дизайн и юзабилити: style_imagery_bestpractices_focus2Неправильно

Не заставляйте пользователя выискивать смысл в изображении.

Дизайн и юзабилити: style_imagery_bestpractices_focus3Правильно

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

Дизайн и юзабилити: style_imagery_bestpractices_focus4Неправильно

Если центр внимания завуалирован, изобразительные качества картинки теряются.

Дизайн и юзабилити: style_imagery_bestpractices_focus5Правильно

Ярко выраженный центр внимания передает идею с первого взгляда.

Дизайн и юзабилити: style_imagery_bestpractices_focus6Неправильно

Отсутствие центра внимания делает изображение бессмысленным.

Создавайте повествования

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

Дизайн и юзабилити: style_imagery_bestpractices_narrative1Правильно

Изображение, рассказывающее историю, несравненно интереснее и информативнее.

Дизайн и юзабилити: style_imagery_bestpractices_narrative2Неправильно

Изображение без истории теряет возможность передать настроение, стиль бренда и идею.

Дизайн и юзабилити: style_imagery_bestpractices_narrative3Правильно

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

Дизайн и юзабилити: style_imagery_bestpractices_narrative4Неправильно

Представление объекта, не связанное с контекстом, не вызывает интереса.

Интеграция в UI
Разрешение

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

Дизайн и юзабилити: style_imagery_integration_resolution1Правильно

Используйте изображения соответствующего размера.

Дизайн и юзабилити: style_imagery_integration_resolution2Неправильно

Изображения низкого качества.

Используйте градацию

Используйте альтернативную градацию для создания уровней различной визуальной ценности.

Дизайн и юзабилити: style_imagery_integration_scale1В галерее используйте миниатюры различных размеров для передачи иерархии контента

Дизайн и юзабилити: style_imagery_integration_scale2Поддерживайте использование нескольких контейнеров в одной экосистеме.

Защита текста

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

Дизайн и юзабилити: style_imagery_integration_text1Правильно

Темный фон в идеале должен иметь непрозрачность на уровне 20%-40%, в зависимости от контента. Светлый фон в идеале должен иметь непрозрачность на уровне 40%-60%, в зависимости от контента.

Дизайн и юзабилити: style_imagery_integration_text2Неправильно

Используя фон, не затемняйте изображение.

Дизайн и юзабилити: style_imagery_integration_text3Правильно

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

Дизайн и юзабилити: style_imagery_integration_text4Неправильно

Не используйте слишком много фона на больших изображениях.

Дизайн и юзабилити: style_imagery_integration_text5Правильно

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

Дизайн и юзабилити: style_imagery_integration_text6Правильно

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

Аватары и миниатюры

Аватары и миниатюры представляют объекты или контент, изображая его буквально (с помощью фотографий) или концептуально (с помощью иллюстраций). Как правило, нажатие на них ведет к открытию основной области просмотра объекта или контента.

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

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

Дизайн и юзабилити: style_imagery_integration_thumbs1Благодаря аватарам приложение кажется более личным — и они занимают минимальное количество места.

Дизайн и юзабилити: style_imagery_integration_thumbs2Брендированный аватар сообщает информацию с первого взгляда.

Определяющие изображения

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

Дизайн и юзабилити: style_imagery_integration_hero1Особое изображение

Особое изображение — это выразительный первичный центр внимания в неоднородном макете.

Дизайн и юзабилити: style_imagery_integration_hero2Встроенное определяющее изображение

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

Галереи

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

Дизайн и юзабилити: style_imagery_integration_gallery1Сетка фотографий

Дизайн и юзабилити: style_imagery_integration_gallery2Изображение в галерее

После релиза Android Ice Cream Sandwich, стандартным шрифтом, используемым в Android, стал Roboto. После релиза Froyo штрифт Noto стал стандартным шрифтом, используемым в Android для всех языков, не поддерживаемых шрифтом Roboto. Кроме того, Noto — это стандартный шрифт для всех языков в Chrome OS.

Классификация языков

Системы письма можно разделить на 3 категории:

Английская и подобные ей: Латиница (кроме вьетнамского), греческий и кириллица, которые поддерживаются и Roboto, и Noto. Roboto был расширен и теперь полностью охватывает все символы латинского, греческого и кириллического шрифтов, определенных в стандарте Unicode 7.0. Количество поддерживаемых символов удвоилось, по сравнению с предыдущими релизами, с приблизительно 2000 до примерно 4000 символов.

Высокие: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, они включают в себя Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди, телугу, тайский и вьетнамский. Noto поддерживает два значения насыщенности шрифтов этих языков.

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

См. полный список в таблице категорий языков.

Гарнитура шрифта

Roboto

Шрифт Roboto был значительно доработан, чтобы быть пригодным к использованию на еще большем количестве платформ. Он стал немного шире и округлее, что придало ему большую четкость и более оптимистичный внешний вид.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Примеры использования Roboto

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Буквы A-Z и цифры шрифта Roboto

Насыщенность шрифта Roboto

Шрифт Roboto имеет шесть значений насыщенности: Тонкий (Thin), Ненасыщенный (Light), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black).

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифта Roboto

Noto

Вертикальные метрики Noto совместимы с Roboto.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Примеры использования Noto Sans с английским алфавитом и CJK-алфавитами (китайский, японский и корейский)

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Примеры использования Noto Sans с тайским и хинди (деванагари)

Насыщенность шрифта Noto

CJK-алфавиты (китайский, японский и корейский) Noto Sans имеют семь значений насыщенности: Тонкий (Thin), Светлый (Light), Полусветлый (DemiLight), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black). Насыщенность Noto Sans CJK Regular и Roboto Regular одинакова.

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифтов CJK-алфавитов Noto Sans

Шрифты Noto для тайского, деванагари и всех других широко используемых живых языков имеют насыщенность Обычный (Regular) и Насыщенный (Bold).

Дизайн и юзабилити: whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифтов тайского и хинди (деванагари) алфавитов Noto Sans

Шрифты с хинтовкой

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

И Roboto, и Noto имеют версии с хинтовкой и без нее. Google рекомендует:

  • Используйте версии без хинтовки в Android и Mac OS X, поскольку хинтовка в них не используется.
  • Используйте шрифты с хинтовкой в Chrome OS, Windows и Linux.
Стек шрифтов

В свойствах элементов, используемых в Android и в вебе, стек шрифтов должен включать в себя Roboto, Noto, и затем sans-serif.

Стили

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

Эти размеры и стили были разработаны, чтобы сбалансировать плотность размещения контента и удобство чтения в среднестатистических условиях использования. Размеры шрифтов указаны в единицах измерения sp (масштабируемые пиксели), позволяя использовать режимы с крупными шрифтами для упрощения восприятия.

Английская и подобные ей системы письма

Латиница, греческий и кириллица.

Базовый набор стилей основан на типографической шкале 12, 14, 16, 20 и 34.

Дизайн и юзабилити: style_typography_styles_scale

Дизайн и юзабилити: style_typography_styles_01_display1.png

Примеры использования стиля Акцидентный (Display), английский язык

Дизайн и юзабилити: style_typography_styles_02_display2.pngs

Дизайн и юзабилити: style_typography_styles_03_headline1.png

Примеры использования стиля Заголовок (Headline), английский язык

Дизайн и юзабилити: style_typography_styles_04_headline2

При использовании в форм-факторах текст, используемый на панели приложения, должен использовать стиль Титульнй (Title), Medium 20sp.

Дизайн и юзабилити: style_typography_styles_05_title1.png

Примеры использования стиля Титульный (Title), английский язык

Дизайн и юзабилити: style_typography_styles_06_title2.png

В особых сценариях используйте более крупный стиль Subhead, вместе меньшего стиля Основной (Body). Некоторые из этих сценариев включают в себя случаи, когда информация представляется небольшими фрагментами, либо когда заголовки стоят рядом с текстом, использующим стиль Основной (Body).

Дизайн и юзабилити: style_typography_styles_07_subhead1.png

Примеры использования стиля Подзаголовок (Subhead), английский язык

Дизайн и юзабилити: style_typography_styles_08_subhead2.png

Дизайн и юзабилити: style_typography_styles_09_body1.png

Примеры использования стиля Основной (Body), английский язык

Дизайн и юзабилити: style_typography_styles_10_body2.png

Дизайн и юзабилити: style_typography_styles_11_body3.png

Примеры использования стиля Основной (Body), английский язык

Дизайн и юзабилити: style_typography_styles_12_body4.png

Стиль Кнопка (Button) (Medium 14sp, все буквы заглавные) используется во всех кнопках. В тех языках, где используются заглавные буквы, текст кнопок должен быть написан заглавными. В языках, не использующих заглавные буквы, рассмотрите возможность использования цветного текста на плоских кнопках, чтобы отделить их от обычного текста.

Дизайн и юзабилити: style_typography_styles_13_button1.png

Примеры использования стиля Кнопка (Button), английский язык

Дизайн и юзабилити: style_typography_styles_14_button2.png

Плотные системы письма

Китайский, японский и корейский.

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

Размер шрифта: В стилях от Титульного (Title) до Подписи (Caption) размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Титульного (Title) можно использовать размер шрифта, используемый для английского языка.

Дизайн и юзабилити: style_typography_style3.png

Стили плотных систем письма

Дизайн и юзабилити: style_typography_style4.png

Пример, плотная система письма

Дизайн и юзабилити: style_typography_example_japanese1.png

Пример стиля Подзаголовок (Subhead), японский

Дизайн и юзабилити: style_typography_example_japanese2.png

Пример стиля Основной (Body), японский

Дизайн и юзабилити: style_typography_example_japanese3.png

Пример стиля Основной (Body 1), японский

Дизайн и юзабилити: style_typography_example_chinese1.png

Пример стиля Подзаголовок (Subhead), традиционный китайский

Дизайн и юзабилити: style_typography_example_chinese2.png

Пример стиля Основной (Body), традиционный китайский

Дизайн и юзабилити: style_typography_example_chinese3.png

Пример стиля Основной1 (Body1), традиционный китайский

Высокие системы письма

Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди и тайский.

Насыщенность: Используйте значение насыщенности Regular, поскольку значение Medium в Noto отсутствует. Google рекомендует избегать использования насыщенности Bold, поскольку по отзывам носителей языка шрифт выглядит слишком тяжелым.

Размер шрифта: В стилях от Title до Caption размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Title можно использовать размер шрифта, указанный для английского языка.

Дизайн и юзабилити: style_typography_style1.png

Стили высоких систем письма

Дизайн и юзабилити: style_typography_style2.png

Пример, высокая система письма

Дизайн и юзабилити: style_typography_example_hindi1.png

Пример стиля Подзаголовок (Subhead), хинди

Дизайн и юзабилити: style_typography_example_hindi2.png

Пример стиля Основной (Body), хинди

Дизайн и юзабилити: style_typography_example_hindi3.png

Пример стиля Основной1 (Body1), хинди

Дизайн и юзабилити: style_typography_example_thai1.png

Пример стиля Подзаголовок (Subhead), тайский

Дизайн и юзабилити: style_typography_example_thai2.png

Пример стиля Основной (Body), тайский

Дизайн и юзабилити: style_typography_example_thai3.png

Пример стиля Основной1 (Body1), тайский

Высота строки

Для достижения надлежащей читабельности и нужного тема высота строк была рассчитана исходя из индивидуального размера и насыщенности каждого из стилей. Перенос строк используется только в стилях Основной (Body), Подзаголовок (Subhead), Заголовок (Headline), и в более мелком Акцидентном (Display). Все остальные стили должны существовать только в виде одиночных строк.

Английская и подобные ей системы письма

Дизайн и юзабилити: style_typography_styles_lineheight1.png

Типографика и высота строки в английском и подобная английскому

Дизайн и юзабилити: style_typography_styles_lineheight2.png

Примеры использования в паре

Дизайн и юзабилити: style_typography_styles_lineheight3.png

Примеры отдельного использования — Высота строки увеличена

Плотные и высокие системы письма

У всех стилей высота строки будет на 0.1em больше, чем у подобных английских языков. Английский и подобный английскому языки в основном используют лишь часть печатной строки, чаще всего — ее нижнюю часть, расположенную ниже уровня высоты символов нижнего регистра. Китайские, японские и корейские (CJK) идеографические символы используют всю высоту печатной строки. Символы в высоких шрифтах часто имеют длинные нижние и/или верхние выносные элементы. Для того, чтобы в шрифтах CJK донести те же дизайнерские идеи, что и в английском, и чтобы избежать потенциального обрезания текста двумя расположенными по соседству строками в высоких шрифтах, в высоких и в плотных системах письма высота строки должна быть больше, чем в английском.

Дизайн и юзабилити: style_typography_lineheight_tall1.png

Высота строки в высоких и плотных системах письма

Дизайн и юзабилити: style_typography_lineheight_tall2.png

Пример использования различной высоты строк в паре, тайский и хинди

Дизайн и юзабилити: style_typography_lineheight_dense2.png

Пример использования различной высоты строк в паре, китайский и японский

Прочие типографические нормы

Цвета и контраст

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

Для сохранения читабельности текст должен сохранять соотношение контраста не ниже 4.5:1 (рассчитывается исходя из уровня яркости). Предпочтительным является соотношение 7:1.

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

Дизайн и юзабилити: style_typography_styles_contrast.png

Дизайн и юзабилити: style_typography_styles_15_contrast1.png

Контраст при размещении на светлом фоне

Дизайн и юзабилити: style_typography_styles_16_contrast2.png

Контраст при размещении на темном фоне

Дизайн и юзабилити: style_typography_styles_17_contrast3.png

Контраст при размещении над изображением

Дизайн и юзабилити: style_typography_styles_18_contrast4.png

Контраст при размещении над иллюстрацией

Крупный и динамический шрифт

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

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

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

Дизайн и юзабилити: style_typography_styles_19_dynamic1.png

Динамический шрифт

Дизайн и юзабилити: style_typography_styles_20_dynamic2.png

Дизайн и юзабилити: style_typography_styles_21_dynamic3.png

Применение в UI

Дизайн и юзабилити: style_typography_styles_22_dynamic4.png

Перенос строк

На изображениях показаны передовые методы переноса строк.

Дизайн и юзабилити: style_typography_styles_linebreaks1.pngПравильно

Дизайн и юзабилити: style_typography_styles_linebreaks2.pngНеправильно

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

Разрядка и кернинг

Дизайн и юзабилити: style_typography_styles_tracking.png

Длина строки

Примите во внимание следующий совет по достижению лучшей читабельности и длины строк от Baymard Institute:

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

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

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

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

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

Как работает бумага

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

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

Стыки

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

Дизайн и юзабилити: layout_principles_papercraft_paper1.png

Стыки двух листов материала

Ступени

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

Дизайн и юзабилити: layout_principles_papercraft_paper2.png

Ступени при наложении двух листов материала

Плавающая кнопка действия

Плавающая кнопка действия — это круглый лист, расположенный отдельно от панели инструментов. Она представляет собой отдельное продвигаемое действие.

Она может нависать над ступенью, если контент, к которому она относится, уже сам создает ступень.

Дизайн и юзабилити: layout_principles_papercraft_actions1.png

Плавающая кнопка действия, нависающая над ступенью

Плавающая кнопка может нависать над стыком, если она относится к контенту обоих листов.

Не создавайте декоративных стыков с целью определения точки крепления для действия.

Дизайн и юзабилити: layout_principles_papercraft_actions2.png

Плавающая кнопка действия, нависающая над стыком

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

Плотность пикселей

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

Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.

dpi = ширина (или высота) экрана в пикселях / ширина (или высота) экрана в дюймах

Дизайн и юзабилити: layout_units_density1.png

Экран с высокой плотностью

Дизайн и юзабилити: layout_units_density2.png

Экран с низкой плотностью

Не зависящие от плотности пиксели (dp)

«Независимость от плотности» означает одинаковое отображение элементов UI на экранах с различной плотностью.

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

Дизайн и юзабилити: layout_units_dp.png

Разрешение экранаШирина экрана в пикселях
(dpi * ширина в дюймах)
Ширина экрана
в не зависящих от плотности пикселях
120 dpi180 px240 dp160 dpi240 px240 dpi360 px

Если у вас 3 экрана, каждый шириной 1,5 дюйма, но при этом все они имеют различные разрешения, ширина каждого экрана все равно составит 240dp.

dp равен одному физическому пикселю на 160 dpi экране. Для расчета dp:

dp = (ширина в пикселях * 160) / dpi

В процессе написания CSS используйте px в местах, где указано dp или sp. Dp следует использовать только при разработке под Android.

Масштабируемые пиксели (sp)

При разработке под Android масштабируемые пиксели (sp) служат той же цели, что и dp, но используются в шрифтах. По умолчанию значение sp совпадает с используемым по умолчанию значением dp.

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

Проектирование макетов с использованием dp

При проектировании макетов под экран рассчитывайте размеры элемента в dp:

dp = (ширина в пикселях * 160) / dpi

Например, иконка размеров 32 x 32 px при 320 dpi будет иметь размеры 16 x 16 dp.

Масштабирование изображений

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

РазрешениеdpiПиксельный коэффициентРазмер изображения (в пикселях)xxxhdpi6404.0400 x 400xxhdpi4803.0300 x 300xhdpi3202.0200 x 200hdpi2401.5150 x 150mdpi1601.0100 x 100
Понравилась публикация? Поделись с друзьями:

0 комментариев

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