Efni.
- Að setja upp frumgerðina okkar
- Vafrað um síður
- Að fá inntak notenda
- Samskipti og fjör
- Þemandi
- Lokahugsanir
Starf vefhönnuðar er ekki aðeins að gera vefsíður fallegar. Þeir verða einnig að hugsa um upplýsingaflæði og hvernig á að gera vefforritið auðvelt í notkun. Oft lenda þeir í því að nota tæki eins og InVision eða Balsamiq til að búa til mockup sem gefur mynd af því hvernig vefsíðan mun haga sér.
Jafnvel þó að þessi forrit standi sig ágætlega er framleiðslan samt ekki raunveruleg vefsíða. Þetta gerir það erfitt að sannreyna og gera tilraunir með samskipti, kanna hvernig hönnuninni líður og hafa samskipti við viðkomandi hagsmunaaðila um hvernig endanleg reynsla mun spila.
Í þessari grein mun ég vinna með AngularJS, opinn uppruna ramma til að byggja upp vefforrit, sem hægt er að nota til að búa til lifandi, leiðsöguleg mockups í hjartslætti. Við munum skoða hvernig hægt er að fletta í gegnum mismunandi síður, hvernig á að nota gögn sem notandinn slær inn í inntaki og skoða fjör og samskipti, þema og bæta hegðun við mismunandi HTML-þætti eins og hnappa.
Að setja upp frumgerðina okkar
Það fyrsta sem við þurfum að gera er að setja upp nýtt ‘index.html’ sem verður aðgangsstaður fyrir forritið okkar.Fyrir utan að tengja við tilteknar CSS og JavaScript skrár sem við þurfum fyrir frumgerð okkar, verðum við alltaf að vísa til jQuery, angular.js, angular-animate og angular-ux - í þeirri röð.
Við þurfum líka að þjóna skránni þar sem „index.html“ og aðrar skrár eru til staðar. Til þess getum við notað npm stjórn þjóna eða python -M SimpleHTTPServer.
Nú þurfum við að setja upp Angular forritið. Þetta verður eina JavaScript sem við þurfum að kóða til að frumgerð okkar gangi. Það góða er að það er aðeins um að ræða afrita og líma.
body ng-app = "prototype" ng-ctrl = "MainCtrl"> / body> // app.js angular.module ('prototype', ['ngAnimate', 'ux']) .controller ('MainCtrl', virka ($ umfang) {$ scope.data = {};});
Frumgerð app okkar er stillt. Það er kominn tími til að byrja að læra hvað við getum gert við það núna.
Vafrað um síður
Það fyrsta sem allar frumgerðir þurfa er að geta flett í gegnum mismunandi síður. Þannig munum við læra og staðfesta hvernig upplýsingarnar munu flæða og hvernig notandinn hefur samskipti við forritið okkar.
Til þess getum við notað ux-síðu tilskipunina frá horn-ux bókasafninu sem við bættum við áður.
body> ux-page name = "Home" home> ng-include src = "'home.html'"> / ng-include> / ux-page> ux-page name = "Upplýsingar"> ng-include src = " 'detail.html' "> / ng-include> / ux-page> / body>! - home.html ->! -… -> a href =" "ux-go =" Upplýsingar "> Fara á upplýsingasíðu / a>
Í þessu tilfelli erum við að búa til tvær mismunandi síður. Innihald hverrar þessara blaðsíða er í aðskildum skrám sem við tökum með ng-include tilskipuninni. Athugaðu að við bættum heimareiginleikanum við ux-síðuna sem verður aðal (birtist sjálfgefið). Við gætum líka sett HTML innihaldið inn í index.html. Að búa til nýjar skrár fyrir hverja síðu hjálpar til við að halda hlutunum læsilegum og auðvelt í viðhaldi.
Síðan, í ‘home.html’, höfum við krækju sem flettir notandanum á upplýsingasíðuna. Til þess notum við ux-go tilskipunina með heiti síðunnar sem við viljum fletta til. Það er mikilvægt að hafa í huga að þú verður að setja href = "" í krækjuna svo hún sé smellt.
Að fá inntak notenda
Annar mikilvægur hluti af frumgerð er að geta vistað upplýsingar um notendur til að birta og nota seinna í forritinu.
Til þess að gera það getum við bætt ng-fyrirmyndartilskipuninni við hvaða inntak sem er sem er til:
! - home.html -> input type = "text" ng-model = "data.message" name = "name" />
Þetta þýðir að hvað sem notandinn slær inn í inntakinu sem heitir, verður vistað í skilaboðabreytunni úr gögnum okkar. Mundu að vista alltaf innsláttu gildin í einhverjum breytum innan gagna.
Við getum bara birt þessar upplýsingar á hvaða síðu sem er í frumgerðinni okkar með því að nota {{}}:
! - details.html -> p> Skilaboðin sem notandinn slær inn eru {{data.message}} / p>
Samskipti og fjör
Við viljum einnig geta séð hvernig samskiptin munu flæða á vefsíðunni sem við erum að smíða. Þetta þýðir að við þurfum að láta mockup okkar sýna og fela efni og bæta við hreyfimyndum fyrir umbreytingarnar milli mismunandi forrita.
Til að sýna og fela hluta af innihaldi síðunnar geturðu notað ng-show og ng-hide tilskipanirnar ásamt nokkrum boolískum (já / nei) gildi, sem munu gefa til kynna hvort innihaldið þurfi að birtast eða ekki.
hnappur ng-smellur = "data.contentShown = satt"> Sýna innihald / hnappur> div ng-show = "data.contentShown"> p> Þetta er innihaldið! / p> a href = "" ng-smellur = "gögn .contentShown = false "> Fela innihald / a> / div>
Í fyrsta lagi notum við ng-smell til að takast á við smellatburðinn á hnappnum Sýna efni. Í þessu tilfelli erum við að stilla breytuna innihaldSýnt á satt. Síðan, með því að nota ng-show, segjum við bara að div.content verður sýnt ef contentShown er satt. ng-fel virkar á sama hátt og ng-show.
Við viljum nú gera lífshætti fyrir hvernig þetta efni birtist eða er falið, til að gefa fullkomnari mynd af því hvernig notandanum líður fyrir forritið. Til þess notum við ngAnimate. Flokkunum ng-fela-fjarlægja og ng-fela-bæta við er bætt við augnablik þegar þáttur er sýndur eða falinn í sömu röð.
Þess vegna getum við skrifað hreyfimynd fyrir innihald okkar á eftirfarandi hátt:
// Efni er sýnt .content.ng-hide-remove {// bounceIn keyframes koma frá animate.css lib hreyfimyndum: bounceIn 1s; -webkit-fjör: bounceIn 1s; } // Efni er falið .content.ng-fela-bæta við {fjör: bounceOut 1s; -webkit-fjör: bounceOut 1s; }
Þú getur lært meira um að bæta við hreyfimyndum á skjalasíðu ngAnimate.
Ef þú vilt gera breytingar á síðum geturðu notað sömu aðferð og við gerðum þegar við birtum og faldum síður. Við viljum enn nota ng-show, en hér verður að nota aðaldeild bekkjar ákveðinnar síðu.
Þemandi
Þegar þú ert að gera frumgerð þarftu að prófa mismunandi þemu (litir, leturfræði, stærðir og svo framvegis) á sama tíma til að sjá hvað virkar best.
Til þess geturðu notað ux-þema lögunina frá horn-ux:
deila ux-þema> h1> Titill / h1> p> Þetta er einhver texti / p> / div>
Fyrst þarftu að bæta ux-þema tilskipuninni við HTML HTML frumefnið sem þú vilt þema. Síðan, til að breyta þemum, þarftu að tilgreina nafn þemans sem fyrirspurnarfæribreytu í frumgerð URL.
Til dæmis, ef þú ferð á http: // localhost: 3000 / # /? Page = Upplýsingar & uxTheme = option1, þá mun div.content verða með viðbótar option1 class, sem þýðir að við getum stílað það sem hér segir:
div.content.option1 h1 {leturstærð: 38px; } div.content.option1 p {litur: rauður}
Lokahugsanir
Með tækninni sem við höfum lært í dag erum við tilbúin að byrja að búa til frumgerðir okkar í beinni og siglingu. Þegar þú byrjar að nota það myndi ég elska að fá álit á ferlinu! Vinsamlegast kvakaðu hugsanir þínar og tillögur til mín á @mgonto.
Orð: Martin Gontovnikas
Martin Gontovnikas er talsmaður verktaki hjá Auth0. Þessi grein var upphaflega birt í tölublaði 269 í net tímaritinu.
Líkaði þetta? Lestu þessar!
- 10 bestu vefsíðuverkfæri 2015
- The fullkominn leiðarvísir fyrir lógó hönnun
- Gagnleg og hvetjandi sniðmát fyrir flugmenn
