Золотые правила успешной кнопки

http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
  • Перевод
Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSS или пользуетесь специальными инструментами для их создания, всегда нужно тщательно подумать о том, как ваша кнопка будет выглядеть в контексте веб-сайта.


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


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


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

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

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


2. Соответствие содержанию


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


3. Достаточно ли контраста?


С таким огромным количеством дизайнов интерфейса, вдохновленных стилем Apple, кнопки могут затеряться среди остальных элементов UI, утрачивая свое предназначение. Пробуйте экспериментировать с цветами, размерами, отступами и шрифтами, чтобы кнопки выделялись в интерфейсе.

Важные кнопки нуждаются в контрасте.



4. Закругленные или форменные кнопки?


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


5. Скрываем второстепенные элементы


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




6. Обводка и граница


У большинства кнопок имеется что-то вроде границы или обводки. Если кнопка темнее, чем фон, то цвет обводки должен быть темнее цвета кнопки. Если же наоборот, т.е. фон темный, то обводка должна быть темнее фона. На мой взгляд, это правило — самое важное, когда дело касается границ и обводок.




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


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




8. Иконки вам в помощь


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




9. Помните о первичных, вторичных и третичных элементах


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

Разнообразие стилей кнопок может сыграть на руку



10. Указывайте состояние кнопки


Для кого-то это покажется очевидным, но желательно всегда указывать текущее состояние кнопки. Пользователь предпочтет иметь представление о том, на какой стадии в данный момент находится кнопка. Это можно осуществить с помощью таких параметров CSS, как тени, границы и градиенты.




Заключение


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

P.S.
С удовольствием приму в личку замечания по поводу перевода. Спасибо!

UPD Шрифт, используемый в кнопках, называется DIN 1451
  • +206
  • 55,5k
  • 55
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 55
  • +31
    Эту статью стоит показать многим дизайнерам/верстальщикам со словами: «Учитесь, блин!».
    • +6
      Согласен. Вещи, вроде бы, очевидные, но многие пытаются изобретать что-то свое уникальное, считая это творчеством, не успев набраться опыта.
      • НЛО прилетело и опубликовало эту надпись здесь
        • –1
          при том, что чтобы дизайнер не нарисовал, хороший верстальщик, видя, что нарисованное совсем не торт, сверстает хорошо.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              Радуйтесь, что с вами не начали спорить и сливать карму. :-D

              Статья классная, про обводку запомнил.
              • +1
                Не знаю, значит просто мне нравится доводить до идеала свою работу.
                • 0
                  А клиенты потом не задают вопросов: «А почему тут кнопка не как в макете?»
                  • 0
                    Нет, моя верстка обычно проходит этап согласования с руководством.
                  • +1
                    Чувак, такая же фигня. Имею смелость вмешиваться в святой макет, и убеждаю заказчика что я прав.
                    На душе становится легче.
                    • +1
                      Убедить заказчика можно в чем угодно. Но по-настоящему хорошая работа получается тогда, когда дизайнер и верстальщик работают вместе и обсуждают принимаемые решения друг с другом.
                • +4
                  Скорее надо было ответить так: «Хороший верстальщик должен уметь объяснять дизайнеру, что тот не прав, до момента сдачи дизайна клиенту. А хороший дизайнер, соответственно, узнавать мнение верстальщика».
                  • 0
                    Да, вы правы. По моему ответу видно, что я боюсь общаться с дизайнером и боюсь высказывать свою точку зрения. Конечно же, это не так. Если мне кажется, что в дизайне не хватает какого-то элемента, или элемент несет неполную функциональную нагрузку или не несет ее в принципе, мы обсуждаем это, я стараюсь посоветовать, как бы это могло выглядеть лучше.
                  • 0
                    Хороший верстальщик сверстает то, что ему дадут. Проблема дизайна это проблема дизайнера и владельца сайта.
                    • 0
                      А как же профессиональная самостоятельность верстальщика? Во многих компаниях при устройстве на работу положительным качеством верстальщика является способность додумывать то, что не смогли додумать его коллеги.
                      • +2
                        Между додумать, и сверстать как захочется есть тонкая, но важная грань.
                        • 0
                          Я имею в виду именно додумать. Сверстать как захочется я могу и без дизайнера.
                    • +1
                      А с каких полей я должен тратить не оплаченное время, на то что бы подчистить неТорт от дизайнера? Вы не правы. Верстальщики не причем.

                      Врпочем я считаю что людей которые не умеют верстать или ничего не знают о html/css вообще не пушечный выстрел нельзя к дизайну сайта подпускать!
                      • 0
                        Стало быть вы мне в карму плюнули за то, что мое мнение не совпадает с вашим? Ну удачи.
                        • +1
                          o.O
                          • +2
                            Телепат, фигле. Что на самом деле нужно клиенту, догадается. Кто в карму плюнул, узнает :)
                        • 0
                          Я просто хотел сказать, что верстальщик — не робот. Он не должен слепо верстать говнодизайн, опрадываясь тем, что тратит время, что это проблемы дизайнера и собственно владельца сайта. Это вкорне неправильно.
                          • 0
                            Вам сколько лет? Знаете, взрослость обязывает. Я 100000000 раз подумаю, перед теми как тратить свое время на религиозное «красиво» в убыток благосостояния своей семьи.

                            Я искренне понимаю ваше стремление к перфекционизму, но милуйте, ваши потуги будут ценить единицы! И когда среди масс говнокодеров-школьников(они кстати не все говнокодеры), которые демпенгуют рынок, тратить на работу 16 часов вместо 14 а то и 10-8 в зависимости от количества «неТорт» дизайнера, довольно не приятно. Рано или поздно РАЦИОНАЛЬНОСТЬ возмет над вами вверх.

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

                            Хотя в 90% случаев я отправляю ноты дизайнеру. Это нормально.
                            • +1
                              Скорее всего, мы друг друга просто не поняли. Я говорю не об извращенном pixel perfect, а об обычной красоте, когда бесит, что пиксель или два в блоке режут глаз.

                              Совсем другое дело — дизайнерские огрехи. Во-первых, есть такие вещи, которые я могу сделать сам, но дизайнер посмотрит, переделает и потом переделывать верстку придется уже мне. Лишняя трата времени. Во-вторых, я исхожу из мнения, что мне за дизайнера не доплачивают, поэтому советом помочь я могу, но доделывать и тратить свое время, я вряд ли стану.

                              Понимаю, что звучит это сообщение несколько странно, после всех верхних, однако именно так на практике у меня и получается.
                      • 0
                        Хотя бы потому, что не редкость — это одна и та же личность :))
                      • 0
                        Я бы сказал Дизайнерам. Так как верстальщики, чаще в этом вопросе оказываются более продвинутыми, дизайнеры же, я о массах говорю, досихпор рисуют лебедевскую красатульку, и торчат безбожно от своей суперовости! Тьфу ты!
                      • +2
                        Вдохновляет!
                        • +2
                          Спасибо! Пару моментов были для меня, честно говоря, как обухом по голове)
                          • +2
                            Вот это образец настоящего юзабилити! Супер.
                            А не то, что некоторые «теоретики» пытаются нам за него выдать.
                            • +1
                              В основном пользуюсь кнопками Twiiter bootstrap
                              • 0
                                Если бы ещё научились менять перспективу в зависимости от прокрутки — такое себе псевдо-3Д было вы вообще здорово
                                • +2
                                  Думаю, это вполне возможно сделать текущими средствами.
                                • 0
                                  Спасибо за перевод. А дайте ссылочку на источник пожалуйста.
                                  • +2
                                    В конце поста же. Между автором и социальными кнопками.
                                • +1
                                  Огромный плюс еще в том, что всё наглядно показано. Сохранил себе статью. Переводчику спасибо :)
                                  • +2
                                    В восьмом пункте кнопка все же «направо», а не «налево» (an arrow pointing right), а то когнитивный диссонанс приключается.
                                  • +1
                                    В избранное, однозначно.
                                    • +1
                                      Какие красивые кнопки!
                                      • +1
                                        Отличный перевод, спасибо =)
                                        • +1
                                          Спасибо за перевод! Кто знает, что за чудо-шрифт используется в кнопочках? :)
                                        • +1
                                          А какой на кнопках использован шрифт не подскажете?
                                          Очень уж он мне понравился, простенько и со вкусом.
                                        • +1
                                          Спасибо за перевод! Примеры очень стильные, без лишних деталей.
                                          • +4
                                            во многом согласен
                                            во многом не согласен…

                                            1. Кнопка должна быть Глаголом. Кнопка выполняет действие, это глагол. Пример: Загрузка — не правильное название. Загрузить — правильное, но после этого должна сразу пойти загрузка.

                                            2. Про иконки — сложная тема. Иконка должна давать юзеру понять не что будет, а каково состояние кнопки сейчас. К теме про стрелочки… Стрелочка вбок означает что элемент свёрнут, а стрелочка вниз — развёрнут. Я бы такое вообще на кнопке не размещал.

                                            3. Про состояние — во многих пунктах одно и тоже с разных сторон обмусоливается… Идея проста: определить возможные состояния и отрисовать их. Всё.

                                            4. Надо учиывать локализацию.

                                            В целом статья интересная, есть над чем подумать, но это не руководство к действие, увы.
                                            • +1
                                              Есть еще реальный процесс разработки дизайна.
                                              Как правило очень много времени тратится на общий прием концепта, рассматривается не один вариант, и тут до мелочей и проработки деталей руки уже не доходят так как начинают гореть сроки.
                                              Поэтому после принятия концепта должен выделяться отдельный процесс на проработку мелочей, и всех описанных в статье деталей.

                                            • +5
                                              Перевод отличный.

                                              Генератор кнопки для Bootstrap фреймворка
                                              charliepark.org/bootstrap_buttons/
                                              Кнопки на все случаи жизни
                                              www.sciweavers.org/i2style
                                              Еще кнопки
                                              super.hubspot.com/buttons/
                                              Еще известный генератор
                                              css-tricks.com/examples/ButtonMaker/
                                              Кнопки от зубров
                                              www.zurb.com/blog_uploads/0000/0617/buttons-03.html

                                              • +1
                                                Хороший и нужный перевод. А то сейчас такие сайты что хочется дизайнера сжечь или видеть натянутым на кол
                                                • +1
                                                  Тему кнопок можно копать дальше: с т.з. WAI-ARIA и взаимоотношений с клавиатурой (особенно с tab-ом и нюансами outline свойства css)
                                                  • 0
                                                    Также хотелось бы поделиться двумя пакетами для прототепирования интерфейсов. Мне кажется они позвоялют сильно экономить время при разработке интерфейсов:
                                                    Futurico UI Free: designmodo.com/futurico/
                                                    Impressionist UI Free: designmodo.com/impressionist-free/

                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.