No processo de trabalhar no design da interface do usuário da versão móvel do site ou aplicativo móvel, tentei diferentes maneiras de apresentá-lo aos clientes. Até agora, escolhi o Invision, mas há vários pontos.



Em primeiro lugar, o custo. Para os profissionais, isso não é um problema, mas para muitos designers iniciantes, o mínimo de US $ 13 por mês é uma quantia bastante decente.

Em segundo lugar, por algum motivo, o problema de passar o mouse sobre os botões ativos ainda não foi resolvido. Basta colocar - rolar para baixo sobre o botão ativo funciona como um clique. E isso é muito inconveniente em interfaces bastante complexas.

Outra opção - Figma - ainda não foi dominada e o fato de que ela se tornará um padrão do setor. Portanto, alguns designers também o ignoram.

Fazendo uma apresentação do design de um aplicativo móvel no Axure

A opção mais simples e acessível continua sendo o Axure em conjunto com o Axshare. E aqui o Invision começa a não ter acuidade - os clientes nem sempre conseguem apresentar em detalhes o trabalho com o aplicativo em suas mentes.

Então, vamos começar a desenvolver nossas próprias ferramentas. E o primeiro passo é criar um modelo para o Axure com a estrutura de um telefone celular condicional. Para fazer isso, precisamos de uma moldura de telefone em PNG com um “buraco” na tela e a estrutura das telas.

No começo - tudo é simples: colocamos a foto do telefone no topo, colocamos o quadro embutido no tamanho do orifício da tela. Mas há um momento desagradável. Está relacionado aos recursos do elemento Quadro embutido.
Este elemento cria uma janela no protótipo para carregar várias informações - um quadro. Nele, você pode definir a saída de outra tela da estrutura ou inserir um link para o site.

O problema surge nas barras de rolagem. Eles podem ser mostrados ou ocultos. Mas, com as barras de rolagem ocultas, a rebobinagem é desativada - para que as telas longas do aplicativo não sejam exibidas dinamicamente. Não é um pedido.

Para resolver o problema, usamos uma técnica de máscara (graças ao crackjack ).

1. Converter quadro embutido em painel dinâmico. Ligue a exibição das barras de rolagem (se desativadas).
2. Traduzimos o quadro e o quadro do telefone mais uma vez no painel dinâmico, no qual desligamos as barras de rolagem. Também alteramos o tamanho da nossa máscara para 360x640, para que as barras de rolagem do quadro não sejam exibidas.

O resto já é mais fácil - na tela principal, ainda temos o quadro do telefone em um quadro e um boneco. No quadro, carregamos a saída da próxima tela na lista, estabelecemos a navegação e é isso. Não se esqueça de combinar os elementos da primeira tela em um grupo e criar um painel dinâmico a partir dele.

O próprio painel pode ser alinhado no meio do navegador. Nas configurações Fixar no navegador, marque os parâmetros central e superior. Publicamos tudo no Axshare e enviamos o link para o cliente.

Atalho. Modelo pronto para Axure

Carreguei o resultado como um arquivo finalizado. Você pode baixar o modelo do Axure gratuitamente aqui .

Ponto importante

O modelo foi projetado para 360 layouts de largura. Isso é feito de propósito. Os layouts em 320 de largura parecem muito pequenos para os olhos na tela do computador de mesa e os layouts no tamanho original - 1080 (e até 640), pelo contrário - muito grandes.

PS Eu não vou escrever instruções padrão o que e onde. Quero dar coisas mais práticas para melhorar o trabalho dos designers de ux / ui.

Ficarei feliz em responder a perguntas e com sugestões de otimização!