() translation by (you can also view the original English article)
Прошло много времени с тех пор, как я написал такую статью, но сегодня я вернулся, и я действительно думаю, что она вам понравится. Мы отложим нашу творческую основу и проведем некоторое время вместе, исследуя историю и эволюцию тех маленьких творений, которых мы любим называть «иконами».
Итак, если вы занимаетесь дизайном иконок так же, как и я (цифровой кулак, улыбаясь как сумасшедший), сделайте небольшую остановку у ближайшей кофемашины и возьмите чашку этого волшебного напитка, а затем осторожно запрыгните обратно в кресло и пусть путешествие начнется.
1. Иконки. Что, когда и почему
Ну я думаю, многие из вас уже знаю ответ, но если социальных наук класс «Методы исследования и технические приемы» ничему меня не научил, и так каждое исследование (которая эта статья очевидно), вы всегда должны начать от корневого уровня вашей концепции и затем постепенно строить свой путь вверх с помощью нескольких слоев информации.
Что
Итак, «икона» - это существительное греческого происхождения (eikόn), которое определяется согласно онлайн-словарю Merriam Webster как «обычное религиозное изображение, обычно нарисованное на маленькой деревянной панели и используемое для поклонения восточных христиан».
Теперь я думаю, что мы все можем поднять бровь и согласиться с тем, что это не совсем тот «значок», который нас интересует, поскольку на самом деле мы не занимаемся рисованием изображений, восхваляющих божественность, на дереве (или Я думаю, что большинство из нас не такие), поэтому давайте попробуем подойти к термину с более современной, технологической точки зрения.
С цифровой точки зрения, «значок» - это «графический символ на экране дисплея компьютера, который представляет объект (например, файл) или функцию (например, команду или удаление)».
Еще более проницательное объяснение можно найти в онлайн-версии Кембриджского словаря, где они определяют его как "маленькое изображение или символ на экране компьютера, на который вы указываете и нажимаете (= нажмите) мышью, чтобы дать компьютеру инструкция".
Теперь, прежде чем мы продолжим, я хотел бы отметить, что, хотя иконки изначально создавались с целью использования в (настольных) компьютерных графических интерфейсах, они быстро доказали свою полезность, пробираясь к другим устройствам с поддержкой экрана, которые приняли их из-за их простоты использования.
Когда
Первый в мире набор компьютерных иконок родился в 1981 году, когда ученый David Canfield Smith и дизайнер Norman Lloyd Cox объединили свои усилия, чтобы представить «офисную метафору» Xerox Star 8010, который был первым офисным компьютером своего времени.
Идея заключалась в том, чтобы Норман разработал набор офисных элементов, таких как документы, папки, картотеки и т. д., Которые должны были определить первый стиль значков (пиксельная графика), на котором будут основаны все остальные.
Почему
Причиной появления значков стало то, что компьютеры вышли на этап, когда им потребовался визуальный символ, способный облегчить взаимодействие между интерфейсом их программного обеспечения (графический интерфейс пользователя или графический пользовательский интерфейс) и потребностями пользователя.
Это означает, что с символической точки зрения он имеет как функцию, так и значение, поскольку должен тщательно и правильно передавать объект или действие, которые он намеревался описать, используя визуальные подсказки, которые стремятся быть самоочевидными.
Вы можете узнать больше о процессе исследования, связанном с созданием визуальных метафор такого типа, прочитав мою статью «10 лучших советов по созданию удивительных иконок», которая ответит на большинство, если не на все ваши вопросы.
2. Определение стиля (творческий)
Поскольку статья посвящена представлению и объяснению эволюции значков с визуальной точки зрения, вполне естественно, что мы потратим немного времени, чтобы точно понять, что такое «стиль», поскольку во многих случаях термин неправильно понимают.
Если мы вернемся к словарю Merriam Webster, мы увидим существительное, определенное как «особый способ или метод, с помощью которого что-то делается, создается или исполняется».
Одно определение действительно запомнилось мне, так как оно описывает термин как «отличительный вид, обычно определяемый принципами, в соответствии с которыми что-то разработано».
Соедините их вместе, и мы быстро поймем, что стиль - это, по сути, форма выражения (будь то визуальное или другого характера), основанная на сложной взаимосвязи между методами и принципами, тщательно выбранными и разработанными создателем (художником), чтобы привести свое видение в форму.
Теперь, например, стиль актера может быть легко сведен к тому, как этот человек говорит, ходит и смотрит. Певцы могут отличаться друг от друга, приняв одев какую-то одежду и более мягкий или глубокий голос.
С другой стороны, дизайнеры стремятся реализовать чувство стиля, добавляя различные визуальные характеристики на основе методов и техник, которые были разработаны в ходе длительного процесса исследования и усовершенствования, делая их своими собственными.
Теперь вот где это становится немного сложнее, так как в дизайне личный стиль можно быстро взять, имитировать и повторять, превращая его в коллективный стиль, в котором разные дизайнеры следуют одинаковым, если не одинаковым композиционным технологиям.
Это, как говорится, не индивидуальный стиль полностью чистый, так как все, что создается в основном визуальный итерации или эволюция, основанные на чужую работу.
3. Что влияет на стиль?
На данный момент нам удалось понять, что такое «стиль», но давайте пару секунд посмотрим, какие факторы могут повлиять на его развитие и эволюцию.
Как все мы знаем, для каждого вида искусства есть набор инструментов и средств, которые в конечном итоге влияют на его рост и популярность, и дизайн иконок не является исключением из этого правила.
Как дизайнеры, мы проводим наши дни, создавая цифровые продукты, предназначенные для жизни на цифровом носителе, на который влияет состояние и эволюция технологий, определяемых вычислительной мощностью и достижениями в области отображения, которые становятся доступны в течение жизни. Вот почему переход от пиктограмм к пиктограммам до полноценных скейоморфных был очень долгим, поскольку у компьютеров не было достаточной мощности для отображения количества пикселей, которая у нас есть в настоящее время.
Для дизайнеров это означает, что они всегда должны адаптироваться и полностью зависеть от среды, которая в зависимости от ее эволюционного состояния может влиять на их стиль, добавляя или удаляя творческие ограничения.
Прекрасным примером этого является VR (виртуальная реальность), где мы только начинаем делать успехи, выясняя возможности и ограничения этой новой и захватывающей среды.
В начале я пообещал, что исследование будет сфокусировано на представлении и кратком описании десяти стилей, которые привели дизайн иконок в его текущее состояние, поэтому, не теряя больше времени, сделайте еще один глоток этого горячего кофе и давайте вникнем прямо в него.
3.1 Оригинальная тройка
Мы собираемся начать, представив троицу, с которой все началось.
Пиксель Арт Иконки
Затем
Как мы видели несколько минут назад, первый в мире стиль иконок был создан и сформирован по технологии того времени, когда компьютеры работали медленно, и дизайнерам приходилось иметь дело с монохромными дисплеями.
Миссия состояла в том, чтобы использовать существующие ограничения и создавать значки, используя сложный процесс позиционирования определенного количества черных пикселей по квадратной сетке, пока символ не начал обретать форму, отсюда и название стиля.
Сам стиль можно описать только как жирный, так как он использовал жесткие, толстые, черные линии для контуров и более мягкие, более тонкие линии и детали для внутренних составляющих секций.
Лично для меня пиксельные иконки действительно впечатляют, поскольку они не только первыми открыли персональные компьютеры для потребительского рынка, но и сумели сохранить свою актуальность благодаря простоте своей природы, поскольку за 36 лет существования мало что изменилось, и, возможно, это хорошо.
Теперь
Сегодня значки пиксельной графики продолжают сохранять свою популярность, поскольку они являются мощным средством ностальгии, возвращая ощущение и внешний вид первых дней вычислительной техники, где стиль не сводился к тому, сколько деталей можно втиснуть в небольшое пространство, но как вы могли бы привлечь внимание глаз, используя как можно меньше визуальных элементов.
Изометрические Иконы
Затем
Это 1985 год, и ATARI только что выпустила TOS (Операционную систему) с запуском своего компьютера Atari 520ST, и мы впервые видим визуальную эволюцию от пиксельных иконок. Если раньше пользователю приходилось иметь дело с двумерными значками, то теперь опыт меняется в лучшую сторону с введением изометрических значков, основанных на той же «офисной метафоре», которая добавила иллюзию глубины и размерности в его GUI (Графический пользователь Интерфейс) используя третью ось.
С точки зрения стиля это не был радикальный уход. Думайте об этом больше как о визуальном улучшении, так как они все еще основывались на пикселях, но принесли некоторые тонкие изменения, такие как добавление спроектированных жестких теней и равномерной толщины линий.
Для некоторых слово «изометрический» не кажется лучшим способом обозначить стиль, поскольку по определению изометрическая проекция представляет собой «метод визуального представления трехмерных объектов в двух измерениях», в котором «три координаты Оси выглядят одинаково ракурсами, а угол между любыми двумя из них составляет 120 градусов». Лично для меня их можно рассматривать как первые попытки привнести новую перспективу в «офисную метафору», которая в конечном итоге привела к тому, что мы сейчас называем изометрическими иконками.
Теперь
Сегодня стиль претерпел радикальное отклонение от своего монохроматического пиксельного происхождения, в значительной степени опираясь на использование цветов и форм для воплощения трехмерных объектов в жизнь.
С точки зрения сложности, стиль довольно сложен в освоении, так как он требует, чтобы дизайнеры визуально переосмыслили объект, который они хотят изобразить, используя повернутый куб в качестве эталонного объекта, что не всегда легко, особенно когда вы имеете дело со странным образом фасонных объектов.
Скейоморфные иконы
Затем
Перенесемся на четыре года вперед, и, наконец, все начинает меняться с появлением компьютера рабочей станции Стива Джобса NeXT, который поставляется с ОС NeXTSTEP.
Если до этого момента значки считались простыми символами, предназначенными для облегчения взаимодействия человека и машины, Джобс поднял их на новый уровень, представив первые в истории скеоморфные значки, которые были разработаны для имитации их реальных аналогов. ,
Попрощайтесь с этими толстыми, короткими очертаниями и привет уровню мастерства, никогда ранее не встречавшемуся в графическом интерфейсе пользователя, характеризующемся использованием затенения и очень подробных иллюстраций, все втиснутых в одно и то же небольшое пространство.
Теперь
По мере того, как компьютеры становились все более мощными, а технологии экранов развивались, скейоморфизм стал скорее формой искусства, чем простым символом, подталкивая технику и воображение его создателей к точке, в которой изображенные объекты стирали грань между пикселями и реальностью.
От сложных градиентов до реалистичных текстур, бликов и теней, этот процесс может быть очень сложным, если у вас нет художественной подготовки. Если вы заинтересованы в этом стиле, вы можете начать обучение с воссоздания стилизованного значка клубники, который покажет вам все основы.
Сам стиль стал очень популярным в 2007 году с запуском iPhone от Apple, и оставался таковым до 2012 года, когда произошел переход от реалистичных иконок к минималистским.
3.2. Эволюция
На этом этапе наша временная шкала станет немного размытой тут и там, так как для некоторых из будущих стилей мы не сможем точно определить момент, когда они появились и приобрели популярность, поэтому я решил группировать и упорядочивать их на основе атрибутов, которые они воплотились и эволюционировали.
Линия иконок
Иконки линий - это прямая эволюционная ветвь оригинальных пиктограмм, являющаяся одним из популярных на сегодняшний день стилей, благодаря их способности изображать мощные изображения с использованием простых форм и контуров.
Для философии дизайна, сам стиль использует тот же принцип разделения различных составляющих частей объекта, используя жесткие, толстые линии, но он делает это, используя штрихи, а не отдельные квадраты. Это изменение техники облегчило дизайнеру создание и настройку, поскольку теперь вы имеете дело с формами и контурами, а не с отдельными пикселями.
Кроме того, стиль стал более органичным, поскольку развитие компьютерных дисплеев позволило использовать изогнутые линии и закругленные углы по сравнению со старыми временами, когда вам приходилось воплощать свои идеи в жизнь с помощью сверхострых прямоугольных форм.
Лично мне нравится стиль, так как к нему легко подойти и он становится сразу хорошим, как будто вы уже пользовались им.
Глиф Иконки
С терминологической точки зрения существительное «glyph» происходит от французского «glyphe», которое само по себе происходит от греческого «gluphē» и может быть определено как «иероглифический символ или символ». С точки зрения дизайна, «глиф» - это визуальный стиль, в котором объекты представлены в монохроматических формах, которые могут иметь тонкие пустые пространства, разделяющие их различные составляющие части.
Несмотря на простоту по своей природе, стиль может быть действительно эффективным, особенно при использовании в меньших размерах, поскольку вы можете изобразить объект, используя минималистский, но все же приемлемый результат, поэтому его можно рассматривать как предшественник плоского дизайна.
Плоские иконки
Плоские иконки как стиль стали популярными примерно в 2012 году, с запуском недавно переработанного визуального языка Microsoft, который мы знали как Metro (теперь Fluent), что стало прямым откликом на злоупотребление Apple скейоморфизмом.
Говоря языком, в философии дизайна произошел огромный сдвиг, нацеленный на четкий минималистский подход, разбив объект до его самого необходимого, удалив как можно больше деталей в процессе.
Это привело к рождению нового типа значков, которые были легко понять и использовать, с тем, что акцент был перенаправлен на тщательное использование цвета и основных геометрических фигур.
В конце концов, дизайнеры увидели потенциал плоского дизайна и начали создавать новые иконки, основанные на четких формах, без каких-либо градиентов или теней, и разработали стиль таким, какой он есть сейчас.
Материал иконки
Когда в плоском дизайне все начало меняться, в 2014 году Google решила принять это изменение и пригласила дизайнера Матиаса Дуарте (Matias Duarte), чтобы помочь создать собственный визуальный язык, который он назвал Material Design.
Теперь, если в скейоморфизме было слишком много всего, а плоский дизайн был хорошим, слишком плоский, Google позиционировал себя где-то посередине, возвращая блики и тени, но придавая им более тонкое присутствие, создавая визуальный стиль, в котором объекты складываются поверх одного другой. Они пошли еще дальше и составили довольно обширное онлайн-руководство, в котором рассказывают обо всем - от свойств материала до принципов компоновки и цветовых стилей, что позволяет легко перейти и принять стиль.
На мой взгляд, материальные иконки являются хорошим дополнением к плоскому дизайну, и пока Google есть что сказать, они будут продолжать пользоваться популярностью.
Мерные иконы
Для следующего стиля на самом деле довольно сложно надеть ярлык, поскольку он находится где-то между границами линейных и изометрических значков, заимствуя ключевые элементы из обоих.
Я чуть не сломал свой мозг, пытаясь определить его, и, наконец, пришел к выводу, что наилучшим соответствием будет размерность, поскольку процесс фокусируется на добавлении размера или глубины к иконке с горизонтальной точки зрения.
То, как это делается, состоит в том, чтобы представить как переднюю, так и одну из сторон объекта, используя прямоугольные формы для всего, что не имеет круглую или изогнутую природу. Для объектов, которые попадают во вторую категорию, они обычно представлены с использованием одной перспективы, передней, которая создает контрастный и в то же время сплоченный баланс между составляющими элемента иконы.
С точки зрения сложности, стиль довольно легко понять и освоить, если у вас есть базовое понимание перспективы, так что вы можете правильно определить и расположить детали, необходимые для передней и боковой частей.
Рукописные иконы
Этот следующий относится к своей категории, так как визуально привлекательный, как это (просто посмотрите на этих маленьких красавиц), он не так часто используется, так как большую часть времени он рассматривается как слишком «игривый». Стиль стал более популярным после ребрендинга Dropbox, который показал потенциал для создания по-настоящему уникальной личности, используя нарисованные от руки линии, которые имеют шаткую природу.
На мой взгляд, этот тип значков может оказаться более дружелюбным, поскольку отношения между ними и пользователем становятся теплее, потому что вы имеете дело с символами, которые выглядят так, как будто они были разработаны не компьютером, а скорее живым, дышащим человек.
С точки зрения сложности, стиль может быть сложным для обработки, особенно если вы не привыкли к рисованию и штриховке, что также затрудняет имитацию, поскольку вы не просто создаете фигуры, щелкая и перетаскивая прямоугольники и круги.
Анимированные значки
Наконец, у нас есть действительно уникальная порода значков, поскольку ее динамическая природа заставляет вас нажимать на них. Хотя они могут выглядеть как чисто визуальные уловки, анимированные иконки - это будущее взаимодействия, поскольку они обладают невероятной силой, когда дело доходит до увлекательного процесса между пользователем и интерфейсом.
Независимо от того, какую форму они принимают (плоская, линейная и т. д.), Анимированные значки могут принести в таблицу что-то новое и свежее благодаря их второму состоянию (при наведении) и, таким образом, удвоить информацию, доступную пользователю,тогда, когда завис, они могут принести полезные данные в считанные секунды.
В мире, где VR (виртуальная реальность) и AR (дополненная реальность) - это будущее, можно увидеть потенциал интеграции анимации в структуру иконок.
С точки зрения сложности, стиль может быть трудно освоить, так как вы не только разрабатываете их, но и тратите время, чтобы полностью воплотить их в жизнь, что может быть сложнее того, если вы не знаете точно, что вы хотите выразить через них ,
Несколько заключительных слов
Прежде чем закончить, я действительно хочу поблагодарить всех дизайнеров, которые участвовали в исследовании, и, самое главное, ToastyTech за предоставленные образы операционных систем.
При этом, я надеюсь, вам понравилось просматривать историю того, что мы называем иконами, и обнаружили что-то новое и увлекательное.
Кроме того, если вы хотите узнать больше о иконках, я настоятельно рекомендую вам ознакомиться с некоторыми из следующих статей, поскольку я уверен, что вы в конечном итоге найдете несколько свежих и полезных советов.
