Tricks, Tips u Tekniki tad-Disinn ta 'l-Esperjenza ta' l-Adobe

01 ta '07

Tricks, Tips u Tekniki tad-Disinn ta 'l-Esperjenza ta' l-Adobe

Meta l-Adobe daħħlet id- Disinn tal-Esperjenza bħala Preview Pubbliku , il-kumpanija wettqet żewġ taħditiet pjuttost aqwa fl-istess ħin. L-ewwel, għamlu użu minn spazju fis-suq tas-softwer tal-prototipi emerġenti. It-tieni nett, huma ħolqu opportunità għall-utenti biex ikollhom "xogħol li għadu għaddej" u qed iħalli lill-utenti jinfluwenzaw dak il-progress. Issa li l-applikazzjoni kienet disponibbli għal ftit xhur, ħsibt li se jkun żmien tajjeb biex taqsam xi tricks, pariri u tekniki dwar l-esperjenza tad-Disinn.

Imma l-ewwel, tista 'tkun qed tistaqsi x'inhu mfisser minn Prototyping Software. Fost l-atturi ewlenin f'dan l-ispazju hemm Proto.io, Prinċipju, UXPin, Atomic.io , Design tal-Esperjenza u InVision. B'differenza minn applikazzjonijiet bħal Sketch 3, Photoshop u Illustrator fejn id-disinni statiċi huma prodotti, dawn l-edituri grafika jintroduċu interattività, mozzjoni u karatteristiċi oħra komuni fl-ispazju tal-lum tad-disinn mobbli u tal-web.

Biż-żieda tal-fokus mobbli u dak inevitabbli, li jixbah il-lejżer fuq l-Utent, m'għadux biżżejjed għal disinjatur biex iġib ftit skeċċijiet, iġbed flimkien ftit komponenti u mbagħad ineħħi l-proġett jew ittella 'lil server tal-web. Il-fluss tax-xogħol UI / UX bidel l-affarijiet fundamentalment. Kull pass tal-proċess, mill-identifikazzjoni tal-utent, skeċċijiet, wireframes, mockups u prototipi issa huma soġġetti għal testjar estensiv tal-utent.

Huwa dak l-aħħar stadju - il-ħolqien ta 'prototipi - fejn il-punti tal-uġigħ huma skoperti u ffissati qabel ma l-proġett imur lejn il-produzzjoni finali. Dan huwa fejn l-interattività, il-moviment, it-tranżizzjonijiet tal-iskrin u t-tqegħid ta 'kollox fuq l-iskrin tant huma kritiċi. Kwistjonijiet u problemi ma jistgħux sempliċement jintwerew bħala stampa statika jew spjegati verbalment. Wara kollox, dawn il-prodotti huma għal bnedmin reali. Minflok ma ċċaqlaq dak kollu għall-kodiċi, il-proċess ta 'prototipar qed isir dejjem aktar minn softwer tal-grafika iddisinjat biss għal dak il-għan. Huwa eħfef li tiffissa żball, ibdel immaġni, jikteb xi test, imexxi buttuna u oħrajn fuq l-użu ta 'editur viżwali milli jikteb mill-ġdid b'mod kostanti u debugging code.

Fil-fatt, dan is-software sar komponent ewlieni fl-ambjent tad-Disinn u l-Iżvilupp ta '"Prototipi Rapidi" ta' llum.

Ma 'dak imsemmi, ejjew nieħdu pjaċir bl-Esperjenza tad-Disinn.

02 ta '07

Oħloq Pin tad-Destinazzjoni b'Ċirku Sempliċi fid-Disinn ta 'Esperjenza ta' l-Adobe

Aspett wieħed pulit ta 'XD huwa l-użu tiegħu ta' għodda għat-tpinġija tal-vettur. Ma tistax issib ikona? Mhux problema. Irrombokka. Ara kif:

1. Agħżel L-Għodda Ellipse u, bil-buttuni Għażla / Alt-Shift ippressat, ħejja ċirku.
2. Bir-ċirku magħżul, stabbilixxiet il- kulur tal-Mili sa FF0000 u l-Fruntiera għal "xejn" fil-proprjetajiet.
3. Ikklikkja darbtejn fuq iċ-ċirku biex turi l-punti ta 'ankraġġ. Armi l-ankra tal-qiegħ 'l isfel.
4. Ikklikkja darbtejn fuq il-Punt ta 'Ankra magħżul u l-kurvi jinbidlu bil-linji.
5. Iġbed ċirku żgħir ieħor b'kulur abjad u mingħajr stoke. Nimxuha fil-pożizzjoni u agħżel il-pin u ċ-ċirku. Fil-pannell Allinja fil-quċċata tal-Properties ikklikkja l-buttuna Ċentru Orizzontali u l-Pin tkun maħluqa.

03 ta '07

Oħloq sfond ta 'sfond fl-Adobe Experience Design

Huwa komuni li jkun hemm test jew kontenut ieħor fuq immaġni ta 'sfond. Il-problema hawnhekk hija l-immaġni, aktar spiss milli le, tissupera l-kontenut t'hawn fuq. Mod wieħed ta 'kif issolvi din il-kwistjoni huwa li titfaċċa l-immaġni ta' sfond. Tista 'ċċajpar l-immaġni f'Settiks jew software ieħor għall-editjar tal-immaġni, iżda din hija kemmxejn ineffiċjenti, speċjalment peress li XD issa jista' jimmaniġġja dan il-kompitu għalik. Ara kif:

1. Oħloq artbord ġdid u żid l-immaġni ta 'sfond tiegħek.
2. Agħżel l-Għodda tar-Rettangolu u tfassal rettangolu fuq l-immaġni. Bir-Rettangolu magħżul, issettja l-Imla għall-White u l-Stroke għal Xejn.
3. Bir-Rettangolu magħżul, agħżel Background Blur fil-panel tal-proprjetajiet. It-tliet sliders huma Blur Amount, Brightness u Opacity. Hawn huma x'jagħmlu:

• Emblum Ammont: Tiffissa t-tbajja 'tal-immaġni taħt il-forma. Il-valur massimu huwa ta '+50.
• Luminożità: Tiffissa l-punti ewlenin u dellijiet fl-istampa. Il-Valur Minimu huwa -50 u l-Valur Massimu huwa +50.
• L-opaċità: Taffettwa t-trasparenza tal-forma u l-viżibilità tal-immaġni taħt il-forma. Il-valuri jvarjaw minn 0% sa 100%.

Jekk tassew trid "taqleb l-affarijiet", ibdel il-kulur tal-għamla u tilgħab bil-valur ta 'l-Opaċità biex tibdel il- "dehra" ta' l-immaġini.

04 ta '07

Oħloq Scrim fl-Adobe Experience Design

Problema ta 'disinn komuni hija element ta' interface elementi għandhom ikunu ta 'kulur komuni iżda, jintilfu meta mqiegħda fuq immaġni ta' sfond jew kulur solidu. Is-soluzzjoni hija scrim. A scrim hija xaqfa xi ftit opaka mqiegħda bejn l-element ta 'l-interface u l-isfond. Dan huwa faċli biex tintlaħaq f'XD. Ara kif:

1. Oħloq l-artboard tiegħek f'XD, żid immaġni u kkopja u paste elementi tal-interface mill- UI Kit - File> Open UI Kit ... - fl-artboard. Fir-ritratt t'hawn fuq ir-ritratt jagħmel il-bar tal-Status u l-App Bar diffiċli biex tara.
2. Agħżel l-Għodda tar-Rettangolu u tiġbed rettangolu. Fil-Panel tal-Proprjetajiet agħżel Imla u Agħżel Gradjent mill-pop isfel fir-Picker tal-Kulur. Issettja l-kuluri tal-gradjent għall-Iswed u l-Abjad. Issettja l-valur A - Opaċità- għal 60% u l- White A valur għal 0%.
3. Bir-Rettangolu magħżul, agħżel Għan> Tirranġa> Ibgħat Lura . L-elementi ta 'l-interface issa huma viżibbli fuq l-immaġni.

05 ta '07

Oħloq Image Avatar fl-Adobe Experience Design

Disinn tad-Disinn komuni jinstab f'applikazzjonijiet Chat fejn in-nies jitkellmu ma 'xulxin u l-istampa tal-kelliem tidher fuq l-iskrin. Dawn l-avatari huma ġeneralment stampi li ġew mgħottija. Huwa mejta sempliċi twettaq dan f'XD. Ara kif:

1. Tibda b'immaġni u ċirku jew għamla oħra fuq l-artboard. Tista 'timla ċ-ċirku bi kwalunkwe kulur. Dak li m'għandekx għalfejn tagħmel huwa li żżid kulur ta 'stroke. Se jisparixxi meta toħloq l-effett, hekk għaliex jolqot. Jekk teħtieġ li tistimula ċ-ċirku, kopja lill-clipboard.
2. Mexxi ċ-ċirku fuq l-immaġni u agħżel kemm l-immaġni kif ukoll iċ-ċirku. Bil-oġġetti tal-bot magħżula, agħżel Għan> Maskra b'Forma . Meta tirrilaxxa l-maws, l-Avatar huwa maħluq. Minn hemm tista 'tnaqqasha.
3. Jekk teħtieġ li żżid puplesija, agħmel iċ-ċirku fuq il-clipboard fuq l-artboard. Bil-kopja magħżula itfi l-imla tal-Properties u żid kulur u wisa 'ta' stroke. Biex tgħaqqadhom, agħżel iż-żewġ oġġetti u kklikkja l-buttuni taċ-Ċentru Tallinja fl-allinjament ta 'l-għażliet fil-quċċata tal-pannell tal-proprjetajiet.
4. Jekk trid timxi r-ritratt fil-maskra, ikklikkja darbtejn fuq il-maskra. Dan se juri l-immaġni u l-għamla tal-maskra. Ikklikkja fuq l-immaġni u ġġibuha fil-pożizzjoni. Meta tirrilaxxa l-maws, ix-xbieha tkun fil-pożizzjoni l-ġdida tagħha ġewwa l-maskra.

06 ta '07

Play Bil-Artboards ta 'Disinn ta' Esperjenza ta 'l-Adobe

L-artboards tad-Disinn ta 'l-Esperjenza mhumiex biss hemmhekk biex tpoġġi l-kontenut. Huma, ukoll, jistgħu jiġu manipulati. Hawnhekk hawn ftit affarijiet li tista 'tagħmel:

1. Jekk teħtieġ verżjonijiet Pajsaġġ u Portrait ta 'artboard, duplikat l-artboard u, bil-kopja magħżula, ikklikkja l-buttuna tal-pajsaġġ fil-pannell tal-Proprjetajiet. L-Artboard se tinbidel għall-orjentazzjoni tal-Pajsaġġ. Jekk l-Artboard ikollu kontenut fiha, ikklikkja l-isem ta 'Artboard u l-proprjetajiet ta' l-Artboard jidhru fil-Panel tal-Proprjetajiet.
2. Biex iżżid kulur iddettaljat ma 'l-Artboard, u l-proġett għal dik il-kwistjoni, agħżel l-Artboard u kklikkja fuq iċ-Ċippa tal-kulur tal-Imla fit-taqsima tad-Dehra tal-Panel tal-Propjetajiet. Daħħal il-valur hexadeċimali għall-kulur u kklikkja fuq in-sinjal +. Il-kulur se jkun miżjud bħala Kulur Custom. Biex tapplika dak il-kulur x'imkien ieħor, agħżel oġġett u kklikkja fuq iċ-ċippa Custom Color biex tapplika l-kulur.
3. Artboards jistgħu jsiru vertikalment scrollable. Biex tagħmel dan, agħżel l-artboard u tibdel l-għoli tagħha jew fuq il-Panels tal-Proprjetajiet jew billi ttajjar il-qiegħ tal-artboard 'l isfel. Fiż-żona li tiżżerżaq tal-pannell tal-proprjetajiet, agħżel vertikali mill-pop down menu u daħħal l-għoli tal-viżjoni għall-iskrin. Dik il-linja blu miksija turi int il-qiegħ tal-viewport. Biex tittestjaha, ikklikkja l-buttuna Play u skrollja 'l bogħod. Biex itfi l-iscroll, agħżel Xejn fil-pop Scrolling 'l isfel.

07 ta '07

Edit Kit UI Mobbli fid-Disinn ta 'l-Esperjenza ta' l-Adobe

Id-Disinn tal-Esperjenza fih Kit tal-UI għall-iżvilupp tal-iOS, Android u Windows UI. Meta l-ewwel tiftaħhom, tista 'taħseb li huma pjuttost stabbiliti tajjeb. Mhux biċ-ċar - kull wieħed mill-bits u biċċiet f'dawk il-kits huwa kompletament editable. Ejja nsibha billi nibnu wireframe Android.

1. Tibda billi tagħżel l-għodda Artboard u tagħżel Android Mobile fit-taqsima ta 'Google tal-Panel tal-Proprjetajiet .
2. Agħżel Fajl> Open UI Kit> Google Material . Dan jiftaħ il-Kit tal-UI tad-Disinn tal-Materjal. Agħżel il-Lenti tad-Dwieli u l- Karta tat-Tluq tal-Gwidi tal-Iskrin . Nixtieq nibda ma 'din il-waħda għaliex tagħti lili l-gwidi għat-tqegħid xieraq fuq l-iskrin ta' l-elementi ta 'l-interface. Jekk tikklikkja fuq waħda mill-vireg tal-Blue, tarah tkun imsakkra. Ikklikkja fuq il-lock imwaħħal ma 'kull waħda minnhom biex tiftaħha . Immarka l-artboard u kopja l-għażla għall-clipboard. Ritorn għad-dokument tiegħek u paste l-iskrin fl-artboard tiegħek.
3. Ikklikkja darba fuq il-bar tal-App li l-quċċata tal-artboard. Avviż kif tista 'tagħżel. Agħżel Għan> Irranġa> Ġib il-Quddiem. L-għażla tiegħek issa hija fuq il-Gwidi tal-Iskrin. Dan għandu jgħidlek li kull wieħed mill-elementi fuq l-iskrin jista 'jiġi editjat.
4. Ikklikkja darbtejn fuq il-Bar tal-Status fuq in-naħa ta 'fuq u, fil-Properties Panel s et il-Kulur tal-Imla sa 455A64 . Ikklikkja darbtejn fuq l-App Bar u stabbilixxiet it-timla tagħha f'607D8B. Dan għandu jgħidlek li kull element fi kit tal-UI jista 'jiġi editjat biex jissodisfa l-ispeċifikazzjonijiet tal-kulur tal-proġett.
5. Xi ngħidu dwar l-ikoni? Hawnhekk kif inbiddlu l-kulur tagħhom. Ikklikkja darbtejn fuq il-qalb biex tagħżel. Jekk tħares lejn il-Properties Panel, tista 'tassumi li ma tistax torganizza l-għażla. Mhux eżatt. Ikklikkja l-qalb darba aktar . Il-Properties miftuħa u tibdel il-kulur tal-mili għal FF0000. Irrepeti dan il-trick double-click doppju għall-ikoni li jibqa 'u t-test.