- Перед началом работы
- Особенности использования иконок
- Визуальный стиль
- Процесс рисования иконок в CDS
- Именование иконки
- Группирование
- Экспорт в SVG
- Добавление в CDS
- Ссылки на полезные материалы
Перед началом работы
Если вы собираетесь создать собственную иконку:
- Убедитесь, что похожей иконки уже нет в библиотеке CDS.
- Уточните в Mattermost, возможно создание нужной вам иконки уже планируется или существует в другом продукте.
Особенности использования иконок
Используются
- В составе связанных компонентов для обозначения пользовательских шаблонов общих действий, таких как редактирование, копирование, удаление и так далее.
- Для графического обозначения значений и статусов в интерфейсе с целью ускорения восприятия информации и сокращения места в интерфейсе.
- В случаях, если не достаточно только текстового обозначения.
Не используются
- Когда достаточно текстового обозначения значения, статуса или действия.
- Для декоративного оформления блока или страницы, для этих целей используйте иллюстрации.
Компонент CDS Icon
Иконки отображаются только через компонент CDS Icon.
Визуальный стиль
При создании иконки используйте шаблон и иконки из набора CDS в качестве примера. Используйте иконки для обозначения их общепринятого значения.
Размеры
Иконки имеют разные формы и занимают разное визуальное пространство, размещайте их в контейнер, чтобы все они были одинакового размера при экспорте и равномерно размещались в интерфейсе. Размер контейнера равен 16х16, что равняется mini-unit(2) и является базовым размером для иконок CDS.
Сетка
Выравнивая объекты по пиксельной сетке, гораздо проще расположить элементы равномерно и добиться чистого отображения. Не допускайте дробных координат и размеров, иначе в растровом варианте вы получите размытые края.
Выравнивайте объекты по пиксельной сетке
Избегайте дробных значений
Шаблон
Помогает определить визуальный центр объекта, а также добиться согласованности с другими иконками в библиотеке. Добавьте внутренний отступ по краям в 1рх, чтобы придать иконке больше воздуха и добиться гармоничного результата. Учтите, что шаблон должен помогать, а не ограничивать. Если иконка визуально лучше смотрится с некоторыми отступлениями, пусть так и будет.
Найдите в папке CDS на своём компьютере файл cds-icon-template.sketch или скачайте его из облака, если у вас не подключена эта папка в OwnCloud. При проблемах с доступом к файлу обратитесь к Сергею Гарибяну
Цвет
Базовый цвет иконок задается токеном --cds-color-icon-default. При необходимости меняйте цвет иконок внутри компонента с использованием CDS Icon. Например цвет ошибки у иконки в CDS Text input задается в самом компоненте. Не используйте 2 и более цвета, это усложнит иконку и дальнейшую работу с ним.
Обводка
Толщина обводки равна 1рх и соответствует пиксельной сетке.
Скругление
Старайтесь использовать одинаковый радиус скругления, такой же как и у других иконок в библиотеке.
Задавайте внутренним фигурам меньший радиус, чем внешним, чтобы добиться гармоничного результата. Скругление можно задать любому объекту в свойстве Corner Radius.
Чтобы задать его определенным углам, войдите в режим редактирования объекта и выберите вершины, либо задайте в поле Corner Radius значения через «;» слева по часовой стрелке. Например 0;7;7;7 — Левый верхний, правый верхний, правый нижний и левый нижний углы.
Верхний предел значения ограничивается размером объекта, в данном примере это 7.
Перспектива
Перспектива затрудняет рисование иконки и усложняет её восприятие в маленьких размерах. Избегайте использование перспективы, чтобы сохранить читабельность иконки.
Именование
Давайте иконкам общепринятые названия, чтобы другие дизайнеры и члены команды могли легко найти их в библиотеке.
Архитектура
Группируйте иконки по смысловому значению. Основные наполняемые группы сейчас: status, navigation и operations.
Процесс рисования иконок в CDS
Если значение иконки общепринятое, поищите референсы, например в сервисе Iconfinder.com или remixicon.com. Для рисования специфичной иконки, найдите похожие по смыслу иконки, которы можно взять за основу или подберите метафоры.
- Создайте артборд размером 16x16рх и включите отображение сетки размером в 1px.
- Нарисуйте иконку используя шаблон и руководствуясь визуальному стилю CDS, описанному выше.
- Преобразуйте линии в фигуры с помощью Outline и при необходимости выровняйте по пиксельной сетке
- Удалите лишние опорные точки
- Переведите иконку из Combined Shape в Flatten, чтобы объединить фигуры в один объект
- Убедитесь в читабельности иконки, сбросив масштаб рабочего пространства с помощью комбинации клавиш Command+0
- Примените стиль CDS Color / icon / default
- Преобразуйте артборд в символ и дайте ему название
Именование иконки
Называйте иконку тем, что на на ней изображено, а не действием, которое она выполняет. Это правило не относится к общепринятым иконкам, например Удалить в виде мусорного бака.
Общепринятые названия помогают быстрее найти нужную иконку
Тогда как, неочевидные названия увеличивают время поиска иконки или дизайнер может не найти ее вовсе
Название иконки состоит из английских строчных букв и цифр в формате kebab-case: вместо пробела в названии используйте тире.
Формат именования
[size] / [category] / [subcategory] / [name-name]-[fill]-[direction]
size
Размер иконок.
category
Категория.
ubcategory
Подкатегория.
name-name
Имя иконки, с тире, вместо пробела.
fill
Опционально, если является альтернативной для иконки с обводкой. Например alert и alert-fill.
direction
Может быть left, top, right, down vertical, horizontal. Например arrow-left.
Группирование
- Группирование иконок происходит по смыслу.
- Если внутри одной группы формируется отдельный набор иконок, выносите их в отдельную группу. Например иконки стрелок в подкатегорию Arrows
- Если ваша иконка не подходит по смыслу ни к одной из категорий, вынесите ее в категорию other
| Группа | Описание |
|---|---|
| controls | Иконки с функциями управления — воспроизвести, остановить, настроить |
| file | Операции с файлами, скачивание, копирование и тп |
| navigation | Навигационные иконки, стрелки, меню |
| operations | Взаимодействие с интерфейсом, например удаление, редактирование, фильтрация, поиск |
| status | Указывающие статус или состояние |
| time | Часы, календарь, секундомер |
| toggle | Иконки, дублирующиеся иконками с противоположным состоянием, например Показать/скрыть, Добавить в избранное/убрать из избранного |
| user | Пользователь, группа пользователей |
| other | Иконки, не подходящие ни к одной из категорий |
Экспорт в SVG
- В правом нижнем меню Sketch нажмите кнопку Make exportable
- Выберите формат экспорта .svg
- Нажмите Export selected...
- Убедитесь, что в файле нет defs, лишних масок и прочего. При необходимости очистите чем-то вроде этого.
Пример «чистой» иконки:
- Укажите название иконки вместо содержимого
<title>и<id="">
Добавление в CDS
- Перед отправкой убедитесь, что иконка нужна как минимум еще одной команде.
- Проверьте соответствие иконки визуальному стилю CDS
- Создайте запрос в Jira на добавление в библиотеку
- Прикрепите к запросу файл в формате .svg
- Команда CDS проведет ревью и примет решение о добавлении
- В случае положительного решения Сергей Гарибян проверит иконку и добавит в библиотеку, выпустив об этом новость в #cds_dsgn