ui.kanades

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

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

Высоту для всех типов кнопок рекомендуется делать от 50 до 60 пикселей, независимо веб интрерфейс это или мобильный. Подробнее хотелось бы остановиться на ширине кнопок. В веб дизайне ширина кнопок зависит от ширины текста в кнопке, рекомендуется делать расстояние 42 пикселей от текста с обеих сторон. Кнопки в мобильном интерфейсе делаются на всю ширину экрана, соблюдая боковые границы.

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

Плагин Icon Resizer для фигма. Делает иконки одинакового размера с квадратной рамкой. Выберите один или несколько фреймов и настройте иконку и размер ограничительной рамки. Ссылка: clck.ru/XHXHq #плагин

Закругление углов кнопок может придавать разные ощущения. Острые углы придают кнопкам больше элегантности и профессиональности. Закругленные больше кажутся дружелюбными и более приятными глазу.

Стили кнопок - Залитый - Залитый градиент - Линейный - Слабый оттенок цвета - Кнопки с иконками Кнопки с иконками делают сканирование и понимание контента быстрее, можно также использовать сами иконки без текста как кнопки. - Текстовая кнопка Текстовые кнопки самые простые из всех типов кнопок, обычно такие кнопки делаются изменением цвета небольшой части из текста. В каких случаях использовать те или иные кно…

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

Удобный плагин(Figma) для создания паттернов, есть функция рандомного копирования. Чтобы применить такой же эффект как на картинке: 1. Создайте несколько или более фигур с разными цветами 2. Не группируя выделите все фигуры и примените плагин с отметкой “Shuffle Nodes” Также можно настраивать расстояние между фигурами, кол-во фигур по ширине и длине. Ссылка: clck.ru/XDkYF #плагин

Второстепенные кнопки являются альтернативным вариантом дальнейшего действия. Это могут быть такие кнопки, как “Назад” или “Отмена” и другие. Например, при заполнении формы пользователю необходимо изменить данные в предыдущем шаге, в этом случае помогает второстепенная кнопка “Назад”. Как правило, второстепенные кнопки кнопки должны быть менее заметны, чем основные. Этого можно добиться убрав заливку кнопки и остав…

Основные кнопки очень похожи на CTA кнопки. Так или иначе, различие в том, что CTA кнопка призывает пользователя к действию на дальнейшие определенные шаги, такие как купить, заказать и т.д. А задача основных кнопок, это пользоваться продуктом и ее различными функциями, которые подкреплены к этим кнопкам. Выше на картинке показаны несколько примеров, в каких случаях используются основные кнопки.

Чтобы CTA кнопка нажималась легко на мобильных устройствах, нужно учитывать высоту кнопки, стандартный вариант высоты кнопки, это от 50 до 60 пикселей, но не меньше 50 пикселей.