"Adobe" patirties kūrimo gudrybės, patarimai ir metodai

01 iš 07

"Adobe" patirties kūrimo gudrybės, patarimai ir metodai

Kai "Adobe" pristatė " Experience Design" kaip viešą peržiūrą , tuo pačiu metu bendrovė įvykdė du gana nuostabius veiksmus. Pirma, jie sudarė erdvę naujoje prototipų programinės įrangos rinkoje. Antra, jie sukūrė naudotojams galimybę žaisti su "nebaigtu darbu" ir leisti vartotojams įtakoti šią pažangą. Dabar, kai paraiška buvo prieinama keletą mėnesių, maniau, kad bus tinkamas laikas pasidalinti patirties kūrimo gudrybėmis, patarimais ir metodika.

Bet pirma, jums gali būti įdomu, ką reiškia Prototyping Software. Tarp pagrindinių šios srities veikėjų yra "Proto.io" principas, "UXPin", " Atomic.io" , "Experience design" ir " InVision" . Skirtingai nuo programų, tokių kaip "Sketch 3", "Photoshop" ir "Illustrator", kuriuose gaminami statiniai dizainai, šie grafiniai redaktoriai pateikia interaktyvumą, judesį ir kitas funkcijas, įprastas šiandienos mobiliojo ir interneto dizaino erdvėje.

Su mobiliuoju ir neišvengiamu, lazeriu panašaus dėmesio į vartotoją atsiradimu, projektuotojui nebereikia plakti keletą eskizų, sujungti kelis kompasus, tada paleisti projektą arba įkelti jį į žiniatinklio serverį. UI / UX darbo eiga iš esmės pakeitė dalykus. Kiekvienas proceso etapas, nuo naudotojo identifikavimo, eskizų, karkaso, maketų ir prototipų, dabar yra išbandytas intensyviai.

Būtent tai paskutinis etapas - prototipų kūrimas - kur skausmo taškai aptinka ir nustatomi prieš pradedant projektą į galutinę gamybą. Tai yra tokia kritinė situacija, kai interaktyvumas, judesys, ekrano perėjimas ir viskas ant ekrano. Problemos ir problemos negali būti tiesiog parodomos kaip statinis vaizdas arba žodžiu paaiškintos. Galų gale, šie produktai yra tikri žmonės. Prototipų kūrimo procesas vis dažniau vyksta grafikos programine įranga, sukurta tik tam tikslui. Klaidą lengviau nustatyti, pakeisti vaizdą, perrašyti tam tikrą tekstą, perkelti mygtuką ir tt naudojant vaizdinį redaktorių, nei nuolat perrašyti ir derinti kodą.

Tiesą sakant, ši programinė įranga tapo pagrindine šios dienos "Rapid Prototyping" projektavimo ir kūrimo aplinkos sudedamąja dalimi.

Su tuo pasakius, leiskite pasimėgauti "Experience Design".

02 iš 07

Sukurkite "Destination Pin" su "Simple Circle" "Adobe Experience Design"

Vienas puikus XD aspektas - tai vektoriaus piešimo įrankių naudojimas. Nepavyko rasti piktogramos? Jokiu problemu. Sukti savo. Štai kaip:

1. Pasirinkite " The Ellipse Tool" ir, paspaudus klavišus "Option" / "Alt-Shift", sukite ratą.
2. Pasirinkus ratą, nustatykite užpildymo spalvą FF0000 ir sieną, kad savybėse būtų "none".
3. Dukart spustelėkite ratą, kad parodytumėte tvirtinimo taškus. Vilkite apatinį inkarą žemyn.
4. Dukart spustelėkite pasirinktą inkaro tašką ir kreivės pakeičiamos eilutėmis.
5. Nubraukite dar vieną nedidelį ratą su baltu užpildu ir be akmenų. Perkelkite jį į padėtį ir pasirinkite žiedą ir ratą. Skiltyje "Panaikinti", esančiame "Ypatybių" viršuje, spustelėkite mygtuką "Horizontalusis centras" ir sukurtas "Pin".

03 iš 07

"Adobe Experience Design" sukurkite "Background Misuse"

Paprastai tekstas ar kitas turinys turi būti fono paveikslėlyje. Problema yra tai, kad dažniau negu vaizdas viršija aukščiau esantį turinį. Vienas iš būdų išspręsti šią problemą - suprastinti fono paveikslėlį. Vaizdą galite nulaužti "Photoshop" ar kitoje vaizdo redagavimo programoje, tačiau tai yra šiek tiek neveiksminga, ypač todėl, kad XD dabar gali atlikti šią užduotį. Štai kaip:

1. Sukurkite naują meniu ir pridėkite savo fono paveikslėlį.
2. Pasirinkite stačiakampio įrankį ir nubrėžkite stačiakampį virš nuotraukos. Pasirinkus Rectangle pasirinkite "Fill to White" ir "Stroke to None".
3. Pasirinkus stačiakampį, savybių juostoje pasirinkite Fono blur . Trys slankmačiai yra Blur Amount, Brightness ir Opacity. Štai ką jie daro:

• Blur Amount: nustato vaizdo blurrybę po formos. Didžiausia vertė yra +50.
• Ryškumas: reguliuojamas vaizdas ir šešėliai. Minimali vertė yra -50, o maksimali vertė yra +50.
• Nepermatomumas: paveikia formos skaidrumą ir matomumą pagal formą. Vertės svyruoja nuo 0% iki 100%.

Jei tikrai norite "pakeisti dalykus", pakeiskite formos spalvą ir žaiskite su "Opacity" reikšme, kad pakeistumėte vaizdo "išvaizdą".

04 iš 07

"Scrim" sukurkite "Adobe Experience Design"

Paprasta dizaino problema yra sąsajos elementų elementai turi būti vienodos spalvos, bet jie prarasti, kai jie pateikiami fono ar vientisos spalvos. Sprendimas yra gilus. "Scrim" yra šiek tiek nepermatomas gradientas tarp sąsajos elemento ir fono. Tai lengva atlikti XD. Štai kaip:

1. Sukurkite meniu langą "XD", pridėkite paveikslėlį ir nukopijuokite ir įklijuokite sąsajos elementus iš atitinkamo vartotojo sąsajos rinkinio - "Failas"> "Atidaryti vartotojo sąsajos rinkinys ..." į meniu. Viršuje esančiame paveikslėlyje esama padėties juostos ir programų juostos sunku pamatyti.
2. Pasirinkite stačiakampio įrankį ir ištraukite stačiakampį. "Properties Panel" ("savybių" skydas) pasirinkite "Fill" (užpildyti) ir pasirinkite "Gradient" (spalva) iš "Spalvų parinkiklio" lango. Nustatykite gradiento spalvas Juodai ir Baltai. Nustatykite A vertę - nepermatomumą iki 60%, o balta vertė - 0%.
3. Pasirinkus Rectangle pasirinkite Object> Arrange> Send backward . Sąsajos elementai dabar matomi per vaizdą.

05 iš 07

Sukurkite "Image Experience" paveikslėlį "Adobe Experience Design"

Bendras dizaino modelis aptinkamas "Pokalbių" programose, kuriose žmonės kalba vienas kitam ir ekrane rodomas garsiakalbio paveikslėlis. Šie paveikslėliai yra dažniausiai užkimšti vaizdai. Tai yra negyvas paprastas atlikimas XD. Štai kaip:

1. Pradėkite nuo paveikslėlio ir apskritimo ar kitos formos ant masto plokštės. Galite užpildyti ratą su bet kokia spalva. Tai, ko jums nereikia daryti, yra pridėti insulto spalvą. Sukūrus efektą, jis išnyks, todėl kodėl nerimaujate. Jei jums reikia išmesti ratą, nukopijuokite jį į iškarpinę.
2. Perkelkite ratą į paveikslėlį ir pasirinkite vaizdą ir apskritimą. Pasirinkę boto objektus, pasirinkite Objektas> Kaukė su formatu . Atleidus pelę, sukurtas Avataras. Iš ten galite keisti dydį.
3. Jei norite pridėti smūgį, įklijuokite ratą, kuris sėdi į mainų sritį, į menčių skydelį. Pasirinkus pasirinktą kopiją išjunkite savybes ir pridėkite smūgio spalvą ir plotį. Jei norite juos sulyginti, pasirinkite abiejus objektus ir spustelėkite "Centre Align" mygtukus, esančius parinkčių viršuje esančiame parinktyje Align.
4. Jei norite perkelti nuotrauką kaukėje, dukart spustelėkite kaukę. Tai parodys vaizdą ir kaukės formą. Paspauskite ant nuotraukos ir vilkite jį į padėtį. Kai atleidžiate pelę, vaizdas bus jo naujoje vietoje kaukės viduje.

06 iš 07

Žaisk su "Adobe" patirties dizaino dirbtuvėmis

Patirties kūrimo dizaino plokštės yra ne tik ten, kur galite įdėti turinį. Jas taip pat galima manipuliuoti. Štai keletas dalykų, kuriuos galite padaryti:

1. Jei jums reikalingos meno plokštės "Kraštovaizdžio ir portreto" versijos, nukopijuokite meniu skydą ir, pasirinkus dublikatą, spustelėkite kraštų mygtuką savybių skydelyje. Artboard pakeis į kraštovaizdžio orientaciją. Jei "Artboard" turi turinį, spustelėkite "Artboard" pavadinimą ir meniu savybės bus rodomos "Properties Panel".
2. Norėdami pridėti pasirinktinę spalvą į "Artboard" ir projektą, pasirinkite meniu punktą ir spustelėkite "Užpildyti spalvų mikroschemą" skyriuje "Išvaizda". Įveskite šešioliktainę spalvos vertę ir spustelėkite + ženklą. Spalva bus pridėta kaip pasirinktinė spalva. Norėdami pritaikyti šią spalvą kitur, pasirinkite objektą ir spustelėkite "Custom Color chip", kad pritaikytumėte spalvą.
3. Artbotai gali būti vertikaliai parsisiunčiami. Norėdami tai padaryti, pasirinkite meniu langelį ir jo aukštį pakeiskite savybių panelėmis arba vilkite mentelę žemyn. Skiltyje "Slenkamoji" savybių skydo srityje pasirinkite populiariame meniu vertikalę ir įveskite ekrano peržiūros srities aukštį. Ši mėlynoji linija parodo peržiūros srities apačią. Norėdami jį išbandyti, spustelėkite grojimo mygtuką ir slinkite šalia. Jei norite išjungti slinkimą, skiltyje "Slinkimas" pasirinkite "Nėra".

07 iš 07

Redaguokite "Mobile Experience Kit" "Adobe" patirties dizainą

"Experience Design" yra vartotojo sąsajos rinkinys, skirtas "iOS", "Android" ir "Windows" naudotojo sąsajoms kurti. Kai pirmą kartą juos atidarysite, gali atrodyti, kad jie yra gana gerai išdėstyti. Ne visai vienas iš tų rinkinių dalių ir dalių yra visiškai redaguojamas. Sužinokime, kurdami "Android" karkasą.

1. Pirmiausia pasirinkite "Artboard" įrankį ir pasirinkdami "Android Mobile" "Properties Panel" skiltyje "Google" .
2. Pasirinkite Rinkmena> Atidaryti UI rinkinį> "Google" medžiagą . Tai atveria Material Design UI rinkinį. Pasirinkite didinamąjį stiklą ir ekrano gidų modulį . Man patinka pradėti nuo šio, nes jis suteikia man gaires tinkamam sąsajos elementų pateikimui į ekraną. Jei spustelėsite vieną iš mėlynių juostų, pamatysite, kad jis užrakintas. Norėdami jį atrakinti, spustelėkite kiekvieną iš jų esančią spyna . Įkelkite mentelę ir nukopijuokite pasirinkimą į iškarpinę. Grįžkite į savo dokumentą ir įklijuokite ekraną į savo meniu.
3. Spustelėkite vieną kartą "App Bar", kad viršutinė meniu. Atkreipkite dėmesį, kaip galite jį pasirinkti. Pasirinkite Objektas> Sureguliavimas> Sureguliuokite į priekį. Dabar jūsų pasirinkimas yra virš Ekrano vadovų. Tai turėtų nurodyti, kad kiekvieną ekrane esantį elementą galima redaguoti.
4. Dukart spustelėkite būsenos juostą viršuje, o savybių panelėje - užpildykite spalvą iki 455A64 . Dukart spustelėkite programų barą ir nustatykite jo užpildymą 607D8B. Tai turėtų parodyti, kad kiekvienas vartotojo sąsajos rinkinio elementas gali būti redaguotas, kad atitiktų projekto spalvų specifikacijas.
5. Ką apie piktogramas? Štai kaip pakeisti spalvą. Dukart spustelėkite širdį, kad ją pasirinktumėte. Jei pažvelgsite į "Properties Panel", galite manyti, kad negalėsite redaguoti pasirinkimo. Ne visai. Dukart spustelėkite širdį dar kartą . Savybės atidaromos ir jūs pakeisite užpildymo spalvą iki FF0000. Kartokite šį dvigubo paspaudimo apgauti likusias piktogramas ir tekstą.