Товаров: 0 (0р.)

Дизайн кнопок: Страница не найдена | UXPUB

Содержание

Дизайн кнопок | Convert Monster

03 июня 2021

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

Сложность: средняя

4 мин.

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

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

Кнопки — основной элемент взаимодействия пользователя с ресурсом. Ранее мы уже писали полезную статью для маркетологов о CTA-кнопках. Сегодня разберем тему их непосредственной реализации. 

Типы кнопок 

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

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

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

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

Какой цвет и шрифт лучше использовать?

Мы предлагаем руководствоваться следующим: 

  • Бренбук или любая другая устоявшаяся стилистика компании. 
  • Язык цвета и логика. Например, красный цвет ассоциируется с опасностью, поэтому элемент “удалить” делаем красного цвета. Зеленый цвет ассоциируется со спокойствием, элемент “сохранить” делаем зеленым.
  • Если блоки меняют цвет, кнопки тоже должны подстраиваться и выделяться.
  • Выбирайте хорошо читабельные и простые шрифты со средней плотностью. Цвет шрифта — контрастный, относительно цвета кнопки. Старайтесь не использовать капс. 
  • Текст располагайте по центру кнопки, с одинаковым расстоянием по краям. 

Какую форму кнопок выбрать?

По формам единого решения нет. Кнопки с острыми краями выглядят более серьезными, кнопки и с закругленными краями выглядят более свободно (и современно, если честно). Главное, чтобы кнопка выглядела именно как кнопка. 

И была подчинена логике, действие вперед — кнопка показывает направо, действие назад, кнопка — налево.

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

Научитесь правильно использовать кнопки в веб-дизайне за 4 минуты

Получайте бесплатные уроки и фишки по интернет-маркетингу

Советы по грамотному дизайну кнопок СТА

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

CTA для предоставления покупателям информации о стоимости картин (Isabel Design).

Когда дело доходит до заключения сделки, эти приемы обычно связаны с использованием CTA (call-to-action = призыв к действию) — это кнопки, которые предлагают купить, кликнуть, скачать или зарегистрироваться.

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

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

Почему CTA так важны?

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

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

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

  • Электронные письма, в которых применяются CTA, увеличивают количество просмотров на 371% и количество продаж на 1 617% [источник]

  • Страницы на Facebook, где используются кнопки CTA, имеют в 2,85 раза больше просмотров [источник]

  • Усовершенствовав дизайн CTA, фирма Brafton, которая занимается контент-маркетингом, всего за месяц увеличила доход на 83% [источник]

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

5 видов CTA

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

Можно разбить CTA на пять основных категорий:

Навигация

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

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

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

Локальные действия («Добавить в корзину», «Завершить покупку», «Заполнить опрос», и т.д.)

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

Noble & Savage разместили СТА на закрепленном меню в нижней части страницы, которое появляется при просмотре фотографий товаров. Обратите внимание, как яркая синяя кнопка притягивает внимание — гораздо сильнее, чем остальные элементы страницы, и даже картинки.

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

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

Подписка

Vogue показывает недавно появившуюся тенденцию использовать всплывающие окна, которые предлагают подписаться на рассылку с помощью e-mail.

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

Репост в социальные сети

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

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

Вовлечение (комментарии, лайки, отзывы, и т.д.)

Даже Amazon прибегает к кнопкам СТА для получения отзывов.

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

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

Внешний вид

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

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

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

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

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

Другой визуальный прием — это размер: на экране объекты большего размера привлекают внимание в первую очередь. Однако нужно знать меру, поэтому после увеличения кнопки до определенного размера, вы уже просто впустую занимаете ценное пространство. Грубо говоря, ваши СТА должны быть больше остальных кнопок (не столь важных), но не быть громоздкими и не перевешивать все остальные элементы на странице.

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

Ваши СТА должны быть ясными и четкими, но они также должны гармонировать с остальной частью страницы. Не забывайте: эти кнопки должны призывать посетителей после просмотра страницы пойти и сделать то, что вы больше всего от них хотите. Представьте, что кнопки являются своеобразной «воронкой» для ваших продаж. Это не значит, что СТА обязаны перехватывать все внимание на себя — скорее, необходимо выстроить все остальные элементы так, чтобы они в итоге приводили пользователя к CTA.

Лучше всех это объяснил Нил Патель, который обнаружил, что размещение СТА на первом экране уменьшило уровень кликабельности на 17%. Он объяснил это тем, что контент веб-сайта должен плавно приводить к СТА, особенно в случае с деловым предложением (объясним ниже). Только подумайте, насколько безрезультатны будут действия продавца, который начнет уговаривать вас купить что-то, не объяснив до этого, зачем это вам нужно.

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

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

Головная компания Red Bull — T.C. Pharmaceuticals — умело применяет приемы СТА. Цветовое решение для опции «Узнать больше» и применение «призрачной» кнопки «Посмотреть товары» показывает, что они предлагают пользователям нажать кнопки по порядку.

Текст

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

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

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

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

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

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

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

1. По умолчанию

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

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

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

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

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

Также важно выбирать цвета с адекватным контрастом для большинства пользователей. Я использую приложение Contrast для тестирования моих проектов на соответствие WCAG 2.0:

2. Фокус

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

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

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

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

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

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

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

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

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

3. Раскрытие / Переключение / Выбор

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

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

4. Отключенные кнопки

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

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

5. Состояния наведения и активное

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

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

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

Теперь мы можем знать, какие эффекты будут пересекаться с другими состояниями:

Мы также знаем достаточно, чтобы изящно переходить между этими состояниями и подчеркивать их через цвет, масштаб и анимацию:

Это только верхушка айсберга…

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

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

Автор: Tyler Sticka

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

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

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

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

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

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

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

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

Эффективный дизайн кнопок: лучшие советы

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

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

Но не менее важны и кнопки в digital-пространстве:

  1. Оплата покупок. 

  2. Лайки на понравившийся контент.

  3. Реакция на пост и отправка комментария…

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

Кнопка или ссылка: большая разница

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

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

  • Ссылки нужны для навигации по страницам (или одной странице) – к примеру, в профиль в соцсети, на страницу с нужной статьей. 

«Портрет кнопки»

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

Можно выделить 6 основных состояний кнопки:

  1. Стандартное (состояние покоя) – в это время кнопка являет собой интерактивный элемент интерфейса, который котов в любое время быть использованным по назначению.

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

  3. Наведение мыши на кнопку – наведение курсора мыши на элемент.

  4. Нажатие – это активное состояние.

  5. Состояние загрузки – это значит, что элемент осуществляет действия (например, отправляет форму с опросом). 

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

ТОП-6 востребованных видов кнопок

Оказывается, существует много видов кнопок (по форме, размеру и цветам), которые вы можете использовать в работе:

  • Старая добрая классика – объемная кнопка. 

  • Объемная кнопка с иконкой, которая может выглядеть более информативной. 

  • Контурные кнопки. Их еще называют «призрачными». Отлично вписываются в облегченный минималистичный дизайн. 

  • Текстовая кнопка (похожа на ссылку, но сохраняет функционал кнопки). 

  • Кнопка в виде иконки (изображения). 

  • Плавающая кнопка, при контакте с которой появляется выпадающее дополнительное меню. 

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

  1. Цели добавления. 

  2. Используемая платформа. 

  3. Брэндбук (фирменные цвета и другие факторы). 

Стиль кнопки: что это за «зверь»?

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

  • Чаще всего используется 1 заметная кнопка (еще такой стиль называется «основным»).

  • Ее дополняют второстепенные кнопки.

  • Их сменяют, в свою очередь, побочные кнопки для «третичных» пользовательских действий. 

Давайте сформулируем пример таких кнопок для абстрактной социальной сети:

  1. Основной стиль: отправить комментарий на «стену». 

  2. Вторичный стиль – сохранение черновика комментария. 

  3. Третичный стиль – удаление написанного. 

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

«А это разве кнопка»?

Главное правило – делать кнопки похожими на кнопки. В бестселлере Стива Крута, известного usability-инженера, написано «Не заставляйте думать!». Он описывает много пунктов, но основная мысль в том, чтобы интерфейс был очевидным. Головоломки хороши в других местах. 

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

Единый стиль и его важность!

Будем кратки: единство стиля должно стать нормой. Оно решает много задач:

  1. Улучшение скорости и точности взаимодействия.

  2. Избегание ошибок. 

  3. Пользователь чувствует, что он контролирует ситуацию на пути к желаемому результату. 

Во время определения основных, вторичных и третичных кнопок, советуем сделать их одной «семьей», найдя что-то общее (форма, цвет, мигание и так далее). 

Размер имеет значение

В мире кнопок также важен размер. Если посетителю не будет удаваться нажать на кнопку или в процессе он будет «задевать» соседние элементы, это вызовет только раздражение и сформирует негативный опыт. Лучше сделать кнопки больше, чем потерять лояльных клиентов. Статистика гласит, что для большинства платформ подойдут интерактивные элементы с размером от 48×48 dp, тогда как уже полюбившиеся всем нам пиксели (px) отображаются по-разному на экранах разных устройств. 

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

Жесты и касания

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

  • Свайп, когда нужно смахнуть страницу. 

  • Двойное касание для оценки «лайк»! 

  • Долгое удержание для появления дополнительного меню. 

Как назовешь корабль: прописные истины

Да, правильное «имя» кнопки помогает совершать целевое действие. Проверено на практике пользователями сервиса рассылок DashaMail. Если вы странно и нелогично назовете кнопку, придется встретиться с «санкциями»:

  1. Пользователи не понимают, что нужно сделать.

  2. Они тратят больше времени.

  3. Совершение ошибок. 

Будьте четкими и конкретными. Это всегда работает на 5+!

Запрет на неактивные кнопки

Неактивные кнопки – это «мертвые души». Четко по Гоголю. Вспомните, как вы столкнулись с такой проблемой в Сети:

  • Вы застреваете на странице, где есть кнопка, которая «против активности».

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

  • Вы не знаете, почему она не работает (и заработает ли). 

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

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

ТОП-10 советов по дизайну кнопок

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

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

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

  3. Варианты состояния – это важно! Продумайте это заранее, чтобы пользователю было очевидно, что элемент сработал при взаимодействии. 

  4. Грамотная иерархия кнопок. Оформляйте с отличием друг от друга кнопки первичные, вторичные и третичные. Это упрощает восприятие и делает необходимые действия логичными и простыми. 

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

  6. Стандартные решения – это не плохо. Наоборот, пользователь видит то, что ему привычно и знакомо, поэтому не тратит время и силы на раздумья. 

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

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

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

  10. Доступность дизайна во благо простоты восприятия.

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

Можем посоветовать, если есть такая возможность, проводить тестирования (А/В), чтобы понять, какой вариант работает лучше в вашем случае. Можно даже отправить рассылку, задав вопрос подписчикам, предложив им поделиться своим экспертным мнением. Это всегда подкупает! 

На этом всё о кнопках! Удачи и встретимся в новых полезных публикациях от DashaMail!

Дизайн кнопок — серия компонентов пользовательского интерфейса

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

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

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

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

Кнопки против ссылок

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

  1. Ссылки используются при переходе в другое место, например: «просмотреть все», профиль «Roger Wright» и т. д.
  2. Кнопки используются, когда вы выполняете действие , например: «отправить», «объединить», «создать новый», «загрузить» и т. д.

Состояние кнопки сообщает ее статус пользователю

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

Normal — сообщает, что компонент интерактивен и включен.

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

Hover — сообщает, когда пользователь поместил курсор над интерактивным элементом.

Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.

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

Disabled — сообщает, что компонент в настоящее время не является интерактивным, но может быть включен в будущем.

Кнопки бывают разных цветов, форм и размеров.

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

Стили сообщают о важности действия

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

Иногда нет «по умолчанию»

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

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

Не заставляй меня думать

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

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

Согласованность повышает скорость и точность

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

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

Сделайте кнопки достаточно большими для надежного взаимодействия

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

Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.

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

Дизайн для доступности

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

Дизайнеры должны тесно сотрудничать с командами разработчиков, чтобы убедиться, что кнопки работают с программами чтения с экрана. Роль кнопки должна использоваться для интерактивных элементов, которые инициируют ответ при активации пользователем. Добавление role = ”button” приведет к тому, что элемент отобразится как элемент управления кнопками для программы чтения с экрана.

Жесты становятся достаточно широко распространенными

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

Хороший ярлык кнопки приглашает пользователей к действию

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

Хороший ярлык кнопки приглашает пользователей к действию. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Это как кнопка спрашивает пользователя: «Вы хотите ( добавить в корзину )?» или «Хотите ( подтвердить заказ )?».
Избегайте использования Да , Нет или слишком общих меток, таких как « Отправить» .

ОК / Отмена или отмена/ОК? И то и другое прекрасно

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

  1. Имея действие ОК первый поддерживает естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК в первую очередь
  2. Запись ОК улучшает поток. Кто-то может поспорить, что Ok, как следующая кнопка, переместит пользователя вперед. Если поставить «ОК» последним, помогите пользователям оценить все варианты, прежде чем предпринимать какие-либо действия, и помогите избежать ошибок и поспешных решений. Apple ставит ОК в последнюю очередь

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

Disabled кнопки это плохо

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

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

Дизайн-система в Figma. Часть 2: Кнопки | by Татьяна Маслакова. Веб дизайн

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

Проектируя кнопки, следует учесть, что они могут иметь несколько состояний:

  • Кнопка в спокойном состоянии,
  • Кнопка при наведении,
  • Кнопка, подсвеченная при навигации по странице при помощи таба,
  • И неактивная кнопка.

Все эти состояния нам необходимо прорисовать.

Мне известны 2 основных способа создания кнопок: кнопки с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с оцентрированным текстом (такую кнопку можно масштабировать, текст при этом всегда будет по центру). В разных ситуациях удобны разные варианты кнопок.

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

Выберите Text Tool (T) и напишите название кнопки. Задайте стиль текста, который вы определили специально для кнопок (см. предыдущую статью).

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

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

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

Не снимая выделения, в правой панели ищем вкладку Auto Layout и нажимаем плюсик. Теперь, если мы захотим отредактировать текст на кнопке, размер кнопки изменится вместе с этим текстом.

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

Расширяем функционал кнопки

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

Рисуем необходимые иконки, задаем им цвет из палитры. запаковываем в компоненты.

Внимание: важно, чтобы размеры компонентов иконок были одинаковыми. В моем случае для кнопок это поле 20×20 пикселей. Иконка внутри необязательно должна занимать все это поле, но сами компоненты должны быть идентичны по размеру.

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

Теперь копируем одну из иконок (Contrl+d или Comand+d) и помещаем ее внутрь компонента с нашей кнопкой перед текстом).

Остальные иконки пока не трогаем. В конце статьи я покажу, как можно очень быстро манипулировать кнопками.

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

Наведение

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

Копируем экземпляр компонента базовой кнопки (Contrl+d или Comand+d). Не снимая выделения с компонента, задаем параметры оформления для этого состояния кнопки: можно поменять, цвет, обводку или даже добавить тень (не забудьте предварительно задать стиль для тени). Можно выделить внутри слой самого текста и поменять его параметры (к, примеру, цвет).

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

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

Активность по табу

Вновь создаем экземпляр нашей базовой кнопки.

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

Неактивная кнопка

Для кнопок, на которые еще нельзя нажать (например, не введен код, не заполнены все поля и т.д.), создадим еще один компонент.

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

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

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

Для текстового слоя задаем Constraints: Center, Center:

Если вы также хотите добавить в такие кнопки иконки, то текст и иконка группируются и на группу настраивается Auto Layout. Сама же группа центрируется при помощи Constraints.

Constraints для фонового прямоугольника: Left+Right, Top+Bottom

Состояния масштабируемой кнопки: Дублируем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем его в новый компонент с настройками Constraints : Left+Right, Top+Bottom.

Auto Layout в данном случае уже не используется.

Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:

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

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

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

Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.

Если задать грамотные имена нашим кнопкам и иконкам с использованием знака «/», то они сгруппируются на панели компонентов и при выборе instance:

названия кнопок через «/»названия иконок через «/»

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

Далее в появившемся окне в поле «Rename to» впишите правила переименовывания. Например, выражение «icon/$&» добавит к текущим именам иконок префикс «icon/».

Кнопки под полем «Rename to» подскажут, как построить нужное вам выражение:

После того: как вы переименуете кнопки и в левой панели перейдете со вкладки Laere на вкладку Assets, вы увидите, что все кнопки сгруппировались в одну вкладку Button:

при этом если вам надо заменить одну кнопку на другую, то при изменении Instance компоненты кнопок также сгруппируются:

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

Лучшее применение, форма и расположение.

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

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

Зачем они нужны

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

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

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

Редакция ЦП поинтересовалась у отечественных профессионалов, используют ли они призрачные кнопки в своих проектах, и как относятся к данному визуальному решению.

Владимир Кудинов дизайнер Designmodo

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

Мне кажется, появление ghost buttons как-то связано с увлечением делать full screen backgrounds с 50% затемненностью и создавать поверх них интерфейсы и формы. Тут появляется возможность разделить внимание человека на бэкграунд-фотографию, отражающий стиль продукта, и одновременно на форму с ghost элементами, которая не сильно кричит о своем присутствии, но тем не менее заметна.

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

Никита Ефимов UX-партизан в UXpresso

Как и у любого визуального элемента или паттерна, у призрачных кнопок есть свой контекст использования. Они отлично работают как элемент эмоционального дизайна. Ведь правда, выглядят они гармонично (при грамотном визуальном дизайне), как сказали бы лет 5 назад: «сексуально». Я часто предлагаю нашим дизайнерам использовать такой подход при создании лэндигов или промо-страниц. Мы для своего учебного центра IT Mine тоже использовали такие кнопки, но лишь как вспомогательные элементы

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

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

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

Азамат Иванов UI/UX-дизайнер «Билайн»

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

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

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

Владимир Шрейдер основатель Glitché

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

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

  • Графический дизайн ,
  • Дизайн мобильных приложений ,
  • Интерфейсы
  • Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния . Наша команда выполнила перевод данной статьи

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

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

    Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

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

    Не забывайте о порядке размещения и положении кнопок. Порядок, в котором идут кнопки, особенно если есть парные кнопки (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что основной акцент в дизайне сделан на основном или самом важном действии пользователя.

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

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

    Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?

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

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

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

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

    Типы кнопок и поведение
    1. Объемная кнопка

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

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

    Пример
    Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

    2. Плоские кнопки

    Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.

    Применение
    В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

    На панели инструментов

    Расположение снизу, чтобы пользователь быстрее их нашел

    Поведение

    Пример
    Плоская кнопка в диалоговом окне приложения на Android.

    3. Переключатель

    Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.

    Применение

    Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

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

    · В группе должно быть не менее трех кнопок

    · На кнопках должен быть текст, иконка или и то, и другое.

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

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

    В Apple iOS переключатели использованы в разделе «Настройки».

    4. Контурные кнопки

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

    Применение

    Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.

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

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

    Поведение

    На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».

    5. Плавающая кнопка с выпадающим меню

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

    Применение

    Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.

    Поведение

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

    Выбор типа кнопки.

    Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.

    Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?

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

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

    Состояния кнопок

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

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

    Нормальное состояние

    Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.

    Состояние в фокусе

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

    Нажатое состояние

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

    Неактивное состояние

    Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.

    Преимущества скрытой кнопки:

    • · Ясность. Отображается только то, что необходимо для текущей задачи.
    • · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.

    Преимущества использования неактивного состояния:

    • Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.
    Контроль размещения. Пользователь понимает, где в интерфейсе размещено управление и кнопки.


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

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

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

    Все просто, кнопки размечают какую-либо область, чтобы я мог на нее нажать. По существу, именно на кнопках мы применяем основные атрибуты языка дизайна так, что потом это оказывает свое влияние на более сложные компоненты. Ниже я представил 12 уроков, которые я выучил, исходя из работы с первичными (primary button), вторичными (secondary button) кнопками, а также другими типами кнопок.

    Первичные кнопки

    №1. Определитесь со стилистикой системы

    Кнопки – чистейшее атомарное выражение визуального стиля системы. Кнопка состоит из трех неразрывных атрибутов так называемой «большой тройки» — цвет, шрифт и иконография. В кнопках также нужно учитывать пространство: внутренний padding (в частности слева и справа от надписи) и внешний margin (влияющий на другие элементы). Кнопки могут даже затрагивать такие атрибуты, как скругление (или border-radius) и подъем (или box-shadow).

    Вывод: Примите кнопки, как основное представление стилистики системы. Еще лучше если вы задаете кнопку, как набор переменных: цвет, размер, пространство и т.д.

    №2. Определите стилистику слов

    К нашему счастью кнопки с надписью «Click Here» ушли в прошлое. Но вопросы остаются открытыми: Какой длины должен быть текст кнопки? Стоит ли делать подписи в повелительном наклонении (Сохрани или Закрой)? Нужно ли к глаголу Сохранить добавлять тип объекта (Документ)? Существуют ли какие-либо предпочтения в написании подписей для общих действий? Нужно ли кнопки связывать как-то с брендом… или нет?

    Вывод: Найдите в сети гайды с набором готовых кнопок. Список подходящих слов и редакторских стандартов можно найти в руководствах типа Voice и Tone. Кнопки – отличный пример внедрения новых стандартов.

    №3. Инвертируйте цвета кнопок если изменяется фон

    Большинство кнопок хорошо работают на белом фоне. А будет ли кнопка видна на фотографии или более темном фоне? Можете ли вы разместить кнопку на светлом нейтральном фоне? Хорошо ли видна кнопка на любом фоне? Можете ли вы сменить цвет первичной кнопки?

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

    №4. Одна первичная кнопка на странице, если только действие не повторяется

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

    В некоторых случаях первичные кнопки хорошо подходят: при выборе из параллельных объектов (как набор медиа объектов в поисковой выдаче) или при выборе опций из равных модулей на странице настроек.

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

    №5. Спроектируйте и создайте все виды взаимодействия с кнопкой

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

    Вывод: Дополняйте живое демо (просто вставьте кнопку на страницу) галереей всех возможных состояний, где пользователю не нужно взаимодействовать с кнопками. Создание документации – это не охота за сокровищами. Еще лучше будет, если вы создадите видео, как в Material Design.

    №6. Создавайте кнопки устойчивые к внесению изменений

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

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

    Вторичные кнопки

    №7. Вторичная кнопка ≠ отключенная кнопка

    Современные тенденции и подходы в веб-разработке

    Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

    №8. Остерегайтесь призрачных кнопок

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

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

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

    Другие типы кнопок

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

    №9. Изменяйте размер кнопок

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

    Вывод: Предоставляйте заказчику возможность настраивать размер кнопок: делать их как больше, так и меньше. Чтобы пользователь мог изменить кнопку обычным переключением класса. Используйте запоминающиеся имена – Puffy, Micro – а не просто Large и Small.

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

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

    №11. Добавьте в кнопки разнообразия

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

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

    №12. Сделайте так, чтобы кнопки идеально работали друг с другом

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

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

    Используйте тег button только для кнопок

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

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

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

    Итак, приступим к реализации нашего урока и создадим дизайн кнопок.

    Кнопка вконтакте в виде ленты

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

    • высота: 80 пикс.;
    • ширина: 300 пикс..

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

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

    Ставим направляющие на расстояние от края холста:

    • сверху и снизу: 20 пикс.;
    • центр: 40 пикс.;
    • справа и слева: 25 , 35 пикс..

    Выберем цвет #3c78a1 и создадим прямоугольник инструментом прямоугольник (U).

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

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

    В заключение создания дизайна кнопки вконтакте нам необходимо создать объем для текста и объем для линий. Для текста создадим стиль слоя тень, и применим следующие настройки.

    Создадим блик у пунктира по краям.

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

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

    Форма логина Groupon сфокусирована на основном действии.

    Подумайте о том, как дизайн переплетается с аффордансом. Как пользователи определяют элемент, как кнопку? Используйте форму и цвет что бы заставить элемент выглядеть, как кнопка. Так же хорошенько подумайте о размере точки соприкосновения и наполнении. Размер кнопки так же играет ключевую роль, помогая пользователю определить назначение элемента. На разных платформах можно найти рекомендации по минимальному размеру точки соприкосновения. Результаты исследований MIT Touch Lab показали, что средние размеры подушечек пальцев составляют в среднем от 10 до 14мм, а размеры кончиков пальцев от 8 до 10мм, делая тем самым размер 10х10мм подходящим минимумом для размера точки соприкосновения.

    Размещение и порядок

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

    Будьте внимательны к порядку и размещению кнопок. Порядок, в котором расположены кнопки, особенно если присутствуют соответствующие пары (такие, как «назад» и «дальше»), очень важен. Убедитесь в том, что дизайн делает акцент на основном, или самом важном действии.


    Кнопка «Delete» заметно выделяется.

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

    Обозначения.

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


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


    Ясно видно, что эта кнопка является призывом к действию.

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

    Форма кнопок.


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


    Парящая кнопка действия — хороший пример кнопки с произвольной формой

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

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

    Типы кнопок и поведение.

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

    Использование

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

    Поведение

    Поднятые кнопки должны заполнятся цветом при нажатии. При этом уже нажатые кнопки должны подниматься.

    Пример

    Поднятые кнопки лучше выделяются, чем плоские. Пример для приложения Android.

    Плоские кнопки должны только заполнятся цветом при нажатии. Главное преимущество плоских кнопок – они меньше отвлекают от контента.

    Использование

    В диалогах (чтобы объединить действие кнопки с контентом диалог). Плоская кнопка.

    Плоские кнопки в диалоговом окне Android

    В тулбарах

    Расположите их снизу, что бы пользователь сразу их нашел

    Поведение

    Пример

    3. Преключатель

    Такая кнопка позволяет пользователю изменять опцию между двумя (или более) положениями.

    Использование

    Самые простые переключатели используются в настройках в качестве кнопки вкл\выкл.

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

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

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


      Переключатель для кнопки «Like» в Twitter

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


      Разные призрачные кнопки

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

      Использование

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


      «Download Bootstrap» это кнопка. Вы заметили?

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


      «Purchase Now» — Главная кнопка, а призрачная кнопка — вторичная.

      Поведение

      Обычное состояние (слева), и состояние в фокусе (справа).


      Нормальное состояние (слева), и в фокусе (справа).

      Пример

      Сайт AirBnB использует призрачную кнопку для действия «Стать хозяином»

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

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

    Использование

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

    Поведение

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

    Выбор типа кнопки.

    Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от планировки.


    Выбор типа кнопки, рекомендуемый Google Material Design.

    Функция : Достаточно ли важна и уникальна кнопка что бы быть парящей?

    Объем : Выберите тип кнопки, в зависимости от контейнера, в котором она будет располагаться, и от того, сколько слоев z-глубины у вас на экране.

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

    Состояния кнопок

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

    Это кнопка, или нет? Теперь придется кликнуть, что бы это понять…

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

    Нормальное состояние

    Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии.

    Кнопки в Нормальном состоянии в Windows 8

    Windows 8 это хороший плохой пример такого рода проблемы – пользователю сложно понять кликабельны или нет объекты в меню настроек.

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

    Нажатое состояние

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

    Рекомендуем также

    Типы кнопок UX и передовые методы

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

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

    Общие типы кнопок UX

    Кнопки

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

    «Лучший способ обозначить кнопку — использовать визуальные подсказки».

    Текстовые кнопки

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

    Призрачные кнопки

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

    Пуговицы приподнятые

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

    Кнопки переключения

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

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

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

    Вот пример кнопок с плавающим действием в Material Design (через Material Design).

    Лучшие практики кнопки UX

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

    Размер

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

    Хорошее практическое правило приходит к нам из MIT Touch Lab. Исследования Touch Lab показывают, что создание кнопки размером не менее 10 мм x 10 мм — отличное место для начала. Имейте в виду, что с появлением отзывчивой сети все более важными стали размышления о том, как будет изменять размер кнопки и процентную ширину кнопок.

    Цвет

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

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

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

    «Сделать пуговицу размером не менее 10 мм x 10 мм — отличное место для начала».

    Форма

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

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

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

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

    Размещение

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

    Микроскопия

    Микрокопия кнопки

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

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

    По теме: Хорошая копия UX не обязательно должна быть короткой

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

    Button — Carbon Design System

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

    значок информации

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

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

    Когда использовать

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

    Когда не использовать

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

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

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

    Button

    Интерактивный редактор для компонента Button

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

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

    1. Содержащаяся кнопка

    A. Текстовая метка
    B. Контейнер
    C. Значок (необязательно)

    3. Призрачная кнопка

    A. Текстовая метка
    C. Значок (необязательно)

    2. Кнопка с контуром

    A . Текстовая метка
    B. Контейнер
    C. Значок (необязательно)

    4. Кнопка со значком

    B. Контейнер (необязательно)
    C. Значок

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

    Не центрируйте текст на кнопке, даже если кнопка широкая.

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

    Размер кнопки Вариант использования
    Полный выпуск за обрез Используется, когда кнопки выходят за обрез до края более крупного компонента, например боковых панелей или модальных окон. Примечание: этот вариант не предлагается в комплекте, потому что у него нет кодированного аналога. Carbon предлагает эту кнопку только в контексте модального компонента.
    По умолчанию Использование в качестве действий основной страницы и других автономных действий.
    Большой выразительный Увеличенный размер выразительного шрифта внутри этой кнопки обеспечивает баланс при использовании с основным текстом размером 16 пикселей. Используется командой IBM.com в баннерах веб-сайтов.
    Поле Используется, когда кнопки связаны с полями ввода.
    Маленький Используется, когда недостаточно места по вертикали для кнопки по умолчанию или кнопки размера поля.

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

    Одна кнопка с высоким выделением

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

    Несколько кнопок с упором

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

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

    Используйте кнопки с высоким и средним выделением в группе кнопок.

    Не используйте две кнопки с высоким выделением в группе кнопок.

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

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

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

    • Баннер с призывом к действию
    • Диалоговые окна
    • Мастера
    • Формы
    • Карты
    • Панели инструментов
    Встроенные уведомления, встроенные кнопки полей и таблицы данных, прогрессивные формы, мастера и однокнопочные диалоговые окна
    Выравнивание Вариант использования
    Выровнено по левому краю Баннерный призыв к действиям, внутристраничные формы и вложенные кнопки в таких компонентах, как плитки
    6 Выровнены по правому краю 9012
    Полноразмерные Диалоги, боковые панели и маленькие плитки; в настоящее время Carbon не предлагает способ реализовать полноразмерные кнопки в коде без переопределения, они максимальны на 320 пикселей
    Жидкие и фиксированные кнопки

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

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

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

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

    Не используйте третичную кнопку в жидкостном приложении.

    Жидкая рамка кнопки

    Многие дизайнеры обращались к нам за дополнительными рекомендациями по границы между всеми плавными кнопками.В последнее обновление, мы добавлена ​​граница в 1 пиксель между всеми плавными кнопками, которые вызывают токен $ ui-03 для тонкие границы. Эта функция добавляет различие 3: 1 между двумя интерактивными Элементы пользовательского интерфейса. Граница — это рекомендуемая функция для улучшения доступности в визуализации данных, и здесь должна применяться та же логика.

    Пример границы токена $ ui-03 между плавными кнопками

    Использование сетки

    По умолчанию ширина контейнера равна размеру текстовой метки с 64 пикселями фиксированный отступ с правой стороны и фиксированный отступ 16 пикселей слева.Однако, когда возможно, установите относительное положение контейнера кнопки к отзывчивому сетка макета и сопоставьте ширину кнопки с другими элементами на странице. В идеале, при использовании групп связанных кнопок (не включая кнопки-призраки) они должны все должны быть одинаковой ширины. См. Группы кнопок ниже для получения дополнительной информации. Подробная информация.

    Пример основной кнопки, соответствующей ширине карточки в макете

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

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

    Используйте основную кнопку и две одинаковые кнопки с меньшим выделением в группе кнопок.

    Не смешивайте первичные, вторичные и третичные кнопки в одной группе кнопок.

    Группы кнопок и сетка

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

    Пример подвешивания пуговиц

    Некоторые продукты не хотят вешать пуговицы в желоб, но все же хотят Расстояние между кнопками 16 пикселей. Это может быть достигнуто при сохранении одинаковой ширины кнопок, рассматривая группу кнопок как один объект (а не два отдельные объекты) на сетке. Каждая кнопка по существу будет охватывать 50% их контейнер с программным промежутком 16 пикселей между ними.

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

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

    Не делайте в группе кнопки разной ширины.

    Горизонтально расположенные группы

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

    значок информации

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

    Сгруппированные группы кнопок

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

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

    Группы с кнопками опасности

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

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

    Надписи на кнопках должны четко указывать на действие кнопки. Предоставлять достаточно контекста, используйте формулу содержания {глагол} + {существительное} на кнопках, кроме случай общих действий, таких как «Готово», «Закрыть», «Отмена», «Добавить» или «Удалить».

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

    Для согласованности см. Carbon’s правила содержания для списка ярлыки рекомендуемых действий.

    По возможности используйте в кнопках формулу содержания {глагол} + {существительное}.

    Не используйте только существительное в качестве названия кнопки.

    Мышь

    Пользователи могут активировать кнопку, щелкнув в любом месте контейнера кнопок.

    Клавиатура

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

    Программы чтения с экрана

    VoiceOver: пользователи могут нажать кнопку, нажав Введите или Пробел , пока кнопка имеет фокус.

    JAWS: пользователи могут активировать кнопку, нажав Введите или Пробел , пока кнопка имеет фокус.

    NVDA: пользователи могут активировать кнопку, нажав Введите или Пробел , пока кнопка имеет фокус.

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

    • Используйте глифы размером 16 пикселей внутри кнопок; используйте глифы 20 пикселей в большом выразительном кнопки
    • Глифы отличаются своей твердой формой и выделенными деталями
    • Глифы всегда должны отображаться справа от текста
    • Глифы, используемые в кнопках, должны быть напрямую связаны с действием, которое выполняет пользователь принимая
    • Глифы должны иметь то же значение цвета, что и текст внутри кнопки

    Разместите значок справа от кнопки после текста.

    Не размещайте значок слева от кнопки перед текстом.

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

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

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

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

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

    Как сделать так, чтобы ваши кнопки выглядели потрясающе

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

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

    1. Яркие и жирные кнопки:

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

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

    2. Держите кнопки большими:

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

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

    3. Совместите кнопки с темой:

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

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

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

    4. Используйте цветовой контраст:

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

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

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

    5. Обратите внимание на детали:

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

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

    6. Не забывайте о состояниях кнопок:

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

    1. Кнопка включения / выключения:

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

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

    2. Кнопка в фокусе:

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

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

    3. Состояние при наведении:

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

    4. Выбранная кнопка:

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

    7. Имейте единый дизайн и задокументируйте его:

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

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

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

    8. Следите за размером и досягаемостью кнопок:

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

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

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

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

    9. Понять фактор доступности:

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

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

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

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

    Как разработать и интегрировать кнопки в свой пользовательский интерфейс

    Иллюстрация Бхавьи Миноча

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

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

    • Как пользователи понимают, что элемент — это кнопка?
    • Когда / в каком контексте мне следует выбрать более привлекательный стиль кнопок?

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

    Но что такое кнопка?

    Давайте начнем с самого верха, а? Давайте определимся, что такое кнопки.

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

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

    Согласно Material Design, дизайнеры должны учитывать три ключевых принципа при включении кнопок в интерфейс:

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

    Типы кнопок и когда их использовать

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

    Имея это в виду, давайте углубимся в общие типы кнопок:

    Призыв к действию

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

    Основные кнопки

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

    Изображение предоставлено Amazon.com.

    Дополнительные кнопки

    Дополнительные кнопки, с другой стороны, предлагают альтернативный путь к основному действию, например «Назад» или «Отмена». Вторичные кнопки часто находятся рядом с основными кнопками (или кнопками CTA), где есть несколько возможностей, которыми может воспользоваться пользователь. Другой пример — экраны входа в систему, где «Зарегистрироваться» может быть основным действием, а «Войти» — второстепенным.

    Третичные кнопки

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

    Микрокопия — это большое дело

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

    Некоторые факторы, которые следует учитывать, чтобы обеспечить интересную микрокопию, включают:

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

    Использование цвета для выделения

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

    Изображение предоставлено theskimm.com.

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

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

    Наиболее распространенные стили кнопок

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

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

    « Ссылки никогда не должны использоваться для изменения состояния приложения. Это означает, что нажатие на ссылку не должно добавлять, изменять или удалять какие-либо данные на экране », — поделился Энтони из UX Movement

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

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

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

    Кнопки-призраки

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

    Скриншот предоставленного изображения с Hootsuite.com

    Подпись: В Hootsuite дополнительная кнопка «Обновить мой план» выполнена в стиле кнопки-призрака.

    Кнопки переключения

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

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

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

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

    На целевой странице Slack окно чата в правом нижнем углу имеет форму плавающей кнопки действия.Изображение предоставлено slack.com.

    Элементы дизайна кнопок

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

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

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

    Общее практическое правило, которое я использую, заключается в том, что «округлые — удобнее, острые — серьезнее». Ниже вы увидите пример этого на примере Lyft VS Bank of America.

    Когда использовать значок

    Как это часто бывает, значки (например, Джастин или Бейонсе) мечтают работать в одиночку. То же самое и с кнопками.

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

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

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

    Отступы кнопок и интервалы

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

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

    Как правило, оптимальное расстояние между кнопками составляет от 12 до 48 пикселей. Но если быть более конкретным, исследование показало, что 44% испытуемых предпочли расстояние 6,35 мм или 24 пикселя между соседними кнопками.

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

    Просмотр отступов между элементами внутри этой кнопки. Изображение предоставлено Руководством по материалам Material.io.

    Состояния кнопок и обратная связь

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

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

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

    • Активное и отключенное состояние: Активное состояние — это когда кнопка «нажимается» или «нажимается», отключение — когда это не так.Чаще всего это используется для отключения кнопки, когда пользователь не выполнил необходимые шаги.
    • Наведение и отключение. : это когда дизайн кнопки изменяется, когда пользователь наводит на нее курсор, чтобы показать, что на нее можно нажать. Это часто побуждает пользователей нажимать на них.
    • Нажата: Вы также можете добавить к кнопке состояние «нажата», чтобы указать, что она была успешно выбрана.
    Изображение предоставлено дизайнерским комплектом material.io.

    Размещение и размер

    Чтобы кнопки, которые вы разрабатываете, были легко заметны и доступны, вам необходимо продумать размещение и размер.

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

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

    По этой теме Material Design предлагает, чтобы цель касания была 48 dp x 48 dp с 8 dp между разными точками касания.

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

    Упростить дизайн кнопок

    Будьте уверены, даже несмотря на всю сложность, дизайн кнопок пользовательского интерфейса не должен быть сложным.Есть бесчисленные встроенные инструменты и онлайн-руководства, которые помогут вам. Помимо этого, есть целые наборы пользовательского интерфейса, которые вы можете использовать в мгновение ока, которые помогут вам быстро начать работу с заранее созданными дизайнами кнопок. Ознакомьтесь с ресурсами Adobe XD, Let’s XD и XD Guru, чтобы получить доступ к бесплатным пакетам пользовательского интерфейса, чтобы начать работу.

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

    Дизайн к действию: лучшие практики для эффективных кнопок | Академия каркасного моделирования

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

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

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

    Внешний вид

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

    1. Сделайте кнопки похожими на кнопки

    Пользователи знают, что такое кнопка и как она выглядит. Не проявляйте «креативность» и стилизуйте кнопку во что-то, что не кажется пользователям действенным. Кроме того, ссылки — это не кнопки (мы вернемся к этому чуть позже).

    Кнопки, которые выглядят как кнопки (слева) vs.кнопки, которые не работают (справа)

    2. Визуально различать основные и второстепенные действия

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

    Страница входа на twitter.com

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

    3. Кнопки не являются ссылками

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

    4. На экране не должно быть более одной кнопки основного действия одновременно.

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

    Добавить в корзину раздел Amazon.com на мобильном телефоне

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

    Страница аннулирования аккаунта audible.com

    Размещение

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

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

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

    Посмотрите на этот шаблон сканирования, какой, по вашему мнению, самый простой?

    6.Полноразмерные дизайны должны иметь основную кнопку в левой части страницы.

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


    Формулировка

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

    7. Слова должны быть простыми и по существу.

    Быть лаконичными.

    Из документа NNG UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts

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

    8. Избегайте общих команд, таких как

    «ОК» в диалоговом окне

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

    Создание нового файла UX на сайте dropbox.com

    9. Используйте слова, относящиеся к задаче

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

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

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

    11. Будьте ясны в отношении того, что будет дальше

    Вот пример запутанных слов, помещенных в кнопку. Я не часто пишу на Medium, поэтому я хотел проверить UX от начала статьи до ее публикации.Их кнопка с призывом к действию во время написания сообщения в блоге напугала меня! Я не уверен, что произойдет, когда я нажму «Готовы опубликовать?» 😰

    Я все равно щелкнул для этой статьи. Он отправил меня на страницу, на которой запрашивалась дополнительная информация перед публикацией статьи. Что, если на кнопке написано: «Вы закончили»? Или просто «Сохранить и продолжить»? Это было бы более полезно. Использование разговорного языка нормально для частых пользователей, но для новичков, таких как я, это было непонятно, и я не решался щелкнуть по нему.


    Деструктивные действия

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

    12. Если пользователь хочет выполнить критическую операцию, сконцентрируйте свое внимание на ней.

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

    В Balsamiq удаление одного из ваших проектов — серьезное дело. Мы заставляем пользователей сделать дополнительный шаг и написать слово УДАЛИТЬ, чтобы убедиться, что они действительно хотят удалить проект. Это дает пользователям дополнительное время, чтобы обдумать свои действия и избежать ошибок.

    13. Разрешить пользователям восстанавливаться после аварий.

    Если вы не можете сделать дополнительный шаг, заставив пользователя написать слово УДАЛИТЬ, добавление простой команды «Отменить» после удаления будет иметь большое значение, чтобы избежать расплаты за поспешную ошибку. .


    Заключение

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

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

    за годы — Хронология Dribbble

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

    В этой статье я прослежу восьмилетнюю историю дизайна веб-кнопок на основе Dribbble.

    Хронология кнопок Dribbble

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

    Нажмите кнопку выше, чтобы просмотреть временную шкалу Dribbble.

    2009

    В этом году Интернет отмечает свое 40-летие, и первые «выстрелы» появляются на Dribbble. В дизайне кнопок преобладает оттенок серого. Нежные градиенты, закругленные углы и тени присутствуют почти в каждом дизайне кнопок. Эта эстетика относится к встроенным системным кнопкам.

    Войцех Добри, Дэн Седерхольм, Джош Брайант, Дриббл, Сара Парментер, Мэтью Смит.

    2010

    Год создания Instagram. Форма кнопок кардинально не меняется, но есть гораздо больше цветов, больше деталей (например, внутренних теней) и гораздо больше декоративной типографии.

    Войцех Добрый, Морган Аллан Кнутсон, Трой Бергланд, Клаудиу Чоба, Лиам Маккей, Джаред Кристенсен.

    2011

    В этом году состоится премьера

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

    Войцех Добри, Жюльен Ренвой, Клаудиу Чоба, Миган Фишер, Джош Хемсли, Джонатан Морейра.

    2012

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

    Войцех Добрый, Эдуардо Сантос, Майк | Creative Mints, Майкел Луманс, Ян Коллинз, Давид Либерадски.

    2013

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

    Войцех Добрый, Космин Капитану, Эдди Лобановский, Джонатан Морейра, Рики Таноне.

    2014

    Google выпускает Material Design. Однако многие дизайнеры не полностью следуют этому стилю. Это довольно интересный год, потому что все внезапно начинают использовать стиль кнопки-призрака или плоские кнопки.Они появляются в большинстве кадров на Dribbble. Двухпиксельные границы с яркими цветами — это 2014 год.

    Войцех Добри, Эрик Хоффман, Рамиль Дерогонгун, Мейсон Ярнелл, Колин Гарвен, Билл С. Кенни.

    2015

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

    Войцех Добрый, Виктор Эриксон, Лео Люнг, Георгий Васягин, Хоанг Нгуен, Джошуа Крон.

    2016

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

    Войцех Добрый, Анастасия Андрийчук, Глеб Кузнецов, Гани Прадита, Кристофор Чебан, Бен Минго.

    2017

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

    Бен Клайн, Антон Ахейчанка, Вера Войшвило, Георгий Васягин, Гани Прадита.

    Что дальше?

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

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

    • • •

    Дополнительная литература в блоге Toptal Design:

    Создать кнопки | Дизайн кнопок | Пользовательские кнопки

    Создание кнопок | Дизайн кнопок | Пользовательские кнопки | Кнопки контактов
    1. Дом
    2. »
    3. Создавать

    Это просто! Отправьте нам свой дизайн кнопки, используя один из вариантов ниже.



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

    Начать проектирование онлайн


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

    Перейти к форме загрузки


    Позвольте нам разработать ваши кнопки
    Расскажите, как должны выглядеть ваши пуговицы. Разработаем их БЕСПЛАТНО! Вы правильно поняли. Мы не берем плату за использование времени нашего художника. Если мы открыты для бизнеса, вы можете поговорить с художником, который сразу же поможет вам в дизайне. У нас также есть форма запроса на дизайн, которую вы можете заполнить, и мы разработаем для вас кнопки в течение 24 часов.

    Связаться с художником


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

    Написать художнику по электронной почте



    шаблоны
    Создавайте свои кнопки, используя наши шаблоны.Это рекомендуется, если вы знакомы с профессиональным программным обеспечением для графического дизайна, таким как Adobe Photoshop, Adobe Illustrator, Corel Draw и т. Д. Отправляя свой дизайн кнопки в соответствии с нашими рекомендациями, вы получаете полный контроль над тем, как будут выглядеть ваши кнопки. Это также экономит нам время, поэтому вы можете делать заказы быстрее.

    alexxlab

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

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