Для больших иерархий - дерево меток или «конструкция дерева с указателем»

Контекст

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

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

Скриншот древовидного жанра в поле

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

Деревья флажков для больших иерархических структур: проблемы

С этого момента я расскажу о деревьях флажков в реферате.

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

  • Повышенная познавательная нагрузка из-за того, что представлено очень много узлов
  • Пользователь должен выполнить поиск определенного узла, который они хотят выбрать.
  • Это чертовски медленно (в медленных JS-машинах, таких как IE).

Здесь «большая иерархия» - это дерево с 1k узлами или более.

Дерево альтернативного дерева

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

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

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

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

Таким образом, выбраны все узлы, которые находятся в дереве (в случае дерева жанра, разрешено).

Там должен быть режим массового добавления, поскольку в противном случае добавление нескольких узлов будет принимать 2 * N, где N = количество добавленных узлов.

Другая альтернатива - сглаженное строение списка

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

Вот пример макета того, что я думаю

Требования любого решения

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

Могу ли я это высказать? Должен ли я просто пойти с деревом меток?

13 голосов | спросил Dan Gravell 16 J0000006Europe/Moscow 2011, 12:49:19

2 ответа


2

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

Просто подумайте:

Как насчет сглаживания стиля иерархии смартфона в сочетании с чем-то рядом с Шаблон Listbuilder (в обновленной версии изображение, показанное на картинке, довольно архаично). Последнее из-за того, что вам может быть сложно отслеживать выбор в том же списке, который вы просматриваете.

левый список будет вашей всей коллекцией жанров (действительно ли это должно быть таким большим, кстати?). Он будет следовать шаблону развертки одного окна . На каждом уровне вы могли бы либо добавить жанр (и его поджанры, если таковые имеются), либо сверлить дальше (кроме самых низких уровней, конечно), что-то вроде Birdbrain здесь: http://pttrns.com/lists .

Правый список будет разрешенными жанрами, представленными в плоском списке, с иерархией жанров, представленной как «метаданные» в виде палитры, с форматом метаданных, например, Instacast, из того же ресурса, который указан выше ( http://pttrns.com/lists ).

ответил agib 17 J0000006Europe/Moscow 2011, 17:38:52
1

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

К сожалению, я не могу указать вам на быстрый, но я надеюсь, что кто-то еще сможет. В прошлом я решил проблему с аналогичной скоростью с IE. Основная проблема заключается в стоимости отображения виджета, что большая часть на самом деле обрезана /скрыта или выключена. Его можно решить с помощью javascript, который повторно использует элементы DOM в качестве пользовательских прокруток. Это создало сложный виджет с «более чем 4000 элементов» так же быстро, как когда ему было всего 100. Я бы надеялся, что кто-то еще решил это для флажков раньше.

Edit

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

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

ответил James Crook 16 J0000006Europe/Moscow 2011, 13:18:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132