Составные шаблоны для Visual Studio

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

Визуализация данных

Обзор

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

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

  • Будет ли диаграмма помогать пользователям определить задачи, с которыми они могут работать?

  • Будет ли диаграмма позволить пользователям прогнозировать последствия возможных изменений?

  • Будет ли диаграмма помогать пользователям находить тенденции и определять закономерности?

  • Будет ли диаграмма позволить пользователям принимать более взвешенные решения?

  • Будет ли диаграмма отвечать на конкретный вопрос, который пользователи могут иметь в заданном контексте?

Общие правила для диаграмм

  • Четкое обозначение данных. Иллюстрации без объяснения — это просто изображения.

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

  • Создание диаграмм, а не Инфографика. Инфографика — это художественные представления данных, и их основная цель — Visual создание сюжетов. Диаграммы могут (и должны) быть визуально привлекательными, но позволить этим данным говорить самому себе.

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

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

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

  • Не используйте диаграмму (или любую иллюстрацию) в качестве единственного способа понимания концепции или взаимодействия с данными. Это представляет трудности для пользователей с нарушениями визуального элемента.

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

Типы диаграмм

типы диаграмм, используемые в Visual Studio, включают линейчатые диаграммы, графики, измененную круговую диаграмму, известную как кольцевые диаграммы или «кольцевые диаграммы», шкалы времени, точечные диаграммы (также называемые «кластерными диаграммами») и диаграммы ганта. Каждый тип диаграммы полезен для обмена данными другого типа.

Другие вопросы, касающиеся диаграмм

Color

Существует определенная палитра цветов диаграммы, которая используется в Visual Studio. Палитра доступна для основных типов скрытости цветов, и цвета можно отличать даже при использовании в качестве очень узких срезов цвета. Эти цвета можно использовать в любом сочетании для любого типа диаграммы или графа в пользовательском интерфейсе. Не нужно использовать все семь цветов, если это не требуется для множества различных цветов. Эти цвета не предназначены для использования с элементами переднего плана, поэтому не следует размещать текст или глифы поверх этих цветов. Эти тона должны быть жестко запрограммированы и доступны для настройки пользователей в разделе средства > параметры (см. раздел предоставление цветов для конечных пользователей).

Образец Hex RGB
Палитра 71B252 #71B252 113178, 82
Палитра BF3F00 #BF3F00 191, 63, 0
Палитра FCB714 #FCB714 252183, 20
Палитра 903F8B #903F8B 144, 63139
Палитра 117AD1 #117AD1 17 122 209
Палитра 79D7F2 #79D7F2 121 215 242
Палитра B5B5B5 #B5B5B5 181 181 181

Пользовательский интерфейс для объекта и просмотр

В этом разделе представлен контекст для просмотра, также называемый представлением "Просмотр кода", типа пользовательского интерфейса объекта, уникального для Visual Studio.

Обзор

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

  • основной шаблон для пользовательского интерфейса объекта в Visual Studio называется «сведения на момент внимания».

  • пользовательский интерфейс объекта в Visual Studio является встроенным или плавающим, а также устойчивым или временным.

    • представление "просмотр кода", тип пользовательского интерфейса объекта в Visual Studio, является встроенным и устойчивым.

    • CodeLens, тип пользовательского интерфейса объекта в Visual Studio, является плавающим и временным

    Понимание того, как работает фрагмент кода, или Поиск сведений об этом коде, часто требуется разработчику для переключения контекста и перехода к другому содержимому или другому окну. Эти сдвиги контекста могут быть нарушены, так как пользователи могут потерять фокус на первоначальной задаче, если они оставляют свое главное окно. Более того, вернуть исходный контекст может оказаться сложной задачей, особенно в том случае, если переключение Windows привело к скрытию исходного кода другим ИНТЕРФЕЙСом.

    Пользовательский интерфейс объекта следует шаблону с именем «информация на момент внимания». Эти сообщения, всплывающие окна и диалоговые окна предоставляют пользователям дополнительные, релевантные сведения, которые добавляют пояснения или интерактивность без потери фокуса на главной задаче. Примеры пользовательского интерфейса для объектов включают всплывающие окна, которые появляются, когда пользователь наводит указатель мыши на значок в области уведомлений, красной волнистой линией в слове с ошибками и представление просмотра, представленное в Visual Studio 2013.

Точки принятия решений

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

Связи между главным и подробным содержимым

Информация в точке внимания используется для отображения связи между содержимым, на которое пользователь специализируется ("основное" содержимое), и дополнительным содержимым ("подробное" содержимое). В этом шаблоне подробное содержимое четко связано с содержимым, с которым работает пользователь, и может быть отображено ближе к главному содержимому. Дополнительные сведения или сведения, которые не могут быть обобщены без переполнения главного содержимого, должны соответствовать другому шаблону, например окну инструментов.

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

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

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

Сведения о проектировании

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

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

  2. Тип содержимого: будет ли содержимое информационным, практичным или навигационным? Требуются ли пользователю дополнительные сведения о главном содержимом? Необходимо ли пользователю выполнить задачу, влияющую на основное содержимое? Или пользователь должен перенаправляться к другому ресурсу?

  3. Тип индикатора: имеет ли смысл внешний индикатор? Могут ли сведения быть кратко обобщены и отображаться без перегрузки главного содержимого?

  4. Жесты: какие жесты будут использоваться для вызова и закрытия пользовательского интерфейса? Как пользователь будет получать подробное содержимое и отсылать его? Можно ли добавить жест, например закрепление для переключения между временными и устойчивыми состояниями?

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

Компоненты пользовательского интерфейса для объектов

  1. Тип контейнера (представление содержимого)

    • Числа с плавающей запятой

    • Встроенный

  2. Тип содержимого

    • Информация: данные, которые могут быть статическими или динамическими

    • Действие — команды, которые изменяют основное содержимое

    • Навигационные: ссылки, которые переводят пользователя в другое окно или приложение, например MSDN

  3. Жесты

    • Вызов

    • Увольнении

    • Закрепление

    • Другие взаимодействия

  4. Модель сохраняемости и фиксации

    • Временный

    • durable

    • Автоматически

    • По запросу

  5. Внешние индикаторы (необязательно)

    • Подчеркнутая волнистой линией

    • Значок смарт-тега

    • Другие внешние индикаторы

Тип контейнера (представление содержимого)

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

  1. встроенный. встроенный выступающий, такой как представление просмотра, которое было представлено в Visual Studio 2013 редакторе кода, открывает пространство для нового содержимого путем сдвига существующего содержимого.

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

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

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

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

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

Тип содержимого

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

  1. Информация. в большинстве контейнеров пользовательского интерфейса для объектов отображается некоторое Информационное содержимое. Содержимое может представлять сведения о состоянии среды или сведения о потенциальном будущем состоянии среды. Например, он может использоваться для отображения воздействия определенной команды, например рефакторинга, на существующий код.

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

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

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

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

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

    • При необходимости всегда включайте и отключайте действия.

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

    • Всегда старайтесь, чтобы количество действий, предоставляемых в КОНТЕЙНЕРЕ пользовательского интерфейса объекта, было равно абсолютному минимуму. Взаимодействие с пользовательским интерфейсом в объекте должно быть простым и быстрым интерфейсом. Пользователю не нужно тратить энергию на управление самим контейнером пользовательского интерфейса.

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

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

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

    • Всегда разделяйте навигационные ссылки от взаимозависимых ссылок.

Внешние индикаторы (необязательно)

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

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

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

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

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

Жесты

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

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

    • Наведение: всплывающие подсказки или неинтерактивное Информационное содержимое

    • Явная команда: встроенный выступающий

    • Дважды щелкните индикатор окружающей среды. Всплывающее окно CodeLens

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

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

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

Модели выбора

Обзор

Модель выбора — это механизм, используемый для указания и подтверждения операций с одним или несколькими объектами, представляющими интерес в пользовательском интерфейсе. в этом разделе обсуждаются шаблоны взаимодействия выбора в Visual Studio редакторах документов: текстовые редакторы, поверхности проектирования и поверхности моделирования.

пользователи должны иметь способ обозначить Visual Studio, над чем они работают, и Visual Studio отвечать на предсказуемость с отзывом о том, что он работает. Различия или неправильное взаимодействие между пользователем и пользовательским интерфейсом могут привести к тому, что пользователь не сможет пропустить действие, что может привести к непредвиденным последствиям. Часто ошибка не отображается, пока пользователь не увидит, что что-то отсутствует или изменилось. Поэтому модели выбора являются одним из наиболее важных элементов проектирования пользовательского интерфейса. хотя модели выбора в Visual Studio соответствуют Windows, существуют небольшие вариации.

в Visual Studio, как и в Windows, модели выбора различаются в зависимости от контекста, в котором происходит взаимодействие. Выделение может происходить в четырех типах объектов:

  • Текст

  • Графические объекты

  • Списки и деревья

  • Сетки

    В этих объектах существует три типа выбора:

  • Области

  • Несвязанным

  • Регион

Область

Наиболее важный компонент выбора гарантирует, что пользователь знает, в каком окне он работает (активация) и где находится фокус (выбор). Visual Studio расширяет функциональные возможности управления окнами в Windows, но схема активации одинакова: взаимодействие с окном переводит фокус на окно. Visual Studio имеет два индикатора для активации: один для окон документов и один для окон инструментов.

Для окон документов активное окно отображается на вкладке окна документа, которая перемещается на передний план, и изменяется цвет фона:

Выбор активной вкладки в Visual Studio

Выбор активной вкладки

Для окон инструментов активное окно обозначается изменением цвета в области заголовка окна инструментов:

Выбор активного окна инструментов в Visual Studio

Активное окно инструментов, отображающее основной выбор узла

Выбор неактивного окна инструментов в Visual Studio

Неактивное окно инструментов, в котором отображается скрытое выделение узла

Когда окно активно, его фокус указывается в соответствии с моделями выбора, описанными в этом разделе руководств.

Контекст

Visual Studio была разработана для сохранения строгой концепции контекста, отслеживая место работы пользователя. Активно только одно окно, является ли оно средством или окном документа. Однако в самом верхнем окне документа всегда остается скрытое выделение. Хотя фокус может находиться в окне инструментов, окно документа, которое было в последний раз активно, отображает выделенный фрагмент даже в неактивном состоянии. это делается для сохранения контекста пользователя в документе, который он редактировал, отображая их, которые Visual Studio сохранили свое состояние, чтобы они могли легко возвращаться и перемещаться между окнами инструментов и окнами документов.

Выбор текста

Visual Studio редакторов, которые являются строго текстовыми, например встроенным текстовым редактором, используют ту же модель и внешний вид выбора текста, что и на странице « мышь и указатели » Windows рекомендации по взаимодействию с пользователем в MSDN. Фокус ввода в текстовом редакторе обозначается вертикальной чертой, которая называется точкой вставки. Точка вставки — это один пиксельно-толстый цвет, который является обратным по отношению к отображаемому за ним. Он мигает в соответствии с частотой, заданной параметром Частота мерцания курсора на вкладке скорость приложения Клавиатура на панели управления.

Непрерывное и несвязанное выделение

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

Выбор региона (Выбор рамки)

Visual Studio поддерживает выбор региона в текстовом редакторе, и это называется выбором поля. Выбор рамки позволяет пользователю выбрать область текста, которая не соответствует обычному текстовому потоку. Как и при стандартном выделении текста, выбор должен быть непрерывным. Выбор рамки инициируется путем нажатия клавиши ALT при перетаскивании мышью. Выбор полей также можно инициировать, удерживая нажатыми клавиши ALT и Shift, используя клавиши со стрелками для указания области выделения. Выбор рамки использует выделение обычного фрагмента и показывает, что курсор находится в конце области выделения.

Поле "региональные (") выбор в Visual Studio

Выбор региона (Box) в Visual Studio

Внешний вид выбора текста

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

Графический фрагмент

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

Выбор графических объектов может быть сложным и зависит от ряда факторов:

  • Основная модель выбора редактора. Редакторы, содержащие графические объекты, также могут использоваться для редактирования текста и сеток. например, редактор может быть текстовым редактором, который также поддерживает размещение графических объектов, таких как конструктор XAML Visual Studio. Поддержка нескольких типов объектов может повлиять на то, как пользователь выбирает группы, состоящие из различных типов объектов.

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

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

Взаимодействие с мышью

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

Объект с изменяемым размером имеет восемь дескрипторов, представляющих каждое направление, в котором можно изменить размер. Если размер объекта можно изменять только в определенных направлениях, можно использовать меньшее количество дескрипторов. Когда пользователь изменяет размер объекта до тех пор, пока восемь дескрипторов не будут интерактивными, можно использовать четыре дескриптора. Размеры обработки должны быть привязаны к метрикам окна и граничных показателей с помощью функции API жетсистемметрикс , чтобы масштабироваться пропорционально разрешению экрана.

Маркеры изменения размера
Поворот выбранного объекта Маркеры вращения

Взаимодействие с клавиатурой

Входные данные Результат
Вкладка Перемещает указатель фокуса между логическим порядком объектов в редакторе. Это может быть слева направо или сверху вниз в зависимости от значения свойства TabIndex (или эквивалентного), порядка создания объектов и общего назначения редактора. Shift + Tab меняет направление индикатора фокуса на противоположное.
Пробел Активирует режим панорамирования при поддержке нажатия клавиш. Для сдвига расположения окна просмотра требуются дополнительные вводы мыши.
Ctrl+ПРОБЕЛ Активирует режим масштабирования при поддержке нажатия клавиш. Для увеличения и уменьшения коэффициента масштабирования требуются дополнительные вводы мыши.
CTRL + ALT + знак "минус" Уменьшение коэффициента масштабирования на один уровень.
CTRL + ALT + знак «плюс» Увеличение коэффициента масштабирования на один уровень.
Shift или CTRL Добавляет объект в группу выбора. Клавиша CTRL также позволяет удалять объекты по отдельности из группы выбора.
ВВОД Выполняет команду по умолчанию для объекта (обычно это открытие или изменение).
F2 Активирует редактирование на месте для объекта.
Клавиши со стрелками Перемещает выбранные объекты в направлении нажатой клавиши со стрелкой в небольшом приращении (например, 1 пиксель за раз)
CTRL + клавиши со стрелками Перемещает выбранные объекты в направлении нажатой клавиши со стрелкой в более крупные приращения (например, 10 пикселей за раз)
Shift + клавиши со стрелками Изменяет размер выбранных объектов в соответствующем направлении (например, 1 пиксель за один раз).
Ctrl + Shift + клавиши со стрелками Изменяет размер выбранных объектов в соответствующем направлении в более крупные приращения (например, 10 пикселей за раз).

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

Графические контейнеры

в некоторых случаях графические редакторы предоставляют контейнеры для других графических объектов, таких как панель Windows Forms или элемент управления макета сетки в конструкторе HTML. Если редактор предоставляет контейнеры для других графических объектов, следует использовать следующую модель выбора только для контейнера (объекты в контейнере соответствуют стандартной модели, как описано выше):

Входные данные Результат
Однократный щелчок по контейнеру Выбирает объект контейнера без прямого выбора каких либо вложенных объектов. Контейнер может быть перемещен и (или) изменен с помощью стандартного ввода-вывода мыши и клавиатуры (как описано выше). Содержащиеся объекты перемещаются по отношению к контейнеру, но размеры содержащихся объектов не изменяются, если они также не выбраны напрямую.
Наведите указатель мыши на область границ контейнера Превращает указатель мыши в курсор перемещения, указывая, что контейнер может быть перемещен.
Перетащите область границ контейнера Изменяет указатель мыши на курсор перемещения и перемещает контейнер (и содержащиеся в него объекты в). Невозможно переместить контейнер без предварительного выбора одним щелчком.
Однократный щелчок по объекту в контейнере Отменяет выбор контейнера (если он выбран) и выбирает только щелчок объекта.
Shift + щелчок или Ctrl + щелчок на автономном объекте и (или) контейнере Добавляет объект, который щелкнули, в существующую выделенную область или группу выбора. Если объект, который щелкнули, уже является членом группы выбора, он удаляется из группы выбора.

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

Отсоединение и выделение областей

Графические редакторы объектов должны поддерживать несвязное выделение. Обратите внимание, что этот рисунок не показывает внешний вид элемента управления для Visual Studio. Подробное описание визуальных характеристик см. в разделе графическое представление выбора графических объектов .

Раздельные и областные селекторы

Несвязанное выделение

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

Область выделения

Область выделения

Основной и дополнительный параметры

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

Выбор основного и дополнительного выделенных объектов

Основной выбор с двумя вторичными элементами выбора

Внешний вид выбора графического объекта

Маркеры выделения — это квадраты, рисуемые в прямоугольном шаблоне вокруг ограничивающего прямоугольника объекта. На приведенной ниже диаграмме показаны примеры различных состояний, которые могут иметь графический объект с помощью маркера, размера и внешнего вида редактирования на месте. Размер дескрипторов должен быть привязан к метрикам границы окна и границе с помощью API жетсистемметрикс .

Состояние Внешний вид Сведения о визуальном элементе
Unselected По умолчанию Состояние кнопки по умолчанию
Основной выбор Изменяемым размером Основной выделенный объект с маркерами изменения размера
Основной выбор Без изменения размера Основной выделенный объект без маркеров изменения размера
Основной выбор Заблокировано Заблокированный основной выделенный объект
Вторичный выбор Изменяемым размером Дополнительный выделенный объект с маркерами изменения размера
Вторичный выбор Без изменения размера Дополнительный выделенный объект без маркеров изменения размера
Вторичный выбор Заблокировано Заблокированный дополнительный выделенный объект
Пользовательский интерфейс активен По умолчанию Активное состояние пользовательского интерфейса

Просмотр моделей выбора

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

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

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

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

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

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

Переименование

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

Входные данные Результат
ВВОД - клавиша Фиксирует операцию переименования
Клавиша ESC Отменяет операцию переименования
Щелчок вне области редактирования на месте Фиксирует операцию переименования
Отменить Предоставление простой отмены для отмены операции переименования

Выбор в списках и элементах управления "Сетка"

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

Примечание

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

Элементы списка могут быть непрерывными, несвязанными или регионами. Если разрешено несколько вариантов выбора, непрерывное и несвязанное выделение всегда должно поддерживаться, но поддержка выбора региона (Box) является необязательной. Выделение регионов инициируется перетаскиванием в пустом пространстве текста списка.

Объект Выбор
Список Области
Список Несвязанным
Список Регион

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

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

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

  • Инициирует операцию перетаскивания, если ячейка или строка списка поддерживает как источник перетаскивания

  • Выбирает текущую строку

Редактирование на месте

Если разрешено редактирование на месте, то существует две основные модели: простой элемент управления Edit и средство выбора свойств. При использовании простого элемента управления "поле ввода" содержимое выделяется и подготавливается к вводу данных пользователем, как только будет активировано редактирование на месте. Когда реализуется средство выбора свойств, кнопка, вызывающая средство выбора свойств, отображается после активации режима редактирования на месте, и текущий выделенный фрагмент не выделяется. Кнопка выбора должна быть выровнена по правому краю в ячейке. Примеры редактирования на месте см. в окне Свойства и список задач в Visual Studio.

Поддержка клавиатуры

поддержка клавиатуры для выбора в списках и сетках соответствует стандартным соглашениям Windows:

  • Клавиши со стрелками перейдите к списку, выбрав каждую строку или ячейку при перемещении фокуса.

  • Shift + стрелка выполняет смежное выделение в направлении клавиш со стрелками.

  • Нажатие клавиш CTRL + стрелка с последующим клавишей Пробел переключает между добавлением и удалением элементов списка в выделенном фрагменте и созданием несвязанного выделения.

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

  • Клавиша TAB перемещает фокус между ячейками в текущей строке, если ячейки доступны для редактирования.

  • Клавиша ВВОД выполняет команду по умолчанию для элемента в списке (часто открывается).

  • Клавиша F2 активирует редактирование на месте для текущей выбранной ячейки.

Параметры сохраняемости и сохранения

Обзор

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

Объект Что следует сохранить Когда следует сохранять Место сохранения
Выбираемый объект (например, строка кода) Точка останова в строке кода

Ярлык пользователя, связанный со строкой кода
При сохранении проекта Файл параметров пользователя (. suo) для проекта
Диалог Расположение диалогового окна, если оно было перемещено

Представление, которое пользователь последним использовал в диалоговом окне
При закрытии диалогового окна

когда завершается сеанс Visual Studio
В памяти

Реестр в HKEY_Current_User
Окно Размер и расположение окна При закрытии окна

при изменении режима Visual Studio

когда завершается сеанс Visual Studio
Файл параметров пользователя (. suo) для проекта

Файл настраиваемых параметров для параметров окна
Документ Текущий выбор в документе

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

Последние несколько мест, посещенных пользователем
При сохранении документа Файл параметров пользователя (. suo) для проекта
Проект Ссылки на файлы

Ссылки на каталоги на диске

Ссылки на другое программное обеспечение

Компоненты

Сведения о состоянии самого проекта
При сохранении проекта Файл проекта
Решение Ссылки на проекты

Ссылки на файлы
При сохранении проекта или решения Файл решения (SLN)
Параметры в меню сервис > параметры Настройки клавиатуры

Настройки панелей инструментов

Цветовые схемы
При закрытии диалогового окна " сервис > параметры "

когда завершается сеанс Visual Studio
Реестр в HKEY_Current_User

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

  • Когда пользователь изменяет расположение в диалоговом окне или окне

  • Когда пользователь передает фокус в другое окно

  • Когда пользователь переключается из режима разработки в режим отладки

  • При выходе пользователя из учетной записи

  • Когда компьютер переходит в спящий режим или завершает работу

  • Когда компьютер или жесткий диск будет переформатирован и настроен снова

Конфигурации окна

Конфигурация окна — это базовое представление среды разработки — это схема, состоящая из списка имеющихся окон инструментов и способа их упорядочения. Для Windows, управляемых интегрированной средой разработки (окна IDE), сведения о макете сохраняются для каждого пользователя, поэтому когда пользователь запускает интегрированную среду разработки, макет окна отображается так же, как при последнем выходе из Visual Studio. Состояние и расположение окон интегрированной среды разработки сохраняется в файле пользовательских параметров в формате XML. Окна инструментов, создаваемые пакетами, загруженными в интегрированную среду разработки, сохраняют сведения о состоянии в реестре и могут не существовать для каждого пользователя.

Макеты, зависящие от профиля

Каждый профиль содержит макеты окон инструментов, организованные в соответствии с конкретными персонажами разработчика (Visual C++ разработчики хотят видеть Обозреватель решений в левой части интегрированной среды разработки, тогда как разработчики на C# хотят увидеть Обозреватель решений справа). Макеты окон, зависящие от профиля, загружаются после того, как пользователь выбирает профиль при запуске. Автор пакета должен определить макет окна, наиболее подходящий для взаимодействия с клиентами, зная, что изменения, вносимые пользователем в конфигурацию окна, будут сохранены.

Сенсорный ввод

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

Уровни опыта работы

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

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

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

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

Основные возможности Оптимизированный интерфейс Опыт работы с повышенными правами
Позволяет пользователям... Исправление кода и решения/уровня проекта без незавершенных проблем Выполнение задач обслуживания, рефакторинга и навигации Единообразный, интуитивно понятный и жидкий опыт и уверенность
Редактор Сенсорное панорамирование и выбор

Прокрутка сенсорного экрана для перехода и нажатия + перетаскивания
Масштаб сжатия

Быстрая прокрутка

Выбор

Простое использование контекстного меню
Окна основных инструментов Перечислить панорамирование

Выбор элементов

Прокрутка сенсорного экрана для перехода и нажатия + перетаскивания
Простота прокрутки и выбора элементов
Оконное расширение Изменить размер окна

Быстрый доступ
Контейнер документа Простая навигация между открытыми файлами
Жесты Обеспечение работы общих жестов в интегрированной среде разработки Действия на основе жестов

Поддержка перетаскивания и конструкторов
Дополнительные рекомендации Пользовательская экранная клавиатура

Жесты

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