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

Padrões de composição combinam elementos de interação e design em configurações distintas.Composite patterns combine interaction and design elements in distinct configurations. Alguns dos padrões de composição mais importantes 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 agregar e Visualizar dados para aprimorar 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 a enfrentar muitos dados, mas o significado é ver 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 for verdadeira:The user will benefit from a chart if any of the following conditions are true:

  • O gráfico ajudará os usuários a identificar as tarefas nas quais eles podem agir?Will the chart help users identify tasks they can act on?

  • O gráfico permitirá que os usuários prevejam 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 a 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 tomem decisões melhores?Will the chart allow users to make better decisions?

  • O gráfico ajudará a responder a uma pergunta específica que os usuários podem ter no contexto em questão?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 imagens.Illustrations without explanation are just pretty pictures.

  • Inicie os eixos em zero para evitar as proporções de distorção.Start axes at zero to avoid skewing proportions. Comprimento de linha e tamanho de 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 representações artísticas de dados, e sua meta principal é o Visual narração.Infographics are artistic representations of data, and their primary goal is visual storytelling. Os gráficos podem (e devem) ser visualmente atraentes, mas permitem que os dados se comuniquem por si mesmos.Charts can (and should) be visually appealing, but let the data speak for itself.

  • Evite skeumorphisms, gráficos de barras de ilustrações, marcas de contraste e outros toques de 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-os apenas se eles realmente integram a capacidade do usuário de 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, já que mais de duas cores podem tornar 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 entender um conceito ou interagir com 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 gratuito ou decorativos 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 adicionar qualquer valor ou ajudar os 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

Os 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 toque ou "gráfico de rosca", linhas do tempo, gráficos de dispersão (também chamados de "gráficos de cluster") e de Gantt.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 um tipo diferente de informações.Each type of chart is useful for communicating a different type of information.

Outras considerações sobre gráficosOther charting considerations

ColorColor

Há uma paleta específica de cores de gráfico definida para uso no Visual Studio.There is a specific palette of charting colors defined for use in Visual Studio. A paleta pode ser acessada para os principais tipos de cegueira de cor e as cores podem ser diferenciadas mesmo quando usadas como fatias muito estreitas de 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 ou grafo 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 precisará usar todas as sete cores se não precisar de 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 projetadas para serem usadas com elementos de primeiro plano, portanto, não coloque texto nem 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 embutidos em código e expostos à personalização do usuário em ferramentas > opções (consulte expondo cores para usuários finais).These hues should be hard-coded and exposed to user customization under Tools > Options (see Exposing colors for end users).

EssasSwatch HexHex RGBRGB
71B252 de amostraSwatch 71B252 #71B252#71B252 113178, 82113,178,82
BF3F00 de amostraSwatch BF3F00 #BF3F00#BF3F00 191, 63, 0191,63,0
FCB714 de amostraSwatch FCB714 #FCB714#FCB714 252183, 20252,183,20
903F8B de amostraSwatch 903F8B #903F8B#903F8B 144, 63139144,63,139
117AD1 de amostraSwatch 117AD1 #117AD1#117AD1 17.122.20917,122,209
79D7F2 de amostraSwatch 79D7F2 #79D7F2#79D7F2 121.215.242121,215,242
B5B5B5 de amostraSwatch B5B5B5 #B5B5B5#B5B5B5 181.181.181181,181,181

Interface do usuário e inspeção do objetoOn-object UI and peeking

Esta seção fornece contexto para inspecionar, também conhecido como exibição de inspeção de código, um tipo de interface do usuário no objeto exclusiva do 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

  • A interface de usuário no objeto deve dar ao usuário mais informações ou interatividade sem desviar 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 a interface do usuário no objeto 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."

  • A interface do usuário no objeto no Visual Studio está embutida ou flutuante e pode ser durável ou transitória.On-object UI in Visual Studio is either inline or floating and either durable or transient.

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

    • CodeLens, um tipo de interface do usuário no objeto no Visual Studio, é flutuante e transitórioCodeLens, a type of on-object UI in Visual Studio, is floating and transient

    Entender como uma parte do código funciona ou encontrar detalhes sobre esse código, geralmente exige que um desenvolvedor Alterne o contexto e vá para outro conteúdo ou 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 causar interrupções, pois os usuários podem perder o foco em sua tarefa original se deixarem 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, a obtenção desse contexto original pode ser difícil, especialmente se a troca de janelas fez com que seu código original fosse obscurecido por outra 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.

    A interface do 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 fornecem aos usuários informações adicionais e relevantes que adicionam esclarecimentos ou interatividade sem perder o foco em 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 interface do usuário no objeto incluem janelas pop-up que aparecem quando um usuário passa o ponteiro do mouse sobre um ícone na área de notificação, o ondulado vermelho sob uma palavra incorreta e a exibição de inspeção introduzida 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. Escolher o mecanismo certo e implementá-lo de maneira consistente e previsível é 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, os usuários podem receber uma experiência confusa ou inconsistente que reduz o foco do conteúdo em si.Otherwise, users might be presented with a confusing or inconsistent experience that detracts focus from the content itself.

Relações entre conteúdo mestre e detalhadoRelationships between master and detail content

As informações no ponto de atenção são usadas para exibir uma relação entre o conteúdo no qual o usuário se concentra (o conteúdo "mestre") e o conteúdo adicional relacionado (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 detalhado está claramente relacionado ao conteúdo com o qual o usuário está trabalhando e pode ser exibido próximo ao 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 outro padrão, 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 exiba o conteúdo detalhado em proximidade com o conteúdo mestre.Always display the detail content in close proximity to the master content.

  • Sempre Verifique se o conteúdo detalhado ainda permite que um usuário permaneça focado no conteúdo mestre.Always ensure that the detail content still enables a user to remain focused on the master content. Geralmente, a melhor maneira de conseguir isso é renderizar o conteúdo detalhado o mais próximo possível do conteúdo mestre.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 renderizando o conteúdo detalhado em uma janela pop-up ao lado do conteúdo mestre ou renderizando o conteúdo detalhado embutido 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 Use informações no ponto de atenção que leva o usuário para fora do conteúdo mestre.Never use information at the point of attention that takes the user away from the master content. Se os usuários precisarem exibir o conteúdo detalhado 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 do designDesign details

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

  1. Persistência: o conteúdo é esperado como durável ou transitório?Persistence: is the content expected to be durable or transient? Os usuários desejarão manter as informações visíveis para se referirem ou interagirem?Will users want to keep the information visible to refer to or interact with? Ou os usuários desejarão rapidamente dar uma olhada nas informações e continuar com a tarefa principal?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á informativo, acionável ou de navegação?Content type: will the content be informational, actionable, or navigational? O usuário precisa de mais detalhes sobre o conteúdo mestre?Does the user need additional detail about the master content? O usuário precisa 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: quais gestos serão usados para invocar e ignorar a interface do usuário?Gestures: what gestures will be used to invoke and dismiss the UI? Como o usuário abrirá o conteúdo detalhado e o enviará de longe?How will the user bring up the detail content and send it away? Há algum valor na adição de um gesto, como fixação para alternar entre 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 quatro pontos de decisão terá um impacto sobre os principais componentes da interface do usuário no objeto.Each of these four decision points will have an impact on the major components of on-object UI.

Componentes da 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

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

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

    • Navegação: links que levam o usuário para 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

    • FixaçãoPinning

    • Outras interaçõesOther interactions

  4. Modelo de persistência e confirmaçãoPersistence and commit model

    • TransitórioTransient

    • DurávelDurable

    • AutomáticaAutomatic

    • Sob demandaOn-demand

  5. Indicadores de ambiente (opcional)Ambient indicators (optional)

    • Sublinhado onduladoSquiggle underline

    • Ícone de marca inteligenteSmart tag icon

    • Outros indicadores de ambienteOther ambient indicators

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

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

  1. Inline: um apresentador embutido, como o modo de exibição de inspeção que foi introduzido no editor de código Visual Studio 2013, torna o espaço para o novo conteúdo, alterando o 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 apresentadores embutidos se você espera que os usuários desejam gastar um tempo significativo se referindo ou interagindo 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 apresentadores embutidos se você espera que os usuários desejam dar uma olhada nas informações que você apresenta e continuar com a 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 do 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 exibir um painel de conteúdo flutuante sobre o espaço em branco mais próximo 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 apresentadores flutuantes se você esperar que os usuários desejam dar uma olhada nas informações que você apresenta e, em seguida, continuar com a 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 apresentadores flutuantes se você espera que os usuários desejam gastar um tempo significativo se referindo ou interagindo com o conteúdo que você apresenta.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 tipos principais de conteúdo que podem ser exibidos 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. Informativo: a maioria dos contêineres de interface do usuário no objeto exibirá algum tipo de conteúdo informativo.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 pode representar informações sobre um potencial estado futuro 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 use a representação canônica das informações exibidas.Always use the canonical representation of the information that you display. Por exemplo, o código deve ser semelhante a um código, completo com realce de sintaxe e deve respeitar qualquer fonte e outras configurações de ambiente definidas pelo usuário.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 o suporte a qualquer ação no conteúdo informativo que seria possível se essa mesma informação fosse 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 estiver apresentando o código existente dentro de um contêiner de interface do usuário no objeto, leve em consideração o suporte à capacidade de procurar e modificar esse código.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 usar uma cor de plano de fundo diferente se apresentar conteúdo informativo que representa um estado futuro potencial.Always consider using a different background color if presenting informational content that represents a potential future state.

  2. Acionável: alguns contêineres de interface do usuário no objeto fornecerão a capacidade de executar alguma ação no conteúdo mestre, como a execução de 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 Posicione comandos acionáveis separadamente do conteúdo informativo.Always position actionable commands separately from the informational content.

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

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

    • Sempre Mantenha o número de ações que são expostas em um contêiner de interface do usuário no objeto para um mínimo absoluto.Always keep the number of actions that are exposed in an on-object UI container to an absolute minimum. Interagir com a interface do 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 que gastar energia no gerenciamento do próprio contêiner da interface do usuário no objeto.The user should not have to expend energy on managing the on-object UI container itself.

    • Sempre considere 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 conclua a caixa de diálogo entre o conteúdo mestre e de detalhes também deve fechar o contêiner da interface do usuário do objeto quando essa ação é chamada.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 contêineres de interface do usuário no objeto incluem links que levam o usuário para outra janela ou aplicativo, como abrir um artigo do MSDN no navegador da Web 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 "aberto" para que os usuários não se surpreendam com a navegação 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 separe os links de navegação de links acionáveis.Always separate navigational links from actionable links.

Indicadores de ambiente (opcional)Ambient indicators (optional)

Os indicadores de ambiente podem ser sutis, incluindo o texto apresentado em uma cor de contraste do restante do código ou óbvio, incluindo símbolos tickler, como sublinhados ondulados 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. Os indicadores de ambiente comunicam a disponibilidade de informações adicionais e relevantes.Ambient indicators communicate the availability of additional, relevant information. O ideal é que eles forneçam informações úteis mesmo sem exigir que o usuário interaja com eles.Ideally, they provide useful information even without requiring the user to interact with them.

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

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

  • Sempre tente criar um indicador que resuma as informações disponibilizadas.Always try to create an indicator that summarizes the information it makes available. Considere fornecer uma contagem do número de itens de dados disponíveis (por exemplo, "3 referências" em vez de simplesmente "referências") ou pense em alguma outra maneira de 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.

    • Nos casos em que os dados de um indicador nem sempre podem ser computados e exibidos, considere imediatamente fornecer comentários progressivos à medida que 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 a animação de alterações que refletem atualizações para os dados disponíveis, de forma semelhante à maneira como o bloco de emails dinâmicos no Windows Phone é atualizado à medida que o número de emails não lidos aumenta.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 adicione mais indicadores do que um usuário pode usar razoavelmente para um determinado conteúdo.Never add more indicators than a user can reasonably take in for a given piece of content. Os indicadores de ambiente devem ser úteis sem a necessidade de qualquer interação do usuário.Ambient indicators should be useful without requiring any interaction from the user. Os indicadores perdem seus Ambience se exigirem um estouro e outros controles de gerenciamento para colocá-los em 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 Mantenha o foco no conteúdo mestre é dar suporte aos gestos certos para abrir e ignorar o conteúdo adicional de detalhes.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 exija que o usuário execute algum gesto explícito para abrir o conteúdo adicional.Always require the user to perform some explicit gesture to open the additional content. Os gestos de abertura comuns incluem:Common open gestures include:

    • Hover: 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 no indicador ambiente: Janela pop-up CodeLensDouble-click the ambient indicator: CodeLens pop-up window

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

  • Sempre considere o contexto da interface do usuário no objeto.Always consider the context of the on-object UI. Para os apresentadores de conteúdo que permitem a interação dentro do contêiner, considere atentamente se as informações adicionais devem ser exibidas ao focalizar, o que provavelmente causem interrupções no 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 conteúdo em foco que pareça ser editável ou convidar a 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 mover o cursor sobre o conteúdo de detalhes, uma vez que o comportamento padrão de uma dica de ferramenta é descartar imediatamente quando o cursor não estiver mais sobre o conteúdo mestre 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 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 discute os padrões de interação de seleção nos editores de documento do Visual Studio: editores de texto, superfícies de design e superfícies de modelagem.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 ao Visual Studio o que eles estão trabalhando, e o Visual Studio deve responder de forma previsível com os comentários para os usuários sobre o que está operando.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. As diferenças ou uma comunicação insuficiente entre o usuário e a interface do usuário podem fazer com que o usuário não perceba uma ação, o que pode ter consequências indesejadas.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. Geralmente, o erro fica desnotado até que o usuário veja que algo está ausente ou foi alterado.Often, the error goes unnoticed until the user sees that something is missing or has changed. Os modelos de seleção são, portanto, uma das partes mais importantes do design da interface do usuário.Selection models are therefore one of the most critical pieces of user interface design. Embora os modelos de seleção no Visual Studio sejam consistentes com o Windows, há 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 de acordo com o contexto no qual ocorre a interação.In Visual Studio, as in Windows, selection models differ depending on the context in which the interaction occurs. As 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

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

  • VizinhaContiguous

  • Não contíguoDisjoint

  • RegiãoRegion

EscopoScope

O componente mais importante da seleção é garantir que o usuário saiba em qual janela ele está trabalhando (ativação) e onde o foco está localizado (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 janelas no Windows, mas o esquema de ativação é o mesmo: interagir com uma janela leva 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 janelas de documentos 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 documentos, a janela ativa é indicada por uma guia de janela de documento chegando à frente e alterando sua cor 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 de guia ativa no Visual StudioActive tab selection in Visual Studio

Seleção de 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 ferramentas: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 da janela da ferramenta ativa no Visual StudioActive tool window selection in Visual Studio

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

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

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

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

ContextoContext

O Visual Studio foi projetado para manter um conceito forte de contexto, mantendo o controle 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. Somente uma janela está ativa, seja uma ferramenta ou janela de documento.Only one window is active, whether it is a tool or document window. No entanto, a janela do documento na extremidade superior sempre retém uma seleção latente.However, the topmost document window always retains a latent selection. Embora o foco possa estar em uma janela de ferramentas, a janela do documento que foi ativada pela última vez exibe uma seleção, 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 que eles estavam editando, mostrando que o Visual Studio manteve seu estado para que eles possam retornar e mudar diretamente entre janelas de ferramentas e janelas de documentos.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 a aparência descritas na página mouse e ponteiros das diretrizes de interação da experiência do usuário do 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 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 do 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 configuração de taxa de intermitência do cursor na guia velocidade do applet do teclado no 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

A seleção dentro do editor de texto é apenas contígua.Selection within the text editor is contiguous only. As seleções de texto não são permitidas, mas devem ser abordadas em editores de 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 um feixe.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. Pressionar o botão do mouse para baixo inicia um realce de seleção e soltar o botão do mouse termina o realce da 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)

O Visual Studio dá suporte a seleções de região no editor de texto, e isso é chamado de seleção de caixa.Visual Studio supports region selections in the text editor, and this is called box selection. A seleção de caixa permite que o usuário selecione uma região de texto que não segue o fluxo de texto regular.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. A seleção de caixa é iniciada mantendo a tecla Alt pressionada enquanto arrasta com o mouse.Box selection is initiated by holding down the Alt key while dragging with the mouse. A seleção de caixa também pode ser iniciada mantendo as teclas ALT e SHIFT pressionadas ao usar 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. A seleção de caixa 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.

Caixa de (regional) 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ções e, em seguida, examinar o 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 gráficaGraphical selection

InteraçãoInteraction

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

  • O modelo de seleção principal do editor.The editor's primary selection model. Os editores que contêm objetos gráficos também podem ser usados para editar 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 baseado em texto que também dá suporte ao posicionamento de objetos gráficos, como o Visual Studio XAML designer.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. O suporte a vários tipos de objeto pode afetar a forma como o usuário seleciona grupos compostos de diferentes tipos de objetos.Supporting multiple object types can affect how the user selects groups made up of different types of objects.

  • Suporte para Estados de seleção primário e secundário.Support for primary and secondary selection states. Um editor pode fornecer Estados de seleção primários e secundários para que os objetos possam ser editados de forma não ativa, alinhados entre si, redimensionados 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 à edição in-loco.In-place editing support. Os editores também podem permitir que o conteúdo de seus objetos gráficos seja 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 no interior 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. A 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 ao 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 com o mouseMouse interaction

EntradaInput ResultResult
Clique em um objeto não selecionadoClick an unselected object Seleciona o objeto e exibe uma linha tracejada e alças de seleção, se o objeto for 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 eventos padrão, se apropriado.Opens the code behind the object for editing, and might insert a default event handler, if appropriate.
Apontar para um objetoPoint to an object Altera o ponteiro para o cursor de movimentação.Changes the pointer to the move cursor. A aparência do objeto, como sua luminosidade ou cor, pode ser alterada.The object's appearance, such as its luminosity or color, might change.
Apontar 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 dão suporte à rotação, alguns identificadores de seleção podem alterar o ponteiro para um cursor de rotação à medida que o ponteiro é posicionado de forma diferente (por exemplo, movido para fora) em relação à 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.
ArrastarDrag Mesmo que o objeto não esteja selecionado anteriormente, o altera o ponteiro para o cursor de movimentação e move o objeto.Even if the object is not previously selected, changes the pointer to the move cursor and moves the object.
O editor perde o focoEditor loses focus Desativa o modo de edição in-loco, embora o objeto retenha o conteúdo e a aparência que ele tinha durante seu último estado de operação/seleçã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 objetoObject selection Indicado por uma borda, linha pontilhada ou outro tratamento visualmente distinto para realçar o limite 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 por alças de seleção.Indicated by selection handles.

Um objeto redimensionável tem oito identificadores, representando cada direção na qual ele pode ser redimensionado.A resizable object has eight handles, representing each direction in which it can be resized. Menos identificadores poderão ser usados se o objeto só puder ser redimensionado 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 onde oito identificadores não seriam interativos, então 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. Os tamanhos de identificador devem ser vinculados à borda da janela e às métricas de borda com a função de API GetSystemMetrics para dimensionar em proporção à 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 redimensionamentosResize handles
Girar um objeto selecionadoRotate a selected object Alças de rotaçãoRotate handles

Interação do tecladoKeyboard interaction

EntradaInput ResultResult
TabTab 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 da esquerda para a direita ou de cima para baixo, dependendo do valor da propriedade TabIndex (ou equivalente), da ordem de criação do objeto e da 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 panorâmico enquanto a tecla é mantida.Activates panning mode while keystroke is maintained. A entrada adicional do mouse é necessária para deslocar 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 a tecla é mantida.Activates zoom mode while keystroke is maintained. A entrada adicional do mouse é 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.
Shift ou CTRLShift OR Ctrl Adiciona o objeto ao grupo de seleção.Adds the object to the selection group. CTRL também permite remover objetos individualmente do grupo de seleção.Ctrl also allows you to remove objects individually from the selection group.
DigiteEnter Executa o comando padrão para o objeto (geralmente aberto ou Edit).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 de direção 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 de direção pressionada, em incrementos maiores (por exemplo, 10 pixels de cada 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 + teclas de direçãoShift+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 de cada vez)Resizes the selected object(s) in the respective direction, in larger increments (for example, 10 pixels at a time)

Quando os usuários editam controles em vigor, pode fazer sentido que os objetos sejam redimensionados 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 editar um controle rótulo, o rótulo deverá 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 deverá 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 tiver muitos controles, isso se tornará uma tarefa atividades rotineiras e não-técnica.If the user has a lot of controls, this becomes a rote and unproductive task.

Contêineres gráficosGraphical containers

Em alguns casos, os editores gráficos fornecem contêineres para outros objetos gráficos, como o controle de painel de 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 o seu editor fornece contêineres para outros objetos gráficos, o modelo de seleção a seguir deve ser usado somente para o contêiner (os objetos dentro do contêiner seguem o modelo padrão, conforme 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 ResultResult
Clique uma vez no contêinerSingle-click on the container Seleciona o objeto de contêiner sem selecionar diretamente nenhum dos objetos contidos.Selects the container object without directly selecting any of the contained objects. O contêiner pode ser movido e/ou redimensionado com a entrada padrão do mouse e do teclado (conforme descrito acima).The container may be moved and/or resized with standard mouse and keyboard input (as described above). Os objetos contidos são movidos em relação ao contêiner, mas os objetos contidos não são redimensionados, a menos que também sejam selecionados 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 limite do contêinerHover over the container's boundary region Transforma o mouse no cursor de movimentação, 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 limite do contêinerDrag the container's boundary region Altera o mouse para o cursor de movimentação e move o contêiner (e os objetos contidos dentro).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 ser selecionado primeiro com um único clique.The container cannot be moved without first being selected with a single click.
Clique uma vez em um objeto dentro do contêinerSingle-click on an object within the container Anula a seleção do contêiner (se 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 e/ou contêiner contidoShift+click OR Ctrl+click on a contained object and/or container Adiciona o objeto clicado a uma seleção ou grupo de 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 será 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 aderir ao modelo de seleção básico, 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 designer de Windows Forms, os usuários esperavam acesso contínuo aos objetos contidos sem etapas intermediárias (impostas pelo objeto de 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).

Seleções de separação e de regiãoDisjoint and region selections

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

Seletores de região e não contíguosDisjoint and region selectors

Seleção não contíguoDisjoint selection

Os editores gráficos também devem fornecer seleções de região com um indicador de seleção de tipo de letreiro.Graphical editors should also provide region selections with a marquee-type selection indicator. Se o editor gráfico oferecer suporte a outros tipos de objeto (como texto), as seleções de região poderão não ser 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.

Seleção de letreiroMarquee selection

Seleção de letreiroMarquee selection

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

Alguns editores de objeto gráfico permitem que o usuário edite ou alinhe objetos em grupos.Some graphical object editors allow the user to edit or align objects in groups. Nesse caso, o conceito de seleções primárias e secundárias 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 as 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 principal tem um tratamento visual distinto das seleções secundárias para indicar qual objeto é primário:The primary selection has a distinct visual treatment from the secondary selection(s) to indicate which object is primary:

Seleção 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 quadrados desenhados em um padrão retangular ao redor da caixa delimitadora do objeto.The selection handles are squares drawn in a rectangular pattern around the bounding box of the object. O gráfico a seguir mostra exemplos dos vários Estados que um objeto gráfico pode ter com identificador, 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 à borda da janela e às métricas de borda usando a API GetSystemMetrics .The size of the handles should be tied to window border and edge metrics using the GetSystemMetrics API.

EstadoState AparênciaAppearance Detalhes visuaisVisual details
Não selecionadoUnselected PadrãoDefault Estado do botão padrãoDefault button state
Seleção primáriaPrimary selection RedimensionávelResizable Seleção primária com alças de redimensionamentoPrimary selection with resize handles
Seleção primáriaPrimary selection Não redimensionávelNot resizable Seleção primária sem identificadores de redimensionamentoPrimary selection without resize handles
Seleção primáriaPrimary selection BloqueadoLocked Seleção primária bloqueadaPrimary selection locked
Seleção secundáriaSecondary selection RedimensionávelResizable Seleção secundária com alças de redimensionamentoSecondary selection with resize handles
Seleção secundáriaSecondary selection Não redimensionávelNot resizable Seleção secundária sem identificadores de redimensionamentoSecondary selection without resize handles
Seleção secundáriaSecondary selection BloqueadoLocked Seleção secundária bloqueadaSecondary selection locked
IU ativaUI active PadrãoDefault Estado ativo da interface do usuárioUI active state

Exibir modelos de seleçãoView selection models

Exibição em árvoreTree view

A seleção em um modo de exibição de árvore é mostrada com um realce simples.Selection in a tree view is shown with a simple highlight. Se o usuário clicar em um nome de nó ou um ícone de nó, o nó será selecionado.If the user clicks on a node name or a node icon, the node becomes selected. Os glifos triangulares à esquerda do nó expandem ou contratam o 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 está em um filho desse nó, a seleção é movida 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

As exibições de árvore podem dar suporte a seleções contíguas e não interjunção, mesmo em vários níveis na árvore.Tree views can support contiguous and disjoint selections, even across multiple levels in the tree. Várias seleções contíguas ou não interjunçãos devem ser feitas em nós de árvore visíveis.Contiguous or disjoint multiple selections must be made on visible tree nodes. Se um nó for recolhido, a seleção não contíguo será perdida e o nó que foi recolhido obterá 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, fica 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 deve ser aplicada ao pai, embora possa haver casos em que faz sentido que uma operação seja aplicada ao pai e a 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 uma interface do usuário adicional durante a operação, como uma caixa de seleção ou diálogo de confirmação para tornar a opção "aplicar a todos os filhos" explícita ao 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 os nós na árvore oferecerem suporte à renomeação, a renomeação deverá ser feita em vigor.If nodes in the tree support renaming, renaming should be done in place. A operação in-loco deve ser a 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 cobre 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ó representar um arquivo, o nome do arquivo deverá conter a extensão.If the node represents a file, the filename should contain the extension. O realce de seleção deve incluir apenas o corpo do 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 ResultResult
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
Clicando 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 dentro de listas e controles de gradeSelection within lists and grid controls

O conceito-chave na seleção de lista é que ele é baseado em linha, o que significa que quando uma seleção é feita, a linha inteira é 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, as grades podem permitir que células específicas sejam selecionadas sem afetar nenhum outro aspecto da linha.By contrast, grids can allow specific cells to be selected without affecting any other aspect of the row. As grades também podem conter uma hierarquia de linhas aninhadas (como em um árvore) que permitem que branches inteiros da hierarquia sejam selecionados e desmarcados pela 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. A seleção nas 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 em torno da linha editável atual ou da 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).

Observação

O foco e a seleção são conceitos diferentes.Focus and selection are different concepts. Focus é uma indicação de qual elemento de interface do usuário é destinado a receber entrada não explicitamente direcionada a outro objeto, enquanto a seleção refere-se ao estado da inclusão de um objeto em um conjunto de objetos nos quais as operações subsequentes 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.

Seleções em listas podem ser contíguas, não junção ou região.Selections in lists may be contiguous, disjoint, or region. Quando várias seleções são permitidas, a seleção contígua e não-junção sempre deve ser suportada, enquanto o suporte para seleções de região (caixa) é opcional.When multiple selections are allowed, contiguous and disjoint selection should always be supported, while support for region (box) selections is optional. As seleções de região são iniciadas arrastando no 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 VizinhaContiguous
ListaList Não contíguoDisjoint
ListaList RegiãoRegion

Clicar uma vez em uma lista seleciona a linha na qual o clique ocorreu.Clicking once on a list selects the row where the click occurred. Se o usuário for clicar em uma célula de lista que dá suporte à edição in-loco, a célula também será imediatamente ativada para edição in-loco.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 será selecionada imediatamente e mostrará 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:

  • Iniciará uma seleção de região se a lista der suporte e o mouse-Down estiver em 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 célula de lista ou linha oferece suporte a uma origem de arrastarInitiates 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 a edição in-loco é permitida, há dois modelos básicos: controle de edição simples e seletor de propriedade.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 entrada do usuário assim que a edição in-loco é ativada.With a simple edit control, the content is highlighted and ready for user input as soon as in-place editing is activated. Onde um seletor de propriedade é implementado, o botão que invoca o seletor de propriedade é exibido quando o modo de edição in-loco é 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 do seletor deve ser justificado à direita na célula.The picker button should be right-justified in the cell. Para obter exemplos de edição in-loco, consulte a janela Propriedades e lista de tarefas no Visual Studio.For in-place editing examples, see the Properties Window and Task List in Visual Studio.

Suporte de tecladoKeyboard support

O suporte do teclado para 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:

  • As teclas de direção navegam na lista, selecionando cada linha/célula à medida que 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 seguida por barra de espaços alterna entre adicionar e remover itens de lista da seleção, criando uma seleção não junção.Ctrl + arrow followed by Spacebar toggles between adding and removing list items from the selection, creating a disjoint selection.

  • Para grades que contêm hierarquias aninhadas, a tecla de seta para a direita expande uma linha pai e a tecla de seta para a esquerda recolhe uma.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 forem 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 da lista (geralmente aberto).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.

Configurações de persistência e salvamentoPersistence and saving settings

Visão geralOverview

Embora cada componente de software no Visual Studio seja geralmente responsável por seu próprio Estado e persistência, o Visual Studio salva automaticamente as configurações em alguns casos, como com tamanhos e posições 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 configurações que exigem um usuário explícito ou uma ação programada 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 à linha de códigoA user shortcut associated with the line of code
Quando o projeto é salvoWhen the project is saved O arquivo de Opções do usuário (. suo) para o projetoThe user options (.suo) file for the project
caixa de diálogoDialog O local da caixa de diálogo, se tiver sido movidoThe location of the dialog, if it had been moved

A exibição que o usuário usou pela última vez na caixa de diálogoThe view that the user last used in the dialog
Quando a caixa de diálogo fecharWhen the dialog closes

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

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

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

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

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

A exibição do documentoThe view of the document

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

Referências a diretórios em 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 a arquivosReferences to files
Quando o projeto ou a solução é salvaWhen the project or solution is saved O arquivo da solução (. sln)The solution (.sln) file
Configurações em ferramentas > opçõesSettings in Tools > Options Personalizações do tecladoKeyboard customizations

Personalizações da barra de ferramentasToolbar customizations

Esquemas de corColor schemes
Quando a caixa de diálogo ferramentas > opções for fechadaWhen the Tools > Options dialog closes

Quando a sessão do Visual Studio terminaWhen 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 isso, determina se uma configuração está sendo salva na memória (durante a sessão), salva em disco (entre sessões como uma configuração de registro), como parte do próprio arquivo de projeto ou de solução, como parte do arquivo de Opções de solução (. suo) ou como um arquivo de configurações personalizado que só esse componente de software sabe.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 em que as configurações podem ser salvas.The table above shows several events at which settings can be saved. No entanto, há outras ocasiões em que você talvez queira 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 do design para o modo de depuraçãoWhen the user switches from design to debug mode

  • Quando o usuário faz 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 configurado 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 que consiste na lista de janelas de ferramentas presente e no modo como elas são organizadas.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 gerenciado pelo IDE (IDE Windows), as informações de layout são persistidas por usuário, portanto, quando um usuário inicia o IDE, o layout da janela é exibido da mesma forma que quando o Visual Studio foi encerrado pela última vez.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 de janelas do IDE são persistidos em um arquivo de opções personalizado em formato XML.The state and position of IDE windows is persisted in a custom options file in XML format. As janelas de ferramentas criadas por pacotes carregados no IDE persistem 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 específicos de perfilProfile-specific layouts

Cada perfil inclui layouts de janela de ferramentas, organizados de uma maneira familiar a pessoas de desenvolvedor específicas (Visual C++ os desenvolvedores esperam ver a Gerenciador de soluções no lado esquerdo do IDE, enquanto os desenvolvedores de C# esperam ver a 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íficos de 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 de pacote deve determinar o layout da janela mais adequado para a experiência do cliente, sabendo que as alterações feitas pelo usuário para a configuração da janela serão persistidas.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 por toqueTouch input

Os usuários estão cada vez mais usando produtos de desenvolvimento da Microsoft em dispositivos de toque.Users are increasingly using Microsoft development products on touch devices. No entanto, há barreiras que dificultam o uso de ferramentas de desenvolvimento em dispositivos sensíveis ao toque.However, there are barriers that make it difficult to use development tools on touch devices. Os usuários esperam que nossos produtos forneçam uma experiência de toque confiável e precisa.Users will expect our products to provide a reliable and precise touch experience. A intenção dessas diretrizes é informar as decisões sobre quais recursos de toque incorporar e incentivar uma experiência de toque consistente no Visual Studio e em 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 níveis de experiência a seguir destinam-se a servir como um guia para ajudar as equipes a decidir quais recursos de toque oferecer com base no 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.

  • A experiência básica é para as equipes que desejam fornecer recursos de toque para que não haja nenhum inatividade em todo o trabalho.The basic experience is for teams that want to provide touch capabilities so there are no dead ends throughout their work.

  • A experiência otimizada é para as equipes que desejam fornecer os recursos de toque mais comuns (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).

  • A experiência elevada é para as equipes que desejam adicionar recursos como gestos ou outros recursos opcionais que podem tornar seu aplicativo amigável para o toque primeiro.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 elevadaElevated experience
Permite que os usuários...Enables users to ... Corrigir a leitura de código e de solução/nível de projeto sem inatividadeFix code and solution/project-level reading without dead ends Executar tarefas de manutenção, refactores e navegaçãoPerform maintenance, refactors, and navigation tasks Opere em uma experiência consistente, intuitiva e fluida com confiançaOperate in a consistent, intuitive, and fluid experience with confidence
EditorEditor Panorâmica e seleção de toqueTouch panning and selection

Toque de ScrollBar para saltar e pressione + arrastarScrollbar touch to jump and press+drag
Pinçar zoomPinch zoom

Rolagem rápidaFast scroll

SeleçãoSelection

Fácil utilização do menu de contextoEasy use of context menu
Principais janelas de ferramentasTop tool windows Listar movimento panorâmicoList panning

Seleção de itemItem selection

Toque de ScrollBar para saltar e pressione + arrastarScrollbar touch to jump and press+drag
Fácil rolagem e seleção de itensEasy item scrolling and selection
WindowingWindowing Redimensionar janelaResize window

Acesso rápidoQuick access
Bem-documentoDocument well Navegação fácil entre arquivos abertosEasy navigation between open files
GestosGestures Garantir que os gestos comuns funcionem pelo IDEEnsure common gestures work across the IDE Ações baseadas em gestosGesture-based actions

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

GestosGestures

Os gestos fornecem aos usuários um atalho para comandos que, de outra forma, poderiam 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 sobre gestos de toque comuns para aplicativos de área de trabalhoe siga estas diretrizes para a maioria dos gestos, incluindo gestos simples, como movimento panorâmico 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.