Как использовать иконки в мобильном дизайне
16 марта 2019 | Опубликовано в статьюшечки | 9 Комментариев »
Иконки созданы для того, чтобы помочь пользователям ориентироваться в интерфейсе. В нынешнее время они чаще встречаются в мобильном дизайне в панелях. Если иконки не оптимизированы для визуального поиска, пользователям будет сложно ориентироваться в навигации.
Когда пользователи совершают визуальный поиск по большому количеству иконок, у них должна быть возможность быстро распознать тот, что нужен им. Если вы хотите сделать ваши иконки простыми и понятными для распознавания, вам нужно учесть и оптимизировать несколько нюансов.
Детализированные или упрощенные иконки
Чем больше деталей в иконках, тем больше визуального шума. Визуальный шум усиливается, когда пользователи просматривают сразу много детализированных иконок. Поиск и распознавание нужного значка занимает в этом случае больше времени, потому что взгляд перегружен деталями внутри иконок — линиями, формами и оттенками.
А вот большое количество упрощенных иконок создает куда меньше визуального шума и позволяет пользователям быстрее находить искомое. Когда деталей внутри самой иконки минимум, это делает форму значка более четкой и понятной для распознавания.
Исследования подтверждают, что упрощенные иконки распознаются лучше чем детализированные. И тем не менее, если упросить значки слишком сильно, они станут непонятными. Каждой иконке нужны ключевые характерные черты для распознавания. Другое исследование тоже говорит о том, что упрощенные иконки быстрее находятся по сравнению с детализированными, особенно если речь идет о значках больших размеров.
Маленькие или большие иконки
Еще один фактор, который поможет пользователю быстрее найти нужную иконку — соотношение размера графического объекта иконки и фона. Если изображение на фоне маленькое, оно становится практически неразличимым. Это заставляет пользователей увеличивать масштаб, или всматриваться в экран, чтобы различить изображение на иконке. В итоге это занимает больше времени и усилий.
А вот большое изображение по отношению к размеру фона делает иконку лучше различимой даже при просмотре издалека. Пользователям не нужно увеличивать масштаб, так как символы и так различимы. Это позволяет быстрее находить нужное, затрачиваться меньше усилий и меньше напрягать взгляд.
Как показало исследование, размер изображения относительно фона иконки должен быть по меньше мере в 50%. Тогда время визуального поиска пользователей уменьшается. Также оказалось, что фоновая подкладка именно круглой формы сокращает время визуального поиска.
Темное на светлом или светлое на темном
Иконки с положительной полярностью отображения — темного цвета на светлом фоне. Такой вариант менее предпочтителен для визуального поиска чем иконки с отрицательной полярностью (светлое на темном фоне).
В изображении выше обе панели с иконками отличаются только знаком полярности. Светлые иконки на темном фоне кажутся больше и более четкими. Это позволяет быстрее заметить и опознать нужный символ.
И снова исследования подтверждают, что пользователи предпочитают иконки с негативной полярностью. Это происходит благодаря более высокому визуальному контрасту и деталей, которые проще различить.
Предпочтительные цвета
Ускорить работу с графическим интерфейсом также поможет цвет иконок. Пользователи распознают цветные иконки быстрее чем черно-белые.
Согласно исследованию наиболее предпочтительными цветами для иконок являются синий, зеленый и красный. А от фиолетового, оранжевого и желтого лучше отказаться. Интересно то, что как раз синий, зеленый и красный — основные цвета в схеме RGB. В основным цветах иконки выглядят более понятными, однозначными и четкими. Чистота цвета делает их более заметными.
Оптимизация иконок — не только эстетика
Многие дизайнеры совершают ошибку, сосредотачиваясь исключительно на эстетической привлекательности иконок. В итоге значки получаются слишком детализированными или маленькими настолько, что их сложно распознать. Не увлекайтесь исключительно эстетикой, и обязательно учитывайте факторы, которые сделают символы быстрее и легче распознаваемыми
Важные факторы — детализация и размер, особенно если речь идет о группе иконок. Цвет и фон тоже важны, но больше зависят от конкретного случая.
Автор статьи anthony
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
14 ноября 2020 в 11:31
VTKRFM pills2sale.com viagra online
Ответить
17 ноября 2020 в 0:00
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.
Ответить
17 ноября 2020 в 2:21
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.
Ответить
17 ноября 2020 в 3:22
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.
Ответить
17 ноября 2020 в 3:39
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.
Ответить
17 ноября 2020 в 8:29
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.
Ответить
17 ноября 2020 в 18:37
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.
Ответить
18 ноября 2020 в 12:06
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.
Ответить
19 января 2021 в 13:41
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/
Ответить