Prototyyppien tekeminen koodissa

Ensinnäkin, saatetaan jotain pois tieltä. Koodin prototyyppien tekeminen on eräänlaista väärinkäytöstä niiden asioiden yhteydessä, joista aiomme keskustella. Koodi kuulostaa pelottavalta, se on jotain, mitä ohjelmoijat tekevät. Se, mistä täällä puhumme, on paljon vähemmän pelottavaa - kaikki, mitä pyrimme edistämään, on peruskäsite, että hyvin yksinkertaisella HTML: llä ja hieman CSS: llä voit tuottaa prototyyppejä, jotka kommunikoivat ideasi paljon paremmin kuin mikään kaavio- tai lankakehystyökalu koskaan voinut.

Kumpikaan HTML tai CSS ei vaadi minkäänlaista ohjelmointia. HTML kuvaa sivun rakennetta ja CSS käsittelee asettelua ja sisustusta. Siellä ei ole voodoo-osaa, ei piilotettuja ansoja tai mitään, mikä voi mennä salaperäisesti pieleen, mitä kirjoitat, se on mitä saat. Se on myös erittäin välitön tyydytyksen muoto.



Kirjoitusmerkinnät ovat jotenkin päätyneet mukana kehitystehtävissä paljon viraston työnkulussa. Suunnittelijat, jotka kirjoittavat merkintöjä, ovat yhtä harvinaisia ​​kuin keinuhevospoika, mikä vaikuttaa melko ristiriidalta verkon suunnan kanssa. Reagoiva muotoilu saa suosiota ja verkkotyyppien kypsyminen lopulta tilaan, jossa verkkofontit ovat käyttökelpoisia, verkkosivujen kuvien tuottamispäivät on numeroitu. Ellei suunnittelijat alkaneet reagoida, tulee olemaan hyvin epämiellyttävä ajanjakso, kun sopeudumme uuteen ajattelutapaan ja suunnitteluun verkkoon.



Koodin prototyyppien luominen tuo mukanaan koko joukon etuja ja hyvin vähän haittoja. Tätä artikkelia ei ole suunniteltu HTML: n tai CSS: n opetusohjelmaksi (ympärillä on paljon: tutustu esimerkiksi Anna Debenhamin kaatumiskurssiin ), mutta pikemminkin läpikäynti joistakin perusteluista, temppuista, prosesseista ja tekniikoista, joita voit käyttää HTML-prototyyppien rakentamiseen työnkulkuun.

Edut

Käyttäjäkokemuksen suunnittelu verkkosivustoille tai sovelluksille kaavio- tai lankakehystyökalujen avulla on ongelmallista useista syistä. Ensinnäkin ja luultavasti tärkeintä on, että kaiken muun lisäksi väärennät kokemusta. Riippumatta siitä, kuinka hämmentyneitä tai interaktiivisia työkalusi antavat sinun saada, tulos ei yleensä ole kuin todellinen verkkosivusto. Muutamat olemassa olevat työkalut, jotka todella sylkevät HTML: n, tekevät niin huonon työn HTML: n renderoinnissa, vietät enemmän aikaa hakkeroimalla kaavioita tarjouskilpailuihin ja tiedostot muuttuvat niin raskaiksi, että niitä on painajainen ylläpitää ja työskennellä.



Vielä tärkeämpää on, että käyttämällä työkalua HTML-koodisi etsimiseen et todellakaan opi, mitä HTML on ja mitä tekee, ja siksi menetät mahdollisuuden tutustua ideoihimme rakentuvan tekniikan rajoihin ja vivahteisiin. Jared Spool, joka on suuri suunnittelijoiden ja UX-harjoittajien kannattaja, joka tietää koodin, sanoo sen hienosti: 'Ymmärrät paremmin median, jossa työskentelet' ja jatkaa: 'Jos tiedät, mitä on helppo koodata ja mitä on vaikea koodata, voit saada ideoitasi nopeammin (ja enemmänkin niistä, koska kehitysaika on rajallinen resurssi). Tietämys siitä, millainen mediasi toimii hyvin ja missä se ei ole yhtä tehokasta, tekee suunnittelupäätöksistä tietoisempia. '

Kun katsot sitä näillä ehdoilla, näyttää siltä, ​​että kukaan verkkoon suunnitteleva ei ymmärtäisi sitä. Vaikka et päätyisikään vastaamaan tuotannon merkinnöistä (puhumme siitä myöhemmin), voit käydä tietoisempia keskusteluja niiden kanssa, jotka tekevät, ja tietysti antaa tietoista ohjeita siitä, mitä haluat rakentaa.

Toinen natiivin HTML: n prototyyppien ilmeinen etu on verkkosivustosi tai sovelluksesi ulkoasu selaimessa. Ei PDF-tiedostona, paperilla tai pörröisessä Powerpoint-esityksessä. Käyttäjät, joilla testaat sitä, tai asiakas, jolle esität, sitoutuvat tuotteeseen sen luonnollisessa elinympäristössä. Vuorovaikutukset ovat todellisia, napsautus / kosketus -käyttäytyminen on täysin luonnollista, teksti näyttää ja reagoi tavalla, jonka ihmiset tuntevat, ja lomakkeet toimivat kuten heidän pitäisi. Lähentämällä prototyyppiä todelliseen suunniteltuun kokemukseen saat paljon uskollisempaa palautetta sekä käyttäjiltä että asiakkailta. Kognitiivisessa prosessissa tai mielikuvituksessa ei ole aukkoa, jotta käyttäjä voi olla yhteydessä protoon luonnollisella tavalla. Se tekee elämästäsi suunnittelijana niin paljon helpompaa, kun työskentelet paradigmassa, joka todella vastaa suunnittelemasi tuotteen aiottua toimitusta.



Todellisten vuorovaikutusten luomisen ilmeisten etujen lisäksi, ei niiden likiarvoja, tosiasia, että voit tarkastella ja testata työsi helposti muilla laitteilla, on jumalatar. Tällä hetkellä ei ole muita tapoja suunnitella reagoiva sivusto tehokkaasti kuin merkinnöissä, joten jos projektisi vaatii sinua vastaamaan tähän tarpeeseen, sinun on omaksuttava tekniikka melko nopeasti tai joku muu joutuu ottamaan kyseisen projektin.

Tosiasia, että voit tarkastella ja testata työsi muilla laitteilla, on jumalatar (kiitos Nathan Fordille käsimallinnuksesta)

Tosiasia, että voit tarkastella ja testata työsi muilla laitteilla, on jumalatar (kiitos Nathan Fordille käsimallinnuksesta)

Myyttien kumoaminen

Koodin prototyyppien kirjoittaminen ei ole (useimmille ihmisille) reitti tulla frontend-kehittäjäksi, tai minun pitäisi todennäköisesti huomauttaa, minkäänlaista uhkaa frontend-kehittäjälle. Puhtaasti käytännöllisesti ottaen käytät vain HTML: ää työkaluna ideasi ilmaisemiseen, tosin webin luonnollisella kielellä. Ja silloin syntyy ajoittain kiistoja, kun kehittäjät kokevat varpaidensa polkemisen ja saattavat pilkata ponnistelujasi. Sen lisäksi, että se on loukkaavaa ja uskomattoman masentavaa, kun olet uusi tässä kaikessa, se on myös täysin turhaa. Koodisnobberialla ei ole sijaa prototyypeissä. Jos teet selväksi, että tekemäsi HTML ja CSS vain tekevät työtä eikä ole tarkoitettu tekemään sitä tuotantoon, ihmiset rentoutuvat. Tämä tarkoittaa myös, ettet murehdi tehdäksesi merkinnöistäsi ja CSS: stä täydellistä. Sen on oltava puhtaasti toimiva, ja koska se on prototyyppi, joka väistämättä muuttuu tunnistamattomana ja / tai heitetään pois - mitä nopeammin ja joskus likaisempi, sitä parempi.

Lisäksi minun pitäisi todennäköisesti mainita työkalut tässä lyhyesti. Voit aloittaa HTML-prototyyppien asentamisen nyt asentamatta mitään tietokoneellesi tai Macillesi. Tietenkin voit ostaa erikoistuneita ohjelmistoja, jotka tekevät tekstin muokkaamisesta hieman miellyttävämmän, mutta tekstieditorin valinta on melko henkilökohtainen asia, joten kokeile muutama ja katso, mikä pidät parhaiten. Useimmilla on ilmainen kokeiluversio, joten pidä näytelmä ja katso, mikä sopii sinulle.

Huijata

Mikä vie minut siististi seuraavaan kohtaan. Jos epäilet, huijaa. Suurin osa älykkäistä kehittäjistä ei koskaan tee samaa kahdesti. He käyttävät koodia uudelleen. Se on hyvä käytäntö. Mutta sen lisäksi ja luomalla oma osiosi (lisää siitä hieman), katso ympärillesi verkossa.

Koska työskentelet HTML: ssä ja CSS: ssä, tulet melko pian taitavaksi avaamaan huppu (napsauta hiiren kakkospainikkeella, katso lähde) sivustolle ja auttamaan itseäsi lähdekoodissa. Miksi pyörää keksiä uudelleen? Jos sinulla on lomake, joka on samanlainen kuin tarvitsemasi, napauta se. Jos siellä on vähän kuvagalleria, joka on melko samanlainen kuin suunnittelemaasi, lainaa se.

Tietysti täällä on valtava huomautus. Sinun on osoitettava jonkinlaista tervettä järkeä ja asetettava moraalinen kompassisi säädyllisyyteen. Ei ole hienoa vain varastaa koko verkkosivusto tukkukaupalla tai itse asiassa viedä mikä tahansa lainatusta koodista tuotantoon ilman tekijän nimenomaista lupaa. Ollakseni rehellinen, ympärillä on paljon hyödyllisiä opetusohjelmia ja avoimen lähdekoodin mallikirjastoja (esimerkiksi hackbook.hackasaurus.org/) : Sinun ei pitäisi koskaan tarvita, mutta sinua on varoitettu!

Mozilla

Mozillan Hackbooks on kätevä koodinpätkäkirjasto hakkeriesi koodiin

Muista lähteistä tehtyjen valmiiden merkintöjen houkuttelemisen lisäksi siellä on paljon online-työkaluja, jotka auttavat prototyypin työlämmissä ja räätälöityissä vaatimuksissa. Kaksi suurinta aikaa uppoavaa ja turhauttavaa syytä ovat lomakkeet ja taulukot. Jopa kaikkein kovinta käyttöliittymäkehittäjäsi huokaa joutuessaan rakentamaan monimutkaisen pöydän tai muodon, joten älä masennu, jos löydät heidät tylsiä ja vähän hankalia. Onneksi on olemassa lukemattomia älykkäitä verkkotyökaluja, jotka tekevät paljon raskasta nostoa meille ja tuottavat automaattisesti melko kunnolliset merkinnät yksinkertaisesta käyttöliittymästä. Nopea Google-haku tuo esiin valtavan joukon työkaluja, jotka peittävät suuren osan näistä tuskallisista tehtävistä ja antavat sinulle koodinpätkät, jotka voit pudottaa omiin ja mukauttaa tarvittaessa, mikä säästää lukemattomia tunteja ja paljon vaivaa.

Kaksi, jotka pidän kirjanmerkkikansiossa viitteenä, ovat Kotatsu , joka on siisti taulukonrakentaja, jonka avulla voit pistää luokkia soluihin ja riveihin helposti ja pForm , joka on todella tyylikäs vedä ja pudota -lomakkeiden rakennustyökalu, joka tekee jopa monimutkaisista muodoista täydellisen tuulen. Epäilemättä löydät omat suosikkisi, mutta voit olla varma, jos huomaat taistelevasi jotain vastaan, voit olla varma, että joku muu on kokenut saman asian ennen sinua ja tehnyt sitten pienen käsikirjoituksen tai widgetin tuskan lievittämiseksi.

960.gs

Nathan Smith on älykäs suunnittelija ja kehittäjä, joka on koonnut 960.gs , upea pieni työkalupaketti, joka tekee prototyyppien tekemisestä (ja tuotannosta, jos haluat) ulkoasun ruudukon avulla absoluuttisen kakun. Pakettiin sisältyy kaikki mitä ikinä tarvitset, ruudukkomalleista ja Fireworks- ja Photoshop-oppaista aina luonnoslehtiin ja ennen kaikkea hänen luomaansa CSS-kirjastoon, joka tekee kaiken taikuuden.

960: n käyttö on naurettavan yksinkertaista. Viittaamalla vain CSS-tiedostoon HTML-koodissasi ja voit laatia vankat prototyypit muutamassa minuutissa käyttämällä yksinkertaisia ​​luokkien nimiä merkinnöissäsi. Osoitteessa net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ on melko lopullinen opetusohjelma, joten emme yritä kattaa sitä täällä, mutta kun vain olet päässyt perusasioiden ympärille, ihmettelet, miksi teit sen muulla tavalla.

960-ruudukkojärjestelmä tekee prototyyppien muodostamisesta ruudukon avulla absoluuttisen kakun

960-ruudukkojärjestelmä tekee prototyyppien muodostamisesta ruudukon avulla absoluuttisen kakun

Prosessi

Koodin prototyyppien tekeminen nopeuttaa varmasti työskentelyäsi ja testausprosessiasi, kun pääsi kiertää perusasiat. Sinun on kuitenkin todennäköisesti mukautettava omaa työnkulkuasi sopeutuaksesi siihen. Olen melkein kaikki, mutta lopetin lankakehyksen useimmissa projekteissa. Työskentelen nopeammin ja löyhemmin yksinkertaisilla luonnoksilla sen sijaan, että kaavoitan huolellisesti suunnittelun jokaisen yksityiskohdan. Usein ei kokonaisia ​​sivuja, vaan elementtejä: Aloitan prototyyppien tekemisen käyttäjien tavoitteiden ja tarpeiden mukaan, sitten ne yhdistyvät täydellisempinä asetteluna.

Luonnos ensin: piirtää sivulle joitain yksinkertaisia ​​luonnoksia elementeistä, jotka myöhemmin, kun aloitat prototyyppien muodostamisen, yhdistyvät täydellisinä asetteluina

Luonnos ensin: piirtää sivulle joitain yksinkertaisia ​​luonnoksia elementeistä, jotka myöhemmin, kun aloitat prototyyppien muodostamisen, yhdistyvät täydellisinä asetteluina

Se on hieno harjoitus päätösten vahvistamiseen ja yksinkertaisuuden edistämiseen. Sen sijaan, että sieppaisit kaiken sivulta ja sekoittaisit niitä ympäriinsä, koska se on aivan liian helppoa piirtää laatikoita kaaviotyökalussa, sinulla on taipumus järkeistää jokaista päätöstä. Keskity siihen, mikä on todella tärkeää, jotta saat tekemäsi tarvittavat asiat, ja luodaan hierarkiat, topografia ja virtaus varsinaisella sivulla. Kun olet tekemisissä todellisen sivun kanssa, on yllättävää, kuinka paljon se muuttaa näkemystäsi siitä, miten idea syntyy.

Meillä on tapana työskennellä jaetusta Dropbox-kansiosta useimmille prototyypeille ja antaa asiakkaille pääsy kyseiseen kansioon. Kuinka päätät jakaa omasi, riippuu henkilökohtaisista asetuksistasi. Voit käydä hyvin lo-fi-tilassa ja työskennellä paikallisella koneellasi ja lähettää vain zip-tiedoston, tai jos sinulla on ystävällinen sys-järjestelmänvalvoja ja välityspalvelin, voit aina viedä tiedostot sinne. Pika huomautus verkkopalvelimen käytöstä prototyypin ajamisesta asiakirjakansiostasi tai mistä tahansa. Sinulla on paljon enemmän vaihtoehtoja kehittyneemmille prototyypeille myöhemmin, jos lisäät palvelinpuolen komentosarjoja yksinkertaisella PHP: llä tai aspxilla. Harkinnan arvoinen, koska on todella helppoa saada erittäin hyödyllisiä toimintoja hyvin pienellä vaivalla tai todellakin koodauskyvyllä.

nopein 3D-tulostin maailmassa

Muutosten hallinta on tietysti tärkeää. Prototyyppien ajaminen kansioissa ja vain kopiointi ja sitten versionumeroiden lisääminen on melko yksinkertainen mutta tehokas tapa tehdä asioita. On todennäköisesti ylimielistä alkaa miettiä oikeaa versiohallintaa tässä vaiheessa, mutta kannattaa harkita tulevaisuudessa, jos prototyypit muuttuvat monimutkaisiksi tai jos niiden parissa työskentelee useita ihmisiä.

Edistyneitä vinkkejä

HTML-kielen perusopetuksen lisäksi voit entistä paremmin tutustua rakentamiesi sivujen sisään- ja ulospäin, joten epäilemättä kehität sarjan hienoja temppuja ja vinkkejä, jotka säästävät paljon aikaa ja vaivaa eteenpäin. Jokainen projekti tuo mukanaan omat ainutlaatuiset vaatimukset, mutta jos voin antaa sinulle kaksi neuvoa, jotka säästävät lukemattomia tunteja, niin ne olisivat:

  1. Rakenna kirjasto tavaraa. Ei ole väliä kuinka teet sen. Se voi olla kansio katkelmia tai jotain jäsenneltyä, kuten Coda-leikkeet (pienet koodipalat, joita voit käyttää uudelleen vetämällä asiakirjaasi). Kummassakin tapauksessa kehität pian kasan bittiä, joista voit melko paljon Frankensteinin yhdistää mihin tahansa.
  2. Käyttö sisältää. Jos jokaisella sivulla on tavaraa, jota täytyy tai ei tarvitse muuttaa koko prototyypissä (navi, alatunniste jne.), Vedä kyseinen osa ulos ja sisällytä se dynaamisesti asiakirjaan, joten sinun tarvitsee vain ylläpitää sitä yhdessä paikassa. Jos muutat sitä, sitä käytetään automaattisesti jokaisella sitä käyttävällä sivulla. Tämä rajoitettiin aiemmin palvelinpuolen komentosarjojen käyttämiseen PHP tai ASP.

Mutta jQueryn ihmeiden ansiosta voit nyt saavuttaa saman uskomattoman helposti Johann Burkardin upeasti yksinkertainen inc.js-komentosarja . Minkä reitin valitset, säästät kirjaimellisesti tunteja tällä tekniikalla.

inc sisältää IE: ssä ilman ActiveX-komponentteja etäsisällön deklaratiivisen sisällyttämisen sekä sisällön muuntamista edeltävät ja jälkeiset soittopyynnöt

inc sisältää IE: ssä ilman ActiveX-komponentteja etäsisällön deklaratiivisen sisällyttämisen sekä sisällön muuntamista edeltävät ja jälkeiset soittopyynnöt

Uskollisuus

Viimeisenä, mutta ei vähäisimpänä kysymys on uskollisuudesta. HTML: n ja CSS: n prototyyppien kauneus on, että yhdellä HTML-ryhmällä voit käyttää vaihtelevaa muotoilua samaan asiakirjaan vain vaihtamalla CSS: n pois. Joten voit aloittaa hyvin yksinkertaiset, mustavalkoiset laatikot, kuten perinteinen lankakehys, ja sitten lisätä uskollisuutta tiettyihin käyttötarkoituksiin. Käyttäjät (ja asiakkaat) kamppailevat usein suhteessa hyvin muotoiltuihin lankakehyksiin, joten testausta varten voit käyttää enemmän käyttöliittymän kiiltoa, jotta prototyyppi tuntuu lähempänä todellista tuotetta. Voit tietysti tehdä tämän itse tai työskennellä suunnittelutiimisi kanssa alkaaksesi liikkua heidän visuaalikielellään varhaisessa vaiheessa, jotta näet kuinka se maksaa käyttäjien kanssa tosielämässä.

Joten jokaiselle, joka on hermostunut prototyyppien antamisesta koodissa, sanoisin: älä ole. Aloita pienestä ja hitaasta ja jatka tietäsi ylöspäin. Pyydä käyttöliittymän kehittäjältä apua ja neuvoja, jos tarvitset sitä (he eivät purra). Ja jos haluat saada vauhtia nopeasti, UX Bootcamp -kurssi on erittäin halpaa ja pääset alkuun muutamassa päivässä.

Jos pidät tästä ominaisuudesta, muista tarkistaa myös Anna Debenhamin kaatumiskurssi prototyyppien rakentaminen HTML: ssä ja CSS: ssä .