01/03
Viimeisin Atomic.io-päivitys sisältää pyörivän kontin
Muutama kuukausi sitten osoitin kuinka atomic.ioa voidaan käyttää prototyypin liikkeeseen . Yksi tärkeimmistä kohdista, jotka tein työstä, oli "liikkeen näyttäminen" eikä sen jättäminen asiakkaan tai ryhmän imaginaatioiden eteen. Itse asiassa tämä on tullut niin kriittiseksi, että UX / UI-työkalujen uusi kategoria näkyy näytöllä. Niihin kuuluvat - Apple Keynote, Adobein Edge Animate, After Effects ja UXPin muutamia. Lohkon uusi lapsi on Atomic.io, joka oli avoimessa beta-versiossa, kun kirjoitin ensimmäisen kerran tuotteesta.
Avoin betojen siisti asia on, että ne antavat ohjelmistovalmistajalle mahdollisuuden kerätä käyttäjän ominaisuuksia, myös puuttuvia ominaisuuksia, ja lisätä heidät sovellukseen ja testata niitä ennen kaupallista julkaisua. Atomin tapauksessa yksi ominaisuus, josta todella jäi, oli kyky selata sisältöä pystysuoraan tai vaakasuoraan. Tämä voi sisältää esimerkiksi kortteja, diaesityksiä tai käytännössä mitä tahansa käyttäjän pyyhkäisemällä tai vetämällä sovelluksen tai sivuston käyttöliittymän rajoissa.
Tämä on ollut aihe, jota monet käyttäjät ovat pyytäneet, koska selaavia kontteja juuri esiteltiin sovellukselle tässä kuussa, ja minun on myönnettävä, että luodaan vierekkäistä sisältöä prototyypissä, joka on kuollut yksinkertainen.
Tässä miten ...
02/03
Miten luodaan pystysuuntainen vieritysmateriaali Atomicissa
Sinun on ensin ilmoittauduttava ilmaiseksi 30 päivän kokeiluun ja tämän kauden lopussa esitellään kolme hinnoittelusuunnitelmaa.
Ensimmäinen asia mitä sinun tarvitsee tietää on, että kaikki tekemäsi teos on selaimessa ja sovellus on suunnattu tarkalleen Google Chrome. Kun olet kirjautunut sisään, sinut viedään Projects- sivulle. Avaa sovellus napsauttamalla Uusi projekti -painiketta .
Kun käyttöliittymä tulee näkyviin, näet, että on olemassa rajoitettu määrä työkaluja, kykyä lisätä sivuja ja kerroksia sivulle, taulun taululle ja oikealle kontekstiherkille ominaisuuspaneeleille.
Tässä esimerkissä aloitin iPhonen 5 esiasetuksella, joka on 320 x 568. I avaa sitten kansio, joka sisältää kuvat, joita voit vierittää, ja vetää ne kiinni kangasta. Ne lisättiin automaattisesti projektiin ja näet, että ne ovat yksittäisissä kerroksissa, jos napsautat Tasot-välilehteä . Sitten valitsin Nuoli-työkalu (Valinta), valitsin kuvan ja vietin sen uuteen paikkaan lisäämällä siihen välilyöntiä. Sitten valitsin kaikki kuvat ja napsautin työkalurivin Distribute Vertically -painiketta . Tämä tasaisesti erottaa kuvat.
Seuraavana vaiheena on valita kaikki vieritettävä sisältö ja napsauta joko Konttipainiketta tai valitse Luo vierityspakkaus Ryhmän -painikkeesta . Kun kontti on luotu - näet sen Tasot-paneelissa - napsauta konttia ja vedä pohjakahva ylöspäin kangasta alareunaan . Napsauta Esikatselu-painiketta Ominaisuudet-paneelin alalaidassa ja käynnistää selainikkunan. Selaa sisältöä hiiren vierityspyörällä. Voit palata projektiin napsauttamalla selaimen ikkunan oikeassa alakulmassa olevaa Muokkaa-painiketta .
03/03
Miten luodaan horisontaalinen vieritysmateriaali Atomicissa
Vaakasuora vieritys on yhtä helppoa.
Tässä tapauksessa vetää sarjan kuvia kankaalle ja rikkoi niitä toisiaan vasten. Kun valitsit kuvat, napsautan sitten Top Align -painiketta varmistaakseni, että ne kaikki ovat kohdakkain keskenään.
Säilytin sitten Vaihto-näppäintä alhaalla ja valitsin jokaisen kerroksen Tasot-paneelissa. Valittujen kuvien avulla napsautin Kontti-painike ja Ominaisuudet-paneelissa Valittu vaakasuunnassa käyttäytymisalueella.
Sitten testasin projektin selainikkunassa klikkaamalla Esikatselu-painiketta.
Vaikka olen osoittanut, kuinka luot yksittäisiä versioita Pystysuorasta ja Vaaka-selauksesta, niin kauan kuin laitat vieritettävän sisällön säiliöön, voit käyttää näitä astioita erillisillä näytön alueilla. Esimerkiksi verkkosivulla voi olla pystysuora vieritys sisällöstä sivupaneelissa ja vaakasuora vieritys sisällössä diaesityksessä samalla sivulla. Itse asiassa säiliöllä voi olla pystysuorat ja vaakasuorat rullat kohteet, kuten kuvantamo, jolla on kymmenkunta pienoiskuvia.
Saat lisätietoja tästä ominaisuudesta osoitteessa atomic.io tarkistaa:
- Blogin ilmoitus
- Vieritysruudun opetusohjelma
- Masking käyttäen kontteja
- Vianmääritys vierityslaatikoilla