01 de 03
La Plej lasta Atomic.io Ĝisdatigo inkluzivas Scrollable Containers
Kelkajn monatojn mi montris, kiel atomic.io povas esti uzata por prototipoj . Unu el la ĉefaj punktoj, kiujn mi faris en la peco, estis "montri movadon" prefere ol lasi ĝin al la imagoj de la kliento aŭ teamo. Fakte, ĉi tio fariĝis tiel maltrankviliga, ke tuta kategorio de UX / UI-iloj aperas sur la sceno. Ili inkluzivas - Apple Keynote, Adobe's Edge Animate, After Effects kaj UXPin , por enoficigi kelkajn. La nova infano sur la bloko estas Atomic.io, kiu estis malfermita beta kiam mi unue skribis pri la produkto.
La nura afero pri malfermaj betoj estas, ke ili donas al la fabrikanto de programaro la ŝancon kolekti uzantajn rimarkojn sur la agordo, inkluzive de mankantaj karakterizaĵoj, kaj aldoni ilin al la apliko kaj provi ilin antaŭ la komerca eldono. En la kazo de atoma, unu karakterizaĵo, kiun mi vere maltrafis, estis la kapablo por rulumi enhavon vertikale aŭ horizontale. Ĉi tio povus inkluzivi tiajn aferojn kiel kartoj, diapozitivoj aŭ preskaŭ io ajn uzanto svingos aŭ trenos ene de la limoj de la interfaco de la retejo aŭ retejo.
Ĉi tio devis esti afero multaj de la uzantoj petitaj pro tio, ke enhavigaj konteneroj ĵus prezentiĝis al la programo ĉi-jare kaj, mi devas rekoni, kreante enhavon en la prototipo estas simpla simpla por ebligi.
Jen kiel ...
02 de 03
Kiel Krei Vertikala Scrolling Enhavo en Atoma
Vi devas unue registri por senpaga 30-jara provo kaj, fine de tiu periodo, vi prezentos tri prezojn pri prezoj.
La unua afero, kiun vi devas scii, ĉio, kion vi faros, estas en la retumilo kaj la programo celas strikte ĉe Google Chrome. Kiam vi ensalutas, vi estos prenita al la paĝo de Projektoj . Por malfermi la programon, alklaku la butonon de Nova Projekto .
Kiam la interfaco aperas, vi vidos, ke ekzistas limigita nombro da iloj, la kapablon aldoni paĝojn kaj mantelojn al la paĝoj, la artkarton kaj, pli dekstre, kunteksto-sentema proprieta panelo.
En ĉi tiu ekzemplo, mi komencis per iPhone 5 antaŭdifinita ke estas 320 x 568.I tiam malfermu la dosierujon enhavantan la bildojn por esti scrolled kaj trenis ilin sur la tolon. Ili estis aŭtomate aldonitaj al la projekto kaj vi povas vidi, ke ili estas sur individuaj tavoloj, se vi klakas la langeton . Mi tiam elektis la Arrow-ilon (Selektadon), elektis bildon kaj trenis ĝin al nova pozicio por aldoni iom da spaco inter ili. Mi tiam elektis ĉiujn bildojn kaj alklakis la Distribulan Vertikala butonon sur la ilobreto. Ĉi tio egale interspacis la bildojn.
La sekva paŝo estas elekti la tutan enhavon por esti scrolled kaj alklaku la Enhavan butonon aŭ elektu Krei Scroll-Inkluzivon de la Grupo butonon malsupren. Kiam la ujo estas kreita, vi vidos ĝin en la Panelo-paneloj - alklaku la ujon kaj trenu la malsupran tenilon supren al la malsupro de la tolo . Alklaku la Antaŭan butonon ĉe la fundo de la Propra panelo kaj ĉi tio lanĉos retumilon. Uzu la rulalan rulaŭton por movi la enhavon. Por reveni al via projekto, alklaku la butonon Redakti en la malsupra dekstra flanko de la retumilo.
03 de 03
Kiel Krei Horizontalan Scrolling Enhavo en Atoma
Horizontala movo estas tiel facila por plenumi.
En ĉi tiu kazo, trenis serion de bildoj al la tolo kaj forĵetis ilin kontraŭ unu la alian. Kun la bildoj elektitaj, mi tiam alklaku la Supran Alignan butonon por certigi ke ili ĉiuj viciĝas unu kun la alia.
Mi tiam tenis la Ŝnivan ŝlosilon kaj elektis ĉiun tavolon en la Tabelo-panelo. Kun la bildoj elektitaj, mi alklakis la Enhavan butonon kaj , en la Propraĵaj paneloj, elektita Horizontale en la Komercaj areoj.
Mi tiam provis la projekton en Foliumilo, alklakante la Antaŭan butonon.
Kvankam mi montris, kiel krei individuajn versiojn de Vertikala kaj Horizontala movo, kondiĉe ke vi enmetas la enketon en kontenon, vi povas havi ĉi tiujn ujon en apartaj areoj de la ekrano. Ekzemple, retpaĝo povus esti vertikale movi enhavon en flanka menuo kaj horizontale movi enhavon en diapozitivoj en la sama paĝo. Fakte, ujo povas havi ambaŭ vertikalajn kaj horizontalajn movojn por eroj kiel bildkaptilo, kiu havas dekduon aŭ sekve bildetojn.
Por lerni pli pri ĉi tiu trajto en atoma.io kontrolu:
- La Blogo-anonco
- Scrolling ujo lernilo
- Maskante uzanta Containers
- Problemo-solvanta Scrolling Containers