Визуальный дизайн Иерархии

Question

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

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

Требования были бы следующими,

1) наглядно демонстрируют пользователю родительские / дочерние связи списка 2) позволяют пользователю легко перемещать элементы (перетаскиванием или каким-либо другим способом) 3) Предполагая, что у вас есть иерархические данные с несколькими родителями, как это изменит ваш выбор?

Спасибо всем!- Кевин

Answer 1

Ваш базовый элемент управления деревом имел большой успех для отображения иерархических отношений.Новичкам его относительно легко освоить, и в настоящее время он является стандартом де-факто для иерархий.Он очень подходит для редактирования отношений, особенно с помощью перетаскивания.Возможно, это единственный жизнеспособный выбор, когда иерархическая глубина произвольно варьируется в зависимости от объекта (т. Е. для любого объекта в дереве могут быть дети, внуки, правнуки и так далее до неопределенного числа ”поколений".).

Основной альтернативой дереву является окно с панелями основных сведений.В этом дизайне одна панель содержит родительские объекты, а другая - дочерние.При выборе родительского объекта дочерняя панель заполняется его дочерними элементами.При необходимости у вас могут быть панели grand-child и правнучатые дочерние панели, но основные сведения обычно работают лучше всего, когда в иерархии имеется небольшое фиксированное количество уровней.Пользователи редактируют отношения родитель-потомок с помощью перетаскивания и вырезания / копирования и вставки дочерних объектов либо внутри окон, либо между ними, аналогично использованию элемента управления tree.

Основные детали обычно лучше, чем деревья, для следующих случаев:

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

• Вам нужно разделить детей.Например, для данного объекта проекта вы хотите, чтобы члены его Команды были отделены от Этапов проекта.С помощью master-detail вы можете иметь две или более дочерних панелей для одной родительской панели, причем на одной панели перечислены участники команды, а на другой - Этапы.Неудобно хранить несвязанные дочерние объекты отдельно с помощью элемента управления tree.

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

Answer 2

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

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

Answer 3

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

Answer 4

Ваш вопрос рассматривает вашу проблему дизайна так, как будто это абстрактная вещь.К сожалению, это не так просто - если бы только существовало одно идеальное решение!

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

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