Несколько похожих кнопок. Как помочь пользователям выбрать нужную?
Аудио перевод статьи
Когда пользователям нужно выбрать одну из нескольких кнопок, им приходится читать подписи и обдумывать каждое действие. Результат подобных размышлений — средняя когнитивная нагрузка. Однако, если две или более кнопки похожи, такая нагрузка резко возрастает.
Люди должны понять, чем эти кнопки отличаются друг от друга. В их голове разгораются споры о том, на какую из них следует нажать. Они колеблются, не решаются и боятся ошибиться.
Например, подписи «Отправить деньги» и «Перевести» имеют схожие значения. Обе кнопки перемещают деньги со счета пользователя, поэтому неясно, в чем разница. Нужно нечто большее, чем текстовые метки, чтобы отличить их друг от друга.
Простой способ устранить путаницу — использовать кнопки, центральным элементом которых являются иконки. Такой подход позволяет пользователям визуально различать доступные действия, когда подписи на кнопках имеют схожее значение.
Но чтобы этот подход сработал, важно выбрать иконки, которые точно отображают разницу между действиями.
Кнопка «Отправить деньги» позволяет пользователям переслать свои деньги другому человеку, а кнопка «Перевести» — перевести средства на другой банковский счет.
Поскольку первое подразумевает перемещение денег между людьми, иконка с изображением пользователя и стрелкой хорошо иллюстрирует это действие. Напротив, кнопка «Перевести» запускает перемещение денег между банками, поэтому здесь отлично подходит иконка с изображением банка.
Такие кнопки с иконками делают выбор подходящего действия менее запутанным. Однако указанный подход эффективен лишь в том случае, если вы выбираете символы, которые четко показывают, чем отличаются доступные опции. Если это не так, иконки не помогут пользователям.
Например, пользователи все равно будут сбиты с толку, если увидят на кнопках «Отправить деньги» и «Перевести» иконки со стрелками, иллюстрирующие движение средств. Они не отражают разницу между перемещениями «человек-человек» и «банк-банк».
Пользователи также могут путать кнопки «Оплатить счета» и «Пополнить счет». Последняя добавляет деньги на счет, но некоторые пользователи думают, что первая предназначена для пополнения баланса с целью последующей оплаты счетов. Не все люди обдумывают свои действия, поэтому они легко могут нажать не на ту кнопку.
Когда пользователи не вчитываются в подписи, они зачастую делают выбор, руководствуясь мышечной памятью. Если человек привык нажимать одну кнопку чаще, чем другие, он может с легкостью совершить ошибку, поскольку опции расположены рядом.
Опять же, добавление иконок, отражающих различия, предотвращает эту путаницу. На кнопке «Оплатить счета» мы видим изображение выписки по счету, а на кнопке «Пополнить счет» — значок плюса. Графическое представление обоих действий делает кнопки различимыми.
Когда на кнопке имеется только текстовая метка, мы заставляем пользователей думать, увеличивая когнитивную нагрузку. Напротив, крупные заметные иконки пропустить трудно.
Даже если люди не читают каждую подпись, они могут визуально разграничить такие кнопки, не прикладывая особых усилий.
Еще одно преимущество кнопок, центральным элементом которых являются иконки, а не текстовые метки — экономия свободного пространства по горизонтали. Дополнительное расстояние позволяет четко отделить группы однородных кнопок друг от друга.
Поскольку «Отправить деньги» и «Перевести» — однородные действия, связанные с перемещением денег, выравнивание элементов по левому краю упрощает их поиск. Аналогичным образом, «Оплатить счета» и «Пополнить счет» — действия одного порядка, к которым довольно часто прибегает каждый пользователь. Поэтому, если выровнять соответствующие кнопки по правому краю, их будет легче найти.
Кнопки с подписями эффективны, только когда их количество ограничено. Но если кнопок много, люди будут сбиты с толку, не понимая какой вариант выбрать. Когда существует риск того, что пользователи могут спутать похожие действия, иконки просто необходимы.
Иконки способны графически отобразить доступные действия, если текстовые метки не справляются с задачей. Помните о них, когда будете создавать группу кнопок в рамках своего следующего проекта.
Компьютер Иконки Кнопка, Кнопка, кнопка, бордовый png
Компьютер Иконки Кнопка, Кнопка, кнопка, бордовый pngтеги
- кнопка,
- бордовый,
- информация,
- зеленый,
- скачать,
- компьютер иконки,
- одежда,
- клип,
- круг,
- красный,
- png,
- прозрачный png,
- без фона,
- бесплатная загрузка
- Размер изображения
- 600x600px
- Размер файла
- 68.1KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Некоммерческое использование, DMCA Contact Us
org/ImageGallery» align=»middle»>
53KB
org/ImageObject»> Логотип плейлиста Spotify Streaming media, значок приложения spotify, другие, логотип png
911x930px
85.8KB
1KB
org/ImageObject»> Кнопка Красная, Кнопка, Разное, сфера png
600x600px
27.45KB
17KB
91KB
org/ImageObject»> Кнопка компьютерных значков Google Play, play, угол, текст png
980x980px
55.25KB
13KBКак создать кнопки со значками
❮ Назад Далее ❯
Узнайте, как создавать кнопки со значками с помощью CSS.
Кнопки со значками:
Кнопки со значками с текстом:
Попробуйте сами »
Шаг 1) Добавьте HTML:
Добавьте библиотеку значков, например шрифт awesome, и добавьте значки к кнопкам HTML:
Пример
Значок кнопки:
Кнопки-значки с текстом:
<кнопка> Меню
Шаг 2) Добавьте CSS:
Пример
/* Кнопки стиля */
.
btn {
background-color: DodgerBlue;
/* Синий фон */
граница: нет; /* Удалить границы */
color: white; /*
Белый текст */
отступ: 12 пикселей 16 пикселей; /* Немного заполнения */
размер шрифта: 16px; /* Установить размер шрифта */
cursor: pointer;
/* Указатель мыши при наведении */
}
/* Темный фон при наведении мыши */
.btn:hover {
background-color:
Королевский синий;
}
Попробуйте сами »
Совет: Перейдите к нашему Учебному пособию по значкам, чтобы узнать больше о значках.
Перейдите к нашему учебному пособию по кнопкам CSS, чтобы узнать больше о том, как стилизовать кнопки.
❮ Предыдущий Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
API IconButton — Материал пользовательского интерфейса
Редактировать эту страницуСправочные документы API для компонента React IconButton. Узнайте о реквизитах, CSS и других API этого экспортированного модуля.
Демонстрации
Импорт
импорт IconButton из '@mui/material/IconButton';
// или же
импортировать { IconButton } из '@mui/material'; Вы можете узнать о разнице, прочитав это руководство по минимизации размера пакета.
См. раздел документации «Значки». относительно доступных вариантов значков.
Имя компонента
Имя MuiIconButton можно использовать при предоставлении реквизитов по умолчанию или переопределений стиля в теме.
Реквизиты
Реквизиты компонента ButtonBase также доступны.
| Имя | Тип | По умолчанию | Описание | ||
|---|---|---|---|---|---|
| Дети | NODE | 017001710171017101710171017109101710171010171017101714141414141414141414141414141414141414149н. | |||
| . | |||||
| классы | объект | Переопределить или расширить стили, примененные к компоненту. Дополнительные сведения см. в разделе CSS API ниже. | |||
| цвет | «наследовать» | ‘по умолчанию’ | «первичный» | «вторичный» | ‘ошибка’ | ‘информация’ | «успех» | ‘предупреждение’ | string | ‘по умолчанию’ | Цвет компонента. | ||
| disabled | bool | false | Если | ||
| disableFocusRipple | bool | false | Если | ||
| disableRipple | bool | false | Если | ||
| край | ‘конец’ | ‘старт’ | false | false | Если задано, использует отрицательное поле, чтобы компенсировать отступы с одной стороны (это часто полезно для выравнивания левой или правой стороны значка с содержимым выше или ниже, не нарушая размер и форму границы) . | ||
| размер | «маленький» | ‘средний’ | ‘большой’ | строка | ‘средний’ | Размер компонента. | ||
| sx | Array | логический> | функция | объект | Системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS. См. страницу `sx` для более подробной информации. |
Он поддерживает как стандартные, так и пользовательские цвета темы, которые можно добавить, как показано в руководстве по настройке палитры.
ref перенаправляется в корневой элемент.
Наследство
Хотя это явно не задокументировано выше, реквизиты компонента ButtonBase также доступны в IconButton. Вы можете воспользоваться этим для нацеливания на вложенные компоненты.
CSS
| Наименование правила | Глобальный класс | Описание |
|---|---|---|
| ROOT | .MULTTONBUT-ALLYTTTONBOLTTTONBRIEL-APLIED-ALLYTTTTONBRIED-APLIED-ALLYTTTTONBRIED-APLIDELINBOLTTTONBRIED-APLIDELINBINBIRION-APLIDELINBINBINBOLTTTONBRIEL-IIC168 | |
| edgeStart | .MuiIconButton-edgeStart | Стили применяются к корневому элементу, если edge="start" . |
| edgeEnd | .MuiIconButton-edgeEnd | Стили применяются к корневому элементу, если edge="end" . |
| colorInherit | .MuiIconButton-colorInherit | Стили применяются к корневому элементу, если color="inherit" . |
| colorPrimary | . MuiIconButton-colorPrimary | Стили применяются к корневому элементу, если цвет = "основной" . |
| colorSecondary | .MuiIconButton-colorSecondary | Стили применяются к корневому элементу, если color="secondary" . |
| colorError | .MuiIconButton-colorError | Стили применяются к корневому элементу, если color="error" . |
| colorInfo | .MuiIconButton-colorInfo | Стили применяются к корневому элементу, если color="info" . |
| colorSuccess | .MuiIconButton-colorSuccess | Стили применяются к корневому элементу, если color="success" . |
| colorWarning | . Оставить комментарий
|