CSS-live.ru

Материальный дизайн — Иконки

Перевод раздела Icons официальной документации Google: http://www.google.com/design/spec/material-design/.

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

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

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

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

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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