fbpx
maxresdefault

Советы по дизайну лучших интерфейсных иконок

Вступление

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

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

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

Совет 1. Настройте сетку

Профессия «UX-дизайнер»
7 дней дизайн-перезагрузки
Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Присоединиться

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

Определите безопасную зону и установите ключевые линии. Используйте полученную сетку в качестве шаблона, чтобы закрепить пропорции и размеры вашей иконки.

Советы по дизайну лучших интерфейсных иконок

Совет 2. Сделайте их последовательными

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

Пример: толщина линии – 2px, радиус скругления угла – 3px;

Советы по дизайну лучших интерфейсных иконок
Набор иконок от Super Basic Icons

Совет 3 – Сделайте их понятными

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

Советы по дизайну лучших интерфейсных иконок

Совет 4 – Используйте равные интервалы

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

Вы можете подсчитать расстояние между векторными линиями, удерживая клавишу ALT в Figma, Sketch или XD.

Советы по дизайну лучших интерфейсных иконок

Совет 5 – Оптическая коррекция

Выровняйте элементы иконки по оптическому центру и сбалансируйте визуальный вес.

Советы по дизайну лучших интерфейсных иконок

Совет 6 – Заполните пространство

Поворачивайте узкие иконки и используйте все пространство контейнера, чтобы улучшить читабельность.

Советы по дизайну лучших интерфейсных иконок

Совет 7 – Комбинируйте стили

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

Советы по дизайну лучших интерфейсных иконок

Совет 8 – Удобные инструменты

Инструменты

Ресурсы

Спасибо за прочтение. Эта статья была первоначально опубликована в Instagram автора. Подпишитесь на него, чтобы получить еще больше полезных советов.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Цветной выключатель Sketch
Подробнее

Подробный урок по созданию IOS иконки в Sketch 3

Я хочу сделать самое простое, но самое подробное описание. Этот урок разработан для новичков, так что, возможно, многие вещи, описанные здесь, будут вам уже знакомы. Вот результат IOS иконки в Sketch 3, который мы получим:

Лучшие статьи, раз в неделю, с доставкой на почту

Total
4
Share