01 de 03
A última actualización de Atomic.io inclúe contedores deslizantes
Algúns meses volvín mostre que o atomic.io pode usarse para o prototipo de movemento . Un dos puntos clave que fixen na peza era "mostrar o movemento" en lugar de deixalo á imaxinación do cliente ou do equipo é importante. De feito, isto volveuse tan crítico que aparece toda unha nova categoría de ferramentas UX / UI. Inclúen: Apple Keynote, Adobe Edge Animate, After Effects e UXPin , por citar algúns. O novo rapaz no bloque é Atomic.io, que estaba en fase beta aberta cando escribín por primeira vez sobre o produto.
A cousa limpa acerca das betas abertas é que lle dan ao fabricante do software a oportunidade de recoller a información dos usuarios sobre o conxunto de funcións, incluídas as funcións que faltan e, a continuación, engádeas á aplicación e probalo antes do lanzamento comercial. No caso do atómico, unha característica que realmente perda era a capacidade de desprazar contido de forma vertical ou horizontal. Isto podería incluír cousas como tarxetas, presentacións de diapositivas ou prácticamente calquera cousa que un usuario deslice ou arrastre dentro dos confíns da interface dunha aplicación ou sitio.
Este debe ser un tema que moitos usuarios pediron porque os envases deslizantes acaban de ser presentados na aplicación este mes e, debo admitir, a creación de contidos deslizantes no prototipo é morto simple de habilitar.
Vexa como ...
02 de 03
Como crear contido de desprazamento vertical en atómico
Terá que rexistrarse primeiro nunha proba gratuíta de 30 días e, ao final dese período, presentaráselle tres plans de prezos.
O primeiro que debes saber é que todo o traballo que estás a facer está no navegador e a aplicación está dirixida estrictamente a Google Chrome. Unha vez que inicia sesión, será levado á páxina de Proxectos . Para abrir a aplicación, faga clic no botón Novo proxecto .
Cando apareza a interface verá que hai un número limitado de ferramentas, a posibilidade de engadir páxinas e capas ás páxinas, o panel articular e, máis á dereita, un panel de propiedades sensibles ao contexto.
Neste exemplo, comecei cun preestablecido de iPhone 5 de 320 x 568. A continuación, abra a carpeta que contén as imaxes que hai que desprazar e arrástralas no lenzo. Engadíronse automaticamente ao proxecto e podes ver que están en capas individuais se fas clic na pestana Capas . Despois seleccionei a ferramenta Arrow (Selección), seleccionou unha imaxe e arrastralo a unha nova posición para engadir un espazo entre eles. A continuación, seleccionei todas as imaxes e faga clic no botón Distribuir verticalmente na barra de ferramentas. Esta separou uniformemente as imaxes.
O seguinte paso é seleccionar todo o contido que se vai desprazar e prema no botón Contedor ou seleccione Crear contedor de desprazamento do botón Grupo abaixo. Unha vez que se crea o contedor, veráo no panel Capas - faga clic no contedor e arrastre o control inferior cara abaixo ata o fondo da pantalla . Faga clic no botón Vista previa na parte inferior do panel Propiedades e este abrirá unha xanela do navegador. Use a roda de desprazamento do rato para desprazar o contido. Para volver ao teu proxecto, fai clic no botón Editar na parte inferior dereita da xanela do navegador.
03 de 03
Como crear contido de desprazamento horizontal en Atomic
O desprazamento horizontal é tan sinxelo de realizar.
Neste caso, arrastrou unha serie de imaxes cara ao lenzo e inclúoas entre elas. Coas imaxes seleccionadas, fago clic no botón Aliñar superior para asegurar que todos estean aliñados entre si.
Despois mantuve presionada a tecla Maiúsculas e seleccionei cada capa no panel Capas. Coas imaxes seleccionadas, fixen clic no botón Container e , nos paneis Propiedades, seleccionadas Horizontalmente na área Comportamentos.
Probei o proxecto nunha ventá do navegador facendo clic no botón Vista previa.
Aínda que teño mostrado como crear versións individuais de desprazamento vertical e horizontal, sempre que coloque o contido deslizable nun contenedor, pode ter estes contedores en áreas separadas da pantalla. Por exemplo, unha páxina web podería ter desprazado verticalmente o contido nun menú lateral e desprazar horizontalmente contido nunha presentación de diapositivas na mesma páxina. De feito, un contedor pode ter desprazamento vertical e horizontal para elementos como un selector de imaxes que ten unha ducia de miniaturas.
Para saber máis sobre esta característica en atomic.io verifique:
- O anuncio do Blog
- Controis tutorial de desprazamento
- Enmascaramento usando contedores
- Resolución de problemas de contedores de desprazamento