Az UI drótváz egy felhasználói felület (UI) kialakításának vizuális megjelenítése, amely felvázolja a webes vagy mobilalkalmazások alapvető szerkezetét és elrendezését. Ez egy alacsony hűségű makett vagy a végleges terv váza, amely a különböző tervezési elemek, például gombok, menük, űrlapok és képek elhelyezését mutatja a képernyőn.
A felhasználói felület drótvázai több okból is fontosak:
A felhasználói felület drótvázait a legjobb a tervezési folyamat korai szakaszában használni. A tervezők általában azzal kezdenek, hogy több alacsony hűségű drótvázat hoznak létre, hogy megvizsgálják a különböző elrendezési lehetőségeket, és az érdekelt felek visszajelzései alapján ismételjék meg a tervezést. A végleges terv kiválasztása után nagyobb pontosságú drótvázak vagy makettek jönnek létre, hogy több részletet és jobb képet adjon a végtermékről. Ezeket a drótvázakat ezután referenciaként használja a fejlesztőcsapat a megvalósítási szakaszban.
A felhasználói felület drótváza általában a következő elemeket tartalmazza:
Egy új oldal elrendezésének kialakításakor, vagy egy meglévő újratervezésekor fontos ragaszkodni a rácsrendszerhez. Ossza fel a drótvázat egy rácsra, és győződjön meg arról, hogy a képek, a szövegek és a cselekvésre ösztönzések mind szépen illeszkednek a rácsba. Ez nem azt jelenti, hogy minden eszközt azonos méretűvé kell tenni, hanem azt, hogy arányosak legyenek egymással.
Vessen egy pillantást a szövegrészek vagy a gombok közötti távolságra. Most duplázza meg. Mindig jobb, ha több hely van a bekezdések vagy képek között, mint ha szűken néznek ki egymás mellett. A felhasználókat nem riasztja el a sok üres hely (ésszerű határokon belül), de hamar elborulnak és összezavarodnak az egymásra halmozott képek miatt.
Tesztelje oldalát valódi felhasználókkal. Ne feledje, hogy a tervezési, technológiai és termékfejlesztési csapata csak idáig juthat el. Meg kell hallgatnia a valós felhasználói visszajelzéseket, és figyelemmel kell kísérnie az új felhasználói felülettel kapcsolatos tevékenységeiket. Nehéz a felhasználóknak megtalálni egy bizonyos gombot? Tedd nagyobbra. Túl nagy egy kép a laptop felhasználók számára? Tedd reszponzívabbá az oldaladat. Tesztelje az oldalt, és ennek megfelelően ismételje meg.
Igen, bárki létrehozhat UI drótvázat. Fontos azonban szem előtt tartani, hogy a drótvázak a tervezési folyamat kritikus részét képezik, és megkövetelik a felhasználói felület tervezési elveinek és legjobb gyakorlatainak alapvető megértését.
Nem, a felhasználói felület drótvázai jellemzően alacsony hűségűek, és nem tartalmaznak végső vizuális tervezési elemeket, például részletes tipográfiát, színsémákat vagy márkaelemeket. Azonban tartalmazhatnak alapvető vizuális jelzéseket, amelyek általános képet adnak a végső tervezési irányról.
Az UI drótvázak iterációinak száma a projekt összetettségétől és a szükséges részletességtől függ. A tervezők általában több alacsony hűségű drótvázat hoznak létre, mielőtt megállapodnának a végleges tervben, majd nagyobb pontosságú drótvázakat vagy maketteket készítenek a részletesebb megjelenítés érdekében. Nem ritka, hogy a tervezők a fejlesztési folyamat során is ismételgetik a tervezést.