Для чего нужны пиктограммы

Пиктограмма

Пиктогра́мма (от лат. pictus — нарисованный и греч. γράμμα — запись) — знак, отображающий важнейшие узнаваемые черты объекта, предмета или явления, на которые он указывает, чаще всего в схематическом виде.

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

Содержание

В ранних системах письменности

Изображение, используемое в качестве символа. Обычно пиктограмма соответствует некоторому объекту и используется с целью предоставления более конкретной информации, подчеркивающей его типичные черты (пример — тэртэрийские надписи).

В информатике

Значок, элемент графического интерфейса пользователя; небольшое изображение на видеоэкране, служащее для идентификации некоторого объекта: файла, программы и т. п. Выбор и активизация пиктограммы вызывает действие, связанное с выбранным объектом.

В дизайне

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

Пиктографическое письмо

Пиктографи́ческое письмо́ — вид письменности, знаки которой (пиктограммы) обозначают изображённый ими объект.

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

В настоящее время пиктографическое письмо представлено письменностью донгба (дунба), которой владеют до нескольких десятков пожилых представителей народа наси, живущего в предгорьях Тибета.

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

Основные черты пиктографического письма

1. Пиктографическое письмо воспроизводит некоторые единицы смысла — простейшие интернациональные понятия, реальные (или же прецедентные) предметы, явления, действия, значение которых передается с помощью рисунков. В силу этого надписи пиктографическим письмом могут быть поняты людьми, говорящими на разных языках, даже если пиктографические письма этих языков различны. Как пишут Р. Шор и Н. Каринский в «Литературной энциклопедии»,

Отсутствие условного и традиционного момента в пиктографии делает её знаки доступными пониманию при незнании того яз., на к-ром говорит автор пиктографии, то есть при отсутствии единства языковой культуры у «пишущего» и «читающего» пиктограмму. [1]

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

3. Пиктографическое письмо родственно системе невербальной коммуникации, однако не тождественно ей:

Некоторые факты из истории отдельных идеографических систем письма (в частности, китайского) позволяют установить важное влияние на развитие пиктограммы в идеограмму так наз. «языка жестов», применяемого у многих первобытных народов для межплеменного общения. Поскольку жест, то есть зрительный знак не графический, приобретает в этой форме общения отвлеченное значение, становится сигналом отвлеченного понятия, ясно, что здесь намечается путь для отыскания графических знаков для выражения отвлеченных значений. Графическое изображение символического жеста становится графическим изображением отвлеченного понятия, им выражаемого. [1]

См. также

Примечания

Ссылки

Полезное

Смотреть что такое «Пиктограмма» в других словарях:

пиктограмма — пиктограмма … Орфографический словарь-справочник

Пиктограмма — в информатике элемент графического интерфейса пользователя; небольшое растровое изображение на видеоэкране, служащее для идентификации некоторого объекта: файла, программы и т.п. Выбор и активизация пиктограммы вызывает действие, связанное с… … Финансовый словарь

пиктограмма — (от лат. pictus рисованный и греч. gramma запись) рисуночное письмо, используемое в психологии как методическое средство при изучении опосредствованного запоминания. П. была предложена российским психологом А.Р.Лурия в 30 х гг. и нашла широкое… … Большая психологическая энциклопедия

пиктограмма — образ, изображение, отображение, символ Словарь русских синонимов. пиктограмма сущ., кол во синонимов: 2 • иконка (7) • … Словарь синонимов

Пиктограмма — Пиктограмма: символическое изображение вида деятельности, указания действия или назначения помещения. Источник: СП 59.13330.2012. Свод правил. Доступность зданий и сооружений для маломобильных групп населения. Актуализированная редакция СНиП 35 … Официальная терминология

пиктограмма — (Pictоgram) Отдельный элемент пиктографической письменности («рисуночного письма»). Древнейшие образцы относятся к палеолиту. Изображение конкретного предмета, животного, явления природы и т.д., символизирующее некое понятие. В современной… … Шрифтовая терминология

пиктограмма — иконка значок Схематическое изображение различных предметов и явлений. Элемент графического интерфейса пользователя; небольшое изображение на видеоэкране, служащее для идентификации некоторого объекта: файла, программы и т. п. Выбор и активизация … Справочник технического переводчика

пиктограмма — ы, ж. (нем. Piktogramm … Словарь иностранных слов русского языка

ПИКТОГРАММА — (pictogram) Диаграмма, содержащая информацию количественного характера, в которой используются стилизованные рисунки людей и вещей. Число подобных отдельных рисунков представляет количество людей или предметов, о которых идет речь. Бизнес.… … Словарь бизнес-терминов

пиктограмма — ы, ж. poctogramme m. < pictus + гр. grapho пишу. Условный рисунок с изобржаением каких л. действий, событий, предметов и т. п. как древнейшая форма письменности. МАС 2. Встречаются случаи <в интернете>, когда и инициальные и ответные… … Исторический словарь галлицизмов русского языка

Источник

Что такое пиктограмма

Пиктограмма (от лат. pictus — «нарисованный» и греч. gramma — «запись», «письменный знак») — это рисунок-символ. Он изображает какое-то событие, объект или действие.

Пиктограммы использовали ещё до появления письменности, например, в Древнем Китае и Древнем Египте.

Сейчас пиктограммы используются как знаки, которые облегчают передачу информации.

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

Примеры пиктограмм

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

Зачем нужны пиктограммы?

Человеку легче понять изображение, чем текст. Поэтому у пиктограмм есть преимущества:

Пиктографическое письмо

Пиктографическое письмо (или пиктография) — это способ письма, когда вместо слов используются пиктограммы. То есть мысль передаётся с помощью изображений.

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

Методика «пиктограмма»

Это эксперимент с использованием пиктограмм, который помогает выявить, есть ли у человека психическое расстройство.

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

Но ни буквы, ни цифры записывать нельзя. Слова можно только зарисовывать.

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

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

Здоровый человек сможет подобрать изображение к слову. У человека с психическим отклонением это вызовет затруднения.

Пиктограмма в информатике

Язык информатики — это тоже универсальный язык и его используют множество людей из самых разных стран. Поэтому пиктограммы приходятся здесь как нельзя кстати.

Источник

Иконки в веб-дизайне: для чего нужны и как правильно их использовать

Зачем дизайнеры используют иконки

Если мы уберем сопутствующие изображения, скорость восприятия меняется:

Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:

С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.

Как с помощью иконок повысить конверсию сайта

Как любой контент на сайте иконки требуют продуманного подхода. При правильном использовании изображения могут стать еще одним инструментом повышения конверсии и управлением поведением покупателей. Что можно сделать для стимулирования продаж?

1. Привлечь внимание к преимуществам компании

Посещая сайты мы привыкли «прокручивать» страницы. Иконки помогают пользователю обратить внимание на важную информацию и задержаться взглядом на особенностях компании и персональных предложениях. Например, на бесплатной доставке или прилагаемых к заказу подарках.

Информация о работе магазина, условиях оплаты и доставки формирует доверие у клиента и убеждают сделать выбор в пользу этого магазина, а не его конкурента.

2. Расскажите, как сделать заказ или как работает компания

Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:

Так вы сэкономите место на сайте и клиенту не нужно будет читать полотна текста, чтобы понять как сделать заказ.

3. Расскажите о товаре с помощью изображений

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

4. Выделяйте акции и специальные предложения, а также нужные категории товаров

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

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

Какие иконки используют в дизайне

Использование самых разнообразных иконок, отличных по размеру, стилю, цвету и расположению является распространенным приемом среди дизайнеров. Обычно мы встречаем иконки на главном экране под большим слайдером, на страницах «услуги» или «контакты», в шапке сайта. Из-за такого разнообразия возникает вопрос: какие иконки лучше использовать для дизайна? Рассмотрим виды иконок и постараемся ответить на этот вопрос.

Линейные

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

Иллюстрации

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

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

Объемные

Некоторые веб-дизайнеры отходят от трендов «плоского» и минималистичного дизайна и используют вместо иконок самостоятельные изображения. Это могут быть вырезки из фотографий продукта или тематических картинок.

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

Простые элементы

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

А здесь вместо картинок использовали простой элемент галочку:

Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.

Шрифтовые иконки

Примеры использования иконок в веб-дизайне

Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.

Иконки для навигации

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

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

Информационные иконки

Иногда иконки используются, чтобы о чем-то рассказать клиенту: о продукции, компании или предоставить полезную информацию.

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

Социальные доказательства

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

Исследования агентства Wider Funnel показывают, что размещение на веб-сайтах элементов социального доказательства повышает продажи в 9 из 10 случаев. Поэтому такой прием можно считать инструментом увеличения конверсии интернет-магазинов и продающих сайтов.

Призыв к действию

Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:

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

Разделы каталогов

Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:

Таким образом каталог не превращается в простой список товаров, каждая категория выделяется из общего перечня продуктов.

Социальные кнопки

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

Фильтры

Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:

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

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

5 советов по созданию дизайна иконок

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

1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом

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

2. Дополняйте иконку текстом

Само по себе изображение несет в себе только декоративную функцию. Чтобы придать значку смысл, рассказывайте о том, что она обозначает.

3. Дизайн иконок должен быть похож между собой

Если вы используете несколько иконок одновременно, они должны быть согласованы друг с другом, чтобы не получилось так:

Иконки должны создавать стиль, а не нарушать его. В данном примере мы видим три «нарисованных» изображения и одно строгое и лаконичное. Оно выбивается из общего ряда и нарушает согласованность интерфейса.

4. Прозрачный фон облегчает восприятие

Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки кажутся одинаковыми. Сравните:

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

5. Используйте векторную графику, если это возможно

Источник

О пиктограммах в интерфейсах и не только

Как правило, в защиту пиктограмм говорит тот факт, что ее смысл очевиден и понятен для носителей разных языков. Отсюда причина частого спора о том понятен или непонятен всем пользователям какой-то символ. В общем-то этот спор занятие довольно бесполезное и отчасти повторение исторического соревнования культур при создании письменности. Иероглифы VS Алфавит. При относительно небольшом лексиконе, очевидным был факт изображения слов описывающих вещи в виде этих самих вещей. Но чем мудрёней становились понятия, тем сложнее было придумать очевидный графический образ. В итоге все сошлось к тому, что смысл не всегда очевиден, но есть логика понимания, какие-то правила считывания. И даже те же древние египтяне и современные китайцы в конце концов стали использовать иероглифы для фонетической записи слов используя их не только как символы-существительные, прилагательные и глаголы, но и слоги и просто отдельные частицы слов.

Рис.6 — В иконку без подписи пользователь будет более тщательно целиться, неосознанно воспринимая границы изображения за границы активной области.

Рис.7 — Кнопки справа нажимать удобней, видна область, можно даже тапнуть или кликнуть где-то довольно далеко от центра и быть уверенным в попадании. Но те, что слева более концептуальны. Впрочем, как показывает опыт последних лет скрытая активная область элементов вполне неплохо работает там, где нет скученности информации. Плюс облегчает в целом визуальное восприятие. Клавиатуры в мобильных интерфейсах без границ активных областей работают даже лучше. А вот в одном мессенждере кнопка «отправить» не имеет визуальной границы и так близко расположена к полю ввода сообщения, что порой у пользователя случается ситуация, в которой он не знает, попадет ли он в поле для редактуры сообщения или отправит его.

Рис.8 — Примеры того как совместно работают надпись и пиктограмма. Словами передается точный смысл, а пиктограмма способствует быстрому нахождению нужной опции.Кроме того в таком случае не требуется искать какой-то очень точный образ для иконки. Пиктограммы на геймпаде Sony Playstation. Они просто визуально разные и хорошо отличимы глазом. Хотя дизайнер, спустя годы, выдавал версию с обоснованием, но это скорее всего легенды.

Рис.9 — Геймпад для Сони Плейстейшн. Запомнить комбинацию быстрее, чем с помощью буквенных маркировок.

Иконки часто используются для акцентирования внимания. И это верное решение, но в разумных пределах. Как я писал в первых строках не надо превращать интерфейс в древнеегипетское творчество. До начала эпохи скевоморфизма и первый период его царствования, на стоках и в свободном доступе иконок было не так уж много. Некоторые 3д-дизайнеры или векторные иллюстраторы бывало специализировались исключительно на создании иконок под конкретный проект и процесс был трудоемким и уникальным. Когда человечество удовлетворило свое стремление оцифровать окружающий мир и наигралось со стеклянными и металлическими кнопками, бликами и отражениями, пиктограммы приняли свой традиционный минималистичный вид, популяризированный плоским дизайном. Технически создавать такие иконки стало проще, поисковый запрос на тему выдает массу вариантов. Отсюда засилье иконок в современном дизайне. С одной стороны тренд, с другой соблазн без особых усилий этому тренду следовать. Например, если где-то пишут адрес или номер телефона, то тут же снабжают его пиктограммой локации и телефонной трубки соответственно, чаще всего лишь по причине «а почему бы и нет». Иногда кажется, дай волю и иконка будет предварять каждое слово. Фактически пиктограммы превращаются в какие-то декоративные элементы а сайты в усыпальницы фараонов со всей своей пафосной бессмысленностью. Но в отличие от пирамид, эти сайты вряд-ли продержатся несколько тысяч лет и станут культурной ценностью.Если вы размещаете пиктограммы только для красоты, то хорошо подумайте а стоит ли? Возможно такими действиями вы лишь удешевляете вид вашего дизайна. Ведь всем ясно, что это не авторская работа а стоковые изображение по копеечной цене, а то и полученные бесплатно. Если пиктограмма не улучшает восприятие, то она не нужна. Использование пиктограмм обуславливается даже не модой, а тем, что их просто много и они дешевые.

Рис.10 — Пиктограммы не используются в меню, так как категорий слишком много, предпочтение отдано сортировке по алфавиту.Говоря о моде, стоит затронуть тему художественного исполнения пиктограмм в интерфейсах. Сейчас это преимущественно условные изображения без объема, часто выполненные в тонких линиях. Кто-то скажет, что это просто веяние моды. Но на самом деле такой вид обусловлен прежде всего техническими возможностями. Проще говоря, сейчас делают так, потому что это стало возможным, а не потому что у какого-то художника-первооткрывателя случилось озарение. И по большому счету, поговорка, что «новое это хорошо забытое старое» как нельзя кстати.Появление пиктограмм в интерфейсах фактически и было появление самого графического интерфейса. Нарисованные попиксельно графические элементы имели грубую точечную структуру. Разрешающая способность экранов не позволяла сделать детальные изображения с плавными контурами. Размер пикселя был велик относительно всей иконки. В наше время изображения стилизованные под графику той эпохи называют пиксель-артом либо как угодно с приставкой «восьмибиный».

Рис 15- Скевоморфные иконки предыдущих версий MacOs

Просматривая пиктограммы, иконки, знаки которые были 30, 50, 100 лет назад всегда можно найти какое-то повторение того, что уже было. В развитии дизайна всегда присутствует некая цикличность декад. Спустя десятилетия мы видим возвращение например музыкальных или модных предпочтений прошлых лет, но уже на базе новых технологий.

При создании образа иконки надо хорошо подумать кто является целевой аудиторией и какой уровень ее подготовки. Кому доверить обучение пользователя: обществу, рекламе, интерфейсу или предложить пользователю приобрести свой собственный опыт. Пытаться делать пиктограммы которые расскажут пользователю все о системе чревато тем, о чем предупреждает один из известных законов Мерфи «сделай понятное дураку и этим будут пользоваться только дураки». Энциклопедическое описание понятия пиктограммы использует слово «узкоспециализированное изображение». Чтобы исключить недопонимание, пиктограмму всегда можно подписать. Не стоит размещать иконки в дизайне только для украшательства. Такой дизайн все равно выглядит, как бижутерия.

Если пиктограмма совершенно не функциональна то она не нужна. Под функциональностью может быть помощь в быстром поиске нужного, привлечение внимания, форматирование и структурирование информации. Мобильные интерфейсы в силу того, что имеют довольно мало места с физической точки зрения для пользователя (диагонали экранов 5-10 дюймов) как бы намекают на использование пиктограмм, а вот веб и другие направления графического дизайна такой необходимостью вовсе не обременены, поэтому и злоупотреблять этим не стоит. В случаях когда пиктограмма выполняет роль иллюстрации, лучше и делать полноценную иллюстрацию, более детальную, чем лаконичный значок, например как это традиционно делает DropBox (Рис. 17)

Рис. 17 Пример иллюстрации с сайта Dropbox

Источник

• Популярная книга Круть доступна для чтения прямо сейчас на нашем сайте boochi.ru. Скачать книгу в формате FB2, TXT, PDF, EPUB бесплатно без регистрации. →