Adobe Experience Design Tricks, aholkuak eta teknikak

07/01

Adobe Experience Design Tricks, aholkuak eta teknikak

Adobe-k Diseinuaren Diseinua Publiko Aurreikuspen gisa sartu zuenean, konpainiak bi gertakari harrigarriak egin zituen aldi berean. Lehenik eta behin, espazio bat jarri dute martxan prototipo software berrien merkatuan. Bigarrenik, erabiltzaileek "lan-aurrerapenarekin" jolasteko aukera eskaintzen dute eta erabiltzaileek aurrerapen hori eragiten dute. Aplikazioa hilabete batzuetarako eskuragarri zegoela, esperientzia trikimailuak, aholkuak eta teknika batzuk partekatzeko denbora ona zela pentsatu nuen.

Baina lehen, prototipo softwareak zer esan nahi duen galdetzen ahal diozu. Espazio honetan jokalari garrantzitsuenen artean Proto.io, Printzipioa, UXPin, Atomic.io , Experience Design eta InVision dira. Esate baterako, Sketch 3, Photoshop eta Illustrator bezalako aplikazioetan, diseinu estatikoak sortzen direnean, editore grafikoek interaktibitatea, mugimendua eta gaur egungo mugikorreko eta web diseinuko espazioetan ohikoak diren beste ezaugarri batzuk aurkezten dituzte.

Mugikorrak eta saihestezinak direnak, Erabiltzailearengan oinarritutako laserrak bezalakoak, ez da nahikoa diseinatzaile bat sketch batzuk biltzea, konposatu gutxi batzuk biltzea eta proiektua askatzea edo web zerbitzarira igotzea. UI / UX workflow-ek oinarrizko gauzak aldatu ditu. Prozesuaren urratsei, erabiltzaileak identifikatzeko, zirriborroak, wireframes, mockups eta prototyping-ak orain erabiltzaile-saiakuntza ugari egiten ari dira.

Azken fase hau - prototipoak - non dauden mina puntuak aurkitu eta finkatzen dira proiektuaren azken ekoizpenera mugitzen den arte. Hemen da interaktibitatea, mugimendua, pantailaren trantsizioa eta dena pantailan kokatzea hain kritikoak. Arazoak eta arazoak ezin dira irudi estatiko moduan erakutsi edo azaldu ahoz. Azken finean, produktu horiek benetako gizakientzat dira. Kode hori guztia mugitu beharrean, prototipo prozesua gero eta helburu horretarako diseinatutako software grafikoek egiten dute. Errazagoa da akatsen bat konpontzea, irudi bat ordeztu, testu batzuk berridatzi, botoi bat mugitu eta abarretarako editore bat erabiliz etengabe berridatzi eta arazteko kodea baino.

Izan ere, software hau funtsezko osagaia bilakatu da gaur egungo "Prototipatze azkarrak" diseinuan eta garapenean.

Horrekin batera, diseinu diseinuan dihardugu.

07/02

Sortu Destination Pin Adobe Acrobat Design esperientzia sinple batekin

XD alderdi xume bat marrazki bektorial tresnak erabiltzea da. Ezin da ikono bat aurkitu? Arazorik ez. Zure kabuz egin. Hona hemen nola:

1. Hautatu Elipse tresna eta, Aukera / Alt-Shift teklekin sakatuta, zirkulu bat marraztu.
2. Zirkulua hautatuta, ezarri Betegarriaren kolorea FF0000 eta Mugan "none" propietateetan.
3. Egin klik bikoitza zirkuluan aingura-puntuak erakusteko. Arrastatu beheko aingura behera.
4. Egin klik bikoitza Anchor Point puntuan eta kurba lerroekin ordeztuko da.
5. Zirkulu txiki bat marraztu zuriz bete zuri eta stoke gabe. Mugitu posizioan eta hautatu pin eta zirkulua. Propietateen goialdean dagoen Align panelean, sakatu Zentro horizontala botoia eta Pin sortu.

07/03

Adobe Experience Design diseinuaren atzeko planoaren diseinua sortu

Testu bat edo beste edukia atzeko planoko irudi baten gainean ohikoa izaten da. Hemen arazoa irudia da, sarritan baino gehiago, edukia gainetik botatzen du. Gai hau konpontzeko modu bat atzeko planoko irudia lausotzea da. Argazkiak Photoshop-en edo beste irudi-edizio software bat lausotzea ahalbidetzen du, baina hau ez da eraginkorra, batez ere XD-k zeregin hau kudeatzeko gai izan baitaiteke. Hona hemen nola:

1. Artboard berri bat sortu eta zure atzeko planoko irudia gehitu.
2. Hautatu laukizuzen tresna bat eta marraztu laukizuzena irudiaren gainean. Hautatutako Rectanglearekin, ezarri Betegarria zuria eta Trazua inori.
3. Aukeratutako laukizuzenarekin, hautatu Propietate panelean Aurrekariak Blur . Hiru irristakorretako Blur zenbatekoa, distira eta opakotasuna dira. Hona hemen zer egiten duten:

• Blur Zenbatekoa: irudiaren lausotzea doitzen du forma azpian. Gehieneko balioa +50 da.
• Distira: irudi nabarmentzen eta itzalak doitzen ditu. Gutxieneko balioa -50 eta gehienezko balioa +50 da.
• Opakotasuna: Formaren gardentasuna eta irudiaren ikusgarritasuna forma azpian eragiten du. Balioak% 0tik% 100era bitartekoak dira.

"Gauzak aldatzeko" nahi baduzu, aldatu forma kolorea eta Opakotasuna balioarekin irudiaren "itxura" aldatzeko.

07.07

Sortu Scrim Adobe Experience Design-en

Diseinu arazo komun bat interfaze elementuek kolore arrunta izan behar dute baina hondatutako atzeko planoko irudia edo kolore sendoa jartzen dutenean galdu egiten dira. Soluzioa scrim bat da. Azala interfaze-elementuaren eta atzeko planoaren artean jartzen den gradient zertxobait zintzilikatua da. Hau erraza da XD-n betetzeko. Hona hemen nola:

1. Sortu artboarda XD-n, gehitu irudia eta kopiatu eta itsatsi UI Kit egokiarako interfazeko elementuak - Fitxategia> Ireki UI Kit ... - Artboardan. Goiko irudian, argazkiek Egoera-barra eta App Bar-ak ikus ditzakete.
2. Hautatu Rectangle Tool eta laukizuzen bat marraztu. Propietateen panelean, bete Bete eta hautatu Gradientea beherantz Kolore hautagailuan. Ezarri gradientearen koloreak zuri eta beltzeko. Ezarri A balioa - Opakotasuna-% 60ra eta Zuriunea A% 0ra .
3. Aukeratutako Rectangle aukerarekin, hautatu Objektu> Antolatu> Bidali atzera . Interfazearen elementuak orain ikusgai daude irudiaren gainean.

07.07

Sortu irudia Avatar Adobe Experience Design-en

Diseinuaren diseinu komuna Chat-en aplikazioetan aurkitzen da, jendeak elkarri hitz egiten eta hiztunaren irudia pantailan agertzen da. Avatarrak hauek maskara izan diren irudiak izan ohi dira. Hildako hutsa da hori XD-n betetzeko. Hona hemen nola:

1. Irudi bat eta zirkulu bat edo beste forma bat artboard-ekin hasten zara. Zirkulua edozein kolorekin bete dezakezu. Zer ez duzu egin behar trazu kolorea gehitzeko. Eragina sortzen duzunean desagertuko da, beraz zergatik traba? Zirkulua stoke behar baduzu, kopiatu arbelean.
2. Mugitu zirkulua irudira eta hautatu irudia eta zirkulua. Bot hautatutako objektuekin, aukeratu Objektua> Maskarekin forma . Sagua askatzen duzunean, Avatar sortuko da. Hortik handitu dezakezu.
3. Trazatu bat gehitu behar baduzu, itsatsi itsatsi arbelean artera sartzeko. Hautatutako kopiarekin batera, bete Propietateak bete eta trazatu kolorea eta zabalera bat gehitzeko. Lerrokatzeko, hautatu bi objektuak eta egin klik Zentroa Lerrokatu botoiak Align aukerak propietateen panelaren goiko aldean.
4. Argazkia maskara osoan mugitu nahi baduzu, egin klik bikoitza maskara botoian. Honek irudia eta maskara forma erakutsiko ditu. Egin klik irudian eta arrastatu posizioan. Sagua askatzen duzunean, irudia maskara barruan kokapen berria izango da.

07/06

Play Adobe Experience Design Artboards-ekin

Esperientzia Design artboak ez dira zure edukiak jartzeko. Era berean, manipulatu egin daitezke. Hona hemen egin ditzakezun gauza pare bat:

1. Artelan baten paisaia eta erretratua behar badituzu, artelanak bikoiztu eta hautatutako bikoiztuarekin Egin klik Propietateen paneleko paisaia botoian. Artboard paisaia orientazioa aldatuko da. Artboardak edukia badu, egin klik Artboard-en izena eta Artboard propietateak Propietateen panelean agertuko dira.
2. Kolore pertsonalizatua Artboardra gehitzeko, eta materia horretarako proiektua, aukeratu Artboarda eta egin ezazu Betegarriaren txipa Funtzioen Panelaren Itxura Saileko atalean. Idatzi kolore hamaseigarren balioa eta egin klik + ikurra. Kolorea kolore pertsonalizatu gisa gehituko da. Kolore hori beste nonbait aplikatzeko, hautatu objektu bat eta egin klik Kolore pertsonalizatua txipa kolorea aplikatzeko.
3. Artboak bertikalki mugitu daitezke. Horretarako, hautatu artea eta aldatu bere altuera Propietateen paneletan edo arbelaren behealdean arrastatu beherantz. Propietateen panelaren eremu mugikorretan, hautatu bertikalki menuko menutik eta sartu pantailako altuera pantailan. Lerro urdindun hori lerroaren behealdea erakusten du. Probatzeko, sakatu Play botoia eta korritu. Desplazamendua desaktibatzeko, hautatu None in the Scrolling pop down.

07ko 07

Editatu UI Kit mugikorra Adobe Experience Design-en

Experience Designek UI Kit bat du iOS, Android eta Windows UI garatzeko. Lehenik eta behin irekitzen dituzunean, nahiko ondo kokatuta egotea pentsa dezakezu. Ez da nahikoa: kits horien zati bakoitza guztiz editagarria da. Ezagutu Android alanbre-markoa eraiki dezagun.

1. Artboard tresna hautatu eta Android Mugikorra hautatu duzu Propietateen Paneleko Google atalean .
2. Hautatu Fitxategia> Ireki UI Kit> Google Materiala . Honek Material Design UI Kit irekitzen du. Aukeratu Lupa eta Marquee T Screen Guides artboard . Honekin hasi nahi dut interfaze-elementuen pantailako egokitze egokiak ematen dizkidalako. Taberna urdinean klik egiten baduzu, blokeatuta dagoela ikusiko duzu. Egin klik horietako bakoitzean atxikitako blokeoa desblokeatzeko . Markatu artea eta hautatu hautapena arbelean. Itzuli zure dokumentura eta itsatsi artelanaren pantaila.
3. Egin klik behin Artboardaren goialdeko App barrean. Oharra nola hautatu dezakezu. Aukeratu Objektu> Antolatu> Ekarri aurrean. Zure hautapena pantailaren giden gainetik dago. Horrek esan behar dizu pantailako elementu bakoitza edita daitekeela.
4. Egin klik bikoitza goialdean dagoen Egoera-barran eta, Propietateen panelean eta Bete kolorea 455A64raino . Egin klik bikoitza App Bar aplikazioan eta bete 607D8B. Honek esan behar dizu UI kit batean elementu bakoitza proiektuaren kolore-zehaztapenei erantzuteko editatu daitekeela.
5. Ikonoei buruz? Hona hemen kolorea aldatzeko. Egin klik bihotzean bihotzean hautatzeko. Propietateen panela begiratuz gero, hautapena ezin duzu editatu. Ez da nahiko. Egin klik bi aldiz bihotzean denbora gehiago . Propietateak ireki eta bete kolore FF0000 aldera. Errepikatu bikoitza klik bikoitza trikimailu hau gainerako ikonoetan eta testuan.