I-Adobe Experience Design Tricks, Amathiphu, Nezobuchwepheshe

01 ngo-07

I-Adobe Experience Design Tricks, Amathiphu, Nezobuchwepheshe

Lapho i-Adobe isungula i- Experience Design njenge-Public Preview , inkampani yafeza ama-feats amabili amahle kakhulu ngesikhathi esifanayo. Okokuqala, bafaka isikhala emakethe ye-prototyping software evelayo. Okwesibili, badala ithuba abasebenzisi ukuthi badlale ngokusebenza "ngokuqhubekayo" futhi uvumela abasebenzisi ukuba bathinte inqubekela phambili. Manje ukuthi isicelo sesitholakale izinyanga ezimbalwa, ngicabanga ukuthi kuyoba yisikhathi esihle ukwabelana ngamasu, amacebiso, namasu we-Experience Design.

Kodwa okokuqala, ungase uzibuze ukuthi kusho ukuthini i-Prototyping Software. Phakathi kwabadlali abakhulu kule ndawo kukhona i-Proto.io, i-Principle, i-UXPin, i-Atomic.io , i-Experience Design ne-InVision. Ngokungafani nezinhlelo zokusebenza ezifana neSketch 3, i-Photoshop ne-Illustrator lapho kukhishwa khona imiklamo emihle, labahleli abadwebayo baveza ukusebenzisana, ukunyakaza nezinye izici ezivame isikhala somklamo weselula neselula.

Ngokuphakama kweselula nokungenakugwemeka, ukugxila kwe-laser kumsebenzisi, akusekho okwanele ukuthi umklami aqhube imidwebo embalwa, udonse ndawonye ama-comps ambalwa bese ukhulula iphrojekthi noma uyilayishe kwisiphakeli sewebhu. Ukuhamba komsebenzi we-UI / UX kuye kwashintsha kakhulu izinto. Zonke izinyathelo zenkambiso, kusukela ekuboneni umsebenzisi, imidwebo, amafremu, ama-mockups, kanye ne-prototyping manje kuncike ekuhlolweni okubanzi komsebenzisi.

Lesi yisigaba sokugcina - ukubonakala - lapho kutholakala amaphuzu ebuhlungu futhi ngaphambi kokuba iphrojekthi iqhubekele ekukhiqizeni kokugcina. Yilapho ukusebenzisana, ukunyakaza, ukuguqulwa kwesikrini nokubekwa kwento yonke esikrinini kubaluleke kangaka. Izinkinga nezinkinga azikwazi ukuboniswa nje njengesithombe esiphezulu noma sichaze ngamazwi. Phela, le mikhiqizo iqondene nabantu bangempela. Esikhundleni sokuhambisa konke lokho ukuze ikhodi, inqubo ye-prototyping iqhutshwa ngokuqhubekayo yi-software ehluzisayo eyenzelwe kuphela leyo njongo. Kulula ukulungisa iphutha, ukubuyisela isithombe, ukubhala kabusha umbhalo, ukuhambisa inkinobho nokunye nokusebenzisa umhleli obukwayo kunokubhala njalo ikhodi yokulungisa kabusha.

Eqinisweni, le software iye yaba yingxenye ebalulekile emvelweni we-"Rapid Prototyping" we-Design and Development.

Ngalokho kwathiwa, masijabule nge-Design Design.

02 ngo-07

Dala i-Pin Pin ne-Circle elula ku-Adobe Experience Design

Isici esisodwa esihle se-XD ukusetshenziswa kwayo kwamathuluzi wokudweba i-vector. Ayikwazi ukuthola isithonjana? Ayikho inkinga. Roll eyakho. Nansi indlela:

1. Khetha Ithuluzi Ellipse futhi, ngokuchofoza okhiye bokukhethwa / Alt-Shift, dweba umbuthano.
2. Ngombuthano okhethiwe, setha Umbala wokugcwalisa ku-FF0000 kanye neBorder ukuze "akukho" ezindaweni.
3. Chofoza kabili umbuthano ukuze ubonise amaphuzu we-anchor. Hudula ihange elingezansi phansi.
4. Chofoza kabili i-Anchor Point futhi i-curve ifakwe emigqeni.
5. Dweba enye imbuthano encane ngokugcwalisa okumhlophe futhi akukho isitofu. Yisuse endaweni bese ukhetha iphini kanye nombuthano. Iphaneli yokuvumelanisa phezulu kwe-Properties chofoza inkinobho ye-Horizontal Center futhi iPhini idalwe.

03 ka-07

Dala ukufiphaza kwangemuva ku-Adobe Design Design

Kuyinto evamile ukuba nombhalo noma okunye okuqukethwe ngaphezu kwesithombe sangemuva. Inkinga lapha isithombe, ngokuphindaphindiwe kunalokho, kunamandla ngaphezu kokuqukethwe. Enye indlela yokuxazulula le nkinga ukuphazamisa isithombe sangemuva. Ungakwazi ukufiphaza isithombe ku-Photoshop noma kwesinye isofthiwe yokuhlela isithombe, kodwa lokhu akusizi kahle, ikakhulukazi kusukela i-XD manje isingathawula lo msebenzi kuwe. Nansi indlela:

1. Dala i-artboard entsha bese wengeza isithombe sakho sangemuva.
2. Khetha Ithuluzi le-Rectangle bese udweba umugqa phezu kwesithombe. Ngesikhethini esikhethiwe, setha ukugcwalisa ku-White kanye neStroke kuya ku-None.
3. Ngesigqebhethweni esikhethiwe, khetha I-Background Blur kuphaneli yezakhiwo. Abahleli abathathu yi-Inani le-Blur, uBrightness and Opacity. Nakhu abakwenzayo:

• Inani le-Blur: Ukuhlehlisa ukukhanya kwesithombe ngaphansi kwesimo. Inani eliphakeme liyi-+50.
• Ukukhanya: Ulungisa izinto ezivelele nezithunzi ezithombeni. Inani elincane lingu -50 futhi inani eliphakeme liyi-+50.
• I-Opacity: ithinta ukubonakala kokuma nokubonakala kwesithombe ngaphansi kwesimo. Amagugu ububanzi kusuka ku-0% kuya ku-100%.

Uma ufuna ngempela "ukushintsha izinto", shintsha umbala wesimo futhi udlale ngenani le-Opacity ukushintsha "ukubukeka" kwesithombe.

04 ka 07

Dala iScrim ku-Adobe Design Design

Inkinga yokuklama evamile yinkimbinkimbi yezici izakhi kufanele zibe umbala ovamile kodwa, ilahlekile uma ifakwe phezu kwesithombe sangemuva noma umbala oqinile. Isixazululo singumlobi. I-scrim i-odique gradient efakwe phakathi kwe-element element kanye nesizinda. Lokhu kulula ukukwenza ku-XD. Nansi indlela:

1. Dala i-artboard yakho ku-XD, engeza isithombe bese ukopisha bese unamathisela izici zobunikazi ezivela ku- UI efanelekile - Ifayela> Vula i-Kit ye-UI ... - ku-artboard. Kulesithombe esingenhla isithombe senza ibha yomumo kanye ne-App Bar kunzima ukubona.
2. Khetha i-Rectangle Tool bese udweba umugqa. Ku-Panel Properties khetha Gcwalisa bese ukhetha I-Gradient ukusuka phezulu ku-Picker Color. Hlela imibala ye-gradient kuya ku-Black and White. Setha i-A value - Opacity- kuya ku-60% kanye ne- White A value ku-0%.
3. Ngesikhethini esikhethiwe, khetha Into> Hlela> Thumela emuva . Izakhi zobunikazi manje zibonakala ngaphezu kwesithombe.

05 ka-07

Dala isithombe sezithombe ku-Adobe Experience Design

I-Design Pattern ejwayelekile iyatholakala kuzinhlelo zokusebenza zengxoxo lapho abantu bakhuluma khona nomfanekiso wesipikha livela esibukweni. Lawa ma-avatars ngokuvamile ayenemifanekiso efihliwe. Kuyinto elula efeze lokhu ku-XD. Nansi indlela:

1. Uqala ngesithombe nombuthano noma enye imidwebo ku-artboard. Ungagcwalisa umbuthano nganoma yimuphi umbala. Okungadingeki ukwenze ukufaka umbala wesifo. Kuzophela uma udala umphumela, ngakho kungani ukhathazeka. Uma udinga ukumisa umbuthano, ulikopishe ebhodini lokunamathisela.
2. Hambisa umbuthano uye esithombeni bese ukhetha kokubili isithombe nombuthano. Ngezinto ze-bot ezikhethiwe, khetha Into> Mask nge Shape . Uma ukhulula igundane, i-Avatar idalwe. Kusuka lapho ungakwazi ukuyibeka kabusha.
3. Uma udinga ukwengeza uhlangothi, unamathisela umbuthano ohlezi ebhodini lokunamathisela kwakho ku-artboard. Ikhophi ekhethiwe ivimbela ukugcwalisa kwi-Properties bese ungeze umbala nobubanzi besisu. Ukuze uzilayishe, khetha kokubili izinto bese uchofoza izinkinobho ze-Centre Ukuqondisa kwizinketho zokuvumelanisa phezulu kwephaneli yezakhiwo.
4. Uma ufuna ukuhambisa isithombe esiseduze mask, chofoza kabili mask. Lokhu kuzobonisa isithombe nesimo semaski. Chofoza esithombeni bese uhudulela endaweni. Uma ukhulula igundane, isithombe sizobe sesesimweni sayo esisha ngaphakathi kwe-mask.

06 ka-07

Dlala nge-Adobe Experience Design Artboards

I-Experience Design Designboards ayilona nje ukuthi ubeke okuqukethwe. Futhi, nazo, zingasetshenziswa. Nazi izinto ezimbalwa ongazenza:

1. Uma udinga izinguqulo ze-Landscape ne-Portrait ze-artboard, phinda i-artboard futhi, nge-duplicate ekhethiwe, chofoza inkinobho ye-landscape kuphaneli ye-Properties. I-Artboard izoshintshela ku-Orientation orientation. Uma i-Artboard isixhumene nayo, chofoza igama le-Artboard kanye nezakhiwo ze-Artboard kuzovela kwi-Properties Panel.
2. Ukwengeza umbala ongokwezifiso ku-Artboard, kanye nephrojekthi yalolu daba, khetha i-Artboard bese uchofoza i-chip yokugcwalisa umbala kusigaba sokubukeka se-Properties Panel. Faka inani le-hexadecimal lombala bese uchofoza uphawu +. Umbala uzowengezwa njengombala wendabuko. Ukusebenzisa lo mbala kwenye indawo, ukhethe into bese uchofoze inkinobho Yombala Yomuntu ukuze usebenzise umbala.
3. Ama-arborboards angenziwa ahlolwe ngokuqondile. Ukuze wenze lokhu, khetha i-artboards futhi ushintshe ukuphakama kwayo noma ku-Properties Panels noma ngokuhudula phansi kwe-artboard phansi. Esikhathini esiphezulu sephaneli yezakhiwo, khetha okuqondile kusuka kwimenyu ye-pop bese ufaka ukuphakama kokubukwa kwesikrini. Lokho okweqa umugqa ohlaza okwesibhakabhaka kukubonisa phansi kwe-viewport. Ukuyihlola, chofoza inkinobho ye-Play bese upheqela kude. Ukucima ukupheqa, khetha u-None ku-Scrolling pop phansi.

07 ka-07

Hlela ikhamera ye-UI yeselula ku-Adobe Experience Design

I-Design Design iqukethe i-Kit ye-UI yokuthuthukisa i- iOS, i-Android ne-Windows UI. Uma uqala ukuwavula, ungase ucabange ukuthi kuhle kahle. Akunakwenzeka-yilowo nalowo izicucu kanye nezicucu kulawo makethi ahleleke ngokuphelele. Ake sithole ngokukwakha i-wireframe ye-Android.

1. Uqala ngokukhetha ithuluzi le-Artboard nokukhetha i- Android Mobile engxenyeni ye-Google ye-Panel Properties .
2. Khetha ifayela> Vula i-UI Kit> I-Google Material . Lokhu kuvulwa I-Kit Design Material UI Kit. Khetha i-Glass Magnifying ne-Marquee t Height Guides artboard . Ngithanda ukuqala ngalokhu ngoba inginika iziqondiso zokubekwa kahle kwesikrini kwezakhi zobuso. Uma uchofoza kwenye yezingqimba zeBlue uzobona ukuthi ikhiyiwe. Chofoza ukhiye onamathele kuwo ngamunye ukuwuvula . Marquee i-artboard bese ukopisha ukukhethwa ebhodini lokunamathisela. Buyela kudokhumenti yakho bese unamathisela isikrini ku-artboard yakho.
3. Chofoza kanye ku-bar ye-App ukuthi phezulu kwe-artboard. Phawula ukuthi ungayikhetha kanjani. Khetha Into> Hlela> Letha Ngaphambili. Ukukhethwa kwakho manje sekuphezu kwe-Guides Screen. Lokhu kufanele kukutshele zonke izakhi esikrinini ziyakwazi ukuhlelwa.
4. Chofoza kabili i-Status Bar phezulu futhi, kwi-Properties Panel s kanye nombala ogcwalisa ku-455A64 . Chofoza kabili i-App Bar bese ubeka ukugcwalisa ku-607D8B. Lokhu kufanele kukutshele into ngayinye ku-kit ye-UI ingalungiswa ukuze ihlangabezane nezimpawu zombala wephrojekthi.
5. Kuthiwani ngemifanekiso? Nakhu ukuthi ungashintsha kanjani umbala wabo. Chofoza kabili inhliziyo ukuyikhetha. Uma ubheka i-Properties Panel, ungase ucabange ukuthi awukwazi ukuhlela ukukhetha. Akunjalo ngempela. Chofoza kabili inhliziyo isikhathi esengeziwe . I-Properties ivulekile futhi ushintsha umbala wokugcwalisa ku-FF0000. Phinda leli qhinga eliphindwe kabili-kabili lokushiya icons ezisele kanye nombhalo.