Блог: статьи

10 ошибок в дизайне иконок

Денис КортуновАвтор: Денис Кортунов
12 февраля 2008

10 ошибок в дизайне иконокКритиковать чужую работу всегда намного проще, чем создать что-то клевое самому. Но если подойти к критике системно, сделать нумерованный список, подготовить иллюстрации, то это будет уже целый анализ! На мой взгляд, в дизайне иконок сейчас переходный период. Разрешение экранов становится все больше, а следовательно и иконки увеличиваются. Но все еще актуальны иконки размером 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: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.

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

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

Воронка-фильтр

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


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

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

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

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

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


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

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

Иконки с буквами


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

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

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

Связанные записи

Условия использования

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

Комментарии

Спасибо, получился доступный чек лист для создания иконок =)

Ответить Erlioniel, 12 февраля 2008

Подскажите, как бороться с №10?

Ответить edbond.myopenid.com, 12 февраля 2008

Очень интересная статья. Спасибо огромное автору, узнал много полезного.

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

Ответить Alex, 12 февраля 2008

Спасибо очень интересно.

Ответить dmpr0, 12 февраля 2008

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

Ответить batuich, 12 февраля 2008

Спасибо! отличная обобщающая статья

Ответить Arthur, 12 февраля 2008

В пункте #5 допущена небольшая опечатка в подписи к изображению. В слове «перспектива». Кстати у меня на Мак-е икона для Activity Monitor другая (терминал с консолью тоже различны, но уже не так).

Ответить Kind-wizzard, 12 февраля 2008

Кстати, текст на иконках не всегда зло. На ум приходят иконки графических фалов программы ACDSee, которые различаются не только цветами, но и надписями на них. Это я потом привыкну, что коричневый цвет иконки это jpg, а зеленый – gif, но первое время буду ориентироваться по надписям.
Насчет маковской иконки плейлиста – все аналогично. Во-первых на маке можно отключить показ расширения (лично я это делаю пркатически всегда из эстетических соображений :). Но как тогда отличить иконку файла mp3 от иконки плейлиста? Та же ситуация с иконками квиктайма.
А с остальным согласен.

Ответить zhekich, 12 февраля 2008

2 edbond.myopenid.com: Ответ простой – «попадать» в пикселы! :)

2 batuich: Я бы не стал преувеличивать масштабы проблемы. Перые 500 метафор, действительно, даются с трудом. А потом как по накатанной дорожке все придумывается!

2 kind-wizzard: Спасибо! Исправили! Что касается иконок, то скриншот сделан из Mac OS 10.4.11

2 zhekich: Так у иконок файлов снизу написано название и расширение (не всегда). Если ты профессионально работаешь с графическими файлами, то расширения тебе помогут. А если не профессионально, то тебе не важно какой формат, главное что там графика.

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

Ответить kortunov, 12 февраля 2008

Спасибо, получился чеклист для выбора/отбора иконок

Ответить Dmitrii ‘Mamut’ Dimandt, 12 февраля 2008

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

> Решение просто тупо написать буквами — не самая лучшая идея.

Чтож, они обошлись «малой кровью». Вот в Леопарде вместо иконок – привьюхи (тоже сомнительное решение, особенно для видеофайлов, в том виде который сейчас).

Ответить zhekich, 12 февраля 2008

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

Про Леопард ничего пока сказать не могу. Но сейчас с большим удовольствием пользуюсь превьюшками для графических файлов в Тигре. Я настроил иконки на максимальный размер и мне в finder видно что внутри файла.

Ответить kortunov, 12 февраля 2008

ну немного не понятно кто будет придумывать новые метафоры?
Или есть предложение и дальше рисовать дискетку на сейв?

Ответить Роман, 12 февраля 2008

Спасибо, заценил.
Про ACDSee согласен.
И в пункте #7, думаю, метафора с маркой отнюдь не лучшая, т.к. она плохо масштабируется, в отличии, например, иконки в виде конверта.

Ответить dombrovsky, 12 февраля 2008

2 Роман: У меня есть предсказание по поводу иконки Save! (смотрит в стеклянный магический шар) В будущем, когда вырастет поколение, которые дискеток не видели, функции Save в программах не будет! Сохранение — вынужденная мера, от неё откажутся.

Ответить kortunov, 12 февраля 2008

Очень интересная статья, но вот как-то не комильфо делать комментарии к картинкам светло-серым шрифтом 6 на белом фоне и рассуждать о читабельности иконок.

Ответить Timur, 12 февраля 2008

Отличная статья, в прочем как и все остальные ;)

Ответить INCWADRA, 12 февраля 2008

2Денис Кортунов: что-то слабо в это верится ))
Хотя может быть turbomilk хочет взять на себя придумывание и интеграцию в общество новых метафор… А это просто написано, чтобы другие и не пытались изобретать велосипед.

Ох, я такой мнительный что-то…

Ответить Роман, 12 февраля 2008

2 Роман: Дело не в новой метафоре, а в том что такой функции не будет вообще. Да что там функции! В будущем и файлов не будет! Будет только чистый непорочный безтелесный его величество Контент!

Ответить kortunov, 12 февраля 2008

2 Денис Кортунов:
Хотелось бы верить. Но я думаю все таки дискетки оставят как иконку Save’а Хотя бы как память.

Ответить INCWADRA, 12 февраля 2008

2 Роман: метафоры не придумываются, а автоматически, что ли, «выкристаллизовываются» :) ибо в мире не так уж и много достатоточно однозначных сущностей, которые можно адекватно изобразить в качестве иконки. а оригинальность метафоры ради оригинальности метафоры — зло, имхо только в ограниченных случаях такое можно себе позволить.

2 Денис: статья отличная, спасибо! подписываюсь подо всеми пунктами.

Ответить SunAlex, 12 февраля 2008

Денис, спасибо!
Отличная статья. Ждём продолжения банкета

Ответить портальных дел мастер, 12 февраля 2008

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

Ответить Batur, 12 февраля 2008

1. Терминал и какая-то фигня с буквами различаются даже в таком размере, в котором ты их никогда не используешь их в Mac OS X. Да, они обе прямоугольные ;)

3. Смысл у первых двух в измененной версии потерян. Любой пользователь Windows XP скажет тебе, что это иконки «развернуть ветвь» и «свернуть ветвь» в иерархическом отображении директорий.

7. Чем тебе не угодил орел? Кстати, не понимаю, почему воронку используют для отображения фильтра. Это же тупо. Она нифига не фильтрует. Фильтрует сито ;) Не надо показывать мне Майкрософт Офис. Тоже мне, нашли гуру пользовательских интерфейсов ;)

9. Фликр аплодр офигительный потому, что flickr — не название. Это мем, как логотип. Кроме того, отлично используется текст в иконках Adobe CS3. Во всяком случае, у титульных приложений.

Ответить Genn, 12 февраля 2008

Очень интересно, спасибо.

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

Ответить Катя Куликова, 12 февраля 2008

Отлично. А теперь, ждем обзор по логотипам.

Ответить Алексей, 13 февраля 2008

2Genn: Вроде это ястреб, я не орнитолог конечно, но с быстроте маковской почты иконка полностью соответствует.
А вот к примеру в Яндекс почте иконка Фу! очень спорная:)

Ответить Arsart, 13 февраля 2008

Статья как раз кстати. Спасибо за материалы. Как бы ещё масшабировать их научиться.

Ответить связист, 13 февраля 2008

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

Ответить Alex, 13 февраля 2008

Идея с маркой для почты так себе. Более узнаваемый символ почты — конверт.

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

Ответить Evgeny Dmitriev, 13 февраля 2008

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

Ответить Алексей, 13 февраля 2008

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

Ответить Blockbuster, 13 февраля 2008

Интересный обзор, спасибо!

Но в дизайне нет правил, соответственно и какое-то решение по формальным признакам нельзя посчитать ошибочным.

По 9 пункту солидарен с zhekich – почему раз профессионал, то непременно должен читать расширение?! Как раз наоборот – если в его профессиональной деятельности эта информация необходима, то она должна быть заметно отражена на иконке.

А на счёт playlist’а – для него не нашлось однозначной простой метафоры. Вместо ненужного усложнения написали слово – всё сразу стало просто и понятно.

Примеры из 7го пункта тоже далеки от идеала – с воронкой все просто тупо копируют неудачную идею. Ей скорее стоило проиллюстрировать 6ой пункт – что лучше неудачное, но уже традиционное решение, чем непонятная оригинальность. Марка отличается только ребристым краем, в мелком варианте никто не разберёт, что это марка.

Пример 4го пункта тоже неудачен – неизвестно зачем ему нестандартная иконка – в его случае всё может быть вполне в стиле :)
Единства нет совсем в другом – что в каких случаях отображают иконки: тип документа или его содержимое? Действие осуществляемое программой или её логотип? И т.п.

Ответить Busla, 13 февраля 2008

2Blockbuster
Конечно же оригинальный =)

2Busla
В дизайне нет правил, но только для тех, кто их знает. Любое правило дизайна можно не применить, только если ты понимаешь, что делаешь. А обычно ровно не так.

Про расширение файла – для профессионала, если оно так важно, то можно было бы сделать галочку в программе «Отображать расширения файлов». Потому что конечному пользователю (который не занимается созданием графики) совершенно фиолетово png, jpg, tiff или еще какой формат изображение. Главное, что это картинка. (то же самое можно сказать про музыку например, винамп же не делит файлы по расширениям?)

Винамп нашли метафору, которая вполне читается.

Про воронку да, спорно. С другой стороны это традиция уже. Так же, как и дискетка на Save

Про иконку Mail от Apple тут я вас разочарую. 10 минут работы в фотошопе дали результат, который вполне читается (даже учитывая, что размер 16х16):

Так что считаю ассоциацию вполне адекватной

Ответить Erlioniel, 13 февраля 2008

@Genn: 1) Ну, а что ты хотел? Чтобы это был ребус «найдите ОДНО отличие» и лупа в копмлекте. Я ж для примера! 7) Я тоже не совсем понимаю почему воронка стала фильтром (кстати, я видел воронку с ситечком внутри). 9) Фликр – афигительный, но иконка плохая. Кроме того, что там текст, она еще и совершенно не вписывается в эпловские иконочные гайдлайны.

@Алексей: По логотипам обзор не обещаю. Едва ли у меня получится лучше, чем у logolounge.com Кстати, есть перевод на русский: http://revision.ru/article/59/

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

@Bloacbuster: Как вы догадались? Текст нагло украден отсюда и переведен на русский.

@Busia: В 7 пункте воронка иллюстрирует социальные особенности. По-моему я там очень удачно совместил понятный и простой пример с искрометной и смешной шуткой! :) Не понимаю, почему пример в 4 пункте неудачен. По-моему с созерцания этого наюора начинает большинство людей, которые вообще в первый раз подумали о иконках.

Ответить kortunov, 13 февраля 2008

Картинка видимо не вставилась…
http://img.erl.name/stuff/tmilk/apple_mail-16×16.jpg

Ответить Erlioniel, 13 февраля 2008

Дениско, отличный обзор! Не знаю, как с профессиональной точки зрения, а вот со стороны обывателя очень даже занятно почитать об ошибках. Надеюсь, ваши клиенты оценят эту статью и приду с распростертым кошельком ;)

Недавно, в общении с один товарищем, зашел разговор о том, как заказчику определить качество иконки или их пакета. Скажем, мне нужны хорошие грамотные иконки для веб-приложения. Но я не спец в этом, посему заказываю иконки на стороне. Я стою перед выбором исполнителя, изучаю портфолио, вижу красивые картиночки. Вот, кстати, взять хотя бы #1 – красивые иконки, но я бы и не уловил в них ошибку. Я же обыватель.

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

Ответить Зимин Дмитрий, 13 февраля 2008

Для иллюстрации первой проблемы можно привести иконки браузера IE 6. Я часто путаю две похожие кнопки: Refresh и History. Они обе зеленые и обе с закрученными стрелками.

Ответить Rustem, 13 февраля 2008

Раз производители программ не в состоянии делать правильные иконки придется делать их самим пользователям конечно обьядинившись а на базе иконок темы для разных операционок и программ

Ответить AMD, 14 февраля 2008

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

Ответить жопа васи, 14 февраля 2008

Зимин Дмитрий, в примере №1 нет ошибок в иконках. Они очень хорошие и удачные.

Ответить Genn, 14 февраля 2008

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

Ответить Зимин Дмитрий, 14 февраля 2008

Зимин Дмитрий, нет. О чем я писал выше. Да, Терминал и Activity Monitor рядом ставить не стоит, они оформлены в стиле оформления системных утилит Mac OS X. Прямоугольник, в котором что-то. Честно говоря, в доке они различимы отлично, а в размере мельче 48х48 их можно встретить разве что случайно. Предлагаю прочесть то, что смущает в посте Дениса у меня в блоге.

С тем, чтобы составить критерии выбора иконок я согласен, но их стоит делать очень абстрактными, а то могут получиться бесполезные священные книги. Такие как, например, тома последователей Якоба Нильсена с утверждениями типа «логотип должен быть в левом верхнем углу, иначе сайт бесполезен». ;)))

Ответить Genn, 14 февраля 2008

а то могут получиться бесполезные священные книги

Риск такой есть, согласен. Ну будем уповать на профессиональное знание предметной области.

Ответить Зимин Дмитрий, 14 февраля 2008

Про полуось зря – там был именно шреддер, а не мусорка. И (сюрприз!) никто в нем не хранил документы :)

Ответить aleksei, 14 февраля 2008

Класс – очень понравилась заметка 8-) Разве что невглядываясь невооруженным взглядом я даже не заметил разницы между уменьшенными иконками в 10-м пункте – пришлось приглядываться ;)

Ответить ACID Jesus, 20 февраля 2008

Небольшое дополнение насчет шреддера os/2. Там перемещение файла на эту иконку сразу удаляет его. В отличие от корзины, из которой файл можно достать обратно. Поэтому в этом случае оригинальность очень даже полезна — сразу ясно, что работать эта штука должна по-другому.

Ответить silence, 29 марта 2008

Кстати о корзине (в винде), я ее использовал как систему контроля версий, правда очень дубовую, и она позволяла произвести откат далеко.

Ответить Werdn, 26 июня 2008

Прошу прощения, а как же это и пункт #9?

Ответить Pixels, 26 июня 2008

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

Ответить synthetik, 23 августа 2008

Где вы видели, чтобы фильтровали ситом? Фильтруют воронкой ;) Вспоминаем школьные уроки химии

Ответить kogemrka, 22 января 2009

Пункт 1. Иконки отвечают за управление системы. Стиль иконок логичен, сходства в формах и стилистике дают понять, что данные иконки отвечают конкретным задачам. (управления сист). В размерах 16х16 можно было бы более детально прорисовать или просто увеличить контраст.

Ответить Kostia Vas, 26 февраля 2011

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

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

Закрыть