Adobe Reynsla Hönnuður Bragðarefur, Ábendingar og tækni

01 af 07

Adobe Reynsla Hönnuður Bragðarefur, Ábendingar og tækni

Þegar Adobe kynnti Experience Design sem opinber sýnishorn , náði félagið tveimur frekar frábærum árangri á sama tíma. Í fyrsta lagi stakku þeir út pláss í nýju frumgerðartækni hugbúnaðarmarkaðarins. Í öðru lagi skapaði þau tækifæri fyrir notendur að spila með "vinnslu í vinnslu" og leyfa notendum að hafa áhrif á þessi framfarir. Nú þegar umsóknin hefur verið í boði í nokkra mánuði, hélt ég að það væri gaman að deila sumum upplifun hönnunar bragðarefur, ábendingar og tækni.

En fyrst gætir þú verið að velta fyrir þér hvað er átt við með frumgerðartækni. Meðal helstu leikmanna í þessu rými eru Proto.io, Principle, UXPin, Atomic.io , Experience Hönnun og InVision. Ólíkt forritum eins og skissu 3, Photoshop og Illustrator þar sem truflanir eru framleiddar, kynna þessar grafísku ritstjórar gagnvirkni, hreyfingu og aðrar aðgerðir sem eru algengar í farsíma- og vefhönnunarsvæðum í dag.

Með hækkun farsíma og óhjákvæmilegt, leysir-eins og áherslu á notandann, er það ekki lengur nóg fyrir hönnuður að svipa upp nokkrum teikningum, draga saman nokkra hluti og slepptu því verkefninu eða hlaða því upp á vefþjón. UI / UX vinnuafl hefur í grundvallaratriðum breytt hlutum. Sérhvert skref í ferlinu, frá því að skilgreina notandann, teikningar, vírframleiðslur, mockups og frumgerð, eru nú háð mikilli notendapróf.

Það er síðasta stigið - frumgerð - þar sem sársauki er uppgötvað og fast áður en verkefnið færist í lokapróf. Þetta er þar sem gagnvirkni, hreyfing, skjárinnflutningur og staðsetning allt á skjánum eru svo mikilvægar. Málefni og vandamál geta ekki einfaldlega verið sýndar sem truflanir mynd eða útskýrt munnlega. Eftir allt saman, þessar vörur eru fyrir alvöru menn. Frekar en að flytja allt þetta til að kóða er prototyping ferlinu í auknum mæli í gangi með grafík hugbúnað sem er hannað bara til þess. Það er auðveldara að laga mistök, skipta um mynd, endurskrifa texta, færa hnapp og svo framvegis með því að nota sjónrænt ritara en stöðugt endurskrifa og kembiforrit.

Í raun hefur þessi hugbúnaður orðið lykilþáttur í hönnun og þróun umhverfisins "Rapid Prototyping" í dag.

Með því sagði, við skulum skemmtilegt með reynsluhönnun.

02 af 07

Búðu til áfangastaðarljós með einföldum hring í Adobe Experience Hönnun

Eitt snyrtilegt þætti XD er notkun þess á vigtaverkfærum. Get ekki fundið táknið? Ekkert mál. Rúllaðu þínu eigin. Hér er hvernig:

1. Veldu Ellipse Tólið og taktu hring með valkostinum / Alt-Shift lyklunum.
2. Með hringnum sem er valið, veldu Fylltu litina á FF0000 og Border til "none" í eignunum.
3. Tvöfaldur-smellur á hringinn til að sýna akkeripunkta. Dragðu botnarkraftinn niður.
4. Tvöfaldur-smellur á valda Anchor Point og línurnar eru skipt út fyrir línur.
5. Teikna annan lítinn hring með hvítum fyllingu og ekki stoke. Færðu það í stað og veldu pinna og hringinn. Í samsvörunartöflunni efst á eignunum smellirðu á Lárétt miðhnappinn og Pinna er búinn til.

03 af 07

Búðu til bakgrunnslit í Adobe Experience Hönnun

Það er algengt að hafa texta eða annað efni yfir bakgrunnsmynd. Vandamálið hér er myndin, oftar en ekki, overpowers innihaldið fyrir ofan það. Ein leið til að leysa þetta mál er að þoka bakgrunnsmyndina. Þú getur óskýr myndina í Photoshop eða öðrum myndvinnsluforritum, en þetta er nokkuð óhagkvæmt, sérstaklega þar sem XD getur nú séð þetta verkefni fyrir þig. Hér er hvernig:

1. Búðu til nýtt listatriði og bættu við bakgrunnsmynd þinni.
2. Veldu Rectangle Tool og dragðu rétthyrningur yfir myndina. Með rétthyrlinum sem valið er skaltu stilla fyllinguna að hvítu og högginu að engu.
3. Með rétthyrningi valið, veldu Bakgrunnsleysi í eiginleikum spjaldið. Þrjú renna eru Blur magn, Birtustig og ógagnsæi. Hér er það sem þeir gera:

• Blur magn: Stilla blurriness á myndinni undir löguninni. Hámarksgildi er +50.
• Birtustig: Stilla hápunktur og skuggi í myndinni. Lágmarksgildi er -50 og hámarksgildi er +50.
• Ógagnsæi: Hefur áhrif á gagnsæi formsins og sýnileika myndarinnar undir löguninni. Gildin eru á bilinu 0% til 100%.

Ef þú vilt virkilega "skipta um hlutina" skaltu breyta lit formsins og spila með ógagnsæti til að breyta "útliti" myndarinnar.

04 af 07

Búðu til Scrim í Adobe Experience Hönnun

Algeng hönnun vandamál er tengi þættir þættir verða að vera algeng litur en glatast þegar þær eru settar yfir bakgrunnsmynd eða solid lit. Lausnin er scrim. A scrim er nokkuð ógagnsæ halli settur á milli tengi þátturinn og bakgrunninn. Þetta er auðvelt að ná í XD. Hér er hvernig:

1. Búðu til listaplötuna þína í XD, bættu við mynd og afritaðu og límdu tengisþætti úr viðeigandi UI Kit - File> Open UI Kit ... - í listblað. Í myndinni hér að framan gerir myndin stöðuátakið og forritastikan erfitt að sjá.
2. Veldu Rectangle Tool og taktu út rétthyrningur. Í Fasteignamiðjunni velurðu Fylltu og veldu Gradient frá skjóta niður í Liturvalið. Stilltu hallastigin í Svart og hvítt. Stilltu A-gildi - Ógagnsæi-til 60% og Hvítt A-gildi í 0%.
3. Með rétthyrningi valið skaltu velja Object> Arrange> Send Backward . Grunneiningarnar eru nú sýnilegar yfir myndina.

05 af 07

Búðu til Mynd Avatar í Adobe Experience Hönnun

Algeng hönnunarsnið er að finna í spjallforritum þar sem fólk er að tala við hvert annað og myndin á hátalaranum birtist á skjánum. Þessar avatars eru yfirleitt myndir sem hafa verið gríma. Það er dauður einfalt að ná þessu í XD. Hér er hvernig:

1. Þú byrjar með mynd og hring eða annan form á myndlistinni. Þú getur fyllt hringinn með hvaða lit sem er. Það sem þú þarft ekki að gera er að bæta við heilablóðfalli. Það mun hverfa þegar þú býrð til áhrifa, svo af hverju ertu að trufla. Ef þú þarft að stoke hringnum skaltu afrita það á klemmuspjaldið.
2. Færðu hringinn á myndina og veldu bæði myndina og hringinn. Með því að velja losa hluti skaltu velja Object> Mask with Shape . Þegar þú sleppir músinni er Avatar búin til. Þaðan er hægt að breyta því.
3. Ef þú þarft að bæta við heilablóðfalli skaltu líma hringinn sem situr á klemmuspjaldinu á listplötuna. Með afritinu sem valið er slökkva á fyllingunni í eignunum og bæta við höggslit og breidd. Til að leiðrétta þá skaltu velja báða hluti og smella á hnappana Miðjalínur í samsvörunarvalkostunum efst á eiginleikum spjaldið.
4. Ef þú vilt færa myndina í grímuna skaltu tvísmella á grímuna. Þetta mun sýna myndina og lögun grímunnar. Smelltu á myndina og dragðu hana í stað. Þegar þú sleppir músinni verður myndin í nýrri stöðu innan grímunnar.

06 af 07

Spila með Adobe Experience Design Artboards

The Experience Design listatöflur eru ekki bara til staðar til að setja efni. Þeir geta líka verið handteknir. Hér eru nokkrar hlutir sem þú getur gert:

1. Ef þú þarft Landscape og Portrait útgáfur af myndlist, afritaðu listplötuna og, með afritinu sem valið er, smelltu á landslagshnappinn á Properties panel. Artboard mun breytast í Landscape orientation. Ef Artboard hefur efni á því, smelltu á nafnborð ArtBox og Artboard eiginleikar birtast í Properties Panel.
2. Til að bæta við sérsniðnum litum á Artboard, og verkefnið fyrir það efni, veldu Artboard og smelltu á Fill lit flís í Útlit kafla á Properties Panel. Sláðu inn hexadecimal gildi fyrir litinn og smelltu á + táknið. Liturinn verður bættur sem sérsniðinn litur. Til að nota þessi lit annars staðar skaltu velja hlut og smella á Custom Color flís til að beita litinni.
3. Skjáborð er hægt að fletta lóðrétt. Til að gera þetta skaltu velja skjáborðið og breyta hæðinni annaðhvort á Eiginleikaskilum eða með því að draga neðst á myndplötunni niður. Í skyggnusvæðinu á eiginleikum spjaldsins skaltu velja lóðrétt frá sprettiglugganum og slá inn skjáhæð fyrir skjáinn. Þessi þjóta bláa línan sýnir þér botn sjónarhornsins. Til að prófa það skaltu smella á Spila hnappinn og fletta í burtu. Til að slökkva á að fletta skaltu velja Engar í skrunpoppanum.

07 af 07

Breyta Mobile UI Kit í Adobe Experience Hönnun

Reynsla Hönnun inniheldur UI Kit til að þróa IOS, Android og Windows UI. Þegar þú opnar þau fyrst gætir þú hugsað að þeir séu nokkuð vel settar á sinn stað. Ekki alveg-hvert bita og stykki í þessum pökkum er að fullu breytt. Við skulum finna út með því að byggja upp Android vírframa.

1. Þú byrjar með því að velja Artboard tólið og velja Android Mobile í Google hluta eignarhússins .
2. Veldu File> Open UI Kit> Google Efni . Þetta opnar Material Design UI Kit. Veldu Stækkunarglerið og tjaldstæðiið í Skjáleiðsögninni . Mér finnst gaman að byrja með þennan vegna þess að það gefur mér leiðsögumenn fyrir réttan staðsetningu á tengiþáttum á skjánum. Ef þú smellir á einn af bláum börum sem þú munt sjá að það er læst. Smelltu á læsinguna sem er fest við hvert þeirra til að opna hana . Merktu listplötuna og afritaðu valið á klemmuspjaldið. Farðu aftur í skjalið þitt og límdu skjáinn í listblað þitt.
3. Smelltu einu sinni á App bar sem efst á listpjaldinu. Takið eftir því hvernig þú getur valið það. Veldu Object> Arrange> Bring to Front. Val þitt er nú fyrir ofan skjáleiðsögurnar. Þetta ætti að segja þér hverja þætti á skjánum er hægt að breyta.
4. Tvöfaldur smellur á Stöðustikuna efst og í Eiginleikaskilaboðum og Fylltu litinni í 455A64 . Tvöfaldur smellur á the App Bar og setja fyllingu þess að 607D8B. Þetta ætti að segja þér að hver þáttur í UI-búnaði er hægt að breyta til að mæta litareiginleikum verkefnisins.
5. Hvað um táknin? Hér er hvernig á að breyta lit þeirra. Tvöfaldur smellur á hjarta til að velja það. Ef þú horfir á eignasvæðið getur þú gert ráð fyrir að þú getir ekki breytt valinu. Ekki alveg. Tvöfaldur smellur á hjarta einu sinni . Eiginleikar opna og þú breytir fylla litnum í FF0000. Endurtaktu þetta tvöfaldur-smellur bragð fyrir eftirliggjandi tákn og textann.