Padrões de composição para Visual StudioComposite Patterns for Visual Studio

Padrões compostos combinam elementos de design e interação em configurações distintas.Composite patterns combine interaction and design elements in distinct configurations. Alguns dos mais importantes compostos padrões no Visual Studio em relação à consistência incluem:Some of the most important composite patterns in Visual Studio with regard to consistency include:

Visualização de dadosData visualization

Visão geralOverview

Os gráficos são uma maneira visual de agregação e visualizar os dados a fim de melhorar a tomada de decisões.Charts are a visual way to aggregate and visualize data in order to enhance decision-making. Eles podem ajudar os usuários enfrentados muitos dados, mas pouco ou seja, veja o que merece atenção e o que pode precisar de uma ação.They can help users faced with a lot of data but little meaning see what deserves attention and what might need an action.

O usuário se beneficiará de um gráfico se qualquer uma das seguintes condições forem verdadeiras:The user will benefit from a chart if any of the following conditions are true:

  • O gráfico possam ajudar os usuários a identificar as tarefas que podem atuar em?Will the chart help users identify tasks they can act on?

  • O gráfico permitirá que os usuários prever as consequências de possíveis alterações?Will the chart enable users to forecast consequences of potential changes?

  • O gráfico ajudará os usuários descobrir tendências e identificar padrões?Will the chart help users discover trends and identify patterns?

  • O gráfico permitirá que os usuários a tomar decisões melhores?Will the chart allow users to make better decisions?

  • O gráfico ajudará a responder a perguntas específicas que os usuários podem ter no contexto fornecido?Will the chart help answer a specific question that users may have in the given context?

Regras gerais para gráficosGeneral rules for charts

  • Rotular dados claramente.Clearly label data. Ilustrações sem explicação são apenas belas fotos.Illustrations without explanation are just pretty pictures.

  • Inicie eixos em zero para evitar distorcer proporções.Start axes at zero to avoid skewing proportions. Tamanho da linha de comprimento e barra são indicações visuais importantes para entender as relações entre os pontos de dados.Line length and bar size are important visual cues to understanding the relationships between data points.

  • Crie gráficos, não infográficos.Create charts, not infographics. Infográficos são artísticas representações de dados e seu objetivo principal é narração visual.Infographics are artistic representations of data, and their primary goal is visual storytelling. Gráficos pode (e deve) ser visualmente atraente, mas permitir que os dados falem por si próprios.Charts can (and should) be visually appealing, but let the data speak for itself.

  • Evite skeumorphism, ilustrados gráficos de barras, marcas de hash de contraste e outras toques do infográfico.Avoid skeumorphism, pictorial bar graphs, contrast hashmarks, and other infographic touches.

  • Não use efeitos 3D como um elemento decorativo.Do not use 3D effects as a decorative element. Use-as apenas se eles realmente integral para a capacidade do usuário a compreender as informações.Use them only if they truly integral to the user's ability to comprehend the information.

  • Evite usar várias linhas e preenchimentos, como mais de duas cores podem fazer esse tipo de gráfico difícil de ler e interpretar corretamente.Avoid using multiple lines and fills, as more than two colors can make this type of chart difficult to read and interpret correctly.

  • Não use um gráfico (ou qualquer ilustração) como o único meio de um conceito de compreensão ou interagir com os dados.Do not use a chart (or any illustration) as the sole means of understanding a concept or interacting with data. Isso apresenta dificuldades para os usuários com deficiências visuais.This presents difficulties for users with visual impairments.

  • Não use gráficos como elementos decorativos ou gratuitos em uma página.Do not use charts as gratuitous or decorative elements on a page. Em outras palavras, se um gráfico não adiciona que qualquer valor ou ajuda usuários a resolver um problema, não o use.In other words, if a chart doesn't add any value or help users solve a problem, don't use it.

Tipos de gráficoChart types

Tipos de gráficos usados no Visual Studio incluem gráficos de barras, gráficos de linhas, um gráfico de pizza modificado, conhecido como um gráfico de anel ou "gráfico de rosca," linhas do tempo, gráficos (também chamados de "cluster gráficos") e os gráficos de Gantt de dispersão.Types of charts used in Visual Studio include bar charts, line charts, a modified pie chart known as a ring chart or "donut chart," timelines, scatter plots (also called "cluster charts"), and Gantt charts. Cada tipo de gráfico é útil para comunicar-se um tipo diferente de informações.Each type of chart is useful for communicating a different type of information.

Outras considerações sobre a criação de gráficosOther charting considerations

CorColor

Há uma paleta específica dos gráficos de cores definidas para uso no Visual Studio.There is a specific palette of charting colors defined for use in Visual Studio. A paleta é acessível para os tipos principais de daltonismo e as cores podem ser diferenciadas, mesmo quando usados como muito estreitas fatias da cor.The palette is accessible for the major types of color blindness, and the colors can be differentiated even when used as very narrow slices of color. Você pode usar essas cores em qualquer combinação para qualquer tipo de gráfico na sua interface do usuário.You can use these colors in any combination for any type of chart or graph in your UI. Você não precisa usar todas as cores de sete, se você não precisa que muitas cores distintas.You do not need to use all seven colors if you do not need that many distinct colors. Essas cores não foram projetados para ser usado com qualquer elemento de primeiro plano, portanto, não coloque texto ou glifos sobre essas cores.These colors were not designed to be used with any foreground elements, so do not place text or glyphs on top of these colors. Esses matizes devem ser embutido em código e expostas para personalização de usuário sob Ferramentas > Opções (consulte expondo as cores para os usuários finais).These hues should be hard-coded and exposed to user customization under Tools > Options (see Exposing colors for end users).

Amostra deSwatch HexHex RGBRGB
Amostra 71B252Swatch 71B252 #71B252#71B252 113,178,82113,178,82
Amostra BF3F00Swatch BF3F00 #BF3F00#BF3F00 191,63,0191,63,0
Amostra FCB714Swatch FCB714 #FCB714#FCB714 252,183,20252,183,20
Amostra 903F8BSwatch 903F8B #903F8B#903F8B 144,63,139144,63,139
Amostra 117AD1Swatch 117AD1 #117AD1#117AD1 17,122,20917,122,209
Amostra 79D7F2Swatch 79D7F2 #79D7F2#79D7F2 121,215,242121,215,242
Amostra B5B5B5Swatch B5B5B5 #B5B5B5#B5B5B5 181,181,181181,181,181

Interface do usuário no objeto e inspecionarOn-object UI and peeking

Esta seção fornece contexto para inspecionar, também conhecida como exibição de inspeção de código, um tipo de interface do usuário no objeto exclusivo para o Visual Studio.This section gives context to peeking, also known as code peek view, a type of on-object UI unique to Visual Studio.

Visão geralOverview

  • Interface de usuário no objeto deve dar ao usuário obter mais informações ou interatividade sem desviar a atenção de sua tarefa principal.On-object UI should give the user more information or interactivity without detracting from their main task.

  • O padrão principal para de objeto da interface do usuário no Visual Studio é conhecido como "informações no ponto de atenção".The main pattern for on-object UI in Visual Studio is known as "information at the point of attention."

  • No objeto de interface de usuário no Visual Studio é um embutido ou flutuante e duráveis ou transitório.On-object UI in Visual Studio is either inline or floating and either durable or transient.

    • Visualização de inspeção de código, um tipo de interface de usuário no objeto no Visual Studio, é embutida e duráveis.Code peek view, a type of on-object UI in Visual Studio, is inline and durable.

    • O CodeLens, um tipo de interface de usuário no objeto no Visual Studio, é temporário e flutuanteCodeLens, a type of on-object UI in Visual Studio, is floating and transient

    Noções básicas sobre como funciona um trecho de código, ou localizar detalhes sobre esse código, geralmente requer um desenvolvedor alternar o contexto e vá para outros tipos de conteúdo ou de outra janela.Understanding how a piece of code works, or finding details about that code, often requires a developer to switch context and go to other content or another window. Essas mudanças de contexto podem ser prejudicial, pois os usuários podem perder o foco na sua tarefa original se eles deixam a janela principal.These context shifts can be disruptive, because users can lose focus on their original task if they leave their main window. Além disso, obtendo que back do contexto original pode ser difícil, especialmente se alternar windows causou seu código original para ser obscurecido por outro da interface do usuário.Furthermore, getting that original context back can be difficult, especially if switching windows caused their original code to be obscured by other UI.

    Interface de usuário no objeto segue um padrão chamado "informações no ponto de atenção".On-object UI follows a pattern called "information at the point of attention." Essas mensagens, janelas pop-up e caixas de diálogo dar aos usuários informações adicionais relevantes que adiciona esclarecimento ou interatividade sem perder o foco na sua tarefa principal.These messages, pop-up windows, and dialog boxes give users additional, relevant information that adds clarification or interactivity without losing focus on their main task. Exemplos de objeto da interface do usuário incluem janelas pop-up que aparecem quando um usuário passar o ponteiro sobre um ícone na área de notificação, o Rabisco vermelho sob uma palavra incorreta e o modo de exibição de espiada introduzido no Visual Studio 2013.Examples of on-object UI include pop-up windows that appear when a user hovers their pointer over an icon in the notification area, the red squiggle under a misspelled word, and the peek view introduced in Visual Studio 2013.

Pontos de decisãoDecision points

No Visual Studio, há várias maneiras de usar esse padrão de informações no ponto de atenção.Within Visual Studio, there are several ways to use this pattern of information at the point of attention. Escolhendo o mecanismo certo e implementá-lo de maneira consistente e previsível são essencial para a experiência geral.Choosing the right mechanism and implementing it in a consistent, predictable way is essential to the overall experience. Caso contrário, podem ser apresentada aos usuários uma experiência confusa ou inconsistente que reduz o foco do próprio conteúdo.Otherwise, users might be presented with a confusing or inconsistent experience that detracts focus from the content itself.

Relações entre o mestre e de conteúdo de detalhesRelationships between master and detail content

Informações no ponto de atenção são usadas para exibir uma relação entre o conteúdo que o usuário está focalizado (o conteúdo "mestre") e adicionais relacionados ao conteúdo (o conteúdo de "Detalhes").Information at the point of attention is used to display a relationship between content that the user is focused on (the "master" content) and additional related content (the "detail" content). Nesse padrão, o conteúdo de detalhes é claramente relacionado ao conteúdo o usuário está trabalhando com e pode ser exibido perto o conteúdo mestre.In this pattern, the detail content is clearly related to the content the user is working with and can be displayed close to the master content. Informações complementares ou informações que não podem ser resumidas sem sobrecarregar o conteúdo mestre devem seguir o padrão de outro, como uma janela de ferramentas.Supplemental information or information that cannot be summarized without overwhelming the master content should follow another pattern, such as a tool window.

  • Sempre exibir o conteúdo de detalhes em estreita proximidade com o conteúdo mestre.Always display the detail content in close proximity to the master content.

  • Sempre Certifique-se de que o conteúdo de detalhes ainda permite que um usuário concentre-se no conteúdo mestre.Always ensure that the detail content still enables a user to remain focused on the master content. Muitas vezes, a melhor maneira de conseguir isso é renderizar o conteúdo de detalhes como perto o conteúdo mestre quanto possível.Often, the best way to achieve this is to render the detail content as close to the master content as possible. Isso pode ser feito ao processar o conteúdo de detalhes em uma janela pop-up ao lado do conteúdo mestre ou ao renderizar o conteúdo embutido de detalhes sob o conteúdo mestre.This can be done by rendering the detail content in a pop-up window next to the master content, or by rendering the detail content inline underneath the master content.

  • Nunca usar informações no ponto de atenção que leva o usuário para fora o conteúdo mestre.Never use information at the point of attention that takes the user away from the master content. Se os usuários precisam exibir o conteúdo de detalhes separadamente, expor uma ação explícita que permite ao usuário fazer isso.If users need to view the detail content separately, expose an explicit action that enables the user to do this.

Detalhes de designDesign details

Depois de ter determinado no objeto de interface de usuário é a escolha certa, há quatro considerações de design principal:Once you have determined that on-object UI is the right choice, there are four main design considerations:

  1. Persistência: o conteúdo deve ser durável ou transitório?Persistence: is the content expected to be durable or transient?
    Os usuários desejam manter as informações visíveis para se referir a ou interagir com?Will users want to keep the information visible to refer to or interact with? Ou, os usuários desejarão olhei rapidamente as informações e, em seguida, continue com a sua principal tarefa?Or will users want to quickly glance at the information and then continue with their main task?

  2. Tipo de conteúdo: o conteúdo será informativa, acionáveis ou navegação?Content type: will the content be informational, actionable, or navigational?
    O usuário precisa obter mais detalhes sobre o conteúdo mestre?Does the user need additional detail about the master content? O usuário que precisa para concluir uma tarefa que afeta o conteúdo mestre?Does the user need to complete a task that affects the master content? Ou o usuário precisa ser direcionado para outro recurso?Or does the user need to be directed to another resource?

  3. Tipo de indicador: um indicador de ambiente faz sentido?Indicator type: does an ambient indicator make sense?
    As informações podem ser resumidas de uma maneira útil e exibidas sem sobrecarregar o conteúdo mestre?Can the information be summarized in a useful way and displayed without overwhelming the master content?

  4. Gestos: gestos do que serão usado para invocar e ignorar a interface do usuário?Gestures: what gestures will be used to invoke and dismiss the UI?
    Como será o usuário abrir o conteúdo de detalhes e enviá-lo imediatamente?How will the user bring up the detail content and send it away? Há um valor para adicionar um gesto, como fixação para alternar entre os estados transitórios e duráveis?Is there value in adding a gesture such as pinning to switch between transient and durable states?

    Cada um desses pontos de quatro decisão terá um impacto sobre os principais componentes da interface de usuário no objeto.Each of these four decision points will have an impact on the major components of on-object UI.

Componentes de interface do usuário no objetoOn-object UI components

  1. Tipo de contêiner (apresentador de conteúdo)Container (content presenter) type

    • FlutuanteFloating

    • EmbutidoInline

  2. Tipo de conteúdoContent type

    • Informação: dados que podem ser estáticos ou dinâmicosInformational: data that might be static or dynamic

    • Acionáveis: comandos que alteram o conteúdo mestreActionable: commands that change the master content

    • Navegação: links que levam o usuário a outra janela ou aplicativo, como o MSDNNavigational: links that take the user to another window or application, such as MSDN

  3. GestosGestures

    • InvocaçãoInvocation

    • ExoneraçãoDismissal

    • A fixaçãoPinning

    • Outras interaçõesOther interactions

  4. Modelo de persistência e confirmarPersistence and commit model

    • TransitórioTransient

    • duráveisDurable

    • AutomáticoAutomatic

    • Sob demandaOn-demand

  5. Indicadores de ambientes (opcionais)Ambient indicators (optional)

    • Sublinhado de rabiscoSquiggle underline

    • Ícone de marca inteligenteSmart tag icon

    • Outros indicadores de ambientesOther ambient indicators

Tipo de contêiner (apresentador de conteúdo)Container (content presenter) type

Há duas opções principais disponíveis para apresentar conteúdo no ponto de atenção:There are two major options available to present content at the point of attention:

  1. Embutido: um apresentador embutido, como a exibição de espiada que foi apresentado no Editor do Visual Studio 2013 código, torna o espaço para o novo conteúdo com a mudança de conteúdo existente.Inline: an inline presenter, such as the peek view that was introduced in the Visual Studio 2013 Code Editor, makes space for new content by shifting existing content.

    • Prefira embutido apresentadores se você espera que os usuários desejarão gastam uma quantidade significativa de tempo referindo-se a ou interagir com o conteúdo que você apresenta.Prefer inline presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

    • Evite embutido apresentadores se você espera que os usuários desejarão olhando as informações que você apresente e continuar sua tarefa principal com interrupção mínima.Avoid inline presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

  2. Flutuante: um apresentador flutuante é posicionado o mais próximo possível conteúdo selecionado, mas não altera o layout do conteúdo existente.Floating: a floating presenter is positioned as close to the selected content as possible but does not alter the layout of the existing content. Várias estratégias podem ser empregadas, como a exibição de um painel flutuante de conteúdo sobre o mais próximo de espaço em branco disponível para o símbolo selecionado.Various strategies can be employed, such as displaying a floating content panel over the nearest available white space to the selected symbol.

    • Prefira flutuante apresentadores se você espera que os usuários desejarão olhei as informações que você apresente e continuar sua tarefa principal com interrupção mínima.Prefer floating presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

    • Evite flutuante apresentadores se você espera que os usuários desejarão gastam uma quantidade significativa de tempo referindo-se a ou interagir com o conteúdo você presente.Avoid floating presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

Tipo de conteúdoContent type

Há três principais tipos de conteúdo que pode ser exibido dentro de qualquer contêiner de interface do usuário no objeto.There are three main types of content that can be displayed inside any on-object UI container. Qualquer combinação desses tipos de informações pode ser mostrada.Any combination of these types of information can be shown. Os três tipos são:The three types are:

  1. Informação: mais contêineres de interface do usuário exibirá algum tipo de conteúdo informativo ao objeto.Informational: most on-object UI containers will display some kind of informational content. O conteúdo pode representar informações sobre o estado atual do ambiente ou ele pode representar informações sobre uma potencial estado futuras do ambiente.The content can represent information about the present state of the environment or it may represent information about a potential future state of the environment. Por exemplo, ele pode ser usado para mostrar o efeito de um comando específico, como uma refatoração, no código existente.For example, it could be used to show the effect of a particular command, such as a refactoring, on the existing code.

    • Sempre usar as informações que você exibir a representação canônica.Always use the canonical representation of the information that you display. Por exemplo, o código deve se parecer com o código, completo com realce de sintaxe e deve respeitar a fonte e outras configurações de ambiente que o usuário tiver definido.For example, code should look like code, complete with syntax highlighting, and should respect whatever font and other environment settings the user has set.

    • Sempre considere dar suporte a quaisquer ações sobre o conteúdo informativo que seria possível se a mesma informação é apresentada como conteúdo mestre.Always consider supporting any actions over the informational content that would be possible if that same information is presented as master content. Por exemplo, se apresentar o código existente dentro de um contêiner de interface do usuário no objeto, considere seriamente a capacidade de navegar e modificar o código de suporte.For example, if presenting existing code inside an on-object UI container, strongly consider supporting the ability to browse and modify that code.

    • Sempre considere o uso de uma cor de plano de fundo diferente se apresentar o conteúdo informativo que representa um estado de futuras potencial.Always consider using a different background color if presenting informational content that represents a potential future state.

  2. Acionáveis: alguns contêineres de interface do usuário no objeto fornecerá a capacidade de realizar alguma ação sobre o conteúdo mestre, como executar uma operação de refatoração.Actionable: some on-object UI containers will provide the ability to perform some action over the master content, such as performing a refactoring operation.

    • Sempre posicionar acionáveis comandos separadamente do conteúdo informativo.Always position actionable commands separately from the informational content.

    • Sempre habilitar e desabilitar ações quando apropriado.Always enable and disable actions when appropriate.

    • Sempre consulte as diretrizes padrão para representar os comandos nas caixas de diálogo.Always refer to the standard guidelines for representing commands inside dialog boxes.

    • Sempre manter o número de ações que são expostas em um contêiner de interface do usuário no objeto absoluta mínimo.Always keep the number of actions that are exposed in an on-object UI container to an absolute minimum. Interagindo com a interface de usuário no objeto deve ser uma experiência leve e rápida.Interacting with on-object UI should be a lightweight, fast experience. O usuário não deve ter com o custo de energia sobre como gerenciar o contêiner de interface do usuário no objeto em si.The user should not have to expend energy on managing the on-object UI container itself.

    • Sempre considerar como e quando um contêiner de interface do usuário no objeto será fechado ou descartado.Always consider how and when an on-object UI container will be closed or dismissed. Como prática recomendada, qualquer ação que conclui a caixa de diálogo entre o mestre e de conteúdo de detalhes deve fechar também o contêiner de interface do usuário no objeto quando essa ação é invocada.As a best practice, any action that concludes the dialog between the master and detail content should also close the on-object UI container when that action is invoked.

  3. Navegação: alguns no objeto contêineres de interface do usuário incluem links que levam o usuário a outra janela ou aplicativo, como a abertura de um artigo do MSDN no navegador do usuário.Navigational: some on-object UI containers include links that take the user to another window or application, such as opening an MSDN article in the user's web browser.

    • Sempre preceder qualquer link de navegação com "Abrir" para que os usuários não ficará surpreso com a qual se está navegando para algum outro conteúdo.Always prepend any navigational link with "Open" so that users will not be surprised by being navigated to some other content.

    • Sempre separar os links de navegação dos links acionáveis.Always separate navigational links from actionable links.

Indicadores de ambientes (opcionais)Ambient indicators (optional)

Indicadores de ambientes podem ser sutil, incluindo texto apresentado em uma cor contrastante do restante do código, ou óbvio, incluindo símbolos tickler como sublinhados rabisco e ícones de marca inteligente.Ambient indicators can be subtle, including text presented in a contrasting color from the rest of the code, or obvious, including tickler symbols such as squiggle underlines and smart tag icons. Indicadores de ambientes se comunicar a disponibilidade de informações adicionais relevantes.Ambient indicators communicate the availability of additional, relevant information. O ideal é que eles fornecem informações úteis mesmo sem exigir que o usuário interagir com eles.Ideally, they provide useful information even without requiring the user to interact with them.

  • Sempre posicionar um indicador de ambiente para que ele não for distraí-lo ou sobrecarregar o usuário.Always position an ambient indicator so that it does not distract or overwhelm the user. Se for impossível para um ambiente indicador de posição de forma, considere a possibilidade de outra solução.If it is impossible to position an ambient indicator in such a way, consider another solution.

  • Sempre posicionar o indicador de ambiente mais próximo possível para o conteúdo que está relacionado ao.Always position the ambient indicator as close as possible to the content that it's related to.

  • Sempre tentar criar um indicador que resume as informações que ele disponibiliza.Always try to create an indicator that summarizes the information it makes available. Recomenda-se fornecer uma contagem do número de itens de dados disponíveis (por exemplo, "3 referências", em vez de simplesmente "Referências") ou pensar em alguma outra maneira para resumir os dados.Consider providing a count of the number of data items available (for example, "3 references" instead of simply "References") or think of some other way to summarize the data.

    • Em casos em que os dados para um indicador não podem sempre ser computados e exibidos, considere imediatamente fornecendo comentários progressivo, como os valores são computados.In cases where the data for an indicator cannot always be computed and displayed, immediately consider providing progressive feedback as the values are computed. Por exemplo, considere animando alterações que refletem as atualizações dos dados disponíveis, semelhantes à forma como o bloco dinâmico de email no Windows Phone é atualizada conforme o número de aumentos de emails não lidos.For example, consider animating changes that reflect updates to the available data, similar to the way the email live tile on Windows Phone refreshes as the number of unread emails increases.
  • Nunca adicionar indicadores mais do que um usuário pode realizar razoavelmente para uma determinada parte do conteúdo.Never add more indicators than a user can reasonably take in for a given piece of content. Indicadores de ambientes devem ser útil sem exigir qualquer interação do usuário.Ambient indicators should be useful without requiring any interaction from the user. Indicadores de perdem seu ambiente se precisarem de estouro e outros controles de gerenciamento para colocá-los em modo de exibição.Indicators lose their ambience if they require overflow and other management controls to bring them into view.

GestosGestures

Um aspecto importante de permitir que o usuário manter o foco no conteúdo mestre está dando suporte os gestos direito para abrir e ignorar o conteúdo de detalhes adicionais.A key aspect of allowing the user to maintain focus on the master content is by supporting the right gestures to open and dismiss the additional detail content.

  • Sempre exigem que o usuário executar alguma gesto explícito para abrir o conteúdo adicional.Always require the user to perform some explicit gesture to open the additional content. Gestos abertos comuns incluem:Common open gestures include:

    • Passe o mouse: dicas de ferramenta ou conteúdo informativo não interativoHover: tooltips or non-interactive informational content

    • Comando explícito: apresentador embutidoExplicit command: inline presenter

    • Clique duas vezes o indicador de ambiente: janela pop-up do CodeLensDouble-click the ambient indicator: CodeLens pop-up window

  • Sempre ignorar o conteúdo de detalhes, sempre que o usuário pressiona a tecla Esc.Always dismiss the detail content whenever the user presses the Esc key.

  • Sempre considerar o contexto da interface do usuário no objeto.Always consider the context of the on-object UI. Para conteúdo apresentadores que permitem a interação dentro do contêiner, considere cuidadosamente se deseja mostrar informações adicionais ao focalizar, que é a probabilidade de ser perturbador para o fluxo de trabalho do usuário.For content presenters that allow for interaction within the container, carefully consider whether to show additional information on hover, which is likely to be disruptive to the user's workflow.

  • Nunca exibir o conteúdo ao passar o que parece ser editável ou convida interação do usuário.Never display content on hover that appears to be editable or invites user interaction. Esse comportamento pode frustrar os usuários se eles tentarem move o cursor sobre o conteúdo de detalhes, como o comportamento padrão para uma dica de ferramenta é descartar imediatamente quando o cursor não estiver mais sobre o mestre de conteúdo que o produziu.This behavior can frustrate users if they try to move the cursor over the detail content, as the standard behavior for a tooltip is to immediately dismiss when the cursor is no longer over the master content that produced it.

Modelos de seleçãoSelection models

Visão geralOverview

Um modelo de seleção é o mecanismo usado para indicar e confirmar as operações em um ou mais objetos de interesse na interface do usuário.A selection model is the mechanism used to indicate and confirm operations on one or more objects of interest within the user interface. Este tópico aborda os padrões de interação de seleção em editores de documento do Visual Studio: editores de texto, superfícies de design e modelagem de superfícies.This topic discusses selection interaction patterns within Visual Studio document editors: text editors, design surfaces, and modeling surfaces.

Os usuários devem ter uma maneira de indicar para o Visual Studio que eles estão trabalhando, e Visual Studio deve responder previsível com comentários aos usuários sobre o que ele está funcionando no.Users must have a way of indicating to Visual Studio what they are working on, and Visual Studio must respond predictably with feedback to users about what it is operating on. Diferenças ou um erro de comunicação entre o usuário e a interface do usuário pode resultar no usuário não observar que uma ação, que pode ter consequências não intencionais.Differences or a miscommunication between the user and the user interface can result in the user not noticing an action, which can have unintended consequences. Muitas vezes, o erro passa despercebido até que o usuário vê que algo está faltando ou foi alterada.Often, the error goes unnoticed until the user sees that something is missing or has changed. Modelos de seleção, portanto, são uma das partes mais importantes de design da interface do usuário.Selection models are therefore one of the most critical pieces of user interface design. Embora modelos de seleção no Visual Studio são consistentes com o Windows, há algumas pequenas variações.Although selection models in Visual Studio are consistent with Windows, there are slight variations.

No Visual Studio, como no Windows, os modelos de seleção diferem dependendo do contexto no qual a interação ocorre.In Visual Studio, as in Windows, selection models differ depending on the context in which the interaction occurs. Seleções podem ocorrer em quatro tipos de objetos:Selections can occur in four types of objects:

  • TextoText

  • Objetos gráficosGraphical objects

  • Listas e árvoresLists and trees

  • GradesGrids

    Dentro desses objetos, há três tipos de seleções:Within these objects, there are three types of selections:

  • ContíguosContiguous

  • Não contíguasDisjoint

  • RegiãoRegion

EscopoScope

O componente mais importante da seleção é garantir que o usuário sabe em qual janela estão trabalhando (ativação) e onde o foco está localizada (seleção).The most important component of selection is ensuring that the user knows in which window they are working (activation) and where the focus is located (selection). O Visual Studio estende a funcionalidade de gerenciamento de janela no Windows, mas o esquema de ativação é o mesmo: interagir com uma janela traz o foco para a janela.Visual Studio extends the window management functionality in Windows, but the activation scheme is the same: interacting with a window brings focus to the window. O Visual Studio tem dois indicadores para ativação: um para as janelas do documento e outro para janelas de ferramentas.Visual Studio has two indicators for activation: one for document windows, and one for tool windows.

Para janelas de documento, a janela ativa é indicada por uma guia de janela de documento disponível para a frente e alterando sua cor de plano de fundo:For document windows, the active window is indicated by a document window tab coming to the front and changing its background color:

Seleção da guia ativa no Visual StudioActive tab selection in Visual Studio

Seleção da guia ativaActive tab selection

Para janelas de ferramentas, a janela ativa é indicada por uma alteração na cor da área da barra de título da janela de ferramenta:For tool windows, the active window is indicated by a change in the color of the title bar area of the tool window:

Seleção de janela da ferramenta ativa no Visual StudioActive tool window selection in Visual Studio

Janela da ferramenta ativa está mostrando a seleção primária de um nóActive tool window showing primary selection of a node

Seleção de janela de ferramenta inativos no Visual StudioInactive tool window selection in Visual Studio

Janela de ferramenta inativos, mostrando latente seleção do nóInactive tool window, showing latent selection of node

Quando uma janela está ativa, seu foco é indicado acordo com os modelos de seleção descritos nesta seção das diretrizes.Once a window is active, its focus is indicated according to the selection models outlined in this section of the guidelines.

ContextoContext

Visual Studio foi projetado para manter um forte conceito de contexto, controlando de onde o usuário está trabalhando.Visual Studio was designed to retain a strong concept of context, keeping track of where the user is working. Apenas uma janela está ativa, se ele é uma janela de ferramenta ou documento.Only one window is active, whether it is a tool or document window. No entanto, a janela de nível mais alto de documento sempre retém uma seleção latente.However, the topmost document window always retains a latent selection. Embora o foco pode estar em uma janela de ferramentas, a janela de documento que estava ativo pela última vez exibe uma seleção, até mesmo em um estado inativo.Although the focus might be in a tool window, the document window that was last active displays a selection, even in an inactive state. Isso é feito para manter o contexto do usuário no documento estava editando, mostrando-lhes o Visual Studio manteve seu estado para que eles podem retornar- and -shift perfeitamente entre janelas de ferramentas e janelas de documento.This is done to retain the user's context in the document they were editing, showing them that Visual Studio has retained their state so that they can return and shift seamlessly between tool windows and document windows.

Seleção de textoText selection

Os editores do Visual Studio que são estritamente textuais, como o editor de texto interno, usam o mesmo modelo de seleção de texto e aparência descrito o Mouse e ponteiros página das diretrizes de interação de experiência de usuário Windows no MSDN.Visual Studio editors that are strictly textual, such as the built-in text editor, use the same text selection model and appearance described in the Mouse and Pointers page of the Windows User Experience Interaction Guidelines on MSDN. O foco de entrada no editor de texto é indicado por uma barra vertical, chamada de ponto de inserção.The input focus in the text editor is indicated by a vertical bar called the insertion point. O ponto de inserção é um único pixel espesso e colorido, como o inverso de tudo o que aparece por trás dele.The insertion point is a single pixel thick and colored as the inverse of whatever appears behind it. Ele pisca de acordo com a taxa definida pela de intermitência do Cursor definindo na velocidade guia dos teclado miniaplicativo Painel de controle.It blinks according to the rate set by the Cursor blink rate setting in the Speed tab of the Keyboard applet in Control Panel.

Seleção contígua e não contíguoContiguous and disjoint selection

Seleção de dentro do editor de texto só é contígua.Selection within the text editor is contiguous only. Não contíguas texto seleções não são permitidas, mas devem ser resolvidas nos editores do objeto gráfico.Disjoint text selections are not permitted, but should be addressed in graphical object editors. Quando o ponteiro do mouse do usuário está sobre uma área de texto, o cursor muda para uma forma de i.When the user's mouse pointer is over a text area, the cursor changes to an I-beam. Um único clique coloca o ponto de inserção no editor de texto no local do clique.A single click places the insertion point in the text editor at the click location. Segurando o botão do mouse é iniciado um realce de seleção e liberar o botão do mouse termina o realce de seleção.Holding the mouse button down starts a selection highlight and releasing the mouse button ends the selection highlight.

Seleção de região (seleção de caixa)Region selection (box selection)

Visual Studio oferece suporte a seleções de região no editor de texto, e isso é chamado de seleção da caixa.Visual Studio supports region selections in the text editor, and this is called box selection. Caixa de seleção permite que o usuário selecione uma região de texto que não segue o fluxo de texto normal.Box selection allows the user to select a region of text that does not follow the regular text stream. Assim como acontece com a seleção de texto padrão, a seleção deve ser contígua.As with standard text selection, the selection must be contiguous. Caixa de seleção é iniciada pelo mantendo pressionada a tecla Alt enquanto arrasta o mouse.Box selection is initiated by holding down the Alt key while dragging with the mouse. Caixa de seleção também pode ser iniciada, mantenha pressionada as teclas Shift e Alt ao usando as teclas de direção para indicar a região de seleção.Box selection can also be initiated by holding down the Alt and Shift keys while using the arrow keys to indicate the region of selection. Caixa de seleção usa o realce de seleção normal e mostra o cursor de ponto de inserção piscando no final da área de seleção.Box selection uses the normal selection highlight and shows the insertion point cursor blinking at the end of the selection area.

Regional (caixa de) seleção no Visual StudioRegional (box) selection in Visual Studio

Seleção de região (caixa) no Visual StudioRegion (box) selection in Visual Studio

Aparência da seleção de textoText selection appearance

As cores usadas para seleção ativa e inativa no editor podem ser personalizadas.The colors used for active and inactive selection in the editor can be customized. Para personalizar a aparência visual do editor, um usuário pode ir para Ferramentas > Opçõese, em seguida, procure ambiente > fontes e cores > Editor de texto.To customize the visual appearance of the editor, a user can go to Tools > Options, and then look under Environment > Fonts and Colors > Text Editor.

Seleção de gráficaGraphical selection

InteraçãoInteraction

Seleção de objetos gráficos pode ser complexa e depende de vários fatores:Graphical object selection can be complex and depends upon a number of factors:

  • Modelo de seleção primária do editor.The editor's primary selection model. Os editores que contêm objetos gráficos também podem ser usados para editar o texto ou grades.Editors that contain graphical objects can also be used to edit text or grids. Por exemplo, o editor pode ser um editor de texto que também oferece suporte a colocação de objetos gráficos, como o designer XAML do Visual Studio.For example, the editor might be a text-based editor that also supports the placement of graphical objects, such as the Visual Studio XAML designer. Suporte a vários tipos de objeto pode afetar como o usuário seleciona grupos compostos por diferentes tipos de objetos.Supporting multiple object types can affect how the user selects groups made up of different types of objects.

  • Suporte para os estados de seleção primária e secundária.Support for primary and secondary selection states. Um editor pode fornecer uma seleção primária e secundária estados para que os objetos podem ser editados de forma sincronizada, alinhados entre si, redimensionado juntos, e assim por diante.An editor can provide primary and secondary selection states so that objects can be edited in unison, aligned with each other, resized together, and so on.

  • Suporte de edição in-loco.In-place editing support. Editores também podem permitir que o conteúdo de seus objetos de gráficos a ser editado.Editors can also allow the contents of their graphical objects to be edited. Por exemplo, uma forma de retângulo também pode conter texto interno que pode ser alterado pelo usuário.For example, a rectangle shape might also contain text on the inside that can be changed by the user. Além disso, esse texto pode ser centralizado ou justificado.In addition, that text could be centered or justified. Edição in-loco envolve um nível mais detalhado de interação do usuário e, portanto, requer um conjunto apropriado de indicações visuais para apresentar informações de estado para o usuário.In-place editing involves a more detailed level of user interaction and therefore requires an appropriate set of visual cues for presenting state information to the user.

Interação do mouseMouse interaction

EntradaInput ResultadoResult
Clique em um objeto não selecionadoClick an unselected object Seleciona o objeto e exibe uma linha tracejada e as alças de seleção, se o objeto é redimensionável.Selects the object and displays a dashed line and selection handles, if the object is resizable.
Clique em um objeto selecionadoClick a selected object Ativa a edição in-loco, se o objeto der suporte a ele.Activates in-place editing if the object supports it. Clicar fora do objeto desativa o modo de edição in-loco.Clicking outside the object deactivates the in-place editing mode.
Clique duas vezes em um objetoDouble-click an object Abre o código por trás do objeto para edição e pode inserir um manipulador de evento padrão, se apropriado.Opens the code behind the object for editing, and might insert a default event handler, if appropriate.
Aponte para um objetoPoint to an object Altera o ponteiro para o cursor de movimento.Changes the pointer to the move cursor. Aparência do objeto, como seu luminosidade ou a cor, pode ser alterada.The object's appearance, such as its luminosity or color, might change.
Aponte para uma alça de seleçãoPoint to a selection handle Altera o ponteiro para o cursor de redimensionamento.Changes the pointer to the resize cursor. Para objetos que oferecem suporte a rotação, alguns identificadores de seleção podem alterar o ponteiro para um cursor girar conforme o ponteiro está posicionado diferente (por exemplo, movido para longe) em relação a alça de seleção.For objects that support rotation, some selection handles might change the pointer to a rotate cursor as the pointer is positioned differently (for example, moved farther away) with respect to the selection handle.
ArrasteDrag Mesmo se o objeto não está selecionado anteriormente, altera o ponteiro para o cursor de movimento e move o objeto.Even if the object is not previously selected, changes the pointer to the move cursor and moves the object.
Editor perde o focoEditor loses focus Desativa o modo de edição in-loco, embora o objeto retém o conteúdo e a aparência que tinha durante seu último estado de seleção da operação /.Deactivates in-place editing mode, although the object retains the content and appearance it had during its last operation/selection state.
Seleção de objetosObject selection Indicado por uma borda, linha pontilhada ou outro tratamento visualmente distinto para destacar os limites do objeto.Indicated by a border, dotted line, or other visually distinct treatment to highlight the boundary of the object.
Redimensionar um objeto selecionadoResize a selected object Indicado pela alças de seleção.Indicated by selection handles.

Um objeto redimensionável tem oito alças, que representa cada direção na qual ela pode ser redimensionada.A resizable object has eight handles, representing each direction in which it can be resized. Menos identificadores podem ser usados se o objeto pode ser redimensionado somente em determinadas direções.Fewer handles may be used if the object can only be resized in certain directions. Quando o usuário dimensiona um objeto para baixo até onde oito alças não é interativas, quatro identificadores podem ser usados.When the user sizes an object down to where eight handles would not be interactive, then four handles may be used. Tamanhos de identificador devem ser vinculados para as métricas de borda e a borda de janela com o GetSystemMetrics função de API para tamanho proporcionalmente a resolução de vídeo.Handle sizes should be tied to the window border and edge metrics with the GetSystemMetrics API function to size in proportion to the display resolution.

Alças de redimensionamentoResize handles
Girar um objeto selecionadoRotate a selected object Alças de rotaçãoRotate handles

Interação do tecladoKeyboard interaction

EntradaInput ResultadoResult
TabulaçãoTab Move o indicador de foco entre a ordem lógica dos objetos no editor.Moves the focus indicator among the logical order of objects in the editor. Isso pode ser esquerda para a direita ou de cima para baixo dependendo TabIndex (ou equivalente) o valor da propriedade, a ordem da criação do objeto e a finalidade geral do editor.This may be left-to-right or top-to-bottom depending on TabIndex (or equivalent) property value, order of object creation, and the overall purpose of the editor. Shift + Tab inverte a direção do indicador de foco.Shift+Tab reverses the direction of the focus indicator.
Barra de espaçosSpacebar Ativa o modo de panorâmica enquanto o pressionamento de tecla é mantido.Activates panning mode while keystroke is maintained. Entrada de mouse adicional é necessária para deslocar para a posição do visor.Additional mouse input is required to pan the viewport position.
Ctrl+Barra de espaçosCtrl+Spacebar Ativa o modo de zoom enquanto o pressionamento de tecla é mantido.Activates zoom mode while keystroke is maintained. Entrada de mouse adicional é necessária para aumentar e diminuir o fator de zoom.Additional mouse input is required to increase and decrease the zoom factor.
Ctrl + Alt + sinal de subtraçãoCtrl+Alt+Minus Sign Diminui o fator de zoom em um nível.Decreases the zoom factor by one level.
Ctrl + Alt + sinal de adiçãoCtrl+Alt+Plus Sign Aumenta o fator de zoom em um nível.Increases the zoom factor by one level.
Ctrl ou SHIFTShift OR Ctrl Adiciona o objeto para o grupo de seleção.Adds the object to the selection group. CTRL também permite que você remova objetos individualmente a partir do grupo de seleção.Ctrl also allows you to remove objects individually from the selection group.
EnterEnter Executa o comando padrão para o objeto (geralmente abrir ou editar).Performs the default command for the object (usually Open or Edit).
F2F2 Ativa a edição in-loco para o objeto.Activates in-place editing for the object.
Teclas de direçãoArrow keys Move os objetos selecionados na direção da tecla pressionada, em pequenos incrementos (por exemplo, 1 pixel por vez)Moves the selected object(s) in the direction of the arrow key pressed, in small increments (for example, 1 pixel at a time)
CTRL + teclas de direçãoCtrl+arrow keys Move os objetos selecionados na direção da tecla pressionada, em incrementos maiores (por exemplo, 10 pixels por vez)Moves the selected object(s) in the direction of the arrow key pressed, in larger increments (for example, 10 pixels at a time)
SHIFT + seta para chavesShift+arrow keys Redimensiona os objetos selecionados na respectiva direção, em pequenos incrementos (por exemplo, 1 pixel por vez)Resizes the selected object(s) in the respective direction, in small increments (for example, 1 pixel at a time)
Ctrl + Shift + teclas de direçãoCtrl+Shift+arrow keys Redimensiona os objetos selecionados na respectiva direção, em incrementos maiores (por exemplo, 10 pixels por vez)Resizes the selected object(s) in the respective direction, in larger increments (for example, 10 pixels at a time)

Quando os usuários editar controles em vigor, ele pode fazer sentido para os objetos para redimensionar automaticamente com a entrada do usuário.When users edit controls in place, it might make sense for objects to automatically resize with user input. Por exemplo, se o usuário edita um controle de rótulo, o rótulo deve aumentar para exibir o texto que o usuário acabou de digitar.For example, if the user edits a label control, then the label should grow to display the text that the user just typed. Se isso não for feito, o usuário deve redimensionar o controle manualmente depois de editar o texto.If this is not done, the user must resize the control manually after editing the text. Se o usuário tem muitos dos controles, isso se torna um atividades rotineiras e tarefa improdutiva.If the user has a lot of controls, this becomes a rote and unproductive task.

Contêineres de gráficosGraphical containers

Em alguns casos, os editores gráficos fornecem contêineres para outros objetos gráficos, como o controle de painel dos Windows Forms ou o controle de Layout de grade no designer de HTML.In some cases, graphical editors provide containers for other graphical objects, such as the Windows Forms Panel control or the Grid Layout control in the HTML designer. Se seu editor fornece contêineres para outros objetos gráficos, o modelo de seleção a seguir deve ser usado para apenas o contêiner (objetos dentro o acompanhamento de contêiner, o modelo padrão como descrito acima):If your editor provides containers for other graphical objects, then the following selection model should be used for the container only (objects within the container follow the standard model as described above):

EntradaInput ResultadoResult
Clique no contêiner únicoSingle-click on the container Seleciona o objeto de contêiner sem selecionando qualquer um dos objetos contidos diretamente.Selects the container object without directly selecting any of the contained objects. O contêiner pode movido e/ou redimensionado com padrão de mouse e teclado de entrada (como descrito acima).The container may be moved and/or resized with standard mouse and keyboard input (as described above). Objetos contidos são movidos em relação ao contêiner, mas os objetos contidos não são redimensionados, a menos que eles sejam selecionados também diretamente.Contained objects are moved in relation to the container, but contained objects are not resized unless they are also directly selected.
Passe o mouse sobre a região de limites do contêinerHover over the container's boundary region Transforma o mouse no cursor de movimento, indicando que o contêiner pode ser movido.Turns the mouse into the move cursor, indicating that the container can be moved.
Arraste a região de limites do contêinerDrag the container's boundary region Altera o mouse para o cursor de movimento e move o contêiner (e os objetos contidos em).Changes the mouse to the move cursor and moves the container (and the contained objects within). O contêiner não pode ser movido sem primeiro selecionado com um único clique.The container cannot be moved without first being selected with a single click.
Clique em um objeto dentro do contêiner únicoSingle-click on an object within the container Anula a seleção de contêiner (caso selecionado) e seleciona apenas o objeto clicado.Deselects the container (if selected) and selects only the clicked object.
SHIFT + clique ou Ctrl + clique em um objeto contido e/ou o contêinerShift+click OR Ctrl+click on a contained object and/or container Adiciona o objeto clicado para um grupo de seleção ou uma seleção existente.Adds the clicked object to an existing selection or selection group. Se o objeto clicado já for um membro do grupo de seleção, ele é removido do grupo de seleção.If the clicked object is already a member of the selection group, it is removed from the selection group.

Os objetos contidos devem seguir o modelo básico de seleção conforme descrito na seção anterior.The contained objects should adhere to the basic selection model as described in the previous section. Do teste de usabilidade do Windows Forms designer, os usuários esperado acesso contínuo para os objetos contidos sem etapas intermediárias (impostas pelo objeto confinamento).From usability testing of the Windows Forms designer, users expected seamless access to the contained objects without intervening steps (imposed by the containment object).

Não contíguas e as seleções de regiãoDisjoint and region selections

Editores de objeto gráfico devem dar suporte a seleções não contíguas.Graphical object editors should support disjoint selections. Observe que este gráfico não mostra a aparência do controle para o Visual Studio.Please note that this graphic does not show the control appearance for Visual Studio. Ver aparência da seleção de objeto gráfico para especificações detalhadas de visual.See Graphical object selection appearance for detailed visual specifications.

Não contíguas e seletores de regiãoDisjoint and region selectors

Seleção de disjunçãoDisjoint selection

Editores gráficos também devem fornecer as seleções de região com um indicador de seleção do tipo de marca de seleção.Graphical editors should also provide region selections with a marquee-type selection indicator. Se o editor gráfico oferece suporte a outros tipos de objeto (como texto), em seguida, seleções de região talvez não seja possíveis dependendo das restrições desses outros tipos de objeto.If the graphical editor supports other object types (such as text), then region selections might not be possible depending on the constraints of those other object types.

Marca de seleçãoMarquee selection

Marca de seleçãoMarquee selection

Seleções de primárias e secundáriasPrimary and secondary selections

Alguns editores de objeto gráfico é permitir que o usuário edite ou alinhar objetos em grupos.Some graphical object editors allow the user to edit or align objects in groups. Nesse caso, o conceito de seleções de primários e secundários precisa ser introduzido.In this case, the concept of primary and secondary selections needs to be introduced. A seleção principal é o objeto ao qual todos os outros objetos respondem para operações de grupo.The primary selection is the object to which all other objects respond for group operations. O objeto que o usuário seleciona primeiro se torna o controle principal e seleções subsequentes se tornam as seleções secundárias.The object that the user selects first becomes the primary control, and subsequent selections become the secondary selections. A seleção primária tem um tratamento visual distinto das seleções de secundários para indicar qual objeto está primário:The primary selection has a distinct visual treatment from the secondary selection(s) to indicate which object is primary:

Seleção de primária e secundáriaPrimary and secondary selection

Seleção primária com duas seleções secundáriasPrimary selection with two secondary selections

Aparência da seleção de objeto gráficoGraphical object selection appearance

As alças de seleção são desenhados em um padrão retangular ao redor da caixa delimitadora do objeto de quadrados.The selection handles are squares drawn in a rectangular pattern around the bounding box of the object. O gráfico abaixo mostra exemplos de vários estados em que um objeto gráfico pode ter com a alça de dimensionamento e aparência de edição in-loco.The chart below shows examples of the various states that a graphical object can have with handle, sizing, and in-place editing appearance. O tamanho dos identificadores deve ser vinculado a borda da janela e métricas de borda usando o GetSystemMetrics API.The size of the handles should be tied to window border and edge metrics using the GetSystemMetrics API.

EstadoState AparênciaAppearance Detalhes do VisualVisual details
Não selecionadoUnselected PadrãoDefault Estado do botão padrãoDefault button state
Seleção primáriaPrimary selection RedimensionávelResizable A seleção principal com alças de redimensionamentoPrimary selection with resize handles
Seleção primáriaPrimary selection Não é redimensionávelNot resizable A seleção principal sem alças de redimensionamentoPrimary selection without resize handles
Seleção primáriaPrimary selection BloqueadoLocked Seleção primária bloqueadaPrimary selection locked
Seleção de secundáriaSecondary selection RedimensionávelResizable Secundária seleção com alças de redimensionamentoSecondary selection with resize handles
Seleção de secundáriaSecondary selection Não é redimensionávelNot resizable Alças de redimensionamento de seleção secundária semSecondary selection without resize handles
Seleção de secundáriaSecondary selection BloqueadoLocked Seleção secundária bloqueadaSecondary selection locked
Interface do usuário do Active DirectoryUI active PadrãoDefault Estado de interface do usuário ativoUI active state

Modelos de seleção de exibiçãoView selection models

Exibição de árvoreTree view

Seleção em uma exibição de árvore é mostrada com um realce simple.Selection in a tree view is shown with a simple highlight. Se o usuário clica em um nome de nó ou um ícone de nó, o nó se torna selecionado.If the user clicks on a node name or a node icon, the node becomes selected. Os glifos triangulares à esquerda do nó de expandir ou contrato de controle de árvore, mas não afetam a seleção do usuário, com uma exceção: ao recolher um nó pai quando a seleção estiver em um filho do nó, a seleção se move para o pai.The triangular glyphs to the left of the node expand or contract the tree control but do not affect the user's selection, with one exception: upon collapsing a parent node when the selection is on a child of that node, the selection moves to the parent.

Modo de exibição de árvore típico no Visual StudioTypical tree view in Visual Studio

Modo de exibição de árvore típico no Visual StudioTypical tree view in Visual Studio

Modos de exibição de árvore podem dar suporte a seleções contíguas e não contíguas, até mesmo em vários níveis na árvore.Tree views can support contiguous and disjoint selections, even across multiple levels in the tree. Contíguas ou não contíguo várias seleções devem ser feitas em nós de árvore visível.Contiguous or disjoint multiple selections must be made on visible tree nodes. Se um nó estiver recolhido, a seleção não contíguo é perdida e o nó que foi recolhido obtém a seleção.If a node is collapsed, the disjoint selection is lost and the node that was collapsed obtains the selection. Dessa forma, o usuário pode ver os nós que serão afetados por uma operação.In this way, the user can see the nodes that will be affected by an operation. Quando os nós são recolhidos, torna-se claro quais nós podem ser afetados.When nodes are collapsed, it becomes unclear which nodes might be affected.

Quando um nó pai é selecionado, a operação seja aplicada ao pai, embora possa haver casos em que faz sentido para uma operação aplicar o pai e todos os seus filhos.When a parent node is selected, the operation should apply to the parent, though there may be cases where it makes sense for an operation to apply to the parent and all of its children. Nesse caso, forneça adicional da interface do usuário durante a operação, como uma caixa de seleção ou a caixa de diálogo de confirmação para tornar a opção "aplicar a todos os filhos" explícito para o usuário.In this case, provide additional UI during the operation, such as a check box or confirmation dialog to make the "apply to all children" option explicit to the user.

RenomearRenaming

Se nós na árvore dá suporte à renomeação, renomeando deve ser feito em vigor.If nodes in the tree support renaming, renaming should be done in place. A operação no local deve ser o padrão em todos os controles de árvore no Visual Studio.The in-place operation should be the standard across all tree controls in Visual Studio. Forneça um comando de renomeação que ativa imediatamente o modo de edição in-loco, com a seleção de texto que abrange o nome completo do nó, pronto para aceitar a entrada do usuário.Provide a rename command that immediately activates the in-place editing mode, with the text selection covering the entire name of the node, ready to accept user input. Se o nó representa um arquivo, o nome do arquivo deve conter a extensão.If the node represents a file, the filename should contain the extension. O realce de seleção deve incluir somente o corpo de nome de arquivo e não a extensão.The selection highlight should include only the body of the filename and not the extension.

EntradaInput ResultadoResult
Tecla EnterEnter key Confirma a operação de renomeaçãoCommits the rename operation
Tecla ESCEsc key Cancela a operação de renomeaçãoCancels the rename operation
Clicar fora da região de edição in-locoClicking outside the in-place edit region Confirma a operação de renomeaçãoCommits the rename operation
DesfazerUndo Fornecer fácil desfazer para cancelar a operação de renomeaçãoProvide easy undo to cancel the rename operation

Seleção em listas e controles de gradeSelection within lists and grid controls

O conceito fundamental na seleção de lista é que ele é baseado em linha, que significa que, quando uma seleção é feita em toda a linha está selecionada como uma unidade.The key concept in list selection is that it is row-based, meaning that when a selection is made the whole row is selected as a unit. Por outro lado, grades podem permitir a células específicas a ser selecionado sem afetar qualquer outro aspecto da linha.By contrast, grids can allow specific cells to be selected without affecting any other aspect of the row. Grades também podem conter uma hierarquia de linhas aninhadas (como em uma grade de árvore) que permitem que todo ramificações da hierarquia a ser selecionada e desmarcada com a interação com as linhas pai.Grids might also contain a hierarchy of nested rows (such as in a TreeGrid) that allow entire branches of the hierarchy to be selected and deselected by interacting with the parent rows. Seleção em listas é mostrada por uma cor de realce simples em toda a linha de dados.Selection in lists is shown by a simple highlight color on the entire row of data. O foco é mostrado por uma borda pontilhada de pixel único ao redor da linha editável atual ou uma célula (linha se todas as células são somente leitura).Focus is shown by a single-pixel dotted border around the current editable row or cell (row if all cells are read-only).

Note

Foco e seleção são conceitos diferentes.Focus and selection are different concepts. Foco é uma indicação de qual interface do usuário do elemento é direcionado para receber entrada dirigida não explicitamente a outro objeto, enquanto seleção refere-se ao estado da inclusão de um objeto em um conjunto de objetos dos quais subsequentes as operações podem ocorrer.Focus is an indication of which UI element is targeted to receive input not explicitly directed at another object, while selection refers to the state of an object's inclusion in a set of objects on which subsequent operations may take place.

As seleções nas listas podem ser contíguos, não contíguo, ou região.Selections in lists may be contiguous, disjoint, or region. Quando várias seleções são permitidas, contíguos e seleção de disjunção sempre deve ser compatível, enquanto o suporte para as seleções de região (caixa) são opcional.When multiple selections are allowed, contiguous and disjoint selection should always be supported, while support for region (box) selections is optional. Seleções de região são iniciadas, arrastando o espaço em branco do corpo da lista.Region selections are initiated by dragging in the white space of the list body.

ObjetoObject SeleçãoSelection
ListaList ContíguosContiguous
ListaList Não contíguasDisjoint
ListaList RegiãoRegion

Clicar uma vez em uma lista seleciona a linha onde ocorreu o clique.Clicking once on a list selects the row where the click occurred. Se o usuário clicar em uma célula de lista que dá suporte à edição in-loco, a célula imediatamente também é ativada para edição no local.If the user happens to click in a list cell that supports in-place editing, the cell is also immediately activated for in-place editing. Caso contrário, a linha inteira imediatamente é selecionada e mostra um realce.Otherwise, the whole row is immediately selected and shows a highlight.

Arrastar no corpo da lista faz uma das três coisas:Dragging in the list body does one of three things:

  • Inicia uma seleção de região, se a lista dá suporte a ele e o mouse para baixo no espaço em brancoInitiates a region selection if the list supports it and the mouse-down is in white space

  • Inicia uma operação de arrastar/soltar se a lista de célula ou linha dá suporte a que está sendo uma origem do arrastoInitiates a drag/drop operation if the list cell or row supports being a drag source

  • Seleciona a linha atualSelects the current row

Edição in-locoIn-place editing

Quando é permitido edição in-loco, há dois modelos básicos: Seletor de propriedade e controle de edição simples.When in-place editing is allowed, there are two basic models: simple edit control and property picker. Com um controle de edição simples, o conteúdo é realçado e está pronto para edição no local é ativado assim que de entrada do usuário.With a simple edit control, the content is highlighted and ready for user input as soon as in-place editing is activated. Sempre que um seletor de propriedade é implementado, o botão que invoca o seletor de propriedades é exibido depois que o modo de edição no local é ativado, e a seleção atual não é realçada.Where a property picker is implemented, the button that invokes the property picker is displayed once in-place editing mode is activated, and the current selection is not highlighted. O botão de seletor deve ser justificado à direita da célula.The picker button should be right-justified in the cell. Para obter exemplos de edição in-loco, consulte a janela de propriedades e lista de tarefas no Visual Studio.For in-place editing examples, see the Properties Window and Task List in Visual Studio.

Suporte ao tecladoKeyboard support

Suporte de teclado para a seleção em listas e grades segue as convenções padrão do Windows:Keyboard support for selection in lists and grids follows the standard Windows conventions:

  • Teclas de seta para navegar pela lista, selecionando cada célula da linha/como o foco é movido.Arrow keys navigate the list, selecting each row/cell as the focus is moved.

  • SHIFT + seta executa uma seleção contígua na direção das teclas de direção.Shift + arrow performs a contiguous selection in the direction of the arrow keys.

  • CTRL + seta para a seguido de barra de espaço alterna entre adicionando e removendo itens da lista de seleção, a criação de uma seleção não contíguo.Ctrl + arrow followed by Spacebar toggles between adding and removing list items from the selection, creating a disjoint selection.

  • Para as grades que contenham hierarquias aninhadas, a tecla de seta para a direita expande uma linha pai e a tecla de seta para a esquerda recolhe um.For grids that contain nested hierarchies, the Right Arrow key expands a parent row, and the Left Arrow key collapses one.

  • A tecla Tab move o foco entre as células na linha atual, se as células são editáveis.The Tab key moves focus among the cells in the current row if the cells are editable.

  • A tecla Enter executa o comando padrão no item na lista (geralmente abrir).The Enter key performs the default command on the item in the list (often Open).

  • A tecla F2 ativa a edição in-loco para a célula selecionada no momento.The F2 key activates in-place editing for the currently selected cell.

Salvando as configurações e persistênciaPersistence and saving settings

Visão geralOverview

Embora cada componente de software no Visual Studio é geralmente responsável por seu próprio estado e persistência, o Visual Studio salva automaticamente as configurações em alguns casos, como com posições e tamanhos de janela.Although each software component in Visual Studio is usually responsible for its own state and persistence, Visual Studio automatically saves settings in some cases, such as with window sizes and positions. A tabela a seguir é uma combinação de configurações salvas automaticamente e que exigem um usuário explícito ou programado a ação a ser executada.The table below is a combination of settings saved automatically and settings that require an explicit user or programmed action to be taken.

ObjetoObject O que salvarWhat to save Quando salvarWhen to save Onde salvarWhere to save
Objeto selecionável (por exemplo, uma linha de código)Selectable object (for example, a line of code) Um ponto de interrupção em uma linha de códigoA breakpoint on a line of code

Um atalho de usuário associado com a linha de códigoA user shortcut associated with the line of code
Quando o projeto é salvoWhen the project is saved O opções do usuário (. suo) arquivo de projetoThe user options (.suo) file for the project
Caixa de diálogoDialog O local da caixa de diálogo, se ele tivesse sido movidoThe location of the dialog, if it had been moved

O modo de exibição que o usuário é usado pela última vez na caixa de diálogoThe view that the user last used in the dialog
Quando a caixa de diálogo é fechadaWhen the dialog closes

Quando termina a sessão do Visual StudioWhen the Visual Studio session ends
Na memóriaIn memory

Registro no HKEY_Current_UserRegistry in HKEY_Current_User
JanelaWindow O tamanho e local da janelaThe size and location of the window Quando a janela é fechadaWhen the window closes

Quando o modo do Visual Studio é alteradoWhen the Visual Studio mode changes

Quando termina a sessão do Visual StudioWhen the Visual Studio session ends
O opções do usuário (. suo) arquivo de projetoThe user options (.suo) file for the project

Arquivo de opções personalizadas para as configurações da janelaCustom options file for window settings
DocumentoDocument A seleção atual no documentoThe current selection in the document

O modo de exibição do documentoThe view of the document

Os último vários lugares que o usuário visitouThe last several places the user visited
Quando o documento é salvoWhen the document is saved O opções do usuário (. suo) arquivo de projetoThe user options (.suo) file for the project
ProjetoProject Referências aos arquivosReferences to files

Referências aos diretórios no discoReferences to directories on disk

Referências a outros softwaresReferences to other software

ComponentesComponents

Informações de estado sobre o projeto em siState information about the project itself
Quando o projeto é salvoWhen the project is saved O arquivo de projetoThe project file
SoluçãoSolution Referências a projetosReferences to projects

Referências aos arquivosReferences to files
Quando a solução ou projeto é salvoWhen the project or solution is saved O solução (. sln) arquivoThe solution (.sln) file
As configurações no Ferramentas > OpçõesSettings in Tools > Options Personalizações de tecladoKeyboard customizations

Personalizações da barra de ferramentasToolbar customizations

Esquemas de coresColor schemes
Quando o Ferramentas > Opções caixa de diálogo é fechadaWhen the Tools > Options dialog closes

Quando termina a sessão do Visual StudioWhen the Visual Studio session ends
Registro no HKEY_Current_UserRegistry in HKEY_Current_User

O que o usuário está fazendo e quando eles estão fazendo, determina se uma configuração está sendo salvo na memória (durante a sessão), salva em disco (entre as sessões como uma configuração de registro), como parte do projeto ou solução de arquivo em si, como parte do solução Opções (. suo) de arquivo, ou como um configurações personalizadas de arquivo que somente esse componente de software conhecem.What the user is doing, and when they are doing it, dictates whether a setting is being saved in memory (during the session), saved to disk (across sessions as a registry setting), as part of the project or solution file itself, as a part of the solution options (.suo) file, or as a custom settings file that only that software component knows about. A tabela acima mostra vários eventos no qual as configurações podem ser salvas.The table above shows several events at which settings can be saved. No entanto, existem outras ocasiões em que deseja salvar o estado:However, there are other times in which you might want to save state:

  • Quando o usuário altera o local dentro de uma caixa de diálogo ou janelaWhen the user changes location within a dialog or window

  • Quando o usuário transfere o foco para outra janelaWhen the user transfers focus to another window

  • Quando o usuário alterna de design para o modo de depuraçãoWhen the user switches from design to debug mode

  • Quando o usuário fizer logoff de sua contaWhen the user logs off their account

  • Quando o computador entra em hibernação ou desligadoWhen the computer goes into hibernation or shuts down

  • Quando o computador/disco rígido está prestes a ser reformatado e configure novamenteWhen the computer/hard drive is about to be reformatted and set up again

Configurações de janelaWindow configurations

Uma configuração de janela é a apresentação básica do ambiente de desenvolvimento - é um esquema consiste em lista de janelas de ferramenta presentes e a maneira na qual eles são organizados.A window configuration is the basic presentation of the development environment - it is a scheme consisting of the list of tool windows present and the way in which they are arranged. Para o windows gerenciados pelo IDE (janelas do IDE), informações de layout são mantidas por usuário, portanto, quando um usuário inicia o IDE, o layout da janela é exibida mesmo que, quando elas duram, Visual Studio foi encerrado.For windows managed by the IDE (IDE windows), layout information is persisted per user, so when a user launches the IDE, the window layout appears the same as when they last exited Visual Studio. O estado e a posição das janelas do IDE é mantido em um arquivo de opções personalizadas em formato XML.The state and position of IDE windows is persisted in a custom options file in XML format. Janelas de ferramentas que são criadas por pacotes carregados no IDE manter suas informações de estado no registro e podem ou não ser por usuário.Tool windows that are created by packages loaded into the IDE persist their state information in the registry and may or may not be per user.

Layouts de específico para o perfilProfile-specific layouts

Cada perfil inclui layouts de janela da ferramenta, organizados de forma familiar para pessoas específicas do desenvolvedor (os desenvolvedores de Visual C++ esperam ver a Gerenciador de soluções no lado esquerdo do IDE, enquanto os desenvolvedores de c# esperam ver o Gerenciador de soluções à direita).Each profile includes tool window layouts, organized in a manner familiar to specific developer personas (Visual C++ developers expect to see the Solution Explorer on the left side of the IDE, while C# developers expect to see the Solution Explorer on the right). Layouts de janela específico para o perfil são carregados depois que o usuário escolhe um perfil na inicialização.Profile-specific window layouts are loaded after the user chooses a profile on startup. Um autor do pacote deve determinar o layout da janela mais adequado para a experiência de seus clientes, sabendo que as alterações que o usuário faz a configuração de janela, em seguida, ser persistente.A package author should determine the window layout most suitable for their customer's experience, knowing that changes that the user makes to the window configuration will then be persisted.

Entrada de toqueTouch input

Os usuários estão usando cada vez mais produtos de desenvolvimento da Microsoft nos dispositivos de toque.Users are increasingly using Microsoft development products on touch devices. No entanto, há barreiras que tornam difícil usar ferramentas de desenvolvimento em dispositivos sensíveis ao toque.However, there are barriers that make it difficult to use development tools on touch devices. Usuários esperam que nossos produtos para fornecer uma experiência de toque precisas e confiáveis.Users will expect our products to provide a reliable and precise touch experience. A intenção dessas diretrizes é informar decisões sobre quais recursos de toque para incorporar e incentivar uma experiência de toque consistente entre o Visual Studio e produtos relacionados.The intent of these guidelines is to inform decisions about which touch capabilities to incorporate and to encourage a consistent touch experience across Visual Studio and related products.

Níveis de experiênciaLevels of experience

Os seguintes níveis de experiência destinam-se a servir como um guia para ajudar as equipes a decidir quais recursos de toque para oferecer com base em seu nível desejado de interesse de investimento em contato.The following levels of experience are intended to serve as a guide to help teams decide which touch capabilities to offer based on their desired level of investment interest in touch.

  • O experiência básica é para equipes que desejam fornecer recursos de toque para que não há nenhum ineficiência ao longo de seu trabalho.The basic experience is for teams that want to provide touch capabilities so there are no dead ends throughout their work.

  • O otimizado experiência é para equipes que desejam fornecer a maioria dos recursos comuns de toque (por exemplo, aqueles normalmente disponíveis em aplicativos de navegador da internet).The optimized experience is for teams that want to provide the most common touch capabilities (for example, those typically available in internet browser applications).

  • O elevados experiência é para equipes que desejam adicionar recursos tais como gestos ou outros recursos opcionais que podem tornar seus aplicativos de primeiro toque amigável.The elevated experience is for teams that want to add capabilities such as gestures or other optional capabilities that can make their application touch-first friendly.

Experiência básicaBasic experience Experiência otimizadaOptimized experience Experiência com privilégios elevadosElevated experience
Permite que os usuários...Enables users to ... Corrigir o código e a solução/nível de projeto de leitura sem extremidades de mensagens mortasFix code and solution/project-level reading without dead ends Executar tarefas de manutenção, refatorações e navegaçãoPerform maintenance, refactors, and navigation tasks Operar em uma experiência consistente, intuitiva e fluida com confiançaOperate in a consistent, intuitive, and fluid experience with confidence
EditorEditor Movimento panorâmico por toque e seleçãoTouch panning and selection

Barra de rolagem toque para saltar e pressione + arrastarScrollbar touch to jump and press+drag
Aperto zoomPinch zoom

Rolagem rápidaFast scroll

SeleçãoSelection

Fácil de usar do menu de contextoEasy use of context menu
Janelas de ferramentas superiorTop tool windows Lista de movimento panorâmicoList panning

Seleção de itemItem selection

Barra de rolagem toque para saltar e pressione + arrastarScrollbar touch to jump and press+drag
Rolagem de item fácil e seleçãoEasy item scrolling and selection
JanelasWindowing Redimensionar a janelaResize window

Acesso rápidoQuick access
Documente tambémDocument well Facilitar a navegação entre arquivos abertosEasy navigation between open files
GestosGestures Certifique-se de gestos comuns trabalhar no IDEEnsure common gestures work across the IDE Ações de gestoGesture-based actions

Suporte a arrastar-e-soltar e designersSupport drag-and-drop and designers
Outras consideraçõesOther considerations Teclado na tela personalizadoCustom onscreen keyboard

GestosGestures

Gestos de fornecem aos usuários um atalho para comandos que, caso contrário, podem exigir uma interação mais complicada.Gestures provide users a shortcut to commands that might otherwise require a more complicated interaction. Consulte as diretrizes do Windows no gestos de toque comuns para aplicativos de área de trabalhoe siga estas diretrizes para a maioria dos gestos, incluindo gestos simples, como de Panorâmica e zoom.Refer to the Windows guidelines on common touch gestures for Desktop Applications, and follow this guidance for most gestures, including simple gestures such as panning and zooming.