Школа
Интерфейс

Как поступаете с иконками, когда линии размываются?

Как поступаете с иконками в случае, когда габариты чётные, линия нечётная и есть центральные линии? К примеру, иконка + в круге размере 16×16 пикселей и толщиной линии 1 пиксель. При чёткой центровке линий — плюс размывается; ставить со смещением от центра — заметно относительно круга; делать круг нечётным — может не вписаться в набор близко стоящих иконок (к примеру, блок команд при наведении на строку таблицы); делать ширину линий 2 пикселя — визуально слишком жирно.

Варвара Каратаева
14 авг 2021
👁 6070  
Интерфейс

Как поступаете с иконками, когда линии размываются?

Как поступаете с иконками в случае, когда габариты чётные, линия нечётная и есть центральные линии? К примеру, иконка + в круге размере 16×16 пикселей и толщиной линии 1 пиксель. При чёткой центровке линий — плюс размывается; ставить со смещением от центра — заметно относительно круга; делать круг нечётным — может не вписаться в набор близко стоящих иконок (к примеру, блок команд при наведении на строку таблицы); делать ширину линий 2 пикселя — визуально слишком жирно.

Варвара Каратаева
14 авг 2021
👁 6070  
Сергей Чикин
Дизайнер‑иконист, автор курса «Пиктограммы и системы знаков»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Варвара!

В любом наборе иконок полезно оставлять лишний пиксель‑два по границам рабочей области. Туда будут торчать визуально лёгкие выносные элементы отдельных иконок.

Иконки Ту‑ту. Рабочая область 28×28 пикселей, но все иконки стараются уместиться в 24×24. Для торчащих рельсов осталось два пикселя внизу

Cделайте круг 15×15 пикселей и плюс идеально впишется в центр круга:

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

Если у кругоплюса сложные непредсказуемые соседи с большими выносными элементами — пусть будет 13×13:

Круг занял 13 пикселей из возможных 16. Рогам и пантографу соседей есть куда торчать. И снизу остался пиксель, на случай, если появится иконка с нижним выносным элементом

P. S. Это был иконочный совет. Пилите пиктограммы в интерфейсах? Заказчик ругается на иконки? Графика не цепляет? В чём сила, брат? Присылайте вопросы

ИконкиГрафикаИнтерфейс
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы