A atualização mais recente do Atomic.io inclui contêineres roláveis
Alguns meses atrás eu mostrei como atomic.io pode ser usado para prototipar o movimento. Um dos pontos-chave que fiz na peça foi "mostrar movimento" do que deixá-la para a imaginação do cliente ou da equipe é importante. Na verdade, isso se tornou tão crítico que uma nova categoria de ferramentas de UX / UI está aparecendo na cena. Eles incluem o Apple Keynote, o Adobe's Edge Animate, o After Effects e o UXPin, para citar alguns. O novo garoto no bloco é o Atomic.io, que estava em beta aberto quando escrevi pela primeira vez sobre o produto.
O mais interessante sobre os betas abertos é que eles dão ao fabricante do software a oportunidade de coletar feedback do usuário no conjunto de recursos, incluindo os recursos ausentes, e depois adicioná-los ao aplicativo e testá-los antes do lançamento comercial. No caso do atomic, um recurso que realmente senti falta foi a capacidade de rolar o conteúdo vertical ou horizontalmente. Isso pode incluir cards, apresentações de slides ou praticamente qualquer coisa que um usuário possa arrastar ou arrastar dentro dos limites da interface de um aplicativo ou site.
Este deve ter sido um assunto que muitos usuários pediram porque os containers roláveis foram introduzidos no aplicativo este mês e, devo admitir, criar conteúdo rolável no protótipo é simplesmente simples de ativar.
Veja como…
02 de 03Como criar conteúdo de rolagem vertical no Atomic
Você precisará primeiro se inscrever para uma avaliação gratuita de 30 dias e, ao final desse período, será apresentado a você três planos de preços.
A primeira coisa que você precisa saber é que todo o trabalho que você fará estará no navegador e o aplicativo será direcionado exclusivamente ao Google Chrome. Uma vez logado, você será levado ao Projetos página. Para abrir o aplicativo, clique noBotão Novo Projeto.
Quando a interface aparecer, você verá que há um número limitado de ferramentas, a capacidade de adicionar páginas e camadas às páginas, a prancheta e, à direita, um painel de propriedades sensível ao contexto.Neste exemplo, comecei com uma predefinição do iPhone 5 de 320 x 568. Em seguida, abro a pasta que contém as imagens a serem roladas e arrasto-as na tela. Eles foram automaticamente adicionados ao projeto e você pode ver que eles estão em camadas individuais se você clique na guia Camadas. Em seguida, selecionei a ferramenta Seta (Seleção), selecionei uma imagem e arrastei-a para uma nova posição, a fim de adicionar algum espaço entre elas. Eu selecionei todas as imagens e clicou no botão Distribuir Verticalmente na barra de ferramentas. Isso uniformemente espaçou as imagens. O próximo passo é selecionar todo o conteúdo a ser rolado e clique no botão Container ou selecione Create Scroll Container no botão Group pop down. Depois que o contêiner for criado, você o verá no painel "Camadas" clique no contêiner e arraste a alça inferior para cima até a parte inferior da tela. Clique no botão Visualizar na parte inferior do painel Propriedades e isso iniciará uma janela do navegador. Use a roda de rolagem do mouse para rolar o conteúdo. Para retornar ao seu projeto, clique no botão Editar no canto inferior direito da janela do navegador. Rolagem horizontal é tão fácil de realizar. Nesse caso, arrastou uma série de imagens para a tela e as uniu umas às outras. Com as imagens selecionadas, clico no botão Alinhar Superior para garantir que elas estejam alinhadas umas com as outras. Eu segurei a tecla Shift e selecionei cada camada no painel Camadas. Com as imagens selecionadas, eu clicou no botão Container e, nos painéis Propriedades, selecionados na horizontal na área Comportamentos. Então, testei o projeto em uma janela do navegador, clicando no botão Visualizar. Embora eu tenha mostrado como criar versões individuais da rolagem Vertical e Horizontal, contanto que você coloque o conteúdo rolável em um contêiner, você pode ter esses contêineres em áreas separadas da tela. Por exemplo, uma página da Web pode ter rolagem vertical de conteúdo em um menu lateral e rolagem horizontal de conteúdo em uma apresentação de slides na mesma página. Na verdade, um contêiner pode ter rolagem vertical e horizontal para itens como um seletor de imagens com cerca de uma dúzia de miniaturas. Para saber mais sobre esse recurso no atomic.io confira: Como criar conteúdo de rolagem horizontal no Atomic
