Составные шаблоны для Visual Studio
Составные шаблоны объединяют элементы взаимодействия и проектирования в различных конфигурациях. Ниже приведены некоторые из наиболее важных составных шаблонов в Visual Studio в отношении согласованности:
Визуализация данных
Диаграммы — это визуальный способ агрегирования и визуализации данных для улучшения принятия решений. Они могут помочь пользователям столкнуться с большим количеством данных, но мало смысла видеть, что заслуживает внимания и что может потребоваться действие.
Пользователь получит выгоду от диаграммы, если одно из следующих условий имеет значение true:
Будет ли диаграмма помочь пользователям выявлять задачи, которые они могут действовать?
Будет ли диаграмма позволит пользователям прогнозировать последствия потенциальных изменений?
Поможет ли диаграмма пользователям обнаруживать тенденции и выявлять шаблоны?
Позволит ли диаграмма пользователям принимать лучшие решения?
Поможет ли диаграмма ответить на конкретный вопрос, который пользователи могут иметь в данном контексте?
Общие правила для диаграмм
Четко помеченные данные. Иллюстрации без объяснения просто красивые рисунки.
Запустите оси с нуля, чтобы избежать размыкания пропорций. Длина строки и размер полосы важны для понимания связей между точками данных.
Создание диаграмм, а не инфографики. Инфографика — это художественное представление данных, и их основная цель — визуальное повествование. Диаграммы могут (и должны) быть визуально привлекательными, но пусть данные говорят за себя.
Избегайте скауморфизма, графиков пикториальных баров, хэш-меток контраста и других инфографических касаний.
Не используйте трехмерные эффекты в качестве декоративных элементов. Используйте их только в том случае, если они действительно являются неотъемлемой частью способности пользователя понять информацию.
Избегайте использования нескольких строк и заливок, так как более двух цветов могут сделать этот тип диаграммы сложным для чтения и интерпретации правильно.
Не используйте диаграмму (или любую иллюстрацию) в качестве единственного средства понимания концепции или взаимодействия с данными. Это представляет трудности для пользователей с нарушениями зрения.
Не используйте диаграммы как необратимые или декоративные элементы на странице. Другими словами, если диаграмма не добавляет никакого значения или помогает пользователям решить проблему, не используйте ее.
Типы диаграмм
Типы диаграмм, используемых в Visual Studio, включают линейчатые диаграммы, графики, измененные круговой диаграммы, известные как кольцевая диаграмма или "кольцевая диаграмма", временная шкала, точечная диаграмма (также называемые "диаграммами кластера"), а также диаграммы Ганта. Каждый тип диаграммы полезен для обмена данными по-разному.
Другие рекомендации по диаграммам
Color
Существует определенная палитра цветов диаграммы, определенных для использования в Visual Studio. Палитра доступна для основных типов цветовой слепоты, и цвета можно различать даже при использовании как очень узкие срезы цвета. Эти цвета можно использовать в любом сочетании для любого типа диаграммы или графа в пользовательском интерфейсе. Вам не нужно использовать все семь цветов, если вам не нужно много различных цветов. Эти цвета не предназначены для использования с элементами переднего плана, поэтому не помещайте текст или глифы на вершину этих цветов. Эти оттенки должны быть жестко закодированы и доступны для настройки пользователей в разделе "Параметры инструментов>" (см. раздел "Предоставление цветов для конечных пользователей").
| Образец | Hex | RGB |
|---|---|---|
 |
#71B252 | 113,178,82 |
 |
#BF3F00 | 191,63,0 |
 |
#FCB714 | 252,183,20 |
 |
#903F8B | 144,63,139 |
 |
#117AD1 | 17,122,209 |
 |
#79D7F2 | 121,215,242 |
 |
#B5B5B5 | 181,181,181 |
Пользовательский интерфейс в объекте и просмотр
В этом разделе приводится контекст для просмотра, также известного как представление кода, тип пользовательского интерфейса в объекте, уникального для Visual Studio.
Пользовательский интерфейс в объекте должен предоставить пользователю дополнительные сведения или интерактивность, не отвлекаясь от основной задачи.
Основной шаблон пользовательского интерфейса в объектном интерфейсе в Visual Studio называется "сведениями в точке внимания".
Пользовательский интерфейс on-object в Visual Studio является встроенным или плавающим и устойчивым или временным.
Представление кода, тип пользовательского интерфейса объекта в Visual Studio, является встроенным и устойчивым.
CodeLens, тип пользовательского интерфейса объекта в Visual Studio, является плавающим и временным.
Понимание того, как работает фрагмент кода или поиск сведений об этом коде, часто требует от разработчика переключить контекст и перейти к другому содержимому или другому окну. Эти сдвиги контекста могут быть разрушительными, так как пользователи могут потерять фокус на исходной задаче, если они покидают главное окно. Кроме того, получение исходного контекста может быть трудно, особенно если переключение окон привело к скрытию исходного кода другим пользовательским интерфейсом.
Пользовательский интерфейс в объекте следует шаблону под названием "информация в точке внимания". Эти сообщения, всплывающие окна и диалоговые окна предоставляют пользователям дополнительную, соответствующую информацию, которая добавляет уточнение или интерактивность без потери фокуса на их главной задаче. Примеры пользовательского интерфейса в объекте включают всплывающие окна, которые отображаются при наведении указателя на значок в области уведомлений, красной волнистой волнистой фигуры под словом с ошибкой, а также представление просмотра, введенное в Visual Studio 2013.
Точки принятия решений
В Visual Studio есть несколько способов использовать этот шаблон информации в точке внимания. Выбор правильного механизма и его реализация в согласованном, прогнозируемом способе имеет важное значение для общего опыта. В противном случае пользователи могут быть представлены с запутанным или несогласованным интерфейсом, который отвлекает фокус от самого содержимого.
Связи между главным и подробным содержимым
Сведения в точке внимания используются для отображения связи между содержимым, на которое ориентирован пользователь (основное содержимое) и дополнительное связанное содержимое (содержимое "подробностей"). В этом шаблоне подробное содержимое четко связано с содержимым, с которым работает пользователь, и может отображаться близко к главному содержимому. Дополнительные сведения или сведения, которые не могут быть обобщены без подавляющего основного содержимого, должны соответствовать другому шаблону, например окне инструментов.
Всегда отображать содержимое сведений в близком расположении к главному содержимому.
Всегда убедитесь , что содержимое сведений по-прежнему позволяет пользователю оставаться сосредоточенным на главном содержимом. Часто лучший способ добиться этого — отрисовка содержимого сведений как можно ближе к главному содержимому. Это можно сделать, отрисовав содержимое сведений в всплывающем окне рядом с главным содержимым или отрисовав содержимое сведений под главным содержимым.
Никогда не используйте информацию в точке внимания, которая отнимает пользователя от главного содержимого. Если пользователям нужно просмотреть содержимое сведений отдельно, предоставляют явное действие, которое позволяет пользователю это сделать.
Технические подробности
После определения правильного выбора пользовательского интерфейса в объекте необходимо учитывать четыре основных рекомендации по проектированию:
Сохраняемость: должно ли содержимое быть устойчивым или временным? Будут ли пользователи сохранять сведения видимыми для ссылки на или взаимодействовать с ними? Или пользователи хотят быстро взглянуть на информацию, а затем продолжить работу с основной задачей?
Тип контента: будет ли содержимое информационным, интерактивным или навигациальным? Требуется ли пользователю дополнительная информация о главном содержимом? Нужно ли пользователю выполнить задачу, которая влияет на основное содержимое? Или пользователь должен быть направлен на другой ресурс?
Тип индикатора: имеет ли смысл внешний индикатор? Можно ли обобщать информацию полезным способом и отображаться без подавляя основное содержимое?
Жесты: какие жесты будут использоваться для вызова и закрытия пользовательского интерфейса? Как пользователь откроет содержимое сведений и отправит его? Есть ли значение при добавлении жеста, например закрепление для переключения между временными и устойчивыми состояниями?
Каждая из этих четырех точек принятия решений будет влиять на основные компоненты пользовательского интерфейса объекта.
Компоненты пользовательского интерфейса в объекте
Тип контейнера (докладчика контента)
Числа с плавающей запятой
Встроенный
Content type
Информационные данные: данные, которые могут быть статическими или динамическими
Действия: команды, изменяющие главное содержимое
Навигация: ссылки, которые принимают пользователя в другое окно или приложение, например MSDN
Жесты
Вызов
Увольнение
Закрепление
Другие взаимодействия
Сохраняемость и фиксация модели
Временный
Стабильность
Автоматически
По требованию
Индикаторы окружающей среды (необязательно)
Подчеркивание волнистой линии
Значок смарт-тега
Другие индикаторы окружающей среды
Тип контейнера (докладчика контента)
Существует два основных варианта, доступных для представления содержимого в точке внимания:
Встроенный выступающий, такой как представление просмотра, введенное в редакторе кода Visual Studio 2013, делает пространство для нового содержимого путем смены существующего содержимого.
Предпочитайте встроенных выступающих, если вы ожидаете, что пользователи будут тратить значительное количество времени, ссылаясь на содержимое или взаимодействуя с ним.
Избегайте встроенных выступающих, если вы ожидаете, что пользователи хотят взглянуть на информацию, которую вы представляете, а затем продолжить работу с их основной задачей с минимальным нарушением.
Floating: плавающий выступающий позиционируется как можно ближе к выбранному содержимому, но не изменяет макет существующего содержимого. Различные стратегии можно использовать, например отображение плавающей панели содержимого над ближайшим доступным пробелом для выбранного символа.
Предпочитайте плавающих выступающих, если вы ожидаете, что пользователи хотят взглянуть на информацию, которую вы представляете, а затем продолжить работу с их основной задачей с минимальным нарушением.
Избегайте плавающих выступающих, если вы ожидаете, что пользователи будут тратить значительное количество времени, ссылаясь на содержимое или взаимодействуя с ним.
Content type
Существует три основных типа контента, которые можно отобразить внутри любого контейнера пользовательского интерфейса в объекте. Можно показать любое сочетание этих типов сведений. Три типа:
Информационное: большинство контейнеров пользовательского интерфейса объекта будут отображать какой-то информационный контент. Содержимое может представлять сведения о настоящем состоянии среды или может представлять сведения о потенциальном будущем состоянии среды. Например, его можно использовать для отображения эффекта определенной команды, например рефакторинга в существующем коде.
Всегда используйте каноническое представление отображаемых сведений. Например, код должен выглядеть как код, в полной мере с выделением синтаксиса, и должен учитывать любой шрифт и другие параметры среды, заданные пользователем.
Всегда рекомендуется поддерживать любые действия по информационному содержимому, которое может быть возможно, если эта же информация представлена как основное содержимое. Например, если вы представляете существующий код в контейнере пользовательского интерфейса в объекте, настоятельно рекомендуется поддерживать возможность просмотра и изменения этого кода.
Всегда рекомендуется использовать другой цвет фона, если отображается информационное содержимое, представляющее потенциальное состояние будущего.
Действие: некоторые контейнеры пользовательского интерфейса в объекте обеспечивают возможность выполнения некоторых действий над главным содержимым, например выполнение операции рефакторинга.
Всегда позиционируемые команды отдельно от информационного содержимого.
Всегда включать и отключать действия при необходимости.
Всегда ознакомьтесь со стандартными рекомендациями по представлению команд в диалоговых окнах.
Всегда сохраняйте количество действий, предоставляемых в контейнере пользовательского интерфейса в объектном объекте, абсолютным минимумом. Взаимодействие с пользовательским интерфейсом в объекте должно быть упрощенным, быстрым. Пользователю не нужно тратить энергию на управление самим контейнером пользовательского интерфейса объекта.
Всегда учитывайте , как и когда контейнер пользовательского интерфейса в объекте будет закрыт или закрыт. Рекомендуется, чтобы любое действие, завершающее диалоговое окно между главным и подробным содержимым, также должно закрыть контейнер пользовательского интерфейса в объекте при вызове этого действия.
Навигация: некоторые контейнеры пользовательского интерфейса в объекте включают ссылки, которые принимают пользователя в другое окно или приложение, например открытие статьи MSDN в веб-браузере пользователя.
Всегда передайте любую ссылку навигации с помощью "Открыть", чтобы пользователи не были удивлены переходом к другому содержимому.
Всегда отделяйте ссылки навигации от интерактивных ссылок.
Индикаторы окружающей среды (необязательно)
Внешние индикаторы могут быть тонкими, включая текст, представленный в контрастном цвете от остальной части кода, или очевидный, включая щекотливые символы, такие как подчеркивание волнистых знаков и значки смарт-тегов. Индикаторы окружающей среды сообщают о доступности дополнительных соответствующих сведений. В идеале они предоставляют полезную информацию, даже не требуя от пользователя взаимодействия с ними.
Всегда позиционировать внешний индикатор, чтобы он не отвлекает пользователя или не перегружать его. Если невозможно разместить индикатор окружающей среды таким образом, рассмотрите другое решение.
Всегда позиционировать индикатор окружающей среды как можно ближе к содержимому, к которому он связан.
Всегда старайтесь создать индикатор, который содержит сведения, которые он предоставляет. Рассмотрите возможность предоставления количества доступных элементов данных (например, "3 ссылки", а не просто "Ссылки") или думать о другом способе суммировать данные.
- В случаях, когда данные для индикатора не всегда вычисляются и отображаются, немедленно рассмотрите возможность предоставления прогрессивной обратной связи по мере вычисления значений. Например, рассмотрите возможность анимации изменений, отражающих обновления доступных данных, аналогично тому, как динамическая плитка электронной почты в Windows Телефон обновляется по мере увеличения числа непрочитанных сообщений электронной почты.
Никогда не добавляйте больше индикаторов, чем пользователь может разумно взять на себя для определенного фрагмента содержимого. Внешние индикаторы должны быть полезными, не требуя взаимодействия от пользователя. Индикаторы теряют свою атмосферу, если они требуют переполнения и других элементов управления для их представления.
Жесты
Ключевым аспектом того, как пользователь может сосредоточиться на главном содержимом, заключается в поддержке правильных жестов, чтобы открыть и закрыть дополнительное содержимое детали.
Всегда требует, чтобы пользователь выполнял некоторые явные жесты, чтобы открыть дополнительное содержимое. Распространенные открытые жесты включают:
Наведите указатель мыши: подсказки или неинтерактивное информационное содержимое
Явная команда: встроенный выступающий
Дважды щелкните индикатор окружающей среды: всплывающее окно CodeLens
Всегда закрывать содержимое сведений всякий раз, когда пользователь нажимает клавишу ESC.
Всегда учитывайте контекст пользовательского интерфейса в объекте. Для выступающих содержимого, которые позволяют взаимодействовать в контейнере, тщательно рассмотрите возможность отображения дополнительных сведений о наведении указателя мыши, что, скорее всего, будет нарушено для рабочего процесса пользователя.
Никогда не отображайте содержимое при наведении указателя мыши, который, как представляется, редактируется или приглашает взаимодействие с пользователем. Это поведение может разочаровать пользователей, если они пытаются переместить курсор над содержимым сведений, так как стандартное поведение подсказки немедленно закрывается, когда курсор больше не будет над главным содержимым, созданным им.
Модели выбора
Модель выбора — это механизм, используемый для указания и подтверждения операций с одним или несколькими объектами, интересующими вас в пользовательском интерфейсе. В этом разделе рассматриваются шаблоны взаимодействия с выбором в редакторах документов Visual Studio: текстовые редакторы, поверхности конструктора и поверхности моделирования.
Пользователи должны иметь способ указания Visual Studio, над которыми они работают, и Visual Studio должен реагировать прогнозируемо с помощью отзывов пользователей о том, что он работает. Различия или несоответствие между пользователем и пользовательским интерфейсом могут привести к тому, что пользователь не замечает действие, которое может иметь непредвиденные последствия. Часто ошибка остается незамеченной, пока пользователь не увидит, что что-то отсутствует или изменилось. Поэтому модели выбора являются одним из наиболее важных элементов дизайна пользовательского интерфейса. Хотя модели выбора в Visual Studio согласованы с Windows, существуют небольшие варианты.
В Visual Studio, как и в Windows, модели выбора различаются в зависимости от контекста, в котором происходит взаимодействие. Выбор может выполняться в четырех типах объектов:
Text
Графические объекты
Списки и деревья
Сетки
В этих объектах есть три типа выделения:
Смежных
Непересекающиеся
Регион
Область
Наиболее важным компонентом выбора является обеспечение того, что пользователь знает, в каком окне они работают (активация) и где находится фокус (выбор). Visual Studio расширяет функциональные возможности управления окнами в Windows, но схема активации одинакова: взаимодействие с окном приводит фокус к окну. Visual Studio имеет два индикатора активации: один для окон документов и один для окон инструментов.
Для окон документов активное окно отображается вкладкой окна документа, поступающей на передний план и изменяя его цвет фона:
Выбор активной вкладки
Для окон инструментов активное окно обозначается изменением цвета области заголовка панели инструментов:
Окно активного инструмента, показывающее основной выбор узла
Неактивное окно средства, показывающее скрытый выбор узла
После активного окна фокус будет указан в соответствии с моделями выбора, описанными в этом разделе рекомендаций.
Контекст
Visual Studio была разработана для сохранения строгой концепции контекста, отслеживания того, где работает пользователь. Только одно окно активно, является ли оно инструментом или окном документа. Однако самое верхнее окно документа всегда сохраняет скрытый выбор. Хотя фокус может находиться в окне инструментов, окно документа, которое было последней активной, отображает выделение, даже в неактивном состоянии. Это делается для сохранения контекста пользователя в документе, который они редактировали, показывая им, что Visual Studio сохранило свое состояние, чтобы они могли легко возвращать и перемещаться между окнами инструментов и окнами документов.
Выделение текста
Редакторы Visual Studio, которые являются строго текстовыми, например встроенным текстовым редактором, используют ту же модель выделения текста и внешний вид, который описан на странице "Мышь и указатели " руководства по взаимодействию с пользователем Windows в MSDN. Фокус ввода в текстовом редакторе обозначается вертикальной полосой, называемой точкой вставки. Точка вставки — это один пиксель толстый и цветной, как обратное от того, что появляется за ним. Он мигает в соответствии со скоростью, заданной параметром скорости мигания курсора на вкладке "Скорость" яблока клавиатуры в панель управления.
Непрерывный и несвязанный выбор
Выделение в текстовом редакторе является непрерывным только. Несвязанные фрагменты текста не разрешены, но их следует устранить в редакторах графических объектов. Когда указатель мыши пользователя находится над текстовой областью, курсор изменяется на I-луч. Один щелчок помещает точку вставки в текстовый редактор в расположении щелчка. Удерживая кнопку мыши вниз, запускает выделение выделения и освобождает кнопку мыши заканчивает выделение выделения.
Выбор региона (выбор поля)
Visual Studio поддерживает выделения регионов в текстовом редакторе, и это называется выделением поля. Выделение поля позволяет пользователю выбрать область текста, которая не соответствует обычному текстовому потоку. Как и в случае с стандартным выделением текста, выделение должно быть смежным. Выбор поля инициируется путем удержания клавиши ALT при перетаскивании мыши. Выбор поля также можно инициировать, удерживая клавиши ALT и SHIFT, используя клавиши со стрелками, чтобы указать область выделения. Выбор поля использует обычное выделение выделения и показывает курсор вставки, мигающий в конце области выделения.
Выбор региона (поля) в Visual Studio
Внешний вид выделения текста
Цвета, используемые для активного и неактивного выбора в редакторе, можно настроить. Чтобы настроить внешний вид редактора, пользователь может перейти к параметрам инструментов>, а затем просмотреть в разделе "Шрифты > среды>" и "Текстовый редактор цветов".
Графический выбор
Взаимодействие
Выбор графического объекта может быть сложным и зависит от ряда факторов:
Основная модель выбора редактора. Редакторы, содержащие графические объекты, также можно использовать для редактирования текста или сетки. Например, редактор может быть текстовым редактором, который также поддерживает размещение графических объектов, таких как конструктор XAML Visual Studio. Поддержка нескольких типов объектов может повлиять на то, как пользователь выбирает группы, состоящие из различных типов объектов.
Поддержка основных и вторичных состояний выбора. Редактор может предоставлять состояния первичного и дополнительного выбора, чтобы объекты могли быть изменены в унисоне, выровнены друг с другом, изменены вместе и т. д.
Поддержка редактирования на месте. Редакторы также могут разрешить редактирование содержимого графических объектов. Например, прямоугольник может также содержать текст внутри, который может быть изменен пользователем. Кроме того, этот текст может быть центрирован или оправдан. Редактирование на месте включает более подробный уровень взаимодействия с пользователем и поэтому требует соответствующего набора визуальных подсказок для представления сведений о состоянии пользователю.
Взаимодействие с помощью мыши
| Входные данные | Результат |
|---|---|
| Щелкните неизбранный объект | Выбирает объект и отображает дефисированные линии и дескриптор выделения, если объект изменяется. |
| Щелкните выбранный объект | Активирует редактирование на месте, если объект поддерживает его. Щелчок за пределами объекта деактивирует режим редактирования на месте. |
| Дважды щелкните объект | Открывает код, который стоит за объектом для редактирования, и может вставить обработчик событий по умолчанию при необходимости. |
| Указатель на объект | Изменяет указатель на курсор перемещения. Внешний вид объекта, например его светимость или цвет, может измениться. |
| Указатель на дескриптор выделения | Изменяет указатель на курсор изменения размера. Для объектов, поддерживающих поворот, некоторые маркеры выделения могут изменить указатель на курсор поворота, так как указатель расположен по-разному (например, перемещается дальше) относительно дескриптора выбора. |
| Перетаскивание | Даже если объект не выбран ранее, изменит указатель на курсор перемещения и перемещает объект. |
| Редактор теряет фокус | Деактивирует режим редактирования на месте, хотя объект сохраняет содержимое и внешний вид, который он имел во время последней операции или выделения. |
| Выбор объекта | Указывает границу, пунктирную линию или другую визуальную обработку, чтобы выделить границу объекта. |
| Изменение размера выбранного объекта | Обозначается дескрипторами выделения. Объект с изменением размера имеет восемь дескрипторов, представляющих каждое направление, в котором его можно изменить. Меньше дескрипторов может использоваться, если объект может изменяться только в определенных направлениях. Если пользователь размер объекта вниз до того, где восемь дескрипторов не будут интерактивными, можно использовать четыре дескриптора. Размеры дескрипторов должны быть привязаны к границе окна и пограничным метрикам с помощью функции API GetSystemMetrics для размера в пропорции к разрешению дисплея.  |
| Поворот выбранного объекта |  |
Взаимодействие с клавиатурой
| Входные данные | Результат |
|---|---|
| Вкладка | Перемещает индикатор фокуса между логическим порядком объектов в редакторе. Это может быть слева направо или сверху вниз в зависимости от значения свойства TabIndex (или эквивалентного), порядка создания объекта и общей цели редактора. Shift+TAB изменяет направление индикатора фокуса. |
| ПРОБЕЛ | Активирует режим сдвига при сохранении нажатия клавиш. Для сдвига положения окна просмотра требуется дополнительное ввод мыши. |
| CTRL+ПРОБЕЛ | Активирует режим масштабирования при сохранении нажатия клавиш. Для увеличения и уменьшения коэффициента масштабирования требуется дополнительное ввод мыши. |
| Ctrl+ALT+Минус Знак | Уменьшает коэффициент масштабирования на один уровень. |
| Ctrl+Alt+Plus Sign | Увеличивает коэффициент масштабирования на один уровень. |
| SHIFT ИЛИ CTRL | Добавляет объект в группу выбора. Ctrl также позволяет удалять объекты по отдельности из группы выбора. |
| Введите | Выполняет команду по умолчанию для объекта (обычно открытие или изменение). |
| F2 | Активирует редактирование на месте для объекта. |
| Клавиши со стрелками | Перемещает выбранные объекты в направлении нажатия клавиши со стрелкой в небольших добавках (например, 1 пикселя за раз) |
| Клавиши CTRL+СТРЕЛКА | Перемещает выбранные объекты в направлении нажатия клавиши со стрелкой в большем размере (например, 10 пикселей за раз) |
| Клавиши SHIFT+СТРЕЛКА | Изменяет размер выбранных объектов в соответствующем направлении в небольших добавках (например, 1 пикселя за раз) |
| Клавиши CTRL+SHIFT+СТРЕЛКА | Изменяет размер выбранных объектов в соответствующем направлении в большем размере (например, 10 пикселей за раз) |
При изменении элементов управления пользователями может потребоваться автоматически изменить размер объектов с помощью входных данных пользователя. Например, если пользователь редактирует элемент управления метками, то метка должна расти, чтобы отобразить текст, который пользователь только что ввел. Если это не сделано, пользователь должен изменить размер элемента управления вручную после редактирования текста. Если у пользователя много элементов управления, это становится гнилой и непродуктивной задачей.
Графические контейнеры
В некоторых случаях графические редакторы предоставляют контейнеры для других графических объектов, таких как элемент управления "Панель Windows Forms" или элемент управления "Макет сетки" в конструкторе HTML. Если редактор предоставляет контейнеры для других графических объектов, то для контейнера следует использовать только следующую модель выбора (объекты в контейнере соответствуют стандартной модели, как описано выше):
| Входные данные | Результат |
|---|---|
| Один щелкните контейнер одним щелчком мыши | Выбирает объект контейнера без прямого выбора любого из содержащихся объектов. Контейнер может быть перемещен и (или) изменен с помощью стандартного ввода мыши и клавиатуры (как описано выше). Содержащиеся объекты перемещаются по отношению к контейнеру, но содержащиеся объекты не изменяются, если они также не выбраны напрямую. |
| Наведите указатель мыши на область границ контейнера | Преобразует мышь в курсор перемещения, указывая, что контейнер можно переместить. |
| Перетащите область границ контейнера | Изменяет указатель мыши на курсор перемещения и перемещает контейнер (и содержащиеся в нем объекты). Контейнер не может быть перемещен без первого выбора с помощью одного щелчка мыши. |
| Один щелчок объекта в контейнере | Отменяет выбор контейнера (если выбрано) и выбирает только выбранный объект. |
| Shift+click OR CTRL+click on a contained object and/or container | Добавляет выбранный объект в существующую группу выбора или выбора. Если щелкнуемый объект уже является членом группы выбора, он удаляется из группы выбора. |
Содержащиеся объекты должны соответствовать базовой модели выбора, как описано в предыдущем разделе. При тестировании удобства использования конструктора Windows Forms пользователи ожидали простой доступ к содержащимся объектам без перемешивающих действий (налагаемых объектом вложения).
Разрознение и выделение регионов
Редакторы графических объектов должны поддерживать несвязанные выделения. Обратите внимание, что этот рисунок не отображает внешний вид элемента управления для Visual Studio. Просмотр внешнего вида графического объекта для подробных визуальных спецификаций.
Разрознение выделения
Графические редакторы также должны предоставлять выделенные области индикатором выбора типа в формате marquee. Если графический редактор поддерживает другие типы объектов (например, текст), выбор регионов может оказаться невозможным в зависимости от ограничений других типов объектов.
Выбор марке
Основные и вторичные выборы
Некоторые редакторы графических объектов позволяют пользователю изменять или выравнивать объекты в группах. В этом случае необходимо ввести концепцию основных и вторичных выборов. Основной выбор — это объект, на который отвечают все остальные объекты для групповых операций. Объект, выбранный пользователем, сначала становится основным элементом управления, а последующие выделения становятся дополнительными выборами. Основной выбор имеет отдельную визуальную обработку из вторичных выборов, чтобы указать, какой объект является основным:
Основной выбор с двумя дополнительными выборами
Внешний вид выделения графического объекта
Маркеры выделения представляют собой квадраты, рисуемые в прямоугольном шаблоне вокруг ограничивающего прямоугольника объекта. На приведенной ниже диаграмме показаны примеры различных состояний, которые графический объект может иметь с помощью дескриптора, изменения размера и внешнего вида редактирования на месте. Размер дескрипторов должен быть привязан к границе окна и пограничным метрикам с помощью API GetSystemMetrics .
| State | Внешний вид | Визуальные сведения |
|---|---|---|
| Невыбранных | По умолчанию |  |
| Основной выбор | Изменение размера |  |
| Основной выбор | Не изменяемый размер |  |
| Основной выбор | Заблокировано |  |
| Дополнительный выбор | Изменение размера |  |
| Дополнительный выбор | Не изменяемый размер |  |
| Дополнительный выбор | Заблокировано |  |
| Активный пользовательский интерфейс | По умолчанию |  |
Просмотр моделей выбора
Представление в виде дерева
Выбор в представлении дерева отображается с простым выделением. Если пользователь щелкает имя узла или значок узла, он будет выбран. Треугольные глифы слева от узла разворачиваются или контрактировать элемент управления "Дерево", но не влияют на выбор пользователя, за исключением одного исключения: при сворачивании родительского узла при выборе на дочерний узел этого узла выделение перемещается на родительский элемент.
Типичное представление дерева в Visual Studio
Представления дерева могут поддерживать непрерывные и несвязанные выборки, даже на нескольких уровнях в дереве. На видимых узлах дерева необходимо сделать несколько фрагментов. Если узел свернут, то разрознированный выбор теряется, а узел, который был свернут, получает выделение. Таким образом, пользователь может видеть узлы, которые будут затронуты операцией. Когда узлы свернуты, становится неясно, какие узлы могут быть затронуты.
При выборе родительского узла операция должна применяться к родительскому элементу, хотя в некоторых случаях имеет смысл применить операцию к родителю и всем его дочерним элементам. В этом случае укажите дополнительный пользовательский интерфейс во время операции, например поле проверка или диалоговое окно подтверждения, чтобы сделать параметр "применить ко всем дочерним элементам" явным образом для пользователя.
Переименование
Если узлы в дереве поддерживают переименование, необходимо выполнить переименование. Операция на месте должна быть стандартной для всех элементов управления деревом в Visual Studio. Предоставьте команду переименования, которая немедленно активирует режим редактирования на месте с выделением текста, охватывающим все имя узла, готовое к принятию входных данных пользователем. Если узел представляет файл, имя файла должно содержать расширение. Выделение выделения должно содержать только текст имени файла, а не расширение.
| Входные данные | Результат |
|---|---|
| Клавиша ВВОД | Фиксация операции переименования |
| Клавиша ESC | Отменяет операцию переименования |
| Выбор за пределами области редактирования на месте | Фиксация операции переименования |
| Отмена | Предоставление простой отмены для отмены операции переименования |
Выбор в списках и элементах управления сеткой
Ключевой принцип выбора списка заключается в том, что он основан на строках, то есть при выборе всей строки выбирается как единица. В отличие от этого, сетки позволяют выбирать определенные ячейки, не затрагивая другие аспекты строки. Сетки также могут содержать иерархию вложенных строк (например, в TreeGrid), которая позволяет выбрать и отменить выбор всей ветви иерархии путем взаимодействия с родительскими строками. Выделение в списках отображается простым цветом выделения во всей строке данных. Фокус отображается одно пиксельной точкой границы вокруг текущей редактируемой строки или ячейки (строка, если все ячейки доступны только для чтения).
Примечание.
Фокус и выбор являются разными понятиями. Фокус — это указание того, какой элемент пользовательского интерфейса предназначен для получения входных данных, не направленных явно на другой объект, а выбор относится к состоянию включения объекта в набор объектов, на которые могут выполняться последующие операции.
Выбор в списках может быть смежным, несвязанным или регионом. Если разрешено несколько выборов, следует всегда поддерживать непрерывный и несвязанный выбор, а поддержка выбора региона (поля) необязательна. Выбор регионов инициируется путем перетаскивания пробела текста списка.
| Object | Выбор |
|---|---|
| List | Смежных |
| List | Непересекающиеся |
| List | Регион |
Щелкнув один раз в списке, выберите строку, в которой произошло нажатие. Если пользователь щелкает ячейку списка, которая поддерживает редактирование на месте, она также немедленно активируется для редактирования на месте. В противном случае вся строка немедленно выбрана и отображается выделение.
Перетаскивание в текст списка выполняет одно из трех действий:
Инициирует выбор региона, если список поддерживает его, а указатель мыши находится в пробеле
Инициирует операцию перетаскивания, если ячейка списка или строка поддерживает быть источником перетаскивания
Выбирает текущую строку
Редактирование на месте
Если допускается редактирование на месте, существует две основные модели: простой элемент управления редактирования и средство выбора свойств. При простом элементе управления редактированием содержимое выделено и готово к вводу пользователем сразу после активации редактирования на месте. При реализации средства выбора свойств кнопка, вызывающая средство выбора свойств, отображается после активации режима редактирования на месте, и текущий выбор не выделен. Кнопка выбора должна быть оправдана правой кнопкой в ячейке. Примеры редактирования на месте см. в разделе "Окно свойств" и "Список задач" в Visual Studio.
Поддержка клавиатуры
Поддержка выбора клавиатуры в списках и сетках соответствует стандартным соглашениям Windows:
Клавиши со стрелками перемещаются по списку, выбирая каждую строку или ячейку при перемещении фокуса.
Shift + стрелка выполняет непрерывный выбор в направлении клавиш со стрелками.
Ctrl +стрелка, за которой следует пробел, переключается между добавлением и удалением элементов списка из выделенного фрагмента, создавая фрагмент.
Для сетки, содержащей вложенные иерархии, клавиша СТРЕЛКА ВПРАВО расширяет родительскую строку, а клавиша СТРЕЛКА ВЛЕВО свернута.
Клавиша TAB перемещает фокус между ячейками в текущей строке, если ячейки редактируются.
Ключ ВВОД выполняет команду по умолчанию для элемента в списке (часто открывается).
Клавиша F2 активирует редактирование на месте для выбранной ячейки.
Сохраняемость и сохранение параметров
Хотя каждый компонент программного обеспечения в Visual Studio обычно отвечает за собственное состояние и сохраняемость, Visual Studio автоматически сохраняет параметры в некоторых случаях, например с размерами окна и позициями. В приведенной ниже таблице приведено сочетание параметров, сохраненных автоматически и параметров, для которых требуется выполнить явное действие пользователя или запрограммированного действия.
| Object | Что сохранить | Когда нужно сохранить | Место сохранения |
|---|---|---|---|
| Доступный для выбора объект (например, строка кода) | Точка останова в строке кода Ярлык пользователя, связанный со строкой кода |
При сохранении проекта | Файл параметров пользователя (SUO) для проекта |
| Диалоговое окно | Расположение диалогового окна, если оно было перемещено Представление, которое пользователь последний раз использовал в диалоговом окне |
Когда диалоговое окно закрывается После окончания сеанса Visual Studio |
В памяти Реестр в HKEY_Current_User |
| Окно | Размер и расположение окна | Когда окно закрывается При изменении режима Visual Studio После окончания сеанса Visual Studio |
Файл параметров пользователя (SUO) для проекта Файл настраиваемых параметров для параметров окна |
| Документ | Текущий выбор в документе Представление документа Последние несколько мест, которые посетил пользователь |
При сохранении документа | Файл параметров пользователя (SUO) для проекта |
| Project | Ссылки на файлы Ссылки на каталоги на диске Ссылки на другое программное обеспечение Компоненты Сведения о состоянии самого проекта |
При сохранении проекта | Файл проекта |
| Решение | Ссылки на проекты Ссылки на файлы |
При сохранении проекта или решения | Файл решения (SLN) |
| Параметры в Параметры инструментов > | Настройки клавиатуры Настройки панели инструментов Цветовые схемы |
При закрытии диалогового окна "Параметры инструментов>" После окончания сеанса Visual Studio |
Реестр в HKEY_Current_User |
То, что делает пользователь, и когда он делает это, определяет, сохраняется ли параметр в памяти (во время сеанса), сохраняется на диск (в сеансах в качестве параметра реестра), как часть самого файла проекта или решения, как часть файла параметров решения (SUO) или в качестве файла пользовательских параметров, о которых знает только этот компонент программного обеспечения. В приведенной выше таблице показано несколько событий, при которых можно сохранить параметры. Однако в других случаях может потребоваться сохранить состояние:
Когда пользователь изменяет расположение в диалоговом окне или окне
Когда пользователь передает фокус в другое окно
Когда пользователь переключается с конструктора на режим отладки
При выходе пользователя из учетной записи
Когда компьютер переходит в режим гибернации или завершает работу
Когда компьютер или жесткий диск будет переформатирован и снова настроен
Конфигурации окон
Конфигурация окна — это базовая презентация среды разработки . Это схема, состоящая из списка окон инструментов, присутствующих и способ их упорядочения. Для окон под управлением интегрированной среды разработки (IDE) сведения о макете сохраняются на пользователя, поэтому при запуске интегрированной среды разработки макет окна отображается так же, как при последнем выходе из Visual Studio. Состояние и положение окон интегрированной среды разработки сохраняется в файле настраиваемых параметров в формате XML. Окна инструментов, созданные пакетами, загруженными в интегрированную среду разработки, сохраняют сведения о состоянии в реестре и могут или не могут быть на пользователя.
Макеты для конкретных профилей
Каждый профиль включает макеты окон инструментов, упорядоченные по определенному пользователю разработчика (разработчики Visual C++ ожидают видеть Обозреватель решений слева от интегрированной среды разработки, а разработчики C# ожидают видеть Обозреватель решений справа). Макеты окна для конкретного профиля загружаются после того, как пользователь выбирает профиль при запуске. Автор пакета должен определить макет окна, наиболее подходящий для взаимодействия с клиентом, зная, что изменения, внесенные пользователем в конфигурацию окна, будут сохранены.
Сенсорный ввод
Пользователи все чаще используют продукты разработки Майкрософт на сенсорных устройствах. Однако существуют барьеры, которые затрудняют использование средств разработки на сенсорных устройствах. Пользователи ожидают, что наши продукты обеспечивают надежный и точный сенсорный интерфейс. Цель этих рекомендаций заключается в том, чтобы информировать решения о возможностях сенсорного ввода для включения и поощрения согласованного сенсорного взаимодействия в Visual Studio и связанных продуктах.
Уровни опыта
Следующие уровни опыта предназначены для того, чтобы помочь командам решить, какие возможности касания предложить на основе их требуемого уровня инвестиций в касание.
Базовый опыт заключается в командах, которые хотят предоставить возможности касания, поэтому на протяжении всей своей работы нет тупиков.
Оптимизированный интерфейс предназначен для команд, которые хотят предоставить наиболее распространенные возможности сенсорного ввода (например, те, которые обычно доступны в приложениях браузера Интернета).
Повышенные привилегии — это для команд, которые хотят добавить такие возможности, как жесты или другие необязательные возможности, которые могут сделать свое приложение сенсорным.
| Базовый интерфейс | Оптимизированный интерфейс | Повышенный интерфейс | |
|---|---|---|---|
| Позволяет пользователям ... | Исправление кода и чтения на уровне проекта без взаимоблокировок | Выполнение задач обслуживания, рефакторов и навигации | Работа в согласованном, интуитивно понятном и гибком опыте с уверенностью |
| Редактор | Касание сдвига и выделение Касание полосы прокрутки для перехода и нажатия клавиши +перетаскивания |
Увеличение сцепление Быстрая прокрутка Выбор Простое использование контекстного меню |
|
| Верхние окна инструментов | Сдвиг списка Выбор элементов Касание полосы прокрутки для перехода и нажатия клавиши +перетаскивания |
Простое прокрутка и выделение элементов | |
| Оконной | Изменить размер окна Быстрый доступ |
||
| Документ хорошо | Простая навигация между открытыми файлами | ||
| Жесты | Обеспечение работы распространенных жестов в интегрированной среде разработки | Действия на основе жестов Поддержка перетаскивания и конструкторов |
|
| Дополнительные рекомендации | Пользовательская экранная клавиатура |
Жесты
Жесты предоставляют пользователям ярлык для команд, которые могут потребовать более сложного взаимодействия. Ознакомьтесь с рекомендациями Windows по общим жестам касания для классических приложений и следуйте этим рекомендациям, включая простые жесты, такие как сдвиг и масштабирование.