Литературные тропы в дизайне: метафоры и их разновидности

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

В закладки
Аудио

Метафора

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

Пример метафоры на сайте «Почты России»

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

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

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

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

Источник: Free Icons

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

Метафора должна работать сама по себе. Для проверки попробуйте убрать текст и оставить одну иконку.

Иконки не учитывают контекст. Без текста ни звёздочка, ни лесенка не считываются

Иконки скутера и сумки используются в контексте. Иконки понятны и без текста

Как искать метафоры

Алена Белякова, арт-директор медиа «Батенька, да вы трансформер», рассказала БВШД, как она работает с иллюстрациями в текстах. Её принцип можно применять в любом дизайне:

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

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

Сервисы по подбору синонимов и ассоциаций:

Остальные тропы и приёмы писателей тоже могут помочь в дизайне.

Метонимия

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

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

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

Источник: dic.academic.ru

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

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

Как искать метонимию

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

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

Аллегория

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

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

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

Модель Энн Софи — главное лицо контакт-центра любой компании

Источник: Shutterstock

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

Как искать аллегории

Чтобы научиться подбирать мощные аллегории, потренируйтесь на абстрактных примерах. Виктор Меламед в лекции о визуальных метафорах давал такой текст: «Каждый день в мире исчезает по одному языку. Умирает последний носитель этого наречия, и язык перестает существовать». Ответьте на вопрос: «Язык — это что? Как можно его изобразить?».

Как дизайнеры в «Далее» работают с метафорами

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

1. Утилитарные.

Для иконки в приложении, которая имеет практическую цель, метафора должна быть прозрачной. Чтобы поменять настройки, пользователь будет искать шестерёнку, а для поиска — лупу. Такой образ должен считываться сразу, без пояснений. Если дизайнер попытается создать новый образ для поиска, он будет неочевиден для пользователя и отдалит его от цели.

2. Иллюстративные.

На странице услуги слишком прозрачная метафора граничит с дурным тоном.

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

На сайте «Сбербанка» мы использовали метафоры при создании иконок и баннеров. Для банковского перевода ассоциацией первого уровня был бы смартфон и стрелочки. У нас мешок с деньгами иллюстрирует текст, крылышки показывают движение. Деньги не просто лежат на счёте, а движутся.

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

Баннер на сайте нашего клиента ВТБ

Для баннера, который ведёт на страницу кредитов, мы выбрали метафору времени, «удачный момент» взять кредит показали через часы. Мы подразумеваем, что удачный момент не переносится, любой час может стать счастливым, и не надо откладывать что-то хорошее на потом.

Коротко

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital агентство Далее", "author_type": "self", "tags": [], "comments": 3, "likes": 29, "favorites": 59, "is_advertisement": false, "subsite_label": "design", "id": 65233, "is_wide": false, "is_ugc": true, "date": "Mon, 22 Apr 2019 11:33:28 +0300" }
{ "id": 65233, "author_id": 134321, "diff_limit": 1000, "urls": {"diff":"\/comments\/65233\/get","add":"\/comments\/65233\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/65233"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

3 комментария 3 комм.

Популярные

По порядку

2

Есть здравые мысли. Но почти все эти иконки, которые вы хвалите, мне непонятны. А пример с ВТБ вызывает только улыбку

Ответить
0

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

Ответить
0

А где в статье упоминается о "неважности контекста"?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }