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

Почему мы используем иконки?

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

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

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

Для чего используются стандарты иконок

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

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

Использования стандартной иконки: пример

В качестве простого примера подойдет задание разработать кнопки с гендерным  различием. Вы можете начать с создания двух активных кнопок с надписями "Мужчины” и «Женщины» соответственно. Кроме того, вы можете добавить цвета, которые традиционно ассоциируются с мужским и женским полом

Но что если эти кнопки будут предназначены для широкой аудитории из 50 разноязычных стран?

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

В ином случае, вы можете использовать коммуникативную силу значков и символов. Как вы представляете себе визуально женщину и мужчину? Вместо того, чтобы напрягать мозг и думать, каким образом люди из 50 стран смогут понять ваши слова, обратитесь к стандартным общепринятым метафорам. Символ «Мужчина» и «Женщина» без раздумий будет сразу понятен человеку из любой страны.

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

Выявление правил и стандартов создания иконок

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

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

Есть хороший метод узнать, существует ли общепризнанный стандарт на ту или иную метафору. Можно открыть поиск картинок в Google и ввести слово для проверки. Если вы увидите много похожих значков, то можете считать, что это традиционная  метафора. Другой способ – опросить окружающих людей и узнать, что им первое приходит на ум, когда они слышат то или иное слово.
Многие  метафоры широко распространены в сфере программного обеспечения. Чем чаще они встречаются, тем скорее становятся стандартами и правилами, признанными в сообществе дизайнеров.  Хороший пример того, как иконка стала стандартом — значок RSS.

Как иконка становится стандартом

Начиная с 2004 года, пользователи  стали активно подписываться на RSS ленты. Не было стандартной метафоры, которая бы ассоциировалась с этой функцией.  Поэтому специалисты разработали широкий спектр загадочных значков. Они указывали на возможность подписаться на RSS ленты.

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

С идеей  создать простую иконку, которая бы отображала все протоколы синдикации, Стивен Хорландер придумал то, что сегодня знакомо нам всем – оранжевый значок RSS. Он первоначально был создан для Firefox 1.0 и не сразу стал универсальным. Его дизайн отражал функцию транслирования информации и продвигался, чтобы быть принятым в интерфейс Internet Explorer и Outlook. Признанным же стандартом эта иконка стала после того, как ее начали использовать вышеуказанные приложения, а также Opera.

Значок RSS демонстрирует, насколько удобным является использование иконок. Вместо того, чтобы работать с крошечными надписями и кнопочками, которые не всегда понятны пользователю «RSS, Atom, Blogline, XML и т.д. », намного проще использовать простую иконку Стивена Хорландера, которая показывает, что сайт что-то транслирует и с помощью нее можно подписаться на ленту обновлений.

Стандарты для иконок обусловленные широким использованием

Другой пример, когда значок становится стандартным, путем широкого применения – это иконка «Поделиться» у Apple. Вы можете легко ее распознать, так как она присутствует в  приложениях iOS и OSX. И не только там. Кроме этого его используют и сторонние разработчики, не имеющие отношения к Apple.

Иконка «Поделиться» разрабатывалась вместе с многими приложениями, которые работают на платформе Apple. Так что, если вы разрабатываете для iOS или OSX и вам нужно использовать значок «Поделиться», то смело следуйте устоявшейся схеме и используйте стандартный вариант. Пользователям Apple (и не только им) будет намного проще понять, что вы имели ввиду, потому что, скорее всего, они видели этот символ раньше.

Стандарт иконок: отдайте свой голос

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

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

Иконки для ваших последующих проектов

Ниже вы найдете перечень значков. Они рассматриваются, как кандидаты стандартного применения.

Иконка OMPL

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

Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License

Сайт: opmlicons

__________________________________________________________________________

Иконка Geotag 

Цель: Геотеггинг – добавление географической мета информации в фотографии. Эта иконка задумана, как стандарт для понимания комплексной технологии с помощью визуального символа.

Лицензия: Creative Commons or GNU Lesser GPL

Сайт: geotagicons.wordpress

__________________________________________________________________________

Иконка выбора языка 

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

Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License

Сайт: languageicon

__________________________________________________________________________

Иконка Open Share

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

Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License

Сайт: shareaholiс

__________________________________________________________________________

Иконка ShareThis

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

Лицензия: GPL, LGPL, BSD, Creative Commons Attribution 2.5

Сайт: shareaholic

Примечание: первоначально эта иконка была введена с плагином WordPress. Теперь она является официальным товарным знаком. Поэтому пользователи выступают за то, чтобы вместо нее использовалась иконка Open share.

__________________________________________________________________________

Иконка Markdown

Цель: ввести эту метку для идентификации использования облегчённого языка разметки http://dcurt.is/the-markdown-mark/

Лицензия: CC0 UNIVERSAL PUBLIC DOMAIN DEDICATION LICENSE

Сайт: github

 __________________________________________________________________________

Оригинал статьи: webdesign.tutsplus.com

Перевод: Наталья Щетко (студия Nineseven)
Возможно, вас также заинтересуют статьи:

• Эмоциональный веб-дизайн: советы и примеры
• 10 признаков того, что вы плохой дизайнер
• Книги о типографике
• Сапожник без сапог или как сделать дизайн для придирчивого клиента — себя
• Дизайн визиток: популярная тема в деталях