Adobe Eksperyans Design Ke trik nouvèl, Konsèy, ak Teknik

01 nan 07

Adobe Eksperyans Design Ke trik nouvèl, Konsèy, ak Teknik

Lè Adobe prezante Design Experience kòm yon Preview Piblik , konpayi an akonpli de fe etonan olye etonan nan menm tan an. Premyèman, yo mache soti yon espas nan mache lojisyèl émergentes prototype. Dezyèmman, yo kreye yon opòtinite pou itilizatè yo jwe avèk yon "travay-nan-pwogrè" epi li kite itilizatè yo enfliyanse pwogrè sa a. Kounye a ke aplikasyon an te disponib pou kèk mwa, mwen te panse li ta yon bon moman pou pataje kèk ke trik nouvèl eksperyans, konsèy, ak teknik.

Men, anvan, ou ka mande ki sa ki vle di pa Software Prototyping. Pami gwo jwè yo nan espas sa a yo se Proto.io, Prensip, UXPin, Atomic.io , Design eksperyans ak InVision. Kontrèman ak aplikasyon tankou Sketch 3, Photoshop ak Illustrator kote desen estatik yo pwodui, sa yo editè grafik prezante entèaktivite, mouvman ak lòt karakteristik komen nan espas mobil ak entènèt konsepsyon jodi a.

Avèk ogmantasyon mobil ak inevitab, lazè-tankou konsantre sou itilizatè a, li se pa ase pou yon designer fwe moute yon desen kèk, rale ansanm yon comps kèk ak Lè sa a, lage pwojè a oswa Upload li nan yon sèvè wèb. Te workflow UI / UX a bagay fondamantalman chanje. Chak etap nan pwosesis la, soti nan idantifye itilizatè a, desen, fil, mockups, ak prototype yo kounye a sijè a tès itilizatè vaste.

Li se dènye etap - Prototype - kote pwen yo doulè yo dekouvri ak fiks anvan pwojè a deplase nan pwodiksyon final la. Sa a se kote entèaktivite, mouvman, ekran tranzisyon ak plasman nan tout bagay sou ekran an yo, se pou kritik. Pwoblèm ak pwoblèm yo pa ka senpleman montre kòm yon imaj estatik oswa eksplike vèbalman. Apre yo tout, pwodwi sa yo se pou moun reyèl. Olye deplase tout sa ki nan kòd, pwosesis la pwototip se de pli zan pli ke yo te eskize pa lojisyèl grafik ki fèt jis pou sa. Li pi fasil pou repare yon erè, ranplase yon imaj, reekri kèk tèks, deplase yon bouton ak sou sa lè l sèvi avèk yon editè vizyèl pase toujou ap reekri ak kòd debogaj.

An reyalite, lojisyèl sa a te vin yon eleman enpòtan nan "Rapid Pwototiping" Design ak Devlopman anviwònman jodi a.

Avèk ki te di, kite a gen kèk plezi ak Design Design.

02 nan 07

Kreye yon PIN destinasyon Avèk yon senp senp nan Design Adobe Eksperyans

Yon aspè pwòp nan XD se sèvi ak li yo nan zouti desen vektè. Pa ka jwenn yon icon? Pa gen pwoblèm. Woule pwòp ou yo. Men ki jan:

1. Chwazi Zouti nan Ellipse , epi, ak opsyon / Alt-chanjman kle yo bourade, trase yon sèk.
2. Avèk sèk la chwazi, mete koulè a ​​Ranpli FF0000 ak fwontyè a nan "Pa gen yonn" nan pwopriyete yo.
3. Double-klike sou sèk la yo montre pwen yo jete lank. Trennen anba jete lank anba a.
4. Double-klike sou pwen nan Anchor chwazi ak koub yo ranplase ak liy.
5. Trase yon lòt sèk ti ak yon blan ranpli epi pa gen okenn stoke. Deplase li nan pozisyon epi chwazi peny lan ak sèk la. Nan panèl la aliman nan tèt la nan Pwopriyete yo klike sou Bouton Sant Orizontal la ak PIN la kreye.

03 nan 07

Kreye yon Blur Istorik nan Design Adobe Eksperyans

Li se yon komen yo gen tèks oswa lòt kontni sou yon imaj background. Pwoblèm nan isit la se imaj la, pi souvan pase pa, depase kontni an pi wo a li. Youn nan fason pou rezoud pwoblèm sa a se bler imaj la background. Ou ka flou imaj la nan fotoschop oswa lòt lojisyèl koreksyon imaj, men sa a se yon ti jan rezèvwa, espesyalman depi XD kapab kounye a okipe travay sa a pou ou. Men ki jan:

1. Kreye yon nouvo atizay epi ajoute imaj background ou.
2. Chwazi Zouti Rectangle yon nd trase yon rektang sou imaj la. Avèk Rectangle a chwazi, mete ranpli a Blan ak konjesyon serebral la Okenn.
3. Avèk Rectangle a chwazi, chwazi Background Blur nan panèl la pwopriyete. Twa koulis yo se Blur Kantite, Luminozite ak pèch. Men sa yo fè:

• Blur Kantite: Ajiste blurriness nan imaj la anba fòm nan. Valè a maksimòm se +50.
• Brightness: Ajiste En yo ak lonbraj nan imaj la. Valè minimòm lan se -50 ak valè maksimòm lan se +50.
• Opazite: Afekte transparans nan fòm nan ak vizibilite nan imaj la anba fòm nan. Valè yo varye ant 0% a 100%.

Si ou reyèlman vle "chanje bagay sa yo moute", chanje koulè a ​​nan fòm nan ak jwe ak valè a Opacity chanje "gade nan" nan imaj la.

04 nan 07

Kreye yon Scrim nan Design Adobe Eksperyans

Yon pwoblèm konsepsyon komen se eleman eleman koòdone dwe fè yon koulè komen men, yo pèdi lè yo mete sou yon imaj background oswa koulè solid. Solisyon an se yon skrim. Yon scrim se yon gradyan yon ti jan opak mete ant eleman nan koòdone ak background nan. Sa a se fasil akonpli nan XD. Men ki jan:

1. Kreye artboard ou a nan XD, ajoute yon imaj ak kopi epi kole yon eleman koòdone soti nan UI Twous ki apwopriye - File> Open UI Twous ... - nan tablo a. Nan imaj la pi wo a foto a fè ba a Status ak Bar a App difisil yo wè.
2. Chwazi Zouti Rectangle a epi trase yon rektang. Nan panèl la Pwopriyete chwazi Ranpli epi chwazi gradyan soti nan pòp la desann nan seleksyon an koulè. Mete koulè yo gradyan nan nwa ak blan. Mete valè a Yon - Opacity- a 60% ak blan an Yon valè a 0%.
3. Avèk Rectangle a chwazi, chwazi Objè> Fè aranjman> Voye bak . Eleman yo koòdone yo kounye a se vizib sou imaj la.

05 nan 07

Kreye yon Avatar Imaj nan Design Adobe Eksperyans

Yon modèl Design komen yo jwenn nan apps Chat kote moun pale youn ak lòt ak foto oratè a parèt sou ekran an. Sa yo avatar yo anjeneral imaj ki te maske. Li se senp mouri akonpli sa a nan XD. Men ki jan:

1. Ou kòmanse ak yon imaj ak yon sèk oswa lòt fòm sou tablo a. Ou ka ranpli sèk la ak nenpòt koulè. Ki sa ou pa bezwen fè se ajoute yon koulè konjesyon serebral. Li pral disparèt lè ou kreye efè a, Se konsa, poukisa deranje. Si ou bezwen stoke sèk la, kopye li nan clipboard la.
2. Deplase sèk la sou imaj la epi chwazi tou de imaj la ak sèk la. Avèk objè bot chwazi, chwazi Objè> Mask ak fòm . Lè ou lage sourit la, se Avatar la kreye. Soti nan la ou ka rdimansyonman li.
3. Si ou bezwen ajoute yon konjesyon serebral, kole sèk la chita sou clipboard ou sou tablo a. Avèk kopi a chwazi fèmen ranpli a nan pwopriyete yo epi ajoute yon koulè konjesyon serebral ak lajè. Liy yo moute, chwazi tou de objè epi klike sou bouton yo aliman Sant nan opsyon ki aliyen nan tèt la nan panèl la pwopriyete.
4. Si ou vle pou avanse pou pi foto a alantou nan mask la, doub klike sou mask la. Sa a pral montre imaj la ak fòm nan mask. Klike sou imaj la epi trennen l nan pozisyon. Lè ou lage sourit la, imaj la pral nan nouvo pozisyon li anndan mask la.

06 nan 07

Jwe ak Artboards Design Adobe Eksperyans

Eksperyans Design atizay yo pa jis gen pou ou pou w mete kontni. Yo, tou, ka manipile. Men yon koup de bagay ou ka fè:

1. Si ou bezwen vèsyon Landscape ak Portrait nan yon tablo, kopi artboard la, epi, ak kopi a chwazi, klike sou bouton an jaden flè nan panèl la Pwopriyete. Artboard la pral chanje nan oryantasyon Landscape. Si Artboard la gen kontni sou li, klike sou non Artboard la ak pwopriyete yo Artbo ap parèt nan panèl la Pwopriyete.
2. Pou ajoute yon koulè koutim nan Artboard a, ak pwojè a pou ki matyè, chwazi Artboard a, epi klike chip nan koulè Ranpli nan seksyon an Aparans nan panèl la Pwopriyete. Mete valè ekzadesimal la pou koulè a ​​epi klike sou siy nan. Koulè a ​​pral ajoute kòm yon Koulè Custom. Pou aplike ke koulè yon lòt kote, chwazi yon objè epi klike sou Custom koulè chip pou aplike pou koulè a.
3. Atizay ka fè vètikal defilman. Pou fè sa, chwazi tablo a ak chanje wotè li swa sou panèl yo Pwopriyete oswa pa trenen anba a nan bo yo artboard. Nan zòn nan Scrollable nan panèl la pwopriyete, chwazi vètikal soti nan meni an pòp desann epi antre nan wotè a viewport pou ekran an. Sa a liy ble bloke montre ou anba a nan viewport la. Teste li, klike sou bouton an Jwe ak desann. Pou fèmen defile, chwazi Okenn nan defile pòp la desann.

07 nan 07

Edit yon UI Twous mobil nan Design Adobe Eksperyans

Eksperyans Design gen yon UI Twous pou devlope iOS, Android ak Windows UI a. Lè ou premye ouvri yo, ou ka panse yo trè byen mete an plas. Pa byen-chak nan Bits yo ak moso nan sa yo twous se konplètman editabl. Se pou yo jwenn soti nan bati yon fil elektrik android.

1. Ou kòmanse pa chwazi zouti nan Artboard epi chwazi Android mobil nan seksyon an Google nan panèl la Pwopriyete .
2. Chwazi File> Open UI Kit> Google Materyèl . Sa a ouvri Kit la Design UI Kit. Chwazi glas la loup ak makèt t li ekran Gid artboard . Mwen renmen kòmanse ak yon sèl sa a paske li ban m 'gid yo pou plasman apwopriye sou ekran nan eleman yo koòdone. Si ou klike sou youn nan ba yo ble ou pral wè li se fèmen. Klike sou seri a tache nan chak nan yo déblotché li . Make tablo a ak kopi seleksyon an nan clipboard la. Retounen nan dokiman ou epi kole ekran an nan bo ou.
3. Klike sou yon fwa sou ba a App ki tèt la nan bo a. Remake kòman ou ka chwazi li. Chwazi objè> fè aranjman> Pote devan. Seleksyon ou an kounye a pi wo a gid yo ekran. Sa a ta dwe di ou chak nan eleman yo sou ekran an kapab yo dwe edited.
4. Double klike sou Status la Bar nan tèt la, epi, nan Panel la Pwopriyete a ak koulè a ​​Ranpli 455A64 . Double klike sou Bar App la epi mete ranpli li nan 607D8B. Sa a ta dwe di ou ka chak eleman nan yon twous UI ka edited satisfè espesifikasyon koulè pwojè a.
5. Ki sa ki sou ikon yo? Men kijan pou chanje koulè yo. Double klike sou kè a nan chwazi li. Si ou gade nan Panel la Pwopriyete, ou ka asime ou pa ka edite seleksyon an. Pa byen. Double klike sou kè a yon lòt fwa ankò . Pwopriyete yo louvri epi ou chanje koulè a ​​ranpli FF0000. Repete sa a Trick doub-doub-klike sou pou ikon ki rete yo ak tèks la.