ux/ui
school_flashfamily
тильда гуру
- Хедер
- Футер
- Кнопки
- Ссылки
- Инпуты
часть 2
school_flashfamily
кнопки
тильда гуру
- Кнопки на сайте должны быть заметными и считываемыми
- Кегль не меньше 14pt (обычно такой же, как в пунктах меню)
- Иметь понятную форму
- Иметь ховер-эффект
- Выстраиваться по иерархии
school_flashfamily
считываемость кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Пользователю должно быть очевидно, где находится кнопка
school_flashfamily
считываемость кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Декоративные кнопки всегда воспринимаются хуже, с этим нужно быть аккуратнее
school_flashfamily
считываемость кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Кнопки можно разнообразить иконками
school_flashfamily
считываемость кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Также кнопки могут быть стилизованы под айдентику бренда
school_flashfamily
размер кегля
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Размер кегля на сервисных сайтах может быть равен или меньше наборного, но должен быть идентичен пунктам в меню
https://flashfamily.ru/
наборный текст — 16pt
текст в навигации — 14pt
текст в навигации — 14pt
school_flashfamily
размер кегля
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
https://level-app.ru/
Наборный текст и текст в навигации 16pt
school_flashfamily
размер кегля
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
В креативных сайтах кегль в кнопках может быть крупнее наборного
school_flashfamily
формы кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Без скруглений
Кнопка
Кнопка
Кнопка
Круглая
Кнопка
С небольшим скруглением
С большим скруглением
Важно, чтобы кнопки на сайте были одинаковой формы
school_flashfamily
формы кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
Кнопка
Слишком большое скругление на кнопке считается ошибкой. Нужно сделать скругление меньше, либо скруглить полностью
Кнопка
Кнопка
:(
:)
school_flashfamily
иерархия кнопок
тильда гуру
Иерархия кнопок
Купить
Первичное действие
Посмотреть ещё
Вторичное действие
Третичное действие
Подробнее
Купить
Купить
Посмотреть ещё
Неактивная кнопка
Купить
Купить
Посмотреть ещё
Подробнее
Купить
school_flashfamily
иерархия кнопок
тильда гуру
Для красивого подчёркивания нужно использовать настройку insert link
school_flashfamily
иерархия кнопок
тильда гуру
school_flashfamily
ховеры
тильда гуру
Купить
Посмотреть ещё
Купить
Посмотреть ещё
Цвет ховера у кнопок с заливкой лучше использовать на несколько тонов темнее или светлее, чем цвет кнопки. Либо использовать общий цвет, который соответствует палитре сайта
Купить
Посмотреть ещё
Купить
Посмотреть ещё
Ховер для текста можно настроить с помощью SBS анимации
school_flashfamily
ховеры
тильда гуру
Купить
Посмотреть ещё
Купить
Посмотреть ещё
Кнопкам с обводкой можно делать ховер в виде заливки
school_flashfamily
ховеры
тильда гуру
При использовании плашек с кнопками
цвет кнопки должен меняться по наведению на плашку. Сама плашка тоже может изменяться
цвет кнопки должен меняться по наведению на плашку. Сама плашка тоже может изменяться
school_flashfamily
ссылки
тильда гуру
Якорные ссылки
Для якорных ссылок на лендинге нужно использовать модификатор плавного скролла, чтобы пользователь понимал, что «доехал» до нужного блока, а не перешёл на другую страницу
Гиперссылки в тексте
Гиперссылки нужно выделять подчеркиванием либо цветом и добавлять ховер
Гиперссылка
flash_family
спасибо :)
school_flashfamily
flashfamily
school.flashfamily
тильда гуру
1/14
