Некоторые иконки – глаголы, другие – существительные
Web DesignМы видим иконки абсолютно везде – на веб-сайтах, в приложениях, в программном обеспечении. Это неотъемлемая часть элементов пользовательского интерфейса. Пользовательский интерфейс – это язык, иконография тоже. На самом деле получается, что некоторые иконки – это глаголы, а другие – существительные.
Иконография – это язык
Иконография настолько близка к нашей традиционной языковой системе, что восприятие иконографии как языка нельзя сравнивать с аналогичным восприятием дизайна пользовательского интерфейса. «Дизайн пользовательского интерфейса как язык» скорее метафора, в то время как «иконография как язык» более буквальное и конкретное понятие, поскольку в настоящее время мы работаем над созданием шрифтов для иконок также как и для текста.
На самом деле, посмотрев на первые годы человеческой истории отличить значки (или как мы их сейчас называем на сленге разработчиков – иконки) от текста невозможно, в конечном итоге они представляли собой одно то же:
Каждая иконка имеет свое значение. Но в отличие от слова, которое в большинстве случаев имеет несколько значений, иконка имеет только одно. Именно поэтому иконки становится все более популярным в дизайне пользовательского интерфейса. Пользовательский интерфейс должен быть четким и ясным, без двойного смысла и возможного разночтения, чему изначально по своей природе и соответствуют иконки.
Еще одним явным преимуществом иконок над текстом в дизайне интерфейса является их универсальность. Нам требуется перевода на другие языки, иконки понимают все.
Подобно тому, как наши родные языки развивались тысячи лет назад, иконография в настоящее время переживает тот же процесс. Постепенно язык становится богаче, становится все больше разнообразной лексики, затем появляется и система – грамматика. В настоящее время иконография находится на ранней стадии развития, когда язык только набирает силу, расширяя свой «словарный запас». The noun project проделал существенную работу в этой области, помимо всего сделав её коллективной благодаря краудсорсингу.
При поиске «меню» в The noun project мы получим несколько результатов. Эти разные интерпретации одной и той же иконки эквивалентны одному и тому же слову, «заданному» разными шрифтами:
При этом, это не означает, что слово «меню» на разных языках будет также одинаково, как раз наоборот – «菜单», «menú», «valikko». В конечном счете, иконография является (или станет) одним единственным всемирно универсальным языком, несмотря ни на какие культурные и географические различия. В этом и заключается вся красота иконографии.
Системы иконок на Android и на iOS
Системы иконок Android и iOS поделили между собой некоторые глифы, как, например, иконку гамбургера для меню:
для обозначения меню
Но у них также есть и свои специальные глифы, которых нет у других, например, иконка из трех вертикальных точек Android (в шутку называемая «меню кебаба»).
Некоторые из глифов, такие как, например, «поделиться» имеют свои собственные версии на обеих платформах:
Они настолько сильно отличаются друг от друга, что я считаю их эквивалентами одного и того же слова «поделиться», но на двух разных языках, например, на французском («partager») и на английском («share»). Некоторые слова пишутся практически одинаково («flower» и «fleur»), в то время как другие совершенно по-разному («food» и «nourriture»). Некоторые слова существуют только в одном языке, больше ни в каких других, например «Fernweh» в немецком языке означает «чувство желания находиться в другом месте». Такого слова в других языка нет.
Развитие иконографии пойдет таким же путем, как и развитие языков. Каждая система будет разрастаться все большим количеством иконок, что неизбежно разделит их на абсолютные разные группы, состоящие из уникальных иконок присущих только одной системе, иконки с одним назначением, но выглядящие по-разному, иконки похожие по общим визуальным чертам, но при этом разные, и все вместе взятое.
Иконки теперь включены в юникод
Если вы не знакомы с юникодом, – это растущая библиотека стандартных символов. Она присваивает каждому символу уникальный идентификатор и использует его на разных платформах, поэтому независимо от того, в какой стране мы находимся, используем ли мы Mac или Windows, мы все понимаем, о каком символе идет речь. В юникоде использовались только основные символы самых распространенных языков, такие как латинские символы, позже они были дополнены символами CJK (китайского, японского и корейского), и теперь все больше иконок также являются составной частью юникода, например ✏!
Когда мы отправляем смайлик с iPhone на Android – пусть телефон нашего друга, мы больше не отправляем изображение смайлика, вместо этого мы отправляем юникод U + 263A. На другом принимающем конце операционная система будет понимать этот юникод как смайлик и поставит соответствующую иконку смайлика emoji. На разных телефонах могут быть разные наборы иконок на фоне, так что наш друг может не увидеть тот же самый значок emoji, который мы отправили ему с нашего телефона, но он будет знать, что это смайлик. Это похоже на то, когда мы отправляем текст «hello!» со шрифтом Helvetica с своего iPhone, а наш друг увидит это же сообщение на своем телефоне Android, но шрифт будет Roboto.
Некоторые иконки – глаголы, другие – существительные
Если мы будем рассматривать иконографию как язык, то давайте перейдем к самой сочной части – грамматике. Хотя буква и является самой маленькой единицей в языке, иконки больше похожи на слова, нежели на буквы. Иконка имеет свой смысл, также как и слово. В некоторых случаях в дизайне пользовательского интерфейса значение иконки размещается сразу же под ней, например, на TED.com:
Некоторые иконки в данном примере – это глаголы, такие как «поставить на паузу», «добавить в избранное», «скачать». Некоторые из них спорные, они могут быть либо глаголом, либо существительным, как значок «громкость», тогда как сама «громкость» является существительным, иконка имеет базовое назначение «изменить громкость».
В этом примере используемые Google Analytics иконки являются существительными. Например,
Иконка с людьми означает аудиторию, что никак нельзя интерпретировать как глагол.
Хорошей практикой при выборе иконок является правильное использование категории грамматики иконок. Примером будет выбор иконок для кнопок с «плавающим» действием. Иконка на кнопке «плавающего» действия всегда должна быть глаголом, так как кнопка должна указывать на действие. Взглянем на следующие примеры кнопок с «плавающим» действием: все они используют иконки глаголов.
«Добавить», «очистить», «написать», «искать» – все эти иконки – глаголы, используемые на кнопках с «плавающими» действиями, чтобы предложить пользователю конкретные действия.
Однако, если мы хотим использовать иконку или иконки на вкладках + слово для отображения вкладки, иконка должна быть существительным. Google Analytics – хороший пример использования именных иконок на вкладках, а также пример ниже:
Подводя итог, некоторые иконки – глаголы, некоторые – существительные, некоторые могут быть и тем, и другим. Попробуйте использовать правильную классификацию иконок в самых прикладных местах, например, во вкладках и для кнопок с «плавающим» действием.
Что дальше?
Если мы рассматриваем иконографию как новый язык, то мы как человечество впервые будем участвовать в создании языка на таком глобальном уровне, при этом так активно. Каждый день на dribbble.com и the noun project публикуются новые иконки, то тут, то там также появляются новые сервисы, связанные с иконографией.
и кое-что совсем новое: https://nucleoapp.com/.
Конечно, еще рано громко объявлять, что то, что мы делаем – это именно создание нового языка. Большинство иконок создаются только для использования в конкретных приложениях и на отдельных веб-сайтах. Мы накапливаем «словарный» запас. Неизбежно возникнет ситуация, когда люди будут создавать две очень разные иконки с одним и тем же значением. После того, как мы накопим достаточно большой лексикон, мы начнем устранять «излишние» иконки, разделяющие одно значение. Присутствие разных стилей «отрисовки» одной и той же иконки является хорошим и крайне необходимым трендом. При этом наличие в языке двух разных иконок, имеющих общий точный смысл, будет создавать ненужный барьер для распознавания и шумы в пользовательском опыте.
Наличие этих иконок камеры в разных стилях необходимо, потому что иконка должна вписываться в визуальную систему индивидуального дизайна. Нам нужны иконки, которые можно рисовать по-разному, в стиле сплошной заливки, в стиле линии, в более сложных или более минималистических стилях, в зависимости от того, какой тип дизайна мы создаем.
две совершенно разные иконки с одним значением «поделиться»
Наличие этих двух иконок, имеющих одно значение «поделиться», не является чем-то необходимым и/или плохим. Но мы должны помнить, что когда придет то самое время Х, нам придется поработать над их устранением, чтобы создать чистую, эффективную, богатую, но при этом не избыточную языковую систему иконок.