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

Примечание

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

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

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

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

Примечание

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

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

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

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

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

• Удалите корневой узел, если он имеется, так как он часто не требуется.

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

  

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

  

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

  

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

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

  

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

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

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

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

Примечание

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

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

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

Предсказуемость и обнаружение

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

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

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

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

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

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

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

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

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

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

Варианты использования

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

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

Рекомендации

Уровень представления

• В контейнере отсортируйте элементы в логическом порядке. Сортируйте имена в алфавитном порядке, числа — в числовом порядке, а даты — в хронологическом порядке.

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

• Если дерево действует как оглавление, используйте атрибут Single Expand, чтобы упростить управление деревом. Таким образом разворачивается только соответствующая часть дерева.

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

  

  В этом примере список изначально представлен с примерами.

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

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

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

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

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

  

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

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

  Правильно:

  

  Лучше:

  

  Соединительные линии мало что помогают постижет понимание.

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

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

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

• Если элементу требуется дополнительное объяснение, укажите объяснение в информационной подсказке.

  

  В этом примере информационная подсказка содержит дополнительные сведения.

• Предоставьте контекстные меню соответствующих команд. К таким командам относятся вырезать, копировать, вставить, удалить или удалить, переименовать и свойства.

• При отключении представления в виде дерева также отключите все связанные метки и кнопки команд.

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

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

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

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

  

  В этом примере количество выбранных элементов отображается под деревом. Ясно, что два элемента не выбраны.

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

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

  Правильно:

  

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

Рекомендуемые размеры и интервалы

Рекомендуемые размеры и интервалы для элементов управления представлением в виде дерева.

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

• Включите дополнительные 30 % для локализации.

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

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

  

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

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

Метки

Метки элементов управления

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

• Назначьте уникальный ключ доступа. Рекомендации по назначению см. в разделе Клавиатура.

• Используйте выделение прописных букв, как в предложении.

• Поместите метку над элементом управления и выровняйте ее по левому краю элемента управления.

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

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

  

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

  Лучше:

  

  В этом примере метка явно указывает на возможность выбора нескольких элементов.

  Лучшие:

  

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

Текст данных

• Используйте выделение прописных букв, как в предложении.

Инструктажный текст

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

• Используйте выделение прописных букв, как в предложении.

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

  

  В этом примере дополнительное объяснение находится под элементом управления .

Документация

При обращении к представлениям в виде дерева:

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

Пример. В списке Содержимое выберите Конструктор пользовательского интерфейса.

При ссылке на поля проверка в представлении в виде дерева:

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

Пример. В списке Элементы для резервного копирования выберите поле Мои документы проверка.