Tricks, Tips, a Thechnegau Dylunio Profiad Adobe

01 o 07

Tricks, Tips, a Thechnegau Dylunio Profiad Adobe

Pan gyflwynodd Adobe Dylunio Profiad fel Rhagolwg Cyhoeddus , llwyddodd y cwmni i gyflawni dau gamp rhyfeddol ar yr un pryd. Yn gyntaf, maent wedi diflannu gofod yn y farchnad feddalwedd prototeipio sy'n dod i'r amlwg. Yn ail, maent yn creu cyfle i ddefnyddwyr chwarae gyda "gwaith ar y gweill" ac mae'n gadael i'r defnyddwyr ddylanwadu ar y cynnydd hwnnw. Nawr bod y cais wedi bod ar gael am ychydig fisoedd, credais y byddai'n amser da i rannu rhai driciau, awgrymiadau a thechnegau Dylunio Profiad.

Ond yn gyntaf, efallai eich bod yn meddwl beth yw ystyr Meddalwedd Prototeipio. Ymhlith y prif chwaraewyr yn y gofod hwn mae Proto.io, Principle, UXPin, Atomic.io , Profiad Dylunio ac InVision. Yn wahanol i geisiadau fel Braslun 3, Photoshop a Illustrator lle mae dyluniadau sefydlog yn cael eu cynhyrchu, mae'r golygyddion graffigol hyn yn cyflwyno rhyngweithiad, cynnig a nodweddion eraill sy'n gyffredin yn y man symudol a dylunio gwe heddiw.

Gyda'r cynnydd o ffonau symudol a'r ffocws anochel, tebyg i'r laser ar y Defnyddiwr, nid yw hi bellach yn ddigonol i ddylunydd chwipio ychydig o frasluniau, dwyn ynghyd ychydig o gyfrifiaduron ac yna ryddhau'r prosiect neu ei lwytho i weinydd we. Mae'r llif gwaith UI / UX wedi newid pethau yn sylfaenol. Mae pob cam o'r broses, o adnabod y defnyddiwr, brasluniau, fframiau gwifren, mockups a phrototeipio bellach yn destun profion defnyddiwr helaeth.

Dyma'r cam olaf - prototeipio - lle mae'r pwyntiau poen yn cael eu darganfod a'u gosod cyn i'r prosiect symud i mewn i gynhyrchu terfynol. Dyma lle mae rhyngweithiad, cynnig, trawsnewidiadau sgrin a lleoli popeth ar y sgrin mor hanfodol. Ni ellir dangos problemau a phroblemau fel delwedd sefydlog neu eu hesbonio'n llafar. Wedi'r cyfan, mae'r cynhyrchion hyn ar gyfer pobl go iawn. Yn hytrach na symud pob un i god, codir y broses prototeipio yn fwyfwy gan feddalwedd graffeg a gynlluniwyd yn unig at y diben hwnnw. Mae'n haws atgyweirio camgymeriad, disodli delwedd, ailysgrifennu rhywfaint o destun, symud botwm ac yn y blaen gan ddefnyddio golygydd gweledol na chod ailysgrifennu a chodau dadgwyddo'n gyson.

Mewn gwirionedd, mae'r meddalwedd hon wedi dod yn elfen allweddol yn yr amgylchedd Dylunio a Datblygu "Prototeipio Cyflym" heddiw.

Gyda dweud hynny, gadewch i ni gael rhywfaint o hwyl gyda Experience Design.

02 o 07

Creu Pin Cyrchfan Gyda Chylch Syml yn Adobe Experience Design

Un agwedd galed o XD yw ei ddefnyddio o offer darlunio fector. Methu dod o hyd i eicon? Dim problem. Rhowch eich hun. Dyma sut:

1. Dewiswch yr Offer Ellipse ac, gyda'r pwysau Opsiwn / Alt-Shift wedi'u pwyso, tynnu cylch.
2. Gyda'r cylch a ddewiswyd, gosodwch y Llenwch Lliw i FF0000 a'r Border i "ddim" yn yr eiddo.
3. Cliciwch ddwywaith y cylch i ddangos y pwyntiau angor. Llusgwch yr angor gwaelod i lawr.
4. Dwbl-gliciwch ar y Pwynt Anchor a ddewisir a bydd y llinellau yn cael eu disodli gan y cromliniau.
5. Tynnwch gylch bach arall gyda llenwi gwyn a dim stoke. Symudwch i mewn i safle a dewiswch y pin a'r cylch. Yn y panel Alinio ar frig yr Eiddo cliciwch ar y botwm Canolfan Llorweddol a chreu'r Pin.

03 o 07

Creu Blur Cefndir yn Adobe Experience Design

Mae'n gyffredin cael testun neu gynnwys arall dros ddelwedd gefndirol. Y broblem yma yw'r ddelwedd, yn amlach na pheidio, yn grymuso'r cynnwys uchod. Un ffordd o ddatrys y mater hwn yw dileu'r ddelwedd gefndir. Gallwch ddadlwytho'r ddelwedd yn Photoshop neu feddalwedd golygu delwedd arall, ond mae hyn ychydig yn aneffeithlon, yn enwedig gan na all XD nawr ymdrin â'r dasg hon i chi. Dyma sut:

1. Creu celffwrdd newydd ac ychwanegu eich delwedd gefndirol.
2. Dewiswch yr Offeryn Rectangle a thynnu rhifyn petryal dros y ddelwedd. Gyda'r Rectangle a ddewiswyd, gosodwch Fill i White a'r Strôc i Dim.
3. Gyda'r Rectangle a ddewiswyd, dewiswch Cefndir Blur yn y panel eiddo. Y tri sliders yw Swm Blur, Goleuni a Chyflawnedd. Dyma beth maen nhw'n ei wneud:

• Swm Blur: Addasu blurriness o'r ddelwedd o dan y siâp. Y gwerth uchaf yw +50.
• Brightness: Addasu'r uchafbwyntiau a'r cysgodion yn y ddelwedd. Y gwerth isaf yw -50 ac uchafswm y gwerth yw +50.
• Diffyg: Yn effeithio ar dryloywder siâp a gwelededd y ddelwedd o dan y siâp. Mae'r gwerthoedd yn amrywio o 0% i 100%.

Os ydych chi wir eisiau "newid pethau", newid lliw y siâp a chwarae gyda'r gwerth Opacity i newid "edrych" y ddelwedd.

04 o 07

Creu Sgriwio yn Adobe Experience Design

Problem dylunio cyffredin yw elfennau rhyngwyneb, rhaid i'r elfennau fod yn lliw cyffredin ond, yn cael eu colli wrth eu gosod dros ddelwedd gefndir neu liw solet. Mae'r ateb yn sgrech. Mae graddiad yn raddiant braidd braidd wedi'i osod rhwng yr elfen rhyngwyneb a'r cefndir. Mae hyn yn hawdd i'w gyflawni yn XD. Dyma sut:

1. Creu eich artboard yn XD, ychwanegu delwedd a chopïo a gludo elfennau rhyngwyneb o'r Kit UI priodol - File> Open UI Kit ... - i mewn i'r celffwrdd. Yn y ddelwedd uchod mae'r llun yn gwneud y bar Statws a'r App Bar yn anodd ei weld.
2. Dewiswch y Offeryn Rectangle a thynnu allan petryal. Yn y Panel Eiddo dewiswch Llenwi a dewis Graddiant o'r pop i lawr yn y Picker Lliw. Gosodwch y lliwiau graddiant i Ddu a Gwyn. Gosodwch werth A - Gostyngiad - i 60% a'r gwerth Gwyn A i 0%.
3. Gyda'r Rectangle a ddewiswyd, dewiswch Gwrthrych> Trefnu> Anfon Backward . Mae'r elfennau rhyngwyneb bellach yn weladwy dros y ddelwedd.

05 o 07

Creu Delwedd Avatar yn Adobe Experience Design

Mae Patrwm Dylunio cyffredin i'w weld mewn apps Sgwrsio lle mae pobl yn siarad â'i gilydd ac mae darlun y siaradwr yn ymddangos ar y sgrin. Mae'r avatars hyn fel arfer yn delweddau sydd wedi'u cuddio. Mae'n farw syml i gyflawni hyn yn XD. Dyma sut:

1. Rydych yn dechrau gyda delwedd a chylch neu siâp arall ar y artboard. Gallwch lenwi'r cylch gydag unrhyw liw. Yr hyn nad oes angen i chi ei wneud yw ychwanegu lliw strôc. Bydd yn diflannu pan fyddwch yn creu'r effaith, felly pam boeni. Os oes angen i chi stoke y cylch, ei gopïo i'r clipfwrdd.
2. Symudwch y cylch ymlaen i'r ddelwedd a dewiswch y ddelwedd a'r cylch. Gyda gwrthrychau bot a ddewiswyd, dewiswch Gwrthrychau> Mwgwd gyda Siâp . Pan fyddwch yn rhyddhau'r llygoden, mae'r Avatar yn cael ei greu. Oddi yno gallwch chi ei newid maint.
3. Os oes angen i chi ychwanegu strôc, pastwch y cylch sy'n eistedd ar eich clipfwrdd ar y artboard. Gyda'r copi a ddewiswyd, dilewch yr eiddo yn llenwi ac ychwanegu lliw a lled strôc. Er mwyn eu llunio, dewiswch ddau wrthrych a chliciwch botymau Alinio'r Ganolfan yn yr opsiynau Alinio ar frig y panel eiddo.
4. Os ydych chi am symud y llun yn y mwgwd, cliciwch ddwywaith ar y mwgwd. Bydd hyn yn dangos y ddelwedd a'r siâp mwgwd. Cliciwch ar y ddelwedd a'i llusgo i mewn i'r safle. Pan fyddwch chi'n rhyddhau'r llygoden, bydd y ddelwedd yn ei safle newydd y tu mewn i'r mwgwd.

06 o 07

Chwarae Gyda Adobe Experience Design Artboards

Nid yw'r artfyrddau Dylunio Profiad ar gael i chi i osod cynnwys. Maent hefyd, yn gallu cael eu trin. Dyma ddau beth y gallwch chi eu gwneud:

1. Os oes angen fersiynau Tirwedd a Phortread arnoch o artboard, dyblygu'r celffwrdd ac, gyda'r dewis dyblyg, cliciwch ar y botwm tirlun yn y panel Eiddo. Bydd y Artboard yn newid i gyfeiriadedd y Tirlun. Os oes gan Artboard gynnwys arno, cliciwch ar enw Artboard ac mae eiddo Artboard yn ymddangos yn y Panel Eiddo.
2. I ychwanegu lliw arferol i'r Artboard, a'r prosiect ar gyfer y mater hwnnw, dewiswch Artboard a chliciwch ar y sglodion lliw Llenwi yn adran Ymddangosiad y Panel Eiddo. Rhowch y gwerth hecsadegol ar gyfer y lliw a chliciwch ar yr arwydd +. Bydd y lliw yn cael ei ychwanegu fel Lliw Custom. I gymhwyso'r lliw hwnnw mewn mannau eraill, dewiswch wrthrych a chliciwch ar y sglodion Lliw Custom i ymgeisio'r lliw.
3. Gellir gwneud artboards yn fertigol. I wneud hyn, dewiswch y celffwrdd a newid ei uchder naill ai ar y Paneli Eiddo neu drwy lusgo gwaelod y celffwrdd i lawr. Yn ardal Scrollable y panel eiddo, dewiswch fertigol o'r ddewislen pop i lawr a nodwch uchder y portread ar gyfer y sgrin. Mae'r llinell gludo honno'n dangos gwaelod y portport i chi. Er mwyn ei brofi, cliciwch ar y botwm Chwarae a sgroliwch i ffwrdd. I droi sgrolio, dewiswch Dim yn y sgrolio pop i lawr.

07 o 07

Golygu Kit UI Symudol yn Adobe Experience Design

Mae Profiad Dylunio yn cynnwys Kit UI ar gyfer datblygu iOS, Android a Windows UI's. Pan fyddwch chi'n eu agor gyntaf, efallai y credwch eu bod wedi'u gosod yn eithaf da ar waith. Nid yw pob un o'r darnau a'r darnau yn y pecynnau hynny'n gwbl addas. Gadewch i ni ddarganfod drwy adeiladu fframlen wifren Android.

1. Dechreuwch trwy ddewis yr offer Artboard a dewis Android Mobile yn adran Google y Panel Eiddo .
2. Dewis Ffeil> Gosod UI Kit> Deunydd Google . Mae hyn yn agor y Kit Dylunio Deunyddiau Deunydd. Dewiswch y Gwydr Adfywio a phabell y sgrin Artboard Guides Screen . Rwy'n hoffi dechrau gyda'r un hwn oherwydd mae'n rhoi i mi y canllawiau ar gyfer lleoliadau sgrin priodol ar yr elfennau rhyngwyneb. Os ydych chi'n clicio ar un o'r bariau Glas fe welwch chi ei fod wedi'i gloi. Cliciwch y clo ynghlwm wrth bob un ohonynt i ddatgloi . Gwisgwch y celffwrdd a chopïwch y detholiad i'r clipfwrdd. Dychwelwch i'ch dogfen a gludwch y sgrin yn eich celf art.
3. Cliciwch unwaith ar y bar App sy'n uchafbwynt y artboard. Rhowch wybod sut y gallwch ei ddewis. Dewiswch Gwrthrych> Trefnu> Dewch i'r Blaen. Mae'ch dewis bellach yn uwch na'r Canllawiau Sgrin. Dylai hyn ddweud wrthych fod modd olygu pob un o'r elfennau ar y sgrin.
4. Cliciwch ddwywaith ar y Bar Statws ar y brig ac, yn y Panel Eiddo ac et Lliw Llenw i 455A64 . Cliciwch ddwywaith ar yr App Bar a gosodwch ei lenwi i 607D8B. Dylai hyn ddweud wrthych y gellir olygu pob elfen mewn pecyn DeIU i gwrdd â manylebau lliw y prosiect.
5. Beth am yr eiconau? Dyma sut i newid eu lliw. Cliciwch ddwywaith y galon i'w ddewis. Os edrychwch ar y Panel Eiddo, efallai y byddwch yn tybio na allwch olygu'r dewis. Ddim yn eithaf. Cliciwch ddwywaith y galon unwaith eto . Mae'r Eiddo yn agored ac rydych chi'n newid y lliw i FF0000. Ailadroddwch yr atyniad dwbl-cliciwch ddwywaith ar gyfer yr eiconau a'r testun sy'n weddill.