Adobe'i kogemuste kujundamise trikid, näpunäited ja tehnikad

01 07

Adobe'i kogemuste kujundamise trikid, näpunäited ja tehnikad

Kui Adobe tutvustas Kogemuste disaini avalikku eelvaadet , saavutas ettevõte samal ajal ka kaks üsna hämmastavat meeleolu. Esiteks pakkusid nad välja tekkiva prototüüpimise tarkvara turul. Teiseks pakkusid nad kasutajatele võimalust mängida "käimasolevas töös" ja andes kasutajatele võimaluse seda edu mõjutada. Nüüd, kui rakendus on saadaval mõneks kuuks, arvasin, et oleks hea aeg jagada mõningaid kogemusi disaini trikke, nõuandeid ja tehnikaid.

Aga kõigepealt võite küsida, mida tähendab Prototyping Software. Selle ruumi peamiste mängijate hulgas on Proto.io, Principle, UXPin, Atomic.io , Experience Design ja InVision. Erinevalt rakendustest, nagu näiteks Sketch 3, Photoshop ja Illustrator, kus toodetakse staatilisi kujundusi, on graafilised toimetajad kasutusele interaktiivsuse, liikumise ja muud funktsioonid, mis on tavalised tänapäeva mobiil- ja veebidisaini ruumis.

Mobiilse ja paratamatu Laser-sarnase keskendumisega Kasutajale ei ole enam piisav, kui disainer pisut paar pilti, ühendab mõned comps, seejärel vabastab projekti või laadib selle veebiserverisse üles. UI / UX töövoog on põhimõtteliselt muutnud asju. Iga protsessi samm, alates kasutaja identifitseerimisest, sketšidest, juhtraamidest, mastitest ja prototüüpidest, on nüüd hõlmatud ulatusliku kasutaja testimisega.

See on viimane etapp - prototüüpimine - kus valupunkte avastatakse ja kinnitatakse enne projekti lõpptootmist. See on koht, kus interaktiivsus, liikumine, ekraaniüleminek ja ekraanil kõike paigutamine on nii kriitilised. Probleemid ja probleemid ei saa lihtsalt kujutada staatilist pilti või selgitada suuliselt. Lõppude lõpuks on need tooted päris inimestele. Selle asemel, et kõik need koodid liigutada, hakatakse prototüüpimise protsessi üha enam kasutama selleks otstarbeks loodud graafika tarkvara. Veelgi lihtsam on vea parandamine, pildi asendamine, teksti ümberkirjutamine, nupu liigutamine ja nii edasi visuaalse redaktori kasutamine kui koodi pidev ümberkirjutamine ja silumine.

Tegelikult on see tarkvara saanud praeguse "Rapid Prototyping" disaini- ja arenduskeskkonna peamiseks komponendiks.

Sellega on meil kogemusi disainiga lõbus.

02 of 07

Tehke Adobe Experience Designi lihtsa ringiga sihtmärgi loomine

Üks nutikas XD aspekt on vektorgraafikavõtuvahendite kasutamine. Ei leia ikooni? Pole probleemi. Rullige oma. Nii toimige järgmiselt.

1. Valige Ellipse tööriist ja vajutage suvalise / Alt-Shift klahviga ringi.
2. Kui valitud ring on, seadke FillFilli värv FF0000-le ja piirid olekus " None ".
3. Ankurpunktide kuvamiseks tehke topeltklõps ringil. Tõmmake alumine ankur allapoole.
4. Topeltklõpsake valitud ankruspunkti ja kõverad asendatakse ridadega.
5. Joonistage veel üks väike ring, millel on valge täidisega täpne tükk ja mitte. Liigutage see asendisse ja valige sõrm ja ring. Klõpsake Atribuudi ülaosas asuval paneelil Align paneelil nupp Horisontaalne keskpunkt ja luuakse luuk.

03 07

Looge Adobe Experience Designi taustalavastus

Taustkujutisel on tavaline tekst või muu sisu. Probleemiks on see, et kujutist, sagedamini kui mitte, ületab selle kõrgema sisu. Üks võimalus selle probleemi lahendamiseks on taustapildi hägustamine. Pilti võib hägustada Photoshopis või muul pilditöötlusprogrammil, kuid see on mõnevõrra ebaefektiivne, eriti kuna XD saab nüüd seda ülesannet täita. Nii toimige järgmiselt.

1. Looge uus tööplaan ja lisage taustpilt.
2. Valige Ristkülik Tool nd ja joontage kujutise ristkülik. Kui valitud ristkülik on, määrake täidetuks valgeks ja käsku tühi.
3. Kui valitud ristkülik on, valige omaduste paneelil taustvalgustus. Kolm liugurit on Blur Summa, heledus ja läbipaistmatus. Siin on, mida nad teevad:

• Blur Summa: reguleerib kujutise all kujutise erksust. Maksimaalne väärtus on +50.
• Heledus: reguleerib pildi esiletõsteid ja varje. Minimaalne väärtus on -50 ja maksimaalne väärtus on +50.
• Läbipaistmatus: mõjutab kuju läbipaistvust ja kujutise kujutise nähtavust. Väärtused on vahemikus 0% kuni 100%.

Kui soovite tõesti "muuta asju üles", muutke kujutist värvi ja esitage pildi "välimuse" muutmiseks optilise väärtusega.

04 07

Loo Scrim'i sisse Adobe Experience Designi

Ühine disainiprobleem on liidese elementide elemendid peavad olema ühised värvid, kuid need jäävad kaduma siis, kui asetsevad taustpildi või kindla värviga. Lahendus on kriips. Skeem on mõnevõrra läbipaistmatu gradient liidese elemendi ja tausta vahel. Seda on XD-s lihtne saavutada. Nii toimige järgmiselt.

1. Loo oma XB-s olev tööplaat, lisage pilt ja kopeerige ja kopeeri liideseelemendid vastavast UI-komplektist - Fail> Ava UI-komplekt ... Ülalolevas pildis muudab foto olekuriba ja rakenduse riba raskesti nähtavaks.
2. Valige Ristkülik Tool ja tõmmake ristkülik. Atribuutide paneelil valige käsku Täida ja valige värvivalija pop-up all Gradient. Määra gradientvärvid mustaks ja valgeks. Määrake väärtus A - läbipaistmatus - kuni 60% ja valge väärtus kuni 0%.
3. Kui valitud ristkülik on valitud, valige Object> Arrange> Send backward . Liidese elemendid on nüüd nähtava pildi kohal.

05 07

Looge pildi avatari Adobe Experience Design'is

Vestlusrakendustes leidub ühist kujundusmustrit, kus inimesed räägivad üksteisega ja ekraanile ilmub kõneleja pilt. Need avatari on tavaliselt pilte, mis on maskeeritud. See on surnud lihtne, täidab seda XD-s. Nii toimige järgmiselt.

1. Alustad kujutisest ja ringist või mõnest muust kujust. Võite täita ringi mis tahes värviga. Mida sa ei pea tegema, on lisada insult värvi. Kui te efekti loote, kaob see, siis miks vaeva. Kui teil on vaja ringi hõivata, kopeerige see lõikepuhvrisse.
2. Liigutage ring ringi ja valige nii pilt kui ka ring. Valitud bot-objektidega valige Object> Mask with Shape . Kui vabastate hiire, luuakse Avatar. Sealt saate selle suurust muuta.
3. Kui teil on vaja lisada insult, kleepige suhtlusringi, mis asub lõikelauale istumisel joonlaual. Kui valitud koopia välja lülitada, täitke omadused ja lisage insult värv ja laius. Nende ridade valimiseks vali mõlemad objektid ja klõpsake omaduste paneeli ülaosas olevate valikutega Align valikud nupud Center Align.
4. Kui soovite maski ümber liigutada, topeltklõpsake maski. See näitab pilti ja maski kuju. Klõpsake pilti ja lohistage see positsiooni. Hiirt vabastades asub pilt maski sees uues asendis.

06 07

Mängi Adobe Kogukonna disainiga

Kogemuste disaini moodulid ei ole just teie jaoks sisu paigutamine. Neid saab ka manipuleerida. Siin on paar asja, mida saate teha:

1. Kui vajate kunstiplaadi Landscape ja Portrait versioone, dubleerige tööplaat ja valige valitud duplikaadi aknas Properties paneeli maastiku nupp. ArtBand muutub maastiku orientatsiooniks. Kui menüülil on sellel sisu, klõpsake vahekaardi nime ja omaduste paneel kuvatakse menüüriba omadused.
2. Selleks, et lisada Artboardile kohandatud värv ja selle kohta projekt, valige menüüvalik ja klõpsake Atribuutide paneeli jaotises Välimus jaotises Täida värviriba. Sisestage värvi kuueteistkümnendväärtus ja klõpsake + märk. Värv lisatakse kohandatud värvina. Selle värvi rakendamiseks mujal valige objekt ja klõpsake värvi rakendamiseks Custom Color chip.
3. Artboards saab teha vertikaalselt kerida. Selleks vali menüüvalik ja muutke selle kõrgust kas omaduste paneelidel või lohistage joonist allapoole. Omaduste paneeli skripitavas piirkonnas valige hüpikmenüüst vertikaalne ja sisestage ekraani vaateala kõrgus. See kriipsutatud sinine joon näitab vaateava põhja. Selle testimiseks klõpsake nupul Esita ja kerige ära. Kerimiskasti väljalülitamiseks valige Kerimise hüpikaknas valik Puudub.

07 07

Muuda mobiili kasutajaliidese komplekti Adobe Experience Designi

Kogemuste disain sisaldab iOS-i, Android-i ja Windowsi UI-de arendamiseks mõeldud kasutajaliidese komplekti. Kui te neid esimest korda avate, võite arvata, et nad on päris hästi paigas. Mitte üsna, kõik need komplektid on kõikidest bittidest ja tükkidest täielikult redigeeritavad. Vaatame üles Android-karkassi loomise teel.

1. Alustades valite menüükäsu tööriista ja valite Android-mobiili omaduste paneeli Google'i jaotises .
2. Valige Fail> Ava UI-komplekt> Google'i materjal . See avab Material Design UI Kit. Valige suurendusklaas ja vali ekraanijuhikute tööplaat . Mulle meeldib alustada selle ühega, sest see annab mulle juhendid liideseelementide nõuetekohaseks kuvamiseks ekraanil. Kui klõpsate ühte Blue baaridest, näete, et see on lukustatud. Klõpsake lukuga, mis on nende juurde pandud . Märgistage tööplaat ja kopeerige valik lõikelauale. Pöörake oma dokumendile tagasi ja kleepige ekraan oma tööplokki.
3. Klõpsake rakenduse ribal ükskord rakenduse riba juures, mis on ülemise koha. Pange tähele, kuidas saate seda valida. Valige Object> Arrange> Bring to Front. Teie valik on nüüd ekraani juhendite kohal. See peaks ütlema, et kõiki ekraanil olevaid elemente on võimalik redigeerida.
4. Topeltklõpsake ülaosas olev olekuriba ja valige atribuutide paneelil Värvi värv 455A64-le . Topeltklõpsake rakenduse riba ja määrake selle täitmine 607D8B-le. See peaks ütlema, et iga utiliidi komplekti elementi saab muuta, et see vastaks projekti värvide spetsifikatsioonidele.
5. Mis on ikoonid? Siin on, kuidas nende värvi muuta. Selle valimiseks topeltklõpsake südant . Kui vaatate omaduste paneeli, võite eeldada, et te ei saa seda valikut muuta. Mitte päris. Topeltklõpsake südant veel kord . Atribuudid on avatud ja muudad täitevärvi FF0000-le. Korda seda kahekordse topeltklõpsu trikk ülejäänud ikoonide ja teksti jaoks.