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

Графический дизайн ,

Дизайн мобильных приложений ,

Интерфейсы

• Перевод

Ник Бабич разработчик, 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 пиксель. Один пиксель закрасим черным цветом другой белым, и сохраним узор. Подробно по создания узоров читайте статью: Применим наш узор к созданной форме ленточки при помощи стиля слоя.

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

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

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

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

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

С целью повышения заметности, контурные кнопки делают большего размера или размещают «в центре внимания». Аналогично укрупнению контент-блоков в минимализме, это можно считать частью тенденции к простоте, с чистым дизайном и . Для надписей на кнопках хорошо подходят легкие начертания какого-либо шрифта из серии Sans serif. Прозрачная кнопка, не замечаемая пользователями, может ухудшать UX и юзабилити. Надо сразу признать: кнопки-призраки подойдут не каждому сайту. Но если вы решили удивить своих посетителей модным дизайном - поаккуратнее с выбором фото-бэкграунда /фоновой картинки /полупрозрачности окна-врезки (плашки) и цвета контура или подписи призрачной кнопки. Вспомните регулировку экрана: от монохромного () – до насыщенного цветного. с контурными веб-элементами складывается из этих же контрастов: светлого с темным, насыщенного цветом с монохромным.

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

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

We are Heckford

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

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

Cher Ami

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

Campus Bubble

Персидский зелёный (persian green) и светло-апельсиновый – основные цвета палитры начальной страницы, используемые для с контурными кнопками. Очень удачное цветосочетание – как для привлечения внимания, так и для создания дружелюбной атмосферы. Желто-оранжевые янтарные оттенки, побуждая к активности, мобилизуют на выполнение задачи – помогают сконцентрироваться, запомнить материал, способствует творческой работе и т.д. Любой оттенок бирюзового составляют зеленый и голубой – цвета, которые считаются улучшающими умственную деятельность. Campus Bubble — сайт разработчика обучения студентов и для дизайна подходят такие стимулирующие и психологические .

Phoenix-M

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

Контурные элементы в дизайне веб-страниц

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

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

Evolve Wealth

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

Rays Restaurants

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

The Cooking Academy

При нескольких видах кнопок в дизайне – «призрачные» могут выполнять второстепенные действия: перемещать по логическим областям страницы или эффектно переворачивать контент-блоки (Vertical Flip).

World Backup Day

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

LITTLE FLYERS

Уменьшающийся с прокруткой липкий плавающий header, плавающий заголовок с кнопками в одном блоке… Контурные элементы (иконки, кнопки) вписываются в эту концепцию экономии места на сайте. Плавная заливка ghost-кнопок компенсирует их призрачную малозаметность. Эффект не только для красоты и контраста — реализуется схема (Z принцип быстрого просмотра) с максимальным привлечением внимания к кнопке с призывом к действию.

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

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

Форма логина 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 это хороший плохой пример такого рода проблемы – пользователю сложно понять кликабельны или нет объекты в меню настроек.

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

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

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