Блог: статьи

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

Денис КортуновАвтор: Денис Кортунов
7 декабря 2010


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

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

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

Давным-давно иконки были очень маленькими, а пиксели очень большими. Размер 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

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

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

Комментарии

Коллеги, не забыл ли я какие-то тренды? Если вспомните — добавляйте в комменты.

Ответить @kortunov, 7 декабря 2010

Можно считать трендом иконки в стиле стикеров?

Еще можно заметить, что иконки-пиктограммы делают чуть вдавленными или приподнятыми.

Ответить my_brick, 7 декабря 2010

Спасибо за обзор, Денис!
А что же теперь надо рисовать вместо дискеты для иконки Save? Я не видел ничего кроме дискеты. Либо она, либо ничего.

Ответить @antiantianti, 7 декабря 2010

В будущем не будет функции Save! Все и всегда будет запоминаться само. И это замечательно!

Ответить @kortunov, 7 декабря 2010

А если все же нужно именно вручную сохранить? Например, в google docs все само сохраняется, но дискетка там все-таки есть.

Ответить @stenshin, 7 декабря 2010

Кнопочка с клавиатуры с буквой «S»? :-)

Ответить @nikitakozin, 7 декабря 2010

В будущем не будет клавиатур! И кнопочек!

Ответить @kortunov, 7 декабря 2010

..и букв! (в ну совсем уж далеком?)

Ответить @EvolMate, 11 декабря 2010

В будущем не будет будущего, но дискетка всё равно будет.

Ответить @vertus_design, 15 декабря 2010

в будущем не будет сайтов, мониторов….

Ответить @n_angelo, 21 января 2011

Ещё нынче не так то просто найти иконки с острыми углами – все углы обязательно сглаживаются.

Денис, как считаете, что придёт на смену дискетам? Или пункт сохранить (я тоже осмотрел программы) останется без изображения?

Ответить Andrew Gurylyov, 7 декабря 2010

Античеловеческая функция Save пропадет из интерфейсов будущего.

Ответить @kortunov, 7 декабря 2010

В чем же ее античеловечность? Я понимаю, можно сохранять всё автоматически и хранить полную историю всех правок где-нибудь в облаке, но ведь это далеко не всегда уместно.

В том же Фотошопе, скажем. Вот редактируем мы документ на сотню слоёв общим весом в 50 метров, для примера. Как без кнопки Save?

Ответить @13×666, 7 декабря 2010

А первое сохранение файла? А копии сохранение?

Ответить @vertus_design, 15 декабря 2010

ой, чуток не успел со своим вопросом. Кажется, он интересует многих.
и да, забыл, спасибо за обзор. Хорошая работа. Читать было действительно интересно.

Ответить Andrew Gurylyov, 7 декабря 2010

Денис, хорошая статья!

Я вот только вчера ломал голову, как должна выглядеть пиктограмма, которая показывает, что поле (ну или другие данные) отредактировано, но не было сохранено?

К примеру, в заголовку открытого файла в Ps, когда изображение изменено, но не сохранено, отображается звёздочка – http://cl.ly/0J0O1V071j0n0O222Q2a

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

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

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

Какую метафору использовать в этом случае?

PS: Утопия, когда не будет Save пока не наступила.

Ответить @picwork, 7 декабря 2010

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

Ответить Alexander Kamenyar, 7 декабря 2010

Все-таки, корректнее подписать под картинкой Windows Phone 7, а не Microsoft Phone 7

Ответить @sos987, 7 декабря 2010

Спасибо. Отличная статья.

Ответить Anton Gridz, 7 декабря 2010

В google reader пришло 3 раза.

Ответить http://derid.id.mail.ru/, 7 декабря 2010

У нас работают очень талантливые веб-технологи! Они еще и не такое могут!

Ответить @kortunov, 7 декабря 2010

Интерактивные иконки, как календарь на макентоше. Надеюсь иконку тунца тоже в скором сделают интерактивной

Ответить Refregerator Bronks, 7 декабря 2010

Иконку \»Save\» со временем может заменить иконка \»Выгрузить\», и возможно, со временем \»дискету\» заменит \»облако\».
Спасибо за статью. Интересно почитать.

Ответить Alexander Tkachev, 7 декабря 2010

не облако, а яблоко)

Ответить my_brick, 7 декабря 2010

И данные будут возноситься в облако! Jesus Saves!

Ответить @MFedoseev, 8 декабря 2010

Господи, спаси и СОХРАНИ!

Ответить @vertus_design, 15 декабря 2010

Отличная статья, спасибо.
реалистичные иконки + пиктограммы – ура, приложения будут все более красивыми!

Ответить Elena Orap, 7 декабря 2010

Большое спасибо за обзор!

Ответить @slayersky, 7 декабря 2010

Очень понравилась статья. спасибо!

Ответить @Kotovod, 10 декабря 2010

Два полюсных тренда – детализация вплоть до реалистичности и лаконичность вплоть до одноцветности и простых форм (дискета – квадрат с обрезанным левым углом, документ – прямоугольник с обрезанным правым углом (% ). Что дальше? Анимация и контекстное поведение в первом случае и… что же предложить для второго?

Ответить @vertus_design, 15 декабря 2010

Еще модно в иконки вставлять текстуры, шум :)
благодаря большим размером это актуально.

Ответить @ru_design, 18 февраля 2011

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

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

Connect with Facebook

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

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

Закрыть