Ang Pinakabagong Atomic.io Update May kasamang Mga Lalagyan ng Maibabang

01 ng 03

Ang Pinakabagong Atomic.io Update May kasamang Mga Lalagyan ng Maibabang

Atomic.io

Ilang buwan pabalik ipinakita ko kung paano gamitin ang atomic.io sa prototype na paggalaw . Isa sa mga pangunahing puntong ginawa ko sa piraso ay ang "pagpapakita ng kilos" sa halip na iwan ito sa mga imahinasyon ng kliyente o sa koponan ay mahalaga. Sa katunayan, naging kritikal ito na ang isang buong bagong kategorya ng mga tool ng UX / UI ay lumilitaw sa pinangyarihan. Kabilang dito ang - Keynote ng Apple, Edge ng Animate ng Adobe, Pagkatapos Effects at UXPin , upang pangalanan ang ilan. Ang bagong bata sa block ay Atomic.io na kung saan ay sa bukas beta kapag ako unang wrote tungkol sa mga produkto.

Ang masinop na bagay tungkol sa bukas na betas ay binigyan nila ang tagagawa ng software ng pagkakataon upang mangolekta ng feedback ng user sa set na tampok, kabilang ang nawawalang mga tampok, at pagkatapos ay idagdag ang mga ito sa application at subukan ang mga ito bago ang komersyal na release. Sa kaso ng atomic, isang tampok na talagang napalampas ko ay ang kakayahang mag-scroll ng nilalaman patayo o pahalang. Maaaring kabilang dito ang mga bagay tulad ng mga card, slide show o halos kahit ano ang isang gumagamit ay mag-swipe o i-drag sa loob ng mga paligid ng interface ng isang app o site.

Ito ay dapat na isang paksa ng maraming mga gumagamit na hiniling para sa dahil maaaring i-scroll lalagyan ay ipinakilala lamang sa app sa buwang ito at, kailangan kong aminin, ang paglikha ng nilalaman ng pag-scroll sa prototype ay patay simpleng upang paganahin.

Narito kung paano ...

02 ng 03

Paano Gumawa ng Vertical Scrolling Content sa Atomic

Atomic.io

Kakailanganin mo munang mag-sign up para sa isang libreng 30-araw na pagsubok at, sa katapusan ng panahong iyon, ikaw ay bibigyan ng tatlong mga plano sa pagpresyo.

Ang unang bagay na kailangan mong malaman ay ang lahat ng mga gawain na iyong ginagawa ay nasa browser at ang app ay lubos na naglalayong sa Google Chrome. Sa sandaling mag-log in ka, dadalhin ka sa pahina ng Mga Proyekto . Upang buksan ang app, i-click ang pindutan ng Bagong Proyekto .

Kapag lumitaw ang interface makikita mo mayroong limitadong bilang ng mga tool, ang kakayahang magdagdag ng mga pahina at mga layer sa mga pahina, ang artboard at, higit sa kanan, isang panel na may sensitibong konteksto.
Sa halimbawang ito, nagsimula ako sa isang preset na iPhone 5 na 320 x 568.I pagkatapos ay buksan ang folder na naglalaman ng mga imahe na mai-scroll at i-drag ito papunta sa canvas. Sila ay awtomatikong idinagdag sa proyekto at maaari mong makita ang mga ito sa mga indibidwal na mga layer kung iyong i- click ang tab na Layer . Pagkatapos ay pinili ko ang tool na Arrow (Pinili), pumili ng isang imahe at i-drag ito sa isang bagong posisyon upang magdagdag ng ilang puwang sa pagitan nila. Pagkatapos ay pinili ko ang lahat ng mga larawan at na- click ang pindutan ng Ipamahagi ang Vertically sa toolbar. Ang pantay na ito ay naka-spaced ang mga imahe.

Ang susunod na hakbang ay upang piliin ang lahat ng nilalaman na mai-scroll at upang i- click ang pindutan ng Container o piliin ang Gumawa ng Lumikha ng Scroll mula sa button ng Group pop down. Sa sandaling ang lalagyan ay nalikha-makikita mo ito sa panel ng Mga Layer - i- click ang lalagyan at i-drag ang hawakan sa ibaba patungo sa ibaba ng canvas . I-click ang pindutan ng Preview sa ibaba ng panel ng Properties at ilulunsad nito ang isang browser window. Gamitin ang scroll wheel ng iyong mouse upang mag-scroll sa nilalaman. Upang bumalik sa iyong proyekto, i- click ang pindutang I-edit sa kanang ibaba ng window ng browser.

03 ng 03

Paano Gumawa ng Pahalang na Pag-scroll na Nilalaman sa Atomic

Atomic.io

Pahalang na pag-scroll ay tulad ng madaling upang makamit.

Sa kasong ito, nag-drag ang isang serye ng mga imahe sa canvas at itinabi ang mga ito laban sa isa't isa. Gamit ang mga larawan na pinili, pagkatapos ay i-click ko ang Nangungunang Align button upang matiyak na ang lahat ay nakahanay sa bawat isa.

Pagkatapos ay gaganapin ko ang Shift key at pinili ang bawat layer sa panel ng Layers. Sa mga napiling mga larawan, na- click ko ang pindutan ng Lalagyan at , sa Mga panel ng Properties, napili nang Pahalang sa lugar ng Pag-uugali.

Pagkatapos ay sinubukan ko ang proyekto sa isang window ng Browser sa pamamagitan ng pag-click sa pindutan ng Preview.

Kahit na ipinakita ko kung paano lumikha ng mga indibidwal na bersyon ng Vertical at Pahalang na pag-scroll, hangga't inilalagay mo ang nilalaman na na-scroll sa isang lalagyan, maaari kang magkaroon ng mga lalagyan na ito sa magkakahiwalay na lugar ng screen. Halimbawa, ang isang pahina ng web ay maaaring magkaroon ng vertikal na pag-scroll ng nilalaman sa isang side menu at horizontal scroll na nilalaman sa isang slide-show sa parehong pahina. Sa katunayan, ang isang lalagyan ay maaaring magkaroon ng parehong vertical at pahalang na pag-scroll para sa mga item tulad ng isang tagapili ng larawan na mayroong isang dosenang mga thumbnail.

Upang matuto nang higit pa tungkol sa tampok na ito sa atomic.io tingnan ang: