Представления дерева

Статья
03/12/2025

Заметка

Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows. Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

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

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

снимок экрана представления дерева проводника windows

Типичное представление дерева.

Заметка

Рекомендации, связанные с макета и меню, представлены в отдельных статьях.

Это правильный элемент управления?

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

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

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

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

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

В этом примере вкладки используются для контейнеров верхнего уровня

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

снимок экрана

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

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

Чтобы решить, является ли представление дерева правильным элементом управления, рассмотрите следующие вопросы:

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

Заметка

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

Концепции проектирования

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

Прогнозируемость и возможность обнаружения

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

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

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

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

Ширина и глубина

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

Другие принципы

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

Если вы делаете только одну вещь...

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

Шаблоны использования

Представления дерева имеют несколько шаблонов использования:

Употребление	Пример
представления дерева только с узлами контейнеров пользователи могут одновременно просматривать и взаимодействовать с одним контейнером.	Как правило, эти представления дерева имеют связанный элемент управления, отображающий содержимое выбранного контейнера, чтобы пользователи могли взаимодействовать только с одним контейнером одновременно. снимок экрана В этом примере представление дерева содержит только узлы контейнера. Содержимое выбранного узла отображается в связанном элементе управления представлением списка.
представления дерева с конечными узлами контейнера и конечными узлами пользователи могут просматривать контейнеры и покидать их.	Как правило, эти представления дерева имеют связанный элемент управления, отображающий содержимое выбранного контейнера или листа. При взаимодействии пользователей с листьями часто требуется поддержка нескольких вариантов выбора. в этом примере представление дерева содержит как контейнеры, так и конечные узлы. так как поддерживается несколько выделений, содержимое открытых элементов отображается с помощью вкладок в связанном элементе управления. Кроме того, представление дерева может иметь упорядоченный список, в котором контейнеры являются заголовками и листьями являются параметрами. В этом примере листья дерева являются параметрами, а контейнеры — категориями вариантов.
представления дерева флажка пользователи могут выбрать любое количество элементов, в том числе нет.	Флажки четко указывают на возможность выбора нескольких элементов. используйте этот шаблон дерева, если несколько выборок является важным или часто используемым. В этом примере представление дерева флажка позволяет выбрать функции для включения или отключения.
построители представлений "Дерево" пользователи могут создавать дерево, добавляя один контейнер или лист за раз и при необходимости устанавливая порядок.	Многие деревья можно создавать или изменять пользователями. некоторые деревья создаются на месте с помощью контекстных меню и перетаскивания (например, папок в проводнике windows), а другие деревья создаются с помощью специализированного диалогового окна (например, списка избранного в Internet Explorer). В этом примере из Internet Explorer пользователи могут создавать собственный список избранного с помощью диалогового окна.
представления дерева с альтернативными методами доступа пользователи могут находить объекты способами, отличными от иерархического дерева.	Как упоминалось ранее, у пользователей возникают проблемы с поиском объектов в больших сложных деревьях, поэтому такие деревья должны быть дополнены другими методами доступа, такими как поиск слов, индекс или фильтрация. в этом примере пользователи также могут получить доступ к информации с помощью оглавлений, индекса и избранного. для некоторых пользователей вкладки индекса и поиска могут быть более полезными, чем вкладка содержимого. В этом примере меню "Пуск Windows" также позволяет пользователям получать доступ к программам, файлам и веб-страницам, введя часть имени в поле поиска.

Руководящие принципы

Представление

В контейнере отсортируйте элементы в логическом порядке. Сортировка имен в алфавитном порядке, числа в числовом порядке и датах в хронологическом порядке.
Использовать атрибут always Show Selection, чтобы пользователи могли легко определить выбранный элемент, даже если элемент управления не имеет фокуса ввода.
Если дерево действует как оглавление, используйте атрибут Single Expand, чтобы упростить управление деревом. Таким образом, расширяется только соответствующая часть дерева.
Избегайте представления пустых деревьев. Если пользователь создает дерево, инициализировать дерево с инструкциями или примерами элементов, которые могут потребоваться пользователям.

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

неправильно:

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

правильно:

Лучше:

Соединительные линии делают мало, чтобы помочь понимание.

Взаимодействие

Рассмотрите возможность предоставления поведения двойного щелчка. Двойной щелчок должен иметь тот же эффект, что и выбор элемента и выполнение команды по умолчанию.
Сделайте поведение двойного щелчка избыточным. Всегда должна быть кнопка команды или команда контекстного меню, которая имеет тот же эффект.
Если элемент требует дальнейшего объяснения, предоставить объяснение вinfotip.

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

Организация дерева

Использовать естественную иерархическую структуру, знакомую большинству пользователей.
Если вы не можете использовать такую структуру, попробуйте сбалансировать возможность обнаружения с прогнозируемой пользовательской моделью, которая сводит к минимуму путаницу.
Чтобы безопасно улучшить обнаружение, поместите элемент в несколько контейнеров, когда:
- Элемент не связан с другими аналогичными элементами (поэтому пользователи не путаются неправильными сопоставлениями).
- Существует только несколько из таких избыточных элементов (поэтому дерево не становится больших двоичных объектов).
Используйте простую иерархическую структуру, которая хорошо работает. Для этого сделайте:
- Поместите наиболее часто доступ к объектам в первых двух уровнях дерева (не подсчитывая корневой узел) и поместите менее часто доступ к объектам дальше по иерархии.
- Исключите ненужные или объедините избыточные контейнеры промежуточного уровня.
Предпочитайте ширину над глубиной. В идеале дерево должно иметь не более четырех уровней, и наиболее часто доступ к объектам должен отображаться на первых двух уровнях.
Определите, действительно ли вам нужен корневой узел. Укажите корневой узел, если пользователям нужна возможность выполнять команды во всем дереве (возможно, с помощью контекстного меню на корневом узле). В противном случае дерево проще и проще использовать без него.
Если дерево имеет альтернативные методы доступа, такие как поиск слов или индекс, оптимизируйте дерево для просмотра, фокусируясь на наиболее полезном содержимом. При использовании альтернативных методов доступа содержимое дерева не должно быть исчерпывающим. Упрощение дерева упрощает поиск наиболее полезного содержимого пользователями.