В этой статье
Scott
Чтобы сделать иконку для интерфейса, сначала определите действие или объект, который она обозначает. Затем выберите узнаваемую форму, соберите её из простых элементов и проверьте в реальном размере рядом с остальными иконками. Хорошая иконка должна быть не только аккуратной, но и понятной в том месте, где человек её использует.
В редакторе интерфейсов Pixso удобно держать рядом векторный исходник, небольшой набор иконок и экран, для которого они предназначены. Здесь речь пойдёт именно об интерфейсных символах, а не об отдельной иконке приложения для магазина или экрана запуска.
Что такое дизайн иконок
Иконка — небольшой графический символ, представляющий объект, действие или состояние. В интерфейсе это может быть поиск, папка, скачивание или уведомление. Она помогает быстрее просматривать знакомые элементы, но не становится универсальным языком автоматически: один и тот же символ в разных продуктах может означать разное.
Например, стрелка вниз может означать скачивание, раскрытие списка или переход ниже по странице. Контекст и подпись снимают неоднозначность. Поэтому оценивать иконку только на отдельном белом листе недостаточно: важно увидеть её рядом с текстом, соседними действиями и состояниями.
Как создать иконку: от формы до проверки
Начните с небольшого набора для одной задачи. Так проще заметить несогласованные пропорции и толщину линий, чем при рисовании десятков независимых символов.
Шаг 1. Изучите объект и его назначение
Посмотрите, какие признаки делают объект узнаваемым. Для папки это может быть выступ на верхнем крае, для лупы — круг и ручка. Соберите несколько ориентиров, чтобы выделить общие признаки, а не копировать случайную чужую иконку.
Запишите значение будущего элемента одним действием: «Найти документ», «Открыть папку», «Скачать файл». Если команда не может согласовать значение, детализация рисунка не решит проблему.
Шаг 2. Разбейте форму на простые составляющие
Ищите круги, прямоугольники, линии и простые контуры. Сделайте несколько набросков и уберите детали, которые не помогают распознаванию. Лупе обычно не нужны блики и текстура ручки, если она будет стоять внутри небольшого поля поиска.
Шаг 3. Соберите иконку на выбранной сетке
Для первого варианта можно создать фрейм 24 × 24 пикселя и включить пиксельную сетку. Это рабочий размер примера, а не обязательный стандарт для любого продукта. Задайте внутренние отступы, толщину линий, форму концов и скругления, которые затем будете использовать в наборе.
Не старайтесь заполнить всю площадь любой ценой. Круг и квадрат одинаковой ширины могут восприниматься по-разному. Оставляйте место для оптической корректировки, сохраняя общий визуальный вес.
Шаг 4. Проверьте значение в интерфейсе
Покажите иконку в том месте, где она будет работать, и спросите, что произойдёт после нажатия. Сначала выслушайте ответ, не называя задуманное действие. Если символ узнают как предмет, но неверно понимают команду, добавьте понятную подпись или измените метафору.
Шаг 5. Проверьте чёткость, а не только целые координаты
Посмотрите на иконку при масштабе 100% и в целевом размере. Размытый край может зависеть от положения контура, толщины и выравнивания обводки, масштаба экспорта и плотности экрана. Требование сделать все числовые значения целыми не является универсальным решением: например, центрированная обводка нечётной толщины может потребовать другого положения контура.
Исправляйте конкретный край и сравнивайте результат, а не округляйте все координаты автоматически. Для очень маленькой версии иногда полезнее упростить форму, чем пытаться сохранить каждую деталь большой иконки.
Шаг 6. Экспортируйте и проверьте результат
Согласуйте с разработчиками формат и размеры. Для векторной иконки часто подходит SVG; для растрового использования понадобится, например, PNG в нужном масштабе. Pixso поддерживает эти форматы экспорта. Откройте полученный файл и проверьте границы, обводки, прозрачность и отсутствие лишних элементов за пределами иконки.
Пример: три иконки для списка документов
Допустим, в продукте нужны поиск, папка и скачивание. Начните с трёх фреймов 24 × 24, одинакового характера линий и скруглений. Сначала соберите лупу и папку, затем стрелку скачивания с основанием, чтобы она не выглядела как обычная команда раскрытия.
| Иконка | Где используется | Что проверить |
|---|---|---|
| Лупа | Рядом с полем «Найти документ» | Не воспринимается ли как увеличение масштаба и не конкурирует ли с кнопкой очистки |
| Папка | Перед названием раздела | Отличается ли от обычного файла и совпадает ли визуальный вес с лупой |
| Скачивание | В действии «Скачать файл» | Понятно ли направление действия и не путают ли его с раскрытием меню |
Поместите набор на реальный экран: длинное название папки, обычный документ и недоступное скачивание. Для кнопки без видимой подписи передайте разработчикам понятное доступное имя; всплывающая подсказка не должна быть единственным объяснением для всех способов ввода. Отдельно задайте область нажатия: размер рисунка не обязан совпадать с размером интерактивной области.
Сравните набор в размере 24 пикселя и в меньшем размере, если он действительно нужен продукту. Если папка кажется значительно тяжелее лупы, поправьте пропорции или толщину, а не увеличивайте все иконки сразу. Сохраните итоговые варианты как согласованный набор.
Принципы создания иконок
Простота, размер и последовательность помогают иконкам работать вместе. Декоративные приёмы выбирайте под назначение: небольшая команда интерфейса и крупная иллюстрация могут требовать разного уровня детализации.
1. Стройте форму из простых элементов
Круги, квадраты и прямоугольники дают понятную основу. После построения попробуйте ещё раз убрать второстепенные детали. Если назначение сохраняется, более простой вариант обычно легче использовать в небольшом размере.
2. Опирайтесь на знакомые обозначения
Лупа часто обозначает поиск, поэтому её не нужно изобретать заново ради оригинальности. Индивидуальность можно добавить пропорциями и характером линий. Для неоднозначного или нового действия подпись полезнее необычного символа, который сначала приходится изучать.
3. Проектируйте для нужных размеров
Векторный формат позволяет масштабировать форму, но не гарантирует её читаемость. То, что хорошо выглядит при 512 пикселях, может превратиться в пятно при 16. Проверяйте конкретные размеры и при необходимости делайте упрощённый вариант, сохраняя узнаваемые признаки.
4. Ограничивайте мелкие детали
На панели инструментов или вкладок маленькие внутренние элементы могут сливаться. Сохраняйте детали, которые объясняют смысл, и убирайте украшения, мешающие силуэту. Проверяйте форму на том фоне, где она будет использоваться.
5. Поддерживайте общий стиль набора
У иконок должны сочетаться толщина линий, скругления, окончания, пропорции и степень детализации. Это не означает, что все контуры нужно подогнать под одинаковую внешнюю ширину. Задача — общий визуальный вес и узнаваемое родство.
6. Проверяйте действие, а не только узнавание предмета
Попросите коллегу найти нужную команду среди соседних элементов. Узнаваемая стрелка всё ещё может вести не туда, куда человек ожидает. Наблюдение за выбором в интерфейсе полезнее вопроса «Нравится ли тебе эта иконка?».
7. Согласуйте освещение, если используете объём
Для объёмного или декоративного набора направление света и характер тени должны сочетаться. Это не требование добавлять освещение к плоским интерфейсным символам: у контурных иконок оно может вообще не использоваться.
Создайте согласованный набор в Pixso
Pixso позволяет работать с векторными формами и размещать их в макетах интерфейса. Держите исходники иконок рядом с примером их использования, чтобы команда могла обсуждать не только рисунок, но и назначение, состояние и подпись.
Сохраните согласованные иконки как повторно используемые элементы. При передаче в разработку укажите назначение, размеры, формат и нужные состояния. После экспорта сравните файл с исходником: импорт или экспорт не отменяет проверки сложных контуров и эффектов.
Когда использовать готовые ресурсы Pixso
Если для проекта уже подходит готовый набор, можно начать с иконок в международном сообществе Pixso. Проверьте условия конкретного ресурса, полноту набора и совместимость его стиля с интерфейсом. Не смешивайте несколько библиотек только ради отдельных понравившихся символов: сначала сравните их толщину, пропорции и подписи.
Нарисованная с нуля иконка и готовый ресурс требуют одной и той же финальной проверки: человек должен узнавать нужное действие в реальном интерфейсе, а набор — оставаться согласованным при рабочих размерах.
