A felső szintű mobil navigáció leggyakrabban használt mintái az alsó füles sáv, az oldalsó fiók és a Floating Action Button (FAB). Ha világos és egyszerű navigációs utakat szeretne tervezni, használja ezen minták valamelyikét az alkalmazásában.
Tényleges másolat beillesztése
Miután elégedett a vizuális hierarchiával, kezdje el a helyőrzőket és a dummy szöveget valódi tartalommal (tényleges vagy a felhasználó számára releváns szöveggel) helyettesíteni. Van egy fontos ok, amiért ebben a szakaszban kerülni kell a dummy szöveget – a Lorem Ipsum nem kommunikálja, hogy az oldal hogyan támogatja a felhasználókat céljaik elérésében. Emellett sok vizuális elem, amelyet létrehozunk, a termékeinkben található tartalomra épül. Ahogy elkezdjük hozzáadni a tényleges tartalmat, rá fogunk jönni, hogy néhány UI-elem (vagy akár UI-szakasz) nem szükséges a termékünkhöz.
Néha, ahogy a drótvázakat valódi részletekkel töltjük meg, észrevehetjük, hogy a meglévő elrendezés nem működik jól. Ebben az esetben fontos, hogy iteráljon, és találjon egy jobb módot a közölni kívánt információ megjelenítésére.
Miután feltölti az oldalt tényleges szöveggel, tesztelje, hogy az oldal áramlik-e a felhasználó számára. Előfordulhat, hogy néhány tartalom az oldaladon nem a megfelelő sorrendben van. Ez a tökéletes pillanat az oldal tartalmának átszervezésére és a kompozíció javítására.
Az alábbiakban egy példa a kezdőképernyőnk drótvázára, amely valós adatokat tartalmaz. Különböző betűméreteket használunk egyes UI-blokkok (például az ételkategóriák) rangsorolásához.
Gondoskodjon arról, hogy a tartalma jól skálázható legyen
Ha a dizájnja jól néz ki egy közepes méretű telefon képernyőjén, például az iPhone XS-en, ez nem jelenti azt, hogy az iPhone 5 és az iPhone XS Max felhasználóknak ugyanolyan nagyszerű élményben lesz részük. Bár teljesen rendben van, ha a drótvázlatkészítés során közepes méretű képernyőből indulsz ki, az is lényeges, hogy ellenőrizd, hogyan néz ki a tartalom különböző képernyőméreteken (kisebb és nagyobb képernyőkön egyaránt), és szükség esetén igazítsd ki.
Kapcsolja össze az oldalakat egy áramlat létrehozása érdekében
Míg lehetséges, hogy egyedi képernyők gyűjteményeként szállítsa a tervét, jobb, ha áramlatot hoz létre belőlük. A UX flow-k megkönnyítik a csapat számára az interakciós forgatókönyvek részleteinek megértését – közlik, hogy az embereknek hogyan kell interakcióba lépniük a termékkel.
A UX flow-k arra is rávesznek, hogy az alkalmazás funkcionalitását egészében gondolja át. A UX-áramlás vizualizálása után például észreveheti, hogy a kezdőképernyő és a keresési eredményeket tartalmazó oldal közé be kell vezetnie egy extra állapotot (mivel a rendszer backendjének néhány másodpercbe telik, amíg visszaadja az eredményeket).
Az is jó ötlet, hogy minden képernyőnek adjon egy hivatkozási számot. A hivatkozási számok nagyban megkönnyítik az életét, amikor a projektet más csapattagokkal vagy érdekelt felekkel vitatja meg.
Tesztelje a tervezési döntéseit
A drótvázlatkészítés utolsó (és egyik legfontosabb) lépése a tesztelés. A tesztelés felhasználói interakciókat feltételez, ezért ezt a kifejezést gyakran használják a prototípusokkal összefüggésben. De lehetséges egyszerű tesztelést végezni a drótvázakból létrehozott folyamattal kapcsolatban is. A Balsamiq használatával a drótvázak összekapcsolásával egyszerű, kattintható prototípusok hozhatók létre. Az ilyen tesztelés célja annak megállapítása, hogy a képernyők együtt működnek-e.
Következtetés
A drótvázlatkészítés végső célja a tartalom körvonalainak meghatározása és szilárd alap megteremtése a tervezési folyamat későbbi lépéseihez. A jól megtervezett drótvázak nagyban megkönnyítik a vizuális és interakciós tervezést.
Mint minden tervezési tevékenységnél, töltsön elég időt a különböző eszközökkel és eljárásokkal való kísérletezéssel, és meg fogja találni a saját drótvázlatkészítési stílusát. Gyakorlat teszi a mestert.
A szavakat írta Nick Babich
Eredetileg a Balsamiq UI Education Site-on
jelent meg.