Layout para Visual Studio
A maioria das caixas de diálogo do Visual Studio são layout de caixa de diálogo do utilitário, que são as caixas de diálogo sem tema que seguem os princípios padrão de layout de caixa de diálogo da área de trabalho do Windows. À medida que o Visual Studio se move para atualizar sua interface do usuário, algumas das caixas de diálogo mais proeminentes têm um novo design que as estabelece como experiências que definem o produto. Esses layouts de caixa de diálogo temáticos têm uma aparência temática.
Layout da caixa de diálogo do utilitário
Todos os controles dentro de uma caixa de diálogo de utilitário devem começar na parte superior/esquerda e fluir para baixo.
Nunca centralize os controles em uma caixa de diálogo para preencher uma área grande.
Use a fonte do ambiente para todo o texto da caixa de diálogo. Ao escrever uma especificação visual, especifique a fonte do ambiente em vez de selecionar uma fonte e um tamanho específicos. Consulte A fonte do ambiente.
Use espaçamento e posicionamento de controle consistentes para apoiar o objetivo de qualidade no artesanato.
As caixas de diálogo podem se tornar mais complexas a partir de um número maior de controles, uma justaposição exclusiva de controles ou ambos. Para essas situações complexas, permita espaço adequado entre agrupamentos de controle para dar ao usuário um fluxo lógico para analisar.
Exemplos de layout de caixa de diálogo do utilitário
Todas as dimensões são expressas como pixels.
Figura 08.01-a: Diretrizes de espaçamento para caixas de diálogo de utilitário com rótulos acima dos controles
Figura 08.01-b: Diretrizes de espaçamento para caixas de diálogo de utilitários com rótulos à esquerda dos controles
Detalhes do layout
Margens
Todas as caixas de diálogo devem ter uma borda de 12 pixels ao redor de todas as bordas.
As margens dentro de um quadro de grupo devem estar a 9 pixels da borda do quadro.
As margens dentro de um controle de guia devem estar a 6 pixels da borda do controle de guia.
Botões de comando
Os botões de comando operam no quadro de diálogo, não no conteúdo. Eles devem ser colocados na parte inferior direita e devem ter espaço variável suficiente acima para definir os botões distintamente separados.
Se houver botões horizontais que operam na caixa de diálogo, a configuração do botão de comando alternativo é uma pilha vertical no canto superior direito. Consulte os botões de comando Interior abaixo.
O espaço à esquerda dos botões de comando (canto inferior esquerdo/centro da caixa de diálogo) é considerado parte da "banda" de controles de operação da caixa de diálogo. A única coisa que deve invadir esse espaço é um link de Ajuda que seja relevante para a tarefa ou caixa de diálogo geral.
Os botões de comando devem ter 75x23 pixels.
Os botões de comando devem ter 6 pixels de distância.
Figura 08.01-c: Alinhamento básico do botão
Rótulos
Alinhe todos os rótulos à esquerda.
Para rótulos que ficam acima de um controle, eles devem se alinhar à esquerda precisamente com o controle abaixo dele e a parte inferior do rótulo deve estar 5 pixels acima da parte superior do outro controle (por exemplo, uma caixa de combinação).
Para rótulos que ficam à esquerda dos controles, a largura mínima entre o rótulo e o controle de entrada é de 10 pixels. Uma segunda coluna implícita deve ser estabelecida para alinhar as caixas de texto, caixas de combinação ou outros controles.
Os rótulos são maiúsculas e minúsculas e são seguidos por dois pontos. Consulte Estilo de texto.
Distância entre os controles
Controles de pilha razoavelmente. Não há uma diretriz absoluta para o espaçamento entre controles empilhados. A estanqueidade entre os controles pode variar ligeiramente entre as caixas de diálogo. O espaçamento recomendado é de 20 pixels para pares de controle/rótulo verticais e 9 pixels para pares de controle/rótulo horizontais. O espaçamento mínimo de controle para pares horizontais é de 6 pixels.
Figura 08.01-d: Recomendações para a distância entre controlos
Recuo de controle
Quando os controles são aninhados, alinhe os controles internos horizontalmente com a borda esquerda do controle acima, geralmente o rótulo.
Figura 08.01-e: Alinhamento do controle aninhado
Largura de controle
A largura de uma caixa de texto ou outros controles semelhantes não deve ser maior do que a entrada média para o campo. A palavra inglesa média tem cinco caracteres. Por exemplo, uma caixa de texto que requer um nome de caminho longo deve ser tão longa quanto o layout horizontal permitir, enquanto uma lista suspensa para nomes de plataforma deve ser apenas um comprimento que permita a entrada mais longa.
Texto auxiliar
Uma caixa de diálogo pode exibir texto auxiliar que fornece mais informações sobre a finalidade da caixa de diálogo. Isso normalmente fica no topo e pode ser de 1 a 2 frases.
O comprimento da linha deve ser uma largura confortável para um usuário analisar e ler. Uma caixa de diálogo média não deve ter mais de 550 pixels de largura.
Botões de comando internos
Em caixas de diálogo mais complexas, um controle interno pode ter seus próprios botões relacionados, o que pode afetar onde os botões de confirmação da caixa de diálogo estão localizados.
Use um alinhamento vertical (coluna) dos botões internos quando OK/Cancelar estiver orientado horizontalmente no canto inferior direito.
Use um alinhamento horizontal (linha) dos botões internos quando OK/Cancelar estiver orientado verticalmente no canto superior direito. Essa situação é menos comum.
O tamanho do botão interno deve ter como alvo o tamanho padrão do botão de 75x23 pixels, correspondendo ao tamanho dos botões OK/Cancel quando possível. Se um rótulo de botão fizer com que o botão exceda o tamanho padrão do botão, os outros botões nesse conjunto deverão se alinhar com esse tamanho maior.
Figura 08.01-f: Botões internos verticais com OK/Cancel horizontal
Figura 08.01-g: Botões internos horizontais com OK/Cancel vertical
[Procurar...] botão
[Procurar...] botões que seguem uma caixa de texto devem soletrar "Procurar..." na íntegra, incluindo as reticências. Se o espaço estiver apertado ou houver vários botões [Procurar...] na tela, o botão pode ser reduzido a apenas as reticências.
Layout de caixa de diálogo temático
As caixas de diálogo temáticas no Visual Studio têm uma aparência mais clara e oferecem mais espaço em branco. A tipografia fornece mais ênfase e interesse, oferecendo mais espaçamento entre linhas abertas e uma variação de tamanhos e pesos de fonte. Sempre que possível, as barras cromadas e de título foram reduzidas ou removidas. O layout dessas caixas de diálogo deve seguir este padrão básico:
O plano de fundo da caixa de diálogo é branco.
Há uma borda de regra de 1 pixel em um cinza de valor médio.
O título da caixa de diálogo não fica mais em uma barra de título, mas fornece interesse visual e ênfase em um tamanho de ponto maior. (Consulte a seção de tamanho da fonte em Estilo de texto.)
Os rótulos associados a texto adicional, como uma descrição, devem ser fonte Ambiente + Negrito.
As colunas interiores são separadas por uma regra de 1 pixel em cinza claro.
Os links padrão não têm sublinhado. Os estados focalizados e pressionados têm uma mudança de cor mais sublinhado.
Os botões de confirmação (como OK/Cancelar) ficam no canto inferior direito.
Exemplos de layout de caixa de diálogo com tema
Figura 08.01-h: Caixa de diálogo temática
Figura 08.01-i: Caixa de diálogo temática - Dimensões
Figura 08.01-j: Caixa de diálogo temática - Fontes
Figura 08.01-k: Caixa de diálogo temática - Cores