Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

18 июня 2008 | Опубликовано в графика | 5 Комментариев »

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

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

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

10mis-similar

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

10mis-similar2

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

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

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

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

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

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

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

10mis-db1

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

10mis-db2

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

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

10mis-beos

 

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

 

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

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

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

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

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

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

10mis-perspective

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

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

10mis-shadows

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

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

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

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

10mis-trash

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

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

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

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

10mis-post-box

 

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

 

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

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

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

10mis-filter

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

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

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

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

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

10mis-omniweb

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

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

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

10mis-title

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

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

10mis-blur 
Автор — Денис Кортунов

Полезные ссылки:  
Турбомилк 
Рома Воронежский 
Иконка.ру 
 YellowIcon




Комментарии

  1. smitana
    Thumb up Thumb down 0

    Касательно 7-го пункта — забываете наличие такой важной штуки, как «док». Разве отсутствие орла украсит иконку? К тому же пустых марок не бывает, всегда есть изображение.

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

    Касательно 9-го. Отдельные приложения для загрузки чего-то куда-то, без «головной программы» (например не программа «работа с фотоальомами фликр», а отдельная мелкая-программа для быстрого аплоада картинки в альбом фликр). Отсутствие у иконки такого приложения надписи-логотипа «фликр» ухудшит дело.

    В остальном согласен.

    Ответить

  2. Pharmc261
    Thumb up Thumb down 0

    Hello! dckddca interesting dckddca site! I'm really like it! Very, very dckddca good!

    Ответить

  3. Pharme639
    Thumb up Thumb down 0

    Very nice site!

    Ответить

  4. Pharmd636
    Thumb up Thumb down 0

    Hello! eddddce interesting eddddce site! I'm really like it! Very, very eddddce good!

    Ответить

  5. Pharmd532
    Thumb up Thumb down 0

    Very nice site!

    Ответить

Оставить ответ


+ четыре = 13

Вставить изображение