A legjobb források a rácsalapú drótvázak vázolásához
A folyamata interfész tervezése mindig kezdődik ötletgeneráció. Ez magában foglalja a vizualizációt, más helyszínek kutatását és a gyors prototípus készítését. Ez a korai ötletfázis döntő fontosságú megértsék az elrendezést és a felhasználói élményt építeni akarsz. Szóval, hogyan kell ténylegesen elvégezni a drótvázlást egy új projekten?
A hagyományos papír és ceruza rajongója vagyok, szükség esetén extra eszközökkel. De digitális drótvázak is nagy, és ez egy életképes lehetőség a modern tervezők számára. Ebben a cikkben szeretném megosztani a legjobb forrásokat mindkét technikához, hogy segítsen a saját létrehozásában rácsalapú felhasználói felület.
Korai UI / UX Konceptualizálás
Kezdjük azzal, hogy tisztázzuk az a drótkeret és a prototípus. Ezeket a két szót gyakran használják fel egymással felcserélhető módon, mert ugyanarra a folyamatra vonatkoznak.
A drótkeret egy egyetlen statikus vázlat egy weblap vagy egy alkalmazás felhasználói felületének Lehet, hogy a gomb szövegét, margóit, elemméreteit vagy akár animációkat is megmagyarázza. De a drótvázak igazak durva tervrajzok az egyes oldalakhoz.
Hasonlóképpen, a prototípus olyan, mint egy folyamatábra, amely bemutatja, hogy a különböző oldalak hogyan kapcsolódnak egymáshoz. Tehát egy prototípus összeköti a drótvázakat, hogy bemutassa, hogy a különböző gombok vagy linkek más oldalakhoz vezetjenek.
Ezeket a definíciókat nem kőbe faragják, egyes tervezőknek lehet saját terminológiájuk, és nem értenek egyet a pontos megfogalmazással. De ez az, ahogyan azt szoktam láttatni, és hány tervező érti ezeket a kifejezéseket a legjobbnak.
Szóval mit kell pontosan csinálnod a korai fogalmi darabokkal? Tényleg szükségesek? Azt mondanám, hogy a prototípusok készítése nem mindig szükséges, de ez egy nagyon jó ötlet, különösen az összetett interakciókkal rendelkező alkalmazások tervezésekor.
De huzalozás mindig jó ötlet minden új projekt esetében. Segít összpontosítson a nagy képre anélkül, hogy aggódnának a részletekért. Érzékelte, hogy a teljes oldal hogyan kerül elrendezésre, és ez felbecsülhetetlen, ha konkrét elrendezést tervez.
A Wireframing céljai
Minden alkalommal, amikor elindít egy új projektet, fontolja meg mit akarsz megoldani. Minden webhely egy konkrét céllal készült. Sok webhelynek több célja is van, ahol néhány cél fontosabb, mint mások.
Használja a wireframing útmutatót, amely segít megtalálni a legjobb stratégiát egy weboldal cél (ok) rögzítése. Ez valószínűleg nem fog megtörténni az első drótvázon, így készen áll vázoljon sok különböző ötletet.
Keressen más hasonló webhelyeket, és írja le a legjobb funkciókat. Elemezze a tartalom szervezésének módját és azt, hogy hogyan mozoghat az egyes oldalakon.
Gondolj egy drótvázra egy interaktív szempontból. Ezek nem csak szép képek. Ezek a digitális interfészek ábrázolása, és az elképzeléseit ennek szem előtt tartásával szeretné vázolni.
A rácsalapú erőforrások, függetlenül attól, hogy papírból készültek vagy digitálisak, nagy segítséget nyújtanak a gyors előkészítésben. Most nézzük meg a legjobb forrásokat a wireframes létrehozásához.
Grid Sketchpads
Mindig elkezdhetjük a nyomtatópapír alaprajzi vázlataival durva ötletek feltérképezése. Személy szerint én általában a nyomtatópapíron dolgozom, mert így kevésbé aggódom a rácsokról és a többiről ötletek generálása.
Dot grid sketchpads a legjobb módja annak, ha akarsz tisztítsa meg az ötletet, és adjon neki több struktúrát. A rács segít az elemek közötti távolságok becslése az oldalon, és hozzon létre egyfajta szimmetria a drótvázban.
Sok jó termék van ott, ha szeretné kezdje meg a papírt, például a Rhodia Dot Pad különböző méretűek a mindennapi használatra. Csak 80 oldallal rendelkezik, de ez meglehetősen jellemző a legtöbb rács vázlatfüzetre.
Egy másik nagyon hűvös és testreszabható termék a Dotgrid. A Dotgrid összes terméke drágább, mint a Rhodia könyvek, de több anyaggal és egyedi borítóval rendelkeznek.
A Dotgrid még egyéni megrendeléseket is elfogad, amelyek lehetővé teszik tervezze meg saját egyedi vázlatlapját. Minden könyv alig 100 lapot tartalmaz, így az elülső és hátsó oldalakkal együtt körülbelül 200 oldalt kaphat a rácsrajzoláshoz.
Néhány másik pont grid vázlatfüzet, amit megemlíteni szeretnék, a Behance Dot Grid, amely keménykötésű és spirálkötésű, bár csak 50 papírlapot tartalmaz..
A Responsive Design Sketchbook a webes tervezők egyik legjobb forrása. Egyik más terméktervező sem igényelne egy rugalmas tervrajzfüzetet, de a webes tervezők nagyban részesülnek a szabadságtól ötleteket generálhat különböző eszközszélességeken a rács elrendezésének tetején.
Ezek az érzékeny dizájnpadok 50 lapot tartalmaznak, összesen 100 oldalt, de minden oldalnak van négy különböző érzékeny rács különböző töréspontokat képvisel az érzékeny tervezésben: asztali, laptop, tablet és okostelefon.
Bár a dizájn a Dotgrid könyvekhez képest elkeseredett, senki más nem vette figyelembe a webes tervezőkre vonatkozó rugalmas vázlatokat. Ha belépsz a kedves dologba, érdemes megrendelni egy tesztvezetést.
Ha tényleg kézműves dolgokba kerül, és nem akar pénzt költeni, akkor is nyomtassa ki saját rácslapjait interfész vázlattal. Ez az ingyenes webhely kínál különböző rács sablonok kinyomtathatja, és kézzel rajzolt drótvázakhoz használhatja.
A rácsok A4 és US betűméretekben találhatók a nyomtatópapír különböző stílusaihoz. Számos opció közül választhat, mint például egy teljes hosszúságú webböngésző sablonjai, vagy különböző iPhone képernyők.
Mindezek a lehetőségek nagyszerűek, és érdemes megvizsgálni, ha bejön ceruza vázlata. A papír az egyik legegyszerűbb médium, amellyel gyorsan új ötleteket kaphat, így gyakran az UI-tervezők által is előnyben részesített választás..
Digitális eszközök és webes alkalmazások
Olyan sok nagy drótváz-program létezik ott, hogy alig fedezhetők fel anélkül, hogy elemzési bénulást kockáztatnának, ezért most összpontosítsunk néhány legjobb lehetőségre. rácsalapú drótváz.
Először is szeretném megemlíteni, hogy az Adobe eszközöket, például az Illustrator-t használhatja hozzon létre saját drótvázakat. Ez nem része a mindenki munkafolyamatának, és az Illustrator biztosan nem szabad. De ha már dolgozik az Adobe Creative Cloud alkalmazással, akkor lehet, hogy jó kiindulópont.
1. Moqups
A Moqups az egyik legjobb online eszköz wireframing. Egy vizuális szerkesztővel és egy eszközkönyvtárral dolgozol, hogy az egész oldalt húzza át.
Minden új Moqups projekt a előre meghatározott rács, és világos lila vonalakat használ, amelyek segítenek az elemek összehangolásában. Ez egy nagyszerű webes eszköz, amely sokkal könnyebbé teszi a hálózat kialakítását.
A webhely alapértelmezés szerint egy szabad terven működik, amely korlátozza a felhasználót 300 oldal objektumra. A webhely nem rendelkezik prémium opciókkal, de a havi díj megfizetése bosszantóbb lehet, mint az Adobe eszközökkel való utazás, vagy a Sketch egyszeri vásárlása.
2. Grid Papr
A Grid Papr webalkalmazás teljesen ingyenes, és nyilvános és magánszámlákat is kínál a drótvázakhoz. Létrehoz egy nevet a projektnek, és megkapja saját egyedi URL-címét a drótvázhoz, amelyet bármely számítógépről szerkeszthet.
Minden új drótváz rácskal van ellátva amely lehetővé teszi, hogy az összes elemen rácsozódjon. A funkciók egyszerűek, de elegendőek hozzon létre egy lo-fi drótvázot percekben. Csak húzza a kívánt oldalt az oldalra, és kövesse a rácsot, hogy létrehozzon egy csillagvezetéket.
3. Wireframe.cc
A Wireframe.cc az egyik legegyszerűbb és legkisebb eszköz, amelyet a wireframinghoz használhat. Jellemzője a zavarmentes felület val,-vel előre beépített rács és szervezett eszköztárak. Egyszerűen kattintva és húzással új elemeket hozhat létre a vászonon. Munkáját is mentheti és megoszthatja.
Ez egy újabb eszköz, amelyet az opcionális prémium tervek ingyenesen kínálnak. Minden tervet havonta számlázunk, így nagyon hasonlít az árstruktúrában lévő Moqups-ra. Az ingyenes eszköz bármely számítógépről használható számla nélkül.
4. Mockingbird
A Mockingbird egy másik nagyszerű lehetőség, amely sokkal több funkciót kínál, mint a legtöbb drótvázkészítő eszköz. Ingyenesen indulhat, de a próba 7 napra korlátozódik. Ez néhány felhasználó bosszúsága lehet, de az eszköz valóban hihetetlen és minden böngészőben fut.
A Mockingbird-nek végtelen könyvtára van az UI elemeknek, mint például fülek, harmonikák, legördülő menük, videolejátszók és egyszerű szöveges hivatkozások. Az alapértelmezett rács a 960gs rácsrendszert használja, de választhat 12, 16 és 24 oszlop.
Végső szavak
Függetlenül attól, hogy hagyományos vagy digitális drótvázlatot választ, mindig az a minősége. Sokat kell megtanulni, ha ilyen munkát végez, ezért találja meg, hogy melyik eszköz érzi magát a legkényelmesebbnek.
Előre haladva a legjobb dolog csak kezdje meg a wireframinget. Érezd magad a legjobbnak (papír vagy digitális), és csináld magadnak. Az ebben a cikkben szereplő erőforrásoknak többet kell kapniuk ahhoz, hogy elkezdhessük a saját digitális interfészeinek drótkeresését.
(Oykun Yilmaz fotója)
