Mga Disenyo sa Adobe Experience Tricks, Tips, ug Techniques

01 sa 07

Mga Disenyo sa Adobe Experience Tricks, Tips, ug Techniques

Sa dihang gipailaila sa Adobe ang Experience Design isip usa ka Public Preview , ang kompaniya nakahimo sa duha ka talagsaon nga mga kalampusan sa samang higayon. Una, ilang gipahimutang ang usa ka luna sa bag-ong prototyping software market. Ikaduha, gihimo nila ang usa ka oportunidad alang sa mga tiggamit sa pagdula sa usa ka "work-in-progress" ug nagpahibalo sa mga tiggamit sa pag-uswag niana nga pag-uswag. Karon nga ang aplikasyon nga magamit na sulod sa pipila ka bulan, naghunahuna ko nga kini usa ka maayong panahon sa pagpaambit sa pipila ka mga kasinatian sa Disenyo sa Disenyo, mga tip, ug mga pamaagi.

Apan una, tingali nahibulong ka unsa ang gipasabot sa Prototyping Software. Lakip sa mga dagkong magdudula sa maong luna mao ang Proto.io, Prinsipyo, UXPin, Atomic.io , Disenyo sa Kasinatian ug InVision. Dili sama sa mga aplikasyon sama sa Sketch 3, Photoshop ug Illustrator diin ang mga static nga disenyo gihimo, kini nga mga graphical editors nagpaila sa interactivity, motion ug uban pang mga feature nga komon sa mobile ug web design space karon.

Uban sa pagtaas sa mobile ug ang dili kalikayan, sama sa laser nga focus sa Gumagamit, wala na kini igo alang sa usa ka tigdesinyo sa paglukso sa pipila ka mga sketches, pagdugtong og pipila ka mga comps ug unya buhian ang proyekto o i-upload kini sa usa ka web server. Ang UI / UX nga workflow nausab sa mga butang. Ang matag lakang sa proseso, gikan sa pag-ila sa tiggamit, sketches, wireframes, mockups, ug prototyping karon gipailalom sa ekstensibong testing sa user.

Kini ang katapusang yugto - prototyping - diin ang mga punto sa kasakit nga nadiskobrehan ug gitun-an sa wala pa ang proyekto nagpadayon ngadto sa katapusan nga produksyon. Kini diin ang interactivity, motion, screen transitions ug placement sa tanang butang sa screen hilabihan ka kritikal. Ang mga isyu ug mga problema dili mahimo nga ipakita lamang ingon nga usa ka static nga larawan o gipasabut sa pulong. Sa pagkatinuod, kini nga mga produkto alang sa tinuod nga mga tawo. Imbis maglihok sa tanan aron sa pag-code, ang proseso sa prototyping nagkadaghan nga gipahigayon sa graphics software nga gidisenyo alang lamang sa maong katuyoan. Mas sayon ​​ang pag-ayo sa usa ka sayop, pag-ilis sa usa ka imahe, pagsulat pag-usab sa pipila ka teksto, paglihok sa usa ka button ug sa paggamit sa usa ka visual editor kay sa kanunay nga pagsulat pag-usab ug pag-debug sa code.

Sa pagkatinuod, kini nga software nahimong usa ka importante nga bahin sa karon nga "Rapid Prototyping" nga Disenyo ug Pagpalambo nga palibot.

Sa ingon niana, magkalipay kita uban sa Design Design.

02 sa 07

Paghimo og usa ka Destination Pin nga adunay Simple Circle sa Design sa Adobe Experience

Ang usa ka hapsay nga bahin sa XD mao ang paggamit sa mga galamiton sa drowing sa vector. Dili makakita og usa ka icon? Walay problema. Paligdi ang imong kaugalingon. Ania kung giunsa:

1. Pilia ang The Ellipse Tool ug, uban ang Option / Alt-Shift nga mga yawe nga napugos, pagdibuho.
2. Uban sa lingin nga gipili, itakda ang Puno nga kolor sa FF0000 ug ang Border ngadto sa "wala" sa mga kabtangan.
3. Doble-klik ang lingin aron ipakita ang mga anchor point. I-drag ang ubos nga angkla sa ubos.
4. Doble-klik ang gipili nga Anchor Point ug ang mga kurba gipulihan sa linya.
5. Pagdrowing og laing gamay nga lingin nga adunay puti nga puno ug walay stoke. Ibalhin kini sa posisyon ug pilia ang pin ug ang lingin. Sa Align nga panel sa ibabaw sa mga Properties i-klik ang Horizontal Center button ug ang Pin gimugna.

03 of 07

Paghimo og Background Blur sa Adobe Experience Design

Kasagaran nga adunay teksto o laing sulod sulod sa usa ka hulagway sa background. Ang problema dinhi mao ang hulagway, mas kasagaran kay sa dili, madaog ang sulod sa ibabaw niini. Usa ka paagi sa pagsulbad niini nga isyu mao ang pagpaburot sa hulagway sa background. Mahimo mo nga mapapas ang larawan sa Photoshop o uban pang mga software sa pag-edit sa imahe, apan kini dili kaayo epektibo, ilabi na kay ang XD karon makahupot niini nga buluhaton alang kanimo. Ania kung giunsa:

1. Paghimo og usa ka bag-ong arte ug idugang ang imong larawan sa likod.
2. Pilia ang Rectangle Tool aron madrowing ang rectangle ibabaw sa imahe. Uban sa gipili nga Rectangle, ibutang ang Fill to White ug ang Stroke ngadto sa None.
3. Uban sa gipili nga Rectangle, pilia ang Background Blur sa panel properties. Ang tulo ka slider mao ang Blur Amount, Brightness and Opacity. Ania ang ilang gibuhat:

• Blur nga Amount: Gibag-o ang kabuang sa imahe nga anaa sa ubos. Ang pinakadako nga kantidad mao ang +50.
• Kahayag: Usba ang mga highlight ug mga anino sa imahe. Ang Minimum nga kantidad mao ang -50 ug ang Maximum nga bili mao ang +50.
• Opacity: Makaapektar sa transparency sa porma ug sa visibility sa imahe ubos sa porma. Ang mga kantidad nagkalain gikan sa 0% ngadto sa 100%.

Kung gusto nimo nga "ibalhin ang mga butang", ilisan ang kolor sa porma ug magdula sa Opacity value aron mausab ang "pagtan-aw" sa imahe.

04 sa 07

Paghimo og Scrim sa Design sa Adobe Experience

Ang usa ka komon nga problema sa disenyo mao ang mga elemento sa interface nga adunay mga elemento nga usa ka komon nga kolor apan, nawala kon ibutang sa usa ka hulagway sa background o solid nga kolor. Ang solusyon usa ka scrim. Ang usa ka scrim usa ka medyo lisud nga gradient nga gibutang tali sa interface element ug sa background. Kini sayon ​​nga mahimo sa XD. Ania kung giunsa:

1. Himoa ang imong artboard sa XD, pagdugang og usa ka imahen ug kopyaha ug i-paste ang mga elemento sa interface gikan sa tukmang UI Kit - File> Open UI Kit ... - ngadto sa artboard. Sa hulagway sa ibabaw ang litrato naghimo sa Status bar ug sa App Bar nga lisud makita.
2. Pilia ang Rectangle Tool ug ipagawas ang rectangle. Sa Mga Properties Panel pilia Pili ug pilia ang Gradient gikan sa pop sa ubos sa Color Picker. Ibutang ang gradient nga mga kolor sa Black and White. Ibutang ang usa ka bili - Opacity - ngadto sa 60% ug ang White usa ka bili ngadto sa 0%.
3. Uban sa gipili nga Rectangle, pilia ang Object> Arrange> Send Backward . Ang mga elemento sa interface karon makita sa larawan.

05 sa 07

Paghimo og usa ka Larawan Avatar diha sa Design sa Adobe Experience

Ang usa ka komon nga Disenyo sa Disenyo makita diha sa Chat apps diin ang mga tawo makigsulti sa matag usa ug ang hulagway sa mamumulong makita sa screen. Kini nga mga avatar mao ang kasagaran nga mga larawan nga gitago. Namatay kini nga yano nga mahimo niini sa XD. Ania kung giunsa:

1. Magsugod ka sa usa ka imahen ug usa ka lingin o laing porma sa arte. Mahimo nimong pun-on ang lingin sa bisan unsang kolor. Ang dili nimo kinahanglan buhaton mao ang pagdugang sa kolor sa stroke. Kini mahanaw sa diha nga ikaw maghimo sa epekto, busa nganong magsamok. Kon kinahanglan nimo nga lihokon ang lingin, kopyaha kini sa clipboard.
2. Ibalhin ang lingin sa imahe ug pilia ang hulagway ug ang lingin. Uban sa gipili nga mga bot nga butang, pilia ang Object> Mask uban sa Shape . Kon imong buhian ang mouse, ang Avatar gibuhat. Gikan gikan didto mahimo nimo kining usbon.
3. Kon kinahanglan nimo nga idugang ang stroke, i-paste ang lingin nga naglingkod sa imong clipboard ngadto sa artboard. Uban sa kopya nga gipili ihikaw ang sulod sa Properties ug idugang ang kolor ug lapad nga stroke. Aron maklinya sila, pilia ang duha ka butang ug i-klik ang Center Align nga mga buton sa Align nga mga opsyon sa ibabaw sa mga properties panel.
4. Kon gusto mo nga ibalhin ang litrato libot sa maskara, i-double click ang maskara. Kini magpakita sa hulagway ug sa mask nga porma. I-klik ang larawan ug i-drag kini sa posisyon. Kon imong buhian ang mouse, ang imahe anaa sa iyang bag-ong posisyon sulod sa maskara.

06 sa 07

Pagdula nga may Artwork sa Disenyo sa Adobe Experience

Ang mga Disenyo sa Disenyo sa mga Artbook dili lamang anaa kanimo aron ibutang ang sulod. Mahimo usab sila maimpluwensyahan. Ania ang duha ka mga butang nga imong mahimo:

1. Kon kinahanglan nimo ang mga bersyon sa Landscape ug Portrait sa usa ka artboard, duplicate ang artboard ug, uban ang duplicate nga pinili, i-klik ang landscape button sa Properties panel. Ang Artboard mag-usab sa orientasyon sa Landscape. Kon ang Artboard adunay sulod niini, i-klik ang Artboard's name ug ang Artboard properties makita sa Properties Panel.
2. Aron makadugang sa usa ka custom color ngadto sa Artboard, ug ang proyekto alang niana nga butang, pilia ang Artboard ug i-klik ang Fill color chip sa Appearance section sa Properties Panel. Pagsulod sa hexadecimal value alang sa kolor ug i-klik ang + nga timaan. Ang kolor idugang ingon nga Custom Color. Aron sa paggamit niana nga kolor sa laing dapit, pagpili og usa ka butang ug i-klik ang Custom Color chip aron sa paggamit sa kolor.
3. Ang mga arte mahimo nga linukot nga linukot. Sa pagbuhat niini, pilia ang arte ug usba ang gitas-on niini sa mga Panels Properties o pinaagi sa pagguyod sa ubos sa artboard sa ubos. Sa Scrollable area sa mga properties panel, pagpili vertikal gikan sa pop down menu ug ipasok ang taas nga viewport alang sa screen. Kana nga dashed blue nga linya nagpakita kanimo sa ubos sa viewport. Aron sulayan kini, i-klik ang Play button ug i-scroll ang layo. Aron mawala ang scroll, pilia ang Wala diha sa Pag-scroll nga pop.

07 of 07

I-edit ang Kit sa Mobile UI sa Disenyo sa Adobe Experience

Ang Disenyo sa Kasinatian adunay usa ka UI Kit alang sa pagpalambo sa iOS, Android ug Windows UI. Sa diha nga imo una nga ablihan sila, ikaw tingali maghunahuna nga sila maayo kaayo nga gipahimutang sa dapit. Dili gayud-ang matag piraso ug piraso sa mga kit nga na-edit sa hingpit. Atong susihon pinaagi sa pagtukod sa Android wireframe.

1. Magsugod ka pinaagi sa pagpili sa Artboard nga himan ug pagpili sa Android Mobile sa seksyon sa Google sa Properties Panel .
2. Pilia ang File> Open UI Kit> Google Material . Nag-abli kini sa Material Design UI Kit. Pilia ang Magnifying Glass ug marquee t siya Screen Guides artboard . Ganahan kong magsugod uban niining usa tungod kay kini naghatag kanako sa mga giya alang sa tukma nga on-screen placement sa mga elemento sa interface. Kon imong i-klik ang usa sa mga Blue bar imong makita nga kini naka-lock. I-klik ang lock nga gilakip sa matag usa kanila aron maablihan kini . I-marquee ang artboard ug kopya ang pagpili sa clipboard. Balik sa imong dokumento ug i-paste ang screen ngadto sa imong arte.
3. Pag-klik sa makausa sa App bar nga ang ibabaw sa artboard. Talupangda kon paano mo mapili ini. Pilia ang Object> Arrange> Dad-a sa Front. Ang imong pagpili karon labaw sa Mga Giya sa Screen. Kini kinahanglan nga isulti kanimo ang matag usa sa mga elemento sa screen mahimo nga ma-edit.
4. Doble i-klik ang Status Bar sa ibabaw ug, sa Properties Panel s et ang Puno nga kolor ngadto sa 455A64 . Doble i-klik ang App Bar ug i-set kini sa 607D8B. Kini kinahanglan nga isulti kanimo ang matag elemento sa usa ka UI nga kit mahimong i-edit aron matubag ang mga detalye sa kolor sa proyekto.
5. Komosta ang mga imahen? Ania kung giunsa pagbag-o ang kolor niini. Doble nga i-klik ang kasingkasing aron mapili kini. Kon tan-awon nimo ang Properties Panel, tingali imong hunahunaon nga dili ka ma-edit ang pagpili. Dili gayud. Doble nga i-klik ang kasingkasing sa usa ka higayon . Ang Properties ablihan ug imong giusab ang kolor nga puno sa FF0000. Balika kini nga double-double-click trick alang sa nahabilin nga mga icon ug sa teksto.