Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Как использовать иконки в мобильном дизайне

16 марта 2019 | Опубликовано в статьюшечки | 10 Комментариев »

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

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

Детализированные или упрощенные иконки

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

dashboard-icons-detail

А вот большое количество упрощенных иконок создает куда меньше визуального шума и позволяет пользователям быстрее находить искомое. Когда деталей внутри самой иконки минимум, это делает форму значка более четкой и понятной для распознавания.

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

Маленькие или большие иконки

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

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

Как показало исследование, размер изображения относительно фона иконки должен быть по меньше мере в 50%. Тогда время визуального поиска пользователей уменьшается. Также оказалось, что фоновая подкладка именно круглой формы сокращает время визуального поиска.

Темное на светлом или светлое на темном

Иконки с положительной полярностью отображения — темного цвета на светлом фоне. Такой вариант менее предпочтителен для визуального поиска чем иконки с отрицательной полярностью (светлое на темном фоне).

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

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

Предпочтительные цвета

Ускорить работу с графическим интерфейсом также поможет цвет иконок. Пользователи распознают цветные иконки быстрее чем черно-белые.

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

Оптимизация иконок — не только эстетика

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

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    VTKRFM pills2sale.com viagra online

    Ответить

  2. Jeremy
    Thumb up Thumb down 0

    I'm at Liverpool University canada med store Juan Emilio Cheyre, who now heads Chile's electoral service, told the newspaper El Mercurio that he gave 2-year-old Ernesto Lejderman to a convent. In his first time speaking publicly about the case, he said that he was just following orders and that his conscience is clean.

    Ответить

  3. Cody
    Thumb up Thumb down 0

    A packet of envelopes what is the drug stendra used for So far CPRD has achieved 8-9% coverage, but a joint programme with the NIHR’s Primary Care Research Network could add another 20% of coverage by recruiting some 2,000 general practices to contribute their data directly to CPRD.

    Ответить

  4. Whitney
    Thumb up Thumb down 0

    I like watching TV goodrx mobic There is probably a small possibility that there can one day be some sort of Peace deal made but not as long as the Palestinian negotiators continue to make demands that are “non-starters” and dead in the water as soon as the words leave their mouths.

    Ответить

  5. Owen
    Thumb up Thumb down 0

    Have you got a current driving licence? somnox coupon The subpoenas seek information on anti-money launderingcontrols, consumer protection measures, and investmentstrategies in virtual currencies, said the person, who was notauthorized to speak publicly and did not want to be identified.

    Ответить

  6. Gerard
    Thumb up Thumb down 0

    Go travelling testonix Hernandez, who was arrested on June 26 and charged with first-degree murder for his alleged role in orchestrating the execution of Odin Lloyd, is being held without bail as he awaits the next legal maneuverings in the case.

    Ответить

  7. Travis
    Thumb up Thumb down 0

    I'd like to change some money equivalent viagra sans ordonnance The television industry's top awards honored a mix of oldand new shows, with more than a few upsets in the actingcategories, and much talk about the trends transforming today'stelevision — binge-watching, mobile viewing and onlinestreaming.

    Ответить

  8. Garfield
    Thumb up Thumb down 0

    What's your number? genotropin cartridge Twitter, which is expected to go public some time beforeThanksgiving, has yet to determine pricing, but investors say itmight come under pressure from its financial backers to go high.Analysts expect the company, which posted a $69 million losslast year, to seek a valuation of at least $10 billion.

    Ответить

  9. origamistudio
    Thumb up Thumb down 0

    At Origami Studios, we assign a dedicated team of UI Experts to focus on designing interfaces that are not only visually stunning but also easy to use. Pixel-perfect interfaces with vibrant colors are used to blend with your corporate branding, portraying an impressive first impression to the end-users. Our UI designers ensure user-engagement in the entire user journey to improve conversion goals.

    origamistudios.us/ui-design/

    Ответить

  10. cnrljfbcvf
    Thumb up Thumb down 0

    XV2r0u pdwmppvuyykl, [url=http://nxubnxctccnt.com/]nxubnxctccnt[/url], [link=http://igtsmzfkbnjb.com/]igtsmzfkbnjb[/link], lwluajmnedsd.com

    Ответить

Оставить ответ


девять + 7 =

Вставить изображение