Иконки кнопок компьютера, файлы Закрыть Бесплатно, Разное, синий, прямоугольник png
Иконки кнопок компьютера, файлы Закрыть Бесплатно, Разное, синий, прямоугольник pngтеги
- Разное,
- синий,
- прямоугольник,
- другие,
- окно,
- электрический Синий,
- символ,
- масштабируемая векторная графика,
- openOffice Draw,
- формат изображения значка яблока,
- меню,
- строка,
- загрузка,
- World Wide Web,
- кнопка,
- значки компьютеров,
- картинки,
- файлы,
- закрыть,
- бесплатно,
- png,
- прозрачный,
- бесплатная загрузка
Об этом PNG
- Размер изображения
- 600x568px
- Размер файла
- 73.32KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Лицензия
Некоммерческое использование, DMCA Contact Us
55KB
62KB
кнопка выключения png
512x512px
14.01KB
42KB
67KB
83KB
25KBНесколько похожих кнопок. Как помочь пользователям выбрать нужную?
Аудио перевод статьи
Когда пользователям нужно выбрать одну из нескольких кнопок, им приходится читать подписи и обдумывать каждое действие. Результат подобных размышлений — средняя когнитивная нагрузка. Однако, если две или более кнопки похожи, такая нагрузка резко возрастает.
Люди должны понять, чем эти кнопки отличаются друг от друга. В их голове разгораются споры о том, на какую из них следует нажать. Они колеблются, не решаются и боятся ошибиться.
Например, подписи «Отправить деньги» и «Перевести» имеют схожие значения. Обе кнопки перемещают деньги со счета пользователя, поэтому неясно, в чем разница. Нужно нечто большее, чем текстовые метки, чтобы отличить их друг от друга.
Простой способ устранить путаницу — использовать кнопки, центральным элементом которых являются иконки. Такой подход позволяет пользователям визуально различать доступные действия, когда подписи на кнопках имеют схожее значение.
Но чтобы этот подход сработал, важно выбрать иконки, которые точно отображают разницу между действиями.
Кнопка «Отправить деньги» позволяет пользователям переслать свои деньги другому человеку, а кнопка «Перевести» — перевести средства на другой банковский счет.
Поскольку первое подразумевает перемещение денег между людьми, иконка с изображением пользователя и стрелкой хорошо иллюстрирует это действие. Напротив, кнопка «Перевести» запускает перемещение денег между банками, поэтому здесь отлично подходит иконка с изображением банка.
Такие кнопки с иконками делают выбор подходящего действия менее запутанным. Однако указанный подход эффективен лишь в том случае, если вы выбираете символы, которые четко показывают, чем отличаются доступные опции. Если это не так, иконки не помогут пользователям.
Например, пользователи все равно будут сбиты с толку, если увидят на кнопках «Отправить деньги» и «Перевести» иконки со стрелками, иллюстрирующие движение средств. Они не отражают разницу между перемещениями «человек-человек» и «банк-банк».
Пользователи также могут путать кнопки «Оплатить счета» и «Пополнить счет». Последняя добавляет деньги на счет, но некоторые пользователи думают, что первая предназначена для пополнения баланса с целью последующей оплаты счетов. Не все люди обдумывают свои действия, поэтому они легко могут нажать не на ту кнопку.
Когда пользователи не вчитываются в подписи, они зачастую делают выбор, руководствуясь мышечной памятью. Если человек привык нажимать одну кнопку чаще, чем другие, он может с легкостью совершить ошибку, поскольку опции расположены рядом.
Опять же, добавление иконок, отражающих различия, предотвращает эту путаницу. На кнопке «Оплатить счета» мы видим изображение выписки по счету, а на кнопке «Пополнить счет» — значок плюса. Графическое представление обоих действий делает кнопки различимыми.
Когда на кнопке имеется только текстовая метка, мы заставляем пользователей думать, увеличивая когнитивную нагрузку. Напротив, крупные заметные иконки пропустить трудно.
Даже если люди не читают каждую подпись, они могут визуально разграничить такие кнопки, не прикладывая особых усилий.
Еще одно преимущество кнопок, центральным элементом которых являются иконки, а не текстовые метки — экономия свободного пространства по горизонтали. Дополнительное расстояние позволяет четко отделить группы однородных кнопок друг от друга.
Поскольку «Отправить деньги» и «Перевести» — однородные действия, связанные с перемещением денег, выравнивание элементов по левому краю упрощает их поиск. Аналогичным образом, «Оплатить счета» и «Пополнить счет» — действия одного порядка, к которым довольно часто прибегает каждый пользователь. Поэтому, если выровнять соответствующие кнопки по правому краю, их будет легче найти.
Кнопки с подписями эффективны, только когда их количество ограничено. Но если кнопок много, люди будут сбиты с толку, не понимая какой вариант выбрать. Когда существует риск того, что пользователи могут спутать похожие действия, иконки просто необходимы.
Иконки способны графически отобразить доступные действия, если текстовые метки не справляются с задачей. Помните о них, когда будете создавать группу кнопок в рамках своего следующего проекта.
Как создать кнопки со значками
❮ Назад Далее ❯
Узнайте, как создавать кнопки со значками с помощью 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.