Красная кнопка
 | TV Tropes Для англоязычных и желающих ещё глубже ознакомиться с темой в проекте TV Tropes есть статья Big Red Button. Вы также можете помочь нашему проекту и перенести ценную информацию оттуда в эту статью. |
 | Вкратце В реальности — кнопка аварийной остановки. По законам жанра — кнопка самоуничтожения. |
| « | — Кто бросил валенок на пульт?! | » |
| — Мордобойная фраза анекдота про красную кнопку. | ||
| « | Я не буду применять механизмы самоуничтожения без самой крайней необходимости. Если она возникнет, это не будет большая красная кнопка с надписью «Опасно! Не нажимать». Большая красная кнопка с надписью «Опасно! Не нажимать» вызовет ураганный пулеметный огонь на того идиота, который её нажмет. | » |
| — Правила злого властелина | ||
Красная кнопка — контроллер, активирующий что-нибудь очень мощное и обычно чрезвычайно разрушительное. Это — кнопка на крайний случай, и лишь в минуту отчаяния, когда ничего больше не остаётся, кто-то уполномоченный нажимает её. Иногда её также нажимают из любопытства и невозможности удержать себя от соблазна. Обычно красная кнопка находится в самом центре пульта управления, так что избежать соблазна действительно очень трудно.
В игровом кино и в мультфильмах красная кнопка — порой единственный контроллер, различимый зрителем. Вокруг может быть множество мелких кнопочек и рычагов неизвестного назначения, но красная кнопка будет гордо возвышаться над ними, привлекая внимание. Красная надпись крупными буквами, гласящая «НЕ НАЖИМАТЬ!», обычно делает её ещё более заметной и ещё более привлекательной и манящей.
Впрочем, если надпись отсутствует, менее красной и большой кнопка не становится. Наоборот, появляется некоторый элемент таинственности, и кто-нибудь обязательно захочет проверить, что же эта кнопка делает, тем более, что никаких предостерегающих надписей нет.
Все концовки: Please, Don’t Touch Anything
Концовки в моём руководстве идут в порядке возрастания, в зависимости от их местонахождения на основной игровой панели загадочной машины. Хочу отметить один нюанс — при взятии любой концовки игра блокируется, то есть невозможно получить две за раз / продолжить использовать машину, пока не нажмёте рычаг сброса.
Просто ничего не делайте. Выслушайте вашего коллегу, который хочет отлучиться по зову природы, а затем подождите его возвращения. Где-то через минуту вы снова встретитесь и отправитесь домой. Это и есть первая концовка. В качестве награды вы получите постер Будды, что является отсылкой к ‘терпению’.
Жмите красную кнопку до тех пор, пока машина не сломается (экран погаснет). Нужно около 30-и кликов. Игнорируйте все открывающиеся секции. В качестве награды вы получите некое удостоверение (видимо, вы теперь эксперт по нажатию одной кнопки).
Нажмите красную кнопку один раз, чтобы появился красный тумблер. Поверните его, после чего нажмите красную кнопку ещё один раз. Так вы запустите обратный отсчёт, который приведёт к ядерному взрыву города на экране монитора. В награду получите постер гриба с надписью «Я люблю грибы» — явная отсылка к внешнему виду ядерного взрыва в форме гриба.
Откройте римскую панель: нажимайте красную кнопку, пока не появится римская панель (там есть три римских цифры I,II и III). Подсказку к верному коду можно увидеть вырезанной на краю инструкции. В какую бы вы сторону его не прочли, выйдет 132231. Введите код и получите доступ к панели рычага, после чего поверните рычаг влево.
Появится телефонная панель, на которой нужно ввести четырехзначный код из инструкции. Там есть сложная математическая формула, которую совершенно не нужно решать. Нас интересует лишь верхняя её часть, а точнее ‘8x+3y+67’. Игнорируя буквы, мы получаем набор цифр 8367, который и нужно ввести в телефон.
Далее нас интересует панель ‘морского боя’, на которой нужно изобразить пентаграмму дьявола, которая нарисована на дощечке с инструкцией. Соответственно, делаем пять нажатий в форме звезды.
Изображение города сменяется страшным лицом, а в награду мы получаем значок пентаграммы с черепом.
Нажимайте на красную кнопку, пока не появится молоток в левой секции стола. Возьмите его и перетяните на экран монитора, что приведёт к повреждению стекла. Внутри монитора находится вопросительный знак, который нужно кликнуть. После этого начнётся тряска и появится загадочная пирамида с глазом посередине. По краям пирамиды есть четыре иероглифа, которые пригодятся в будущем. Также пирамида нарочно выбросит ваз из игры, так что придётся заходить заново. Когда вернётесь, обнаружите очередной постер на стене — с надписью «Истинно?» под изображением пирамиды. Это отсылка к таинственному обществу Иллюминатов.
Получите доступ к телефону и введите цифры из нижней части формулы с дощечки инструкций: 8232. Откроется панель ‘назад в будущее’, являющаяся отсылкой к одноименному фильму. Там два путешественника во времени активно использовали дивную машину, вводя данные пункта назначения в похожее устройство.
Проделайте абсолютно то же самое, что и концовке 6, только на раздорожье сверните направо, чтобы переместиться в будущее (год 24.10.2077). В награду получите второй кусочек постера, а на экране монитора машины высветится тот же город, но в далёком будущем, в момент лунного катаклизма. Теперь вы можете увидеть, что постер показывает нам Марти и Дока около Делориана (жаргон из Назад в будущее). Точка, в которую вы прибыли также соответствует катаклизму, описанному в игре Fallout. Последними словами умирающего были: «не повторите наших ошибок».
Жмите красную кнопку, пока справа от машины не появится отвёртка, затем с её помощью выкрутите винты из правой завинченной панели. Вы увидите четыре цветных индикатора. Код к ним довольно прост — отыскать его легко, если знаете, как произносятся цвета на английском языке. Посмотрев на надпись с инструкциями, а точнее на пункт второй, вы заметите орфографическую ошибку, оставленную намеренно. Там сказано ‘GRBB’, вместо слова ‘Grab’ (от англ. возьмите). Если соотнести каждую букву цвету, то выйдет Green Red Blue Blue (зелёный, красный, синий, синий). Введите данную комбинацию. Город на мониторе перевернётся вверх тормашками, что является отсылкой к понятию ‘Инь Янь’ (у всего есть своя противоположная сторона). Также вы получите постер в форме символа ‘Инь Янь’.
С телефона введите цифры 8367, чтобы получить доступ к четырёхциферной нижней панели. Посмотрите на инструкцию, где легко можно заметить четыре цифры, соответствующие пунктам обязанностей работника (1243). Введите их, чтобы получить концовку, где чёрная дыра поглощает часть города и исчезает. В награду постер чёрной дыры на стене.
Нажимайте красную кнопку, пока не появится римская панель (там есть три римских цифры I,II и III). Подсказку к верному коду можно увидеть вырезанной на краю инструкции. В какую бы вы сторону его не прочли, выйдет 132231. Введите код и получите доступ к панели рычага.
Поверните рычаг вправо, чтобы высветилась панель ‘Бендера’ с двумя зелёными кнопками, соответствующими двоичному коду (единица и ноль).
Активируйте римскую панель и введите её стандартный код 132231, открывая доступ к панели ‘Don’t do it’. Взгляните на инструкцию, где указан стрелочный код. Введите его соответственно указанию (стрелки указывают на верхний ряд кнопок в последовательности ‘левая, правая, правая, левая’). Сразу же прилетит НЛО и уничтожит город. В награду постер с инопланетянином, что является отсылкой к древней игрушке Space Invaders.
Активируйте римскую панель и введите 132231. Рычаг поверните влево. Наберите на телефоне 8367. На четырехциферной панели вбейте 1211 (честно, я так и не понял, как логически дойти до этого кода, но он выводится на панели инструкций 1=11=21=1211=. ). Откроется музыкальная шкатулка, с тремя клавишами, издающими звук. Прислушайтесь к музыке на заднем плане, чтобы узнать необходимую последовательность цифер (33211123). Начнётся метеоритный дождь, который уничтожит город. В качестве награды на стене появится постер, означающий ‘Нет вредителям!’. Примечание: если музыка игры выключена в главном меню, то цифры 1211 не сработают (шкатулка не появится).
Возьмите отвёртку и перережьте провода под экраном монитора машины, что откроет широкую цифровую панель внизу. Это перенаправит вводимые в телефон данные на указанную 9-ти цифровую панель.
Соответственно, необходимо открыть римскую панель и повернуть рычаг влево. Далее, на панели ‘Don’t do it’ можно понажимать на надпись, чтобы та отскочила и приоткрыла другую надпись — ‘Pisano Leonardo’. Это имя известного математика, который разработал числа Фибоначчи. Суть их сводится к тому, что каждое следующее равняется сумме двух предыдущих. Это и есть код к 9-и цифровой панели. Используя телефон, вводим цифры 112358132 (0+0=1; 0+1=1; 1+1=2; 1+2=3; 2+3=5; 3+5=8; 5+8=13; 8+13=22 — но влезет только одна двойка). Город будет захвачен культом поклонения Ктулху, а в качестве награды получим постер с его карикатурным изображением.
Действуйте быстро, ведь на выполнение у вас будет лишь одна минута времени. Активируйте римскую панель и введите её стандартный код 132231, а на появившейся панели ‘Don’t do it’ необходимо нажать четыре зелёные кнопки в последовательности, указанной в инструкции. Там есть надпись со стрелками и перевёрнутым словом ‘Correct’ (от англ. исправлять). Если перевернуть стрелки, то они будут указывать на нижний ряд кнопок, где необходимо ввести комбинацию ‘правая, левая, левая, правая’. Это выдвинет боковой правый ящик.
Прямо на ящике нацарапана цифра 276. Соответственно, вам нужно нажать серую кнопку 276 раз, после чего кликнуть на красную (на ящике). Если успеете вовремя, активируете концовку с растением, окутывающим и разрушающим город. В награду постер с пандой с очень смазанной надписью, на которой, как лично мне кажется, написано GRBBH (Green, Red, Blue, Blue и H, которая олицетворяет равноправные стороны ‘Инь Янь’). Но куда вероятнее отсылание к WWF и надпись ‘Green’.
Возьмите молоток и хорошенько поколотите центральную красную кнопку. Активируется крайне тревожная музыка. После того, как вы окончательно сломаете кнопку, из неё вылезет кровавый эмбрион. Его нужно уничтожить как можно скорее, иначе струя крови дотечёт до кнопки рестарта, что приведёт к перезапуску машины. Чтобы выиграть в данной мини-игре, необходимо бить молотком по эмбриону. После получения повреждений эмбрион входит в состояние защищённости, а из машины вылазят кровавые наросты. Последующий урон по ‘монстру’ можно нанести лишь избавившись от всех активных наростов. Совет: лучше всего бить наросты попарно, так как один и тот же не может быть ударен часто (а лишь, навскидку, раз в секунду). В награду получите постер со странным рисунком сердца и ведущими к нему трубками. Сразу после победы вы также увидите дополнительную картинку. Возможно, это отсылка к игре The Binding Of Isaac, в которой встречается босс ‘Оно живое’ в виде кровавого эмбриона.
Выверните отвёрткой дощечку инструкций и взгляните на часы. Двое из них указывают на время 23:59. Переведите часы своего компьютера на 23:59 и дождитесь, пока засветится зеленая лампочка (это происходит, когда стрелка нижних часов останавливается на ноле). В этот момент нажмите главную красную кнопку машины, чтобы получить особую бумажку с шестью рядами точек.
Введите шесть цифер в римскую панель в соответствии с вашим набором точек на бумажке (генерируется случайным образом). На рисунке выше код такой: I,III,I,I,III,III. Исчисление идёт снизу вверх, а количество точек в горизонтальном ряду определяет точную цифру. После этого город будет атакован ионным лучом. В награду получите постер снимка из космоса, который является отсылкой к Звезде Смерти, уничтожающей целые планеты одним выстрелом.
Получите доступ к правому выдвижному ящику. На дощечке с инструкцией есть обозначение в форме пентаграммы, а на самой машине выскреблены цифры 666, что означает присутствие дьявола xD. Введите 666 в ящик и нажмите его красную кнопку, чтобы получить доступ к монитору иероглифов.
Если вспомните символы пирамиды Иллюминатов, то легко решите эту головоломку: нажмите все иероглифы, кроме указанных. Город превратится в нечто невообразимое, а ваш постер с пентаграммой черепа изменится на слегка повреждённый постер сатаны.
С помощью отвёртки открутите панель инструкций, чтобы увидеть странные часы. Также активируйте римскую панель, поверните рычаг влево, а на зелёных кнопках нижнего ряда вбейте ‘правая, левая, левая, правая’.
Указанный код нужно ввести на панели морского боя, чтобы сформировать фигуру. Буква соответствует вертикальной колонне, а цифра ряду. Первые три нам известны, остальные две лишь частично, но не трудно догадаться, что они формируют крест.
Как только правильно сделаете все пять нажатий, откроется коробочка с надписью D4, где хранится алмаз. Введите цветовую комбинацую на четырехцветной панели, чтобы открыть ‘повреждённый участок стола’, похожий на застывший песок. Комбинация такая: желтый, красный, синий, синий. Увидеть этот код можно на победном экране концовки с бомбёжкой города, потому как четыре буквы периодически покрываются рябью (YOU DROP ALL BOMB).
На телефоне наберите цифру 4020, чтобы открыть песочную зону и увидеть золотое отверстие. Вставьте туда алмаз и нажмите коричневую кнопку. Цифра 4020 получается очень хитрым способом, когда вы смотрите на панель ‘Don’t Do it’.
Вы увидите, как город поглощает огромный червь, что является отсылкой к Дюне — планете с дивными обитателями Шай-Хулуд. На стене появится соответствующий червяку постер.
Если постоянно нажимать рестарт (или же случайным образом), вы спровоцируете появление надписи ‘Awaiting Input’ на экране монитора машины. Нажмите на красную кнопку, чтобы появились ещё кнопки. Затем нажмите уже новые, которые ещё не нажимали до сих пор. Проделывайте процедуру раз за разом, пока не нажмёте их все. Высветится надпись ‘Thank you for cooperation. You got the job stanle. ‘ (Спасибо за вашу поддержку. Вы получили работу, Стэнл), а на стене появится бейджик с именем Stanley. Это отсылка к игре Stanley Parable, главным героем которой является некий работник Стэнли, который только и делает, что жмёт кнопки по указке компьютера.
В качестве награды около правой части экрана монитора машины появится значок орла из Papers, Please, который соответствует логотипу той игры. Примечание: если разрешить персоне въезд в город — ничего не произойдёт, а машина заблокируется (придётся делать рестарт).
Выполните все остальные концовки, чтобы эта аткивировалась автоматически при следующем рестарте игры. У главного героя и его коллеги завяжется разговор, в ходе которого будет раскрыта страшная тайна загадочной машины с кнопками.
После чего вы можете нажать главную красную кнопку, чтобы появилась чашка кофе. На мониторе в это время отображаются титры, пока вы наслаждаетесь ‘победой’. После очередного ресета вы заметите маленькую кнопочку внизу машины, которую можно нажать, чтобы повторно просмотреть 22 концовку. Также около неё имеется значок кофейного зёрнышка.
UX-дизайн кнопки: советы по созданию, типы и состояния
Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи
Кнопки – это самый обычный, «повседневный» элемент дизайна взаимодействия. Именно поэтому на них нужно обратить особое внимание, ведь кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие в сети и приложениях. Мы обсудим типы и состояния кнопок — эту информацию нужно знать, чтобы создавать эффективные кнопки и совершенствовать опыт пользователя.
Советы по созданию кнопок
Кнопки должны выглядеть как кнопки
Давайте на минуту представим, как с помощью дизайна донести возможность выбора. Как пользователь поймет, что данный элемент и есть кнопка? Он ориентируется на цвет и форму.
Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.
Расположение и порядок
Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.
Не забывайте о порядке размещения и положении кнопок. Порядок, в котором идут кнопки, особенно если есть парные кнопки (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что основной акцент в дизайне сделан на основном или самом важном действии пользователя.
В примере ниже мы используем красную кнопку, которая содержит потенциально деструктивное действие. Обратите внимание, что основное действие не только более насыщенное по цвету и контрасту, но располагается в правой части диалогового окна.
Надписи
Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.
Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?
Призыв к действию (CTA)
Самые важные кнопки (особенно, если они призывают к действию) должны выглядеть как самые важные кнопки.
Форма кнопки
Обычно кнопки стараются сделать прямоугольными с прямыми или округлыми краями, в зависимости от стиля сайта или приложения. Согласно некоторым исследованиям, округленные края усиливают восприятие информации и притягивают взгляд к центру элемента.
Можно проявить творчество и использовать другие формы, например, круг, треугольник и даже какие-то оригинальные и необычные формы. Хотя последний вариант все же рискованный.
Главное, соблюдайте единство стиля во всем интерфейсе, чтобы пользователь смог определить, где в вашем приложении находятся кнопки.
Типы кнопок и поведение
Объемная кнопка обычно прямоугольная с подъемом (градация оттенков показывает, что кнопка кликабельна). Объемные кнопки добавляют фактуру в преимущественно плоский макет. Они делают акцент на функциях в самых активных или широких областях.
Применение
На строке в один ряд. Используйте объемные кнопки, чтобы придать значимость действиям на сайте или в приложении с большим количеством разного контента.
Поведение
Объемные кнопки приподнимаются и заполняются цветом при нажатии.
Пример
Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.
Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.
Применение
В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)
На панели инструментов
Расположение снизу, чтобы пользователь быстрее их нашел
Пример
Плоская кнопка в диалоговом окне приложения на Android.
Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.
Почти все переключатели применяются в качестве кнопок Вкл\Выкл.
Кнопки-переключатели также можно использовать для группы связанных между собой элементов. Но компоновка макета должна явно указывать, что эти кнопки являются частью всей группы элементов. Есть и другие требования:
· В группе должно быть не менее трех кнопок
· На кнопках должен быть текст, иконка или и то, и другое.
Иконки лучше всего использовать, когда пользователь может сделать выбор и отменить его, других вариантов нет. Например, дать или убрать звезду у товара. Размещают иконки обычно в панели приложения, панели инструментов, на кнопках действия или переключателях.
Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».
В Apple iOS переключатели использованы в разделе «Настройки».
4. Контурные кнопки
Контурные кнопки — это прозрачные кнопки простой формы, как правило, прямоугольной. Обычно по контуру кнопки идет очень тонкая линия, а внутренняя часть содержит обычный текст.
Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.
Лучше всего использовать такие кнопки для вторичного контента, так как они не будут (по крайней мере, не должны) конкурировать с вашим основным призывом к действию. Хотелось бы, чтобы пользователь сначала увидел основную кнопку CTA, а уже затем (если для него это не актуально) переходил ко второй кнопке.
Кнопка, призывающая к положительному действию, более контрастная и пользователь четко видит действие.
На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».
5. Плавающая кнопка с выпадающим меню
Плавающая кнопка с выпадающим меню — один из элементов материального дизайна Google. Это круглая материальная кнопка, которая приподнимается и дает эффект чернильного пятна при нажатии.
Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.
Их можно сразу заметить по круглой иконке, парящей над UI. Они включают в себя такие типы поведения, как морфинг, запуск и перенос точки привязки.
Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.
Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?
Размеры: Выбирайте тип кнопки, в зависимости от контейнера, в котором она будет располагаться и от того, сколько слоев глубины у вас на экране.
Разметка: Используйте преимущественно один тип кнопки на контейнер. Смешивайте типы кнопок только в том случае, если для этого есть основания, например, выделение важной функции.
Здесь пойдет речь не о том, как пользователь видит начальную кнопку, а о тех случаях, когда при наведении указателя на нее ничего не меняется. Пользователь не сразу поймет кнопка это или нет? Теперь придется кликнуть, что бы это выяснить …
Такой объект как кнопка имеет несколько состояний, и предоставление визуального отклика с целью отобразить текущее состояние кнопки должно быть приоритетной задачей.
Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.
Состояние в фокусе
Правильно будет дать пользователю понять, что он наводит указатель на кнопку. Пользователь сразу понимает, что его действие было принято, и хочет визуального подтверждения.
Анимируя различные элементы своего дизайна, вы можете внести свежую ноту, проявить немного творчества и порадовать пользователя.
Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.
Преимущества скрытой кнопки:
Преимущества использования неактивного состояния:
Заключение
Кнопки предназначены для того, чтобы направить пользователя и подтолкнуть его к принятию интересующего вас действия. Плавное переключение способствует плавному взаимодействию; проблемы, такие как невозможность найти нужную кнопку являются в лучшем случае помехами, а в худшем – полным провалом.
UX дизайн кнопок это узнаваемость и ясность. Думайте о сайте или приложении как о беседе, начатой занятым пользователем. Кнопка играет критически важную роль в этой беседе.
