Блог: статьи
Тренды в дизайне иконок 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
Категории
- Adobe Illustrator (15)
- Adobe Photoshop (4)
- Basecamp (3)
- iPhone (2)
- Будущее (4)
- Визуальный стиль (4)
- Десктоп (2)
- Дизайн иконок (24)
- Инструментарий (14)
- Книги (3)
- Критика (6)
- Маркетинг (2)
- Мастер-класс (21)
- Обзоры (13)
- Организация работы (4)
- Основы (9)
- Проекты (11)
- Скринкасты (7)
- Турбомилк (3)
- Юзабилити (7)
- Юмор (1)
Комментарии
Коллеги, не забыл ли я какие-то тренды? Если вспомните — добавляйте в комменты.
Ответить @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. Для этого вам нужно будет авторизоваться на одном из этих сайтов, после чего вы сможете оставлять комментарии.
Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.
Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.