Traadiraamid on oluline samm disainis mis tahes kasutajaliidese, olgu see siis veebisait, rakendus või tarkvaratoode. Ilma häireteta piltide, värvide, tüpograafia, stiilide ja efektide kujul saate keskenduda rohkem sisuhierarhia ja kasutajakogemuse määratlemisele.
Madala täpsusega traadita kaadrite ja prototüüpide loomine aitab teil protsessi alguses varem ja sagedamini testida ja kordada. Madala täpsusega traadiraamid võimaldavad disaineritel töötada kiiremini ja arendada tooteid, mis kasutajatele meeldivad.
Tööriistu on palju traadistusraamid täna valida. Ükskõik, mille valite, sõltub teie isiklikest eelistustest ja töövoo stiilist.
Nagu paljud disainerid, kes on kolinud digitaalne disain Trükimaailmast olen ekspert Adobe rakendustes nagu Illustrator, InDesign ja Photoshop. Saan neid tõhusalt ja intuitiivselt kasutada kõikjalt ja igal ajal (isegi kui keegi mind keset ööd üles äratab ja keeldub mulle tassi kohvi andmast).
Pole üllatav, et neist mitmekülgsetest rakendustest on saanud ka tööriistad, mida kasutan veebidisaini ja visuaalne rakenduse kujundus . Nii et oma töövoo efektiivsemaks muutmiseks kasutan neid ka traadiga raamimisel.
tulemuslikkuse investeeringutasuvusKujundusraamide tõhusaks loomiseks saab kasutada Adobe CC kujundusrakenduste komplekti.
Iga projektiga alustan tavaliselt projekteerimist, tehes paberile või iPadi või nutitelefoni ekraanile väga konarlikud visandid, kui ma pole oma kontorilaua lähedal. Need visandid on mõeldud selleks, et suunata oma mõtted valitud kontseptsioonile; klient ei näe tõenäoliselt kunagi ühtegi neist. Kui olen kindel, et minu idee töötab, liigun juhtmestiku juurde. Enamasti kasutan juhtmeta raamimiseks kasutajaliidese ja InDesigni komplekti elementide loomiseks Adobe Illustratorit ja InDesigni kombinatsioonis - Illustratorit.
Tutvun samm-sammult, kuidas need tööriistad oma traadiga raamimise töövoogu lisada, samuti hiljem artiklis, kuid enne üksikasjadega tutvumist lubage mul näidata teile InDesigni kui tugeva ja nõrga külje kasutamist esmane juhtmetega tööriist.
Juba mõnda aega pole Adobe InDesign olnud mitte ainult töölaua avaldamise rakendus, vaid seda on laialdaselt kasutatud ka digitaalseks kirjastamiseks ja EPUB-i loomiseks. Samuti on mitu põhjust, miks see sobib ka traadistamise jaoks:
Adobe InDesign Sellel on palju eeliseid, kui seda kasutatakse prototüüpimise ja traadiraami tööriistana, kuid sellel on ka mõned puudused:
Alustage oma töökeskkonna kohandamisest. Kui teil pole seda tüüpi tööde jaoks veel Illustratoris ja InDesignis salvestatud tööruumi, looge see. Alustage Illustratoris eelnevalt määratletud veebitööruumiga ja kohandage see oma maitse järgi: sulgege paneelid, mida te sageli ei kasuta, avage kindlasti kasutatavad paneelid ja seejärel kohandage need vastavalt oma tööstiilile.
Kui olete lõpetanud, salvestage tööruum, valides Window> Workspace> New Workspace. Tehke sama InDesignis, kasutades käivitajana Digital Publishing'i tööruumi.
Tõhus traadiga raamistamise töövoog Illustratori ja InDesigni abil nõuab, et kulutaksite esimese ülesandena veidi aega oma kasutajaliidese varakomplekti loomisele. Alates Adobe Creative Cloudi kasutuselevõtust on CC-raamatukogud parim viis teie kasutajaliidese komplekti kõigi komponentide salvestamiseks.
Traadiraamimiseks ja prototüüpimiseks saate luua ühe või mitu teeki. Näiteks saate luua raamatukogu veebisaidi juhtmestiku loomiseks, teise iOS-i rakenduste jaoks, kolmanda Android-rakenduste jaoks jne.
Adobe CC teegi loomiseks avage paneel 'Raamatukogud' ja valige paneeli hamburgerimenüüst 'Loo uus kogu'. Raamatukogudesse paigutatud üksusi saab luua ja kasutada erinevates Adobe töölaua- või mobiilirakendustes kõigis seadmetes, kuhu logite sisse oma Adobe ID-ga. See tähendab, et saate projekti alustada oma iPadis või iPhone'is, jätkata kontoris oma töölaual ja teha kodus viimase hetke muudatusi sülearvutis, kasutades samu varasid, mis on saadaval kõigis seadmetes.
Kui töötate suurema meeskonna koosseisus, saab raamatukogu ressursse meeskonnaliikmete vahel jagada. Raamatukogud võivad sisaldada värve, graafikat, kihtstiile (ainult Photoshopis) ning lõigu- ja märgistiile. Varade lisamiseks raamatukogudesse klõpsake vastava nupuga CC Library paneeli allosas vastavat üksust. Graafilisi varasid saate lisada ka, lohistades need otse oma pardal paneelile Raamatukogud.
Raamatukogude varad on korraldatud kategooriate kaupa. Pange kinni headest tavadest ja nimetage iga vara ümber tähendusliku nimega. Raamatukogudes on võimalik otsida ja vara leidmine oma nime alguse sisestamisega säästab hiljem palju aega, eriti kui teie teekides on palju erinevaid üksusi. Vara nime muutmiseks topeltklõpsake seda ja tippige uus.
Kuigi Adobe InDesignis on mõned joonistamise põhitööriistad, mis on üsna sarnased Illustratorile, on Illustrator palju parem variant erinevate elementide joonistamiseks teie traadiraamile. Üldise rusikareeglina saate luua kõik komplekti elemendid, mis nõuavad keerukamat joonistust kui Illustratori põhilised geomeetrilised kujundid. Looge lihtsamad elemendid, mis sisaldavad teksti, mida peate paigutuses muutma, näiteks lihtsad nupud InDesignis.
Alustamiseks koostage loend kõigist juhtmetes vajalikest elementidest, näiteks navigeerimiselemendid, leheelemendid, sealhulgas pildid, videoraamid ja tekstikastid, ikoonid, avatarid, vormielemendid ja kõik muud liidese elemendid. Kui olete loendi koostanud, saate nende elementide loomiseks minna Illustratori ja InDesigni juurde.
Alustage traatvõrgu komponentide või maketikomplekti jaoks uue dokumendi loomisega. Kontrollige veel kord, kas olete dialoogis „Uus dokument” valinud Illustratori veebi- / seadmeprofiili või veebi / digitaalse avaldamise kavatsuse. See tagab, et piksleid kasutatakse ühikutena ja värvirežiimiks on seatud RGB.
Tehke traadiraamikomplekti varad võimalikult lihtsaks, kuna need peavad andma kiireid visuaalseid vihjeid selle kohta, mida nad esindavad, ilma et oleksite liiga üksikasjalikud. Peaksite kasutama väga piiratud värvipalette, eelistatavalt mõnda halli tooni. Rõhutage visuaalselt kõige olulisemaid esemeid, värvides neid tumedamate toonidega või andes neile suurema kontrasti.
Sest kõrgema truuduse maketid või prototüübid , looge täpsemate elementidega kasutajaliidese komplektid, mis kasutavad iga projekti vastavat värvipaletti. Värvipalettidele hõlpsaks juurdepääsuks lisage need CC-teekidesse.
Illustratorist teekidesse lisatavad üksused on vaikimisi lingitud (alates Adobe CC 2015). See tähendab, et kui muudate Illustratori raamatukogus vara, kajastuvad muudatused kõigis kasutatud eksemplarides. Kui soovite dokumendile linkimata vara lisada, vajutage paneelilt lohistades klahvi Opti / Alt.
Kui lingitud Illustratori varasid kasutatakse InDesignis, on neil dokumendi režiimis 'Tavaline' vaatamisel vasakus ülanurgas väike pilveikoon. Kõik need on loetletud ka paneelil 'Lingid'. Kui muudate Illustratori raamatukogu vara, ei tehta InDesigni dokumendis muudatusi automaatselt. Pilvikoon asendatakse muudetud lingi hüüumärgiga ja peate neid linke värskendama.
InDesigni varad, mille lisate InDesigni dokumenti, pole lingitud. See tähendab, et saate eksemplare redigeerida originaalist sõltumatult ja kui algset vara muudetakse, ei kajastu need muudatused varades, mis on juba paigutusse paigutatud.
javascript Typeerror ei ole funktsioon
Juhtraamide loomisel pidage neid omadusi meeles: lisage varasid Illustratorist teeki, kui eeldate, et neid tuleb globaalselt muuta ja värskendada, või lisage need InDesignist, kui teate, et soovite neid eraldi muuta. Pange tähele, et saate graafika luua ka Illustratoris, neid kopeerida / kleepida InDesignis ja vajadusel neid enne teeki lisamist InDesigni varana muuta.
Kui unustate, milline graafiline element mis rakendusega on loodud, vaadake paneeli Raamatukogu iga elemendi parempoolset külge, kui kasutate käsku „Näita elemente loendina”.
Veenduge, et saate traatraamides hõlpsalt koopiat ja tüpograafiat muuta, looge InDesignis tekstikonteinerid. InDesignil on kena funktsioon tekstikastide täitmiseks kohatäite tekstiga. Tekstikasti joonistamisel paremklõpsake sellel ja valige Täitke testi tekst .
Lisage tekstikastid Adobe'i teeki nagu iga teine graafiline element - lohistades neid. Kui kasutate neid tekstivarasid hiljem oma traadiraami kujunduse osana, saate oma traadiraamis muuta nii tekstikasti kui ka selle sisu.
Kaaluge ka nuppude loomist kasutajaliidese elementidena InDesignis. Nupu loomiseks looge tekstiraam, tippige tekst ja kasutage põimimisruumi määramiseks objekti> tekstiraami suvandeid. Korrigeerige kasti teksti vertikaalset põhjendust, valides rippmenüüst „Joondamine” soovitud suvandi.
Lülituge vahekaardile 'Autosize' ja valige sobiv automaatse suuruse määramine (mis on ilmselt lihtsalt laius) ja mugav võrdluspunkt. Kui te ei soovi, et InDesign lubaks teie teksti mitmeks reaks killustada, märkige valik „Reavahet pole”.
Internetis on palju Adobe Illustratori prototüüpe ja kasutajaliidese komplekte, mida saate valmis lahenduse saamiseks tasuta osta või isegi alla laadida. Võib-olla on teil juba elemente, mida saate oma lõpetatud projektidest välja võtta. Avage need dokumendid, muutke vajadusel varem loodud üksusi ja paigutage need oma vastavasse teeki.
Kui kavandate konkreetset platvormi, näiteks iOS-i või Androidi rakendust, lugege kindlasti hoolikalt läbi selle liidese juhised ja kasutage sobivaid ressursse. Võib olla mugav, kui teie komplektis on erinevatele platvormidele omased kasutajaliidese elemendid.
Enne praeguse traadiga raamistamise protsessi alustamist ärge keskenduge oma raamatukogude iga vara või tulevase oleku arvestamisele. Hiljem saate varasid oma raamatukogudesse lisada ja sellele edasi minna.
Jäänud on veel üks oluline ettevalmistusetapp: InDesigni mallide loomine, mida kasutate traadiraami jaoks. Alustage uue dokumendi loomisest veebi- või digitaalse avaldamise eesmärgil ja määrake sobivad ekraanisuurused ekraanide jaoks, mille jaoks kujundate.
Kuna traatvõrgu elementide paigutamiseks on soovitatav kasutada mõnda tüüpi ruudustikku, määrake veerud ja looge veeruvõrk, määrates soovitud veergude arvu ja vihmaveerennide vahe. Neid sätteid saate hiljem muuta jaotises Paigutus> Veerised ja veerud, kus vastav paneel Pages on valitud vastava pealehega (või lehtedega).
Kui vajate täiendavaid horisontaalseid ja vertikaalseid juhikuid, looge need käsitsi või tehke täiendav ruudustik, kasutades jaotist Paigutus> Loo juhendid. Võrgu loomisel on kasulik kasutada mõnda võrgu võrgu arvutamise tööriista nagu Võre .
Samuti saate traadiraamide raamistikuna luua seadme esitluseks täiendavaid malle seadme makettidega. Kuna ühte InDesigni dokumenti saab linkida teisega, saate traadiraamid luua ühes InDesigni dokumendis ja seejärel asetada see esitluste jaoks teise dokumenti.
Kuigi see võib alguses tunduda keeruline, on see väga lihtne ja tõhus töövoog. Tegelike traadiraamide eraldi dokumendis hoidmine muudab ehitamise jätkamise heakskiidetud juhtmetest poleeritud visuaalse kujunduseni.
Teine lihtne asi on luua esitluseks valmis mallid, kuhu paigutada traadiraamid, lisada silte ja kommentaare ning osata kliendile näidata oma parimat lahendust. Traadiraamifaili muudatuste tegemisel värskendage seda lihtsalt nagu esitlusdokumendis muud linki ja ¡ ta-daaa! Kõik muudatused on ka teie esitluses.
Paneelil Kihid saate ette valmistada eraldi kihid erinevat tüüpi sisule: kasutajaliidese elemendid, interaktiivsed funktsioonid, žestid, sildid ja märkmed. Kui vajate konkreetse projekti jaoks rohkem kihte, saate need traadiraamimise käigus igal ajal hõlpsalt lisada.
Kui olete loomise lõpetanud, salvestage mallid InDesign.indt mallifailidena. Kui kõik vajalikud mallid on salvestatud, olete valmis tõhusalt traadiga raamimist alustama.
Esimesed asjad kõigepealt: alustage pealehest. Lohistage raamatukogust kõik globaalsed elemendid, mis on samad kõigil teie projekti ekraanidel. Veebisaidi kujundamisel on need tavaliselt pealkirjad, millel on logo, navigeerimine ja jalus. Kuna saate luua rohkem kui ühe põhilehe ja nad saavad üksteiselt pärida, saate põhilehekülgede pesitsemist ära kasutada.
Näiteks sõltuvalt projektist saate luua kasutajaliidese elemendi jaoks põhilehe, näiteks modali või dialoogi hüpikakna, seejärel luua esimese põhi põhised uued meistrid, muutes ainult neid elemente, mis peavad erinevad olema.
Tavalistel dokumendilehtedel ei saa põhiüksusi valida, muuta ega kustutada, kui klõpsate neid, hoides põhi tühistamiseks all Command / Control + Tõstuklahvi. Kui teie element on alistatud, saate oma parameetreid muuta või selle paigutusest täielikult eemaldada.
Pidage meeles, et isegi kui te üksuse alistate, pärandatakse parameetrid, mida te pole veel muutnud, põhihaldurilt. Näiteks kui alistate elemendi selle värvi muutmisega, siis selle suurus ei muutu, kuna see on endiselt põhimeistriga ühendatud. Samuti, kui muudate seda põhilehel, muudetakse seda ka üksusel, mille te varem alistasite.
lihtne tehnilise projekti dokumendi mall
Lisades oma traatvõrkimisdokumenti täiendavaid lehti, pidage meeles, et lähtuge nende vastavatest meistritest. Kui peate juba paigutuses olevate lehtede põhi muutma, valige need paneelil 'Pages', paremklõpsake ja valige 'Apply master to pages'. Kasutage teegi ressursse ja korrastage need kasutajaliidese lõplike kasutajaliidese kujunduste loomiseks nutikate juhendite ja suvandite 'Joondamine' abil.
Kui loote paigutusi rohkem kui ühele ekraanisuurusele, tehke alternatiivsed paigutused jaotises Layouts> Create Alternate Layout või paneelil „Pages“. Sa võid kasutada vedeliku kujundamise reeglid alternatiivsete paigutuste loomisel võtke leheelemendid automaatselt vastu ühest suurusest ja suunast teise või saate neid käsitsi juhtida. Vedelate disainireeglite rakendamiseks ja testimiseks kasutage tööriista „Lehekülg” või avage paneel Aken> Interaktiivne> Vedelikujundus.
Adobe InDesignil on mitu interaktiivsuse funktsiooni, mida saate traadiraamide või prototüüpide loomisel ära kasutada. Funktsioonid, mille lisate, sõltuvad teie traadiraamide, prototüüpide või esitluste jaoks vajalikust lõplikust vormingust.
Kui ekspordite PDF-failina, on interaktiivsus piiratud, kuid saate vähemalt luua ekraanide vahelised lingid, kasutades nende loomiseks hüperlinkide paneeli. Valige üksus, mille linkina soovite käituda, ja klõpsake ikooni 'Uus hüperling'. Valige rippmenüüst 'Link' to link 'Lehekülg' ja sisestage soovitud lehenumber. Korrake seda toimingut kõigi elementide puhul, mida soovite ekraanide vahel linkidena kasutada.
Samuti saate lisada hüperlinke esilehtedel asuvatele objektidele, mis võib olla reaalajasäästja. Looge põhilehel üks kord linke ja need töötavad teie dokumendi kõigil ekraanidel.
Nuppe saate luua mis tahes graafikast, tekstist, pildist või elementide rühmast. Nupu loomiseks valitud objektist kasutage aknapaneeli> Interaktiivne> Nupud ja vormid ning klõpsake ikooni 'Teisenda nupuks'.
Nuppudel võib olla erinev olek, mis on loodud normaalse väljanägemise, ümberpaigutamise ja klõpsamise jaoks. Ülemineku- või klõpsamisnuppude olekute lisamiseks klõpsake neid nupul Paneelid ja muutke iga oleku nupu välimust. Nupule toimingu lisamiseks klõpsake plussmärki ja valige see loendist. Pange tähele, et SWF-i / EPUB-i toimingud ei tööta interaktiivsete PDF-failide puhul.
Hüpikute loomiseks valige käsk Kuva / peida nupud ja vormid. Nuppude peitmiseks seni, kuni suvand on aktiveeritud, märkige ruut „Peida kuni kaadrini”. Interaktiivsesse PDF-i saate lisada mitmeastmelisi objekte, kuid eksportides need kõigepealt SWF-failina ja asetades need seejärel uuesti PDF-failide eksportimiseks InDesigni paigutusse. See töövoog on tüütu ja PDF-faile ei saa kõigis PDF-lugerites õigesti vaadata, seega proovige seda teha, kui see pole tõesti vajalik.
Kui soovite oma dokumendi InDesign CC 2015 funktsiooni Publish Online abil teisendada HTML-i prototüübiks, saate kasutada palju muid interaktiivseid suvandeid, nagu animatsioonid, mitmeastmelised objektid ja mitmesugused nuputoimingud, sealhulgas kõik need, mis on mõeldud SWF / EPUB-i eksportimiseks.
Lihtsaid animatsioone saate lisada paneeli Animatsioon abil, valides rippmenüüst ühe sisseehitatud eelseadetest ja määrates selle atribuudid. Objektil saab olla ainult üks animatsioon, kuid kui peate lisama rohkem, grupeerige oma objekt tühja kastiga ja kasutage vastloodud objektil uut animatsiooni.
Kasutajaliidese elementide jaoks, mis nõuavad erinevate olekute kuvamist, looge mitme olekuga objekt. Looge iga oleku jaoks eraldi objekt. Objektid võivad olla üksikud elemendid (pilt, tekstikast, graafika) või rühm erinevaid elemente. Avage paneel Aken> Interaktiivne> Objekti olekud, valige kõik mitme oleku objekti jaoks loodud objektid ja klõpsake paneeli allosas nuppu 'Uus'.
Pärast mitme oleku objekti loomist peate looma nupud, et lülituda ühest objekti olekust teise. Minge jaotisse „Järgmine olek” või jaotises „Eelmised olekutoimingud” kuvatakse konkreetse objekti olek toiminguga „Mine olekusse”.
Kui soovite, et teie struktuuris / prototüübis oleks keritav raam, on lihtsaim viis selle loomiseks kasutada Universaalsed kerimiskastid Ajar Productions'i laiendus. Pärast laienduse allalaadimist ja installimist saate seda kasutada oma InDesigni juhtpaneelina. Keritava kaadri jaoks peate looma sisu ja raami konteineri jaoks.
kuidas häkkida veebimaksesüsteemi
Keritav sisu võib olla tekstikast, pilt või mitu rühmitatud üksust. Kui olete sisu ja konteinerkasti loomise lõpetanud, valige sisu ja Redigeeri> Lõika. Seejärel valige konteiner ja kleepige sisu sisse, kasutades Edit> Paste In. Valige konteiner ja määrake universaalsete kerimiskastide abil soovitud kerimissuund.
Nuppude, mitme oleku objektide, animatsioonide ja keritavate kaadrite kombineerimisega saate rikkaliku interaktiivse kogemuse. Interaktiivsuse testimiseks InDesignis kasutage jaotises EPUB Interactivity eelvaate paneeli. Võite eelvaadata ühte lehte või kogu dokumenti. Vajadusel laiendage eelvaate paneeli.
Kui te pole Adobe InDesigni interaktiivseid funktsioone kasutanud, olge valmis, kuna alguses on väike õppimiskõver. Kuid vähese harjutamise ja mõne katse-eksituse meetodil saate neist kiiresti aru.
Kui olete traadiraamide ja esitlusfailide loomise lõpetanud, jääb üle vaid näidata oma parimaid ideid kliendile parimas võimalikus valguses. Selleks peate oma traadiraamid eksportima vormingus, mida teie klient saab eelvaadet vaadata. Kuigi InDesigni faile saab eksportida erinevates vormingutes, kasutate tõenäoliselt interaktiivset PDF-i või Publish Online'i funktsiooni, kui testite madala või suure usaldusväärsusega funktsionaalseid prototüüpe. Interaktiivse PDF-failina salvestamiseks valige dialoogiboksi „Eksport” rippmenüüst „Formaat” Adobe PDF (interaktiivne) ja kohandage vajadusel atribuute. Ärge unustage märkida valikut 'Vormid ja meedia', kui soovite lisada interaktiivseid elemente. Kliendid saavad PDF-i traadiraame vaadata tasuta Adobe Readeris ja kirjutada kõik oma kommentaarid samasse faili.
Prototüübi loomiseks võite kasutada ka InDesignist eksporditud PDF-dokumenti Visioon (või mõni muu PDF-faile toetav tööriist). Kui teie tavaline prototüüpimise tööriist on, võib-olla Ime , te ei saa PDF-faili importida, oma InDesigni traadiraame JPEG- või PNG-piltidena eksportida.
Interaktiivse HTML-prototüübi eksportimiseks, mida saab vaadata kaasaegsetes brauserites erinevates seadmetes, valige Fail> Avalda veebisait või klõpsake rakenduse ribal nuppu 'Avalda veebis'. Kui dokument on veebis avaldamiseks valmis ja üles laaditud, saate sidusrühmadega jagamiseks kopeerida dokumendi URL-i ja alustada ülevaatamisprotsessi. Avaldatud prototüübi saate kinnistada ka oma saidile.
Funktsiooni 'Avalda veebis' üks negatiivne külg on see, et teil pole ekspordi üle täiendavat kontrolli ja failid salvestatakse alati Adobe serverites. Samuti on see endiselt eelvaate funktsioon ja te ei saa olla kindel, millises suunas Adobe seda arendab või isegi katkestatakse.
Kui teie struktuur / prototüüp on eksporditud, on teil aeg alustada testimist, ülevaatamist ja iteratiivset protsessi.