Como Criar GUI no Visio

...

O Microsoft Visio pode ser usado para criar muitos tipos de designs de GUI.

O Microsoft Visio 2010 é uma ferramenta de design gráfico que pode ser usada para criar diagramas, elementos de interface, menus de navegação e outros objetos visuais. Ele oferece uma ampla gama de ferramentas para criar o design de uma interface gráfica de usuário (GUI). O diagrama mostrará como o aplicativo ou interface da Web aparecerá em sua forma final. Desenvolver uma GUI no Visio não é muito difícil e os designs podem ser exportados como arquivos PDF. Siga algumas diretrizes para aprender como construir uma maquete de estrutura de arame GUI básica para um site.

Passo 1

Abra o Microsoft Visio. Crie um novo desenho clicando no ícone de desenho em branco. Clique no botão "Criar".

Vídeo do dia

Passo 2

Clique na janela Formas no lado esquerdo da tela. Selecione "Mais formas". Selecione "unidades básicas de formas americanas". Clique em “Quick Shapes”.

etapa 3

Crie uma caixa de título clicando com o botão direito do mouse na forma da caixa retângulo e arrastando a forma para a área de desenho. Redimensione a caixa para cobrir cerca de 15 por cento da área superior do desenho.

Passo 4

Crie uma caixa de menu de navegação clicando com o botão direito do mouse na forma da caixa retângulo e arrastando a forma abaixo da caixa do cabeçalho. Redimensione a caixa para ter uma altura de cerca de meia polegada e a mesma largura da caixa do cabeçalho.

Etapa 5

Crie uma grande caixa de corpo principal clicando com o botão direito do mouse na forma da caixa retângulo e arrastando-a para baixo da caixa do menu de navegação. Redimensione a caixa para ter a mesma largura que as caixas de cabeçalho e menu de navegação e para cobrir a parte inferior da área de desenho.

Etapa 6

Crie duas caixas retangulares clicando com o botão direito do mouse na forma da caixa retângulo e arrastando a forma duas vezes para a área de desenho. Redimensione cada caixa para caber na metade da caixa do corpo principal. Mova cada caixa para caber adjacente uma à outra dentro da caixa do corpo principal.

Etapa 7

Crie campos de texto representando links de navegação clicando no botão "Um Texto" na parte superior da barra de navegação. Selecione uma área dentro da caixa de navegação para criar um pequeno campo de texto clicando com o botão esquerdo do mouse. Mova o mouse para redimensionar o campo para o comprimento desejado. Digite o texto para dizer "Casa".

Etapa 8

Crie mais quatro campos de texto usando o botão esquerdo do mouse. Digite "Item de menu" em cada caixa. Redimensione cada caixa para corresponder ao tamanho da caixa "Home".

Etapa 9

Selecione uma área dentro da caixa de cabeçalho principal e crie um campo de texto com a descrição "Cabeçalho principal".

Etapa 10

Crie uma caixa de texto dentro de cada caixa localizada dentro da área da caixa de conteúdo principal do desenho. Dê a cada caixa de texto uma descrição, como "Área de conteúdo". Redimensione cada caixa de texto para ter o mesmo tamanho. Selecione o botão "Ponteiro" no menu de navegação superior.

Etapa 11

Salve o desenho clicando em “Arquivo” no menu de navegação superior e selecionando “Salvar como”.

Dica

Embora o Visio não venha com estênceis ou objetos de protótipo de GUI, empresas terceirizadas oferecem essas ferramentas para download. Se você pretende usar o Visio para criar um design colaborativo, lembre-se de que o formato de arquivo de desenho do Visio não é compatível com a maioria dos pacotes de software de desenho.

Aviso

Desenhos excessivamente complexos podem fazer com que o Visio desacelere na atualização de um desenho após fazer uma alteração.