Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Kezdők Útmutatója a Wireframinghez

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

A Wireframing egy fontos lépés bármilyen képernyőtervezési folyamatban. Elsősorban azt teszi lehetővé számodra, hogy meghatározd a dizájnod információs hierarchiáját, megkönnyíti számodra a felület megtervezését annak megfelelően, hogy hogyan szeretnéd a felhasználókkal feldolgoztatni az információkat. Ha még nem használsz wireframinget, itt az ideje, hogy hozzáfogj...

A simple wireframe

Olyan ez, mint egy építészeti tervrajz; látnod kell kétdimenziós fekete-fehér ábrákon, mielőtt kitalálod, hogy hogyan építed fel a házat. Hasonló a helyzet képernyőre tervezéskor, nem kezdhetsz el pixel rétegeket készíteni Photoshopban vagy kódblokkokat írni anélkül, hogy tudnád, hová fog kerülni az információ.

Mélyebb szinten a drótváz szintén hasznos lehet annak az eldöntésében, hogy a felhasználó hogyan lépjen kapcsolatba a felülettel. Például egy drótváz (wireframe) tartalmazhatja a gombok különféle állapotát vagy egy menü viselkedését.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

A wireframing azért fontos, mert lehetővé teszi a tervezőnek a felület és az interakciók megtervezését anélkül, hogy megzavarnák a színek vagy a betűtípusok. Szeretem elmondani az ügyfeleimnek, hogy ha egy felhasználó nem tud rájönni egy fekete-fehér drótvázból, hogy merre kell haladni, akkor teljesen mindegy, hogy milyen színeket fogunk végül használni. Egy gombnak akkor is nyilvánvalónak kell lennie, ha nem fényes vagy élénk színű.

Egy épület alapzatához hasonló szilárdságúnak kell lennie, mielőtt úgy döntesz, hogy egy drága külsőt vagy festést adsz neki.


1. lépés: Szerezz ihletet

Mivel egy kép többet mond ezer szónál, mielőtt belemennénk a további részletekbe vess egy pillantást az I ♥ wirefames oldalra. Gyors áttekintést fogsz kapni és vizuális értelme lesz annak, hogy más tervezők hogyan kezelik a wireframing folyamatukat.

I Heart Wireframes

Talán telepíthetnéd ezt az ügyes böngésző bővítményt, a Wirify-t is, ami lehetővé teszi, hogy megnézd bármelyik élő oldal "drótvázasított" változatát.

cnncom with wirify

Ha folyamatosan figyeled, hogy más tervezők vagy oldalak mit csinálnak a drótvázukkal, lassan egy átfogó képet fogsz kapni arról, hogy egy drótváz hogyan segíthet az információk képernyőre rendezésében.


2. lépés: A folyamatod megtervezése

A tervezés egy szerves folyamat, s így a különböző dizájnerek megközelítése a wireframinghez és annak átfordításához látványra vagy kódra jelentősen eltérhet. Meg kell találnod azt a folyamatot, ami előhozza az erősségeidet és amit a legkényelmesebb használni. Az alábbi diagram mutat néhányat a tipikus folyamatok közül:

Wireframes Process

A 37signal jól ismert arról, hogy a használd a vázlatokat és térj át egyből a kódra módszert támogatja, bár úgy tűnik, hogy néhány dizájnerük ettől még vizuális próbamodelleket is belevesznek a folyamataikba.

Részemről én már elegendő dizájnból-kódba körön ahhoz, hogy egy valamivel egyszerűsített folyamatom legyen. Ez egy olyan lépés, amire sokan nem gondolnak, de azt is itt döntöm el, hogy milyen html/css keretrendszert szeretnék használni a projektben.

Például rengeteg oldalt szoktam készíteni Blueprintben, így a drótvázaimat és a Blueprintet ugyanarra a 12-oszlopos gridre állítom be. Ez jelentősen felgyorsítja a prototípus készítési és fejlesztési időt, és ahelyett, hogy minden egyes elem szélességét a css stíluslapomba kellene leírnom, immár előre definiálhatom egytől tizenkét oszlop szélességben. Most a cssgridet használom ennek reszponzív dizájn támogatása helyett, de még mindig a 12-oszlopos grid van beállítva, amit photoshop sablonként le is tölthetsz.

the 12-column cssgrid template

Ahogy mondtam, rajtad áll, hogy eldöntsd, melyik folyamat a kényelmes számodra. Ajánlott párat kipróbálni ahhoz, hogy rájöjj, szerinted melyik a leghatékonyabb folyamat. Néhányan nagyon ügyesen skiccelnek és talán pont emiatt jobban szeretik egyáltalán nem használni a wireframing eszközt. Más tervezők esetleg azt szeretnék, hogy a lehető legkevesebb lépésből készítsék el, ezáltal is minimalizálva az eltéréseket, illetve végiggondolnak minden egyes iterációt, ahogy a dizájn kezd formát és alakot ölteni.

Végül úgyis ki fogod fejleszteni a saját, előnyben részesített folyamatodat, de a bemutató kedvéért én a saját, tipikus folyamatomat fogom használni példaként:

Három fő oka van annak, hogy wireframing eszközömként általában Illustratort használok:

  1. Stílusok – elmenteted a típusokat és objektumstílusokat, és újrahasznosíthatod őket, pont mint a CSS-ben.
  2. Könnyű több objektumot egyszerre módosítani, áthelyezni vagy átméretezni.
  3. Könnyű átalakítást kínál Photoshophoz.

Ugyanakkor más eszközöket is szoktam használni, a projekt forgatókönyv függvényében. A következő részben gyorsan körvonalazok pár népszerű eszközt, az erősségeiket és gyengeségeiket.


3. lépés: Válaszd ki az eszközeidet

Íme néhány népszerű eszköz, nem fontossági sorrendben:

Balsamiq

A Balsamiq azért vált népszerűvé, mert vázlatokra emlékeztető Balsamiq drótvázakat készít, így azonnal nyilvánvalóvá téve, hogy a drótváz nem egy befejezett termék, csak egy folyamatban lévő munka. A Balsamiqnak hatalmas könyvtára van újrahasználható komponensekből, így fogd és vidd módszerrel nagyon könnyen megtervezheted a saját drótvázadat.

Sample Balsamiq wireframe from the Balsamiq website

Szinte bármilyen platformon használhatod, mivel van asztali verziója Macre, Windowsra és Linuxra, ráadásul egy webes verzióval is rendelkezik arra az esetre, ha inkább a felhőben dolgozást részesíted előnyben. A harmadik felektől származó alkalmazások, mint pl. az iMockups iOS-re, szintén támogatják a Balsamiq exportálási formátumot.

Omnigraffe

A régi Mac kedvenc, az Omnigraffe szintén széles körűen támogat egy újrahasznosítható összetevőkből álló felhasználói könyvtárat, a Graffletopiát.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Mivel elsősorban ábrázoló alkalmazásként lett kifejlesztve, az Omnigraffe-nak is vannak olyan összetett funkciói, mint az automatikus felületek, egyéni objektumstílus-támogatás, okos segédletek és grafikus eszközök. Néhány ezek közül a funkciók közül az Adobe CS csomagban is elérhetőek, de ha nem rendelkezel a CS csomaggal, az Omnigraffe is jó vásár  (~100 dollár) lehet részletes drótvázak készítéséhez.

Axure

A wireframing eszközök öregapja, az Axure volt az egyik legelső professzionális wireframing/prototípus eszköz. Egészen az utóbbi időkig csak Windowson volt elérhető. Személyesen nem sok tapasztalatom van vele, de az ipari szakértők széles köre által használt eszközeiről ismert.

Flairbuilder

Az új fenegyereknek, a Flairbuildernek nagyon erős az interakciós támogatása.

from show hide to if-else interactions

Ezen kívül hatalmas komponens könyvtára van, támogatja a master oldalakat és a prototípust lehet olyan formába exportálni, hogy online is megtekinthető legyen.

Online alkalmazások

Ha az asztali szoftver nem a te világod, vannak olyan eszközök, mint a mockflow, a hotgloo és a mockingbird.

Keynote/Powerpoint

A Keynotopia "átalakítja a kedvenc prezentációs alkalmazásodat a legjobb, gyors prototípus-készítő eszközre mobilos, webes és asztali alkalmazások vázlatainak létrehozásához". A nem-mac felhasználók se aggódjanak, a Keynotopia powerpoint sablonokat is kínál.

Személy szerint erősen javaslom, amennyiben gyorsan kell mobil alkalmazásokhoz drótvázat vagy prototípust készíteni. Másik jó alternatíva lehet a Keynote Kungfu.

Adobe CS

Azok számára, akik már ismerik az Adobe csomagot, a Fireworks, az Illustrator és az Indesign kiválóan alkalmas wireframing eszközként, a saját erősségeikkel és gyengeségeikkel együtt.

Fireworks

A teljes tervezési folyamatot elvégezheted a Fireworksben, az alap drótváztól kezdve a teljes látványtervig. A Fireworks támogatja a master oldalakat (gondolj úgy rájuk, mint újrahasznosítható sablonokra, ahol minden, a master sablonon elvégzett szerkesztés hozzárendelődik a gyermekoldalakhoz), az elemkönyvtárakat, valamint viszonylag gyorsan készíthetsz interaktív prototípusokat a Fireworksszel.

Illustrator

Ez az egyik kedvenc eszközöm, mivel már jól ismerem az Illustratort, és biztos vagyok benne, hogy sok más dizájner is járatos a használatában. Akkor használom az Illustratort, amikor gyorsan kell összetett drótvázat készítenem, mindenféle interaktivitás nélkül.

Hogy mi teszi őt nyerővé? A PSD exportálási képesség, szerkeszthető rétegekkel, erős másolási és beillesztési támogatással Photoshophoz, valamint kiváló tipográfiai vezérlés elmenthető, szerkeszthető és újrahasznosítható típus stílusokkal, majdnem pont úgy, mint a CSS esetében.

Indesign

Hasonló erősségei vannak, mint az Illustratornak, csak még jobbak a tipográfiai stílus vezérlései, jobb a master oldal támogatása, valamint legújabb képessége az, hogy tud interaktív prototípusokat készíteni.

Have you seen the interactive controls of InDesign

Az Indesignt akkor használom, amikor kiváló minőségű, interaktív, többoldalas prototípusokat kell készítenem. Az egyetlen problémám vele, hogy gyenge az exportálás támogatása Photoshophoz látványtervezés készítésére.

ProtoShare

"Könnyűvé teszi az erőteljes prototípus készítést". A legújabb, 9-es verziója egy új wysiwyg palettával rendelkezik. Érdemes ránézni.


4. lépés: Egy grid felállítása

Sokféle elmélet létezik a grid rendszerek kapcsán, de anélkül, hogy túlságosan belemennénk, azt mondanám, hogy ez egy "struktúrált és egyszerű módja az elemek elrendezésének".

Ehhez a bemutatóhoz Illustratort használok, de a lépések bármelyik eszközödhöz alkalmazhatóak.

Először is állíts be egy dokumentum méretet. Én 1280 x 900-at fogok, mivel cssgridet fogok használni, ami lehetővé teszi, hogy a weboldalamat könnyen átméretezzem a mobil felbontástól a maximális 1140 pixelig.

Helyezd el a cssgridről letöltött sablont a dokumentumodban.

Tipp:

Rengeteg grid sablon elérhető letöltésre, de ha a saját igényeid szerint szeretnéd testreszabni, akkor vess egy pillantást a responsify.it-re.


5. lépés: Rendezd el a felületet dobozokkal

Kezdj el dobozokat rajzolni a gridre. Gondolj a látogatóid számára megjeleníteni kívánt információk sorrendjére; a legegyszerűbb elrendezés a fentről lefelé, amit a balról jobbra követ. Lentebb egy drótváz példája látható, aminek elrendezését általában szoftvercégek használják napjainkban:

Néha, a célodtól és a szervezettől függően, amelynek dolgozol, lehetsz kreatív az elrendezéssel, de mindig tartsd szem előtt az információk hierarchiáját. Ez egy valós példa az egyik ügyfelemtől, ahol szerettem volna szakítani a hagyományos technológiai cégek weboldalának elrendezésével:

Ez itt egy blog elrendezése, körültekintően elhelyezett hirdetési dobozokkal és konkrét útmutatásokkal az ügyfél számára.


6. lépés: Határozd meg az információhierarchiát tipográfiával

Ha már elégedett vagy a dobozaid elrendezésével, kezdj el apró tartalmakat belerakni, hogy megérezd, mennyire jól strukturáltak az adataid. A főszabály ugyanaz: a közönségednek eljuttatni kívánt információnak letisztultnak kell lennie, még egy fekete-fehér drótvázon is.

Különféle betűméretek használatának elkezdése kiváló módja a különböző információszintek meghatározásának.

Ne félj kísérletezni ebben a szakaszban. Néha, ahogy feltöltöd részletekkel, rádöbbensz, hogy az eredeti elképzelés nem fog megfelelően működni. Ez az egész wireframing folyamat lényege; csinálj annyi ismétlést, amennyi csak lehetséges, annak érdekében, hogy a lehető legjobb módon reprezentáld azt az információt, amit kommunikálni szeretnél.

Az alábbi példában úgy döntöttem, hogy a képernyőképek legyenek sokkal hatásosabbak, ezért elkezdtem fekete dobozokat használni annak meghatározására, hogy mely területek lesznek vizuálisan fontosak ezen a weboldalon:

7. lépés: Finomhangolás szürkeárnyalattal

A szürkeárnyalat teljes spektrumának használata segíthet eldönteni az elemeid vizuális erősségeit anélkül, hogy színpalettát kellene választanod. Valójában sokat segíthet a látványtervezési folyamat későbbi szakaszaiban.


8. lépés: Nagyfelbontású drótváz

Ez egy kiegészítő lépés, de ha fokozatosan szeretnél haladni, akkor érdemes kipróbálni. Egy nagyfelbontású drótváz készítése annyit jelent, hogy egyszerűen csak további részleteket adsz hozzá, amennyit csak lehetséges, mindezt anélkül, hogy túl részletes legyen a látványterv. Ez esetleg azt is jelenti, hogy kitöltöd a drótváz egy másolatát és megpróbálod meghatározni az ideális betűméreteket:

Ebbe már a színek is belevonódnak:

Az általános elképzelés az, hogy a látványtervezési/kódolási szakaszban a részleteket akarjuk csiszolgatni, és nem a látvánnyal vagy további kísérletezéssel foglalkozni. Hajts végre ismétlési ciklusokat (visszajelzés <-> wireframing) amilyen gyorsan csak lehetséges az általad kényelmesen használható wireframing alkalmazásban ahelyett, hogy a rétegeket és pixeleket photoshopban mozgatnád.

Ez alapján néhány esetben sokkal ideálisabb, ha kihagyod a túlságosan alapos részletezést, és egyből az interaktív prototípus készítési szakaszba lépsz (ala 37signals). A fő érv emellett, hogy bizonyos interakciók részleteit nem lehet teljes egészében bemutatni egy állóképen.

Ha egy csapat fejlesztővel dolgozol együtt, esetleg át akarod adni az elfogadott drótvázat a fejlesztőknek az alap keretrendszer lekódolásához, míg te a látványterven dolgozol.


9. lépés: A drótváz átfordítása látványtervvé

Ahogy azt már korábban említettem, azért preferálom az Illustrator használatát wireframinghez, mert tudok .psd-be exportálni, ahol a legtöbb típusréteg szerkeszthető. A Photoshop használatakor már nem kell túl sokat a típuson szerkeszteni (A Photoshopnak nem túl erős a típusvezérlési eszköze, noha sokat fejlődött a CS6-ban):

Photoshop Export Options

Íme egy példa egy drótváz átfordítására látványtervvé. A drótváz java része változatlan maradt, de pár módosítás szükséges volt a látványterv készítéséhez. Megnézheted ezt a weboldalt élőben is:

Webwise 2010

Konklúzió

Végére értünk ennek a bemutatónak. Remélem, sikerült inspirálnom téged arra, hogy elkezdj kísérletezni! Mint ahogy bármilyen tervezéséi folyamatnál, ne félj ismételni, ismételni és ismételni.

Ezen kívül tölts el egy kis időt a különféle eszközökkel és folyamatokkal való kísérletezéssel. Hasznosnak fogod találni a befektetett időt és energiát, miután megtaláltad a számodra természetesnek tűnő alkalmazást.

Nyugodtan tedd fel a kérdéseidet a hozzászólásokban, köszönöm, hogy elolvastad!


További források

Ha szeretnél még többet megtudni a wireframingről, megnézheted ezeket a forrásokat is.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.