»Статьи / Веб-Дизайн / Ошибки в создании иконок для сайта »   https://world1000.net/page.php?id=221

Автор: , Отправлено: 2008-11-03 20:59.

В последнее время дизайнерский уровень Рунета значительно подрос и мы не будем исключением! Итак, начнём с "малого" и попытаемся выделить главные ошибки в дизайне иконок…<br /> <br /> Недостаточная различимость иконок<br /> Иногда в одном наборе иконок встречаются слишком похожие друг на друга и очень трудно понять, что же они значат. Если не читать подписи, то можно очень легко перепутать значки.<br /> <br /> <br /> Проблема усугубляется, если включен мелкий размер отображения значков.<br /> <br /> <br /> Слишком много элементов в одной иконке<br /> Чем иконка лаконичнее, чем меньше на ней элементов, тем лучше. Но дизайнеры в Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали, как говориться, «сразу на все деньги»:<br /> <br /> <br /> Проблема в том, что в самых мелких размерах невозможно понять, что же такое нарисовано. Да и в крупном размере воспринять иконку непросто.<br /> <br /> Лишние элементы<br /> Иконка на сайте должна легко «читаться», то есть мимолётно посмотрев на неё, человек, даже не опытный, должен сразу понимать, что она значит. Желательно, чтобы значимым было все изображение, а не только его часть - необходимо обращать внимание на контекст, в котором будут использоваться иконки.<br /> <br /> Для примера, набор иконок для работы с базой данных:<br /> <br /> <br /> На первый взгляд все вполне понятно.<br /> <br /> Но, если в приложении все действия происходят только с базой данных, то мы можем убрать незначимую часть (само изображение базы данных):<br /> <br /> <br /> Смысл совершенно не потерян, но значки стали более различимыми и понятными.<br /> <br /> Вот реальный пример использования лишних элементов в иконках:<br /> <br /> Нет стилевого единства набора<br /> Факторами, которые могут объединить иконки в набор, являются цветовая гамма, размер иконок, техника рисования или же комбинация подобных свойств. Дизайнер может держать качества, объединяющие иконки в набор в голове, но, если же иконок много и над ними работают разные дизайнеры, создаются специальные инструкции. Придерживайтесь единого стилевого набора, если хотите создать удачный набор иконок для своего проекта, будь он программой или сайтом.<br /> <br /> <br /> Буйство стилей из Windows XP. Такого быть не должно!<br /> <br /> Ненужная перспектива и тени в мелких иконках<br /> В интерфейсах появилась возможность полупрозрачности, пропали ограничения на количество цветов, стала популярна трехмерность в иконках. <br /> <br /> Возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):<br /> <br /> <br /> А вот такой же менеджер приложений в Windows XP:<br /> <br /> <br /> Иконке в Windows XP по стандарту положена двух пиксельная тень. В размере 16х16 тень получается слишком большой и не аккуратной. <br /> <br /> Слишком оригинальные метафоры<br /> Что будет изображено на иконке — это всегда выбор между узнаваемостью и оригинальностью идеи. Перед тем, как придумать идею для вашей иконки, желательно посмотреть, как сделали это в других приложениях. Вполне возможно, что лучшей идеей станет не придумывание чего-то оригинального, а простое копирование идеи, с изменённым дизайном.<br /> <br /> Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая является не корзина, а шредером (оригинально, но неудачно).<br /> <br /> <br /> <br /> Нет учета национальных и социальных особенностей<br /> Необходимо всегда учитывать, кто и в каких условиях будет пользоваться вашей иконкой. Важным аспектом являются национальные особенности. Культурные традиции, окружающие объекты, жесты — всё это может очень сильно отличаться в другой стране.<br /> <br /> Предположим, нам нужно нарисовать иконку приложения для работы с электронной почтой. Логично использовать метафоры реальной бумажной почты. Например, почтовый ящик.<br /> <br /> Ответ можно найти в руководстве по созданию иконок для Mac OS X: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.<br /> <br /> Однако, нужно учитывать не только национальные особенности. Можно вспомнить небольшой курьезный случай: была разработана иконка фильтра данных, идеей для которого стала обычная воронка:<br /> <br /> Ответ клиента был таков: «Мне не понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».<br /> <br /> Изображения элементов интерфейса в иконках<br /> Руководство по созданию иконок для Mac OS X предостерегает нас: не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:<br /> <br /> <br /> Или вот интересный пример из интерфейса браузера OmniWeb:<br /> <br /> <br /> Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!<br /> <br /> Текст внутри иконок<br /> Это нельзя с полной уверенностью назвать ошибкой, потому что существует огромное количество наборов, где текст смотриться наредкость удачно. <br /> <br /> Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.<br /> <br /> <br /> Мимо пикселей<br /> Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.<br /> <br /> <br /> Остаётся только пожелать учитывать все возможные ошибка в создании иконок для сайта. Многие, конечно, сочтут нужным вложить свои "пять копеек" в этот список, но самые часто встречаемые недочёты (скажет так) мы уже разобрали. Удачи...

Версия для печати