Crie wireframes diretamente no board usando a biblioteca de componentes de wireframe da Miro. Ela inclui cerca de 60 padrões de design de interface do usuário que podem ser facilmente combinados para ajudar você a criar mockups exclusivos de baixa fidelidade sem esforço.
Wireframes na barra de ferramentas
Adicione wireframes à barra de ferramentas de criação para sua conveniência.
Como adicionar wireframes à barra de ferramentas
Como editar componentes de wireframing
Escolha de uma ampla gama de elementos para criar uma página da web, tela do produto ou layout de aplicativo móvel detalhado:
- Tipos de dispositivo (telefone, tablet, navegador)
- Componentes da interface do usuário (elementos interativos do seu wireframe)
- Fichas
- Listas
- Cartões
- Componentes da barra de progresso
- Ícones
Os tipos de dispositivo são quadros com as proporções dos dispositivos mais populares. Clique na borda do quadro para selecioná-lo e veja o menu de contexto. Aqui você pode alterar o tipo de dispositivo, alternar para exibir/esconder a pele do dispositivo, alterar a orientação e a cor de preenchimento.
Menu de tipos de dispositivo
💡 Os tipos de dispositivo são notas adesivas e agem como páginas que agrupam objetos, como nossos quadros usuais. Isso significa que quando você adiciona componentes e ícones ao wireframe, todo o conteúdo dentro dele se move e é copiado junto com o quadro.
Fio do dispositivo adesivo
💡Se você exportar o board como PDF, os wireframes do dispositivo também serão exportados como páginas PDF separadas.
Os componentes de interface do usuário interativa prontos permitem que você crie protótipos simples de baixa fidelidade de páginas do site e telas do produto em questão de minutos, mesmo que você não tenha muita experiência em design.
Como adicionar um componente da interface do usuário
Clique duas vezes para iniciar a edição. Dependendo do componente escolhido, você pode alterar o estilo, estado (marcado/não marcado, selecionado/desabilitado, texto/espaço reservado, etc.), alterar o ícone ou adicionar uma linha (nos botões do rádio, caixas de seleção).
Como editar um componente
Para chips, você pode definir a cor, o ícone e o estado (habilitado, desabilitado) e selecionar chip sólido ou chip de contorno.
Como adicionar um chip da biblioteca do Wireframes
Ao usar as listas, você pode selecionar uma lista primária ou segunda e definir a cor. Clique duas vezes na lista para definir um ícone.
Ao usar o componente Cartões, você pode escolher entre cartões sem imagem, com uma imagem à esquerda ou com uma imagem na parte superior e definir a cor e o ícone para um cartão.
Se você adicionar uma Barra de progresso, fique à vontade para selecionar uma barra de progresso retangular, redonda ou marco, escolha a cor e o estado (Iniciar, Em andamento, Concluído).
Aproveite a nossa biblioteca de ícones integrada — usá-la em conjunto com os componentes da interface do usuário ou por conta própria economizará tempo e ajudará a criar wireframes detalhados.
Na guia Ícones da galeria de wireframes, você verá os ícones e categorias de ícones mais populares (setas, comida, social, etc.)
Como editar um ícone
Funcionalidades poderosas para criar wireframes simples em minutos
- Feedback de qualquer dispositivo em tempo real
Colabore em wireframes em tempo real e receba feedback do seu time com várias opções de comunicação: comentários com @menções, videochamada integrada e muito mais.
- Integrações com Unsplash, IconFinder e mais
Use as integrações da Miro com o IconFinder e Unsplash para criar wireframes claros e abrangentes.
- Quadros, linhas de conexão e links
Use os quadros para mostrar várias telas da web ou do produto ou adicione um template de wireframe pronto a partir do seletor. Conecte-as com linhas e use a funcionalidade Link para para visualizar os fluxos do usuário e mover de uma tela para outra.
Biblioteca antiga
Por enquanto, os wireframes anteriores também podem ser encontrados na biblioteca de wireframes — role para baixo a lista para vê-los.
wireframes anteriores na galeria
⚠️ Observe que a versão anterior da galeria de wireframes será descontinuada.
Perguntas frequentes
- Posso expandir o componente
suspenso?— Não, no momento, isso não é possível. - Posso adicionar meus próprios elementos à galeria?—
Isso não é possível no momento, mas você pode adicionar ícones de conjuntos de ícones e formas ao board.