От автора: я люблю кнопки. С их помощью можно делать множество различных вещей: переходить на следующий этап, принимать различные условия, выполнять что-либо. Кнопки делают сайт интерактивным. Вот почему кнопки, возможно, являются самым важным компонентов в системе проектирования в веб-дизайне.
Все просто, кнопки размечают какую-либо область, чтобы я мог на нее нажать. По существу, именно на кнопках мы применяем основные атрибуты языка дизайна так, что потом это оказывает свое влияние на более сложные компоненты. Ниже я представил 12 уроков, которые я выучил, исходя из работы с первичными (primary button), вторичными (secondary button) кнопками, а также другими типами кнопок.
Первичные кнопки
№1. Определитесь со стилистикой системы
Кнопки – чистейшее атомарное выражение визуального стиля системы. Кнопка состоит из трех неразрывных атрибутов так называемой «большой тройки» — цвет, шрифт и иконография. В кнопках также нужно учитывать пространство: внутренний padding (в частности слева и справа от надписи) и внешний margin (влияющий на другие элементы). Кнопки могут даже затрагивать такие атрибуты, как скругление (или border-radius) и подъем (или box-shadow).
Вывод: Примите кнопки, как основное представление стилистики системы. Еще лучше если вы задаете кнопку, как набор переменных: цвет, размер, пространство и т.д.
№2. Определите стилистику слов
К нашему счастью кнопки с надписью «Click Here» ушли в прошлое. Но вопросы остаются открытыми: Какой длины должен быть текст кнопки? Стоит ли делать подписи в повелительном наклонении (Сохрани или Закрой)? Нужно ли к глаголу Сохранить добавлять тип объекта (Документ)? Существуют ли какие-либо предпочтения в написании подписей для общих действий? Нужно ли кнопки связывать как-то с брендом… или нет?
Вывод: Найдите в сети гайды с набором готовых кнопок. Список подходящих слов и редакторских стандартов можно найти в руководствах типа Voice и Tone. Кнопки – отличный пример внедрения новых стандартов.
№3. Инвертируйте цвета кнопок если изменяется фон
Большинство кнопок хорошо работают на белом фоне. А будет ли кнопка видна на фотографии или более темном фоне? Можете ли вы разместить кнопку на светлом нейтральном фоне? Хорошо ли видна кнопка на любом фоне? Можете ли вы сменить цвет первичной кнопки?
Вывод: Протестируйте первичную кнопку на возможных фонах и добавьте в код альтернативные стили (белый фон, какой-то другой цвет или полупрозрачность?) на случай, если фон станет темнее. При проектировании создавайте светлые и темные варианты кнопок на возможных фонах для пущей наглядности.
№4. Одна первичная кнопка на странице, если только действие не повторяется
Кнопки призывают к действию. Мы часто используем первичные кнопки для привлечения внимания к самому важному действию на странице. По крайней мере до тех пор, пока мы не начинаем засорять страницу кучей первичных кнопок (хорошо хотя бы что они все похожи).
В некоторых случаях первичные кнопки хорошо подходят: при выборе из параллельных объектов (как набор медиа объектов в поисковой выдаче) или при выборе опций из равных модулей на странице настроек.
Вывод: Определитесь, в каких случаях стоит использовать всего одну первичную кнопку на странице, а в каких больше одной.
№5. Спроектируйте и создайте все виды взаимодействия с кнопкой
Кнопки представляют собой примитивный вид взаимодействия, а взаимодействие приводит к изменениям. Будет некорректно, если вы просто скажете разработчику «Вот дизайн кнопки!» и покажете кнопку на загруженной странице. Дизайнер должен показать внешний вид кнопки во всех возможных состояниях: по умолчанию, при наведении мыши, в фокусе (появляется подсветка к примеру), при нажатии и даже какая-нибудь крутящаяся анимация ожидания или анимированный прогресс бар.
Вывод: Дополняйте живое демо (просто вставьте кнопку на страницу) галереей всех возможных состояний, где пользователю не нужно взаимодействовать с кнопками. Создание документации – это не охота за сокровищами. Еще лучше будет, если вы создадите видео, как в Material Design.
№6. Создавайте кнопки устойчивые к внесению изменений
Сочетание подписей с иконками в кнопках усиливает значение, что ускоряет распознавание. Так, стоять! Я думал кнопки – это подписи с предсказуемой областью для нажатия. При добавлении новых элементов, даже обычной иконки, ваша кнопка не должна рассыпаться. Добавление менее предсказуемых элементов влечет за собой проблемы с пространством и выравниванием, которые вы захотите решить, особенно когда в кнопке можно расположить подпись, иконку и т.д.
Вывод: Будь то с помощью кода или дизайнерских программ создавайте кнопки, устойчивые к добавлению в них дополнительных элементов. Пользователи захотят добавить в кнопки иконки, подписи, да что угодно и не задумываться о проблемах с пространством и выравниванием. Помогите им, сделав эту часть работы за них.
Вторичные кнопки
№7. Вторичная кнопка ≠ отключенная кнопка
Никому не нравятся серые кнопки. Но вы можете взять для вторичной кнопки чуть более насыщенный цвет первичной кнопки. Нельзя размещать две похожие кнопки рядом. К примеру, зеленый цвет для сохранения и синий для отправки данных на сервер. Ни вы сами, ни ваши пользователи не знают, какой из двух цветов важнее.
И вот вы выбрали нейтральный цвет, близкий к серому. И кнопка похожа на отключенную. Хуже того, если первичная кнопка будет в состоянии disabled, она тоже станет серой. И будет у вас две серых кнопки.
Вывод: Подбирайте цвета вторичной кнопки и отключенной кнопки совместно. Следите за тем, чтобы все ваши варианты сочетались друг с другом и были доступны.
№8. Остерегайтесь призрачных кнопок
Призрачные кнопки состоят из подписи и рамки одного цвета и прозрачного фона. Из-за этого с подписью могут возникать проблемы. Иногда лейбл можно поместить на белый фон (самое простое). Однако иногда другой сплошной цвет или яркое фото могут сделать текст кнопки неразборчивым.
Призрачные кнопки так нравятся дизайнерам за свою полную противоположность первичным кнопкам. И они неспроста называются призрачными, такие кнопки могут исчезать. Я лично проводил тесты по юзабилити и видел, как они исчезают. Принимающие участие в тесте люди не видели их или не могли прочитать текст. Это ослабляет или полностью разрушает значимость кнопки.
Вывод: Вставляйте призрачные кнопки в систему на свой страх и риск. Проведенное мной исследование говорит, что призрачные кнопки хуже обычных. Кроме того, вы сэкономите время, не выслушивая споры дизайнеров на эту тему.
Другие типы кнопок
Со временем заказчик будет просить у вас кнопки других типов. Большие или маленькие. Кнопка с меню или просто панель с переключателями. Тут все зависит от вашей системы.
№9. Изменяйте размер кнопок
Интерактивные элементы можно разместить в довольно узких местах, к примеру, карточках или сайдбаре. В некоторых случаях наоборот может понадобиться огромная кнопка внутри большого фото на все окно.
Вывод: Предоставляйте заказчику возможность настраивать размер кнопок: делать их как больше, так и меньше. Чтобы пользователь мог изменить кнопку обычным переключением класса. Используйте запоминающиеся имена – Puffy, Micro – а не просто Large и Small.
В эпоху плоского дизайна системы типа Material Design используют «плоские» кнопки в панелях, диалоговых окнах и вместе с текстом. По умолчанию такие кнопки не сильно отличаются от ссылок. Однако кнопку от ссылки отличает масса различных состояний и поведений.
Вывод: Если в вашей системе есть вариант плоских кнопок, проверьте, чтобы их стандартный внешний вид и поведение (как в коде так и дизайне) отличалось от ссылок. Сравнивайте кнопки и ссылки по всем возможным состояниям: фокус и нажатия, отступы и выравнивание.
№11. Добавьте в кнопки разнообразия
При нажатии на отдельные кнопки может всплывать окно с выбором разных стилей. Во многих системах реализован выбор стиля интерфейса, в частности элементов меню (или выпадающий список) и раздельных (сегментированных) кнопок.
Вывод: Разнообразьте ваше веб-приложение различными видами кнопок, возможностью добавить раскрывающееся меню в кнопку. Однако используйте эту функцию осторожно. Такие кнопки с разделением областей (левая часть кнопки выполняет основное действие, а правая вызывает выпадающее меню) подходят под множество сценариев, однако это усложняет код. В простых сайтах можно не добавлять менее популярные версии кнопок, это будет только отвлекать.
№12. Сделайте так, чтобы кнопки идеально работали друг с другом
Кнопки могут идти группами. В группе кнопок может быть одна первичная и как минимум одна вторичная кнопка. В переключателе есть положения включен и выключен, есть переключатели с большим количеством вариантов (к примеру, выравнивание текста по левому и правому краю, по центру и по ширине). В панели инструментов могут находиться все типы кнопок: первичные, вторичные, переключатели, меню и т.д.
Вывод: При создании новых типов кнопок проводите стресс-тесты в зажатом пространстве на работу этих кнопок с остальными, комбинируйте возможные варианты. Дизайнеры систем не гадалки, предсказывающие будущее. Однако исследование всевозможных сценариев поможет избежать непредвиденных ситуаций.
Используйте тег button только для кнопок
Вывод: Изучайте принципы объявления ссылок, чтобы понимать принципы объявления кнопок и их доступность.
Вы - разработчик в поисках качественного онлайн-сервиса для конструирования кнопок? Если да, то у меня есть для вас отличная подборка. Ниже приводится мой список из 10 лучших онлайн-ресурсов для построения кнопок. Кнопки представляют собой важные элементы интерфейса наших веб-сайтов, и данные сервисы позволят вам конструировать великолепные кнопки.
Почитайте о каждом из них и тщательно протестируйте их. Найдите те, которые смогут облегчить ваш труд.
Button Maker - замечательный бесплатный сервис генерации CSS-кодов для ваших кнопок. Различные детали кнопки можно окрашивать в разные цвета. Ползунки, расположенные над определителями цвета, позволяют вам варьировать размер и форму кнопки, следя за изменениями в окне слева. Для получения кода нажмите на саму кнопку.
Da Button Factory предлагает вам отличные инструменты для построения кнопок. Вы можете варьировать размер кнопки, цвета и вид шрифта, оттенять его, а также выбирать конечный формат (PNG / JPEG / GIF / ICO). В процессе работы кнопка постоянно обновляется в соответствии с вносимыми вами изменениями. Завершив её построение, вы можете выполнить загрузку нажатием на неё же.
03. Buttonator - ресурс больше не существует
Ещё один отличный онлайн-сервис для построения кнопок, Buttonator , предоставит вам практически все возможности для решения данной задачи. Начать можно с выбора определённого стиля оформления кнопки в правой панели. А далее вы можете вносить в него изменения; в том числе, варьировать цвет и начертание/размер шрифта. Загружать кнопки можно в виде GIF-файлов.
Cool RGB - замечательный веб-сайт для конструирования различных элементов веб-страницы. Здесь можно создавать логотипы, баннеры, панели и, разумеется, кнопки. Интерфейс построения кнопок адаптируется через множество опций - от выбора шрифтов и цветов до установки уровня прозрачности и линейных углов наклона.
Сервис As Button Generator позволяет вам конструировать кнопки, выполняя редактирование в интерфейсе, составленном из вкладок. Имеется много опций для адаптации, которых вполне хватит на построение ваших кнопок. Готовое изображение загружается в виде PNG-файла.
07. HTML and CSS Rounded Corner Button Generator - больше не существует
Сайт предназначен для разработчиков, ищущих очень простой, но вдвойне полезный онлайн-сервис построения кнопок. HTML and CSS Rounded Corner Button Generator позволяет вам не только конструировать кнопки, но и варьировать их цвета, а также предоставляет вам ZIP-архив с файлом PNG-изображения кнопки, HTML- и CSS-кодами.
08. Feed Icon - больше не существует
Если вы ищете сервис для построения простой иконки веб-каналов, то Feed Icon - лучшее решение. Вам лишь нужно указать URL-адрес своего веб-сайта, а затем выбрать один из 3 предложенных вариантов HTML-кода. Три варианта кодировки предусматривают одну и ту же форму иконки, но разные её размеры.
У данного сервиса построения кнопок от Эдама Кэлси (Adam Kalsey) очень простой интерфейс. Иконку можно разделить чертой и задать интервал в пикселях между этой границей и краем кнопки.
10. Button Maker - Больше не существует
Сервис очень похож на ресурс Эдама Кэлси, но его важное отличие состоит в том, что вы можете выбирать позицию разделительной черты - "слева", "по центру" или "справа". Выбирать можно и один из двух предлагаемых вариантов размера кнопки.
Лабораторная работа №6.
Цель работы: Научиться создавать кнопки, изучить принцип их функционирования, научиться создавать различные элементы на кнопках.
Еще одно частое применение графических элементов - это оформление кнопок. Кнопка - это элемент взаимодействия с пользователем, так как предполагается, что когда он на нее нажмет, то что-нибудь произойдет.
Выделяют три типа кнопок:
· кнопки отправки : При активизации такой кнопки производится отправка формы. В форме может быть несколько кнопок отправки.
· кнопки сброса : При активизации такой кнопки для всех управляющих элементов устанавливаются исходные значения.
· прочие кнопки : Для таких кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт.
Необходимо определять язык скрипта для кнопок в объявлении скрипта по умолчанию (в элементе META).
Кнопки создаются с помощью элемента BUTTON или INPUT. Э лемент BUTTON предоставляет более широкие возможности представления кнопки, чем элемент INPUT .
Чтобы создать кнопку, достаточно поместить некоторый текст между тегами , например, вот так:
Правда, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет.
Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.
Интереснее тот факт, что между тегами можно поместить не только текст, а все, что угодно. Если мы поместим туда тег , то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании - например, надо вставлять теги
для переноса строк и т.д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок HTML! В нашем примере мы поместили туда целую таблицу с разноцветными клетками.
Пример оформления кнопок:
TD {color: white;}
4.0
| Она содержит | целую таблицу |
| c разноцветными | Клеточки |
