Disenyo ng Trick sa Karanasan ng Adobe, Mga Tip, at Mga Diskarte

01 ng 07

Disenyo ng Trick sa Karanasan ng Adobe, Mga Tip, at Mga Diskarte

Nang ipinakilala ng Adobe ang Karanasan sa Disenyo bilang isang Pampublikong Pagtanaw , ang kumpanya ay nakagawa ng dalawang di-gaanong kamangha-manghang mga pakiramdam sa parehong panahon. Una, nag-staked sila ng isang puwang sa umuusbong prototyping software market. Pangalawa, gumawa sila ng isang pagkakataon para sa mga gumagamit na maglaro na may isang "work-in-progress" at nagpapahintulot sa mga gumagamit na impluwensyahan ang pag-unlad. Ngayon na ang application ay magagamit para sa isang ilang buwan, Akala ko ito ay isang magandang panahon upang ibahagi ang ilang mga Trick Karanasan sa Disenyo, mga tip, at diskarte.

Ngunit una, maaaring ikaw ay nagtataka kung ano ang ibig sabihin ng Prototyping Software. Kabilang sa mga pangunahing manlalaro sa puwang na ito ay Proto.io, Prinsipyo, UXPin, Atomic.io , Disenyo sa Karanasan at InVision. Hindi tulad ng mga application tulad ng Sketch 3, Photoshop at Illustrator kung saan ang mga static na disenyo ay ginawa, ang mga graphical na editor na ito ay nagpapakilala ng interactivity, paggalaw at iba pang mga tampok na pangkaraniwan sa mobile at web design space ngayon.

Sa pagtaas ng mga mobile at ang hindi maiiwasan, laser-like focus sa User, hindi na ito sapat para sa isang taga-disenyo upang mamalo ng ilang mga sketches, pull-sama ng ilang mga comps at pagkatapos ay pakawalan ang proyekto o i-upload ito sa isang web server. Ang UI / UX na daloy ng trabaho ay sa panimula ay nagbago ng mga bagay. Ang bawat hakbang ng proseso, mula sa pagtukoy sa user, sketch, wireframe, mockups, at prototyping ay napapailalim ngayon sa malawak na pagsubok ng gumagamit.

Ito ay ang huling yugto - prototyping - kung saan ang mga punto ng sakit ay natuklasan at naayos bago ang proyekto ay gumagalaw sa panghuling produksyon. Ito ay kung saan ang interactivity, motion, screen transition at paglalagay ng lahat ng bagay sa screen ay napakahalaga. Ang mga isyu at problema ay hindi maaaring ipakita lamang bilang isang static na imahe o ipinaliwanag sa salita. Pagkatapos ng lahat, ang mga produktong ito ay para sa mga tunay na tao. Sa halip na ilipat ang lahat ng iyon sa code, ang proseso ng prototyping ay increasingly na isinasagawa sa pamamagitan ng graphics software na dinisenyo para lamang sa na layunin. Mas madaling maayos ang isang pagkakamali, palitan ang isang imahe, muling isulat ang ilang teksto, ilipat ang isang pindutan at iba pa gamit ang isang visual na editor kaysa sa patuloy na muling pagsusulat at pag-debug ng code.

Sa katunayan, ang software na ito ay naging isang mahalagang bahagi sa kapaligiran ng "Rapid Prototyping" na Disenyo at Pagpapaunlad.

Gamit ang sinabi, magkaroon ng ilang kasiyahan sa Karanasan sa Disenyo.

02 ng 07

Lumikha ng isang Destination Pin gamit ang isang Simpleng Circle sa Adobe Karanasan Disenyo

Ang isang maayos na aspeto ng XD ay ang paggamit nito ng mga tool sa pagguhit ng vector. Hindi mahanap ang isang icon? Walang problema. Roll ang iyong sarili. Ganito:

1. Piliin ang Ellipse Tool at, na may pinindot ang Option / Alt-Shift key, gumuhit ng isang bilog.
2. Sa napiling bilog, itakda ang Kulay ng Punan sa FF0000 at ang Border sa "wala" sa mga katangian.
3. I-double-click ang lupon upang ipakita ang mga punto ng anchor. I-drag ang ilalim na anchor pababa.
4. I-double-click ang napiling Anchor Point at ang mga curve ay pinalitan ng mga linya.
5. Gumuhit ng isa pang maliit na bilog na may isang puting punan at walang stoke. Ilipat ito sa posisyon at piliin ang pin at ang bilog. Sa Align panel sa itaas ng Mga Properties i-click ang pindutan ng Pahalang na Sentro at ang Pin ay nilikha.

03 ng 07

Lumikha ng Background Blur sa Adobe Experience Design

Karaniwang magkaroon ng teksto o iba pang nilalaman sa isang larawan sa background. Ang problema dito ay ang imahe, mas madalas kaysa sa hindi, overpowers ang nilalaman sa itaas nito. Ang isang paraan ng paglutas ng isyung ito ay upang lumabo ang larawan sa background. Maaari mong lumabo ang imahe sa Photoshop o iba pang mga software sa pag-edit ng imahe, ngunit ito ay medyo hindi sanay, lalo na dahil ang XD ay maaari na ngayong mahawakan ang gawaing ito para sa iyo. Ganito:

1. Gumawa ng isang bagong artboard at idagdag ang iyong larawan sa background.
2. Piliin ang Rectangle Tool sa isang gumuhit ng isang rektanggulo sa ibabaw ng imahe. Sa pagpili ng Rectangle, itakda ang Punan sa White at ang Stroke sa Wala.
3. Sa pagpili ng Rectangle, piliin ang Background Blur sa panel ng properties. Ang tatlong mga slider ay Blur Halaga, Liwanag at Opacity. Narito kung ano ang ginagawa nila:

• Burahin ang Halaga: Inayos ang kabulagan ng imahe sa ilalim ng hugis. Ang maximum na halaga ay +50.
• Liwanag: Inaayos ang mga highlight at mga anino sa larawan. Ang minimum na halaga ay -50 at ang Pinakamataas na halaga ay +50.
• Opacity: Nakakaapekto ang transparency ng hugis at ang kakayahang makita ng imahe sa ilalim ng hugis. Ang mga halaga ay mula sa 0% hanggang 100%.

Kung gusto mo talagang "lumipat ng mga bagay", baguhin ang kulay ng hugis at i-play ang halaga ng Opacity upang baguhin ang "hitsura" ng imahe.

04 ng 07

Lumikha ng isang Scrim sa Adobe Karanasan Disenyo

Ang isang pangkaraniwang problema sa disenyo ay ang mga sangkap ng interface elemento ay dapat na isang karaniwang kulay ngunit, ay nawala kapag inilagay sa ibabaw ng isang larawan sa background o solid na kulay. Ang solusyon ay isang scrim. Ang isang scrim ay isang medyo maliwanag na gradient na inilagay sa pagitan ng elemento ng interface at ng background. Ito ay madaling maisagawa sa XD. Ganito:

1. Lumikha ng iyong artboard sa XD, magdagdag ng isang imahe at kopyahin at i-paste ang mga elemento ng interface mula sa naaangkop na Kit ng UI - File> Buksan ang UI Kit ... - sa artboard. Sa itaas na larawan ang larawan ay gumagawa ng Status bar at ang App Bar na mahirap makita.
2. Piliin ang Rectangle Tool at ilabas ang isang rektanggulo. Sa Properties Panel piliin Punan at piliin ang Gradient mula sa pop down sa Color Picker. Itakda ang mga gradient na kulay sa Black and White. Itakda ang isang halaga - Opacity - hanggang 60% at ang White A value sa 0%.
3. Sa pagpili ng Rectangle, piliin ang Object> Arrange> Send Backward . Ang mga elemento ng interface ay nakikita na ngayon sa larawan.

05 ng 07

Lumikha ng isang Larawan Avatar sa Adobe Karanasan Disenyo

Ang isang karaniwang Pattern ng Disenyo ay matatagpuan sa Chat apps kung saan ang mga tao ay makipag-usap sa bawat isa at ang larawan ng speaker ay lilitaw sa screen. Ang mga avatars na ito ay kadalasang mga imahe na nakatago. Ito ay patay na simpleng makamit ito sa XD. Ganito:

1. Magsisimula ka sa isang imahe at isang bilog o iba pang hugis sa artboard. Maaari mong punan ang bilog na may anumang kulay. Ang hindi mo kailangang gawin ay ang magdagdag ng kulay ng stroke. Mawala ito kapag nililikha mo ang epekto, kaya bakit abala. Kung kailangan mo upang pukawin ang bilog, kopyahin ito sa clipboard.
2. Ilipat ang bilog sa imahe at piliin ang parehong imahe at ang lupon. Sa pamamagitan ng mga bot object na napili, piliin ang Object> Mask na may Hugis . Kapag inilabas mo ang mouse, ang Avatar ay nilikha. Mula doon maaari mo itong palitan.
3. Kung kailangan mong magdagdag ng stroke, i-paste ang bilog na nakaupo sa iyong clipboard papunta sa artboard. Sa pamamagitan ng kopya na napiling i-off ang punan sa Mga Katangian at magdagdag ng isang kulay at lapad ng stroke. Upang i-line up ang mga ito, piliin ang parehong mga bagay at i-click ang Mga pindutan ng Align Center sa mga Align option sa itaas ng panel ng properties.
4. Kung nais mong ilipat ang larawan sa paligid sa maskara, i- double click ang maskara. Ipapakita nito ang imahe at hugis ng mask. Mag-click sa larawan at i-drag ito sa posisyon. Kapag inilabas mo ang mouse, ang imahe ay nasa bagong posisyon nito sa loob ng maskara.

06 ng 07

I-play Sa Adobe Karanasan Disenyo Artboards

Ang mga artbook ng Karanasan sa Disenyo ay hindi lamang para sa iyo upang ilagay ang nilalaman. Maaari rin silang manipulahin. Narito ang ilang mga bagay na maaari mong gawin:

1. Kung kailangan mo ng mga bersyon ng Landscape at Portrait ng isang artboard, duplicate ang artboard at, na may duplicate na napili, i-click ang pindutan ng landscape sa Properties panel. Ang Artboard ay magbabago sa orientation ng Landscape. Kung ang Artboard ay may nilalaman dito, i-click ang pangalan ng Artboard at ang mga katangian ng Artboard ay lilitaw sa Panel ng Properties.
2. Upang magdagdag ng isang custom na kulay sa Artboard, at ang proyekto para sa bagay na iyon, piliin ang Artboard at i-click ang Kulay ng Kulay ng Punan sa seksyon ng Hitsura ng Mga Properties Panel. Ipasok ang hexadecimal na halaga para sa kulay at i-click ang + sign. Ang kulay ay idaragdag bilang Custom na Kulay. Upang ilapat ang kulay na iyon sa ibang lugar, pumili ng isang bagay at i-click ang Custom Color chip upang ilapat ang kulay.
3. Ang mga artboard ay maaaring gawing naka-scroll na patayo. Upang gawin ito, piliin ang artboard at palitan ang taas nito alinman sa Mga Panels Properties o sa pamamagitan ng pag-drag sa ilalim ng artboard pababa. Sa Scrollable area ng panel ng properties, piliin ang vertical mula sa pop down na menu at ipasok ang taas ng viewport para sa screen. Ipinakita sa iyo ng dashed na asul na linya ang ilalim ng viewport. Upang subukan ito, i-click ang pindutan ng Play at mag-scroll palayo. Upang i-off ang pag-scroll, piliin ang Wala sa Pag-scroll pop down.

07 ng 07

Mag-edit ng Kit ng Mobile UI sa Disenyo ng Adobe Karanasan

Ang Karanasan ng Disenyo ay naglalaman ng isang UI Kit para sa pagbubuo ng iOS, Android at Windows UI. Kapag una mong buksan ang mga ito, maaari mong isipin na ang mga ito ay medyo mahusay na nakalagay sa lugar. Hindi naman-bawat isa sa mga piraso at piraso sa mga kit na iyon ay ganap na mae-edit. Alamin natin sa pamamagitan ng pagbuo ng Android wireframe.

1. Magsimula ka sa pamamagitan ng pagpili sa tool ng Artboard at pagpili ng Android Mobile sa seksyon ng Google ng Mga Properties Panel .
2. Piliin ang File> Buksan ang Kit ng UI> Google Material . Binubuksan nito ang Kit ng UI ng Materyal na Disenyo. Piliin ang Magnifying Glass at marquee t he Screen Guides artboard . Gusto kong magsimula sa isang ito dahil nagbibigay ito sa akin ng mga gabay para sa wastong pagkakalagay sa screen ng mga elemento ng interface. Kung nag-click ka sa isa sa mga Blue bar makikita mo ito ay naka-lock. I-click ang lock na naka-attach sa bawat isa sa kanila upang i-unlock ito . Marquee ang artboard at kopyahin ang seleksyon sa clipboard. Bumalik sa iyong dokumento at i-paste ang screen sa iyong artboard.
3. Mag-click nang isang beses sa App bar na ang tuktok ng artboard. Pansinin kung paano mo ito mapipili. Piliin ang Bagay> Ayusin> Dalhin sa Harap. Ang iyong pagpili ay nasa itaas na ngayon ng Mga Gabay sa Screen. Ito ay dapat na sabihin sa iyo ang bawat isa sa mga elemento sa screen ay ma-edit.
4. I-double click ang Status Bar sa itaas at, sa Properties Panel s et ang Punan ang kulay sa 455A64 . I-double click ang App Bar at itakda ang punan nito sa 607D8B. Ito ay dapat na sabihin sa iyo ang bawat elemento sa isang UI kit ay mae-edit upang matugunan ang mga pagtutukoy ng kulay ng proyekto.
5. Kumusta naman ang mga icon? Narito kung paano baguhin ang kanilang kulay. I-double click ang puso upang piliin ito. Kung titingnan mo ang Properties Panel, maaari mong ipalagay na hindi mo ma-edit ang seleksyon. Hindi masyado. I-double-click ang puso ng isa pang oras . Ang Mga Properties bukas at binago mo ang kulay ng punan sa FF0000. Ulitin ang trick na double-double-click para sa natitirang mga icon at teksto.