Цель иконка: Цель – Бесплатные иконки: стрелы — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как уйти от банальных метафор в иконках

На сайтах иконки используются как дополнительный арт-объект, чтобы избавиться от пустоты. Они превратились в визуальный мусор. Попробуем добавить в них немного смысла и привлечь к ним внимание.

Речь опять пойдет о метафорах, поэтому советуем прочитать первую часть — так будет интереснее. В этот раз сосредоточимся на иконках. Мы в Далее условно их делим на интерфейсные и акцентирующие внимание.

Интерфейсные иконки

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

Как писал Джон Сатио в статье Making up metaphors, чтобы поменять настройки, пользователь будет искать шестеренку, а для поиска – лупу. Такой образ должен считываться сразу, без пояснений. Если дизайнер попытается создать новый образ для настроек или поиска, он будет не очевиден для пользователя и отдалит его от цели.

Если переложить метафору на текст, то любая иконка — это простое предложение, в котором есть только существительное, глагол и реже — дополнение. Отправить файл по почте, например. Совмещаем силуэты для этих двух слов и получаем иконку со стрелкой.

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

Чтобы найти иконку, воспользуйтесь поиском по ключевым словам на thenounproject.com или по изображениям в Гугле.

Акцентирующие внимание иконки

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

Чтобы украсить страницу, иконки добавляют везде. Ими выделяют любой короткий текст на странице: блок с преимуществами, блок «как мы работаем», какие-то ключевые цифры. Везде иконки, поэтому блок ничем не отличается от остальных? Добавим цветную плашку под текст!

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

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

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

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

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

Иконки с персонажами

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

Можно создать персонажа бренда и моделировать с ним разные ситуации. При создании персонажа, можно отталкиваться от нескольких факторов.

Цель. Какой эффект должен производить персонаж? Можно сделать интерфейс более дружелюбным и менее официальным, добавив мультяшных персонажей. С их помощью можно создавать разные метафоры и настроение. Эти персонажи не обязательно должны быть связаны с продукцией бренда, главное, чтобы они запоминались и присутствовали не в одном блоке, а в разных разделах сайта.

Персонажи могут быть и серьезными, собранные из геометрических форм или изображенные на линейных иллюстрациях.

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

Фирменный стиль. Построить логику можно исходя из набора графических элементов бренда. Для промостраниц новой линейки шампуней Le Petit Marseillais мы использовали персонажа на логотипе — мальчика в тельняшке. Можно создать дополнительных персонажей в том же стиле, которые будут ассоциироваться с брендом: девочку в тельняшке, собаку. Поскольку продукция связана с ароматами Прованса, ассоциации с Францией гармонично дополнят дизайн страницы. Все эти элементы складываются в единую историю запоминающийся персонаж может использоваться и в иллюстрации, и в анимации.

Если у бренда уже есть запоминающийся персонаж, для иконок можно использовать деталь, которая будет ассоциироваться с ним на уровне метонимии. Например, нос клоуна для McDonalds или уши Микки Мауса для Disney.

В итоге

Соберите в таблицу иконки действий, универсальные иконки и базовые силуэты предметов по тематике своего бренда;
Комбинируйте действия с предметами и получайте узнаваемые интерфейсные иконки;
Создайте базу для действий и предметов в ваших иконках, добавьте цветовую кодировку и объедините иконки в одну дизайн-систему;
Придумайте персонажа бренда в таблицу и придумайте с ним иконки;
Обходитесь минимальными средствами, чтобы расставить приоритеты на странице.

краткий перевод свежих статей о digital. Читайте на Cossa.ru

Содержание

Как улучшить UX иконок
Грустная история Google+

#917. Как улучшить UX иконок

How can you improve products by focusing on better icon usability?

Источник

Иконки повсюду, и они играют важную роль в навигации пользователей по любому веб-сайту или приложению.

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

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

Вебинар «Авито как must-have инструмент для performance-маркетинга»

14 июля в 12:00 по московскому времени Авито приглашает на онлайн-встречу о своей партнёрской программе.

Вебинар будет полезен тем, кто хочет развивать клиентскую сеть и получать за это премию: рекламным агентствам, фрилансерам и начинающим агентам.

Подробнее →

Реклама. ООО «КЕХ ЕКОММЕРЦ». ОГРН 5077746422859

Источник

Основная цель иконки — наглядность или, другими словами, быстрое сообщение идеи, — и здесь может возникнуть проблема. В общем-то, что было раньше, хорошо служило годами. Gmail использовал белый значок с красными штрихами. Значки документов и календаря были синими. А Google Drive, например, использовал многоцветный значок. Это просто, и это работало.

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

Иконки тогда и сейчас

Всё началось в 1981 году, когда Xerox Star стала первой на потребительском рынке компьютерной моделью, в которой использовались иконки.

1981, Xerox 8010 Star. Источник

Всё же, Xerox сделал их неплохо. Обратите внимание, как, используя только чёрные пиксели и экраны с низким разрешением, они добились узнаваемых объектов.

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

Более профессиональные сеты иконок были позже разработаны дизайнером Apple Сьюзан Кэре для Apple Lisa в 1983, а в 1984 годах — для Macintosh.

Набор иконок 1984 Macintosh iOS by Сьюзан Кэре. Источник

Теперь давайте сосредоточимся на сегодняшнем моменте. Совсем недавно, в последнем обновлении iOS 14, технический гигант Apple предоставил пользователям iPhone возможность настраивать иконки по своему усмотрению. Эта функция появилась, по-видимому, потому, что некоторые иконки не подходят друг к другу и не выглядят круто. Предположим, нам всем понравится эта новая функция, но с точки зрения юзабилити для некоторых пользователей потребуется больше времени, чтобы найти любимые приложения на экране.

Это пример сета иконок пользовательского стиля на iOS 14. Источник

Идеальная иконка — какая она

Но что такое «идеальные иконки» и как они обеспечивают незабываемый опыт?

Назначение иконок

Значение иконки и предназначение иконок — это визуально выражать предметы, действия и идеи. И порой иконки не выполняют своей миссии, потому что люди склонны присваивать иконкам разные значения в зависимости от своего опыта. Несмотря на то, что компания NNgroup исследовала иконки, которые вызывают проблемы с юзабилити ещё в 2014 году, на сегодняшний день мы всё ещё сталкиваемся с теми же проблемами! И один из выводов этого анализа — сохраняется тенденция к удалению названий с часто используемых иконок.

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

Удобство использования иконок

По словам Авроры Харли, старшего научного сотрудника Nielsen Norman Group, существует 4 критерии качества при тестировании юзабилити иконок: возможность поиска, распознавание, информационный запах и привлекательность. Каждый из этих ключевых моментов помогает создавать иконки, которые передают основную идею и цель продукта или действия в пользовательском интерфейсе в этом конкретном контексте.

Возможность поиска: определяет, насколько сложно найти иконку на веб-сайте или в приложении в контексте полного пользовательского интерфейса.
Распознавание: люди должны понимать, что представляет собой каждая иконка с первого взгляда.
Информационный запах: основная цель иконки — гарантировать, что пользователи будут окажутся там, куда им нужно перейти. Могут возникнуть определенные чрезвычайные ситуации, когда нет времени на угадывания или «дайте немного подумать», что этот элемент пользовательского интерфейса означает в контексте с другими иконками.
Привлекательность: повышение эстетической привлекательности помогает создавать продукты, которые удобны в использовании и красивы. Это помогает обеспечить отличный пользовательский опыт.

Разработка иконок для UI

И что ещё вам нужно будет иметь в виду, когда приступите к созданию следующего сета иконок?

Целостный подход. К иконкам следует подходить комплексно, как к системе и с определенной целью в пользовательском интерфейсе. Они должны вписываться в графическую систему, в которой вы их используете. Рекомендуется создавать иконки так, чтобы они отличались от других окружающих иконок, при этом работая вместе как единое целое.

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

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

Единообразие стиля. Штрихи, формы, радиус и общие мелкие детали стиля имеют решающее значение. Сохранение единообразия и сбалансированности ваших иконок сделает интерфейс профессиональным. Набор иконок в Material Design — один из прекрасных примеров, который согласован и чётко передает значение каждой иконки во всём сете.

Система иконок от Google Material Design. Источник

Размер имеет значение. Иконки должны работать как в большом, так и в маленьком размере. Очень болезненно обнаружить, что сет иконок слишком детализирован, когда нужно использовать иконку размером 16×16 или аналогичного маленького размера.

Вывод: если приложить больше усилий к иконкам в пользовательском интерфейсе, это определённо улучшит общее юзабилити продукта. Перевели, чтобы вы сэкономили часочек.

#918. Грустная история Google+

The Google Plus Story

Источник

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

Показательный пример — Google+. Хоть и все мы знаем, продукты Google превосходят другие по технологиям.

Тогда почему Google Plus потерпел неудачу?

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

Это произошло из-за того, что они не смогли понять желания и потребности клиентов. Уже существовала такая платформа, как Facebook, которая объединяла разных людей. Google+ хотел, чтобы люди делились всем — своими письмами, твитами, фотографиями, видео и мыслями. Но люди этого не хотели.

Люди хотели общаться с другими людьми в социальной сети, не думая о том, чем именно они делятся с другими людьми. Уже была платформа, а именно Facebook, и популярность Facebook росла, когда появился Google+. Но Facebook заявил сразу, что люди здесь могут делать и что не могут. Так что Facebook просто связал разных людей с их друзьями.

В случае с Google+ людям было сложно подключиться к другим платформам. Они могли очень быстро общаться с людьми в Google+, по электронной почтой Google или на YouTube. Но им было сложно общаться с другими людьми на других платформах. Так что сама концепция Google+ не сработала.

Было ощущение, что он был разработан для внутренних сотрудников, а затем выпущен для пользователей. Google+ должен был делать все одновременно, но люди этого не хотели. Но сама концепция была очень удобна.

Например, концепция кругов

Помните какую-то кучу кругов в Google+? Всё было очень запутанно с ними. Они сбивали с толку, и поэтому концепция кругов, хотя и была замечательной, не сработала хорошо. Обмен постами и изображениями был затруднен. Даже если вы делитесь постами, вы не знали, где их найти: где ссылки? Где фото?

Google проделал выдающуюся работу по сохранению фотографий и их оптимизации. Качество сохраненных картинок и фотографий было действительно отличным. Но в то время, когда люди уже крепко обосновались в другой платформе, такой как Facebook, зачем им на самом деле переносить все свои фотографии с одной платформы на другую?

Это то, о чём Google нужно было подумать, чтобы понять, будет ли их продукт уникальным или нет? Возьмём, к примеру, Snapchat. У него есть отличительная фича — изображения и сообщения в этом приложении исчезают через определенный момент времени. Или вот, например, Instagram — там люди могут постоянно смотреть ленты других людей. Таким образом, эти платформы на самом деле очень лаконично и точно отражают потребности людей. Google+ был повсюду. Обмен разными сообщениями и фотографиями был сложным, и у Google+ не было мобильного интерфейса. Хорошо то, что Google+ остается рабочей версией для предприятий, и они продолжать работать в этом секторе.

Согласно одной статистике, «90% пользовательских сеансов в Google+ длились менее 5 секунд для социальной сети». Это говорит о том, что Google+ не смог понять потребности и желания пользователей. Если бы это был продукт, ориентированный на пользователя, он мог бы иметь успех. Вместо этого, они сосредоточились на технологии.

Вывод: просто надёжная технология может не сработать для социальных платформ. У социальной платформы должна быть отличная концепция, она также должна понимать поведение, желания и потребности пользователей, и ещё должна учитывать опыт пользователей. Перевели, чтобы вы смогли сэкономить часок.

Если у вас в феврале +2, как и у нас дома, то 2021 удался %)

Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.

45 682 целевых значка — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6,9 миллионам активов

Получите неограниченное количество загрузок

Цель Значок

Таргетинг Значок

Цель Значок

Таргетинг Значок

Цель Значок

Таргетинг Значок

Цель Значок

Целевой пользователь Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Целевая безопасность Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Таргетинг Значок

Цель Значок

Цель по заработку Значок

Цель Значок

Целевое ключевое слово Значок

Таргетинг Значок

Цель Значок

Целевое облако Значок

Цель Значок

Таргетинг Значок

Цель Значок

Мишень для дартс Значок

Целевой пользователь Значок

Цель Значок

Таргетинг Значок

Цель Значок

Целевой кандидат Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Целевая прибыль Значок

Цель Значок

Цель Icon

Бесплатная мишень Icon и мишень Icon Pack

Связанные изображения из iStock | Сохранить сейчас

цель плюс добавлять

Цель — плюс

цель стрелка

Мишень-стрелка

инструмент уронить цель

Tool_drop_target

компьютер com/example-1″>графика черно-белые символы значок курсора

2 комплекта 3d

компьютер com/example-1″>графика черно-белые символы значок курсора

Stock_hyperlink-цель

компьютер