Material design. Основы и цвет. (Перевод)

material design 1

Решил сделать перевод основных моментов Material Design.
Основная часть текста идет от сюда http://www.google.com/design/spec/material-design/introduction.html

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

Во вторых по сути можно сказать, что это и есть первая осознанная идеология дизайна от гугла (даже не дизайна, а ux в целом). Конечно можно считать, что с выходом android 4.0 она уже была, но мне кажется находилось тогда все в зачаточном положении, а сейчас же все системные приложения и виджеты того же гугла приходят в стройное и красивое единообразие и несут примерно одинаковый юзер эксприенс, чего на самом деле Apple достигла уже давно.

Material Design (MD) призван создать единый интерфейс на всех девайсах на которых работает андроид, а это, как мы знаем почти все. Телефоны, планшеты, телевизоры, автомобили, носимая электроника.


Это превью документ.

ВВЕДЕНИЕ.

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

ЦЕЛИ.

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

material design 2

ПРИНЦИПЫ.

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

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

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

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

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

ЦВЕТ.

material design 3

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

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

material design 4

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

material design 5

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

material design 6

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

material design 7

Цветовые акценты.

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

material design 8


comments powered by Disqus