Разработка CSS-кнопок: методы и ресурсы

1. Об авторе Янко Йованович - дизайнер пользовательского интерфейса, инженер-программист, блогер, спикер...
2. Основной стиль
3. Изображений
4. Состояния кнопок
5. Полезное чтение
6. Раздвижные двери: гибкие кнопки
7. Полезное чтение
8. CSS-спрайты: одно изображение, а не много
9. Полезное чтение
10. CSS 3: кнопки будущего
11. Полезное чтение
12. Мгновенные инструменты: они полезны?
13. Кнопки и удобство использования: вместо заключения

Об авторе

Янко Йованович - дизайнер пользовательского интерфейса, инженер-программист, блогер, спикер и художник. В свободное время он пишет о пользовательских интерфейсах в своем блоге… Подробнее о Янко ...

Кнопки, независимо от их назначения, являются важными элементами дизайна. Они могут быть конечной точкой веб-формы или призыв к действию , У дизайнеров есть много причин стилизовать кнопки, в том числе сделать их более привлекательными и повысить удобство использования. Однако одной из наиболее важных причин является то, что пользователи могут легко пропустить стандартные кнопки, поскольку они часто выглядят аналогично элементам в своей операционной системе. Здесь мы представляем вам несколько приемов и учебных пособий, которые помогут вам научиться стилизовать кнопки с помощью CSS. Мы также рассмотрим удобство использования. Прежде чем объяснить, как оформлять кнопки, давайте разберемся с распространенным заблуждением: кнопки не являются ссылками. Основное назначение ссылки - переход между страницами и представлениями, а кнопки позволяют выполнять действия (например, отправлять форму).

Кнопки, независимо от их назначения, являются важными элементами дизайна. Они могут быть конечной точкой веб-формы или призыв к действию , У дизайнеров есть много причин стилизовать кнопки, в том числе сделать их более привлекательными и повысить удобство использования. Однако одной из наиболее важных причин является то, что пользователи могут легко пропустить стандартные кнопки, поскольку они часто выглядят аналогично элементам в своей операционной системе. Здесь мы представляем вам несколько приемов и учебных пособий, которые помогут вам научиться стилизовать кнопки с помощью CSS. Мы также рассмотрим удобство использования.

Вы можете взглянуть на следующие похожие сообщения:

Ссылки против кнопок

Прежде чем объяснить, как оформлять кнопки, давайте разберемся с распространенным заблуждением: кнопки не являются ссылками. Основное назначение ссылки - переход между страницами и представлениями, а кнопки позволяют выполнять действия (например, отправлять форму).

В одной из своих статей Якоб Нильсен пишет о командные ссылки , которые представляют собой смесь ссылок и кнопок. Но он рекомендовал, чтобы ссылки команд были ограничены действиями с незначительными последствиями и второстепенными командами. Чтобы узнать больше о первичных и вторичных командах (и действиях), ознакомьтесь с Основные и дополнительные действия в веб-формах Люк Вроблевски. Чтобы узнать больше о различиях между ссылками и кнопками, прочитайте Создание полезных ссылок и кнопок в UXBooth.

Основной стиль

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

<a class="button" href="#"> Кнопка образца </a> <button class = "button" id = "save"> Кнопка образца </ button> <input class = "button" value = "Кнопка образца "type =" submit "/> .button {padding: 5px; цвет фона: #dcdcdc; граница: 1px solid # 666; цвет: # 000; текст-отделка: нет; }

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

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

Изображений

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

.button {padding: 5px 5px 5px 25px; граница: 1px solid # 666; цвет: # 000; текст-отделка: нет; background: #dcdcdc url (icon.png) прокрутка без повтора 5px по центру; }

Состояния кнопок

Помимо состояния по умолчанию кнопки и ссылки могут иметь два других состояния: наведение и активное (т. Е. Нажатие). Важно, чтобы кнопки выглядели по-разному в разных состояниях, чтобы пользователи четко понимали, что происходит. Стилизовать любой элемент в состоянии наведения можно, вызвав псевдокласс: hover CSS.

a: hover {color: # f00; }

Хотя это очень важно, активное состояние редко реализуется на веб-сайтах. Показывая это состояние, вы гарантируете, что ваши кнопки реагируют и посылают визуальную подсказку пользователям, что кнопка была нажата. Это называется изоморфным соответствием , и это «связь между появлением визуальной формы и сопоставимым поведением человека» (Люк Вроблевски, Зрение на месте). Статья Состояние нажатой кнопки с помощью CSS подробно рассказывает о важности активного состояния.

a: active {color: # f00; }

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

a: focus {color: # f00; }

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

Мы должны поговорить о том, как обрабатывать свойство структуры для состояний: active и: focus. Правильная обработка этого свойства важна для пользователей, которые используют клавиатуру и мышь. В статье «Лучшее подавление контура CSS» Патрик Лоук показывает, как кнопки и ссылки ведут себя в различных комбинациях состояний, и объясняет, почему свойство структуры должно вызываться только с состоянием: active.

Синяя кнопка «Купить сейчас» на Apple.com имеет немного более светлый фон для состояния наведения и стиль вставки для активного состояния. Даже главная кнопка навигации на веб-сайте Apple реализует все три состояния.

Хотя это не реализует активное состояние, эта необычная кнопка на Чайный тур имеет хороший эффект затухания при наведении.

Кнопка «Читать дальше» на UX Бут Зеленый цвет при наведении и перемещается вниз на один пиксель в активном состоянии, что имитирует эффект нажатия кнопки.

Полезное чтение

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

Стиль кнопок охватывает основы стилей кнопок, со многими примерами.

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

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

Масштабируемые кнопки CSS с использованием цветов PNG и фона объясняет, как создавать действительно потрясающие кнопки для всех состояний. Хотя он использует jQuery, он грациозно ухудшается, если JavaScript отключен.

Раздвижные двери: гибкие кнопки

При стилизации кнопок необходимо учитывать один важный аспект: масштабируемость. Масштабируемость в этом контексте означает возможность растянуть кнопку, чтобы уместить текст и повторно использовать изображения. Если вы не хотите создавать разные изображения для каждой кнопки, рассмотрите технику «раздвижных дверей». Этот метод позволяет создавать масштабируемые, богатые кнопки.

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

<a href="#"> <span> Типичная кнопка раздвижных дверей </ span> </a> a {background: transparent url ('button_right.png') без повторяющейся прокрутки вверху справа; дисплей: блок; плыть налево; / * здесь отступы, поля и другие стили * /} a span {background: transparent url ('button_left.png') no-repeat; дисплей: блок; / * отступы, поля и другие стили здесь * /}

Преимущества этой техники в том, что она:

• Это простой способ создавать визуально богатые кнопки;
• Обеспечивает доступность, гибкость и масштабируемость;
• Не требует JavaScript;
• Работает во всех основных браузерах.

Полезное чтение

Статья «Раздвижные двери CSS» в A List Apart ( часть 1 а также часть 2 ) охватывает основы этой техники. Хотя эти статьи немного устарели, их нужно прочитать каждому веб-разработчику.

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

У Filament Group есть множество отличных статей и учебных пособий. Вторая статья о кнопках CSS, «Стилизация элемента кнопки с помощью раздвижных дверей CSS», объясняет, как создавать кнопки, комбинируя методы. Хотя он не поддерживает активное состояние, его можно легко расширить.

Если вы хотите Wii-подобные кнопки, статья Простые круглые ссылки CSS (кнопки Wii) предоставляет все необходимые ресурсы и объяснение того, как их стилизовать.

Обычный способ достижения техники раздвижных дверей CSS - это использование двух изображений. Тем не менее, статья Раздвижная дверь CSS с использованием только одного изображения показывает, что можно добиться того же эффекта только с одним изображением.

CSS овальные кнопки а также CSS квадратные кнопки от Dynamic Drive две другие статьи, которые показывают эффективность CSS раздвижных дверей.

CSS-спрайты: одно изображение, а не много

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

Пример ниже показывает простейшее использование CSS Sprites. Одно изображение содержит графику для всех трех состояний кнопок. Настраивая свойство background-position, мы определяем точное положение фонового изображения, которое мы хотим. Изображение, которое мы выбираем для показа здесь, соответствует фоновой позиции сверху: -30px и слева: 0.

a {background: white url (buttons.png) 0px 0px без повторов; } a: hover {background-position: -30px 0px; } a: active {background-position: -60px 0px; }

Для общей информации и ресурсов по CSS Sprites, проверьте Тайна CSS-спрайтов: методы, инструменты и учебные пособия «.

Полезное чтение

В этом простом учебном пособии Как создать простую кнопку с помощью спрайтов изображений CSS «Крис Спунер объясняет, как создать изображение CSS Sprites в Photoshop и использовать его с CSS.

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

CSS 3: кнопки будущего

CSS 3 позволяет нам создавать визуально богатые кнопки с помощью всего лишь нескольких строк кода. Пока что это самый простой способ создания кнопок. Недостатком CSS 3 является то, что в настоящее время он поддерживается только Firefox и Safari. Плюс в том, что кнопки, стилизованные под CSS 3, изящно деградируют в неподдерживаемых браузерах . Используя свойства браузера -moz-border-radius (для Firefox) или -webkit-border-radius (для Safari), вы можете определить радиус углов. Вот несколько примеров того, что можно сделать с помощью свойства border radius.

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

По сравнению с раздвижными дверями эта техника намного проще. Однако, если вы хотите поддерживать визуальную согласованность во всех браузерах, используйте раздвижные двери, поскольку они работают во всех основных браузерах, включая IE6. Чтобы узнать больше о возможностях CSS 3, прочтите раздел «Захватывающие функции и функции CSS 3: 30+ полезных учебных пособий». И вот несколько хороших учебных пособий по стилю кнопок с функциями CSS 3.

Полезное чтение

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

Создание кнопок без изображений с помощью CSS 3 объясняет недостатки использования изображений для кнопок и показывает несколько вариантов создания кнопок CSS 3 без изображений.

Мгновенные инструменты: они полезны?

Существуют инструменты для создания кнопок, такие как Простая кнопка и меню Maker а также Моя классная кнопка и для создания CSS-спрайтов, таких как CSS Sprite Generator , но вопрос в том, действительно ли они помогают вам создавать кнопки, которые соответствуют вашим потребностям. Хотя они настраиваемы и просты в использовании, ваши творческие способности и контроль над результатами ограничены, что делает кнопки среднего размера. Использование кнопок «один размер подходит всем» не очень хорошая идея.

Решение состоит в том, чтобы использовать Photoshop (или бесплатная альтернатива ) и проверенные методики, описанные в этой статье. Если вы новичок в Photoshop, вот несколько отличных уроков по созданию удивительных кнопок.

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

Как создать гладкую и чистую кнопку в Photoshop Это очень подробный учебник, который проведет вас через 30 простых шагов и поможет вам изучить основы Photoshop. Кроме того, в статье объясняется, как использовать эту графику в сочетании с HTML и CSS для создания полнофункциональных кнопок CSS.

Кнопки и удобство использования: вместо заключения

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

1. Сначала рассмотрим маркировку. Всегда помечайте кнопки названием действия, которое выполняет пользователь . И всегда делаю это глагол , Распространенной ошибкой является маркировка кнопок «Перейти» для различных действий, таких как поиск, отправка электронной почты и сохранение. Ярлыки также должны быть короткими и точными; Не нужно загромождать пользовательский интерфейс.
2. Как уже упоминалось, включите все состояния кнопок (по умолчанию, при наведении, активно), чтобы предоставить пользователю четкие визуальные подсказки о том, что происходит. Контуры кнопок должны оставаться только в активном состоянии.
3. Четко различают первичные и вторичные действия . Самое важное действие должно быть самым выдающимся. Обычно это делается путем придания первичным и вторичным действиям разных цветов.
4. Обратите особое внимание на последовательность . Кнопки должны быть согласованы во всем веб-приложении, как визуально, так и с точки зрения поведения. Используйте раздвижные двери CSS для повторно используемых кнопок или закругленные углы CSS 3 для обеспечения согласованности.
5. Хотя это очевидно, мы должны отметить, что вся область кнопок должна быть интерактивной.

Создание полезных ссылок и кнопок объясняет, почему пользователи иногда ожидают кнопок, а ссылки - в других. Также показано, как выбрать один из двух элементов.

Как разработать кнопки для улучшения юзабилити объясняет некоторые принципы юзабилити, которые следует учитывать при разработке кнопок. Он охватывает основы использования значков, внешнего вида, поведения, иерархии и согласованности.

Похожие

Комментарии