Как выглядит кнопка: Кнопка «Вставить» — Служба поддержки Майкрософт

Кнопка «Вставить» — Служба поддержки Майкрософт

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

Часть содержимого этого раздела может быть неприменима к некоторым языкам.

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

В этой статье

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

• Кнопка «Вставить»

• Советы по макету

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

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

• Отправка данных в одной или нескольких источников данных.

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

• Обновление данных из дополнительный источник данных.

• Снимите все запрашиваемые данные из формы.

• Вычисление данных в форме.

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

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

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

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

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

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

К началу страницы

Кнопка «Вставить»

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

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

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

Кнопка «Вставить»

org/ItemList»>

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

2. Если область задач Элементы управления не отображается, щелкните Другие элементы управления в меню Вставка или нажмите клавиши ALT+I, C.

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

4. Дважды щелкните значок кнопки, которая была добавлена в шаблоне формы.

5. org/ListItem»>

   Откройте вкладку Общие.

6. В списке Действие выберите действие, которое будет выполняться при нажатии кнопки.

   Доступные действия

   Действия отправки

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

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

7. В поле Метка выполните одно из указанных ниже действий.

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

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

К началу страницы

Советы по макету

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

• org/ListItem»>

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

• Чтобы одновременно изменить размер нескольких кнопок, выберите кнопки, размер которых нужно изменить. Сочетание клавиш ALT + ВВОД, а затем внесите необходимые изменения на вкладке размер.

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

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

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

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

К началу страницы

Проектируем кнопку «Назад”: лучшие практики

Пользователи часто путаются и расстраиваются, когда взаимодействуют с кнопкой “Назад”. Как спроектировать этот элемент правильно и где разместить его в наших интерфейсах?

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

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

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

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

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

Страх перед кнопкой «Назад» в браузере

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

Один из участников исследования комментировал свои действия так: «Как мне вернуться назад? Просто нажать кнопку «Назад»? Если честно, не очень удобная навигация. А теперь она вернула меня в раздел с товарами для женщин. Окей. Мне это не нравится.” (Изображение: Baymard Institute)

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

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

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

Всегда закрывайте большие оверлеи кнопкой «Назад»

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

Когда оверлей большой, кнопка «Назад» должна закрывать модальное окно, а не возвращать пользователя на предыдущую страницу. (Изображение: Eric Bailey)

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

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

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

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

Положение пользовательской кнопки «Назад»

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

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

Но где же на самом деле должна располагаться эта кастомная кнопка?

Схема расположения кнопок Стива Шогера. Так где же должна находиться кнопка «Назад»? (Изображение: Steve Schoger)

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

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

Возможно, стоит поместить кнопку «Назад» над формой

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

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

Слева: кнопка «Назад» в нижней части страницы; справа: Кнопка «Назад» над формой. Главный вопрос заключается в том, какой шаблон работает лучше? (Изображение: Adam Silver)

Адам Сильвер предлагает разместить кнопку «Назад» над формой, как это сделал Джо Ланман, дизайнер Gov.uk. По словам Джо, при таком подходе она находится примерно там же, где и в большинстве браузеров. Кроме того, такая кнопка, вероятно, не нужна внизу страницы: «если пользователи заполнят форму и кликнут “Назад”, они потеряют свои ответы«.

Пользовательская кнопка «Назад» должна выглядеть как интерактивный элемент

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

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

На сайте Gov.uk ссылка «Назад» расположена сверху, подчеркнута и выглядит как интерактивный элемент. (Изображение: Gov.uk)

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

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

Когда форма короткая, подобных проблем не возникает: формы Gov.uk как раз спроектированы по принципу «Один шаг — одна страница».

Располагайте кнопки «Назад» и «Далее» далеко друг от друга

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

Переключатель со стрелками вперед / назад, как, например, в кастомайзере обуви Van’s shoes, — небольшой, но эффективный компонент, который помогает клиентам плавно переходить от одного шага к другому. Однако важно, чтобы на каждом шаге были адекватные настройки по умолчанию. (Посмотрите видео)

‍Кастомайзер Van’s shoes содержит панель навигации для быстрых переходов, а также переключатель “вперед / назад”. На узких экранах все доступные опции перечислены горизонтально, и чтобы выбрать одну из них, покупатель должен свайпнуть влево или вправо.

Сайт 177milkstreet с красивым лейаутом для отображения пошаговых рецептов. Этот шаблон можно применить и к конфигураторам. (Посмотрите видео)

В рецептах 177milkstreet кнопки «Назад” / “Далее» сгруппированы в нижней части разделенного экрана, а сами шаги расположены вертикально.

Fully.com подталкивает пользователей к завершению настройки.

На сайте Fully кнопки «Назад» и «Далее» расположены очень далеко друг от друга. Пользователи могут вернуться в любой момент, нажав на стрелку «Назад», которая расположена в левом верхнем углу, в то время как кнопка “Далее” находится в правом нижнем углу. Это надежный способ исключить ошибки.

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

Предусмотрите возможность сохранения настроек

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

Fender Mod Shop позволяет пользователям сохранять настройки в виде снапшотов.

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

Подведем итоги

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

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

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

Как выглядит кнопка?

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

Чтобы прочитать и понять кнопку

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

ручной блендер – легко.
Меню на сайте – достаточно простое.
Дистанционная цифровая коробка — в лучшем случае достаточно понятная или весьма загадочная.

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

Минималистский компакт-диск
Проигрыватель компакт-дисков без ТРАДИЦИОННЫХ кнопок. Даже если вы не знакомы с этим продуктом, вы, вероятно, поймете, как им пользоваться, просто взглянув на него. Простой, интуитивно понятный и игривый.

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

Последствия плохого дизайна кнопки

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

Функциональность против эстетики

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

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

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

Скеоморфизм: уродливый дизайн, который работает?

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

Кнопка в старой доброй Windows 95
Скеоморфизм 1995: Старая добрая Windows 95. Внешняя черная рамка в сочетании с более светлыми и темными цветами для имитации разницы высот. Внутренняя пунктирная рамка показывает, что это активная кнопка, которая активируется, если вы предпочитаете нажимать клавишу Enter вместо мыши.

Кнопки в Mac OS
Скеоморфизм 2001: Витражные стеклянные бусины (?), утопленные в пластину из матового металла, действуют как кнопки для управления окнами в Mac OS X. Стеклянные бусины висели в течение тринадцати лет, до 2014 года, когда они стали плоскими. как блины в OS X Yosemite. Металл также был списан.

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

Мир после кнопки

Кнопка существует уже давно и наверняка будет еще долго. Но если до кнопки было время, то, может быть, разумно предположить, что будет время и после нее. Большинство из нас заметило, что мы живем в интересные времена; постоянно разрабатываются новые футуристические способы взаимодействия с нашими объектами, начиная от сложного голосового управления в Siri от Apple и Cortana от Microsoft, до движений рук в воздухе Xbox от Microsoft и проекта Solihull от Google.

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

удобство использования — Как должна выглядеть кнопка?

спросил 3 года 2 месяца назад

Изменено 2 года, 5 месяцев назад

Просмотрено 6к раз

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

Итак, как правильно обозначать кнопку для пользователей?

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

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

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

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

^{_{Примечание. Я не утверждаю, что все это отличные примеры кнопок, но каждая из них адекватно иллюстрирует перечисленные пункты.}}

• Границы/затенение , которые напоминают трехмерную кнопку реального мира, как показано на этом самом сайте:

• Тень , видно (незаметно) в рекомендациях Google по материальному дизайну:

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

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

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

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

• ^{_{(Хорошо, последний пример WhatsApp, Я обещаю . ..)}} Не уверен, что термин UX для этого, но дизайн WhatsApp также содержит элемент « ну что еще может быть за ? «Кнопки не передают информацию, но зарезервированы изрядное количество места, поэтому давайте нажмем на них!

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

10

Я расширяю свой комментарий к ответу maxaathousand в соответствии с просьбой и добавляю дополнительную информацию:

Наиболее важным визуальным ключом для кнопки является контраст (посмотрите, что я там сделал?). Это относится к:

• Кнопке, контрастирующей с фоном за ней
• Кнопка, контрастирующая с окружающими элементами и всей страницей
• Текст или символ внутри кнопки, контрастирующий с самой кнопкой
• Кнопка, контрастирующая с другими кнопками или типами кнопок

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

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

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

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

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

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

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

— правильный пример (из Wikipedia Commons):

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

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

Если вы хотите произвести впечатление на пользователей, не будет ли первой целью просто не разозлить их? Чтобы сделать мысли еще более ясными, вот что мне определенно никогда не понравится:

(производное от Commons).

3

Что касается кнопок, ну, я обязан опубликовать этот беспорядок с переключателями:

(это довольно весело: https://uxdesign.cc/the-worst-volume-control-ui-in-the- мир-60713dc86950)

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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