em
Como criar Protótipos Interativos com o Visio

Como criar Protótipos Interativos com o Visio

Logo Visio

Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.

Os PDF’s são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:

1. Crie links nas páginas de primeiro plano, não nas de segundo plano – utilize os stencils do documento para gerenciar suas modificações.
É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas – topo, conteúdo, navegação – em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:
  • 1.1 – Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
  • 1.2 – Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
  • 1.3 – Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
  • 1.4 – Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
  • 1.5 – Arraste os elementos agrupados de navegação ao painel de Stencils.
  • 1.6 – Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: “NavBar”).
  • 1.7 – Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
  • 1.8 – Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.
2. Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.
Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.
O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat
Leve-o ao nível seguinte.
Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat

Referências

Comentários

  1. Boa alternativa e ótimo post!

    por Neto Responder
  2. Inglés: Thank’s for link my website. When I saw your link, in a brazilian web, it was wonderful. I hope the post was helpfully.

    Español: Gracias por linkear mi web. Cuando vi vuestro enlace, en una web brasileña, fue maravilloso. Espero que el post haya ayudado a alguien.

    Un saludo,

    Ricardo Gil

    por Ricardo Gil Responder
  3. Muito bom o post. Gostaria de aproveitar para lançar aqui uma dúvida. Percebi que existem alguns componentes (eletrônicos) no Visio que permitem sua alteração de uma forma bem prática. Como as portas lógicas onde é possível selecionar o seu número de entradas e também saídas. A dúvida é a seguinte: como criar tais objetos com essa mesma característicaw

    por Dorvilê — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>