Adobo Specialeco Dezajno, Konsiletoj kaj Teknikoj

01an de 07

Adobo Specialeco Dezajno, Konsiletoj kaj Teknikoj

Kiam Adobo enkondukis Experience Design kiel Publika Antaŭrigardo , la firmao sukcesis du sufiĉe mirindajn heroojn samtempe. Unue, ili eksplodis spacon en la emerĝanta programara merkato. Due, ili kreis ŝancon por uzantoj ludi kun "laboro-en-progreso" kaj lasas la uzantojn influi tiun progreson. Nun, ke la apliko estis disponebla dum kelkaj monatoj, mi pensis, ke estas bona tempo dividi iujn Lertaĵojn, konsiletojn kaj teknikojn de Specialaj Dezajno.

Sed unue, vi eble demandas, kio signifas Prototipado-Programaro. Inter la ĉefaj ludantoj en ĉi tiu spaco estas Proto.io, Principle, UXPin, Atomic.io , Experience Design kaj InVision. Kontraste kun aplikoj kiel Skizo 3, Photoshop kaj Ilustristo, kie produktas statikaj dezajnoj, ĉi tiuj grafikaj redaktistoj enkondukas interagadon, movadon kaj aliajn komunajn komercojn en la aktuala móvil kaj retejo.

Kun la kresko de la poŝtelefonoj kaj la neevitebla fizika lumo de la Uzanto, ĝi ne plu estas sufiĉa por desegnisto blovi kelkajn skizojn, kunigi kelkajn kompojn kaj poste liberigi la projekton aŭ alŝuti ĝin al servilo retejo. La UI / UX-laborfluo fundamente ŝanĝis aferojn. Ĉiu paŝo de la procezo, de identigo de uzanto, skizoj, telefonaj telefonoj, mokupoj kaj prototipoj nun estas submetataj al vastaj uzantoj.

Ĝi estas tiu lasta etapo - prototipoj - kie la doloro-punktoj estas malkovritaj kaj riparitaj antaŭ ol la projekto moviĝos en finan produktadon. Jen kie interagado, movado, ekrano-transiroj kaj lokigo de ĉio en la ekrano estas tiel kritikaj. Problemoj kaj problemoj ne povas esti simple montritaj kiel statika bildo aŭ klarigitaj laŭvorte. Post ĉio, ĉi tiuj produktoj estas por realaj homoj. Prefere ol movi ĉion ĉi al kodo, la prototipo procezo ĉiufoje pli okupiĝas per grafika programaro desegnita nur por tiu celo. Estas pli facile ripari eraron, anstataŭigi bildon, reescribi iun tekston, movi butonon kaj tiel plu uzante vida redaktilo ol senĉese reescribi kaj elpurigi kodon.

Fakte, ĉi tiu programaro fariĝis ŝlosila komponanto en la hodiaŭa "Rapida Prototipo" Design and Development environment.

Kun tio diris, ni havos iom da amuzo kun Experience Design.

02 de 07

Krei Destination Pin Kun Simpla Rondo en Adobo Speciala Dezajno

Unu neta aspekto de XD estas ĝia uzo de vektoraj desegnaj iloj. Ĉu vi ne povas trovi ikonon? Nedankinde. Ruli vian propran. Jen kiel:

1. Elektu La Elipsa Ilo kaj, kun la Elektoj / Alt-Ŝuŝaj klavoj premitaj, desegni cirklon.
2. Kun la cirklo elektita, starigu la Plenan koloron al FF0000 kaj la limo al "neniu" en la propraĵoj.
3. Duobla alklaku la rondon por montri la ankrumajn punktojn. Trenu la malsupre ankron al sube.
4. Duobla alklaku la elektitan Anclaran Punkton kaj la kurbojn anstataŭas per linioj.
5. Eltiru alian malgrandan rondon kun blanka plenigo kaj ne stoko. Movu ĝin en pozicion kaj elektu la pinglo kaj la rondo. En la Alinea panelo ĉe la supro de la Propraĵoj klaku la Horizontan Centron butonon kaj la Pin estas kreita.

03an de 07

Krei Fona Senŝanĝo en Adobe Experience Design

Estas komune havi tekston aŭ alian enhavon super fono-bildo. La problemo ĉi tie estas la bildo, pli ofte ol ne, superpolas la enhavon supre. Unu maniero por solvi ĉi tiun aferon estas blurigi la fonan bildon. Vi povas malŝalti la bildon en Photoshop aŭ aliaj bildaj programoj, sed tio estas iomete efika, precipe ĉar XD nun povas manipuli ĉi tiun taskon por vi. Jen kiel:

1. Krei novan artrankon kaj aldonu vian fonan bildon.
2. Elektu la Rektangula Ilo kaj desegni rektangulon super la bildo. Kun la Rektangulo elektita, metu la Plenigu al Blanka kaj la Stroke al Neniu.
3. Kun la Rektangulo elektita, elektu Fona Blur en la propraĵoj panelo. La tri Sliders estas Blur Amount, Brightness and Opacity. Jen kion ili faras:

• Blur Kvanto: aranĝas blurriness de la bildo sub la formo. La maksimuma valoro estas +50.
• Brilo: aranĝas la brilaĵojn kaj ombrojn en la bildo. La Minimuma valoro estas -50 kaj la maksimuma valoro estas +50.
• Opakeco: Afekcias la travideblecon de la formo kaj la videblecon de la bildo sub la formo. La valoroj varias de 0% ĝis 100%.

Se vi vere volas "ŝanĝi aferojn", ŝanĝi la koloron de la formo kaj ludi per la valoro de Opakeco por ŝanĝi la "aspekton" de la bildo.

04 de 07

Krei Skribon en Adobo Speciala Dezajno

Komuna problemo de dezajno estas elementaj elementoj de interfaco, ke ili devas esti komuna koloro, sed perdiĝas, kiam oni metas ilin sur fono-bildon aŭ solidan koloron. La solvo estas skripto. Skemo estas iom opaka gradiento inter la interfaco kaj la fono. Ĉi tio estas facile plenumi en XD. Jen kiel:

1. Krei vian artranon en XD, aldonu bildon kaj kopii kaj bati elementojn de interfaco de la taŭga UI-kitaro - File> Open UI Kit ... - en la artrankon. En la supra bildo la foto faras la Statan stangon kaj la App-Bar malfacilas vidi.
2. Elektu la Rektangula Ilo kaj elprenu rektangulon. En la Propraĵa Panelo elektu Plenigu kaj elektu Gradienton de la popo malsupren en la Kolora Elektilo. Metu la gradientajn kolorojn al Nigra kaj Blanka. Fiksu la valoron - Opakeco- ĝis 60% kaj la Blanka valoro al 0%.
3. Kun la Rektangulo elektita, elektu Objekto> Ordigi> Sendu Malantaŭen . La interfacaj elementoj nun videblas super la bildo.

05 de 07

Kreu bildon Avatar en Adobe Experience Design

Komuna Dezajno-Skemo troviĝas en Babilaj apps, kie homoj parolas unu al la alia kaj la bildo de la parolanto aperas sur la ekrano. Ĉi tiuj avataroj kutime estas bildoj, kiuj estis maskitaj. Ĝi estas morta simpla plenumi tion en XD. Jen kiel:

1. Vi komencas kun bildo kaj cirklo aŭ alia formo sur la artranko. Vi povas plenigi la rondon per iu ajn koloro. Kion vi ne bezonas fari estas aldoni baton de koloroj. Ĝi malaperos kiam vi kreos la efikon, do kial ĝeni. Se vi bezonas stoki la rondon, kopii ĝin al la poŝo.
2. Movu la rondon al la bildo kaj elektu ambaŭ la bildon kaj la cirklon. Kun botaj objektoj elektitaj, elektu Objekto> Masko kun Shape . Kiam vi liberigas la muson, la Avatar estas kreita. De tie vi povas regrandigi ĝin.
3. Se vi bezonas aldoni baton, batu la rondon sidantan sur via poŝo sur la artrankon. Kun la kopio elektita malŝalti la kompletigon en la Propraĵoj kaj aldoni baton koloron kaj larĝecon. Por vicigi ilin, elektu ambaŭ objektojn kaj alklaku la Centron Aligni butonoj en la Alignaj elektoj ĉe la supro de la proprietaj panelo.
4. Se vi volas movi la foton en la masko, duobligu la maskon. Ĉi tio montros la bildon kaj la maskonformon. Alklaku la bildon kaj trenu ĝin en pozicion. Kiam vi liberigas la muson, la bildo estos en sia nova pozicio en la masko.

06 de 07

Ludi Kun Adobe Experience Design Artboards

La spertaj desegnaj artverkoj ne estas nur por vi enmeti enhavon. Ili ankaŭ povas esti manipulitaj. Jen kelkaj aferoj, kiujn vi povas fari:

1. Se vi bezonas Pejzaĝajn kaj Portretajn versiojn de arto, duobligu la artrankon kaj, kun la duobligita elektita, alklaku la pejzaĝan butonon en la Propra Panelo. La Artŝipo ŝanĝos al Pejzaĝ-orientiĝo. Se la Artboard havas enhavon sur ĝi, klaku la nomon de Artboard kaj la Artboard-proprietoj aperos en la Propra Panelo.
2. Por aldoni kutiman koloron al la Artboard kaj al la projekto por ĉi tiu afero, elektu la Artformon kaj alklaku la plenan koloron en la sekcio Apero de la Propra Panelo. Enmetu la heksadekan valoron por la koloro kaj alklaku la + signon. La koloro estos aldonita kiel Propra Koloro. Por apliki tiun koloron aliloke, elektu celon kaj alklaku la Komputilon Koloron por apliki la koloron.
3. Artbirdoj povas esti vertikale scrollable. Por fari tion, elektu la artrankon kaj ŝanĝu ĝian altecon ĉu sur la Propraĵaj Paneloj aŭ trenante la malsupron de la artbordo al sube. En la Scrollable areo de la proprietoj panelo, elektu vertikala el la popo malsupren menuo kaj eniru la vidpunkton por la ekrano. Kiu disŝiris bluan linion montras al vi la fundon de la vidujo. Por provi ĝin, alklaku la Ludan butonon kaj forveturu. Por malŝalti scrolling, elektu Neniu en la Scrolling popo sube.

07 de 07

Redaktu Poŝtelefonon de Poŝtelefono UI en Adobe Experience Design

Speciala Dezajno enhavas UI-Kit por evoluigi iOS, Android kaj Windows UI. Kiam vi unue malfermas ilin, vi eble pensas, ke ili sufiĉe bone establas. Ne sufiĉe - ĉiu el la bitoj kaj pecoj en tiuj kits estas plene redakteblaj. Ni ekscios per konstruado de Android-telefonilo.

1. Vi komencas elektante la Artforman ilon kaj elektante Android Mobile en la Google-sekcio de la Propra Panelo .
2. Elektu dosieron> Malfermi UI Kit> Google Materialo . Ĉi tio malfermas la Materialon Dezajno UI Kit. Elektu la Grandigan Glason kaj marŝu al la Ekranaj Gvidiloj . Mi ŝatas komenci kun ĉi tiu ĉar ĝi donas al mi la gvidojn por konvena ekrano en la ekrano de la elementoj de la interfaco. Se vi alklakas unu el la Bluaj trinkejoj vi vidos, ke ĝi estas ŝlosita. Alklaku la seruron kunigita al ĉiu el ili por malŝlosi ĝin . Marquee la artranko kaj kopiu la elekton al la poŝo. Reiru al via dokumento kaj batu la ekranon en vian artrankon.
3. Alklaku unufoje sur la App-trinkejo, kiu estas la supro de la artbo. Rimarku, kiel vi povas elekti ĝin. Elektu celon> Ordigi> Alporti. Via elekto nun estas super la Ekrana gvidiloj. Ĉi tio devus diri al vi, ke ĉiu el la elementoj en la ekrano povas esti redaktata.
4. Duobla alklaku la Statan Trinkejon ĉe la supro kaj, en la Propra Panelo kaj la Plenkolora koloro ĝis 455A64 . Duobla alklaku la App-Baron kaj starigu sian plenigon al 607D8B. Ĉi tio devus diri al vi, ke ĉiu elemento en UI-kiton povas esti redaktata por renkonti la specifajn kolorojn de la projekto.
5. Kio pri la ikonoj? Jen kiel ŝanĝi sian koloron. Duobla alklaku la koron por elekti ĝin. Se vi rigardas la Propraran Panelo, vi povas supozi, ke vi ne povas redakti la elekton. Ne sufiĉe. Duoble alklaku la koron unu pli da tempo . La #nemovebla? O malfermas kaj vi #? An? I la plenan koloron al FF0000. Ripeti ĉi tiun duobla-duobla klako-trupo por la ceteraj ikonoj kaj la teksto.