Pull to refresh
1145.4
Rating
VDSina.ru
Серверы в Москве и Амстердаме

Забытые корни популярных иконок

VDSina.ru corporate blogWorking with iconsInterfacesDesignHistory of IT


Популярная шутка утверждает, что наши дети воспримут 3,5-дюймовую дискету как распечатанный на 3D-принтере значок сохранения. Действительно, растёт поколение, не знающее объекта, с которого срисовали эту пиктограмму.

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

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

Медиакнопки без автора


Управление воспроизведением сегодня не вызывает вопросов: это ставшие нормой иконки проигрывания, паузы, остановки воспроизведения и перемотки. Любой может предсказать поведение плеера при нажатии на квадратик или две параллельных вертикальных линии.

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

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


Контрольная панель немецкого магнитофона AEG FT4, который производился с 1939 по 1941 год. Никаких иконок, только краткие подписи. Фотография Музея магнитной аудиозаписи в Остине, штат Техас

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


Панель управления магнитофона Ampex AG-440, модель 1967 года. Профессиональный сегмент и назначение только для внутреннего рынка США избавляли от необходимости переводить надписи. Фотография сайта Audiofanzine

Попытки создать интуитивно понятную пользователю пиктограмму приводили к результатам, непривычным для нашего взора, который воспринимает только современные стандарты.


Швейцарский магнитофон Revox F36 1962 года. Возможно, из-за двуязычности страны происхождения производитель задумался нанести на корпус графические символы, а не надписи текстом. Фотография сайта Reverb

К семидесятым глобализация и завоевание мирового рынка наконец вынудили подумать про единый стандарт. В 1973 году Международная электротехническая комиссия выпустила документ IEC 417. Стандарт фиксировал графические символы, многие из которых широко использовались и до этого.

Невозможно отследить одного гениального дизайнера, из-за которого иконки в медиаплеерах сегодня выглядят именно так. Вклад отдельных людей затерялся среди инноваций индустрии звукозаписи.

Попытки есть. Несколько сайтов ошибочно утверждают, что иконки придумал несуществующий шведский дизайнер Филип Ульссон (Philip Olsson) во время стажировки в Японии по окончании его обучения в Королевском технологическом институте. На деле это обрывок информации из «Википедии», который в 2012 году добавил викивандал под именем Phlopydisk. Судя по его аккаунтам в Сети, Филип зачем-то вставил своё имя в статью.

Треугольник воспроизведения указывает направо. Туда же движется лента при проигрывании звука. Если речь идёт про катушечный магнитофон с автореверсом, то кнопок воспроизведения иногда две. На магнитной ленте в этом случае 2 (моно) или 4 (стерео) дорожки. В дизайне укоренился лишь один вариант кнопки проигрывания: указывающая слева направо.


Продвинутый «бобинник» Pioneer RT-909 продавался уже в закат эпохи ленты, с 1978 года. Фотография Walkman Archive

Кнопка паузы похожа на символ цезуры «||», который ставят в тексте для указания паузы. Также она напоминает символ り — последний в японском слове 句切り (кугири), означающем «место для отдыха» или «знак пунктуации».

На форумах Straight Dope обнаружился анонимный пользователь, который утверждает, что в шестидесятых работал в Ampex, где сократил квадратик кнопки остановки удалением верхней и нижней грани — иначе получился бы знак равенства. Но никаких иных подтверждений этому нет.

Цвет кружка кнопки записи был продиктован традицией: красной индикацией обозначали прямой эфир.


Кнопки управления Grundig TK46, магнитофон производили с 1962 по 1964 год. Уже здесь используется красный кружок, хотя в остальном корпус обильно испещрён английскими глаголами. Модель для рынка Германии производилась с надписями на немецком. Фотография Relics & Rarities

Символы из стандарта IEC 417 (также известен как IEC 60417:1973) постепенно распространились по всему миру. На это ушло не одно десятилетие, и часто рядом соседствовали значки и буквы. Но простота значков победила.

А нарисовать интуитивные пиктограммы не так-то просто. В том же документе IEC 417 у привычных треугольников, квадрата и кружка есть аналог, который изображает действия с лентой и сами катушки. К этому аналогу прибегала, к примеру, советская техника: вместо значка 5107B на кнопке воспроизведения стоял похожий на очки 5096, вместо двух паралелльных вертикальных полосок 5111B — магическая руна 5111A и так далее.


Советский кассетный магнитофон «Квазар-303» выпускался с 1985 года, когда на Западе уже устоялись простые треугольники, квадраты и круги для пиктограмм. Фотография «Виртуального музея отечественной радиотехники XX века»

Скандинавский след


Символом ⌘ в macOS обозначают клавишу Command. Как и для многих других особенностей интерфейса Apple, история этого значка восходит к дизайнеру Сьюзен Кэр.

В августе 1983 года команда разработки программного обеспечения Apple Macintosh заметила, что нужна специальная клавиша для вызова команд из строки меню. Разработчики решили поставить иконку компании — небольшое яблочко. Так уже поступили с клавиатурой Lisa.


Клавиатура компьютера Apple Lisa. Изображение из архива Bitsavers

Рядом с каждым пунктом меню стояла комбинация клавиш для его вызова. Это означало, что экран был покрыт множеством крошечных надкушенных яблочек.

Внезапно взбунтовался руководивший работами Стив Джобс. Возможно, он увидел программу MacDraw, в которой пунктов меню было по-настоящему много. Он ворвался в здание офиса и потребовал прекратить упоминать логотип Apple всуе.

На все увещевания, что нужно показывать хоть какой-то символ, Джобс заявил: смените иконку. Поскольку это касалось и дедлайнов сборки физической клавиатуры, и сроков печати руководства пользователя, на поиски замены оставалось всего несколько дней.

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

Кэр дошла до шведского символа достопримечательности, которым помечают представляющие культурный интерес места. Этот символ появился в пятидесятых годах в Финляндии и быстро распространился по остальным странам Скандинавии.

Квадрат с петлями в разрешении 16×16 получил одобрение всего отдела. Спустя 37 лет на каждом «Маке» до сих пор есть языческий символ, который в позапрошлом тысячелетии рисовали для отпугивания злых духов.


Клавиатура Apple M0110 от оригинального Macintosh. Фотография Deksthority

Сам Джобс покинул Apple в 1985 году и основал собственную компанию NeXT Computer. На клавиатурах NeXT командная клавиша помечена зелёной надписью Command.

Уже в 1986 году в Apple IIGS на клавишу рядом к символу достопримечательности добавили логотип компании. Так сделали для сохранения совместимости с предыдущими поколениями Apple II. В 2007 году логотип компании вновь исчез. На тот момент NeXT уже как десять лет вошла в состав Apple, а Джобс вновь влиял на любые процессы.

Другой символ протонордической культуры, который жёстко обосновался на наших устройствах — это Bluetooth. Когда-то на сайте протокола даже была специальная страница, объяснявшая выбор имени и символики.



Составная руна в логотипе стандарта передачи данных по беспроводной связи комбинирует символ младшего футарка хагалаз («ᚼ») и беркану («ᛒ»). Вместе они образуют инициалы HB [Harald Blåtand] короля Дании и Норвегии Харальда I Гормссона «Синезубого», в честь которого и назвали стандарт. Как и связывающий устройства враждующих производителей протокол Bluetooth, этот правитель X века объединил соперничающие княжества Скандинавии.

А вот прозвище «Синезубый» Харальдс получил, вероятно, не за синие, а потемневшие зубы. Но логотип Bluetooth толкует цвет буквально.

Новейшие «потеряшки»


Эпоха глобального использования тач-интерфейсов предъявила новые требования. На экране крошечного смартфона и даже планшета не всегда умещаются крупные элементы управления. Ненужное приходится прятать за меню, которые вызываются нажатием на специальную иконку-гамбургер.

При всей новизне требований бума четырёхдюймовых смартфонов символ родился куда раньше, чем Джобс показал iPhone журналистам в Купертино. Как и в случае с оконными интерфейсами, иконка-гамбургер родилась в Xerox на заре персональных компьютеров.

Автор трёх полосок — Норм Кокс, один из разработчиков первого в мире графического интерфейса Xerox Star. Как рассказывает создатель элемента, в своей работе он руководствовался ограничениями дисплеев. Требовалась хорошо различимая и запоминающаяся пиктограмма, которая будет имитировать вид открываемого списка элементов. А в квадрате 16×16 пикселей с градациями серого особо не разгуляться.


Скриншот из видеоролика. Видео смонтировано в 1990 году, но дата указывает на внутреннюю демонстрацию Xerox 1981 года. Слово «гамбургер» не звучит: элемент называют «кнопкой меню»

Как признаётся Кокс, один из самых незначительных и слабо обдуманных элементов системы Star получил наибольшее наследие. На эту кнопку даже хотели поставить указывающую вниз стрелку, значок «+» или «…» — подошёл бы любой символ, означавшие «разное», «дополнительное».

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

Отследить дальнейшее распространение иконки несложно. Гамбургер появился на самих смартфонах 17 июня 2009 года в приложении голосовых заметок в iOS.



Возможный кандидат среди сторонних приложений — Tweetie, первый клиент Twitter руки известного разработчика iOS Лорена Брихтера. Tweetie вышел в 2008 году, и на тот момент Брихтер работал в Apple

Поиски гамбургера шли по пути упрощения. Facebook в 2008 году добавила иконку с сеткой квадратиков 2×3, а через год её поменяла на 3×3. В 2010 году в интерфейсе приложения девять квадратиков сменили на три полоски.


Интерфейс приложения Facebook для iOS, 2008 год

Растущий темп современности стирает историю не только у изобретения 40-летней давности. В веб-интерфейсах нет стандартизированной иконки расшарки контента, хотя кандидаты находятся. Заметное распространение получили три точки, соединённые линиями, будто иллюстрирующие граф.



Её создатель — веб-разработчик Алекс Кинг, создатель плагина ShareThis для WordPress. В ноябре 2006 года Кинг задался вопросом, нужна ли дополнению специальная иконка. 4 декабря 2006 года веб-разработчик публикует первый вариант, который затем лишь незначительно модифицирует — утолщает «рёбра графа», чтобы их было лучше видно в маленьком размере.



Кинг удачно предугадал необходимость в новом символе. К концу 2006 года Алекс открыл веб-сайт Share Icon Project, в котором призывал пользоваться этим логотипом для указания действия расшарки, и выложил архив с изображениями. Алекс объявил, что лицензирует иконку сразу под 4 свободными лицензиями: GPL, LGPL, BSD и Creative Commons Attribution 2.5.

Пиктограмма получила распространение: меньше чем через год ей начал пользоваться Google в своём интерфейсе. В сентябре 2007 года Алекс Кинг объявил, что продаёт логотипы ShareThis одноимённой компании виджетов соцсетей.

В отзеркаленном (чтобы не было претензий за торговую марку) виде иконка расшарки повсеместно встречается в мобильных приложениях и операционной системе Android. Пиктограмма из трёх соединённых точек сдаёт позиции загнутой стрелке, но всё равно остаётся одним из популярных символов, об авторстве которого мы не задумываемся.



Без истории развития стандарта логотип Ethernet понять тяжело: это какие-то квадратики, которые почему-то общаются по одному кабелю. Реальная витая пара идёт от устройства к устройству.


Порт Ethernet и его логотип

Но всё встанет на свои места, если вспомнить, что в 10BASE5, первом стандарте Ethernet, к общему коаксиальному кабелю «вампирчиками» подключались до 100 узлов.


В логотипе наверняка есть что-то от набросков автора стандарта Ethernet Роберта Меткалфа

Современный Ethernet ушёл далеко от 10-мегабитных скоростей. Мы считаем нормой гигабитное соединение с Интернетом и задумываемся о десятигигабитной локальной сети в квартире. Вряд ли кто-то вспомнит о коаксиальном кабеле, когда энтузиасты отказываются от меди в пользу оптических кабелей для организации сети в доме. Но логотип остаётся таким же.

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

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



На правах рекламы


Эпично! Мощные серверы на базе новейших процессоров AMD EPYC для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.

Tags:история ИТистория ITдизайнмагнитофоныкатушечные магнитофоныAppleBluetoothистория интерфейсовинтерфейсыиконкиистория иконокUIUXUI/UXEthernetShareThisиконка-гамбургергамбургерXeroxXerox Star
Hubs: VDSina.ru corporate blog Working with icons Interfaces Design History of IT
Total votes 77: ↑75 and ↓2 +73
Views25.3K

Comments 122

Only those users with full accounts are able to leave comments. Log in, please.

Top of the last 24 hours

Information

Founded
Location
Россия
Website
vdsina.ru
Employees
11–30 employees
Registered
Representative
Mikhail