{"id":13653,"url":"\/distributions\/13653\/click?bit=1&hash=fee89fe6174decc3f9a9e1cefc15dbde7d85d27279acdc112d63d4da4d5a0e3c","title":"\u0427\u0435\u043c\u043f\u0438\u043e\u043d\u0430\u0442 \u0434\u043b\u044f \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u043e\u0432: \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u0434\u043e 100 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e!","imageUuid":"8c1166aa-ed4d-5964-8fea-818410a466e6","isPaidAndBannersEnabled":false}
Дизайн
Net Lab

Суперполезный гайд по созданию иконок для интерфейсов

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

1. Используйте оптическую сетку

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

В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.

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

Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.

2. Учтите пиксельную сетку

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

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

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

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

3. Сохраняйте определённый уровень детализации

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

4. Контролируйте минимальный размер зазора

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

Для значков линий лучше сделать минимальное пространство, равное толщине линии. Линии должны быть либо чётко раздельными либо точно связанными.

5. Удалите повторяющиеся части

В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.

8. Следите, чтобы силуэты были чистыми и точными

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

9. Очистка SVG от мусора

Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.

Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.

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

Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.

0
29 комментариев
Написать комментарий...
Сергей Чикин

Про иконки есть целый канал в телеге. Вот про способы пересечение объектов оттуда
https://t.me/brakodelnya

Ответить
Развернуть ветку
Dmitry Blinov

Из этого можно сделать отличный чек-лист. Спасибо!

Ответить
Развернуть ветку
Aleksey Popov

А для тех, кому лень делать свои иконки, могу поделиться ссылочками на бесплатные наборы:

Eva Icons
https://akveo.github.io/eva-icons

Evericons ⭐
http://www.evericons.com/

Feather
https://feathericons.com

Iconoteka
http://iconoteka.com

Ответить
Развернуть ветку
Aleksey Ruzov

«Заполненные иконки», «иконки строк» — вы серьезно так их называете или просто без смысла перевели Fill / Stroke?

Ответить
Развернуть ветку
Илья Иванов

С переводом терминов вообще всё мрачно: иконки линии, сделать иконки острыми , художественные области, команда ключа…

Ответить
Развернуть ветку
Net Lab
Автор

Спасибо, вы помогаете нам стать лучше)
Мы поправим!)

Ответить
Развернуть ветку
Net Lab
Автор

Спасибо за замечание, обязательно исправимся!)

Ответить
Развернуть ветку
Dmitri Chik

Суперклассный хвалебный комментарий, который понравится автору материала.

Ответить
Развернуть ветку
Aleksandr Kontsevich

Спасибо, никак руки до оригинала не доходили, а ваш перевод прочитал с удовольствием)

Ответить
Развернуть ветку
Alex Antipov

Не используйте иконки. От них нет никакого толка.

Ответить
Развернуть ветку
Artem Kurenev

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

Ответить
Развернуть ветку
Alex Antipov

А что нарисовано на иконках все понимают? "Возрастные пользователи", как раз привычные к чтению, хотя вам лучше знать, наверное.

Ответить
Развернуть ветку
Artem Kurenev

Я даже так скажу... Тут дело не понять иконку, а увидеть ее... Она привлекает внимание и срабатывает как визуальное обозначение или как указатель в сторону надписи))

Ответить
Развернуть ветку
Velemir Hasidov

Словесные словеса потянут необходимость локализовывать их.

Ответить
Развернуть ветку
Net Lab
Автор

Не соглашусь. А какая альтернатива?

Ответить
Развернуть ветку
Alex Antipov

https://vc.ru/flood/13640-icon-text
Я поддерживаю вот эту точку зрения на иконки

Ответить
Развернуть ветку
Net Lab
Автор

да, доля правды в этом есть. Но когда речь идет об иконке, например, электронной почты (значок "@"), туалетов ("wc" или нарисованные человечки), корзина (во всех магазинах - офлайн и онлайн), вай-фай - то, кажется, их любой из тысячи узнает.
В конце концов, всегда можно комбинировать, как это делает тот же вай-фай и "wc"

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Джек Воробей

иконки лучше чем слова... ясненько.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Джек Воробей

а вот хуй тебе, глупенький

Ответить
Развернуть ветку
Lai Psov

Талисман? Что это? Неудачный перевод слова «маскот»?
В остальном все понятно и здорово, спасибо!

Ответить
Развернуть ветку
Net Lab
Автор

упс, да-да-да))
спасибо большое, поправили)

Ответить
Развернуть ветку
Анна

Эта статья уже была переведена более полугода назад.
Перевод был опубликован на другом ресурсе, но всё же...
https://apptractor.ru/develop/design/polnoe-rukovodstvo-po-sozdaniyu-nabora-ploskih-ikonok.html

Ответить
Развернуть ветку
Dmitry Blinov

Судя по откликам, промахнулись с ресурсом)

Ответить
Развернуть ветку
Net Lab
Автор

у нас аккуратнее вышло)))

Ответить
Развернуть ветку
Владислав Романов

шикарно, только гифки корявые (1 кадр на 1 состояние и 20 кадров на второе, в итоге мерцание и сиди улавливай. количество кадров взято с воздуха)

Ответить
Развернуть ветку
Роман Третьяков

Скажите кто не будь, в полтора пикселя если делать, иконки в svg  будут потом на экранах казаться размытыми?

Ответить
Развернуть ветку
Yura Frolov

Суперполезный гайд? Где пруфы что он полезный то?

Ответить
Развернуть ветку
Kalifornia Ferrera

КЛАКБЕЕЙТ. Обычный гайд по иконкам в плоском стиле. Не суперполезный. Вероятно, полезный. Но не факт.

Ответить
Развернуть ветку
Kalifornia Ferrera

А вот один товарищ, который поставил мне минус, вообще бы лучше не отсвечивал со своим адме в области дизайна.

Ответить
Развернуть ветку
Читать все 29 комментариев
null