Кнопки в программе как правильно называется

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

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

Определение

• Для начала обратимся к большому толковому словарю. Слово «кнопка» там во втором значении объясняется так:

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

• В этом же словаре второе значение слова «клавиша» объясняется как:

Наконечник рычажка в разного рода механизмах (пишущей машинке, телефонном аппарате и т.п.), приводимый в движение пальцами рук. Нажать клавишу приёмника. Стучать по клавишам машинки.

2. Основные клавиши на клавиатуре | PCprostoTV

Клавиши клавиатуры

Клавиша — термин, появившийся вначале в музыкальной сфере. Поэтому в словарях одно из первых значений слово «клавиша» имеет именно музыкальное.

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

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

Однако, в целом принцип компьютерных клавиш похож на обычные кнопки. Но в обиходе все привыкли их называть клавиши.

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

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

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

Источник: dzen.ru

5.2. Кнопки

Кнопки — это элементы интерфейса, которые служат для инициирования каких-либо действий или для изменения свойств объектов. Существует три основных типа кнопок: кнопки управления (CommandButtons), кнопки установки парамет­ров (Option Buttons, Radio buttons), или переключатели, и кнопки независимого выбора, или флажки (Check boxes).

5.2.1. Кнопки управления

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

Знакомство с клавиатурой. Лучшее в мире объяснение

Рис. 5.10. Примеры реализации кнопок

Когда пользователь выбирает кнопку с помощью мыши (щелкает на ней Л КМ), выполняется команда, связанная с кнопкой. Если пользователь нажимает кнопку мыши (не отпуская ее), фокус ввода переходит на кнопку; при этом изменяется состояние кнопки (она отображается как «нажатая»). При перемещении указателя за пределы кнопки она возвращается в свое исходное состояние. Перемещение ука­зателя обратно на кнопку вновь переводит ее в «нажатое» состояние.

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

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

Результат команды, выполняемой при «нажатии» кнопки, проявляется немед­ленно и непосредственно влияет на текущую ситуацию. Например, при «нажатии» кнопки, расположенной на панели инструментов приложения, тут же выполняется

связанное с ней действие; «нажатие» кнопки, отображенной во вторичном окне, обеспечивает прием вводимых данных и, возможно, закрытие окна.

Как было указано выше, кнопка управления снабжается меткой, обозначающей связанное с ней действие. Если в качестве метки используется текст, то он должен отвечать тем же требованиям, которые были рассмотрены ранее применительно к пунктам меню. Если в какой-либо ситуации связанная с кнопкой команда является недоступной, то это должно быть отображено визуально (как правило, в этом слу­чае обесцвечивается метка кнопки). •

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

Кнопки могут также использоваться для расширения вторичного окна с цел ыо отображения в нем дополнительных параметров; такие кнопки называются кнопка­ми развертывания и представляют собой частный случай применения кнопок для выполнения специфической функции. Если кнопка используется с указанно]! це­лью, ее метка должна содержать пару символов » (рис. 5.11).

Рис. 5.11. Пример использования кнопки развертывания

В некоторых случаях кнопка может представлять объект и связанное с ним по умолчанию действие. Например, кнопки входа, отображаемые на Панели задач, представляют первичные окна объектов и команду Восстановить. Когда пользова­тель щелкает на такой кнопке Л КМ, для выбранного объекта выполняется указан-

ная команда; щелчок на кнопке Входа 11 КМ приводит к появлению всплывающего меню для соответствующего объекта.

Кроме того, кнопки могут также использоваться для выбора режима работы или значения некоторой величины; в этом случае их применение аналогично примене­нию кнопок двух других типов — переключателей и флажков. Если кнопка исполь­зуется подобным образом, то для визуального представления состояния выбранной кнопки применяется изображение, несколько отличающееся от стандартного изоб­ражения «нажатой» кнопки. Изображения кнопок, рекомендуемые для визуально­го представления их возможных состояний, приведены в табл. 5.5.

Та6.1 и на 5.5. Рекомендуемые изображения кнопок

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

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

Кнопка меню поддерживает тот же тип взаимодействия, что и выпадающее меню: меню отображается при нажатии кнопки; выбор пункта меню осуществляется по­средством перемещения указателя по панели меню. I [одобно любому другому меню,

Dialog Box. J% Рис. 5.12. Кнопка меню

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

Щелчок ЛКМ за пределами меню или повторное нажатие кнопки приводит к накрытию панели меню.

Источник: studfile.net

Все, что вам нужно знать о дизайне кнопок в интерфейсе

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

«Вы нажимаете кнопку, а мы делаем все остальное», – так, посредством броского и четкого слогана, Kodak обратились к потенциальным покупателям своих фотоаппаратов.

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

Кнопки vs Ссылки

• Ссылки используются при переходе в другое место, например: страница «просмотреть все», страница профиля и т. д.
• Кнопки используются при выполнении действия, например: «отправить», «объединить», «создать новый», «загрузить» и т. д.

Состояние кнопки сообщает ее статус пользователю

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

Normal — сообщает, что компонент интерактивен и включен.

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

Hover — сообщает, когда пользователь навел курсор на интерактивный элемент.

Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.

Progress/Loading — используется, когда действие не выполняется немедленно и сообщает, что компонент находится в процессе завершения действия.

Disabled — сообщает, что компонент в настоящее время не является интерактивным, но может быть включен в будущем.

Кнопки бывают разных цветов, форм и размеров

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

Стили сообщают о важности действия

Стили в основном используются для отличия более важных действий от менее важных. Создайте иерархию действий, которая будет направлять пользователя там, где есть множество вариантов. Обычно у вас может быть одна заметная кнопка (этот стиль часто называется «основной»), несколько средних «второстепенных» и слабо заметных «третичных» действий.

Иногда нет кнопки «по умолчанию»

Как правило, вы хотите сделать кнопкой «по умолчанию» (использовать основные стили) наиболее часто выбираемую кнопку, и перевести ее в сфокусированное состояние. Это поможет большинству пользователей быстрее выполнять свои задачи и направит их в правильном направлении.

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

Не заставляйте меня думать

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

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

Согласованность повышает скорость и точность

«Согласованность – это один из самых мощных принципов юзабилити: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдет»

— Якоб Нильсен

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

Сделайте кнопки достаточно большими для надежного взаимодействия

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

Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.

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

Проектируйте для доступности

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

Дизайнеры должны тесно сотрудничать с командами разработчиков, чтобы убедиться, что кнопки работают с программами чтения с экрана. Роль кнопки должна использоваться для кликабельных элементов, которые запускают ответ при активации пользователем. Добавление role=”button” приведет к тому, что элемент отобразится для программы чтения с экрана, как элемент управления кнопками.

Жесты становятся достаточно широко распространенными

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

Хорошая метка кнопки приглашает пользователей действовать

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

Хорошая метка кнопки приглашает пользователей действовать. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Вы хотите (добавить в корзину)?» или «Хотите (подтвердить заказ)?».

Избегайте использования «Да», «Нет» или слишком общих меток, таких как «Отправить».

Ok/Cancel или Cancel/Ok? Оба варианта хороши

Оба варианта – идентичны, и дизайнеры могут часами спорить о своих предпочтениях.

• Размещая на первом месте действие OK, вы поддерживаете естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК на первое место.
• Размещая кнопку OK в конце, вы улучшаете юзерфлоу. Кто-то может поспорить, что OK, как кнопка «Следующий», переместит пользователя вперед. Если поставите OK в конце, вы поможете пользователям оценить все варианты, прежде чем предпринимать действия, и поможете избежать ошибок и поспешных решений. Apple ставит ОК на последнее место

Любой из вариантов имеет аргументы в свою пользу, и ни один из этих вариантов не приведет к катастрофическим последствиям для юзабилити. Я в основном ставлю ОК в списке действий на последнее место. Например, в диалоговом окне (возможно, потому что я преимущественно использую Mac).

Отключенные кнопки — отстой

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

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

О каких компонентах вы хотели бы узнать в следующей статье? Дайте знать в комментариях.

Источник: ux.pub