Előtted áll a kihívás, hogy vonzó Prototyping-ot készíts egy Mobility-App számára. Ez nem csupán a tervezésről szól; arról van szó, hogy a felhasználói élményt már az elejétől kezdve hatékonyan alakítsd, hogy a felhasználónak segíthessen intuitívan navigálni az alkalmazásban. Ebben a tutoriálban lépésről lépésre végigvezetlek egy prototípus létrehozási folyamatán Sketch-ben. Kezdjük el ezt az izgalmas utazást a design világába!
Legfontosabb megállapítások
- A Prototyping kulcsfontosságú lépés az alkalmazásfejlesztés során.
- A Sketch-ben egyszerű formákkal és dizájnokkal kezdhetsz.
- A világos struktúra és felhasználói irányítás elengedhetetlen az alkalmazásod sikeréhez.
Lépésről lépésre útmutató
Kezdd azzal, hogy létrehozod az alkalmazásod alapstruktúráját a Sketch-ben. Használhatod a ecset eszközt, hogy megrajzold az első dizájn-elemeidet. Csak menj az ecset eszközhöz, vagy nyomd meg a „P” billentyűt, hogy kiválaszd.
Hozz létre egy téglalapot, amely az alkalmazásod képernyőjét fogja ábrázolni. Tartsd lenyomva az „Alt” billentyűt, miközben az egérrel téglalapot húzol. Ez biztosítja, hogy a téglalap arányos maradjon. Így már nagyon jól néz ki.
Most kezdj el dolgozni az alkalmazás első oldalán. Kezdd az alsó lapmenüvel. Használj újra ecset eszközt, és húzz egy egyenes vonalat lenyomva a Shift billentyűt, hogy biztosítsd, hogy egy egyenes vonalat kapj.
Miután megtervezted a lapmenüt, adj hozzá három ikont, amelyek az alkalmazás fő funkcióit ábrázolják. Az ALT billentyű használatával egyszerűen másolhatod a figurákat, miközben a megfelelő helyre húzod őket.
Most a felső navigációs sávra fordítjuk figyelmünket. Tartsd ismét lenyomva az ALT billentyűt, miközben egy újabb téglalap alakú részt húzol a navigációs sávhoz.
A chat-buborékok a következő része az alkalmazásodnak, amelyet szeretnénk megtervezni. Használj ecset eszközt egy chat-buborék megrajzolásához. Ez a felhasználónak azonnal üdvözletként jelenik meg. Adj hozzá egy rövid szöveget, amely megszólítja a felhasználót, mint például: „Helló és üdvözöljük a Mobility App-ban!”
Az egész látványos megjelenésének biztosítása érdekében másolhatod a buborékokat és alkalmazhatod őket. Válaszd ki a buborékokat, és az ALT billentyűt lenyomva húzd lefelé, hogy egy újabb üdvözlő szöveget adj hozzá, mint például "Kezdj a saját Mobility Sessions-öddel".
A következő lépés a videó gomb hozzáadása, amellyel a felhasználók lejátszhatják az leckéiket. Rajzolj egy kerek gombot az ecset eszközzel, és kombináld egy háromszöggel, hogy a megjelenítés és a funkció egyértelmű legyen.
Most másold az összes fontos UI-elemet – mint a felső és az alsó navigációs sáv – a következő oldalra, hogy biztosítsd a dizájn konzisztenciáját. Egyszerűen egy képernyőképet húzhatsz az ALT billentyű helpjével az elemek duplikálásához a következő oldalra.
Az új képernyőn, amelyet létrehoztál, tervezd meg a kurzusok választási lehetőségeit. Itt egy egyszerű áttekintést kell készítened a rendelkezésre álló kurzusokról, amelyeket a felhasználó kiválaszthat.
A profil nézetében létrehozhatsz egy helyet a profilkép, a felhasználónév és a teljesített kurzusórák számára. Itt fontos, hogy az információkat világosan és érthetően ábrázold.
A kurzus- és lecke választás tervezésének végén hozd létre a leckék áttekintését, és adj hozzá egy bezáró gombot, hogy a felhasználó bármikor bezárhassa a választást.
Ezzel a projekt alapvető prototípusa elkészült a Mobility App-hoz. Most már van egy vonzó dizájnod, amely világosan struktúrálja a felhasználói irányítást, és egyben neked, mint tervezőnek is segít, hogy az alkalmazás vízióját világosan vizualizáld.
Összefoglalás – Prototyping egy Mobility App-ban a Sketch-ben
A tutorial során lépésről lépésre megtanultad, hogyan prototípust készítesz egy Mobility-appban a Sketch-ben. Az első ötlettől a legutolsó dizájn elemekig bővítheted a tudásodat és hasznos eszközt hozhatsz létre az alkalmazásod további fejlesztéséhez.
Gyakran feltett kérdések
Hogyan kezdjem el a dizájn készítést a Sketch-ben?Válaszd az ecset eszközt (P), és kezdd a első elemek létrehozását.
Hogyan tudok elemeket hatékonyan duplikálni?Tartsd lenyomva az ALT billentyűt, miközben az elemet az egérrel húzod.
Mit tegyek, ha nem vagyok elégedett a dizájnnal?Bármikor módosíthatod vagy újjá tervezheted a meglévő elemeket, hogy elérd a kívánt eredményt.
Hogyan biztosíthatom, hogy a felhasználói irányítás világos legyen?Figyelj arra, hogy minden funkció logikusan legyen elrendezve, és hogy a felhasználó intuitívan tudjon navigálni.
Lehet a Sketch-ben mobil eszközökre is tervezni?Igen, a mobil eszközök képernyőméretéhez igazíthatod az elemek típusát és méretét.
