Adobe tapasztalat tervezési trükkök, tippek és technikák

01/07

Adobe tapasztalat tervezési trükkök, tippek és technikák

Amikor az Adobe bevezette a tapasztalattervezést nyilvános előnézetként , a vállalat két meglehetősen csodálatos trükköt végzett egyszerre. Először egy új helyet foglaltak el a feltörekvő prototípus-szoftverpiacon. Másodszor, lehetőséget teremtettek a felhasználóknak, hogy játsszanak "folyamatban lévő munkával", és hagyják, hogy a felhasználók befolyásolják az előrehaladást. Most, hogy az alkalmazás néhány hónapon keresztül elérhető volt, azt gondoltam, hogy jó alkalom lesz megosztani néhány tapasztalati trükköt, ötletet és technikát.

De először azt kérdezheted, hogy mit jelent a Prototyping szoftver. A térség legfontosabb szereplői közé tartoznak a Proto.io, Principle, UXPin, Atomic.io , Experience Design és InVision. Az olyan alkalmazásoktól eltérően, mint például a Sketch 3, a Photoshop és az Illustrator, ahol statikus terveket állítanak elő, ezek a grafikus szerkesztők bevezetik az interaktivitást, mozgást és más jellemzőket, amelyek a mai mobil- és webtervezési térben megtalálhatók.

A mobil és az elkerülhetetlen, lézeres jellegű összpontosítás a felhasználó számára már nem elegendő ahhoz, hogy a tervező néhány vázlatot megpördítsen, összeszereljen néhány kompot, majd kiadja a projektet vagy feltöltse azt egy webszerverre. Az UI / UX munkafolyamat alapvetően megváltoztatta a dolgokat. A folyamat minden lépése, a felhasználó azonosításától, vázlatoktól, drótvázakból, mockupoktól és prototípusoktól kezdve kiterjedt felhasználói tesztelés tárgyát képezi.

Ez az utolsó szakasz - prototípuskészítés - ahol a fájdalom pontokat fedezik fel és rögzítik, mielőtt a projekt végső termelésbe kerül. Ez az, ahol az interaktivitás, a mozgás, a képernyő átmenete és a képernyőn lévő összes elhelyezése annyira kritikus. A problémákat és problémákat nem lehet egyszerűen statikus képként megjeleníteni, vagy szóban magyarázni. Végül is ezek a termékek valódi emberek. Ahelyett, hogy mindent átirányítanának a kódra, a prototípusgyártási folyamatot egyre inkább az erre a célra tervezett grafikus szoftver végzi. Könnyebb a hiba kijavítása, kép cseréje, szöveg átírása, gombok mozgatása, stb., Vizuális szerkesztővel, mint a folyamatosan újraíró és hibajavító kód.

Valójában ez a szoftver vált kulcsfontosságú elemévé a mai "Rapid Prototyping" tervezési és fejlesztési környezetben.

Ezzel azt mondta, szórakozzunk a Experience Design-ral.

02, 07

Hozzon létre egy céltábla egy egyszerű körrel az Adobe Experience Design programban

Az XD egy ügyes szempontja a vektor rajzeszközök használata. Nem található ikon? Nem probléma. Roll a saját. Itt van, hogyan:

1. Válassza az Ellipszis eszköz lehetőséget, és az Opció / Alt-Shift billentyű lenyomva rajzoljon egy kört.
2. A kiválasztott körrel állítsa be a Fill color to FF0000 és a Border to "none" értékeket a tulajdonságokban.
3. Kattintson duplán a körre a horgonypontok megjelenítéséhez. Húzza lefelé az alsó rögzítőelemet.
4. Kattintson duplán a kiválasztott horgonypontra, és a görbéket sorokkal cserélje ki.
5. Rajzolj egy másik kis kört fehér töltelékkel és nem állatokkal. Mozgassa a helyére, és válassza ki a csapot és a kört. A Tulajdonságok tetején lévő Align panelen kattintson a Vízszintes középső gombra, és létrehozza a Pin.

03. 07. sz

Háttérvilágítás létrehozása az Adobe Experience Design programban

Általános, hogy szöveges vagy egyéb tartalmak vannak háttérkép fölött. A probléma itt a kép, gyakrabban, mint nem, felülmúlja a fenti feletti tartalmat. A probléma megoldásának egyik módja, hogy elhomályosítsa a háttérképet. Elképzelheted a képet a Photoshopban vagy más képszerkesztő szoftverben, de ez valamennyire nem hatékony, különösen azért, mert az XD most képes kezelni ezt a feladatot. Itt van, hogyan:

1. Hozzon létre egy új táblát, és adja hozzá háttérképét.
2. Jelölje ki a téglalapot, majd rajzoljon egy téglalapot a kép fölé. A téglalap kijelölésével állítsa a Fill to White és a Stroke to None értéket.
3. A téglalap kijelölésével válassza ki a Háttér elmosódását a tulajdonságpanelen. A három csúszka Blur Amount, Brightness és Opacity. Íme, amit csinálnak:

• Homályosság összege: A kép elmosódottságának beállítása az alak alatt. A maximális érték +50.
• Fényerő: Beállítja a kép kiemelését és árnyékát. A minimális érték -50, a maximális érték pedig +50.
• Opacity: A kép alakjának és láthatóságának átláthatósága az alak alatt. Az értékek 0% és 100% között mozognak.

Ha tényleg "a dolgokat váltasz", változtasd meg az alakzat színét és játssz az Opacity értékkel a kép "kinézetének" megváltoztatásához.

04, 07

Hozzon létre egy Scrim-t az Adobe Experience Design programban

Egy közös tervezési probléma az interfészelemek elemeinek közös színnek kell lenniük, de elvészek, ha háttérképre vagy egyszínű színre kerülnek. A megoldás egy sírás. A súrlódás kissé áttetsző gradiens, amely az interfész elem és a háttér között helyezkedik el. Ezt könnyű elvégezni az XD-ben. Itt van, hogyan:

1. Készítsen rajztáblát az XD-ben, adj hozzá egy képet, és illessze be a megfelelő UI-készletből - Fájl> Nyitott UI-készlet ... - a kezelőtáblába tartozó felületelemeket . A fenti képen a fénykép az Állapotsávot és az Alkalmazássávot nehezen láthatja.
2. Jelölje ki a Négyszögű eszközt, és húzza ki a téglalapot. A Tulajdonságok panelben válassza a Kitöltés parancsot, és válassza ki a Színátmenet elemet a Színválasztóban. Állítsa be a színátmenetes színeket fekete-fehérre. Állítsa az A értéket - Opacity - 60% -ra és a White A értékét 0% -ra.
3. A Téglalap kiválasztásával válassza az Objektum> Elrendezés> Küldés visszafelé lehetőséget . Az interfész elemek most már láthatóak a képen.

05/07

Hozzon létre egy Image Avatarot az Adobe Experience Design alkalmazásban

Egy közös tervezési mintát talál a Chat alkalmazásokban, ahol az emberek beszélgetnek egymással, és a hangszóró képe megjelenik a képernyőn. Ezek az avatarok általában álarcos képek. Ez halott egyszerű ezt elérni az XD-ben. Itt van, hogyan:

1. Egy képzel, körrel vagy más alakzattal kezded a rajztáblán. A kört bármilyen színnel kitöltheti. Nem kell megtennie a stroke-színek hozzáadását. Ez eltűnik, amikor létrehozza a hatást, tehát miért zavarja. Ha meg kell élesíteni a kört, másolja be a vágólapra.
2. Mozgassa a kört a képre, és válassza ki mind a képet, mind a kört. A botobjektumok kiválasztásával válassza az Objektum> Maszk az alakzattal lehetőséget . Amikor kiadja az egeret, létrehozza az Avatarot. Innen átméretezheti.
3. Ha hozzá kell adni egy ütést, illessze be a vágólapon lévő kört a rajztáblára. A kiválasztott példány kikapcsolja a Tulajdonságok kitöltését, és adja hozzá a löket színeit és szélességét. Ha sorba rendezi őket, jelölje ki mindkét objektumot, majd kattintson a Tulajdonságok panel tetején lévő Igazítási beállítások párbeszédpanelen található Középre igazítás gombra.
4. Ha a képet a maszkban szeretné mozgatni, kattintson duplán a maszkra. Ez megjeleníti a képet és a maszkot. Kattintson a képre, és húzza a helyére. Amikor elengedi az egeret, a kép a maszkban lévő új pozícióban lesz.

06, 07

Játssz az Adobe Experience Design Artboards segítségével

A tapasztalattervező rajztáblák nem csak ott vannak, hogy tartalmat helyezzen el. Ők is manipulálhatók. Íme néhány dolog, amit tehetünk:

1. Ha a rajztáblához tájkép- és portréváltozatokat szeretne készíteni, ismételje meg a rajztáblát, és a kiválasztott másolat segítségével kattintson a tájkép gombra a Tulajdonságok panelen. Az Artboard a táj tájolására vált. Ha az Artboard tartalmaz tartalmat, kattintson az Artboard nevére, és a Tulajdonságok panel megjelenik a Művészeti táblák tulajdonságai.
2. Ha egyéni színt szeretne hozzáadni az Artboardhoz és a projekthez, akkor válassza ki a Művészeti táblát, majd kattintson a Tulajdonságok panel Megjelenés részében a Kitöltés színe csipre. Adja meg a szín hexadecimális értékét, és kattintson a + jelre. A színt egyéni színként adják hozzá. Ha ezt a színt máshol szeretné alkalmazni, jelölje ki az objektumot, és kattintson az Egyéni színes chipre a szín felviteléhez.
3. Az artboardok függőlegesen gördíthetőek. Ehhez válassza ki a táblát, és változtassa meg magasságát a Tulajdonságok paneleken vagy húzza az asztal alját lefelé. A Tulajdonságok panel görgethető területén válassza ki a függőleges menüpontot a legördülő menüből, és adja meg a képernyő nézetmagasságát. A szaggatott kék vonal a nézetablak alját mutatja. A teszteléshez kattintson a Lejátszás gombra, és görgessen le. A görgetés kikapcsolásához jelölje ki a Nincs görgetés legördülő menüpontot.

07, 07

Egy mobil felhasználói felület szerkesztése az Adobe Experience Design programban

A Experience Design tartalmaz egy felhasználói felületet az iOS, Android és Windows felhasználói felületek fejlesztéséhez. Amikor először megnyitod őket, úgy gondolja, hogy elég jól vannak a helyükön. Nem egészen - mindegyik bit és darab a készletben teljesen szerkeszthető. Találjunk ki egy Android drótvázzal.

1. Az Elemző eszköz kiválasztásával és a Tulajdonságok panel Google részében az Android Mobile lehetőség kiválasztásával kezdje.
2. Válassza a Fájl> Ui készlet megnyitása> Google-anyag lehetőséget . Ezzel megnyílik a Material Design UI Kit. Válassza ki a nagyítót és jelölje ki a Képernyõs útmutatók rajztábláját . Szeretem ezzel kezdeni, mert megadja nekem az útmutatókat az interfész elemek képernyőn történő elhelyezéséhez. Ha rákattint az egyik kék sávra, látni fogja, hogy lezárt. Kattints az egyes zászlókra, hogy kinyitd . Jelölje ki a rajztáblát, és másolja a kijelölést a vágólapra. Térjen vissza a dokumentumhoz, és illessze be a képernyőt a rajztáblába.
3. Kattintson egyszer az Alkalmazássávon, amely a tetején található. Figyeljük meg, hogyan lehet kiválasztani. Válassza az Objektum> Arrange> Bring to Front elemet. A kiválasztása most a Képernyő-útmutatók felett található. Ez azt jelenti, hogy a képernyőn megjelenő elemek szerkeszthetők.
4. Kattintson duplán az Állapotsorra a tetején, majd a Tulajdonságok panelen és a Töltsön színt a 455A64-re . Kattintson duplán az Alkalmazássávra és állítsa be kitöltését a 607D8B-re. Ez azt mondja meg, hogy az UI készlet minden egyes elemét szerkeszteni lehet a projekt színes specifikációinak megfelelően.
5. Mi a helyzet az ikonokkal? Így változtathatjuk meg színüket. Kattintson duplán a szívre, hogy kiválassza. Ha megnézed a Tulajdonságok panelt, feltételezheted, hogy nem tudja szerkeszteni a kijelölést. Nem egészen. Dupla kattintás a szívre még egyszer . A Tulajdonságok megnyílik, és a kitöltési színt FF0000-ra változtatja. Ismételje meg ezt a dupla kattintású trükköt a többi ikonra és a szövegre.