Neste artigo:
Em Introdução à Área de Trabalho, fornecemos uma visão geral do botão e das opções de Configurações.
Este artigo aborda como alterar o tema visual do editor. Também mostraremos como usar nossas réguas, guias, grades, ajuste e recursos de medição para ajudar a agilizar seu fluxo de trabalho ao posicionar objetos na página.
Explicaremos como mostrar ou ocultar todas essas opções – bem como nossos Hotspots, controles de Zoom e ferramentas de Colaboração ao Vivo.
O próximo artigo, Configurações Avançadas, abrange controles mais granulares que afetam o que o Editor exibe e como o cursor interage com os objetos na página.
Temas
Você pode alterar a aparência do editor mudando seu tema. O padrão é o modo Claro, mas você pode facilmente alternar para os modos Escuro, Clássico, Neutro ou Meia-noite. Você também pode escolher a opção Corresponder ao Sistema se quiser que o Moqups espelhe as configurações do seu navegador.
Para alterar o tema do editor:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Passe o cursor sobre a opção Tema e selecione entre as opções Claro, Escuro, Clássico, Neutro, Meia-noite ou Corresponder ao Sistema.
Réguas de página
As Réguas de Página aparecem ao longo das margens esquerda e superior da tela e são calibradas em pixels.
As réguas são habilitadas por padrão e devem ser exibidas se você quiser adicionar Guias Personalizados à sua página.
Para mostrar ou ocultar réguas:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione a opção Mostrar réguas no menu suspenso.
Guias personalizados
Adicionar Guias Personalizados à página pode ajudar sua equipe com o posicionamento relativo de objetos ou grupos de objetos.
Os guias são visíveis, como linhas azuis finas, apenas no modo de Edição, onde servem como ferramentas temporárias de layout e alinhamento. Eles não serão vistos quando você Visualizar ou Exportar sua página.
Quando você escolhe mostrar, ocultar ou limpar guias, faz isso para todos os colaboradores com direitos de edição.
Antes de adicionar guias personalizados, você precisa garantir que a opção Mostrar réguas do menu Configurações esteja selecionada e que as réguas estejam visíveis ao longo das margens da tela.
Os guias são adicionados e removidos de páginas individuais, mas a opção Mostrar guias personalizados se aplica ao projeto como um todo.
Adicionar Guias
Para adicionar um guia horizontal ou vertical:
Clique em qualquer ponto ao longo da régua
ou
Clique e arraste da régua em direção à página
Mostrar ou Ocultar Guias
No menu suspenso Configurações, a opção Mostrar guias personalizados é selecionada por padrão. Quando desmarcada, ela será reativada automaticamente se você clicar em qualquer lugar ao longo das réguas.
Para mostrar ou ocultar guias:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione a opção Mostrar guias personalizados no menu suspenso.
- Sua escolha se aplicará ao projeto como um todo.
Ajustar ou Remover Guias Individuais
Para ajustar guias individuais, passe o cursor sobre a linha azul até ver a ferramenta de ajuste, e então clique e arraste o guia para reposicioná-lo.
Para remover guias individuais de uma página, passe o cursor sobre a linha azul até ver a ferramenta de ajuste, e então clique e arraste o guia para fora da tela e além da régua.
Limpar Todos os Guias
Para remover permanentemente todos os guias de uma página selecionada:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione a opção Limpar guias no menu suspenso.
- Clique em OK para confirmar.
Se você quiser copiar seus guias para uma nova página, basta duplicar a página e usar o Painel de Camadas para remover o conteúdo original.
Grades de página
As grades podem acelerar seu fluxo de trabalho ao estabelecer estruturas claras e hierarquias visuais para os designs da sua equipe. Isso elimina as suposições – e mantém sua equipe consistente – ao dimensionar, posicionar e espaçar elementos em uma variedade de páginas, plataformas e mockups de dispositivos.
O Moqups tem duas configurações de grade, a Grade de Papel e a Grade de Layout, e elas podem ser usadas separadamente ou em combinação.
Os guias são visíveis apenas no modo de Edição, onde servem como ferramentas temporárias de layout e alinhamento. Eles não serão vistos quando você Visualizar ou Exportar sua página.
Se você quiser copiar suas grades para um novo projeto, basta duplicar o projeto no seu Painel e excluir as páginas originais.
Mostrar e Ocultar Grades
As Grades são desabilitadas por padrão. Antes de ajustar suas configurações, você precisará torná-las visíveis.
Para mostrar ou ocultar grades:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione as opções Mostrar grade de papel e/ou Mostrar grade de layout.
- Sua escolha se aplicará ao projeto como um todo.
Grade de Papel
A Grade de Papel parece papel quadriculado tradicional e consiste em quadrados ou retângulos subdivididos e ajustáveis.
Para ajustar as Configurações da Grade de Papel:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Certifique-se de que você já tem Mostrar grade de papel selecionado.
- Selecione a opção Configurações da grade de papel.
- Na janela pop-up Configurações da Grade de Papel, ajuste a largura e a altura dos blocos componentes da grade.
- Selecione a caixa de seleção Desenhar grade de papel sobre os objetos se quiser que a grade sobreponha seu design.
- Clique em Aplicar.
Grade de Layout
A Grade de Layout segue os protocolos estabelecidos originalmente na mídia impressa, que definem margens, colunas e medianizes para suas páginas. Juntos, eles podem fornecer o andaime subjacente para a estrutura da sua página e determinar a quantidade de espaço 'branco' ou 'negativo' entre seus blocos de conteúdo.
As Configurações da Grade de Layout permitem inserir valores e ajustar esses elementos da seguinte forma:
- Predefinição de Grade: Escolha entre valores expressos como tamanhos em pixels Fixos ou como porcentagens Responsivas da página.
- Colunas: Defina o número total de colunas.
- Largura da Coluna: Defina a largura de todas as colunas.
- Medianiz: Defina o espaço entre as colunas.
- Margens Esquerda/Direita: Defina o espaço entre as colunas mais externas e a borda da página.
Para ajustar as Configurações da Grade de Layout:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Certifique-se de que você já tem Mostrar grade de layout selecionado.
- Selecione a opção Configurações da grade de layout para abrir a janela pop-up Configurações da Grade de Layout.
- Defina a Predefinição de Grade e insira valores para personalizar sua grade.
- Selecione a caixa de seleção Desenhar grade de layout sobre os objetos se quiser que a grade sobreponha seu design.
Se você deseja alinhar objetos rapidamente em relação uns aos outros, confira nosso artigo sobre como Organizar e Alinhar Stencils.
Ajuste e medição
A Área de Trabalho oferece várias ferramentas de ajuste e medição para ajudar a tornar seu fluxo de trabalho mais rápido e preciso:
Ajuste
Todas as três opções de ajuste (descritas abaixo) são habilitadas por padrão, mas você pode desativá-las individualmente no menu suspenso Configurações. Os objetos serão ajustados ao destino quando estiverem dentro de 3 pixels.
Ajustar à grade e guias:
Os objetos serão ajustados automaticamente aos seus guias personalizados ou às linhas das suas grades conforme você as definiu:
Ajustar à página:
Os objetos serão ajustados automaticamente às bordas vertical e horizontal da página. Eles também se ajustarão ao centro da página a partir de suas bordas e do centro:
Ajustar a outros objetos:
Os objetos serão ajustados automaticamente para se alinharem com o centro e as bordas de outros objetos na página:
Os objetos dentro de um grupo se ajustarão a quaisquer outros objetos aninhados no mesmo nível.
Ajuste de Distância
O Ajuste de Distância permite espaçar rapidamente múltiplos objetos equidistantemente. Se você tiver três ou mais objetos na página e alinhar dois deles, o Ajuste de Distância será ativado para ajudá-lo a alinhar o restante.
Para habilitar ou desabilitar o ajuste de distância:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione a opção Configurações avançadas para abrir o pop-up Configurações Avançadas.
- Clique na caixa de seleção Ativar ajuste de distância.
Medição
Ao mover objetos pela página, nossas ferramentas de medição podem ajudá-lo a posicionar esses elementos da página com precisão. Veja como encontrá-las e uma breve descrição de como funcionam:
Para selecionar qualquer uma delas, clique na opção Configurações Avançadas no menu suspenso Configurações para abrir o pop-up Configurações Avançadas. Depois de clicar nas caixas de seleção apropriadas, clique em Concluído.
Mostrar tooltip de coordenadas:
Um tooltip sutil exibe as coordenadas de um objeto selecionado conforme você move esse objeto pela página e tela.
Mostrar anotações nos guias de ajuste:
Conforme você move um objeto pela página, esta opção mostra a distância do objeto, em pixels, de outros elementos próximos.
Mostrar guias ao segurar a tecla Alt:
Segure Alt/Option para exibir guias de linha rosa que mostram a distância de um objeto selecionado em relação às quatro margens da página.
E, se você precisar medir distâncias manualmente, não se esqueça do nosso prático stencil de Especificação de Distância. Pegue-o na categoria Ferramentas de Especificação do Painel de Stencils quando precisar, ou deixe um logo fora da borda da página, na tela, para acesso rápido e conveniente:
Mostrar e ocultar hotspots
O menu suspenso da Área de Trabalho permite mostrar ou ocultar todos os Hotspots que você adicionou a um projeto ao criar seu protótipo. Você também pode fazer isso diretamente no painel de Interações.
Tamanho
Para mostrar ou ocultar Hotspots:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione a opção Mostrar hotspots.
Mostrar e Ocultar Indicadores de Interação
Mostrar indicadores de interação adiciona um emblema de iluminação aos objetos com interações – na página e no Painel de Camadas – enquanto você está no modo de Edição. Você também pode selecionar ou desselecionar esta opção no próprio painel de Interações.
Para mostrar ou ocultar Indicadores de Interação:
- Clique no botão Configurações na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione a opção Mostrar indicadores de interação.
Mostrar e Ocultar Ferramentas de Colaboração ao Vivo
O Moqups tem ferramentas de Colaboração ao Vivo para ajudar suas equipes remotas e distribuídas a trabalhar juntas em tempo real.
- A Presença ao Vivo permite ver quem está colaborando ativamente em um projeto.
- O Chat ao Vivo ajuda sua equipe a compartilhar ideias e esclarecer problemas.
- A Seleção ao Vivo permite pular diretamente para onde seus colegas estão trabalhando.
- Os Cursores ao Vivo exibem o cursor de um colega enquanto ele edita.
Para mostrar ou ocultar cursores, seleções ou presença e chat de colaboradores:
- Clique no botão Área de Trabalho na parte inferior da Barra Lateral Esquerda.
- Selecione ou desselecione as opções de colaboradores ao vivo.
Perguntas e respostas
Posso bloquear guias personalizados como posso bloquear objetos?
Não, os guias não podem ser bloqueados.
Ocultar grades melhorará o desempenho?
Usuários do Chrome com páginas acima de 10.000 pixels podem experimentar alguma lentidão se tiverem a Grade de Layout exibida. Se isso ocorrer, simplesmente desselecione a opção Mostrar grade de layout.