Тренды в дизайне иконок 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
комментарии (85)
А можете привести примеры, где в основном сейчас используются пиктограммы?
Справедливости ради: многие старшеклассники помнят и знают про дискеты. Знаю не понаслышке, что в некоторых школах на уроках информатики совсем маловесящие задания приносили на дискетах, поскольку компы были древние и дисковод на них отсутствовал как явление :) Это было в 2000х годах, так что все еще свежо в памяти — и размер дискеты, и характерный звук ее прочтения :)
А чтобы опознать дискету и таки сохранить файл такие глубокие познания и не нужны совсем.
Как вариант, использовать неустаревающую церковную метафору :)))
Особенно актуально это будет для ноутбуков и планшетов
Ну и пофиг что дискетки отмерли, и роль в интерфейсе все еще актуальна.
«Save as» и дискета прочно сидят в умах, не думаю что это нужно менять.
Радио и подкасты обзначаются часто вышкой с исхоящими от нее волнами, это не устаревшая форма передачи, но много ли людей знают, как работает радио? Что это еще за линии вокруг какой-то башни? Или это буква i? А может волшебная палочка?
Где люди видели маленький кружочек с большим треугольником, обозначающий туалет?
Где люди видели полусферический аппарат с трубкой-бананом и дисковым номеронабирателем?
Когда вы в последний раз видели в реале колокольчик, изображение которого используется для вызова диспетчера из кабины лифта?
Когда в последний раз видели бумажный конверт? Ноту? Глобус? Рупор? Песочные часы? Лупу, может быть, недавно в руках держали? Мобильник с внешней антенной? Картонную коробку из-под программного обеспечения? Может, вы недавно зубчатое колесо отверткой ковыряли?
Я вот ни разу в жизни не видел tabbed folder. Никогда! И это мне (и миллионам других!) не мешает опознавать изображение tabbed folder как директорию. Или вы и иконку папки предлагаете упразднить?
Я уже не говорю про такие абстракции, как зигзагообразная молния, концентрические дуги радио- и звуковых волн, перечеркивающий крест, остроконечные каплю воды и сердце, стрелку — их НИКТО и НИКОГДА не видел в реале. И как-то пользуются ведь? ;)
Причём верно и обратное — если на этом знаке нарисовать силуэт какого-нибудь тепловоза или электровоза — ассоциации в 90% случаев возникнут с чем угодно — колбасой, гусеницей, фаллосом, но только не с поездом. :)
К тому же, мне сложно представить как вписать «Сохранить» в 16х16 пикселей.
Неаккуратно пошутили.
Мало того, альтернатива должна быть принята всеми, и, желательно, одновременно.
Это бы сильно упростило жизнь простым пользователям, которые застали СД, но не застали дискет. А штуки вроде винчестера видели только на картинках и успешно позабыли «что это за штука».
Моё предложение по иконке сохранения, как ни странно, жирный зелёный плюсик. Т.е. «добавить к себе копию информации». При этом зелёная стрелочка вниз должна остаться с «скачать».
* и чем дискета-то не угодила?
Типа: «все отлично, можно сохранять!»
а в 5iton я использовал «галочку»:
Тоже, по-моему, вполне очевидно.
Но это если надо обязательно-критично придумать замену дискеты. Я пока ничего не могу сказать против неё
Также и с операцией сохранения. Технологии сохранения постоянно меняются и любой новый символ быстро устаревает — на смену жесткому диску неизбежно придет облако.
Идиома сама по себе отвалиться, когда надобности в ней не будет, например, когда сама операция сохранения будет полностью скрыта от пользователя (будет происходить автоматически или будет использоваться идея синхронизации) — вот тут дискета и уйдет на заслуженный покой.
За минутку кривыми руками набросал.
Она узнаваема, продолжает традиции дискеты, но перекликается и со стандартной иконкой нового документа (скошенный уголок), указывает на запись данных, и не вызывает ассоциаций со скачиванием файлов из сети.
Поругайте концепцию…
У меня первая ассоциация — какой-то график.
Смысл был в клонировании силуэта дискеты и стрелки записи на ней, но отличающейся от типичной апсайд-даун, которая привычна по торрент-клиентам.
Симкарта
График
с чего бы?
что только люди не делают, только чтобы не юзать SVG!
И тем не менее матовые андройдные мне нравятся намного больше глянцевых айфонных.
но всё же все они (ну или просто подавляющее большинство) придерживаются одного стиля.
PS: считаю, что матовость в будущем вытеснит глянец, а в очереди на вымирание считаю метафору избранного — «звезда» (чувствую, что пойдут многие на поводу у facebook)
А виндовс 2003 на сервер большинство ставит с использованием дискетки, ну не хотят интегрировать в образы драйвера.
Вот такая беспомощная фигня красуется в дефолтном наборе иконок из последней федоры. Скорее всего, дискета станет символом сохранения в отрыве от всяких метафор, вроде увеличительного стекла в поиске.
и скоро не вспомнят про дискеты.
все будут думать что это шкафчик
не знаю, может только в тоучскрин девайсах. А вообще вы правы, я не давно перешел с 16px иконок на 24 :)
Когда иконки слишком большие и на них много деталей, слишком сложно определить какая метафора скрывается за ней.
Я бы сказал «тем более, если речь идет о Windows Mobile и стилусе»
Искренне завидую китайцам. Поставил на кнопку каляку-маляку почти квадратную(!) и всем все понятно. Даже если диалекты абсолютно разные.
не совсем верно, это тренд сугубо российский вкупе с карамельностью и цветами «вырви глаз»
А если развивать дальше юзабилити и простоту, то можно вообще отказаться от кнопки сохранения. Все файлы в облаке. Всегда сохранены. Если нужно, можно в любой момент вернуться в любое временно́е состояние файла.
turbomilk.com/portfolio/icons/badges/