Иконы всех Святых: фото и их значение. Классификация иконок: подобие, аналогия и произвольный выбор

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

Как мы используем иконки?

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

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

Как разрабатываются иконки?

По своей структуре, иконки имеют стандартные размеры, обычно достаточно небольшие - от 16x16 до 48x48 пикселей (на Маках - до 128x128, в Windows Vista - до 256x256). Одна иконка обычно содержит несколько рисунков включая прозрачные участки, чтобы черзе нее был виден фон рабочего стола. Из-за этого кажется, что иконка находится над рабочим столом или панелью инструментов, на которой она расположена.

Иконка содержит несколько рисунков разных размеров и цветности для того, чтобы позволить Windows или Mac OS использовать наиболее подходящую из них для данной ситуации. Этот выбор зависит от режима, в котором находится монитор компьютера и места, в котором должна появится иконка. Например, иконки отображаемые на панели задач Windows обычно имеют размер 16x16 в то время как иконки на рабочем столе - 48x48.

Какие форматы используются для иконок?

Иконки Windows имеют расширение "ICO", а маковские - "ICNS", "RSC", "RSRC" или "BIN". Одна иконка (включая все вариации) содержится в одном файле, в то время как группы иконок объединяются в библиотеки.

В чем отличие иконок Windows XP?

Иконки для Windows XP имеют насыщенный цвет и гладкие края, дополняя стиль ОС Windows XP. Их края, как правило, слегка огруглены и источник света располагается в верхнем левом углу, в то время как рассеянный свет освещает другие части рисунка.

Градиенты, очертания и тени используются, чтобы добавить иконке размерности и контрастности. Некоторые иконки в XP имеют панорамный вид, в то время как иконки используемые для документов или те, которые изображают символы или одиночные объекты, повернуты "лицом". В целом их можно описать как современные и высококачественные.

В XP иконки справа от меню "Пуск" имеют размер 24x24, а используемые в панелях инструментов - 24x24 или 16x16. Система поддерживает 32-битные иконки, которые в реальности являются 24-битными рисунками с 8-битным альфа-каналом, из-за которого края иконок выглядят гладкими и сочетаются с фоном.

Иконки Windows XP включают три цветности для поддержки различных установок монитора: 24-битные с 8-битным альфа-каналом, 8-битные (256 цветов) с 1-битной прозрачностью и 4-битные (16 цветов) с 1-битной прозрачностью.

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

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

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

1. Как использовать иконки

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

Усиливаем список особенностей

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

Привлекаем внимание к новым особенностям веб приложения

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

Список различных приложений и продуктов

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

Пример:

Перечислите ваши услуги и увеличьте легкость чтения списка

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

2. Назначение и размещение

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

Акцентирование колонтитулов для придания заголовкам особенного вида

Даже простая иконка может добавить шарма и индивидуальности веб сайту.

Пример:

Увлеките посетителя чтением длинной страницы

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

Пример:

Отделяем заголовки и секции

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

Пример:

Размер значения не имеет! Даже маленькие иконки могут быть эффективны

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

Выделяем текст, размещая иконки справа от абзаца

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

Изменяете размер и размещение иконок

Включите воображение! Изменение размера и размещения иконок сделает контент более динамичным и интересным.

3. Выберите свой стиль

Когда дело доходит до стиля, то нужно иметь в качестве цели эффективность. Если ваш дизайн предполагает уникальность, то оригинальные иконки будут хороши для него, но эффективность гораздо более важна. Помните, что иконки предназначены для расширения и дополнения контента и дизайна. Поэтому особенно важно уделять внимание тому, как ваши иконки соответствуют остальному веб сайту. Не стоит покупать круто выглядящие иконки на каком-нибудь сайте, вроде iStockPhoto. Гораздо важнее, чтобы иконки были в одном стиле с остальным содержанием сайта.

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

Использование светлых цветов и отличного 3D дизайна иконок отлично дополняет внешний вид сайта: GoodBarry

Использование неряшливого стиля для 2D иконок добавляет глубины: Take the Walk

Выбор уникального и последовательного стиля придает динамичности и профессионализма сайту: Squarespace

Монохроматические иконки могут акцентировать внимание на контенте без отвлечения: Studio 7 Designs

Используйте силу трансформации снимка экрана с простым градиентом в уникальную иконку: Gist

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

4. Дополнительные примеры

Ниже приводится несколько примеров эффективного использования иконок.

«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Как правильно оформить и применить иконки на сайте? Рассказываем о простых правилах юзабилити иконок, а также приводим простой чек-лист проверки.»

Иконка - схематический элемент графического интерфейса, обозначающий приложение, функцию или тематический раздел сайта/приложения. Иконки простые, лаконичные и эффективные. Используются для упрощения графического интерфейса приложения или сайта, а также для упрощения и ускорения коммуникации с пользователем (человеческое сознание в разы быстрее обрабатывает и «понимает» графику, нежели текст). Иконки классифицируются в зависимости от выполняемой функции:

• Навигационные иконки - используются для обозначения функции: навгационные стрелки вверх и вниз для перемещения по длинной странице, корзина для перехода в корзину, лупа для активации строки поиска.
• Информационные иконки - указывают на тематику раздела. К примеру, скрещенные инструменты часто указывают на раздел с технической информацией, шестеренка - на раздел с настройками, машина указывает на информацию о доставке, цифры 24/7 - на круглосуточный график работы и т. д.
• Иконки-призывы к действию - часто используются для обозначения очевидных действий. К примеру, на странице скачивания приложения жирная стрелка вниз обозначает призыв к загрузке софта, на странице товара плюс обозначает призыв добавить товар в корзину и т. д.

Правила юзабилити иконок

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

1. Сопроводительный текст - разные сайты используют даже стандартные иконки с разной целью. Так, стандартная лупа может обозначать поиск по сайту или приближение/увеличение изображения. Графические символы можно трактовать двояко. Чтобы упростить задачу пользователя, следует сопровождать иконки текстом. Это в большей степени касается иконок навигации. Текст и графика в паре работают гораздо лучше, чем что-то одно.

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

3. Кликабельность - иконки, по которым доступно действие, должны визуально демонстрировать кликабельность: подсветка при наведении курсора, изменение цвета, увеличение. Это даст понять пользователю, что иконка функциональна, а не просто элемент графического интерфейса. Применяйте анимацию по минимуму.

4. Тест 5 секунд - при разработке индивидуальной концепции иконок (применении нестандартных иконок) проведите тест 5 секунд. Если в вы в течении 5 секунд не сможете идентифицировать иконку и понять, что она означает на сайте, значит данный графический символ недопустим в дизайне. Он будет создавать дополнительные препятствия на пути пользователя к цели: изучению информации на сайте, выбору товара/услуги.

5. Размер имеет значение - слишком мелкие символы рискуют остаться незамеченными в дизайне, тогда как слишком крупные иконки могут сбивать с толку, доминировать над другими элементами и перетягивать на себя внимание (в особенности если большие иконки выделены цветом).

Как проверить юзабилити иконок

Используйте для проверки юзабилити иконок на сайте следующий чек-лист вопросов:

• Легко ли найти иконку в интерфейсе сайта или приложения?
• Насколько гармонично выглядит иконка в интерфейсе? Не нарушает ли она общую концепцию дизайна?
• Расположена ли иконка в ожидаемом для пользователя месте?
• Не отвлекает ли иконка внимание от основного контента страницы?
• Понятен ли смысл иконки пользователю?
• Как выглядит иконка в мобильной версии сайта? Легко ли с ней взаимодействовать с тачскрина?
• Ассоциируется ли данная иконка с другими, несмежными действиями? Не создает ли она дополнительные трудности в использовании сайта? Не приведет ли иконка к ошибочным действиям?
• Необходима ли иконка в данном контексте для обозначения того, что к чему она привязана? Возможно ли обойтись без нее?

Ровно через неделю станет известно, что именно владельцам iPhone и iPad предстоит видеть каждый день на экранах своих мобильных устройств в течение как минимум года – 10 июня Apple покажет седьмую по счету версию iOS. Трепетное ожидание накануне выхода iOS 7 ощущается чуть ли не сильнее, чем в преддверии анонса очередного iPhone. Еще бы – ведь с осени разработку новой операционки курирует сам Джонатан Айв, главный дизайнер Apple, ранее отвечавший лишь за облик аппаратных продуктов компании.

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

Айв известен нелюбовью к лишним украшательствам. Под его руководством внешность некоторых приложений iOS за последние месяцы кардинально поменялась, дизайнеры отказались от «фальшивого» объема и большинства текстур. Созданный Сонни Диксоном совместно с талантливым дизайнером Surenix концепт позволяет оценить дизайн стандартных иконок приложений в iOS 7.

Прежде всего можно заметить, что значки фирменных программ Apple лишились «глянца». Телефон, Музыка, Mail, Сообщения утратили блеск и тени, а сами иконки стали более плоские. У приложения Настройки теперь нет рамки. Значок погоды стал проще – больше нет температуры в цифровом обозначении, появились облака.

О том, что внешность iOS 7 может измениться радикально, в мае . Неназванный источник поделился с журналистом сайта увиденным на одном из тестовых iOS устройств. По его словам, новая операционка не только стала совершенно “плоской”. Айв и его команда якобы пошли еще дальше, сделав многие элементы интерфейса черно-белыми.

Не то чтобы пользователи сильно хотели перемен во внешности iOS – за осовременивание интерфейса ратует лишь наиболее активная и продвинутая прослойка «яблочников». Возможно, кто-то даже возмутится переменами в привычных изображениях на экране. Однако консультироваться с пользователями по поводу еще не реализованных изменений в устройствах в Apple не принято.

12.02.2008, «Денис Кортунов, TurboMilk.ru»

Критиковать чужую работу всегда намного проще, чем создать что-то клевое самому. Но если подойти к критике системно, сделать нумерованный список, подготовить иллюстрации, то это будет уже целый анализ! На мой взгляд, в дизайне иконок сейчас переходный период. Разрешение экранов становится все больше, а следовательно и иконки увеличиваются. Но все еще актуальны иконки размером 16×16 и даже меньше. Итак, вот главные ошибки в дизайне иконок…

#1 Недостаточная различимость иконок

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

Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.

Проблема усугубляется, если включен мелкий размер отображения значков.

#2 Слишком много элементов в одной иконке

Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.

Но дизайнеры компании Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали «на все деньги»:

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

#3 Лишние элементы

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

Возьмем для примера набор иконок для работы с базой данных:

На первый взгляд все вполне прилично.

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

Смысл не потерян, но значки стали более различимыми.

Вот реальный пример использования лишних элементов в иконках BeOS 5:

Галочки тут совершенно не нужны. Кстати, почему они красные?

#4 Нет стилевого единства набора

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

Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.

#5 Ненужная перспектива и тени в мелких иконках

Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.

Для примера возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):

Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.

А вот менеджер приложений из Windows XP:

По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16×16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.

#6 Слишком оригинальные метафоры

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

Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая не корзина вовсе, а шредер.

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

#7 Нет учета национальных и социальных особенностей

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

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

Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.

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

Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.

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

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».

#8 Изображения реальных элементов интерфейса в иконках

Руководство по созданию иконок для Mac OS X предостерегает нас: Не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:

Хочешь переключить radiobutton, а нажимается вся иконка!

Или вот интересный пример из интерфейса браузера OmniWeb:

Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!

#9 Текст внутри иконок

Эта ошибка чаще всего бывает в иконках приложений. Действительно, первое что приходит в голову — сделать иконку приложения из логотипа приложения. Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.

#10 Мимо пикселей

Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.

Only registered users can write comments to the articles.
If you are registered, you need to