Как на wix сделать выпадающий список

CMS: управление вариантами для выпадающего списка, чекбокса или переключателя

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

Управлять вариантами

1. Нажмите на выпадающий список в редакторе.
2. Нажмите Управлять вариантами
3. Измените варианты, используя следующие функции:

Переименовать вариант выбора

1. Дважды нажмите на вариант выбора, который вы хотите изменить.
2. Введите свой текст.
3. Нажмите Готово.

Добавить новый вариант

1. Нажмите Добавить вариант внизу.
2. Дважды щелкните новый добавленный вариант и введите свой текст.
3. Нажмите Готово.

Выбрать вариант по умолчанию

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

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

1. Наведите указатель мыши на вариант в списке.
2. Нажмите значок показать больше .
3. Нажмите Выбрано по умолчанию / Не выбрано по умолчанию.

Измените порядок вариантов выбора
Нажмите на вариант выбора и перетащите его, чтобы изменить порядок.
Удалить вариант выбора

1. Наведите указатель мыши на вариант в списке.
2. Нажмите значок показать больше .
3. Нажмите Удалить.

Пользователи Velo: измените значение

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

По сути, «Label» — это текст, который видят посетители на вашем сайте, а «Value» — это данные, которые сохраняются в вашей коллекции.

Изменить значение

1. Наведите указатель мыши на вариант в списке.
2. Нажмите значок показать больше .
3. Нажмите Изменить значение
4. Отредактируйте текст значения.
5. Нажмите Готово.

Примечания:

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

Менеджер контента: добавление и настройка выпадающего списка для отправки формы

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

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

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

Шаг 1 | Добавьте выпадающий список

Начните с добавления выпадающего списка на страницу.

Чтобы добавить выпадающий список:

1. Нажмите на значок Добавить в левой части редактора.
   • Редактор Wix: нажмите Добавить в левой части редактора.
   • Editor X: нажмите Добавить в верхней части Editor X.
2. Нажмите Ввод данных.
3. Нажмите Выпадающий список.
4. Нажмите и перетащите выбранный выпадающий список на страницу.
5. Нажмите Управлять вариантами и выберите, что вы хотите сделать:

Отредактируйте варианты по умолчанию в выпадающем списке

1. Отредактируйте метку по умолчанию:
   1. Наведите курсор на соответствующий вариант и нажмите значок Дополнительные действия .
   2. Нажмите Редактировать метку и введите текст, который должен отображаться в раскрывающемся списке.
   3. Нажмите Сохранить.
2. (Только для Velo) Измените значение по умолчанию:
   1. Наведите курсор на соответствующий вариант и нажмите значок Дополнительные действия .
   2. Нажмите Редактировать значение и введите название значения.
   3. Нажмите Сохранить.
3. Повторите эти шаги для каждого варианта.

Добавить новый вариант

1. Нажмите кнопку Добавить вариант внизу.
2. Отредактируйте метку по умолчанию:
   1. Наведите курсор на соответствующий вариант и нажмите значок Дополнительные действия .
   2. Нажмите Редактировать метку и введите название метки.
   3. Нажмите Сохранить.
3. (Только для Velo) Измените значение по умолчанию:
   1. Наведите курсор на соответствующий вариант и нажмите значок Дополнительные действия .
   2. Нажмите Редактировать значение и введите название значения.
   3. Нажмите Сохранить.
4. Повторите эти шаги, чтобы добавить больше вариантов.

Измените порядок вариантов выбора
Нажмите и перетащите вариант вверх или вниз, чтобы изменить порядок списка.
Удалить вариант

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

Шаг 2 | Настройте выпадающий список

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

Чтобы настроить выпадающий список:

1. Нажмите на выпадающий список в редакторе.
2. Нажмите Настройка и отредактируйте следующее:
   • Название поля: введите заголовок, который будет отображаться вверху выпадающего списка.
   • Показать при загрузке: выберите текст, который увидят посетители, прежде чем нажать выпадающий список:
     • Ничего: посетители видят пустое поле перед тем, как нажать на выпадающий список.
     • Текст-подсказка: используйте свой собственный текст в выпадающем списке (например, «Выберите свой цвет»). Введите текст в текстовое поле Текст-подсказка.
     • Пункт выпадающего списка: нажмите на список и выберите элемент, который вы хотите отобразить.
     • Автозаполнение: активируйте переключатель, чтобы посетители сайта могли фильтровать список параметров, вводя текст в выпадающий элемент.
   • Тип выпадающего списка: выберите вариант:
     • Настроить: выберите этот параметр, чтобы настроить выпадающий список на панели «Дизайн». На мобильном устройстве типом списка всегда является Браузер.
     • Браузер: выберите этот параметр, чтобы использовать тему браузера по умолчанию для выпадающего списка.
   • Это поле: установите флажок Обязательное поле, чтобы сделать это поле обязательным для заполнения.

Шаг 3 | Подключите выпадающий список

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

Чтобы подключить выпадающий список:

1. Нажмите значок Подключить к данным (или в Editor X).
2. Нажмите Собирать информацию.
3. Нажмите на раскрывающийся список Подключить набор данных, чтобы выбрать набор данных.
   Примечание: нажмите Создать набор данных, если вы еще не создали набор данных для выпадающего списка.
4. Нажмите на раскрывающийся список Подключить значение к и выберите вариант:
   • Выберите существующее поле для текста, числа или ссылки в коллекции.
   • Создайте новое поле в коллекции:
     1. Нажмите Добавить новое поле.
     2. введите название поля;
     3. Нажмите на выпадающий список Тип поля и выберите тип поля.
     4. Нажмите Добавить.

(Необязательно) Шаг 4 | Подключите элементы выпадающего списка

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

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

Чтобы подключить элементы выпадающего списка:

1. Нажмите значок Подключить к данным (или в Editor X).
2. Нажмите Собирать информацию.
3. Активируйте переключатель Подключить элементы списка.
4. Нажмите на выпадающий список Подключить набор данных и выберите набор данных.
5. Нажмите на раскрывающийся список Подключить ярлыки и значения к и выберите поле коллекции, которое вы хотите использовать для значений и ярлыков.

Вопросы и ответы

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

Почему я не вижу варианты в панели управления вариантами?

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

Выпадающий список на wix

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

Описание примера выпадающего списка

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

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

Панель свойств: особенности дизайна

Мы — продуктовые дизайнеры — создаём различные приложения: для смартфонов, планшетов и десктопов. Формат зависит от компании, в которой мы работаем и от заказчика, которого мы обслуживаем — или от самого продукта, если это, например, сайд-проект.

В правой части экрана расположена панель свойств

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

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

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

Я начал искать информацию и заметил, что об этом элементе мало доступных сведений. Провёл исследование — изучил Figma, Sketch, Editor X (от WIX), Webflow и Lottie Editor, позадавал вопросы в сообществах UX-дизайнеров — и написал эту статью, где делюсь тем, что узнал. Я считаю, что гайдлайн получился информативный — и он может пригодиться тем, кому нужно разработать панель свойств в своём проекте. Готовы перейти к делу?

Как сейчас называется этот компонент?

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

Какие программы используют панель свойств?

Панели свойств чаще всего используются в профессиональных продуктах — Figma, Editor X, Unity, Houdini, а также в Google Slides и Keynote.

Основная структура

Вкладки

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

Вкладки в верхней части панели свойств

Группы свойств

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

Группы свойств на панели

Поведение

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

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

Типы полей ввода и элементов управления (инпутов и контролов) на панели свойств

Ползунок

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

Выпадающий список

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

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

Выпадающий список и ползунок

Визуальные элементы управления

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

Визуальные элементы управления

Модальные окна

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

Модальное окно выбора цвета

Текстовые и числовые поля

Подписи

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

Обсудив этот вопрос на Reddit, я сформулировал две основные причины, почему так:

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

Подписи под числовым полем

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

Подписи под числовым полем

Сообщения об ошибках для полей ввода

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

Выпадающее меню внутри числового поля

Некоторые числовые поля позволяют пользователю изменять единицу измерения, например, с PX на EM или REM. В результате пользователь может указать нужные ему единицы измерения, например, как при изменении параметров размера шрифта в Editor X.

Выпадающий список внутри числового поля

Группа кнопок

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

Кнопки

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

Что ещё нужно учитывать в дизайне панели свойств?

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

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