Advertisement
  1. Web Design
  2. Design Theory

Принципы создания кнопок

by
Read Time:7 minsLanguages:

Russian (Pусский) translation by Dmitriy Troy (you can also view the original English article)

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

Новые возможности CSS3 существенно облегчают создание элегантных и стильных кнопок, избавляют нас от использования картинок и даже обеспечивают адекватное отображение в устаревших браузерах. Неважно каким образом вы создаёте кнопки: с помощью только CSS, или каким-то другим способом — важно то, как ваша кнопка вписывается в контекст всего сайта.

Конечно, проще всего использовать готовый набор элементов интерфейса, которых очень много сегодня в сети. Многие дизайнеры с радостью делятся такими наборами бесплатно (и в них, конечно же есть кнопки, вдохновлённые дизайном Apple). Но гораздо лучше потратить немного времени и подумать о том, какой стиль кнопок наиболее органично будет смотреться в контексте дизайна всего сайта. Или рассмотреть возможность создания какого-то оригинального стиля?

Нет ничего предосудительного в использовании готовых наборов элементов. Это экономит время. Но от того, что вы постараетесь уделить больше внимания дизайну кнопок хуже ведь тоже не будет. Взгляните внимательно на понравившийся вам дизайн кнопок. Вписываются ли они в общий интерфейс? А может быть можно сделать что-то более интересное? Достаточно ли кнопки заметны? Нужно ли создать иерархическую структуру (главная копка, вспомогательная кнопка)? Достаточно ли кнопки в иерархии отличаются друг от друга? Привлекательны ли они?! (Мы же все хотим, создавать красивые штуки?!).

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

1. Соответствие бренду

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

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

2. Соответствие контексту

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

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

3. Убедитесь, что кнопки достаточно контрастны

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

4. Определитесь с формой кнопок

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

5. Приглушите вторичные элементы

Если вы используете готовый набор интерфейсных элементов, то скорее всего большинство элементов там будут иметь прямоугольную форму со скруглёнными углами. И очень часто в таких наборах элементы, не являющиеся кнопками, выглядят как кнопки. Старайтесь этого избегать.

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

6. Соответствие цветов контуров/обводки

В большинстве случаев дизайнеры при создании кнопок используют обводку. Грубо говоря, если ваша кнопка темнее фона, то для обводки лучше использовать тёмный оттенок основного цвета кнопки. Если же кнопка светлее фона, то лучше использовать оттенок чуть темнее фона. В противном случае границы кнопки будут выглядеть «грязными». Это простое правило существенно улучшит внешний вид кнопок.

7. Будьте осторожны с тенями

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

8. Подумайте о возможности использования иконок

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

Например, стрелка, указывающая вправо, говорит о том, что нажатие приведёт к переходу на новую страницу. А стрелка, указывающая вниз, намекает, что при нажатии мы увидим дополнительное меню.

9. Подумайте об иерархии кнопок

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

Соответственно кнопки первого уровня должны выглядеть максимально контрастно. При снижении важности визуальный вес кнопки также должен снижаться. Это касается не только цвета и графических эффектов. Изменение размеров также существенно влияет на визуальный вес.

10. Всегда создавайте дизайн всех состояний кнопки

Эту задачу обычно оставляют на последний момент. Всегда прорабатывайте различные состояния кнопки, чтобы пользователь получал обратную связь при работе с вашим сайтом. У пользователей есть ментальная модель того, как должны вести себя кнопки, основанная на их опыте использования кнопок в реальном мире. Достаточно с помощью CSS немного поменять тени, обводку и градиент, и ваша кнопка станет вести себя привычным пользователю образом!

Заключение

У каждого дизайнера свой рабочий процесс. Готов поспорить вы частенько, глядя на результат своего труда, откидываетесь на стуле, киваете и говорите: «Да, это то что надо». Но мне кажется, что всегда полезно лишний раз подумать и проанализировать свои дизайнерские решения.

Нет ничего плохого в использовании готовых наборов интерфейсных элементов. Это может сэкономить массу времени. Может быть даже так, что готовый набор просто идеально подходит под ваши задачи. Однако, более глубокое понимание принципов и техник дизайна поможет вам повысить профессиональный уровень.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.