+7 (495) 859-21-36
Предоставляемые услуги
  1. Сайты
  2. Порталы
  3. Интернет-магазины
  4. Мобильные приложения
  5. Лендинги
  6. Брендинг
  7. Нейминг
  8. Продвижение
  9. Дизайн сайта
  10. Личные кабинеты
  11. Аудит сайта
  12. Образовательные платформы
  13. Сайты на Тильде
  14. Комплексный интернет маркетинг
  15. Техническая поддержка
  16. Коммерческие фотосессии

Кнопки

UI UX дизайн
03.11.2017

Решила сделать небольшую подборку кнопочек. Я сама использую не больше 5 видов, только меняю шрифты и цвет кнопок.

Думаю, что единственное настоящее правило в создании кнопок это не увлекаться процессом.

Создайте 2, максимум 3 вида кнопок и во всех остальных случаях меняйте только их название. Создайте их по приоритетам. Например заполненную цветом, самую активную кнопку используйте только в случаях, когда внимание пользователя обязательно нужно привлечь. Такая кнопка будет самая содержательная.

Кнопка 1

В зависимости от цвета фона к кнопке можно применить инверсию, при этом полностью сохранить её размеры

Кнопка 2

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

Кнопка3

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

Кнопка4

В остальном все на вкус дизайнера: делать кнопки черными или синими; заполненными цветом или с прозрачностью; толстый контур или тонкий; обойтись без контурной рамки, добавить стрелочку или другие иконки.

Единственное, что на самом деле важно, это показать пользователю куда он нажать обязан, а что может и проскролить. Расставить приоритеты правильно.

И не уходить в креатив, ведь если по кнопке будет не понятно, что на неё можно нажать, то первый кто от этого проиграет это вы сами.

Пара примеров крутяцких кнопочек в пост:

Кнопка5
Кнопка6
Кнопка7
Кнопка8
Кнопка9
Кнопка10
Кнопка11
Кнопка12
Кнопка13
Опубликовано: 2017-11-03

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку