Prototípus készítés kódban

Először is, tegyünk valamit az útból. A kódban történő prototípusírás helytelen elnevezés abban az összefüggésben, amelyet megvitatni fogunk. A kód ijesztően hangzik, ezt a programozók csinálják. Amiről itt beszélünk, az sokkal kevésbé ijesztő - csupán az az alapkoncepció, amelynek népszerűsítésére törekszünk, hogy néhány nagyon egyszerű HTML és egy kis CSS segítségével prototípusokat készíthet, amelyek sokkal jobban kommunikálják ötleteit, mint bármelyik diagram vagy drótvázas eszköz valaha is.

Sem a HTML, sem a CSS nem igényel semmilyen programozást. A HTML leírja az oldal felépítését, a CSS pedig az elrendezést és a díszítést kezeli. Nincs benne voodoo, nincsenek rejtett csapdák vagy bármi, ami rejtélyes módon elromolhat, amit írsz, azt kapod. A kielégülés nagyon azonnali formája is.

A jelölések írása valahogy végül sok ügynökségi munkafolyamatban fejlesztési feladatokkal társult. A jelölőket író tervezők ugyanolyan ritkák, mint a hintaló poó, ami inkább ellentmond a web irányának irányában. A reszponzív dizájn elnyerését és a webes tipográfia olyan állapotba érését, amikor a webes betűtípusok használhatók, a weboldalak képeinek elkészítésének napja meg van számlálva. Hacsak a tervezők nem kezdenek reagálni, nagyon kényelmetlen időszak lesz, amíg alkalmazkodunk az új gondolkodásmódhoz és a webes tervezéshez.



A kódban történő prototípus-készítés számos előnnyel jár, és nagyon kevés hátrányt jelent. Ezt a cikket nem úgy tervezték, hogy a HTML vagy a CSS oktatóanyagának szolgáljon (rengeteg ilyen van a környéken: nézze meg például Anna Debenham összeomlási tanfolyamát ), hanem inkább néhány indoklás, trükk, folyamat és technika áttekintése, amelyeket felhasználhat a HTML prototípusok beépítéséhez a munkafolyamatába.

Az előnyök

Felhasználói élmény megtervezése webhelyek vagy alkalmazások számára diagramok vagy drótvázas eszközök segítségével számos okból problematikus. Először és valószínűleg az a legfontosabb, hogy bármi máson túl meghamisítja az élményt. Nem számít, mennyire fésültek vagy interaktívak az eszközei, így a kimenet általában nem hasonlít egy igazi weboldalhoz. Az a néhány létező eszköz, amely valójában kiköpi a HTML-t, olyan gyenge munkát végez a HTML renderelésében, több időt töltesz az ábráid feltörésével az ajánlattételhez, és a fájlok olyan nehézkessé válnak, rémálom, amelyet fenntartani és dolgozni kell.

Ennél is fontosabb, hogy egy eszköz használatával a HTML-kód kibontásához valójában nem tanulja meg, mi is a HTML, és mit csinál, ezért elszalasztja a lehetőséget, hogy megismerkedjen az ötleteink által felépített technológia határaival és árnyalataival. Jared Spool, aki a tervezők és az UX-gyakorlók nagy szószólója, ismerik a kódot, szépen megfogalmazza: „Jobban meg fogja érteni a médiumot, amelyben dolgozik”, és folytatja: „Ha tudod, mi könnyen kódolható és mit nehéz kódolni, gyorsabban megvalósíthatja ötleteit (és többet is, mivel a fejlesztési idő korlátozott erőforrás). A megalapozottabb tervezési döntések megértése annak megértése, hogy médiumja jól és hol nem olyan hatékony. '

Ha ilyen feltételekkel nézzük, úgy tűnik, hülyék, hogy bárki, aki webre tervez, nem értené ezeket a dolgokat. Még akkor is, ha Ön végül nem felel a gyártási jelölésért (erről később még többet beszélünk), tudatosabb megbeszéléseket folytathat azokkal, akik ezt megteszik, és természetesen tájékozott iránymutatást adhat arról, hogy pontosan mit szeretne építeni.

A natív HTML-ben szereplő prototípusok készítésének második nyilvánvaló előnye, hogy webhelyét vagy alkalmazását úgy tervezi meg, ahol a helye van: egy böngészőben. Nem PDF-formátumban, papíron vagy pörgős Powerpoint-prezentációban. Azok a felhasználók, akiken teszteled, vagy az ügyfél, akinek bemutatod, kapcsolatba léphet a termékkel annak természetes élőhelyén. Az interakciók valósak, a kattintás / érintés viselkedés teljesen természetes, a szöveg úgy néz ki és reagál, ahogyan az emberek ismerik, és a formák úgy működnek, ahogy kellene. Ha a prototípust közelebb hozza a ténylegesen tervezett élményekhez, akkor sokkal hűbb visszajelzéseket kap mind a felhasználóktól, mind az ügyfelektől. A kognitív folyamatban vagy a képzeletben nincs hiány, hogy a felhasználó természetes módon vegye fel a kapcsolatot a protóval. Ez sokkal könnyebbé teszi tervezői életét, amikor olyan paradigmában működik, amely valójában megfelel az Ön által tervezett dolog tervezett szállításának.

A tényleges interakciók létrehozásának nyilvánvaló előnyein túl, nem pedig azok közelítésein, az a tény, hogy más eszközökön könnyedén megtekintheti és kipróbálhatja munkáját, öröm. Jelenleg nincs más módja egy adaptív webhely hatékony megtervezésének, mint a jelöléssel, így ha a projektje megköveteli, hogy kielégítse ezt az igényt, akkor elég gyorsan be kell használnia a technikát, különben másnak kell felveszi ezt a projektet.

Az a tény, hogy más eszközökön is megtekintheti és kipróbálhatja munkáját, örökkévaló (Nathan Ford elismerése a kézi modellezésért)

Az a tény, hogy más eszközökön is megtekintheti és kipróbálhatja munkáját, örökkévaló (Nathan Ford elismerése a kézi modellezésért)

A mítoszok lebontása

A kódban történő prototípus-készítés (a legtöbb ember számára) nem a frontend fejlesztővé válás útja, vagy valószínűleg meg kell említenem, bármilyen fenyegetés a frontend fejlesztője felé. Tisztán pragmatikus értelemben csak a HTML-t használja eszközként ötleteinek kifejezésére, bár az internet természetes nyelvén. És itt néha felmerül bizonyos vita, amikor a fejlesztők úgy érzik, hogy a lábujjaikat tapossák, és csúfolódhatnak az erőfeszítéseitől. Amellett, hogy bántó és hihetetlenül elkeserítő, ha új vagy ebben az egészben, ez is teljesen értelmetlen. A kódsznobizmusnak nulla a helye a prototípus-készítésben. Ha világossá teszi, hogy a HTML és CSS, amelyet készít, csak munkát végez, és nem célja annak gyártása, akkor az emberek ellazulnak. Ez azt is jelenti, hogy nem fog aggódni a jelölés és a CSS tökéletesítéséért. Ez azért van, hogy tisztán működőképes legyen, és mivel ez egy prototípus, amely elkerülhetetlenül felismerhetetlenségig változik és / vagy eldobódik - minél gyorsabban és néha piszkosabban, annál jobb.

Valószínűleg itt röviden meg kell említenem az eszközöket. A HTML prototípusának elkészítését már most megkezdheti anélkül, hogy bármit telepítene a PC-re vagy a Mac-re. Természetesen vásárolhat olyan speciális szoftvert, amely a szöveg szerkesztését kissé kellemesebbé teszi, de a szövegszerkesztő választása elég személyes dolog, ezért próbáljon ki néhányat, és nézze meg, melyik tetszik a legjobban. A legtöbbnek ingyenes próbaverziója van, ezért játssza le a játékot, és nézze meg, melyik működik Önnek.

Csal

Ami szépen elvezet a következő pontomhoz. Ha kétségei vannak, csaljon meg. A legtöbb okos fejlesztő soha nem teszi ugyanazt kétszer. Újra felhasználják a kódot. Ez jó gyakorlat. De ezen túl, és saját alkatrészkészlet létrehozásával (erről bővebben egy kicsit), nézzen körül az interneten.

Mivel HTML-ben és CSS-ben dolgozol, hamarosan elég ügyesen fogod felbukkanni a motorháztetőt (jobb gombbal kattintani, megtekinteni a forrást) egy webhelyen, és segíteni magadnak valamilyen forráskódban. Miért kellene újból feltalálni a kereket? Ha van olyan űrlap, amely hasonló a szükséges formához, töröld le. Ha van egy kis képgaléria, amely nagyjából hasonlít az Ön által tervezetthez, kölcsönözze.

Természetesen óriási figyelmeztetés van itt. Ki kell mutatnia valamilyen józan észt, és erkölcsi iránytűjét illendőségre kell állítania. Abszolút nem klassz, ha csak nagykereskedelemben lopunk el egy teljes weboldalt, vagy valójában a szerző kifejezett engedélye nélkül gyártjuk le e „kölcsönzött” kódok bármelyikét. Hogy őszinte legyek, rengeteg hasznos oktatóhely és nyílt forráskódú minta könyvtár található a környéken (például hackbook.hackasaurus.org/) : valójában soha nem kellene, de figyelmeztettek!

Mozilla

A Mozilla Hackbooks egy praktikus kódrészlet-könyvtár a hackjeihez

A más forrásokból előre elkészített jelölések leküzdésén túl rengeteg online eszköz létezik, amelyek segítenek a prototípus munkaigényesebb és egyedi igényeinek kielégítésében. A két legnagyobb idõ elsüllyedése és a frusztráció oka a formák és táblázatok. Még a legedzettebb frontend fejlesztője is fel fog nyögni, ha összetett asztalt vagy űrlapot kell építenie, ezért ne csüggedjen el, ha unalmasnak és kissé trükkösnek találja őket. Szerencsére számtalan olyan intelligens online eszköz létezik, amelyek sokat tesznek ki számunkra, és egy egyszerű grafikus felhasználói felületből automatikusan elég tisztességes jelöléseket generálnak. A gyors Google-keresés rengeteg eszközt tartalmaz, amelyek sok ilyen fájdalmas feladatot lefednek, és olyan kódrészleteket adnak, amelyeket egyszerűen beilleszthet a sajátjába, és szükség esetén alkalmazkodhat, számtalan órát és rengeteg gondot megtakarítva.

Két, amit referenciaként a könyvjelzőmappámban tartok Kotatsu , amely egy letisztult táblagép-készítő, amely lehetővé teszi, hogy osztályokat nagyon egyszerűen injektáljon a cellákba és sorokba, és pForm , ami egy nagyon csúszós drag and drop formanyomtató, amely még igazán összetett formákat is abszolút szellővé tesz. Kétségtelen, hogy megtalálja a saját kedvenceit, de nyugodjon meg, ha azon kapja magát, hogy valami ellen harcol, akkor egészen biztos lehet abban, hogy valaki más megtapasztalta ugyanezt Ön előtt, majd készített egy kis forgatókönyvet vagy widgetet a fájdalom csillapítására.

960.gs

Nathan Smith szupersmart tervező és fejlesztő, aki összeállt 960.gs , egy fantasztikus kis eszközcsomag, amely a prototípusokat (és ha úgy tetszik) gyártja az elrendezés rácsának használatával, abszolút tortát. A csomag tartalmazza mindazt, amire valaha szüksége lehet, a tűzijáték és a Photoshop rácssablonjaitól és útmutatóitól kezdve egészen a vázlatokig, és ami a legfontosabb, az általa létrehozott CSS-könyvtárig, amely minden varázslatot elkövet.

A 960 használata nevetségesen egyszerű. Csak hivatkozjon a CSS fájlra a HTML-ben, és néhány perc alatt robosztus prototípusokat állíthat össze, nagyon egyszerű osztálynevek használatával a jelölőn. Van egy elég végleges oktatóanyag a net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ címen, ezért ezt nem itt próbáljuk meg kitalálni, hanem egyszer. ' megkapta a fejét az alapok körül, kíváncsi lesz, miért tette ezt más módon.

A 960 rácsrendszer abszolút tortává teszi a prototípus készítését az elrendezésre szolgáló rács segítségével

A 960 rácsrendszer abszolút tortává teszi a prototípus készítését az elrendezésre szolgáló rács segítségével

Folyamat

A kódban történő prototípus-készítés minden bizonnyal felgyorsítja a munkáját és a tesztelési folyamatot, ha az alapok körül jár a feje. Valószínűleg azonban kissé módosítania kell a saját munkafolyamatát ahhoz, hogy alkalmazkodjon hozzá. Nagyjából mindent megtettem, de a legtöbb projektnél abbahagytam a drótkeretet. Ahelyett, hogy fáradságosan ábrázolnám a tervezés minden utolsó részletét, gyorsabb és lazább munkát végzek egyszerű vázlatokkal. Gyakran nem teljes oldalak, hanem elemek: kezdem a prototípust a felhasználók céljainak és igényeinek megfelelően, majd ezek teljesebb elrendezésként állnak össze.

Először vázlat: rajzoljon néhány egyszerű elemvázlatot az oldalra, amelyek később, amikor elkezdik a prototípus készítését, teljes elrendezésként összeállnak

Először vázlat: rajzoljon néhány egyszerű elemvázlatot az oldalra, amelyek később, amikor elkezdik a prototípus készítését, teljes elrendezésként összeállnak

Remek gyakorlat a döntéseinek érvényesítésében és az egyszerűség előmozdításában is. Ahelyett, hogy mindent laptalanul elcsípne az oldalon, majd összekeverné őket, mivel ezt túl könnyű megtenni, amikor rajzolunk dobozokat egy diagramkészítő eszközbe, hajlamos ésszerűsíteni az egyes döntéseket. Összpontosítson arra, ami igazán fontos, hogy elvégezhesse azt, amire szüksége van, és létrehozza a hierarchiákat, a topográfiát és a folyamatot egy tényleges oldalon. Ha valódi oldallal van dolgod, meglepő, hogy mennyire megváltoztatja a nézőpontodat arról, hogy egy ötlet hogyan áll össze.

Hajlamosak vagyunk a legtöbb prototípusnál egy megosztott Dropbox mappából dolgozni, és hozzáférést adunk az ügyfeleknek ahhoz a mappához. Az, hogy hogyan osztja meg a sajátját, a személyes beállításaitól függ. Nagyon lo-fi lehet és dolgozhat a helyi gépén, és egyszerűen elküldhet egy zip fájlt, vagy ha van barátságos sys rendszergazdája és átmeneti kiszolgálója, a fájlokat mindig oda helyezheti. Rövid megjegyzés a webszerver használatáról a prototípus futtatásáról a dokumentumok mappájából vagy bármi másról. Később sokkal több lehetőséged lesz a fejlettebb prototípusokra, ha hozzáadsz néhány szerveroldali parancsfájlt egyszerű PHP vagy aspx segítségével. Érdemes megfontolni, mivel valóban egyszerű nagyon hasznos funkciók beszerzése nagyon kevés erőfeszítés vagy kódolási képesség mellett.

A változásmenedzsment nyilvánvalóan fontos. A prototípusok mappákban történő futtatása és a verziószámok csak másolása, majd növelése elég egyszerű, de hatékony módja a dolgoknak. Valószínűleg felesleges elkezdeni a megfelelő verziókezelésen gondolkodni ebben a szakaszban, de érdemes megfontolni a jövőben, ha prototípusai összetetté válnak, vagy több ember dolgozik rajtuk.

Haladó tippek

Az alapvető HTML elsajátításának alapjain túl, annál jobban megismeri saját magát az épülő oldalak csínját-bínját, kétségtelenül kidolgoz egy sor remek trükköt és tippet, amelyek rengeteg időt és erőfeszítést takarítanak meg előre. Minden projekt magában hordozza a maga egyedi követelményeit, de ha tudok adni két tanácsot, amelyek számtalan órát takarítanak meg, akkor a következők lennének:

  1. Építs egy könyvtárat a cuccokból. Nem mindegy, hogyan csinálod. Ez lehet egy mappát tartalmazó kivonatok vagy valami strukturáltabb, mint például Coda klipek (kicsi kóddarabok, amelyeket újból felhasználhat a dokumentumra húzva). Akárhogy is, hamarosan kifejleszthet egy halom bitet, amelyek nagyjából Frankensteint tudnak összeállítani bármire.
  2. A felhasználás magában foglalja. Ha minden oldalon van olyan dolog, amelyet minden prototípuson meg kell változtatni, vagy nem kell módosítani (navigáció, lábléc stb.), Akkor húzza ki ezt a részt és dinamikusan vegye be a dokumentumba, ami azt jelenti, hogy csak karbantartania kell egy helyen. Ha megváltoztatja, akkor automatikusan alkalmazódik minden oldalra, amely használja. Ez korábban a kiszolgálóoldali parancsfájlokra korlátozódott PHP vagy ASP.

De a jQuery csodáinak köszönhetően most hihetetlenül egyszerűen elérheti ugyanazt a dolgot Johann Burkard fantasztikusan egyszerű inc.js szkriptje . Bármelyik útvonalat is választja, szó szerint órákat takaríthat meg ezzel a technikával.

Az inc magában foglalja az ActiveX-vezérlők nélküli IE-ben a távoli tartalom deklaratív beillesztését, valamint a tartalom átalakításához szükséges előtti és utáni visszahívásokat.

Az inc magában foglalja az ActiveX-vezérlők nélküli IE-ben a távoli tartalom deklaratív beillesztését, valamint a tartalom átalakításához szükséges előtti és utáni visszahívásokat.

Hűség

Végül, de nem utolsósorban a hűség kérdése. A HTML és CSS prototípus készítésének szépsége, hogy egy HTML készlettel különböző stílusú stílusokat alkalmazhat ugyanarra a dokumentumra, csak a CSS kikapcsolásával. Tehát nagyon egyszerű, fekete-fehér dobozokat indíthat el, például egy hagyományos drótvázat, majd megnövelheti a hűséget bizonyos felhasználási esetekhez. A felhasználók (és az ügyfelek) gyakran küzdenek azért, hogy kapcsolatba kerüljenek a nagyon parírozott drótkeretekkel, így a teszteléshez több felhasználói felület „fényességet” alkalmazhat, hogy a prototípus közelebb érezhesse magát egy valódi termékhez. Természetesen ezt maga is megteheti, vagy együttműködhet a tervezőcsapattal, hogy már korán elkezdhesse a vizuális nyelvet, hogy lássa, mennyire jár a felhasználók a valós világban.

Tehát, aki ideges, ha kódban adják meg a prototípusokat, azt mondanám: ne legyen. Kezdje kicsiben és lassan, és haladjon felfelé. Kérjen segítséget és tanácsot egy frontend fejlesztőtől, ha szüksége van rá (nem harapnak). És ha gyorsan fel akarsz gyorsulni, a UX Bootcamp tanfolyam nagyon olcsó, és néhány nap múlva belekezdhet.

Ha tetszik ez a szolgáltatás, feltétlenül nézze meg Anna Debenham összeomlási tanfolyamát is prototípusok építése HTML-ben és CSS-ben .