Aloittaminen seuraavan sukupolven verkkosivustojen prototyyppien kanssa
Äskettäin olen yhä turhautunut nykyisen työkalupaketin ja hyväksyttyjen käytäntöjen avulla UI- ja UX-toimitusten luomiseen.
Kokemukseni mukaan Photoshopissa ja Illustratorissa staattisten mallien rakentaminen ei enää kuvaa nykyisen käyttöliittymän muotoilua. Samalla tavoin lanka- ja UX-dokumenttien luominen Axure-työkalujen, kuten Axure-työkalujen, näyttävät kommunikoivan hyvin vähän siitä, miten sivusto tai sovellus todella tuntuu käytettävän.
Nämä työkalut ovat pelkkiä, rajoittavat muotoilua sarjaan staattisia "valtioita" sen sijaan, että ne kommunikoivat rikas, dynaaminen, innoittava kokemus, jonka toivomme rakentavan.
Jos esimerkiksi haluat tarkastella tietoruudun, napsauta kohdetta luettelonäkymässä. Kuinka luettelokohteeseen sijoitetaan? Miten uusi näyttö rakennetaan? Mitä tapahtuu, kun napsautat palataksesi luettelonäkymään? Kuinka uusia kohteita lisätään luettelonäkymään?
Riippumatta siitä, kuinka monta näytön tilaa kuvaavat kuvat ovat, modernin näytön suunnittelun olennainen piirre on, miten UI-elementit siirtyvät tilasta toiseen ja kuinka uudet näytön elementit tuodaan näyttöön.
Animaatiot ja siirtymät vaikuttavat minulta oleellisilta, missä UI-mallin ydin on nyt, kun siirrymme enemmän alueellisiin suunnittelumalleihin.
Se on tilaa, ei sivu
Osa tästä johtuu siitä, että vuorovaikutteiset tiedotusvälineet ovat nyt läsnä kaikkialla, emmekä tarvitse enää viitata paperipohjaisiin visuaalisiin metaforioihin, kuten "sivu", jotta käyttöliittymämme ovat helppokäyttöisiä. Nyt spatiaaliset metaforat sisällön navigointia varten ovat hyödyllisimpiä ja animaation kielellä kuvatut siirtymät.
Pasquale d'Silva kutsuu tätä UI-suunnittelun aluetta Siirtymäliittymät, ja mielestäni hän on tunnistanut keskeisen tutkimuksen alueen nykyaikaiselle web- ja sovellussuunnittelulle.
Mutta suurin osa nykyisistä interaktiivisten suunnittelijoiden työkaluista ei riitä tutkimaan, suunnittelemaan ja rakentamaan näitä rajapintoja.
Animaatioohjelmistoa voidaan käyttää rakentamaan malliprosesseja ja vuorovaikutuksen prototyyppejä. After Effectsin avulla Adobe Edge Animate, jopa Flashia voidaan käyttää siirtymisen vaikutuksiin, joita voidaan tuottaa animoitujen gifien, videoiden tai Flash-tiedostojen avulla. Nämä voivat kuitenkin olla aikaa vievää rakentaa, ja vaikka ne saattavat olla hyviä osoittamaan tietyn käyttöliittymän siirtymätehokkuutta, parametrien säätäminen voi olla myös erittäin työvoimavaltainen harjoitus. Ja tietenkin, kun olet rakentanut rikas interaktiivisen käyttöliittymän demo, sinun on kääntää kaikki siirtymät ja rajapinnat sovelluksen tai verkkosivuston työkoodiksi.
Visuaalisen sovitelman työkalut
Ei ole mikään yllätys, että monet vuorovaikutteisten suunnittelijoiden työkaluista ovat visuaalisia multimedia-komposiittityökaluja, joita VJ: n ja videoefektien ohjelmoijat käyttävät.
Näistä tunnetuin on Applen oma visuaalinen ohjelmointiohjelma Quartz Composer, joka - jos sinulla on Mac - sinulla voi olla jo tietokone, olettaen, että sinulla on Xcode asennettuna. (Löydät sen Kehittäjä> Sovellukset-kansiossa tai se voidaan ladata osana Xcodea).
Quartz Composer on työnnetty valokeilaan interaktiivisena prototyyppityökaluna artikkelin takia Go Big Going Home, jossa Facebookin suunnittelija Julie Zhuo paljasti, että uuden Facebook Home -työryhmän suunnitteluryhmä oli käyttänyt QC: n laaja-alaisesti testaamaan ja demoimaan Home-käyttöliittymää:
"Jotain Facebook Home on täysin Photoshopin kykyjä suunnittelutyökaluna. Kuinka voimme puhua fysikaalisista käyttöliittymistä ja paneeleista ja kupuista, jotka voidaan siirtää näytön yli, jos istumme katsomassa staattisia pilkkauksia?
"Kun näet elävän, kiillotetun, interaktiivisen demo-ohjelman, voit heti ymmärtää, miten jotain on tarkoitettu toimimaan ja tuntemaan tavalla, jolla sanat tai pitkät kuvaukset tai langankirjoitukset eivät koskaan pysty saavuttamaan. Ja tämä johtaa parempaan palautteeseen ja parempaan iterointiin ja lopulta parempaan lopputuotteeseen. "
Yli QC foorumi Branch, suunnittelijat alkoivat toistaa Facebookin työtä.
Facebook seuraa vapauttamalla Facebook Origami, Quartz Composer-työkalupakki, joka on suunnattu erityisesti vuorovaikutteisille suunnittelijoille.
Learning Quartz Composer voi kestää jonkin aikaa, mutta sen solmupohjainen lähestymistapa (jossa johdot liittävät syötteitä prosessointisolmuihin (korjaustiedostot) ja sitten lähtöön) on looginen. Sen laskentaprosessin visuaalinen esitys voi tehdä suunnittelijoille ymmärrettävämmäksi, ja se on helppo houkutella parametrien avulla ja muuttaa sävellyksen johdotusta.
Origami-palvelun avulla vuorovaikutteisten mallien luominen matkapuhelimiin ja selaimiin on melko yksinkertaista. Se tarjoaa valmiita käyttöliittymän elementtejä sovelluksen toimivuuden ja vuorovaikutteisuuden lisäämiseksi, kuten nappeja, siirtymiä, tekstikerroksia jne. Siirtymisen parametreja on helppo niputtaa kokeilemalla erilaisia vaikutuksia.
Muut solmupohjaiset visuaaliset ohjelmointityökalut ovat myös suosivia vuorovaikutteisille suunnittelijoille, mukaan lukien max Pyöräily 74 ja avoin lähdekoodi Vvvv.
Toinen uusi työkalu, joka näyttää kiinnostavalta, on VUO, tällä hetkellä beta-versiossa.
Next-gen mockup ja prototyyppaus
Uusia työkaluja julkaistaan, joiden tarkoituksena on erityisesti antaa interaktiivisille suunnittelijoille sovellusten ja verkkosivustojen prototyypit.
Yksi niistä parhaimmista on Alushousut. Alushousut ovat Mac-vain -työkalu, joka on hyvin suunnattu sovellusten luomiseen iPhonelle ja iPadille, mutta myös työpöytäsovellusten pilkkaaminen on mahdollista. Macin tärkeimpien Briefs-sovellusten lisäksi on myös iOS-sovelluksen Briefsheet, jonka avulla voit julkaista Briefs-projektin iPadille tai iPhonelle, jotta voit esitellä ja jakaa mallineesi todelliseen laitteeseen.
Liivit ovat erittäin loogisia. Voit tuoda näyttökuvia ja lisätä niihin yksinkertaista vuorovaikutusta tai rikkaampaa vuorovaikutteista kokemusta, luoda näytön asetteluja vakiokäyttöliittymien kirjastoista, kuten välilehtipalkkeja, hakukenttiä, luetteloelementtejä jne. On iOS: n ja Android-kirjastoja , Desktop, ja alusta agnostic "Blueprint" tyyli. Sovelletaan sitten vuorovaikutteisuutta niille elementeille, joita haluat demoida, esimerkiksi näyttämään, miten hakutulokset näytetään, tai miten siirtyminen toimii näytöllä toiseen.
Monilla tavoin tuntuu kuin työskentelee Keynoten esityssovelluksen kanssa, mutta lineaarisen aikajanan sijaan voit luoda monimutkaisia haarautumisvaihtoehtoja, jolloin on mahdollista nähdä näytöt verkkoyhteyksien kautta yhdistetyiksi solmuiksi.
Briefsin paras näkökohta on se, että se ei ole pelkästään demo-toiminnallisuuden työkalu, vaan se on todella loistava suunnittelutyökalu, joka auttaa luomaan hyvät käyttöliittymät puhelimen tai tabletin tiukalle näytön tilalle.
199 dollaria tärkeimmistä Briefs-ohjelmista, se ei ole halpa tuote, mutta hyvin suunniteltu, ja tekee sen, mitä se aikoo tehdä erittäin hyvin. (Rajoitettu esittely on käytettävissä arviointia varten.)
Avoimen lähdekoodin ratkaisuun kannattaa tutustua Framer.js, vuorovaikutteinen prototyyppipuitteet UI-mallien rakentamiseksi nopeasti. Siellä on Framer Studio -tuote, joka on rakennettu framer.js-kehykseen, valmiiden prototyyppityökalujen tarjoamiseksi.
Framer Studio -ohjelman avulla kaikki näytön elementit on luotava ensin Photoshopissa kerrosryhminä ennen Framerin lisäämistä siirtymien ja toimintojen lisäämiseksi. Framer käyttää Coffeescript-ohjelmaa, "pienen kielen, joka kootaan Javascriptiksi" pitämään koodin puhtaana ja yksinkertaisena. Rakennetulla koodilla ei kuitenkaan ole todellista arvoa prototyyppityökalun ulkopuolella.
Jos olet taitava käyttää Photoshopia web-sivustojen tai sovellusten mallineille, Framer Studio on erinomainen tapa lisätä helposti interaktiivisuutta näyttösuunnitelmiin ja luoda demo.
Tulevat työkalut suunnitteluun ja kehittämiseen
Kuten edellä mainittiin, kaikki tähän mennessä käytetyt työkalut saattavat auttaa sinua visualisoimaan ja esittämään sovelluksen tai sivuston, jonka olet rakentamassa, käyttöliittymään.
Tämä on ehkä vieläkin suurempi ongelma käytettäessä näitä työkaluja kuin tuottaa staattisia lanka- ja mallipoikkeamia: nyt sinun ei tarvitse pelkästään kopioida ulkoasua, sinun on myös toteutettava samat toiminnot ja siirtymät.
Siinä on argumentti selaimessa on paras tapa varmistaa, etteivät tietokoneesi ole kirjoittamistarkastuksia, koodien taidot eivät voi käydä.
On kuitenkin olemassa joitakin sovelluksia, jotka voivat helpottaa eroa visualisoinnin ja tuotantokoodin välillä.
RealTime Studio by Outracks, on hyvin toteutettu IDE visualisointiin, melkein sekoitus solmupohjaisten työkalujen, kuten Quartz Composerin, kanssa ja ajastetun työkalun, kuten Edge Animate, välillä.
Koska RealTime Studiossa näet sekä koodin että sen visuaalisen esityksen, niin suunnittelijat ja kehittäjät voivat käyttää sitä ja ymmärtää sitä. Outracks käyttää omaa kieltään Uno, joka on hyvin samanlainen kuin Java tai Actionscript. Mikä parasta, koska koodia voidaan viedä useille erilaisille tavoitealustoille, se on käytännöllinen kehitystyökalu, ei pelkkä visualisointisovellus.
Niin paljon menossa ei ole mikään yllätys, että näyttö on melko tylsää. Siinä on solmunäkymä, aikajananäkymä ja koodinäkymä sekä esikatseluikkuna. Jotkin käyttöliittymän parannukset olisivat tervetulleita, jotta voit minimoida näkymät, joita et tarvitse, laajentamalla niitä, joihin olet tekemässä. Solmun katseluohjelma on erityisen huono verrattuna Quartz Composerin kaltaiseen. Olen kuitenkin innoissani tästä tuotteesta. Tällä hetkellä beta: ssa se on vain PC: n ja Outracks-sivustolla on demo.
Toinen jännittävä uusi tuote on NoFlo, virtauspohjainen Javascript-ohjelmointityökalu. Kehittynyt onnistuneen Kickstarter-kampanjan tuloksena (paljastuminen: olin tuki), se korostaa sekä tyytymättömyyttä nykyisin käytettävissä oleviin työkaluihin ja virtaamattomien ohjelmointityökalujen hyödyntämätöntä potentiaalia, jota ei-ohjelmoijat voisivat ymmärtää paremmin . NoFlo rakentaa Node.js: lle toimittaakseen toiminnalliset sovellukset selaimeen. Alkuperäinen tuotos Androidille ja iOS: lle on työssä.
NoFlo-moottori on avoin lähdekoodi ja se voidaan ladata ilmaiseksi. Mukana on myös isäntämättömiä versioita Flowhub.io. Flowhubia voidaan käyttää joko selaimessa tai Chrome-sovelluksena.
Flowhub ei kuitenkaan tosiasiallisesti täytä lupauksensa intuitiivisena ohjelmointiympäristönä, mutta se näyttää melko hitaalta, epätasaiselta ja vaikealta käyttää. Lähtökaaviossa luodut solmut edustavat funktioita (tai menetelmiä oikean terminologian käyttämiseksi), joiden todellinen JavaScript-koodi on muualla.
Tällä hetkellä Flowhub-käyttäminen on esteenä eikä apua. Epäilen, että useimmat kehittäjät mieluummin käsittelevät kädenjälkikoodia kuin Flowhubia. Nämä ovat kuitenkin alkuaikoina,
Tästä huolimatta Flowhub ja NoFlo tarjoavat selkeän näkemyksen siitä, missä virtaussuunnittelu voi viedä sekä visualisointia että kehitystä ja toivottavasti kehittää intuitiivisen nopean sovelluksen kehittämistyökalun, jonka tavoitteena on.
Uskon, että vuorovaikutussuunnittelun tulevaisuus on virtauspohjaisissa työkaluissa.