13 éves koromban kezdtem el tanulni a grafikai tervezést. Internetes tanfolyamokról tanultam weboldalakat tervezni, és egész nap a Photoshop és az Affinity Designer társaságában játszottam. Ez a tapasztalat megtanított arra, hogyan gondolkodjak tervezőként.
Csaknem egy éve tervezek és fejlesztek alkalmazásokat. Részt vettem az MIT egyik programján, ahol egy csapattal dolgoztam az Universeaty fejlesztésében. Két hónappal ezelőtt elkezdtem dolgozni egy új alkalmazáson, a Crypto Price Tracker-en, amelyet nemrég, január 28-án indítottam el.
Ebben a bejegyzésben megosztom az általam követett lépésenkénti tervezési folyamatot, valamint az alkalmazás példáit, amelyeken dolgoztam. Ez segít mindenkinek, aki tanulni akar vagy fejleszteni kívánja digitális tervezési készségeit. A tervezés nem csupán a tervezőszoftver használatának tudásáról szól, és ez a bejegyzés nem fogja megtanítani a használatára. Több száz jó minőségű oktatóanyagot lehet online tanulni. A tervezés egyben a termék belsejének megértése, annak jellemzői és funkcionalitása, valamint a tervezés, a végfelhasználó szem előtt tartása mellett. Ezt hivatott tanítani ez a bejegyzés.
Tervezési folyamat :
- Hozzon létre egy felhasználói folyamatábrát az egyes képernyőkhöz.
- Drótvázak létrehozása / megrajzolása.
- Válasszon tervezési mintákat és színpalettákat.
- Készítsen maketteket.
- Hozzon létre egy animált alkalmazás prototípust, és kérje meg az embereket, hogy teszteljék és adják meg a visszajelzést.
- Adja meg az utolsó simításokat a maketteknek, hogy az utolsó képernyők készen álljanak a kódolás megkezdésére.
Kezdjük!
Felhasználói folyamatábra
Az első lépés az, hogy kitalálja az alkalmazásban kívánt funkciókat. Miután megkapta ötleteit, tervezzen egy felhasználói folyamatábrát. A felhasználói folyamatábrák nagyon magas szintű ábrázolást jelentenek a felhasználók utazásáról az alkalmazáson / webhelyen keresztül.
A felhasználói folyamatábra általában 3 típusú alakzatból áll.
- A téglalapokat a képernyők ábrázolására használják.
- A gyémántokat a döntések ábrázolására használják (például megérinti a bejelentkezés gombot, balra csúsztat, nagyít).
- A nyilak összekapcsolják a képernyőket és a döntéseket.
A felhasználói folyamatábrák rendkívül hasznosak, mert jó logikai képet adnak az alkalmazás működéséről.
Itt van egy felhasználói folyamatábra, amelyet akkor készítettem, amikor elkezdtem dolgozni az alkalmazásom tervezésén.
Drótvázak
Miután elkészítette az egyes képernyők felhasználói folyamatábráit és megtervezte a felhasználói utakat, elkezd dolgozni az összes képernyő drótvázolásával. A drótvázak lényegében alacsony hűségű ábrázolásai annak, hogy az alkalmazás hogyan fog kinézni. Lényegében vázlat vagy vázlat arról, hová kerülnek a képek, a címkék, a gombok és a dolgok, azok elrendezésével és elhelyezésével. Körülbelüli vázlat az alkalmazás működéséről.
A drótvázak megrajzolásához az UI Stencils nyomtatott sablonjait használom. Időt takarít meg, és szép vásznat ad a rajzoláshoz és a jegyzetek készítéséhez.
Íme egy példa drótvázra.
A drótkeretek vázlata után használhatja a Pop nevű alkalmazást, és az alkalmazás segítségével elkészíthet egy képet az összes rajzáról, és prototípust kaphat az összes képernyő összekapcsolásával a gombok segítségével.
Tervezési minták és színpaletták
Ez a kedvenc részem. Olyan, mint az ablakvásárlás. Rengeteg tervezési minta és színpaletta közül lehet választani. Felveszem azokat, amelyek tetszenek, és kísérletezem velük.
A legjobb minták a tervezési minták megtalálásához a Mobil minták és a Pttrns. És hogy jó színpalettákat találjon, keresse fel a Színvadászatot.
Makettek
Ekkor tér át végre a tervező szoftver használatára. A tervezési értelemben vett makett a terv nagy pontosságú ábrázolása. Majdnem olyan, mintha a jövőben belement volna ebbe az alkalmazásba, és készített róla néhány képernyőképet. Reálisnak kell lennie, és nagyjából hasonlít a valósághoz.
Vannak tervező szoftverek és eszközök makettek készítéséhez. Az Affinity designer-t használom. Az iOS tervezéséhez leggyakrabban használt eszköz a Sketch.
Íme egy példa az alkalmazásom néhány korai tervezésére.
Inkább kísérleteztem különböző színpalettákkal.
Megosztottam barátaimmal a kezdeti maketteket visszajelzésükért. Úgy tűnt, sok embernek tetszik az arany színátmenet és a fekete séma.
Legyen hajlandó visszajelzést adni és kísérletezzen új javaslatokkal! Elképesztő ötleteket találhat a felhasználók, amikor beszél velük, nem pedig akkor, amikor eszeveszetten görgeti a Dribbble vagy a Behance elemeket.
Átterveztem tehát a makettet és eltávolítottam a háttérgrafikonokat, mert azok előállítása technikailag időigényes folyamat volt, és csökkentették az olvashatóságot. Így nézett ki az átalakított makett.
Nagyon elégedett voltam a színvilággal, a fülsáv ikonjaival és az általános elrendezéssel. Előre mentem, és a többi képernyőt ugyanazon tervezési irányelvek szerint terveztem. Hosszú, de biztosan szórakoztató folyamat volt!
Miután minden képernyőm készen állt, összeállítottam egy prototípust az Adobe XD-ben, és megkértem néhány barátot, hogy kísérletezzenek és adjanak visszajelzést.
Utolsó simítások után ilyen néz ki a végső tervem.
Miután az összes képernyő elkészült, importáltam őket az Xcode-ba, és elkezdtem kódolni az alkalmazást.
Ez az! Remélem, hogy ez a bejegyzés segít az alkalmazás tervezésében, vagy jobb tervezővé válhat. És ha tetszik az alkalmazásom, innen letöltheti.
A bejegyzést az egyik kedvenc idézettel fejezem be a designról.
„A formatervezés nem csak az, aminek látszik és milyen. A dizájn hogyan működik ”-Steve Jobs