Criar um diagrama delineado para interfaces do usuário

Criar um diagrama delineado para interfaces do usuário

Importante :  Este artigo foi traduzido por um sistema de tradução automática, leia o aviso de isenção de responsabilidade. Para sua referência, veja a versão em inglês deste artigo aqui.

O modelo delineado destina-se para a criação de Media fidelidade simulações de aplicativos de software. O modelo pode ser usado para uma ampla variedade de tipos de software, como aplicativos para Windows, Internet e dispositivos móveis.

  1. Comece clicando no estêncil Caixas de Diálogo e arrastando um Formulário de aplicativo ou um Formulário de caixa de diálogo para a página. Adicione outras formas desse estêncil para descrever a estrutura básica da IU.

  2. Clique no estêncil Barras de Ferramentas para adicionar menus e outros ícones de aplicativo.

  3. Use as formas dos outros quatro estênceis padrão (Controles, Cursores, Ícones Comuns e Ícones da Web e de Mídia) para preencher a IU e mostrar a funcionalidade do aplicativo.

Algumas das formas delineadas têm propriedades personalizáveis. Aqui estão algumas dicas sobre como usar essas formas.

O que você deseja fazer?

Criar caixas de diálogo

Criar barras de ferramentas

Adicionar controles a formulários

Criar caixas de diálogo

Forma

Dicas

Formulário do aplicativo

Um contêiner que fornece os limites de todo o aplicativo. Um ponto de conexão no canto superior direito mantém as formas do botão do Windows no lugar.

Formulário de caixa de diálogo

Um contêiner para armazenar ícones, controles e texto em caixas de diálogo. Um ponto de conexão no canto superior direito mantém as formas do botão do Windows no lugar.

Botão do Windows

Selecione qual botão você deseja representar usando esta forma: Fechar, Maximizar, Minimizar ou Restaurar (os botões que ficam geralmente no canto superior direito dos aplicativos e dos formulários de diálogo). Selecione qual botão deseja soltando a forma no formulário, também é possível clicar com o botão direito do mouse na forma e clicar em Tipo de Botão para alterá-lo posteriormente.

Altere o sombreamento do botão clicando com o botão direito do mouse na forma e em Mostrar Ativo.

barra de status

Um contêiner para itens de barra de status, ícones e divisores. Os itens de barra de status são barras de tamanho médio às quais você pode adicionar texto clicando duas vezes nelas. Elas também têm um ponto de conexão central para adicionar um ícone, uma barra de progresso, um controle deslizante ou outra forma. Os ícones da barra de status são barras curtas com um ponto de conexão central no qual é possível soltar ícones dos Ícones Comuns ou dos Ícones de Web e Mídia. Você pode soltar divisores de barra de status entre outras formas para tornar as divisões visíveis.

Barra de rolagem

Clique com o botão direito do mouse para designar como vertical ou horizontal e para definir o comprimento do controle deslizante (tamanho da miniatura). Use a alça de controle amarela para mover o controle deslizante pela extensão do comprimento da barra de rolagem.

Elemento de redimensionamento

Pode ser usado somente em barras de rolagem e de status. Uma caixa de diálogo será exibida para que você possa definir o tipo depois de soltá-lo na página.

Barra de guias

Um contêiner para itens da guia. Após adicionar um Item de guia superior ou um Item de guia inferior, você pode adicionar mais clicando com o botão direito do mouse no item da guia ou clicando na seta azul Inserir que aparece com realce laranja quando você mantém o ponteiro sobre um canto da guia.

Altere o sombreamento da guia clicando com o botão direito do mouse na forma e em Definir Guia Ativa.

Quando a barra de guias é selecionada, você pode usar a guia Formato em Ferramentas de Contêiner para alterar o estilo da barra de guias.

Início da página

Criar barras de ferramentas

Forma

Dicas

Barra de menu

Um contêiner para itens da Barra de menus. Depois de adicionar um item da Barra de menus, clique com o botão direito do mouse no item para definir o estado (como habilitado ou selecionado), o tipo (normal ou suspenso) e se espaço deve ser adicionado para um ícone. Você também pode usar o menu de atalho para adicionar mais itens da Barra de menus ou pode clicar na seta azul Inserir.

Menu suspenso

Um contêiner para itens do menu. Depois de adicionar um item de menu, clique com o botão direito do mouse no item para definir o estado (como habilitado ou selecionado), o tipo (como normal ou botão de opção) e se deseja defini-la como largura de menu. Você também pode usar o menu de atalho para adicionar mais itens de menu ou pode clicar na seta azul Inserir.

Você pode conectar um menu suspenso a um item da Barra de menus para mostrar um menu aberto. Os itens da Barra de menus têm pontos de conexão no canto inferior que podem ser conectados ao canto superior de um menu suspenso.

Início da página

Adicionar controles a formulários

Forma

Dicas

Hiperlink

Quando você solta uma forma de hiperlink na página, a caixa de diálogo Hiperlinks é exibida para que você possa definir o destino do link.

Botão

Clique com o botão direito do mouse na forma Botão para definir o estado ou a aparência do Botão (por exemplo, habilitado ou selecionado).

Caixa de listagem

Um contêiner para itens da caixa de listagem. Clique com o botão direito do mouse na caixa de listagem para definir a direção da lista (por exemplo, de cima para baixo ou da esquerda para a direita). Depois de adicionar um item de caixa de listagem, clique com o botão direito do mouse no item para definir o estado (como habilitado ou selecionado) e para definir espaços reservados, se você desejar adicionar espaço extra para o item, por exemplo para adicionar um ícone. Você também pode usar o menu de atalho para adicionar mais itens de caixa de listagem ou pode clicar na seta azul Inserir.

Quando a caixa de listagem estiver selecionada, você poderá usar a guia Formatar em Ferramentas de Contêiner para alterar o estilo da caixa de listagem.

Caixa de seleção

Clique com o botão direito do mouse na caixa de seleção para definir a Escolha (por exemplo, Selecionado ou Não Selecionado) e o Estado (como Habilitado ou Em foco

Controle de árvore

Um contêiner para itens do Controle de árvore. Depois de adicionar um item de Controle de árvore, clique com o botão direito do mouse no item para controlar o recuo e definir propriedades da árvore, como o estado expandido ou recolhido e espaços reservados.

Você também pode usar o menu de atalho para adicionar mais itens de controle de árvore ou pode clicar na seta azul Inserir.

Quando o controle de árvore é selecionado, você pode usar a guia Formato em Ferramentas de Contêiner para alterar o estilo do controle de árvore.

Controle deslizante

Clique com o botão direito do mouse no controle deslizante para definir propriedades como número e posição das marcas de escala. Use a alça de controle amarela para mover o controle deslizante.

Barra de progresso

Use a alça de controle amarela para mover o indicador de progresso.

Calendário

Quando você solta um calendário na página, uma caixa de diálogo aparece para que você possa definir o mês e o ano. Para alterar a configuração mais tarde, clique com o botão direito do mouse na forma e clique em Configurar.

Início da página

Observação : Aviso de Isenção de Tradução Automática: Este artigo foi traduzido por computador, sem intervenção humana. A Microsoft oferece essas traduções automáticas para ajudar as pessoas que não falam inglês a aproveitar os textos escritos sobre produtos, serviços e tecnologias da Microsoft. Como este artigo foi traduzido automaticamente, é possível que contenha erros de vocabulário, sintaxe ou gramática.

Expanda suas habilidades
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×