Кнопки в дизайне интерфейсов: эволюция стиля и рекомендации

Кнопки – неотъемлемые элементы дизайна, позволяющие пользователям взаимодействовать с web-ресурсом, приложением, игрой. На первый взгляд, они кажутся одними из простейших элементов UI, но на самом деле прошли долгий путь изменений. В этой статье мы поговорим об эволюции кнопок, выберем наиболее актуальные и эффективные их виды.

• Трехмерные кнопки

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

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

• Скевоморфические кнопки

Благодаря приемам скевоморфизма, элементы UI имеют вид реальных объектов. Это один и видов баттонов, способных помочь человеку понять, как использовать интерфейс. Скевоморфические кнопки сейчас используются редко, но при этом выглядят они стильно.

• Кнопки плоские

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

• Плавающие кнопки

Плавающие кнопки имеют едва видимые тени, дополнительную подсветку и слои. Как правило, они располагаются на слоях основного интерфейса. Привлекают внимание наличием рекомендуемого действия.

• Кнопки-призраки ( контурные кнопки)

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

Несколько рекомендаций по созданию:

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

• Эффектнее всего выглядят кнопки прямоугольной формы, со скругленными углами. Согласно данным исследований, округлые формы привлекают внимание пользователей к центру элемента. Также приветствуются формы круга, треугольника.
• Чтобы правильно подобрать размер, рекомендуем использовать данные о средних размерах подушечек пальцев. Как показывает статистика, они имеют размер от десяти до четырнадцати миллиметров, а сами кончики – от восьми до десяти.
• Следите за тем, чтобы между кнопками было оптимальное расстояние.
• Называть кнопку необходимо исходя из того, какой функцией она обладает. Также рекомендуем добавить описание к действию, чтобы пользователи наверняка знали, к чему приведет клик по ней.
• Подбирая цветовое решение, помните, что именно цвет помогает пользователю на психологическом уровне сразу сориентироваться в том, к какому действию приведет нажатие. К примеру, зеленый будет подразумевать «согласие», а красный – «отказ».