Разное

Кнопки иконки: Иконки кнопки — 123,823 бесплатных иконок

02.10.2021

Иконки кнопок компьютера, файлы Закрыть Бесплатно, Разное, синий, прямоугольник png

Иконки кнопок компьютера, файлы Закрыть Бесплатно, Разное, синий, прямоугольник png

теги

  • Разное,
  • синий,
  • прямоугольник,
  • другие,
  • окно,
  • электрический Синий,
  • символ,
  • масштабируемая векторная графика,
  • openOffice Draw,
  • формат изображения значка яблока,
  • меню,
  • строка,
  • загрузка,
  • World Wide Web,
  • кнопка,
  • значки компьютеров,
  • картинки,
  • файлы,
  • закрыть,
  • бесплатно,
  • png,
  • прозрачный,
  • бесплатная загрузка

Об этом PNG

Размер изображения
600x568px
Размер файла
73.32KB
MIME тип
Image/png
Скачать PNG ( 73.32KB )

изменить размер PNG

ширина(px)

высота(px)

Лицензия

Некоммерческое использование, DMCA Contact Us

  • Социальные сети Компьютерные иконки Facebook, Fb Icons, логотип Facebook, Разное, синий, прямоугольник png 966x1039px 952.66KB
  • синяя галочка, галочка, галочки, синий, текст, роялти png 576x596px 25.95KB
  • Галочка Масштабируемая графика, Check s, угол, текст, товарный знак png 768x768px 42.94KB
  • зеленый флажок, флажок флажок Масштабируемая графика, флажок с, угол, лист, трава png 1280x853px 33.97KB
  • значки компьютеров iPhone телефонный звонок, значок телефонного звонка, синий значок вызова, Разное, текст, другие png 1024x1024px 46. 55KB
  • черный значок загрузки иллюстрации, значки компьютера значки на рабочем столе, значок загрузки бесплатно, Разное, рука, другие png 512x512px 23.38KB
  • Компьютер Иконы Дом, Черный Дом Иконка, разное, угол, другие png 512x512px 18.74KB
  • круглый синий и белый бумажный логотип, Telegram Компьютерные иконки Формат Apple Icon, Telegram Icon |Enkel Iconset |FroyoShark, разное, синий, компьютерная сеть png 512x512px 46.75KB
  • Значок LinkedIn, Linkedin, текст, прямоугольник, логотип png 500x500px 42.31KB
  • черно-белый логотип, символ значки компьютеров, значок кнопки «Закрыть», разное, товарный знак, другие png 600x600px 55.
    59KB
  • значок предупреждения, значки ошибок компьютера, оранжевый значок ошибки, разное, угол, треугольник png 512x512px 10.12KB
  • Справочник по компьютерным иконкам, пустой значок папки, разное, прямоугольник, другие png 2400x1902px 381.16KB
  • значок со стрелкой вправо, значки со стрелками компьютера, файл с синей стрелкой, разное, синий, угол png 512x512px 6.51KB
  • Иконки компьютеров Вход Iconfinder, Иконка входа в дверь, разное, угол, другие png 512x512px 11.18KB
  • иллюстрация блокнота, значки компьютеров Iconfinder Действие, значок списка, Разное, угол, текст png 512x512px 15. 62KB
  • черный топливный насос логотип, Компьютерные иконки Бензин Автозаправочная станция Топливо, Free Icon Petroleum, Разное, текст, прямоугольник png 512x512px 8.38KB
  • Компьютерные иконки Дизайн иконок, Выход с, угол, масштабируемая векторная графика, логин png 512x512px 44.81KB
  • красный значок файла, компьютер значки папок папок, красный значок папки, значок каталога, разное, прямоугольник, другие png 512x512px 35.47KB
  • Компьютерные иконки, Обновить Сохранить, разное, синий, другие png 512x512px 71.45KB
  • черная кнопка питания логотип, значки кнопок компьютера символ питания, кнопка выключения, окно, символ, вкл. кнопка выключения png 512x512px 14.01KB
  • серая метка x иллюстрации, компьютер иконки круг, символы закрыть, прочее, другие, логотип png 512x512px 22.71KB
  • Кнопка Иконки компьютера Масштабируемая графика, красная кнопка закрытия X, Разное, текст, прямоугольник png 600x568px 65.37KB
  • Компьютерные иконки Microsoft Windows Button, свернуть бесплатно, разное, угол, прямоугольник png 512x512px 6.1KB
  • Значок сообщения об ошибке, значки предупреждения, товарный знак, компьютер, окно png 1000x1000px 65.24KB
  • круглая синяя стрелка с логотипом, кнопка со стрелкой, следующая кнопка, синий, торговая марка, интернет png 600x600px 90.
    1KB
  • США Logo Компьютерные иконки Facebook, Fb .ico, Facebook логотип, Разное, синий, прямоугольник png 1024x1024px 80.53KB
  • YouTube Play Button Logo Компьютерные иконки, логотип YouTube Icon App, логотип YouTube, разное, угол, прямоугольник png 512x512px 20.1KB
  • красная кровь, кровь, брызги крови, Форматы файлов изображений, инкапсулированный PostScript, плазма крови png 1800x1279px 1.05MB
  • Иконки компьютера пользователя Apple Icon формат, Иконка Бизнес Человек Человек Мужчина Люди Люди, текст, прямоугольник, люди png 512x512px 22.74KB
  • желтая линованная бумага, бумага, лист бумаги, Разное, форматы файлов изображений, прямоугольник png 1238x1686px 3.
    35MB
  • Иконки компьютера Блокнот Блокнот, значки блокнота без указания авторства, разное, угол, текст png 512x512px 43.36KB
  • красная стрелка, Иконка Стрелка компьютера, Красная линия стрелки, разное, угол, текст png 600x529px 15.53KB
  • Значок каталога, папка, угол, белый, текст png 512x512px 4.99KB
  • Globe World Компьютерные иконки, глобус, онлайн, значок мира, земля искусства, Разное, другие, логотип png 512x512px 31.43KB
  • Телефонные значки на iPhone, значок бесплатного телефона, логотип вызова, Разное, текст, телефонный звонок png 594x594px 28. 42KB
  • Кнопка гамбургера Компьютерные иконки Меню, линия бара, угол, прямоугольник, другие png 512x512px 3.03KB
  • синий логотип, Globe World Computer Icons, лучший бесплатный глобус, разное, форматы файлов изображений, логотип png 989x997px 100.8KB
  • чирок и серая иллюстрация, компьютерные иконки масштабируемая графика, бизнес-команда значок бизнес бизнесмен лидер, синий, текст, люди png 512x512px 40.96KB
  • нажмите здесь логотип иллюстрации, World Wide Web, нажмите здесь кнопку с, текст, логотип, знак png 1188x909px 343.51KB
  • черный глобус логотип, значки компьютеров веб-браузер масштабируемая графика рабочего стола, бесплатный высококачественный сайт значок Интернет, разное, угол, другие png 512x512px 37. 67KB
  • Кнопка гамбургера Компьютерные иконки Меню, Меню, еда, текст, прямоугольник png 1024x857px 14.58KB
  • зеленая галочка иллюстрация, галочка, галочка, разное, угол, лист png 1152x1024px 48.54KB
  • иллюстрация розового баннера, веб-баннер Масштабируемая графика, абстрактный баннер, разное, фиолетовый, угол png 1000x737px 14.19KB
  • Логотип Facebook, социальные сети Компьютерные иконки Facebook, Facebook Icon |Плоский градиент Социальный Iconset |Limav, Разное, прямоугольник, другие png 512x512px 20.26KB
  • Окно значков кнопок компьютера Масштабируемая графика, кнопки обзора и закрытия, разное, угол, текст png 600x471px 75. 83KB
  • Корзина с клипом iCloud, Загрузить компьютер Иконки Компьютерный файл, Загрузить изображение чертежа, разное, синий, форматы файлов изображений png 1369x903px 37.91KB
  • круглый черный, кнопка со значком компьютера, глянцевый черный значок, Разное, другие, монохромный png 600x600px 19.73KB
  • документы логотип, компьютерные иконки системы управления документами, документы, разное, угол, текст png 512x512px 4.04KB
  • буферизация иллюстрации, значки компьютеров, загрузка файлов, разное, угол, белый png 512x512px 21.15KB
  • вложение иллюстрации, значки компьютеров вложение электронной почты Масштабируемая графика, бесплатное вложение электронной почты, Разное, текст, другие png 512x512px 26. 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *