2009-10-27 4 views
4

В настоящее время у меня есть требование отображать связанные элементы в многоуровневой сетке. Это отличная дедушка и бабушка -> grandparent-> parent-> childДизайн шаблона пользовательского интерфейса для многоуровневой сетки

Например: Country-> state-> City-> Street is the order of display.

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

Страна -> состояние -> Город -> Улица

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

спасибо

+2

Какова типичная задача, которую вы ожидаете от пользователей, используя этот интерфейс? Это поможет вашему дизайну. –

+0

Технически этот вопрос относится к http://ux.stackexchange.com/ –

ответ

8

Когда у вас есть объекты данных с двух разных уровней одной и той же иерархии, вы может:

  • Поместите каждый уровень в другое окно (или страницу, лайтбоксы) и разрешите навигацию между ними. Я называю это drill-down.

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

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

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

Поместите уровни в дереве, если

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

  • Пользователь будет регулярно сравнивать подчиненные объекты двух или более надстроенных объектов, которые находятся рядом друг с другом в порядке сортировки (пользователь может затем развернуть дерево для обоих надстрочных объектов, чтобы сразу увидеть суборидитные объекты) ,

Помещенный уровни в отношении мастер-деталь, если:

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

  • Существует более одного класса подчиненных объектов для надстрочных объектов.

  • Существует много-много отношений, которые вы будете отображать.

Подробнее см Hierarchy Visual Design

Помещенный уровни в отношениях бура вниз, если:

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

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

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

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

  • Вводит несогласованность в сохранении изменений.

  • Создает режимы или неоднозначность в z-порядке (или, в случае лайтбоксов, двусмысленность функции кнопки «Назад»).

  • Недостаток раскрывающегося меню с его основными элементами управления для редактирования и уничтожения (в Linux и Windows).

  • Не поддерживает изменение размера окна (в Mac и Windows), чтобы обеспечить более гибкий просмотр содержимого.

Подробнее об этом см. http://www.zuschlogin.com/?p=31.

+0

+1 - гораздо более всеобъемлющий, чем мой ответ ;-) – rohancragg

0

Дерево? Как в представлении Windows Explorer файловой системы?

2

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

Таким образом, вы могли бы отобразить первую сетку/table с 1 или 2 или 3 уровнями вашей иерархии и навигационной ссылкой для отображения оставшихся уровней во втором или подвыборном списке/таблицах.

Если вы ищете для подтверждения некоторых установленных шаблонов вы можете выбрать из (или совмещать) эти:

Master/Detail

Tree Table

или

Cascading Lists

Смежные вопросы