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álaszt Az Ellipszis eszköz és az Option / Alt-Shift billentyű lenyomva rajzoljon egy kört.
2. A kiválasztott körrel állítsa be a Töltsön színt a FF0000-hoz és a Border a "none" a tulajdonságok.
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. Válassza ki a téglalap szerszámot and 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. Ha a téglalapot választotta, válassza 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:

• Blur Összeg: Beállítja a kép elmosódását az alak alatt. A maximális érték +50.
• Fényesség: 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.
• Átlátszatlanság: Érinti a kép alakjának és láthatóságának átláthatóságát 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 illesszen be egy interfész elemet a megfelelőből UI készlet - Fájl> Nyílt felhasználói felület … - a táblára. A fenti képen a fénykép az Állapotsávot és az Alkalmazássávot nehezen láthatja.
2. Válassza ki a téglalap eszközt és rajzoljon ki egy 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% és a Fehér Az érték 0% -ra.
3. Ha a téglalapot választotta, 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 bot elemek kiválasztásával, válassza az Objektum> Maszk az alakzattal. 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. Elindul az Artboard eszköz kiválasztásával és kiválasztásával Android Mobile a Tulajdonságok panel Google részében.
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 tA Screen Guides rajztáblá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 felső és a Tulajdonságok panel sés töltse színét 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 kiválaszthatja. 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.