Кнопки круглые: Как сделать стиль круглые кнопки

Содержание

Скруглённые или остроугольные? / Хабр

Скруглённые или квадратные? Вот в чём вопрос.

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

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


Переменные, используемые для улучшения заметности

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


Скруглённые элементы легче распознать, чем острые

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

В grid layout скруглённость работает ещё лучше.


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


Дашборд Turbotax

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


Скруглённые кнопки на Spotify

Вообще говоря, в данном конкретном примере, так как работа со Spotify всегда сводится к воспроизведению (треков, подкастов, плейлистов), главное действие определено однозначно. А полностью скруглённые кнопки воспроизведения очень хорошо отличимы от UI альбомов и плейлистов, что в свою очередь побуждает пользователя нажать на «Play».


“Play” на Spotify

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

1. Когда скруглённые кнопки похожи на теги

Если отличить кнопку от тега (фильтра) непросто, это введёт людей в замешательство: «Я кликаю на кнопку или на фильтр?»


Что это: кнопки или фильтры? Совсем неочевидно.

2. Скруглённые кнопки не способны показать вложенные опции

Полностью скруглённые кнопки обычно используют иконку со «стрелочками», чтобы показать наличие вложенных опций. Но область клика (или тача) для отображения опций у них лимитирована размером иконки (обычно 16×16 или 24×24 px).


Удобно ли будет просматривать опции в каждом из случаев?


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


Apple не рекомендует использовать скруглённые кнопки для действий (см. push buttons). Полностью скруглённые кнопки зарезервированы для «Помощи» или предоставления взаимоисключающих вариантов (см. radio buttons).

Иллюстрации из Human Interface Guidelines от Apple

3. Полностью скруглённые кнопки не подходят для стеков

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


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


Кнопки «без границ» в стеке

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

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


Новая строка поиска в Chrome (источник — Google blog)

Вписываясь в новую концепцию, кнопки на тулбаре стали подсвечиваться скруглёнными при наведении. Несложно найти скруглённые элементы и в других приложениях Гугла типа Calendar, Gmail и Drive.


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




Use round shapes in Material Designs

Characteristics of rounded corners

Why rounded corners are easier on the eyes


%d0%ba%d1%80%d1%83%d0%b3%d0%bb%d1%83%d1%8e %d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d1%83 PNG, векторы, PSD и пнг для бесплатной загрузки

  • Мемфис дизайн геометрические фигуры узоры мода 80 90 х годов

    4167*4167

  • естественный цвет bb крем цвета

    1200*1200

  • поп арт 80 х патч стикер

    3508*2480

  • схема бд электронный компонент технологии принципиальная схема технологическая линия

    2000*2000

  • аудиокассета изолированные вектор старая музыка ретро плеер ретро музыка аудиокассета 80 х пустой микс

    5000*5000

  • поп арт 80 х патч стикер

    3508*2480

  • Мемфис шаблон 80 х 90 х годов стилей фона векторные иллюстрации

    4167*4167

  • green environmental protection pattern garbage can be recycled green clean

    2000*2000

  • 80 основных форм силуэта

    5000*5000

  • милая ретро девушка 80 х 90 х годов

    800*800

  • 80 летний юбилей дизайн шаблона векторные иллюстрации

    4083*4083

  • дизайн плаката премьера фильма кино с белым вектором экрана ба

    1200*1200

  • поп арт 80 х патч стикер

    2292*2293

  • поп арт 80 х патч стикер

    2292*2293

  • Мемфис бесшовные модели 80 х 90 х стилей

    4167*4167

  • 80 е брызги краски дизайн текста

    1200*1200

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • Дизайн персонажей моды 80 х годов может быть коммерческими элементами

    2000*2000

  • Крутая музыка вечеринка певца креативный постер музыка Я Май Ба концерт вечер К

    3240*4320

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • be careful to slip fall warning sign carefully

    2500*2775

  • поп арт 80 х патч стикер

    3508*2480

  • диско дизайн в стиле ретро 80 х неон

    5556*5556

  • Элементы рок н ролла 80 х

    1200*1200

  • плавный руки нарисованная мемфис модный хипстер 80 х 90 х годов творческих детей рисовать

    5000*5000

  • в первоначальном письме bd логотипа

    1200*1200

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

    800*800

  • blue series frame color can be changed text box streamer

    1024*1369

  • в первоначальном письме ба логотипа

    1200*1200

  • поп арт 80 х патч стикер

    2292*2293

  • мега распродажа 80

    1200*1200

  • 80 х годов ретро пиксель иллюстрация детства игровой автомат тетрис

    4724*2657

  • ба конфеты шоколад

    800*800

  • студент отмечает что примечание образования плоский цветной значок вектора значок ба

    5556*5556

  • концепция образования в выпускном вечере баннер с цоколем и золотой ба

    6250*6250

  • Тенденция персонажа мультфильма 80 х годов

    2000*2000

  • Мода цвет 80 х годов ретро вечеринка слово искусства

    1200*1200

  • ма дурга лицо индуистский праздник карта

    5000*5000

  • ретро стиль 80 х годов диско дизайн неон плакат

    5556*5556

  • Ретро мода 80 х градиент цвета художественного слова

    1200*1200

  • вектор скорости 80 значок

    1024*1024

  • bd письмо 3d круг логотип

    1200*1200

  • Ретро стиль 80 х годов вечеринка арт дизайн

    1200*1200

  • элегантный серебряный золотой bb позже логотип значок символа

    1200*1200

  • мемфис бесшовной схеме 80s 90 все стили

    4167*4167

  • облака комиксов

    5042*5042

  • в первоначальном письме bd шаблон векторный дизайн логотипа

    1200*1200

  • Силовые кнопки BRAUBERG, цветные, круглые, 12 мм, 50 шт.

    , в картонной коробке, 224771 Силовые кнопки BRAUBERG, цветные, круглые, 12 мм, 50 шт., в картонной коробке, 224771

    Онлайн гипермаркет

    ЗАКАЗЫ ПРИНИМАЮТСЯ КРУГЛОСУТОЧНО

    Пн-Пт с 10:00 до 18:00 СБ-ВС — выходные

    0
    1. Главная
    2. Канцтовары
    3. Канцелярские мелочи
    4. Кнопки канцелярские
    5. Силовые кнопки BRAUBERG, цветные, круглые, 12 мм, 50 шт., в картонной коробке, 224771

    Бонусные баллы: 2

    224771

    58. 33

    в наличии

    Минимальное кол-во: 2

    В корзину

    Все товары бренда BRAUBERG

    Кнопки с цветной пластиковой шляпкой диаметром 12 мм и стальным острием длиной 12 мм. 50 штук в картонной коробке. Приобрести кнопки-гвоздики BRAUBERG можно в нашем интернет-магазине.

    Диаметр шляпки12
    Длина острия12
    Количество в упаковке50
    Материал изготовления шляпкипластик
    Объем0.0001
    СтранаКитай
    Тип кнопкигвоздик
    Тип острияигольчатое
    Упаковкакартонная коробка
    Форма шляпкидиск
    Цвет шляпкиассорти

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

    Личный кабинет

    Обратная связь

    © 2021. Канцтовары Brauberg

    UX Дизайн кнопок: Лучшее применение, форма и расположение | by Writes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    В тулбарах

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

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

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

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

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

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

    • Иметь по крайней мере три переключателя в группе
    • Быть помечены текстом, иконкой или и тем, и другим
    • Иконки подходят переключателям, которые могут либо включать, либо отключать что-либо, например, добавление звездочки к объекту. Лучше всего их (иконки) располагать на панели приложения, тулбарах, кнопках действия или переключателях.
    • Очень важно правильно подобрать иконку к кнопке. Я подробно об этом рассказал в статье «Иконки, как часть отличного опыта взаимодействия». Пример Apple iOS использует переключатели для раздела настроек.
    • 4. Призрачные кнопки
    • Призрачные кнопки — это прозрачные, пустые кнопки стандартной формы, например, прямоугольной. Обычно они обведены очень тонкой линией и содержат внутри простой текст.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Плюсы скрытия кнопки:

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

    Плюсы использования неактивного состояния:

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

    Заключение

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

    Источник

    Круглые кнопки на заказ | Чистые Кнопки

    Обратите внимание на круглые кнопки

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

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

    Узнайте больше о наших пользовательских кнопках, щелкая вкладки.

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

    Маржа прибыли при перепродаже

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

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

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

    Круглые пуговицы 1 »

    Кол-во Розничная торговля: 1 шт. Розничная торговля: 2 шт. Розничная торговля: 3 шт. Розничная торговля: 4 шт.
    500 шт. 397 долларов.50 Прибыль $ 897,50 Прибыль $ 1397,50 Прибыль $ 1,897,50 Прибыль
    1000 шт. $ 802 Прибыль $ 1,802 Прибыль $ 2,802 Прибыль $ 3,802 Прибыль
    2,500 шт.
    $ 2 037,50 Прибыль $ 4,537,50 Прибыль $ 7 037,50 Прибыль 9 537 долларов.50 Прибыль
    5000 шт. $ 4,125 Прибыль $ 9,125 Прибыль $ 14,125 Прибыль $ 19,125 Прибыль

    Пользовательские закругленные кнопки в Xcode 10 (Swift 4.2) | Адам Филс

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

    Приступим:

    1. Создайте новый быстрый файл (я назову свой RoundButton.swift ) подкласса UIButton .

    2. Вставьте этот код в файл RoundButton.swift.

      import  UIKit 

    @IBDesignable
    class RoundButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0 {
    didSet self {
    .Layer.cornerRadius = cornerRadius
    }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
    self .layer.borderWidth = borderWidth
    }
    } 9

    3 borderColor:

    UIColor = UIColor .clear {
    didSet {
    self .layer.borderColor = borderColor.cgColor
    }
    }
    }

    3. Теперь давайте свяжем наш класс Custom Button раскадровка. Перейдите к Storyboard и вставьте контроллер представления в ViewController , если вы еще этого не сделали. После вставки кнопки убедитесь, что она выбрана, затем перейдите к I dentity Inspector и установите свой класс кнопок на созданный нами пользовательский класс .

    4. Затем, не снимая выделения с кнопки, вы возвращаетесь к инспектору атрибутов , теперь вы должны увидеть новый раздел под названием Round Button , как показано на изображении ниже , где вы можете управлять радиусом угла , цветом границы и Border Width с изменениями, видимыми в раскадровке.

    2,50-дюймовые круглые кнопки на заказ

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

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


    Часто задаваемые вопросы о круглых кнопках размером 2,50 дюйма

    В чем разница между бумагой и ацетатом?

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

    У вас совпадает цена?

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

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

    • городские фестивали (информирование / сбор средств)
    • сбор средств
    • продвижение новых продуктов и услуг
    • для отображения на лацкане продавца


    Возможны оптовые скидки

    Количество (с таким же изображением) -> 1-24 | 25-49 | 50-99 | 100-249 | 250-499 | 500-999 | 1000–1999 | 2000-4999 | 5000-9999 | 10к-25к | 25 КБ +
    Цена за кнопку -> $ 1.
    50 |
    0,77 $ | $ 0,43 | 0,30 $ | 0,27 $ | 0,25 $ | 0,24 $ | 0,23 $ | 0,22 $ | $ 0,20 | 0,19 долл. США

    Почему кнопки за половину цены?

    • Напечатано на высококачественном коммерческом полиграфическом оборудовании
    • Быстрое время оборота (в среднем 7-10 дней + время доставки)
    • Мы упоминали, что продаем такие же высококачественные кнопки по более низкой цене?
    • 100% Сделано в США

    Amazon тестирует кнопки с закругленными краями.Это большое дело для UX Design

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

    Цвет кнопок «Добавить в корзину» и «Купить сейчас» Кнопки

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

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

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

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

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

    Удобство и простота: преимущества кнопок с закругленными краями

    Шань Шен из UXDesign сказал: «Полностью закругленные кнопки отлично подходят для интерфейсов, у которых достаточно места».

    Использование закругленных кнопок различается в зависимости от отрасли, но основные преимущества заключаются в том, что они:

    • Выделитесь на странице
    • Облегчите обработку информации внутри кнопки

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

    Эффект Бубы / Кики

    В UX Planet Тайме Коэ описал, как эффект Bouba / Kiki играет на выборе кнопки. По сути, мозг придает значения и черты определенным формам. Люди склонны ассоциировать такие качества круглой формы, как «спокойствие» и «дружелюбие».

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

    Это тег? Недостатки округлых кнопок

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

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

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

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

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

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

    Наука поддерживает новую кнопку Amazon UX

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

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

    Хотя Amazon не опубликовал никакой информации об этом тесте, мы думаем, что в какой-то момент вы, вероятно, увидите, что эти изменения станут постоянными.

    Исторически Amazon ценила инновации в сфере UX

    Еще в 2000 году Джефф Безос так сказал о UX: «В первый год мы не потратили ни единого доллара на рекламу… лучше всего потрачены доллары, которые мы тратим на улучшение качества обслуживания клиентов.”

    Таким образом, очевидно, что компания сосредоточена на этом, даже если они не часто пересматривают свой UX.

    Взгляд Ньюли: Amazon делает ставку против реальности

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

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

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

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

    Или, может быть, Amazon осознал, что Интернет — теперь наш дом. В доме, прежде всего, не должно быть стресса.

    Нам не терпится увидеть, как закончится тест.

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

    Круглые пуговицы 7/8 «

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

    Круглые пуговицы 1 «

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

    Круглые пуговицы 1-1 / 4 дюйма

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

    Круглые пуговицы 1-1 / 2 «

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

    Круглые пуговицы 1-3 / 4 «

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

    2-дюймовые круглые кнопки

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

    Круглые пуговицы 2-1 / 4 дюйма

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

    Круглые пуговицы 2-1 / 2 «

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

    3-дюймовые круглые кнопки

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

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

    Круглые пуговицы с индивидуальной печатью

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

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

    Круглые кнопки с индивидуальной печатью, полноцветные
    1-SAB 1-дюймовая настраиваемая кнопка 1,40 0,76 0,48 0,34 0,31 0,29 0,25
    125-SAB Пользовательская кнопка 1-1 / 4 дюйма 1,40 0. 76 0,48 0,34 0,31 0,29 0,25
    150-SAB Пользовательская кнопка 1-1 / 2 дюйма 1,40 0,76 0,48 0,34 0,31 0,29 0,25
    175-SAB Пользовательская кнопка 1-3 / 4 дюйма 1,44 0,78 0.50 0,36 0,32 0,30 0,26
    225-SAB Специальная кнопка 2-1 / 4 дюйма 1,50 0,80 0,53 0,39 0,35 0,33 0,29
    250-SAB Специальная кнопка 2-1 / 2 дюйма 1,56 0,88 0.60 0.44 0,40 0,38 0,34
    3-SAB 3-дюймовая пользовательская кнопка 1,68 0,92 0,68 0,51 0,46 0,44 0,39
    350-SAB Пользовательская кнопка 3-1 / 2 дюйма 1,84 1,12 0,96 0,74 0. 67 0,65 0,57
    4-SAB 4-дюймовая пользовательская кнопка 2,12 1,48 1,28 0,96 0,88 0,85 0,75
    6-SAB 6-дюймовая пользовательская кнопка 4,12 3,30 2,85 2,14 1,95 1,87 1.66
    9-SAB 9-дюймовая пользовательская кнопка 5,68 4,80 4,18 3,16 2,91 2,80 2,48
    Проведите пальцем влево и вправо, чтобы увидеть таблицу.

    Пуговицы:

    Носимые магниты (2½ или больше) Добавьте 1,40 доллара за пуговицу
    Магнитные спинки (не носимые) Добавьте 20 центов за пуговицу
    Зажимы Bulldog Добавьте 28 центов за пуговицу


    Площадь отпечатка:

    Размер для печати


    Форматы художественных работ:

    •.

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

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