Кнопки для сайта создание сайта: Кнопка для сайта: виды и способы создания

Содержание

Онлайн генератор кнопок для сайта

Roman 16 марта 2021, 17:27

Здравствуйте! Что нужно добавить в код кнопки чтобы выровнять ее по центру блока «страницы»? Или как это сделать? Заранее спасибо!

Сергей 11 февраля 2021, 15:04

Простой и понятный генератор. Очень удобно делать кнопки. Спасибо! А можно ли как-то по мимо ссылки, добавить функцию копки «копировать в буфер обмена» ? Облазил весь интернет, но ни в одном генераторе такой возможности не нашел.

Александр 02 февраля 2021, 23:39

Добрый день.
Интересный генератор кнопки.
А такой вопрос — можно ли как-то средствами CSS сделать тень у кнопки? И, скажем, чтобы при наведении мыши она как-то менялась немножко ещё?

Daruse

Да, спасибо за идею, будет время — добавлю

Евгений 04 июня 2020, 13:46

Здравствуйте!
У Вас очень хороший конструктор!
Но есть один маленький вопрос: я выбираю исходный и конечный цвет текста кнопки абсолютно белый (#ffffff), и при просмотре результата он соответствует задуманному.
Но после установки кода на сайт обнаруживается, что начальный цвет голубой и с подчеркиванием (в итоге нет контраста, и надпись какая-то блёклая), при этом после наведения всё соответствует задуманному.
В чём проблема? Как от неё избавиться?

Daruse

Добрый день! Скинь мне ссылку, где вы добавили кнопку, на мою почту (в подвале есть контакты).
Подчеркивание — да, мой косяк, исправил.

Принципы правильного создания кнопок для сайта

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

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

Очень легко и просто взять заранее заданные «пользовательские интерфейсы PSD», которые бесплатно выложила какая-то щедрая душа (и, несомненно, содержащие кнопки, навеянные духом Apple’а). Но почему не потратить минуту на размышления, подходит ли упомянутый стиль кнопок к контексту вашего замысла, и решить, возможно ли создать что-то более оригинальное?
Повторять чьи-то кнопки удобно, так экономится время, но невредно и потратить минуту на более детальное понимание замысла и структуры своих (или чужих) кнопок. Как создан их дизайн? Подходят ли они к интерфейсу/контексту/торговой марке? Есть ли возможность создать что-то уникальное? Достаточно ли выделяются мои кнопки? Нужны ли мне основные, второстепенные, третьестепенные кнопки? Достаточно ли они отличаются друг от друга? Симпатично ли смотрятся?! (Почему нет, все мы хотим создавать классные штучки, правильно?!).

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

1. Подгонка под бренд

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

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

2. Подгонка под контекстуальный стиль

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

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

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

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

4. Рассмотрите закругленные или фигурные кнопки

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

5. Уберите выделение второстепенных элементов пользовательского интерфейса

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

6. Согласующиеся по цвету края/границы

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

7. Поаккуратнее с размытыми тенями

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

8. Немного иконографии внесет свой вклад в юзабилити

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

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

9. Обдумайте главные, второстепенные и третьестепенные стили

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

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

10. Всегда делайте состояния обратной связи

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

Заключение статьи по созданию кнопок для сайта

У вас, дизайнеров, станет происходить все по-своему. Бьюсь об заклад, это будет длительное время, в течение которого вы станете часто отстраняться от экрана, слегка склоняя голову, щурясь и говоря: «Да-а-а, так почти хорошо!». Конечно, это – часть удовольствия, получаемого от процесса создания кнопок для сайтов и талантливые дизайнеры склоняются к тому, чтобы все делать именно так, но я думаю, что хорошо было бы произносить небольшой мысленный комментарий, диалог и размышлять над принимаемыми дизайнерскими решениями.

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

Автор: Pete Orme

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Правила дизайна хорошей кнопки — Дизайн на vc.ru

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

10 288 просмотров

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

Ладно, не сердись, давай повторим банальщину вместе, а новички узнают что-то новое)

1. Горизонтальные отступы

Не стоит делать кнопки слишком узкими или широкими, идеальный отступ для удобного взаимодействия с кнопкой — 32PX с обеих сторон.

2. Вертикальные отступы

Так же кнопка не должна быть слишком высокой или плоской.
18 PX — то что нужно.

Для создания кнопок в Figma я использую Auto Layout, там очень удобно задавать параметры отступов 

3.

Шрифт и его размер

Не стоит использовать слишком большой или маленький размер шрифта, 16pt- самый оптимальный вариант. Так же стоит заметить, что слишком тонкий стиль шрифта может быть плохо читаемым.
Отдельный котел в аду ждёт всех дизайнеров, которые абсолютно во всех кнопках используют кааааапс!
Тебе удобно читать книгу, В которой ВСЁ написано С большой БУКВЫ? Вот и пользователю тоже не очень. Так же, если ты еще не силён в типографике, постарайся не использовать какие-то сложные шрифты с засечками или наклоном. Их трудно сочетать с другими шрифтами, поэтому попробуй что-то простое и распространенное: Roboto, San Francisco или Montserrat.

4. Еще немного правил

Радиус закруглений стоит использовать кратным — 2 px. , так тебе будет проще сочетать его с другими закругленными элементами в дизайне.
Избегай градиентов! В большинстве своём они сильно удешевляют дизайн и делают текст в кнопке плохо читаемым. Если ты хочешь добавить объём, то стоит заменить градиент тенью.

Заключение

Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!

Больше обращай внимание на дизайн продуктов, которыми ты восхищаешься. А главное в этой жизни, не использовать, СУ# *А, КАПС В кнопках!

Больше интересных статей и материалов в моём Telegram-канале
Можешь скачать мой Figma-исходник и поиграть с простыми примерами.
Обнял, приподнял!

Создание кнопки для сайта в онлайн генераторах Сooltext и Da Button Factory

Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Можно ли утверждать, что онлайн генераторы , на которых можно сделать кнопки для сайта, являются бесполезными ресурсами? Или, наоборот, они очень нужные и полезные? Вопрос, конечно, спорный, и, наверное, нет смысла много рассуждать на эту тему. С одной стороны, генераторы кнопок имеют довольно ограниченные возможности и могут загубить в нас творческую личность. С другой стороны, они упрощают нашу жизнь и экономят наше время.

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

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

красивые кнопки.

Как сделать кнопки для сайта в графическом онлайн генераторе кнопок Cooltext.

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

Любой, даже неопытный пользователь сможет без особого труда разобраться с этим сервисом. Хочу сказать, что, кнопка «рендер кнопки» нажимается чтобы увидеть результат (откроется новое окно), только после внесения изменений в текст. Затем можно вернуться обратно для последующего редактирования. Все остальные изменения, которые вы будете делать в настройках кнопки, будут происходить автоматически прямо в окне этого редактора. Из большого количества шрифтов (есть те, которые поддерживают и кириллицу) можно выбрать любой, который вам понравился. Достаточно навести курсор на образец шрифта под надписью «шрифт» и нажать левую кнопку мыши. В открывшемся окне выбрать нужный вам шрифт и нажать «использовать» (Use). Все остальные манипуляции с размером и цветом шрифта, а также формой кнопки делаются, как угодно душе. Хочу добавить лишь несколько нюансов.

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

 

 

 

 

Следующий, довольно интересный момент – это функция «Mouse Over», которая добавляет эффект кнопке, когда нанее наводят курсор мыши.

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

 

 

 

 

 

 

 

 

 

 

В открывшемся окне будет три изображения кнопки для сайтов. Самая нижняя, третья кнопка при наведении на нее курсора будет показывать заданный вами ей эффект «Mouse Over». Для того чтобы кнопка сохранилась с таким эффектом, надо загрузить две верхние кнопки себе на компьютер и скопировать Html код внизу кнопок в любой текстовой редактор. В моем случае получились вот такие две кнопки и Html код.

 

<img src=»/cooltext590780346.png»
onmouseout=»this.src=’/cooltext590780346.png’;»/>

Как устанавливается кнопка на сайт (блог).

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

 

<img src=»http://vorabota.ru/ images/ knopka-1.png» border=»0″ />

А для того чтобы эта кнопка для сайта начала работать как ссылка, можно оформить ее примерно вот таким образом:

<a href=»http://cooltext.com/Buttons» target=»_blank»> <img src=»http://vorabota.ru/ images/ knopka-1.png» border=»0″ /> </a>

Теперь, если кликнуть по этой кнопке, вы перейдете на страницу бесплатного генератора кнопок для сайтов Gooltext. Думаю, как сделать кнопки для сайта с помощью этого онлайн сервиса, разберется даже начинающий пользователь. Хочу добавить, что на этом же онлайн сервисе кроме кнопок для сайтов можно создавать логотипы (как и на сервисе баннеров Banner Fans), включая анимированные. Принцип создания логотипов такой же простой, как и при создании кнопок.

Как создать кнопки для сайта в редакторе Da Button Factory.

Следующий онлайн сервис генерации кнопок, которым предлагаю воспользоваться моим читателям, – это Da Button Factory. Как и на сервисе Cooltext, сделать оригинальные и красивые кнопки в генераторе Da Button Factory не представляет никаких трудностей. Не могу сказать почему, но этот генератор у меня вызывает больше симпатий. Возможно, из-за его удобного и большого интерфейса. К тому же, скорость редактирования кнопок происходит намного быстрее, чем на сервисе Cooltext. А основной принцип создания кнопок для сайтов на этом генераторе практически ничем не отличается от его конкурента. Хотя отличия, конечно же, есть. К примеру, при выборе вида сохранения изображения кнопки в окне «Output type» (Тип выхода) можно выбрать и сохранить изображение в виде файла таблиц стилей CSS. А при выборе сохранения в виде графического изображение появится возможность выбрать и формат png, gif, jpeg и ico.

Количество шрифтов в этом генераторе уступает сервису Cooltext. Но, на мой взгляд, это не так принципиально. Также в этом генераторе отсутствует функция «Mouse Over» как в сервисе Cooltext. Но если мои читатели поняли принцип создания и оформления кнопки с эффектом наведения курсора мыши, то они без труда смогут создать кнопку онлайн двух разных видов. Возможностей оформления внешнего вида кнопки на этом генераторе вполне достаточно.

Напоследок хочу предложить самый, на мой взгляд, лучший онлайн сервис, на котором можно создать кнопки для сайтов: генератор As Button Gen. Попробуйте сами сделать на нем кнопки, и вы в этом убедитесь.

На этом хочу завершить свой рассказ об онлайн генераторах кнопок, которые, буду надеяться, принесут пользу моим читателям. Желаю всем удачи, и до новых встреч на страницах блога Rabota-Vo.ru.

Вас это может заинтересовать:

Создание кнопок для сайта

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

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

Вообще, почему я так много уделяю внимания быстрой загрузки сайта? Да потому, что при прочих равных условиях, в выдаче будет первым тот, который быстрее грузится. Но для лендинг пейдж – это не очень важно, ведь СЕО продвижение посадочных страниц в топ 10 – очень дорогое удовольствие. А кроме того, сложное и затратное по времени.

Поэтому, на лендинг пейдж, трафик, в основном, идет не с поисковой выдачи, а с разных рекламных площадок. (Яндекс Директ, GoogleAdwords, Баннеры и т.д.)

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

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

Создание кнопок для сайта – html разметка.

Будем делать такую кнопку c эффектом нажатия, при наведении.

На этом этапе, нам необходимо написать html разметку кнопки. Для этого существует специальный парный тег «button».

<button> </button>

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

Если вы используете кнопку в форме обратной связи, то необходимо задать тип “submit”:

Это связано с тем, что раньше разные браузеры обрабатывали элемент button по-разному. Internet Explorer передавал текст между тегами “button”, а Mazilla – передавала то, что было прописано в атрибуте “Value”. Сейчас ситуация изменилась. Но все же я рекомендую писать так:

<button type=»submit»> </button>

Для того, чтобы кнопка понимала к какой форме она привязана, необходим элемент “form” и в нем должен быть задан идентификатор формы:

<form>
<button type=»submit»> ПОЛУЧИТЬ ПРАЙС </button>
</form>

Давайте теперь присвоим идентификатор кнопке для того, чтобы ей можно было задать уникальный стиль, в случае если на странице кнопок несколько, и они все разные:

<button type=»submit» form=»zayavka»> ПОЛУЧИТЬ ПРАЙС </button>

Теперь добавим стили нашей кнопки.

Создание кнопок для сайта – CSS разметка

Сначала создадим общий вид, а потом добавим пару строк кода, для эффекта при наведении и сымитируем эффект нажатия.

Поехали…

#firstButton {
display: block; /* Переводим в блочный элемент*/
margin:0 auto; /* Выравниваем по центру */
width: 300px; /* Задаем ширину */
height: 40px; /* Задаем высоту */
border: none; /* Убираем обводку */
background: #188B12; /* Задаем цвет кнопки */
color:#fff; /* Задаем цвет текста */
font:bold 15px ‘Arial’, sans-serif; /* Жирность, Размер, Шрифт */
cursor: pointer; /*Курсор меняется на пальчик, при наведении*/
box-shadow: 0 4px 0 #11620D; /*Задаем тень — х, у, размытие, цвет*/
border-radius: 3px; /*Скругление углов*/
}

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

Теперь добавим стили для кнопки, которые будут применяться при наведении на нее курсора. Создадим эффект нажатия.

#firstButton:hover{
margin-top: 2px; /*опустим кнопку на 2 пикселя*/
box-shadow: 0 2px 0 #11620D; /*Делаем меньше тень на 2 пикселя*/
}

Можно сделать так, чтобы кнопка плавно меняла цвет:

#firstButton:hover{
transition: .5s; /* Скорость изменения цвета */
background: #F96400; /* Задаем цвет кнопки */
box-shadow: 0 4px 0 #BB4A00; /*Задаем тень — х, у, размытие, цвет*/
}

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

А на сегодня — все. Теперь, создание кнопок для сайта у вас не должно вызывать никаких проблем. До встречи на smartlanding

Программы для создания кнопок для сайта

Очень часто при создании сайта необходимо создать кнопки для того или иного элемента.

Однако не все умеют или хотят создавать эти кнопки при помощи программы Photoshop.

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

#1. Crystal Button.

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

Сохранить готовую кнопку можно в форматах GIF, PNG, JPG, BMP, а также в прозрачном формате GIF и PNG. Хотя в бесплатной версии программы опция сохранения не доступна, вы можете сделать скриншот готовой кнопки в окне программы, а затем при помощи программы Photoshop вырезать ее и задать необходимый размер. Главный плюс данной программы то, что даже в бесплатной версии существует огромное количество готовых шаблонов. А инструментов для редактирования достаточно для того чтобы создать уникальную кнопку.

Вот некоторые шаблоны кнопок из данной программы.

Файлы для скачивания

#2. Agama Web Buttons

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

Из дополнительных функций следует выделить то что при редактировании кнопки, возможно задать ссылку для этой кнопки, а также то что при сохранении кнопки кроме графического файла, с самой кнопкой, в формате GIF, PNG, JPEG или BMP, возможно создать еще и HTML станицу в которую вставляется эта кнопка.

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

Вот некоторые шаблоны кнопок доступных в данной программе.

Файлы для скачивания

#3. Free Web Buttons

Данная программа имеет меньше инструментов редактирования и готовых шаблонов кнопок, чем две вышерассмотренные, однако она тоже заслуживает внимание. При помощи инструментов данной программы можно изменять текст надписи на кнопках, задавать ссылку для кнопки, а также создавать горизонтальные и вертикальные меню из кнопок. Изменять размер и цвет кнопки нельзя. Все кнопки, создаваемые при помощи данной программы, являются активными и изменяющими вид при наведении курсора. Сохранение кнопки возможно только в формате PNG и при этом создается HTML страница, открыв которую вас можете проверить работу кнопок. Из этой же страницы вы сможете взять код для вставки кнопок на веб-страницы своего сайта.

Вот некоторые шаблоны кнопок из данной программы.

Файлы для скачивания

Рекомендуем ознакомиться:

Подробности

Опубликовано: 11 Январь 2011

Обновлено: 16 Октябрь 2013

Просмотров: 30044

Как создать кнопку: 7 советов, чтобы на нее кликнули

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

Они повсюду: на электронной почте, домашних страницах, различных сайтах, контактных формах и корзинах интернет-магазинов. Большинство из 4 000 000 000 страниц в сети имеют навигационные кнопки.

Дизайнеры не всегда соглашаются с замыслом кнопки на стадии разработки веб-сайта, но по этой теме есть много исследований. Перечислим семь видов дизайна кнопки для сайта.

1. Использование слов-побудителей

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

Получается, что, кнопки без глаголов, типа:

• Подписка на рассылку;
• Загрузка описания;
• Дополнительная информация.

… Станут более действенными, когда будет добавлен глагол…

• Подписаться на рассылку;
• Скачать описание;
• Узнать больше.

2. Ваша кнопка соответствует тесту «WYLTIWLT» (Would You Like То? I Would Like То)

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

• Хотели бы вы [текст на кнопке]? (Would You Like То?)
• Я хотел бы [текст кнопки] (I Would Like То).

Иными словами, проверьте, может ли текст в кнопке быть прочитан как бы «от лица сайта», а также от лица посетителя. Если текст в кнопке «Перейти к разделу…», это будет читаться как «Вы хотели бы перейти к разделу…?» и «Я хотел бы перейти к разделу…?». Поскольку в обоих случаях эта фраза логична, то текст в кнопке проходит тест.

Если текст в кнопке «Посмотреть ваши результаты», то, если задать вопрос, получается «Вы хотели бы посмотреть ваши результаты?» и «Я хотел бы посмотреть ваши результаты». Второй вариант здесь не очень подходит, поэтому данный текст не пройдет тест. Этот быстрый способ убедиться в том, что текс на каждой кнопке, начинающийся с глагола, работает от лица маркетолога, a также от лица посетителя сайта. Кстати, каждая кнопка на Фейсбук со словом-действием проходит данный тест!

Такой метод был предложен Джонатаном Ричардсом, который создал эту аббревиатуру: WYLTIWLT.

3. Я или Вы: от первого или от второго лица?

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

Кнопку c местоимением от 1 лица («Создать мою учетную запись») нажимали на 24% посетителей больше, чем на кнопку c местоимением от 2 лица («Создать вашу учетную запись»). Разработчики говорят o том, что надписи в кнопке c местоимением от 1 лица работают лучше, так как они говорят за посетителя, совершающего действие, то есть, от человека, который держит мышь или нажимает на экран.

Юджин Шварц как-то сказал, что нужно «вставлять беседу, которую посетитель ведет у себя в голове». И поэтому, если посетители видят ваши призывы к действиям, то нужно, чтобы они сами говорили o том, что они хотят делать. («Я хочу…»)

4. Используйте цвета, которые контрастируют c другими элементами

Наши глаза беспрерывно сканируют пространство, ища элементы, на которых взгляд останавливается. Все, что создает контраст c окружением, автоматически привлекает внимание. Такое явление заложено в основе природы нашего зрения и мозга, называется это эффектом Фон Ресторфа.

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

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

 

 

5. Сделайте кнопку большого размера

Актуально для пользователей смартфонов и планшетов. Пользователю должна быть предоставлена возможность комфортно нажимать на кнопку, как co смартфона, так и c планшета. Следовательно, размер кнопки должен быть соответствующим человеческому пальцу. Компания Apple рекомендует минимальный размер кнопок 44×44 пикселей, но исследования компании МIT Touch Lab показывают, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57.

Это связано c тем, что кончик пальца имеет не округлую, а овальную форму. А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), ее можно сделать шире: 45×72 пикселей.

6. Уменьшите уровень вовлечения («Начать шоппинг» вместо «Купить сейчас»)

Ряд действий ведет к взятию на себя бо́льших обязательств, чем другие. Так же и с кнопками – некоторые из них означают больше обязательств. Они могут вызывать разные психологические реакции и доставлять больше беспокойства. Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Протестированы языки кнопок для двух «Начать тест» и «Прочитать обзор». Вторая кнопка получила на 124% больше кликов.

Вся разница заключена в размере обязательств. Кнопка «Начать тест» наводит посетителя на мысль o том, что, щелчок по этой кнопке вовлечет его в потенциально длительный процесс. А «Прочитать обзор» подразумевает меньшие временные затраты. Аналогично, кнопка «Начать шоппинг» звучит как изучение каталога продукции. А кнопка «Купить сейчас» – это словно стремление сайта залезть в ваш бумажник.

 

 

7. Создавайте кнопки на основе кода, а не графики

Слово «кнопка означает графическое изображение, «ссылка» – значит текст. Но находчивые дизайнеры создают кнопки, которые являются картинками, но сделаны как ссылки.

У графических кнопок есть ряд проблем.

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

Кнопки на основе кода подобных проблем не создают. Можно создавать отличные кнопки с помощью НTML и СSS, и поэтому нет ни одного весомого довода, почему лучше делать графические кнопки. Кнопки, созданные на основе НTML или СSS, иногда называют «пуленепробиваемые», потому что они отображаются везде, в том числе и в email.

Если у вас на сайте (в приложении) есть графические кнопки, и возникли проблемы c их редактированием, хотя бы убедитесь, что «Alt» включает надпись на кнопке. Таким образом, она будет видна в email сообщениях, даже если абонент не включил загрузку изображений.

 

Нажатие кнопки

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

Дизайн кнопок для веб-сайтов и мобильных приложений

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

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

Дизайн кнопок, которые помогают пользователям с небольшой помощью Justinmind

Загрузите бесплатно

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

Основные правила дизайна кнопок

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

1. Сделайте его интерактивным

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

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

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

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

2. Упростите поиск и прогнозирование

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

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

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

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

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

У вас должен быть согласованный дизайн кнопок, который просвечивает на каждом отдельном экране вашего веб-сайта, независимо от того, к какой функции они относятся. Когда у вас есть стиль, который вы можете воспроизвести на всех своих кнопках, установите стандартное место для кнопок на вашем веб-сайте.Следуйте логике и ожиданиям обычных пользователей — например, столкнувшись с кнопками «предыдущий» или «следующий», большинство пользователей ожидают, что «предыдущий» будет слева, а «следующий» — справа.

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

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

Текст внутри кнопки не нужно ограничивать «ОК» и «Отмена». Фактически, ваше удобство использования улучшится, если отложить эти общие термины в сторону и сосредоточиться на действии, которое выполняет каждая кнопка. Наличие кнопок с надписью «Удалить навсегда» или «Отменить бронирование» может гарантировать, что ваши пользователи понимают каждую кнопку, и даже улучшить удобство использования, уменьшив вероятность ошибок пользователей.

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

4. Размер имеет значение: есть кнопки, на которых люди могут нажимать

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

Размер вашей кнопки особенно важен для мобильного дизайна. Слишком большая кнопка приведет к визуально заряженному экрану, в то время как слишком маленькая кнопка не может быть нажата обычным пальцем.В 2003 году Touch Lab Массачусетского технологического института опубликовала исследование, которое показало, что большинство кончиков пальцев имеют ширину 8–10 мм.

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

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

5. Не используйте кнопку для всего.

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

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

Дизайн кнопок

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

6. Всегда предоставляйте обратную связь или рискуйте гневом пользователя

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

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

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

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

Дизайн мобильных кнопок в приложениях для Android и iOS

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

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

1. Придерживайтесь основных принципов дизайна пользовательского интерфейса

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

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

Когда «касание» является основным методом ввода для вашего мобильного приложения, принципы материального дизайна Android рекомендуют, чтобы цели касания имели размер не менее 48 x 48 точек на дюйм и не менее 8 точек на дюйм (или более) между ними. Это необходимо для обеспечения сбалансированной плотности информации и удобства использования.

С точки зрения формы, это действительно зависит от того, для чего вы проектируете. Например, в дизайне пользовательского интерфейса Android плоские и выпуклые кнопки материала должны иметь высоту 36dp, минимальную ширину 88dp и радиус угла 2dp (плоский) / иметь высоту по умолчанию 2dp (поднятый).

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

2. Используйте цвет, чтобы сделать дизайн кнопок пользовательского интерфейса действенным.

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

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

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

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

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

3. Помогите пользователям расставить приоритеты задач, устраняя трение на экране.

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

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

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

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

4. Поощряйте пользователей визуальной обратной связью в дизайне кнопок пользовательского интерфейса.

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

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

Изменение цвета кнопки покажет пользователям, что их действие было принято. Тонкая анимация и движение сообщат о намерении кнопки и побудят пользователя выполнить этот щелчок — счастливый пользователь, счастливых вас!

Тестирование дизайна кнопок

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

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

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

  • Могут ли пользователи найти все основные функции?
  • Сколько времени в среднем у них уходит на каждую функцию?
  • Понимают ли пользователи, как каждая функция соотносится с другими в важных вопросах?
  • Логична ли навигация для пользователей?

Когда дело доходит до тонкой настройки дизайна кнопок, возможно, немногие методы столь же полезны, как A / B-тестирование. Особый фаворит среди маркетологов для кнопок CTA, этот вид тестирования заключается в тестировании двух разных версий одной и той же кнопки и сравнении их эффективности. Если ваша команда хочет протестировать множество различных дизайнов кнопок одновременно, многовариантное тестирование может быть более быстрым и практичным вариантом.

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

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

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

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

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

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

Этот набор пользовательского интерфейса уже предустановлен в Justinmind, но если хотите, обратите внимание на компоненты библиотеки Web Wireframing.

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

Вы можете узнать больше о наборе пользовательского интерфейса Bootstrap во всей его красе в нашем специальном посте.

Kendo UI kit — это забавный инструмент, который всегда в вашем распоряжении. Поставляется с кнопками всех размеров, как основных, так и дополнительных.Благодаря нескольким вариантам размера создание вашего следующего UX-дизайна будет намного проще и быстрее с Kendo. Не говоря уже о том, что нам просто нравится дизайн кнопок на группе кнопок!

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

Как заставить посетителей сайта нажимать ваши кнопки

Кнопки — один из самых распространенных элементов пользовательского интерфейса. Они позволяют пользователям взаимодействовать с системой и предпринимать действия, делая выбор. Кнопки используются в формах, домашних страницах веб-сайтов, диалоговых окнах и панелях инструментов.

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

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

Анатомия идеальной кнопки

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

Анатомия пуговицы

Чего следует избегать при разработке кнопки

Кнопки, не похожие на кнопки

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

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

  • Квадратная кнопка с заливкой
  • Круглая кнопка с заливкой
  • Круглая кнопка с заливкой и тенями
  • Кнопка с контуром / призраком

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

Примеры распространенных дизайнов кнопок

Расплывчатые или вводящие в заблуждение надписи на кнопках

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

Используйте ярлыки, которые четко объясняют, что делает кнопка, и подтверждают действие, которое пользователь собирается предпринять. Также важно учитывать контекст кнопки и соответствующим образом адаптировать метку.Избегайте меток «да» или «нет» и вместо этого используйте описательные метки, такие как «Удалить» или «отменить».

Очистить метку кнопки, подтверждающую действие, которое пользователь собирается предпринять

Кнопки, которые не дают визуальной обратной связи о своем состоянии

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

— Якоб Нильсен

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

Кнопки дизайна, которые имеют такие состояния, как:

  • Основное состояние — кнопка интерактивна и готова к использованию
  • Активно — Пользователь нажал кнопку
  • Hoover — Курсор помещен над интерактивным элементом
  • Сфокусирован — Кнопка была выделена с помощью клавиатура
  • Выполняется — Действие обрабатывается
  • Отключено — Кнопка не интерактивна

Различные состояния кнопок

Неподходящий дизайн кнопок

«Согласованность — один из самых действенных принципов удобства использования: когда все работает одинаково, пользователям не нужно беспокоиться о том, что произойдет». »- Якоб Нильсен

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

Согласованный и несовместимый дизайн кнопок

Использование слишком большого количества кнопок

«Практическое правило для UX: больше возможностей, больше проблем.”

— Скотт Бельски, директор по продуктам

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

Иерархия кнопок и действия

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

CTA

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

Общие CTA включают кнопки веб-сайтов, такие как UXPin, у которых есть очень заметная кнопка CTA «Присоединяйтесь бесплатно» с высокой цветовой контрастностью.

Отличная кнопка CTA

Психология, лежащая в основе эффективной копии кнопки CTA

Чтобы кнопка CTA была эффективной, ей нужен не только хороший дизайн, но и копия, которая побуждает к действию.Плохая копия кнопки CTA сбивает с толку, вызывает ошибки и заставляет пользователей отказываться.

Вот несколько советов, основанных на психологии, которые помогут укрепить вашу копию призыва к действию:

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

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

Используйте язык, подтверждающий действие пользователя. : Используйте слова, которые определяют действие, которое пользователь собирается предпринять, например «Опубликовать», а не просто «Отправить». Это устраняет неуверенность и дает пользователю уверенность в своих действиях.

Используйте императивы : Императивы превращают фразы в команды. Они уменьшают количество слов на копии кнопки, облегчая ее чтение. Вместо «Да, создать мою учетную запись» просто используйте «Создать учетную запись».

Основные действия

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

Вторичные действия

Вторичные действия — это альтернативы первичным действиям. Они включают кнопки «назад» и «отмена». Эти кнопки веб-сайта должны иметь меньшую визуальную заметность, чтобы снизить риск ошибки и побудить к позитивным первичным действиям.

Разница в визуальной заметности между первичными и вторичными действиями

Третичные действия

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

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

Рекомендации по стилям, цвету и дизайну кнопок

Форма кнопки

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

Есть и другие формы кнопок, которые вы можете использовать, но их следует использовать осторожно, потому что некоторые пользователи могут их не распознать. В их числе:

Круглые кнопки : это кнопки с закругленными краями.

Пуговица круглая

Кнопки-призраки / линии : это кнопки без сплошной заливки. Их лучше всего использовать для второстепенных действий.

Кнопка линии

Плавающие кнопки действий (FAB) : Эта кнопка используется для основных действий.

Плавающая кнопка действия

Кнопки с пиктограммами и ярлыками : Эти кнопки имеют как пиктограмму, так и ярлык.

Значок и кнопка с надписью

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

Значок кнопки

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

Цветовые палитры

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

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

Язык цвета

Размещение кнопок и макет страницы

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

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

Размещение кнопок

Дизайн кнопок с лучшими инструментами пользовательского интерфейса

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

Дизайн кнопок для Интернета — Руководство и примеры на 2020 год

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

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

В этой статье мы обсудим :

  1. Почему кнопки важны в UX?
  2. Веб-кнопки на протяжении многих лет
  3. Разработка полезных состояний кнопок
  4. Рекомендации по дизайну веб-кнопок
  5. Измерьте силу нажатия кнопок
  6. Кнопки эффективны при правильном использовании

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, а Nielsen считает, что 20% более вероятны. И эксперты прогнозируют, что в наши дни продолжительность нашего внимания даже короче, чем у золотой рыбки — около 8,25 секунды.

Итак, где кнопки вписываются в это уравнение?

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

Веб-кнопки по годам

Как мы знаем, веб-дизайн сильно изменился за десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в стадии разработки» и навигация по i-frame ушли в прошлое. Хотите прогуляться во времени? Взгляните на это ностальгическое путешествие по прошлому Интернета.

Как и Интернет в целом, веб-кнопки также изменили свое лицо и стиль. Серые кнопки с градиентами и закругленными краями господствовали почти десять лет назад, благодаря смартфонам, таким как Apple iPhone, доминирующим в мире дизайна.

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

К 2015 году плоский дизайн все еще имел место, но веб-дизайнеры начали возвращаться к тому, чтобы «делать кнопки похожими на кнопки», используя тени или градиенты, чтобы они выглядели «кликабельными». По состоянию на 2019 год мы все еще на этой арене.

Хотите узнать больше об эволюции веб-кнопок? Посмотрите этот график с примерами из Dribbble.

Разработка полезных состояний кнопок

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

Дизайн кнопки в ее различных состояниях так же важен, как и ее внешний вид.

Учитывать состояния кнопок, такие как :

Активные или отключенные кнопки

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

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

Кнопки с фокусом

Кнопки фокусировки — важные функции для обеспечения доступности, особенно вспомогательные устройства или навигация с помощью клавиатуры. Хотя браузеры обычно предлагают стили для кнопок по умолчанию, некоторые разработчики удаляют эту функцию для согласования со стилями и цветами бренда. Часто кнопка фокуса включает контур или свечение, чтобы пользователи знали, что кнопка активна или может использоваться.

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

Кнопки состояния наведения

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

Выбранные кнопки

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

Кнопки, выбранные в качестве ползунков

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

Рекомендации по дизайну веб-кнопок

Дизайн — это лишь часть того, что делает кнопку хорошей кнопкой в ​​Интернете. И действительно, в отношении дизайна не так много правил, если он доступен, согласован и работает для ваших пользователей. Но прошли те времена, когда текст «щелкнул здесь» и кнопкам не хватало единообразного стиля и подхода. Учтите эти рекомендации при разработке веб-кнопок в 2020 году.

Соответствуйте своему дизайну и задокументируйте его

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

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

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

Кнопки также можно интерпретировать как текстовые ссылки. Опять же, выбор способа отображения и функции текстовых ссылок также должен быть отражен в вашем руководстве по стилю.

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

Не полагайтесь только на значки как на кнопки

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

По словам Авроры Харли из Nielsen Norman Group, «понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.”

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

Используйте четкую и доступную копию

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

Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать работу» — лучше всего подходят для кнопок с действием.

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

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

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

При разработке

учитывайте размеры (и досягаемость) кнопок.

Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах 3,5 дюйма? Может быть, нет, но вы можете знать, почему это важно.

Размер кнопок — и место их попадания на экраны смартфонов и мобильных устройств — во многом влияет на UX.

  • Если кнопка находится слишком далеко от одной стороны экрана, пользователь не сможет дотянуться до нее большим пальцем
  • Если кнопка слишком мала, ее может быть трудно нажать большим или большим пальцем
  • Плохая контрастность может затруднить просмотр кнопок и, следовательно, затруднить эффективное нажатие на них на мобильных устройствах

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

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

Доступность важна и для кнопок

Создавая что-либо для аудитории, делайте это доступным.Дизайн для аудитории — это дизайн для всех, поэтому доступность так важна, когда вы вносите изменения и обновления в свой дизайн и кнопки в 2020 году.

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

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

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

Измерьте влияние кнопок

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

Но как именно можно эффективно протестировать кнопки на своем веб-сайте?

Лучший способ проверить кнопки, особенно в CTA, — это A / B-тестирование. A / B-тестирование позволяет настроить два подхода к призыву к действию и проверить эффективность каждого, чтобы увидеть, какие варианты лучше всего подходят реальным людям.

Бесплатные инструменты, такие как Google Analytics или Google Tag Manager, можно быстро и легко настроить для отслеживания обеих версий вашего CTA или кнопки для достижения наилучших результатов.

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

Кнопки эффективны при правильном использовании

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

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

Da Button Factory — Бесплатный генератор кнопок CTA

Что случилось со старой «фабрикой Da Button Factory»?

Da Button Factory была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопки с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые учатся писать в блоге, способствующие конверсии.

Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari для использования этого инструмента. У вас могут возникнуть проблемы, если вы используете Internet Explorer — в этом случае просто загрузите один из рекомендуемых браузеров.

Как добавить кнопку к веб-сайту, электронной почте или сообщению в социальных сетях

Есть несколько способов сделать это.

Вариант №1: Загрузить файл изображения кнопки

Это самый простой способ. Просто выберите нужный тип файла и нажмите кнопку загрузки.

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

Вариант № 2: Реализуйте кнопку как HTML + CSS

Da Button Factory также является бесплатным генератором кнопок CSS. Этот вариант требует немного больше знаний HTML и CSS, но в результате веб-страница или электронное письмо будут работать быстрее (поскольку нет необходимости загружать изображение).

Для этого создайте элемент HTML, например «div» или «button», напишите копию с призывом к действию и назначьте ей класс.В этом примере мы назовем класс my-cta-button.

Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу с помощью тегов «style».

Вот и все! Теперь вы разработали и реализовали свою собственную кнопку HTML.

Как создавать призывы к действию с высокой конверсией

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

  1. Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и фоном, а также между кнопкой и фоном страницы достаточно контраста.
  2. Сообщите своим пользователям, что они получают, нажав на ваш CTA. Вместо того, чтобы использовать что-то общее, например «Щелкните здесь», сделайте описательный текст, например «Купить сейчас» или «Загрузить».
  3. При написании CTA-копии используйте от первого лица. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
  4. Сделайте свой CTA-текст кратким и по существу.Избегайте создания излишне многословных призывов к действию.
  5. Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Загрузите СЕЙЧАС», «Получите БЕСПЛАТНУЮ электронную книгу» или «Сэкономьте 10 $».

Ваша очередь

Da Button Factory от ClickMinded — это онлайн-производитель кнопок, который позволяет быстро и бесплатно создавать красивые кнопки с призывом к действию с высокой конверсией для веб-сайтов, почтовых кампаний или публикаций в социальных сетях.

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

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

Как создать собственную веб-кнопку | Small Business

Как бы сложно ни было привлечь клиентов на веб-сайт вашей компании, еще сложнее заставить их щелкнуть ваши объявления или другие ссылки на информацию о продуктах и ​​услугах.Веб-кнопки — это гиперссылки, содержащие графические изображения, призванные привлечь внимание посетителей к вашим ссылкам и побудить их щелкнуть. Вы можете создать свою собственную графическую веб-кнопку с помощью инструмента редактирования изображений, такого как Windows Paint, и вставить его на веб-страницу с помощью тега «» языка HTML.

Щелкните шар Windows. Введите «Paint» в поле поиска и нажмите «Paint» в списке результатов.

Создайте новое изображение или отредактируйте существующее, чтобы создать веб-кнопку.

При необходимости измените размер изображения с помощью инструмента «Изменить размер» в Paint.Щелкните вкладку «Главная», затем значок изменения размера на панели изображений и нажмите «Изменить размер в пикселях». Установите флажок «Сохранить соотношение сторон», если у него нет флажка. Введите новую ширину изображения в поле ввода «По горизонтали», если вам нужно, чтобы изображение было определенной ширины, или введите новую высоту изображения в поле «По вертикали». Paint автоматически поддерживает правильное пропорциональное соотношение между высотой и шириной изображения, чтобы оно не выглядело искаженным.

Нажмите кнопку «Paint», затем «Сохранить как» и выберите «JPEG» в качестве формата файла.

Введите имя изображения в поле «Имя файла» и нажмите кнопку «Сохранить».

Щелкните сферу Windows и введите «Блокнот» в поле поиска. Щелкните Блокнот в списке результатов.

Щелкните меню «Файл» и пункт меню «Открыть». Используйте проводник, чтобы найти HTML-файл, в который вы хотите добавить свою веб-кнопку. Дважды щелкните имя файла, чтобы открыть его.

Прокрутите вниз до раздела веб-страницы, где вы хотите добавить кнопку «Интернет».

Вставьте тег HTML «».Тег «» указывает браузеру загрузить и отобразить изображение, найденное по определенному веб-адресу или URL. При использовании с атрибутами «ширина» и «высота» он также может указывать высоту, ширину и альтернативный текст изображения. Используйте тег «», чтобы превратить ваше изображение в гиперссылку, которая ведет пользователя на веб-страницу, указанную URL-адресом, присвоенным атрибуту «href».

Например, следующий код веб-кнопки сообщает браузеру пользователя загрузить и отобразить файл JPEG Buttonimage.jpg, который имеет ширину 800 пикселей и высоту 100 пикселей:. Если пользователь щелкнет это изображение, браузер загрузит веб-страницу по URL-адресу myweb.com. Если браузер не может отобразить JPEG, вместо этого он покажет текст «Щелкните для сделок».

Нажмите «Ctrl-S», чтобы сохранить вашу работу.

Ссылки

Ресурсы

Советы

  • Если в вашей компании нет художника-графика, воспользуйтесь онлайн-сервисом, например CoolText, Button Maker или Da Button Factory, чтобы создать для вас изображения веб-кнопок. Эти сайты проведут вас через процесс выбора нужного типа кнопки; его размер, форма и цвет; плюс формат и внешний вид текста кнопки.

Предупреждения

  • Избегайте использования изображений, которые вы найдете в Интернете, в качестве веб-кнопок, если у вас нет явного письменного разрешения от правообладателя изображения. Вы также можете избежать проблем с нарушением авторских прав, используя изображения из Open Clip Art Library. Эти изображения находятся под лицензией Creative Commons Public Domain Dedication, и вы можете использовать их любым удобным для вас способом.

Writer Bio

Аллен Бетеа пишет статьи по программированию, веб-дизайну, операционным системам и компьютерному оборудованию с 2002 года.Он имеет степень бакалавра наук UNC-Chapel Hill и степень AAS в области офисных технологий, машиностроения / черчения и интернет-технологий. Аллен имеет обширный опыт работы с настольным и системным программным обеспечением для операционных систем Windows и Linux.

13 новейших и лучших дизайнов кнопок, которые нельзя пропустить в 2018 году

Кнопки

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

Однако опытным профессионалам таких статей / руководств уже недостаточно, чтобы создать отличную и полезную кнопку. Вам действительно нужны новые подсказки, идеи или вдохновение, чтобы создать уникальную и отличительную кнопку для ваших веб- / мобильных приложений?

ОК! Вот 13 последних и лучших практик кнопок , которые вы не можете пропустить в 2018 году.И надеюсь, что они могут вас как-то вдохновить:

1. FAB Microinteraction

* Дизайнер: Mayur Kshirsagar

* Основные моменты: Очень крутая плавающая кнопка навигации и хорошо продуманный дизайн навигации Circle

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

* Что вы можете узнать:

Добавьте плавающие кнопки навигации, чтобы привлечь внимание пользователей и улучшить пользовательский опыт

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

Кроме того, вы также можете узнать еще секретов о том, как с легкостью создать отличные плавающие кнопки.

2. Интерактивный дизайн кнопок ввода

* Дизайнер : Knarik & Robert

* Основные характеристики: отличное взаимодействие кнопок, элементы геймификации и аккуратные скользящие эффекты

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

* Что вы можете узнать:

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

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

3. Микровзаимодействие для кнопки печати

* Дизайнер: Quovantis

* Основные моменты: используйте «кнопку + анимацию», чтобы более наглядно показать функции кнопок.

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

* Что вы можете узнать:

Добавьте яркую анимацию к вашим кнопкам на основе различных меток кнопок, функций и сценариев

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

4. Микровзаимодействие

* Дизайнер : Альваро Сечилла

* Основные моменты: эффектные эффекты наведения для кнопок

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

* Что вы можете узнать:

Оптимизируйте дизайн кнопок с богатыми эффектами наведения или взаимодействия

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

5. Кнопка / загрузчик динамической загрузки

* Дизайнер: ali said

* Особенности: идеальное сочетание кнопок загрузки и индикаторов выполнения

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

* Что можно узнать:

Улучшите дизайн кнопок загрузки с помощью правильной анимации загрузки

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

6. Анимация скользящей кнопки

* Дизайнер: Serhad iletir

* Основные моменты: умная скользящая кнопка и цветовой градиент

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

* Что вы можете узнать:

Улучшение скользящих кнопок с изменением цвета, непрозрачности, формы и многих других визуальных свойств

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

7.Microinteraction 04

* Дизайнер: Alvaro Secilla

* Основные моменты: материализуйте кнопку CTA в сочетании функций и функций кнопок

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

* Что вы можете узнать:

Создайте материализованный вид кнопок, чтобы их было легче понять

8. Чехлы для кнопок сенсорного экрана

* Дизайнер: Халил Ханна

* Основные моменты : Упростите дизайн кнопок с помощью изменения цвета, значков и фоновых фотографий

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

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

* Что вы можете узнать:

Оптимизируйте свое веб-приложение с помощью упрощенных, но не скучных дизайнов кнопок

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

9. Poodle Switch

* Дизайнер: Ванесса Браун

* Выделение: симпатичная скользящая кнопка и творческие переходы между 2D и 3D эффектами

Poodle Switch показывает симпатичные скользящие кнопки с великолепными визуальными эффектами. Кнопка со значком милого пуделя трансформируется из 2D в 3D в процессе скольжения от одного конца к другому. А вместе с изменением текстовой метки кнопок, весь дизайн становится действительно интуитивно понятным, чтобы пользователи четко знали функции этой кнопки.

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

* Что вы можете узнать:

Улучшите дизайн кнопок веб / мобильных приложений с помощью 3D / 2D и скользящих эффектов

Реальная скользящая кнопка, как одна из основных кнопок, которую дизайнеры используют в своих приложениях / проекты веб-сайтов, также могут быть крутыми, чистыми, простыми и привлекательными, если вы добавите правильные 2D / 3D / скользящие эффекты и тексты. Визуальные эффекты таких кнопок тоже будут отличными.

10. Меню

* Дизайнер: Олег Фролов

* Особенности: Уникальный переключатель / кнопки меню

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

* Что вы можете узнать:

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

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

11. Может ли кто-нибудь нажать на нее

* Дизайнер: Мехди Махдлоо

* Основные моменты: Очень заманчивая микрокопия

Может кто-нибудь нажать, это эмоциональный дизайн кнопки.Микрокопия кнопки гласит: «Может ли кто-нибудь ее нажать? Пожалуйста … »Это очень остроумный и увлекательный дизайнерский прием. Прочитав эту копию, я просто не могу удержаться от нажатия на нее, хотя я не знаю, для чего используется эта кнопка. А ты?

* Что вы можете узнать:

Добавьте привлекательную микрокопию на свой веб-сайт / кнопки мобильного приложения

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

12. Элементы пользовательского интерфейса

* Дизайнер: Мэтт Бонини

* основные моменты: отличное сочетание кнопок-призраков и плоских кнопок

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

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

* Что вы можете узнать:

Улучшите дизайн своего веб-сайта / приложения с помощью кнопок-призраков и плоских кнопок

Создание контраста с изменением цветов, теней, размеров и других визуальных свойств сделает дизайн ваших кнопок совершенно другим .

13. Реалистичные кнопки

* Дизайнер: Тоби Сантасо

* Основные моменты: реалистичные кнопки и крутой светящийся эффект

Realistic Buttons использует реалистичный стиль дизайна, добавляя три реальных кнопки с крутым светящимся эффектом . И эти кнопки настолько похожи на реальные кнопки различных электронных устройств, что люди, конечно же, не могут не нажимать на них. Таким образом, создание таких реалистичных кнопок — очень хорошая идея для повышения рейтинга кликов на веб-сайте / мобильном приложении.

* Что вы можете узнать:

Добавьте реалистичные кнопки, чтобы усилить ощущение знакомства

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

Mockplus поможет вам легко и быстро создать и протестировать дизайн кнопок веб / мобильных приложений

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

Однако проблема в том, что вы просто не знаете, какой инструмент прототипирования подойдет вам лучше всего? Не волнуйтесь! Mockplus , более простой и быстрый инструмент для создания прототипов с мощными функциями, станет вашим лучшим выбором для тестирования и улучшения дизайна кнопок вашего веб-сайта / мобильного приложения:

Step1. Создавайте различные кнопки с разными компонентами кнопок

Каждому веб-сайту / мобильному приложению требуется много кнопок с разным внешним видом, формами и стилями.Это, безусловно, потребует, чтобы используемый инструмент прототипирования мог предлагать пользователям больше возможностей или функций для создания всех необходимых типов кнопок для оптимизации дизайна их интерфейсов. Mockplus предлагает множество компонентов кнопок для дизайнеров:

* Используйте компоненты «Button» для создания основных кнопок, например кнопки CTA

* Используйте компоненты «Icon Button» для создания кнопок с иконками

* Используйте «Icon and Label» компоненты для создания кнопок со значками и метками

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

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

Шаг 2. Добавьте кнопки со специальными фоновыми фотографиями с помощью компонентов «Изображение»

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

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

Шаг 3. Добавьте заманчивую микрокопию с компонентами «Этикетка» и «Текстовая область»

Заманчивая микрокопия играет важную роль в привлечении внимания пользователей и побуждении их щелкнуть мышью. С Mockplus вы можете легко добавить компоненты «Ярлык» и «Текстовая область», чтобы настроить идеальный текст для дизайна ваших кнопок.

Шаг 4. Сохранение, повторное использование и совместное использование стилей кнопок с помощью «Component Style»

В дизайне веб-сайтов / мобильных приложений дизайнеры обычно повторно используют стили различных кнопок.Это не только экономит драгоценное время дизайнеров, но и позволяет им улучшить внешний вид. В Mockplus вы можете использовать « Component Style » для свободного сохранения, повторного использования и обмена стилями кнопок одним щелчком мыши.

Шаг 5. Добавьте интеллектуальные взаимодействия, чтобы сделать ваши кнопки динамичными и привлекательными.

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

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

Шаг 6. 8 способов протестировать и поделиться дизайном кнопок

Mockplus предлагает 8 способов протестировать и поделиться дизайном ваших кнопок. Они чрезвычайно полезны для дизайнеров, которые хотят собирать отзывы других дизайнеров / пользователей и улучшать свой дизайн.

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

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

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

Заключение

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

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

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

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

основных типов кнопок в пользовательских интерфейсах | by tubik

Кнопки — одни из самых популярных интерактивных элементов пользовательского интерфейса. Более того, они жизненно важны для создания прочного взаимодействия и положительного пользовательского опыта.Сегодня, продолжая серию статей глоссария UI / UX, мы собрали здесь определения и примеры для широко используемых типов кнопок, которые мы ежедневно видели на веб-сайтах и ​​в мобильных приложениях.

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

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

Давайте проверим, какие типы кнопок широко используются в мобильных и веб-интерфейсах.

Кнопка призыва к действию (CTA) — это интерактивный элемент пользовательского интерфейса, который призван побудить пользователя совершить определенное действие. Это действие представляет собой конверсию для определенной страницы или экрана (например, покупка, контакт, подписка и т. Д.), Другими словами, превращает пассивного пользователя в активного. Таким образом, технически это может быть любой тип кнопки, поддерживаемый текстом призыва к действию. Что отличает его от всех других кнопок на странице или экране, так это тем, что он привлекает внимание: он должен привлекать внимание и побуждать пользователей к совершению необходимых действий.

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

Здесь терминология прозрачная: это кнопка с фрагментом текста. Это означает, что копия не интегрирована ни в какую форму, заполненную вкладку или что-то подобное.Итак, это не похоже на кнопку в нашем стандартном понимании этого явления в физическом мире. Копия является его единственным визуальным представителем. Тем не менее, это живой контроль, который позволяет пользователям взаимодействовать с интерфейсом. Вы также можете увидеть эти кнопки, отмеченные цветом или подчеркнутые. Кроме того, текстовые кнопки, используемые в заголовке веб-сайта, связывают пользователя с основными разделами контента веб-сайта — и в этом случае они никак не помечаются, поскольку все (или большинство) элементов в зоне заголовка по умолчанию интерактивны.Текстовые кнопки обычно используются для создания дополнительных интерактивных зон, не отвлекаясь от основных элементов управления или элементов CTA.

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

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

Процесс взаимодействия с приложением HealthCare показывает кнопки, открывающие списки деталей, которые врач может добавить к конкретному счету: при нажатии кнопки открывается раскрывающийся список параметров. Как только вы выберете один, большая кнопка исчезнет, ​​оставив выбранный вариант и маленькую кнопку с плюсом на случай, если вы захотите еще раз проверить список.

Это кнопка, скрывающая меню. Когда вы щелкаете или касаетесь его, меню расширяется. Такой вид меню (и кнопки тоже) получил такое название из-за своей формы, состоящей из трех горизонтальных линий, которые выглядят как типичный гамбургер «хлеб-мясо-хлеб». Сегодня это широко используемый интерактивный элемент веб- и мобильных макетов; Тем не менее, споры о его плюсах и минусах все еще ведутся.

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *