TGViewer
Юиксолог | Суета и UX Юиксолог | Суета и UX @uxcall · 642 subscribers
Post #144 275
Вид, форма, цвет, размер.
Советы подбора иконок для интерфейса приложения

В 2022 году готовила этот пост для публикации в TenChat, думаю будет полезен для прочтения и сегодня.

Вид.
Иконки должны быть понятными для пользователя и помогать ему ориентироваться внутри интерфейса, поэтому их внешний вид должен быть простым и вызывать правильную ассоциацию.
В зависимости от общего дизайна приложения, можно выбрать из двух видов Outline (контур) или Filled (заливка), можно использовать сразу оба вида. Не выбирайте иконки с большим количеством элементов, поскольку их будет сложно воспринимать в навигационной роли.

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

Цвет.
Цвет иконок должен быть так же лаконичным и понятным, как и сами иконки. Не нужно перегружать их большим количеством эффектов и градиентов, не нужно забывать, что для пользователя это элемент навигации, который он должен быстро найти и подсознательно понять какое значение иконка несет в себе.
Добавляя эффекты вы делаете из иконки иллюстрацию. Иллюстрации в приложении тоже можно использовать, но скорее в рамках украшения (ui), а навигационные иконки про которые мы говорим для удобства ориентирования внутри мобильного приложения (ux).

Размер.
Для мобильных приложений есть свои гайдлайны: Material Design Guideline и Apple Human Interface Guidelines. Всегда нужно учитывать параметры сетки, обычно она кратна 8px, базовый размер иконки напрямую связан с этими условиями. Иконки навигации чаще всего имеют размер 24х24px, но так же могут быть размеры 16px, 32px и 48px.

❤️ — полезно
🔥 — знаком(а) с этими советами
More from @uxcall
  1. Sep 18, 2026Кринжовый whiteboard Нашла пару реальных задач на whiteboard от которых плюются продуктовы…
  2. Sep 16, 2026Концепт: раздел для потерянных вещей на карте в 2ГИС Помните я рассказывала про идею своег…
  3. Sep 8, 2026а/б тестирование Давайте вспомним для чего нужно и каким может быть. Классическое а/б это…
  4. Sep 3, 2026Хитрое решение увидела у Авито — «бесплатная доставка». Суть этой штуки в том, что ты как…
  5. Aug 31, 2026Дерево, стакан, паутина, соты и это не набор рандомных слов 😁 Это названия компонентов, с…
  6. Aug 22, 2026Отправились погулять в горы и на всём пути нас сопровождали вот такие таблички. Что в них…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →