x
 
Артём
13 ноября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Расскажите об эффектах.


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

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

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

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

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

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

Эффекты Описание Примеры Источники

Психологические

Гештальт

Близость Расположенные рядом элементы кажутся связанными
  • Связанные друг с другом поля ввода в формах отделяют дополнительным вертикальным расстоянием
  • Подзаголовки ставят ближе к последующему тексту, чем к предыдущему
  • Все примеры применения правила внутреннего и внешнего
  • Пример вреда: фотография к статье и соседний рекламный банер искажают смысл друг друга: например, реклама с «горящими скидками» рядом с новостью о сгоревшем доме
Гештальт-психология
Обрамление Элементы в общем замкнутом пространстве кажутся связанными
  • Плашки, рамки и линейки отделяют связанные элементы вёрстки от прочих
  • В модульной вёрстке модули очерчиваются краями собственных и соседних якорных объектов — иллюстраций и текста
  • Пример вреда: Псевдомодульность — случайная иллюзия объединения элементов в модуль
Схожесть Элементы со схожими признаками кажутся связанными
  • Последовательное использование жирного или курсива в тексте для выделения по конкретному признаку
  • Пример вреда: два несвязанных красных объекта вступают в случайную связь
Контраст Элемент, резко отличающийся от окружения, особенно заметен
  • Междугородние экспрессы выделены красным цветом и бросаются в глаза независимо от своего места в железнодорожном расписании
  • Если в тексте использовано слишком много шрифтов, начертаний, кеглей и цветов, все элементы начинают спорить за внимание — получается каша
Масса Массивные элементы привлекают внимание раньше прочих
  • Важную информацию выделяют крупными заголовками и контрастными плашками
  • Важные иллюстрации делают крупнее второстепенных
  • Крупные объекты — деревья, столбы, памятники, башни, небоскрёбы — служат ориентирами в навигации
  • Пример вреда: большой банер отвлекает от содержания
Контекст На восприятие объекта влияют соседние объекты или события
Эффекты контекста в распознавании двусмысленных фигур

Ожидание

Восприятие зависит от ожиданий Люди радуются, если их ожидания оказались превышены, и недовольны, если ожидания не оправдались Леонардо Ингильери, Мика Соломон. Исключителный сервис, исключительная прибыль. 2010
Ожидание — это пытка Когда люди бездействуют, их ощущение времени растягивается
  • Если повесить зеркало перед лифтом, люди будут глазеть на себя и коротать время, пока лифт едет
  • После долгого ожидания продукта люди с большей вероятностью его купят — и в случае успеха положительно вспоминают об ожидании
  • Продукт, который анонсировали, но он так и не вышел, вызывает гнев
Неизвестность удлиняет ожидание Когда люди не знают, сколько придётся ждать, их ощущение времени растягивается
  • Гостям Диснейленда сообщают примерное время ожидания в очереди к аттракционам, чтобы дать ощущение контроля. А чтобы приятно удивить, специально преувеличивают это время. Это тоже эффект — люди предсказуемо радуются, когда их ожидания превышены.
  • Индикаторы текущего этажа в лифтах делают ожидание предсказуемым.
  • Cекундомеры на светофорах — даже при длительных интервалах водители спокойны и не сигналят, пока ждут зелёного света.
Заметна длина, а не скорость очереди Длинная быстрая очередь кажется «дольше» короткой медленной
  • Диснейленд пускает очереди змейкой и кругами вокруг зданий, чтобы скрыть их настоящую длину
Плацебо Если человек верит в эффективность действия, он верит и в результат. Действие менее тягостно, чем вынужденное бездействие
  • В некоторых лифтах используется ни к чему не подключённая плацебо-кнопка «закрыть двери», при этом двери закрываются автоматически
  • На сайте «Регуляр» в форме отправки заказа используется психотерапевтическая кнопка «Сохранить», которая практически всегда в отключённом состоянии, потому что черновик сохраняется и без нажатия

Выбор и отношение

Стремление к изобилию Люди стремятся к большому выбору, он создаёт у них ощущение контроля
  • На рынке покупатели с большей охотой подходят к большим лавками с изобилием, их привлекают горы продуктов.
  • Для создания ощущения выбора в сервисе продажи авиабилетов Раз-два-трип варианты показаны «стопками». При желании пользователь «листает» предложения в стопках на второстепенных страницах.
Шина Айенгар. Когда выбор демотивирует  ПДФ
Избегание выбора Когда выбор слишком большой, люди перестают выбирать. Люди быстрее выбирают в условиях дефицита или когда выбора мало
  • Предприниматели искусственно создают ощущение дефицита, чтобы управлять потребителями: с помощью объявлений — «осталось 2 штуки», с помощью акций с ограничениями — «только до пятницы», всевозможными обратными счётчиками
  • Чтобы уменьшить число вариантов, в сервисе продажи авиабилетов «Раз-два-трип» на выдаче показаны стопки-рекомендации «самый быстрый», «самый дешёвый», «самый дешёвый прямой». На остальные стопки поделили предложения разных авиакомпаний с самым выгодными билетами сверху
  • Бесконечная простыня похожих вариантов рейсов в Экспедии дезориентирует
Социальное доказательство, или стадное чувство Люди склонны считать поведение достаточно большой группы других людей правильным
  • Хотя очередь неприятна для ожидающего, она необязательно вредна для бизнеса. Длинная очередь в ночной клуб — признак его популярности, поэтому владельцы специально ограничивают вход, чтобы привлечь ещё больше посетителей
  • Все механизмы «лайков», рейтингов и оценок используют эффект социального доказательства
Авторитет Люди доверяют мнению «вожаков» — людей, завоевавших их авторитет. Появился эволюционно среди социальных животных и людей
  • Политики стараются получить поддержку популярных актёров
  • Издатели книг публикуют положительные отзывы известных экспертов
Доверие своим Люди доверяют мнению «своих» — людей, завоевавших их авторитет. Появился эволюционно среди социальных животных и людей
  • Механизм «шаринга» и любые вирусные эффекты. Люди охотнее переходят по ссылкам от знакомых, а потом делятся ими сами, чтобы поднять собственный авторитет.
  • Пример вреда: вымогатели, пользующиеся взломанными аккаунтами, просят одолжить денег у знакомых жертвы
Шутка отменяет запрет Люди менее негативно или даже положительно относятся к запретным действиям, если они совершаются в шутку
  • В одном из номеров утончённого журнала «Афиша» на фотографиях знаменитостей в шутку появились уголки с надписями вроде «ШОК!» и «Секс-сенсация!», как в жёлтых таблоидах
  • На сайте одного из сеошников было написано: «Я мог бы написать здесь оптимизация раскрутка сайтов Яндекс SEO копирайтинг первая страница поиска, но я не стану, я за человечные интеллигентные тексты»
  • Внизу сайта детских праздников «Волшебник» сео-фразы произносятся специально нарисованным роботом
  • На Яндексе можно было управлять погодой.
  • Приём «сделать в шутку» помогает разрешить противоречие — когда действие должно быть сделано и не может быть сделано

Привычки и вознаграждение

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

Геометрические

Крыло Крыло создаёт подъёмную силу в воздухе и воде
  • Самолёты, суда на подводных крыльях
  • Крылья на носовой части корабля предотвращают удар судна об дно при спуске на воду
А. с. 441195
Конус Существует три сечения конуса плоскостью: эллипс, гипербола и парабола
  • Пластинками, нарезанными из конуса, можно контролировать точность параболического или гиперболического контура

Щётка

Контакт с поверхностью
  • Щётка хорошо прилегает к поверхностям любой формы
  • Нанесение покрытий, очистка, смазка и обработка движущихся поверхностей
  • Магнитный, электрический и акустический контакт
  • Удержание объектов разной формы и размеров, зарядом можно управлять расстоянием между щетинками для «хвата»
Площадь поверхности
  • Щётка имеет большую площадь поверхности, улучшает теплообмен
  • Поверхность охлаждения в виде торчащих штырей
Растровое тело
  • Щётка — растровое тело, может принимать и считывать форму поверхности
  • Сканирование поверхности, в том числе в игрушечных рамках-слепках
Сила трения и направление
  • Сила трения щётки зависит от угла наклона щетинок к поверхности. По шерсти легко, против — трудно
  • Лыжи, подбитые мехом, у северных народов
Защита поверхности
  • Щётка защищает поверхность механически и сохраняет тепло в неподвижной воздушной прослойке
  • Защита стенок эскалатора от обуви
  • Шуба

Спираль

Спираль Архимеда
  • Спираль Архимеда образована точкой, вращающейся вокруг центра и удаляющейся от центра пропорционально углу поворота. Расстояние между витками одинаковое
  • Спираль выглядит напряжённой и динамичной, потому что постоянно меняет изгиб, будто под действием силы (в отличие от расслабленного круга)
  • Рулон бумаги — архимедова спираль
  • Упаковка рулоном (пулемётная лента, ампулы с лекарствами, дозировка веществ на ленте)
  • Волосок баланса в часах
  • Дорожки первых пластинок (для более плотной записи)
  • Корпус-кокон, изготовленный намоткой, противостоит образованию трещин, намотка гасит трещины и порезы
  • Спиралевидный телескопический корпус из единой ленты — для сжатия деталей, изоляции, как самостоятельная конструкция
  • Прямоугольные жёсткие спирали
  • Надуваемые «языки» для вечеринок (можно представить себе и в технике для перемещения давлением)
  • Обновляемые фильтры, фотоплёнка с перемоткой
Логарифмическая спираль
  • Логарифмическая спираль образована точкой, вращающейся вокруг центра и удаляющейся от центра пропорционально e в степени угла поворота. Угол между радиусом и витком одинаковый для любого угла.
  • Логарифмическая спираль подобна сама себе, то есть все витки имеют одинаковую форму
  • Прирост радиуса на единицу длины окружности витка постоянен
  • Частный случай: золотая спираль (спираль Фибоначи), вырастает пропорционально коэффициенту золотого сечения при повороте на каждые 90°
  • Древняя и современная архитектура и искусство
  • Вращающиеся режущие кромки в форме спирали сохраняют угол резания
  • Спиралевидные шестерёнки
Винтовая линия
  • Винтовая линия образуется при наворачивании плоскости с кривой на цилиндр
  • Телефонный спиралевидный провод тянется и сохраняет форму
  • Оболочку, разрезанную по винтовой линии, легко надеть на объект
  • Игрушка-спираль «слинки», шагающая по ступенькам
  • Груз, пущенный внутри упругой пружины под углом, сам затормозится её прогибом

Лента Мёбиуса

Односторонность
  • У ленты Мёбиуса одна сторона. Площадь и длина поверхности в два раза больше плоского кольца того же радиуса. У «многогранника Мёбиуса» рабочая поверхность длиннее кольца в несколько раз по числу граней, но рост площади ограничен из-за уменьшения ширины граней многогранника. А у крестового или лепесткового элемента Мёбиуса длина и рабочая поверхность больше плоского кольца в удвоенное количество лепестков
  • Шлифовальные ленты, передаточные ремни, электропилы, фильтры. Долговечность выше, габариты меньше
  • Устройства переворота
  • Делители частоты (на поверхности образуются стоячие волны)
  • Одновременное изменение свойств внутренней и внешней поверхностей

Шар

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

Эллипс

Два фокуса
  • Свет, выпущенный в эллипсоидном зеркале из одного фокуса, соберётся во втором. Если свет не собирать, он вернётся в исходный фокус. То же поведение у звука и ультразвука
  • Эллиптические отражатели света заливают большую площадь при небольшом отверстии — второй фокус вне отражателя ведёт себя как мнимый источник света. Иногда второй фокус экранируют дополнительным рефлектором
Переменная кривизна
  • Эллипс — одно из сечений конуса. Кривизна эллипса дважды меняется от минимальной к максимальной и обратно. Эллипс имеет разную жёсткость в продольном и поперечном направлениях. Давление вращающегося эллипса на поверхность непостоянное
  • Маркеры и рапидографы с эллиптическим пером и переменной толщиной линий
  • Валик на двух эллиптических колёсиках оставляет волнообразный след
  • Сверло с эллиптическим отверстием: керн имеет диаметр малой оси эллипса, остаётся пространство для подачи охлаждающей жидкости
  • Разнообразные эксцентрики для создания вибраций
А. с 701841
Искажённый круг
  • Психологически эллипс воспринимается не как самостоятельная фигура, а искажённый круг. Эллипс — проекция круга
  • Собаку Павлова научили положительно реагировать на круг и отрицательно на эллипс. При повороте круга у собаки начиналась истерика
  • При подготовке иллюстрации в виде эллипса может быть проще сначала изобразить и изменить круглую иллюстрацию в деталях, а затем получить из неё эллипс. Круг легче трансформировать, например поворачивать — это полезно, когда нужно получить несколько кадров

Парабола

Фокус
  • Свет, приходящий в параболическое зеркало параллельно оси параболы, соберётся в её фокусе. Свет, исходящий из фокуса, направится параллельно оси параболы. То же поведение у звука, ультразвука, коронного и дугового разрядов, струй газа
  • Спутниковые антенны — параболоиды
  • Солнечные плиты для готовки
  • Рефлекторы фар, светильников и обогревателей
Параболический нагреватель
Переменная кривизна
  • Парабола — одно из сечений конуса. Кривизна параболы меняется от максимальной в вершине до нуля в бесконечности
  • Воронка в жидкости имеет форму параболы (а при увеличении скорости переходит в гиперболу)
  • Переход между прямолинейными и круговыми участками железной дороги имеет форму параболы для плавного нарастания центробежной силы
  • Жидкие телескопы
Телескопы с жидкими линзами: как это работает
Большая площадь
  • Площадь параболы гораздо больше площади её поперечного сечения
  • Компактные параболические мешалки для жидкости — жидкость принимает форму параболы, площадь поверхности становится максимальной

Гипербола

Прямые образующие
  • Гипербола — одно из сечений конуса. Гипербола порождает два тела вращения — однополостный и двухполостный гиперболоид. Оба этих тела, наряду с конусом и цилиндром, могут быть получены скольжением прямой линии — на этом эффекте построена конструкция радиобашни Шухова
  • Если соединить образующие шарнирно, то гиперболоид может менять боковой профиль вплоть до цилиндра раскручиванием
  • «…Ажурная башня, характеризующаяся тем, что остов её состоит из пересекающихся между собой прямолинейных деревянных или железных труб, или угольников, расположенных по производящим тела вращения, форму которого имеет башня, склёпываемых между собою в точках пересечения и, кроме того, соединённых горизонтальными кольцами», — Привилегия России № 1896. В отличие от цилиндра, прямые образующие гиперболоида пересекаются и придают башне дополнительную жёсткость. Прямые детали легче производить и монтировать
  • Изменяемые проходные сечения при скручивании в тормозах, захватах, устройствах отжима
  • Изменяемый объём при скручивании
  • Изменяемый размер ячеек для двух гиперболоидов с противоположным наклоном, вставленных один в другой (ячейки, как в башне Шухова)

Треугольник и фигуры Рёло

Форма
  • Треугольник Рёло — равносторонний треугольник с выпуклыми сторонами (напоминает гитарный медиатор)
  • Существуют и правильные многоугольники Рёло с теми же свойствами
  • Автоматический полотёр или пылесос достанет углы
  • Треугольные и многоугольные колёса
  • Роторно-поршневые двигатели Мазды Эр-икс 8
  • Арки в готической архитектуре
  • Небоскрёб «Кёльнский треугольник»
  • Монеты в 20 и 50 пенсов имеют форму семиугольника Рёло
Колёса с углами
Постоянный диаметр
  • Внутренний диаметр треугольника Рёло постоянный, его можно измерять обычным инструментом.
  • Имеет наименьшую площадь среди фигур постоянной ширины, включая круг. Всё фигуры постоянной ширины имеют одинаковый периметр, равный πd
  • Может катиться между двумя направляющими, как обычный цилиндр
  • Благодаря постоянной ширине два треугольника Рёло плотно прилегают при вращении — возможны механически передачи
  • Сваи для слабых грунтов
  • Канализационные люки, не проваливающиеся в отверстие (как и круглые)
  • Симметричные медиаторы Гибсона — можно играть любым подвернувшимся углом
Качение по квадрату
  • Любая фигура постоянной ширины, в том числе треугольник Рёло, вписана в квадрат со стороной, равной ширине фигуры. Благодаря этому треугольник Рёло может вращаться в квадрате, постоянно касаясь его сторон
  • Сверление квадратных отверстий треугольной фрезой
  • Грейферный (хватательный) механизм для перемещения киноплёнки

В основе «Психологических эффектов» — подборка автора и указанные в таблице источники. В работе над разделом «Геометрические эффекты» использована и дополнена личными примерами книга: Игорь Викентьев, Вячеслав Ефремов. Кривая, которая всегда вывезет.

P. S. Это был понедельничный совет о решении дизайнерских задач. Хотите знать всё о дизайне продуктов, работоспособных системах, полезном действии, разрешении противоречий, законах, приёмах и формулах? Присылайте вопросы.


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

А как ты относишься с к тому, что все дизайнерские приёмы — подстройка под текущие настройки человека Расскажите об управляемости. Часть девятая Расскажите об управляемости. Часть восьмая Задумался, как сделать такие ключи, чтобы наощупь было понятно, какой от какого замка 27




Недавно всплыло

5 1 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 4