Adobe XD-tutorial – Élménytervezés és prototípuskészítés

Üdvözöllek a nagy Adobe XD útmutatóban. Ebben az introban bemutatom magam mint a trénered.

Mi a különbség az User Experience (UX) és az User Interface (UI) között? Milyen szintű tervezési módszerek léteznek, és mire használják leginkább az Adobe XD-t? A választ itt találod!

Először megnyitottam az Adobe XD-t - és máris számos lehetőség kínálkozik, amelyeket kiválaszthatunk. Ebben a videóban egy kis bemelegítést találsz az Adobe XD-hez, egy áttekintést a programról, valamint egy bevezetést az XD indítóképernyőjébe és annak funkcióiba.

Az Adobe XD-ben a Zeichenflächek könnyedén létrehozhatók különböző felbontásokhoz és eszközökhöz. Mely sajátosságokat kell figyelembe venni ekkor, az kiderül ebből a tutorialból.

Különböző rácsbeállítások segítik az elemeink és objektumaink tiszta elrendezését egymás alatt. Ehhez rendelkezésünkre áll egy téglalap alakú rács és oszlopok megosztása az oszlopok számára.

A Google, Apple és Microsoft gyors induláshoz praktikus UI-készleteket biztosít. Ezek az előre elkészített artboardok nagy segítséget nyújtanak nekünk különböző platformok prototípusainak későbbi kialakításában.

Színek szinte minden tervezésben nagyon fontos szerepet játszanak - ebben a videóban megtanulod, hogyan dolgozhatsz színekkel az Adobe XD-ben, hogyan importálhatod őket, és milyen praktikus források vannak, hogy kész színösszeállításokat gyűjthess.

Számos módszer létezik az eszközök, mint például képek, fájlok, szöveges dokumentumok stb., importálására az Adobe XD-ben. Ebben a videóban bemutatok néhány módszert. Az XD azonban az Adobe Creative Cloud része, tehát természetesen kényelmesen és kényelmesen dolgozhatunk a könyvtárakkal.

A betűtípusok és a tipográfia témája fontos része az Adobe XD keresztül történő utazásunknak. Ebben a videóban megtanulod, hogyan kezeld a betűtípusokat helyesen és hatékonyan.

Az alakzatokat vagy nagyon egyszerűen importálhatjuk az Adobe XD-be, vagy saját magunk is létrehozhatjuk az útvonal- eszköz segítségével. Ha egy objektum többször ismétlődik, ajánlatos azt szimbólumként felvenni az eszközök listájába.

A design sokban inspirációt és külső impulzusokat tartalmaz. Ide tartozik az analóg környezet és a digitális világ is. Itt néhány portált szeretnék bemutatni, amelyeket szívesen látogatok.

Induljunk el egy kis, szép gyakorlati projekttel. Ebben a tutorialban és a következő két videóban egy Onepagert fogunk létrehozni.

Az ismétlőrács az Adobe XD egyik legfontosabb funkciója. Segít nekünk abban, hogy a létrehozott objektumcsoportokat szabadon skálázhassuk és egyedileg kitölthessük.

Az Onepager utolsó részében foglalkozunk a lábléccel és egy területtel a referenciákhoz. Itt praktikus SVG-fájlokat használunk, és további design technikákat tanulunk meg.

Ebben a leckében arról fogunk beszélni, hogy hogyan lehet interaktívan összekapcsolni az egyes műtáblákat. Meg fogjuk vitatni, hogy milyen lehetőségek vannak az átmenet kiválasztására és milyen további módosításokat lehet elvégezni a prototípuson.

Minden honlapnak szüksége van egy horgonypontra a navigáláshoz. Ebben a videóban kizárólag a felső navigációs sáv létrehozásával és az interaktív kapcsolódással foglalkozunk egymáshoz.

Az edzés az előző fejezeten alapul, és bemutatja, hogyan alakítjuk át az asztali menüt okostelefonra. A hamburger ikon és a menüpontok érdekes animációkkal lesznek feldobja.

Az egyik legerősebb eszköz a legjobb vizualizáció érdekében az Adobe XD Auto-Animate funkciója. Ebben a példában elmagyarázom, hogyan tudjátok a Auto-Animate funkció elvét alkalmazni bármely elképzelhető forgatókönyvre.

A következő videókban megtanuljuk egy online áruház prototípusának elkészítését. Itt megtanuljuk, hogyan lehet egyszerű tervezőtáblákból vizuálisan vonzó magas fokú prototípusokat létrehozni. 1. rész 4-ből.

A második részben foglalkozunk a részletes leírások megjelenítésével, csúszkákat építünk be a képekhez és összekapcsoljuk az artboardokat egymással.

Az átfedés-funkció az interaktív tervezés során izgalmas lehetőségeket kínál számunkra, mint például az információk közvetlen beszúrása és eltüntetése.

A jó használhatósági tervezés mindig visszajelzést ad a felhasználónak a rendszer állapotáról. Ezt a visszajelzést a projekt befejezésénél egy szép animációba fogjuk beilleszteni.

Az Adobe XD képes a prototípuskészítés folyamatában a hangparancs által történő interakciót is kezelni. A szóbeli parancsok rendszerműveletekhez vezetnek, amelyeket mi magunk határozhatunk meg. Ebben a bemutatóban megmutatom, hogyan működik ez.

Az együttműködés más részlegek és érintett személyek között, az audiónkénti kommentálás egy értékes funkció a projekt állapotának érthető bemutatásához.

Egy prototípust egy virtuális környezetben tesztelni egy dolog - élőben megjeleníteni egy eszközön egy egészen másik történet. És pontosan ezt könnyen megoldhatjuk az Adobe XD segítségével, vagy USB-n keresztül, vagy a Creative Cloud kapcsolattal. Ehhez használjuk az Adobe XD-alkalmazást az App Store-ból.

A közös munka során nélkülözhetetlen más osztályokkal megbeszélni a projekt állapotát. A Publikálás funkció segítségével a prototípust szabadon engedhetjük, hogy a felülvizsgálók, fejlesztők és megbízók vizuális benyomásokat szerezhessenek a projektről. Ebben a pontban kezdődik az azt követő szakasz a szakterületek között, hogy a projekt érettségig kerüljön.

Az Adobe XD egy nagyon fiatal program, mely folyamatosan változik minden frissítéssel. Ebben a videóban elmagyarázom, hogy milyen újdonságok jelentek meg a 18-as verzióról a 19-esre való váltással, hogyan lehet használni a funkciókat, és mely helyzetekben hasznosak. Ezek közé tartoznak: komponensek a szimbólumok helyett, Responsive Resize, vonalvezetők, sokszög eszköz, további szövegformázási lehetőségek és még sok más. Jó szórakozást!