Lankakehys on merkittävä askel suunnittelussa mikä tahansa käyttöliittymä, onko se verkkosivusto, sovellus tai ohjelmistotuote. Ilman häiriötekijöitä visuaalien, värien, typografian, tyylien ja tehosteiden muodossa voit keskittyä enemmän sisältöhierarkian ja käyttökokemuksen määrittelemiseen.

Heikon tarkkuuden lankakehysten ja prototyyppien tekeminen auttaa testaamaan ja toistamaan prosessin aikaisemmin ja useammin. Heikon tarkkuuden lankakehykset antavat suunnittelijoille mahdollisuuden työskennellä nopeammin ja kehittää tuotteita, joita käyttäjät rakastavat.

On olemassa paljon erilaisia langanmuodostustyökalut valita luonnosta. Kumpi valitset, riippuu henkilökohtaisista mieltymyksistäsi ja työnkulun tyylistä.

Aivan kuten monet suunnittelijat, jotka ovat muuttaneet digitaalinen suunnittelu tulostusmaailmasta olen asiantuntija Adobe-sovelluksissa, kuten Illustrator, InDesign ja Photoshop. Voin käyttää niitä tehokkaasti ja intuitiivisesti mistä tahansa ja milloin tahansa (vaikka joku herättäisi minut keskellä yötä ja kieltäytyy antamasta minulle kupillista kahvia).

Ei ole yllättävää, että näistä monipuolisista sovelluksista on tullut myös työkaluja, joita käytän web- ja sovelluksen visuaalinen suunnittelu . Joten, jotta työnkulku olisi tehokkain, käytän niitä myös langanpuitteisiin.

Jokaisessa projektissa aloitan suunnittelun tekemällä hyvin karkeita luonnoksia paperille tai iPad- tai älypuhelimen näytölle, jos en ole työpöydän lähellä. Nämä luonnokset on tarkoitettu keskittämään ajatukseni valitusta konseptista; asiakas ei todennäköisesti koskaan näe yhtään heistä. Kun uskon olevani varma siitä, että ideani toimii, siirryn langankehykseen. Käytän yleensä Adobe Illustratoria ja InDesignia yhdistettynä: Illustratoria useimpien käyttöliittymäsarjaelementtien luomiseen ja InDesign itse lankakehykseen.

Selitän vaiheittaisen prosessin siitä, miten nämä työkalut sisällytetään myös lankakehyksen työnkulkuun myöhemmin artikkelissa, mutta ennen kuin käsittelen yksityiskohtia, haluan näyttää sinulle InDesignin ensisijaisen lankakehystyökalun käytön vahvuudet ja heikkoudet. .

Hyödyt ja haitat Adobe InDesignin käytölle lankakehyksenä ja prototyyppityökaluna

Jo jonkin aikaa Adobe InDesign ei ole ollut vain työpöydän julkaisusovellus, vaan sitä on myös käytetty laajalti digitaaliseen julkaisemiseen ja EPUB-luomiseen. On myös useita syitä, miksi se on sopiva työkalu myös langankehykseen:

• Pääsivut - Voit käyttää nopeasti ja johdonmukaisesti globaaleja suunnitteluelementtejä, kuten navigointia, otsikoita, alatunnisteita ja niin edelleen, sivupohjien avulla. Voit luoda niin monta sivupohjaa kuin tarvitset, ja sen lisäksi yksi master voi perustua toiseen.
• Kiinteä verkkotuki - Voit luoda ja käyttää helposti erilaisia ​​ruudukkoja täydentämällä sarakkeita, vaaka- ja pystysuuntaisia ​​ohjaimia moduulien luomiseksi ja aliruudukoita monimutkaisuuden ja tarkkuuden lisäämiseksi.
• Vaihtoehtoiset asettelut - Mahdollistaa lankakehykset useille laitteille ja suunnille samassa tiedostossa.
• CC-kirjastot - Luo kirjaston erilaisista uudelleenkäytettävistä resursseista, kuten yleisesti käytetyistä kohteista, väreistä, merkeistä ja kappaleista. Luo resursseja InDesignissa, Illustratorissa tai Photoshopissa tai Adobe Capture -mobiilisovelluksella - kumpi tahansa haluat.
• Kerrokset - Tarjoaa mahdollisuuden järjestää, ryhmittää, näyttää / piilottaa ja lukita / avata esineitä ja sisältöä valikoivasti lankakehyksessä. Monisivuisen InDesign-asiakirjan jokaisella sivulla on sama tasojen määrä ja järjestys. Kaikki tasoihin tekemäsi muutokset näkyvät kaikilla sivuilla, kuten näkyvyys, pinoamisjärjestys tai poisto.
• Tyylit ja taulukot - Antaa täydellisen hallinnan tekstin, objektien ja taulukoiden ulkoasulle InDesign-tyylien avulla. Tyylit voivat periä toisiltaan ja tarjota mahdollisuuden kaskada haluttu muotoilu helposti koko asiakirjassa. Taulukoiden luominen ja muotoilu käytettäväksi lankakehyksen sisältöelementteinä tai jopa avustajina asettelutarkoituksiin on hyvin yksinkertaista.
• Typekit-integraatio - Korkealaatuisissa mallinnuksissa voit käyttää mitä tahansa Typekit-fontteja, jotka synkronoidaan työpöydälle.
• Vuorovaikutteisuus ja animaatiot - Voit luoda Adobe InDesignin sisäänrakennettujen vuorovaikutteisuus- ja animaatio-ominaisuuksien avulla erilaisia ​​tiloja verkko- tai sovellussuunnitteluelementeistä vuorovaikutuksen prototyyppejä varten. Useimmat ihmiset käyttävät näitä ominaisuuksia luodessaan aikakauslehtiä digitaalisiin julkaisuratkaisuihin ja kiinteän asettelun EPUB-vientiin, mutta ne sopivat myös prototyyppien tekemiseen.
• Vie vaihtoehdot - InDesign voi viedä luomasi lankakehykset ja prototyypit eri muodoissa. Interaktiiviset PDF-tiedostot ovat todennäköisesti valintasi muoto useimmissa tapauksissa, mutta voit myös käyttää Julkaise online -ominaisuutta muunnellaksesi asiakirjasi interaktiiviseksi HTML: ksi, jota voidaan tarkastella nykyaikaisissa työpöytä- ja mobiiliselaimissa. Valitettavasti sinulla ei ole paljon hallintaa viennistä Publish Onlinen avulla, ja viedyt tiedostot ovat Adobe-palvelimilla. Voit jakaa URL-prototyypin asiakkaallesi tai upottaa sen sivustoosi. Lisää hallintaa ja suoraa vientiä HTML5: een voit käyttää in5-laajennusta Ajar Productions .

Adobe InDesign sillä on monia ammattilaisia ​​käytettäväksi lanka- ja prototyyppityökaluna, mutta sillä on myös joitain haittoja:

• Ennalta määrättyjen lankakehysmallien ja -elementtien puute - Koska InDesignia ei ole tarkoitettu langanmuodostustyökaluksi, sinun on luotava ja valmisteltava malleja ja objektiominaisuuksia itse. (Näytän sinulle, kuinka käsitellä tätä vaihetta myöhemmin artikkelissa.) Hyvä uutinen on, että suurin osa tästä työstä tehdään vain kerran, ja muutaman tunnin työn jälkeen olet valmis aloittamaan InDesign-lankakehys. Lisäksi Internetistä voi ladata paljon omaisuuksia ja lankakehyssarjoja, joten sinun ei tarvitse piirtää kaikkea itse.
• Vuorovaikutteisuus ja animaatio-ominaisuudet ovat rajalliset - Vaikka voit helposti yhdistää sivuja ja lisätä interaktiivisuutta ja animaatioita, prosessi voi joskus kestää kauan. Jotkut yksinkertaisista vuorovaikutustyökaluista eivät ole kovin intuitiivisia. Jos et ole käyttänyt InDesignin vuorovaikutteisia ominaisuuksia, sinun on voitettava pieni oppimiskäyrä, ennen kuin voit käyttää niitä tehokkaasti.
• InDesign-asiakirjoja ei voi viedä suoraan kerrostettuina PSD-tiedostoina - Jos teet visuaalista suunnittelua Adobe Photoshopissa ja haluat erillisten lankakehyselementtien rakenteen rakentamisen, sinun on ensin vietävä lankakehyksesi PDF-muotoon. Sitten sinun on avattava PDF Illustratorissa ja vietävä se uudelleen kerrostettuna PSD: nä. Macissa työskentelevät ihmiset voivat käyttää myös kirjoittamaa ilmaista komentosarjaa Rob-päivä tallentaa InDesign-tiedostot kerrostettuna PSD-tiedostona.

Hyvä rautalangan valmistelu on puolet työstä

Aloita työympäristön hienosäätö. Jos sinulla ei vielä ole sellaista työtä varten tallennettua työtilaa Illustratorissa ja InDesignissa, luo yksi. Aloita Illustratorissa ennalta määritetystä Web-työtilasta ja sovita se mieleisekseen: Sulje paneelit, joita et usein käytä, avaa käyttämäsi paneelit ja järjestä ne sitten työtyyliisi sopiviksi.

Kun olet valmis, tallenna työtila valitsemalla Ikkuna> Työtila> Uusi työtila ... Tee sama asia InDesignissa käyttämällä Digital Publishing -työtilaa aloitusohjelmana.

Lankakehys- / Mockup- / prototyyppisarjojen kokoaminen

Tehokas lankakehyksen työnkulku Illustratorin ja InDesignin avulla edellyttää, että panostat jonkin aikaa käyttöliittymän resurssisarjan tekemiseen ensin. Adobe Creative Cloudin käyttöönoton jälkeen CC-kirjastot ovat paras tapa tallentaa kaikki käyttöliittymäsarjasi komponentit.

Voit luoda yhden tai useampia kirjastoja langankehyksen ja prototyyppien luomista varten. Voit esimerkiksi luoda yhden kirjaston verkkosivujen kehystystä varten, toisen iOS-sovelluksille, kolmannen Android-sovelluksille ja niin edelleen.

Luo Adobe CC -kirjasto avaamalla Kirjastot-paneeli ja valitsemalla paneelin hampurilaisvalikosta Luo uusi kirjasto. Kirjastoihin lisäämiäsi varoja voidaan tehdä ja käyttää eri Adobe-työpöytä- tai mobiilisovelluksissa kaikilla laitteilla, joihin kirjaudut Adobe ID: lläsi. Tämä tarkoittaa, että voit aloittaa projektin iPadilla tai iPhonella, jatkaa työpöydän tietokoneella toimistossa ja tehdä viime hetken muutoksia kotikannettavassasi samalla tavoin kuin kaikki laitteet.

Jos työskentelet osana suurempaa tiimiä, kirjaston resurssit voidaan jakaa tiimin jäsenten kesken. Kirjastot voivat sisältää värejä, grafiikkaa, tasotyylejä (vain Photoshop) sekä kappale- ja merkkityylejä. Voit lisätä resursseja kirjastoihin napsauttamalla vastaavaa painiketta CC Library -paneelin alareunassa ja vastaava elementti valittuna. Voit myös lisätä graafisia resursseja vetämällä ne suoraan taululta Kirjastot-paneeliin.

Kirjastojen varat on järjestetty luokittain. Pidä kiinni hyvistä käytännöistä ja nimeä kukin omaisuus uudelleen merkityksellisellä nimellä. Kirjastot ovat haettavissa, ja resurssin löytäminen kirjoittamalla sen nimen alku säästää tonnia aikaa myöhemmin, varsinkin kun kirjastoissasi on paljon erilaisia ​​kohteita. Muuta sisällön nimeä kaksoisnapsauttamalla sitä ja kirjoittamalla uusi.

Wireframe Kit -komponenttien luominen

Vaikka Adobe InDesignissa on joitain piirtotyökaluja, jotka ovat melko samanlaisia ​​kuin Illustratorissa, Illustrator on paljon parempi valinta piirtää erilaisia ​​elementtejä lankakehykseen. Luo nyrkkisääntönä kaikki pakettielementit, jotka vaativat piirroksia monimutkaisempia kuin geometriset perusmuodot Illustratorissa. Luo yksinkertaisempia elementtejä, jotka sisältävät tekstiä, jota sinun on muutettava asettelussa, kuten yksinkertaisia ​​painikkeita, InDesignissa.

Ensinnäkin, tee luettelo kaikista langankehyksessä tarvitsemistasi elementeistä, kuten navigointielementit, sivuelementit mukaan lukien kuvat, videokehykset ja tekstiruudut, kuvakkeet, hahmot, lomake-elementit ja kaikki muut käyttöliittymäelementit. Kun luettelo on valmis, voit siirtyä Illustratoriin ja InDesigniin luodaksesi kyseiset elementit.

Aloita luomalla uusi asiakirja lankakehystä tai mallipakettia varten. Tarkista uudelleen, että valitset joko Web- / laiteprofiili Illustratorissa tai Web / Digital Publishing Intent Uusi asiakirja -valintaikkunasta. Tämä varmistaa, että pikseleitä käytetään yksikköinä ja väritilaksi on asetettu RGB.

Tee lankakehyssarjaominaisuuksista mahdollisimman yksinkertaisia, koska niiden on annettava nopeasti visuaalisia vihjeitä edustamastaan ​​olematta liian yksityiskohtaisia. Sinun tulisi käyttää hyvin rajoitettuja väripaletteja, mieluiten muutama harmaa sävy. Korosta tärkeämpiä elementtejä visuaalisesti värittämällä ne tummemmilla sävyillä tai antamalla niille suurempi kontrasti.

Sillä korkeamman tarkkuuden mallit tai prototyypit , luo käyttöliittymäsarjat, joissa on yksityiskohtaisempia elementtejä ja jotka käyttävät kunkin projektin vastaavaa väripalettia. Lisää väripaletteja helpottamalla niiden lisäämistä CC-kirjastoihin.

Adobe Illustrator -ominaisuudet CC-kirjastoissa

Illustratorista kirjastoihin lisäämäsi varat linkitetään oletuksena (Adobe CC 2015: n jälkeen). Tämä tarkoittaa sitä, että kun muokkaat kirjaston resurssia Illustratorissa, muutokset näkyvät kaikissa käytetyissä tapauksissa. Jos haluat lisätä linkittämättömän sisällön asiakirjaan, paina vaihtoehto / näppäintä samalla kun vedät sitä paneelista.

Kun käytät linkitettyjä Illustrator-resursseja InDesignissa, niiden vasemmassa yläkulmassa on pieni pilvikuvake, kun asiakirjaa tarkastellaan normaalitilassa. Ne kaikki on lueteltu myös Linkit-paneelissa. Jos muokkaat kirjastosisältöä Illustratorissa, InDesign-asiakirjan muutoksia ei tehdä automaattisesti. Pilvikuvake korvataan muokatulla linkin huutomerkillä, ja sinun on päivitettävä nämä linkit.

InDesign-asiakirjaan sijoittamiasi InDesign-resursseja ei ole linkitetty. Tämä tarkoittaa, että voit muokata esiintymiä alkuperäisestä riippumatta, ja kun alkuperäistä sisältöä muokataan, nämä muutokset eivät heijastu omaisuuteen, joka on jo sijoitettu ulkoasuun.

Harkitse näitä ominaisuuksia luotaessasi lankakehyksiä: Lisää sisältö kirjastoon Illustratorista, kun oletat, että niitä on muokattava ja päivitettävä maailmanlaajuisesti, tai lisää ne InDesignista, kun tiedät, että haluat muokata niitä erikseen. Huomaa, että voit luoda grafiikkaa myös Illustratorissa, kopioida / liittää ne InDesigniin ja muokata sitten tarvittaessa, ennen kuin lisäät sen kirjastoon InDesign-resurssina.

Jos unohdat, mikä graafinen sisältö on luonut mikä sovellus, katso Kirjasto-paneelin jokaisen kohteen oikealta puolelta, kun käytät Näytä kohteet luettelona.

Adobe InDesignin joustavuus sisällön ja kopioiden kanssa

Luo InDesignissa tekstisäiliöitä, jotta voit helposti vaihtaa lankakehysten kopioita ja typografiaa. InDesignissa on mukava ominaisuus täyttää tekstikentät paikkamerkkiteksteillä. Kun piirrät tekstiruudun, napsauta sitä hiiren kakkospainikkeella ja valitse Täytä paikkamerkki-tekstillä .

Lisää tekstiruutuja Adoben kirjastoon kuten kaikki muutkin graafiset elementit vetämällä niitä. Kun käytät näitä tekstivaroja myöhemmin osana lankakehyksien asettelua, voit muokata tekstiruutua ja sen sisältöä lankakehyksessäsi.

Harkitse myös painikkeen käyttöliittymäelementtien tekemistä InDesignissa. Luo painike tekemällä tekstikehys, kirjoittamalla teksti ja määrittämällä sitten väli väli käyttämällä Objekti> Tekstikehyksen asetukset. Säädä tekstin pystysuuntaista perustelua laatikon sisällä valitsemalla haluamasi vaihtoehto Tasaa-pudotusvalikosta.

Vaihda Automaattinen koko -välilehdelle ja valitse sopiva automaattikoko (todennäköisesti vain leveys) ja kätevä vertailupiste. Jos et halua antaa InDesignin hajottaa tekstin useammaksi kuin yhdeksi riviksi, tarkista Ei rivimurtoja -asetus.

Käytä olemassa olevia resursseja

Internetissä on paljon Adobe Illustrator -langanmuodostus- ja prototyyppisovellussarjoja, joita voit ostaa tai jopa ladata ilmaiseksi, jos haluat valmiita ratkaisuja. Ehkä sinulla on jo elementtejä, jotka voit kaivaa valmiista projekteistasi. Avaa nuo asiakirjat, säädä tarvittaessa aiemmin luotuja elementtejä ja laita ne omiin kirjastoihinsa.

Jos suunnittelet tiettyä alustaa - esimerkiksi iOS- tai Android-sovellusta -, muista lukea huolellisesti heidän käyttöliittymänsä ohjeet ja käyttää sopivia resursseja. Voi olla kätevää, että sarjassa on käyttöliittymäelementtejä, jotka ovat ominaisia ​​eri alustoille.

Älä keskity liikaa yrittämään ottaa huomioon kirjastojesi jokaisen tulevan sisällön tai tilan, ennen kuin aloitat varsinaisen langoitusprosessin. Voit lisätä omaisuutta kirjastoihisi myöhemmin ja rakentaa sitä eteenpäin.

InDesign-lankakehysmallien luominen

Vielä yksi tärkeä valmisteluvaihe on jäljellä: Luo InDesign-malleja, joita käytät langankehysten tekemiseen. Aloita luomalla uusi asiakirja Web- tai Digital Publishing -tarkoituksella ja määritä sopivat sivukoot suunnittelemillesi näytöille.

Koska on suositeltavaa käyttää jonkinlaista ruudukkoa langankehyselementtien asettamiseen, aseta marginaalit ja luo sarakeristikko asettamalla haluttu sarakemäärä ja kourutila. Voit muuttaa näitä asetuksia myöhemmin valitsemalla Asettelu> Marginaalit ja sarakkeet ja sen sivusivun (tai sivut), jotka on valittu Sivut-paneelissa.

Jos tarvitset vaakasuuntaisia ​​ohjaimia ja täydentäviä pystysuuntaisia ​​ohjaimia, luo ne manuaalisesti tai tee ylimääräinen ruudukko valitsemalla Asettelu> Luo oppaat. Ruudukon luomisessa on hyödyllistä käyttää jotakin online-verkkolaskimen työkalua, kuten Ristikko .

Voit myös luoda ylimääräisiä malleja esitystarkoituksiin käyttämällä laitemalleja kehyksenä lankakehyksille. Koska yksi InDesign-asiakirja voidaan linkittää toiseen, voit luoda lankakehyksiä yhteen InDesign-asiakirjaan ja sijoittaa sen sitten toiseen esityksiä varten.

Vaikka se saattaa tuntua aluksi monimutkaiselta, tämä on itse asiassa hyvin yksinkertainen ja tehokas työnkulku. Todellisten lankakehysten pitäminen erillisessä asiakirjassa helpottaa rakentamisen jatkamista hyväksytyistä lankakehyksistä viimeisteltyyn visuaaliseen suunnitteluun.

On myös helppoa luoda esityskelpoisia malleja, joihin sijoittaa lankakehykset, lisätä tarroja ja kommentteja ja näyttää paras ratkaisu asiakkaalle. Kun teet muutoksia lankakehystiedostoon, päivitä se vain kuten mikä tahansa muu esitysasiakirjan linkki ja ta-daaa! Kaikki muutokset ovat myös esityksessäsi.

Tasot-paneelissa voit valmistella erillisiä tasoja erityyppiselle sisällölle: käyttöliittymän elementit, vuorovaikutteiset ominaisuudet, eleet, tarrat ja muistiinpanot. Jos tarvitset lisää kerroksia tiettyyn projektiin, voit lisätä ne helposti milloin tahansa lankakehyksen aikana.

Kun olet valmis, tallenna mallit InDesign.indt-mallitiedostoina. Kun kaikki tarvitsemasi mallit on tallennettu, olet vihdoin valmis aloittamaan langankehyksen tehokkaasti.

Lankakehysten rakentaminen

Ensinnäkin ensin - aloita pääsivulla. Vedä kaikki globaalit elementit, jotka ovat samat, projektisi kaikissa näytöissä kirjastosta. Jos suunnittelet verkkosivustoa, nämä ovat yleensä otsikoita, joissa on logo, navigointi ja alatunniste. Koska voit luoda useamman kuin yhden sivun ja ne voivat periä toisiltaan, voit hyödyntää pääsivujen pesimistä.

Esimerkiksi projektista riippuen voit luoda pääsivun yhdelle käyttöliittymäelementille, kuten modaalille tai valintaikkunalle, ja tehdä sitten uudet masterit ensimmäisen masterin perusteella muuttamalla vain erilaisten elementtien.

Et voi valita, muuttaa tai poistaa master-elementtejä tavallisilla asiakirjasivuilla, ellet napsauta niitä samalla, kun pidät Command / Control + Shift -näppäintä alhaalla master-elementin. Kun elementti on ohitettu, voit muuttaa mitä tahansa sen parametreja tai poistaa sen kokonaan asettelusta.

Muista, että vaikka ohitat elementin, parametrit, joita et ole muuttanut, peritään silti päälliköltä. Jos esimerkiksi ohitat elementin muuttamalla sen väriä, sen koko ei muutu, koska se on edelleen kytketty isäntään. Lisäksi, jos muutat sitä pääsivulla, sitä muokataan myös aiemmin ohittamassasi elementissä.

Kun lisäät lisäsivuja lankakehysasiakirjaasi, muista perustaa ne vastaavaan isäntään. Jos sinun on vaihdettava isäntä jo sivuasettelussa oleville sivuille, valitse ne Sivut-paneelissa, napsauta hiiren kakkospainikkeella ja valitse Käytä päällikkö sivuille. Käytä kirjaston resursseja ja järjestä ne Smart Guides and Align -vaihtoehtojen avulla, jotta voit luoda käyttöliittymän lopulliset lankakehysasettelut.

Jos luot malleja useammalle kuin yhdelle näyttökoolle, tee vaihtoehtoiset asettelut valitsemalla Asettelut> Luo vaihtoehtoinen asettelu tai Sivut-paneeli. Voit käyttää nestemäiset asetteluohjeet kun luot vaihtoehtoisia asetteluja, sivun elementit otetaan automaattisesti käyttöön koosta ja suunnasta toiseen tai voit hallita niitä manuaalisesti. Jos haluat soveltaa ja testata nestemäisten asettelujen sääntöjä, käytä Sivutyökalua tai avaa paneeli-ikkuna> Interaktiivinen> Nestemäinen asettelu.

Interaktiivisuuden lisääminen

Adobe InDesignissa on joukko interaktiivisia ominaisuuksia, joita voit hyödyntää luotaessa kehyksiä tai prototyyppejä. Sisältämäsi ominaisuudet riippuvat langallisten kehysten, prototyyppien tai esitysten lopullisesta muodosta.

Jos viet vientiä PDF-tiedostona, vuorovaikutteisuus on rajallista, mutta voit ainakin luoda linkit näyttöjen välille käyttämällä hyperlinkkipaneelia niiden luomiseen. Valitse elementti, jonka haluat käyttäytyvän linkkinä, ja napsauta Uusi hyperlinkki -kuvaketta. Valitse avattavasta Linkki-valikosta Sivu ja kirjoita haluamasi sivunumero. Toista kyseinen toiminto kaikilla kohteilla, joiden haluat käyttäytyvän linkkinä näyttöjen välillä.

Voit myös lisätä hyperlinkkejä pääsivuilla oleviin objekteihin, mikä voi säästää reaaliajassa. Luo linkit pääsivulle kerran ja ne toimivat asiakirjan kaikissa näytöissä.

Voit luoda painikkeita mistä tahansa grafiikasta, tekstistä, kuvasta tai elementtiryhmästä. Luo painike valitusta objektista käyttämällä Ikkuna> Interaktiivinen> Painikkeet ja lomakkeet -paneelia ja napsauttamalla Muunna painikkeeksi -kuvaketta.

Painikkeilla voi olla eri tiloja, jotka on luotu normaalille, siirtymiselle ja napsautukselle. Lisää painikkeisiin siirtymis- tai napsautustiloja napsauttamalla niitä Painikkeet-paneelissa ja muokkaamalla kunkin tilan painikkeen ulkoasua. Jos haluat lisätä toiminnon painikkeeseen, napsauta plusmerkkiä ja valitse se luettelosta. Ota huomioon, että SWF / EPUB-toiminnot eivät toimi interaktiivisissa PDF-tiedostoissa.

Voit luoda ponnahdusikkunoita valitsemalla Näytä / piilota painikkeet ja lomakkeet. Jos haluat piilottaa painikkeet, kunnes se laukaistaan, valitse Piilotettu, kunnes käynnistetty -vaihtoehto. Voit sisällyttää usean tilan objekteja interaktiiviseen PDF-tiedostoon, mutta vain, jos viet ne ensin SWF-tiedostona ja sijoitat sitten takaisin InDesign-asetteluun PDF-vientiä varten. Tämä työnkulku on ikävä, eikä PDF-tiedostoja voida nähdä kunnolla kaikissa PDF-lukijoissa, joten yritä välttää tekemästä tätä, ellei se ole todella tarpeen.

Jos haluat muuntaa asiakirjan HTML-prototyypiksi InDesign CC 2015 Publish Online -ominaisuuden avulla, voit käyttää monia muita interaktiivisia vaihtoehtoja, kuten animaatioita, monitilaobjekteja ja useita painikkeita, mukaan lukien kaikki SWF / EPUB-vientiin tarkoitetut.

Voit lisätä yksinkertaisia ​​animaatioita käyttämällä Animaatio-paneelia ja valitsemalla yhden sisäänrakennetuista esiasetuksista avattavasta valikosta ja asettamalla sen ominaisuudet. Yhdessä objektissa voi olla vain yksi animaatio, mutta jos sinun on lisättävä lisää niitä, ryhmitä objekti tyhjään ruutuun ja käytä uutta animaatiota tuossa uudessa objektissa.

Luo usean tilan objekti niille käyttöliittymäelementeille, jotka edellyttävät eri tilojen näyttämistä. Luo erillinen objekti kullekin tilalle. Objektit voivat olla yksi elementti (kuva, tekstiruutu, grafiikka) tai joukko erilaisia ​​elementtejä. Avaa Ikkuna> Vuorovaikutteinen> Objektin tilat -paneeli, valitse kaikki luomasi objektit monitilaobjektille ja napsauta Uusi-painiketta paneelin alaosassa.

Kun monitilaobjektisi on luotu, sinun on luotava painikkeita siirtyäksesi objektitilasta toiseen. Siirry seuraavaan tilaan tai Siirry edelliseen tilaan -toiminnot paljastavat tietyn objektin tilan Siirry tilaan -toiminnolla.

Jos haluat, että lankakehyksessä / prototyypissä on vieritettävä kehys, helpoin tapa luoda se on käyttämällä Universaalit vierityskehykset laajennus Ajar Productionsilta. Kun olet ladannut ja asentanut laajennuksen, voit käyttää sitä InDesign-paneelina. Vieritettävää kehystä varten sinun on luotava sisältöä sekä yksi kehys säilölle.

Vieritettävä sisältö voi olla tekstikehys, kuva tai useita ryhmiteltyjä elementtejä. Kun olet valmis luomaan sisältö- ja säilölaatikon, valitse sisältö ja Muokkaa> Leikkaa. Valitse sitten säilö ja liitä sisältö sisälle valitsemalla Muokkaa> Liitä. Valitse kontti ja säädä haluamasi vierityssuunta universaaleilla vierityskehyksillä.

Yhdistämällä painikkeet, monitilaobjektit, animaatiot ja vieritettävät kehykset voit saavuttaa rikkaan interaktiivisen kokemuksen. Voit testata interaktiivisuutta InDesignissa käyttämällä EPUB Interactivity Preview -paneelia. Voit esikatsella yhtä sivua tai koko asiakirjaa. Suurenna esikatselupaneeli tarpeen mukaan.

Jos et ole käyttänyt interaktiivisia Adobe InDesign -ominaisuuksia, varaudu siihen, että aluksi on hieman oppimiskäyrä. Mutta pienellä harjoittelulla ja kokeilemalla erehdyksillä voit hallita ne nopeasti.

Valmiiden asiakirjojen vieminen

Kun olet luonut lankakehykset ja esitystiedostot, jäljellä on vain näyttää upeat ideasi asiakkaalle parhaalla mahdollisella tavalla. Tätä varten sinun on vietävä lankakehykset muodossa, jota asiakas voi esikatsella. Vaikka InDesign-tiedostoja voidaan viedä useissa muodoissa, aiot todennäköisesti käyttää interaktiivista PDF-tiedostoa tai Publish Online -ominaisuutta, jos testaat toiminnallisia matalan tai korkean tarkkuuden prototyyppejä. Jos haluat tallentaa interaktiivisena PDF-tiedostona, valitse Vie-valintaikkunan avattavasta Muotoile-valikosta Adobe PDF (Interactive) ja säädä ominaisuuksia tarpeen mukaan. Älä unohda rasti Lomakkeet ja media, jos haluat sisällyttää interaktiivisia elementtejä. Asiakkaat voivat tarkastella PDF-lankakehyksiä ilmaisessa Adobe Readerissa ja kirjoittaa kaikki kommenttinsa samaan tiedostoon.

Voit myös luoda InDesignista viedyn PDF-dokumentin InVision (tai jokin muu PDF-tiedostoja tukeva työkalu) prototyyppi. Jos tavallinen prototyyppityökalu, ehkä Ihme , ei voi tuoda PDF-tiedostoa, viedä InDesign-lankakehyssivusi JPEG- tai PNG-kuvina.

Jos haluat viedä interaktiivisen HTML-prototyypin, joka näkyy nykyaikaisissa selaimissa eri laitteilla, siirry kohtaan Tiedosto> Julkaise verkossa tai napsauta Julkaise online -painiketta sovelluspalkista. Kun asiakirja on valmisteltu julkaistavaksi verkossa ja ladattu, voit kopioida asiakirjan URL-osoitteen sidosryhmien kanssa jakamiseksi ja aloittaa tarkistusprosessin. Voit myös upottaa julkaistun prototyypin sivustoosi.

Publish Online -ominaisuuden haittapuoli on, että sillä ei ole ylimääräistä hallintaa viennistä, ja tiedostot tallennetaan aina Adoben palvelimille. Lisäksi se on edelleen esikatseluominaisuus, etkä voi olla varma, mihin suuntaan Adobe aikoo kehittää sitä, tai vaikka se lopetettaisiin.

Kun lankakehyksesi / prototyyppisi on viety, on aika aloittaa testaus, tarkistus ja iterointi.

Perustietojen ymmärtäminen

Mitä hyötyä Adobe InDesignista on?

Adobe InDesign on Adobe CC Suite -sovellus, jota käytetään usein tulostus- ja graafiseen suunnitteluun. InDesign on myös yllättävän tehokas työkalu suunnittelijoille rakentaa lankakehyksiä ja käyttöliittymäsarjoja interaktiiviseen suunnitteluun.

Mikä on Adobe Audition CC: n käyttö?

Adobe Audition CC on yksi Adobe Creative Cloud -sovelluksen ohjelmistoista, jota käytetään ensisijaisesti äänen tallentamiseen, muokkaamiseen ja äänen sekoittamiseen.

Mikä on lankakehyksen prototyyppi?

Lankakehysprototyyppi on matalatasoisempi prototyyppi, jota UX- ja käyttöliittymäsuunnittelijat käyttävät ensisijaisesti työkaluna oletusten testaamiseen ja vahvistamiseen suunnitteluprosessin aikaisemmissa vaiheissa. Lankakehysprototyypit edustavat potentiaalisia käyttäjäkokemuksia ilman visuaalisen hoidon häiritsemistä.

Miksi lankakehys on tärkeä verkkosuunnittelussa?

Lankakehykset ovat tärkeitä verkkosivujen suunnittelussa useista syistä. Lankakehykset ovat karkea esitys siitä, kuinka kävijä kokee sisällön verkkosivustolla. Lankakehykset edustavat verkkosivuston eri puolia useassa uskollisuudessa ja ovat välttämättömiä suunnittelupäätösten validoinnissa ja käyttäjien testauksessa.

Mitä ovat langalliset kehykset ja mallit?

Lankakehykset ja mallinnukset ovat yleensä staattisia visuaalisia esityksiä dynaamisesta verkkosivustosta tai tuotteesta. Ne ovat valmiita lopputuotetta varten, jota käytetään työkaluina interaktiivisten mallien eri näkökohtien suunnitteluun, toistamiseen ja testaamiseen.