Иконографика
Иконографика
Принципы построения
Особенности формы
Пиктограммы плотные и геометричные. Главная визуальная отличительная особенность — соотношение математически верных круглых форм и жестких геометричных углов.
Настроение
Минималистичность выразительных средств позволяет пиктограммам быть легко считываемыми и сохранять баланс между нейтральностью и запоминаемостью.
Линейность
Все пиктограммы внутри одного набора выполнены одной толщиной линии: для набора 16px толщина линии равна 1px, для наборов 24 и 32px толщина линии равна 2px.
Внутри одного набора пиктограмм использование разных по толщине линий недопустимо.
Внутри одного набора пиктограмм использование разных по толщине линий недопустимо.
Попадание в пиксельную сетку
При отрисовке пиктограмм необходимо включить отображение пиксельной сетки, и рисовать графику ровно по ней в режиме Stroke.
Замкнутость
Формы пиктограмм замкнуты, разрыв контура допускается в исключительных случаях, для облегчения общей оптической плотности графики.
Сетка и композиция
Базовые зоны объектов и пиксельная сетка
Правила приведены для минимальной иконки 16px
Правила приведены для минимальной иконки 16px
Объекты следует располагать по центру сетки в рамках своей базовой зоны. Три основные базовые зоны:
- — Вертикальный прямоугольник
- — Горизонтальный прямоугольник
- — Круг
Основная сетка для пиктограмм из набора 16px размером 20×20px имеет охранное поле в 2px по периметру.
Дополнительная рамка в 1px внутри основного поля обозначает толщину линий касания края у пиктограммы.
Композиционное равновесие
Наведи на картинку и появится пример
Наведи на картинку и появится пример
При добавлении малого информационного элемента основная зона пиктограммы смещается на 1px в сторону от композиционного центра.
Одинаковые по массе элементы пиктограммы разводятся в стороны по горизонтали, выходя за основное поле на 1px.
При добавлении большого информационного элемента основная зона пиктограммы смещается на 1px в сторону от композиционного центра и загружается.
Формообразование
Виды углов в пиктограммах
Как рассчитать угол
Пиктограммы образуются трансформацией простых геометрических форм.
30 градусов
Пиктограмма формируется из круга, равного по ширине базовому вертикальному прямоугольнику и смещенного до верхней границы. Нижняя часть скошена под 30 градусов от вертикальной оси.
15 градусов
Нижняя часть пиктограммы равна по ширине базовому вертикальному прямоугольнику. Линии скоса равны 15 градусам относительно вертикальной оси.
Попадание в пиксельную сетку
Важной составляющей в корректной отрисовке пиктограмм является попадание всех элементов пиктограммы на пиксельную сетку.
При работе с некоторыми сложными формами допускается неточное попадание в пиксельную сетку в угоду сохранения исходной геометрии формы объекта.
При работе с некоторыми сложными формами допускается неточное попадание в пиксельную сетку в угоду сохранения исходной геометрии формы объекта.
Залитые формы
Для получения корректных залитых цветом иконок необходимо использовать приведённый принцип трансформации. Перед передачей иконки в работу внутренние формы следует вычесть из основной массы пиктограммы.
Принцип работы с элементами
Серая линия — этому объекту назначается заливка цветом, обводка также остается. Голубая линия — у этого объекта обводка отменяется, назначается белая заливка.
Визуализация компенсации
Внутреннему элементу необходимо дать параллельный контур на 1мм, после чего первоначальный объект удаляется. Таким способом можно получить необходимый объект, который обведен черной линией на визуализации.
В случае с мелкими внутренними элементами пиктограммы используется принцип увеличения оптической массы путем добора размеров и увеличения расстояния между элементами.
Масштабирование
Пиктограммы могут быть трёх размеров: 16px, 24px, 32px. Cетка для 16px считается базовой для разработки новых пиктограмм.
Внутренние пропорции сетки для 24px отличаются от остальных, поэтому пиктограммы выглядят плотнее.
Внутренние пропорции сетки для 24px отличаются от остальных, поэтому пиктограммы выглядят плотнее.
Размер 16px
Сетка 20pxРазмер 24px
Сетка 32pxРазмер 32px
Сетка 40pxФинализация
Отсутствие скруглений
Не стоит делать пиктограммы, у которых отсутствуют скруглённые элементы.
Двухмерность пространства
Не допускаются объемные повороты или ракурсы, пиктограммы строго 2D.
Минимализм
Если от элемента графики можно отказаться, не потеряв смысл пиктограммы — значит, этот элемент подлежит удалению.
Геометрия
Следует избегать негеометричных и живых линий.
