Тренды в дизайне иконок 2010

http://habrahabr.ru/company/turbomilk/blog/109511/
Автор: kortunov

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

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

Иконки перестали быть маленькими

Давным-давно иконки были очень маленькими, а пиксели очень большими. Размер 16х16 был стандартом, а иногда нужно было нарисовать иконки 12х12 или даже крохотульки 8х8 пикселей. Дизайн иконок иногда даже называли «цифровой миниатюрой». Значки 32х32 считались крупными и трудоемкими.

Теперь все изменилось — разрешение и размер экранов выросли. Разглядеть маленькие иконки очень трудно, а уж попасть в них курсором или пальцем вообще нереально (если только речь не идет о Windows Mobile и стилусе). Значки стали большими. Очень большими. Сейчас максимальный размер иконки в Mac OS X равен 512×512 px. Поначалу было непонятно — зачем такая большая картинка? Но с появлением экранов с разрешением выше 300 dpi стало ясно, что иконки такого размера нужны.

Вот такие картинки внутри иконки Dashboard из Mac OS X Snow Leopard

По сути, иконка стала иллюстрацией (иногда довольно сложной, с сюжетом и несколькими планами). В современной индустрии уже никого не заботит — попадают ли линии в пикселы. Всё чаще иконки рисуют с помощью 3d-редакторов, а иногда даже используют фотографии.

Очень высокая детализация

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

Винтажные иконки от Pixture Studio и Iconfactory

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

Иконка для мобильного приложения от студии SoftFacade

Видите крошечного черного человечка на маленьком желтом знаке пешеходного перехода?

Иконки-кнопки для touch-screen

Большое распространение получили touch-интерфейсы, в основном, это связано с появлением iPhone и iPad. Стилусы ушли в прошлое, и все нажимают на экран пальцами. Раньше не было какого-то различия между «иконкой для мышки» и «иконкой для пальца».

Иконки одинакового размера, но магическим образом значки для iOS кажутся крупнее, чем иконки для Mac OS X

Иконки для iPhone имеют форму квадрата и занимают всё отведенное им пространство. Легко догадаться, что сделано это для того, чтобы проще было попасть в них пальцем — квадрат всегда имеет большую площадь. Иконка имеет «собственное пространство», которое однозначно дает понять пользователю — нажимать сюда. Так получился новый стиль иконок, который со временем может стать стандартом для touch-screen.
Немного иной подход использовали разработчики платформы Android. Они тоже придумали свой стиль для иконок, которые нужно нажимать пальцем. Вот какие должны быть иконки приложений, согласно инструкции:

Иконки приложений Android

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

Реалистичность в моде

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

Иконки от студии Iconfactory

Иконки от студии Турбомилк

Пиктограммы актуальны и не выходят из моды

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

Пиктограммы от студии Iconwerk

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

Некоторые метафоры устарели и скоро пропадут навсегда

Самый яркий пример — это, конечно же, метафора для действия Save — дискета. Все мы уже давно перестали пользоваться дискетами, но метафора оказалась очень устойчивой. Я бегло осмотрел программы, которыми пользуюсь каждый день, и не нашел ни одного тулбара с дискеткой (Поискал внимательнее — нашел в Microsoft Office и в дебрях Adobe Creative Suite). Плюс, наши клиенты уже очень давно не просили нас нарисовать этот магнитный носитель информации.

Уверен, что скоро мы попрощаемся c CD, так как уже сейчас не так много людей пользуются компакт-дисками, особенно если это касается музыки. Новая иконка музыкального комбайна iTunes 10 — яркое тому подтверждение.

Интересно, какие метафоры пропадут в будущем? Жесткие диски, файлы, папки?

Необычный стиль всегда будет востребован

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

Дизайнер Дэвид Лэнхам из компании Iconfactory — непревзойденный мастер стилизации. Его наборы иконок очень необычны, но при этом, метафоры читаются легко.

Набор иконок Sticker

Набор иконок Somatic