Adobe Kokemuksen suunnittelun temput, vihjeet ja tekniikat

01/07

Adobe Kokemuksen suunnittelun temput, vihjeet ja tekniikat

Adobe Experience Design tarjoaa useita graafisia ominaisuuksia, jotka antavat yotrin luovuuden irti.

Kun Adobe esitteli Experience Design -ohjelman julkiseksi esikatseluksi , yritys toteutti kaksi melko hämmästyttävää toimintaa samanaikaisesti. Ensinnäkin ne keräsivät tilaa kehittymässä olevien prototyyppien ohjelmistomarkkinoilta. Toiseksi ne antoivat käyttäjille mahdollisuuden pelata "työtä eteenpäin" ja antaa käyttäjille mahdollisuuden vaikuttaa siihen. Nyt kun sovellus on ollut käytettävissä muutaman kuukauden ajan, ajattelin, että olisi hyvä hetki jakaa joitakin Experience Design-temppuja, vinkkejä ja tekniikoita.

Mutta ensinnäkin, saatat miettiä, mitä Prototyping-ohjelmistolla tarkoitetaan. Tämän avaruuden tärkeimpiä toimijoita ovat Proto.io, Principle, UXPin, Atomic.io , Experience Design ja InVision. Toisin kuin Sketch 3: ssä, Photoshopissa ja Illustratorissa, joissa tuotetaan staattisia malleja, nämä graafiset toimittajat luovat vuorovaikutteisuutta, liikettä ja muita ominaisuuksia, jotka ovat nykypäivän mobiili- ja web-suunnittelutilaa.

Matkaviestinnän nousun ja väistämätöntä, laserkaltaista keskittymistä käyttäjäön ei enää riitä, että suunnittelija laukaisi muutaman piirroksen, vetäisi yhteen muutamia komboja ja julkaisi sitten projektin tai lataa sen verkkopalvelimeen. UI / UX-työnkulku on muuttanut olennaisesti asioita. Jokainen prosessin vaihe, käyttäjän tunnistamisesta, luonnoksista, rautatangoista, mockappeista ja prototyypistä tehdään nyt laaja käyttötestaus.

Tämä viimeinen vaihe - prototyyppaus - jossa kipupisteet löytyvät ja korjataan ennen kuin projekti siirtyy lopulliseen tuotantoon. Tässä vuorovaikutteisuus, liike, näytön siirtyminen ja kaiken sijoittaminen näytölle ovat niin kriittisiä. Kysymyksiä ja ongelmia ei voida yksinkertaisesti näyttää staattisena kuvana tai selittää suullisesti. Loppujen lopuksi nämä tuotteet ovat todellisia ihmisiä. Sen sijaan, että kaikki siirrettäisiin koodiin, prototyyppiprosessia kehitetään yhä enemmän juuri tähän tarkoitukseen suunnitellulla grafiikkaohjelmalla. On helpompi korjata virhe, korvata kuva, kirjoittaa teksti uudelleen, siirtää painike ja niin edelleen visuaalisen editoriin kuin jatkuva uudelleen kirjoittaminen ja virheenkorjauskoodi.

Itse asiassa tämä ohjelmisto on tullut tärkeä osa nykypäivän "Rapid Prototyping" -suunnittelu- ja kehitysympäristöä.

Sanotaan, että saamme hauskaa Experience Designin kanssa.

02/07

Luo kohdepinsi yksinkertaisella ympyrällä Adobe Experience Design -ohjelmassa

Koe Designin vektoriominaisuudet tekevät kuvasta ja käyttöliittymän elementistä avaimen.

Yksi kätevä piirre XD: ssä on sen vektorinvetotyökalujen käyttö. Etkö löydä kuvaketta? Ei ongelmaa. Roll yours. Näin:

  1. Valitse Ellipse-työkalu ja piirrä ympyrä painamalla Option / Alt-Shift -näppäimiä.
  2. Kun ympyrä on valittu, aseta Täytä väri FF0000 ja Border kohtaan "none".
  3. Kaksoisnapsauta ympyrää näyttääksesi ankkuripisteet. Vedä pohja ankkuri alaspäin.
  4. Kaksoisnapsauta valittua ankkurointipistettä ja käyrät korvataan rivillä.
  5. Piirrä toinen pientä ympyrää, jossa on valkoinen täyttö ja ei ruokaa. Siirrä se paikalleen ja valitse nasta ja ympyrä. Napsauta Ominaisuudet-kohdan yläosassa olevaa Yhdistä-paneelissa Vaakakeskus-painiketta ja nasta luodaan.

03/07

Luo taustan hämärtyminen Adobe Experience Design -ohjelmassa

Luo taustan epätarkkuus XD: ssä käyttämällä vain muotoa ja kuvaa /.

Yhteinen teksti tai muu sisältö on taustakuvan yli. Ongelma tässä on kuva, useammin kuin ei, ylittää sen yläpuolella olevan sisällön. Yksi tapa ratkaista tämä ongelma on hämärtää taustakuvan. Voit heikentää kuvaa Photoshopissa tai muussa kuvankäsittelyohjelmistossa, mutta tämä on hieman tehotonta, varsinkin kun XD voi nyt käsitellä tätä tehtävää puolestasi. Näin:

  1. Luo uusi taulu ja lisää taustakuvasi.
  2. Valitse Suorakulmion työkalu ja piirrä suorakulmiota kuvan päälle. Kun suorakulmio on valittuna, aseta täyttöön valo ja aja ilman arvoa.
  3. Kun suorakulmio on valittuna, valitse Ominaisuudet-paneelissa Taustablurus. Kolme liukusäädintä ovat sumentuma, kirkkaus ja peittävyys. Tässä he tekevät:

Jos haluat todella "vaihtaa asioita", muuta muodon väriä ja pelata Opacity-arvoa muuttamalla kuvan "ulkoasua".

04/07

Luo Scrim Adobe -kokemusmuotoilussa

Käytä kaltevuuksia säätämään kontrastia, kun kuvat ja väri päätyvät käyttöliittymän elementteihin.

Yhteinen suunnitteluongelma on liitäntäelementtien elementtien on oltava yhteinen väri, mutta ne kadotetaan, kun ne asetetaan taustakuvan tai yhtenäisen värin päälle. Ratkaisu on käärme. Huuhtelu on hieman läpinäkyvä kaltevuus, joka on sijoitettu käyttöliittymäelementin ja taustan väliin. Tämä on helppo toteuttaa XD: ssä. Näin:

  1. Luo piirustustasi XD: ssä, lisää kuva ja kopioi ja liitä käyttöliittymän elementit sopivasta käyttöliittymän sarjasta - Tiedosto> Avaa UI-sarja ... - taulusta. Yllä olevassa kuvassa kuva vaikeuttaa tilapalkkia ja sovelluspalkkia.
  2. Valitse suorakulmio -työkalu ja piirrä suorakulmio. Ominaisuudet-paneelissa valitse Täytä ja valitse Värinvalitsimen ponnahdusvalikosta Gradient. Aseta kaltevuustestit mustavalkoiseksi. Aseta A-arvo - Opacity- arvoon 60% ja valkoinen arvo arvoon 0%.
  3. Kun suorakulmio on valittu, valitse Objekti> Järjestä> Lähetä taaksepäin . Liitäntäelementit ovat nyt näkyvissä kuvassa.

05/07

Luo Avatar-avatar Adobe -kokemusmuodossa

Mahdollisuus luoda naamioita ja muokata niitä Experience Design -ohjelmassa on valtava säästäjä.

Yhteinen mallisuunnittelu löytyy Chat-sovelluksista, joissa ihmiset puhuvat toisilleen ja kaiuttimen kuva näkyy näytöllä. Nämä avatarit ovat yleensä kuvia, jotka on peitetty. Se on kuollut yksinkertainen toteuttaa tämä XD: ssä. Näin:

  1. Aloitat kuvassa ja ympyrässä tai muussa muodossa taulusta. Voit täyttää ympyrän millä tahansa värillä. Mitä sinun ei tarvitse tehdä, on lisätä iskujen väri. Se katoaa, kun luot vaikutuksen, joten miksi vaivautua. Jos tarvitset leipää ympyrää, kopioi se leikepöydälle.
  2. Siirrä ympyrä kuvaan ja valitse sekä kuva että ympyrä. Kun bot-objektit on valittu, valitse Objekti> Mask with shape . Kun vapautat hiiren, Avatar luodaan. Sieltä voit muuttaa sen kokoa.
  3. Jos haluat lisätä aivohalvauksen, liitä leikepöydälle istuva ympyrä taulunalustaan. Kun kopiointi on valittu, katkaise täyttö Ominaisuudet-kohdasta ja lisää lyönnin väri ja leveys. Voit riviä ne valitsemalla molemmat objektit ja napsauttamalla Kohtoruutu-painikkeita kohdistuspaneelin yläosassa olevat kohdat -asetukset.
  4. Jos haluat siirtää valokuvan maskissa, kaksoisnapsauta maskia. Tämä näyttää kuvan ja maskin muodon. Napsauta kuvaa ja vedä se paikalleen. Kun vapautat hiiren, kuva tulee uuteen paikkaan maskin sisällä.

06/07

Pelaa Adobe Experience Design Taulutelevisiota

suunta, Mukautetut värit ja Pystysuuntainen vieritys ovat varsin siistejä taulu-piirteitä.

Experience Design -artikkelit eivät ole vain siellä, että voit sijoittaa sisältöä. Niitä voidaan myös manipuloida. Tässä on muutamia asioita, joita voit tehdä:

  1. Jos tarvitset piirustuspöydän maisema- ja muotokuvien versioita, kaksoiskappale taulunäytöllä ja kaksoiskappale valittuna napsauttamalla maisema-painiketta Ominaisuudet-paneelissa. Taulunäytöksi muuttuu Maisema-suunta. Jos taulussa on sisältöä, napsauta taulun nimeä ja Taulukko-ominaisuudet näkyvät Ominaisuudet-paneelissa.
  2. Jos haluat lisätä mukautetun värin Taulunalustaan ​​ja projektin tähän asiaan, valitse taulu ja napsauta Täyttöväri-siru Ominaisuudet-paneelin Ulkoasu-osiossa. Anna heksadesimaaliarvo värille ja napsauta + -merkkiä. Väri lisätään mukautettuina väreinä. Voit käyttää tätä väriä muualla valitsemalla objektin ja napsauttamalla Custom Color -sirua, jos haluat soveltaa väriä.
  3. Taulutelevisiot voidaan tehdä pystysuunnassa käännettäviksi. Voit tehdä tämän valitsemalla taulun ja vaihtamalla sen korkeuden joko Ominaisuudet-paneelissa tai vetämällä pohjalevyn alareunaa alaspäin. Valitse ominaisuuspaneelin Pyöräytä-alueella pystysuorasta ponnahdusvalikosta ja anna näyttöruudun korkeus näytölle. Tämä katkoviiva näyttää näytön pohjan. Voit testata sen napsauttamalla Toista-painiketta ja vierittämään. Jos haluat poistaa vierityksen käytöstä, valitse Ei vieritys Vierityspainikkeella.

07/07

Muokkaa Mobile UI Kit in Adobe Experience Design

UI-sarjat ovat täysin muokattavissa.

Experience Design sisältää UI-paketin iOS-, Android- ja Windows-käyttöliittymien kehittämiseen. Kun avaat ne ensimmäisen kerran, saatat ajatella, että ne ovat melko hyvin asennettu. Ei aivan, kukin näistä paketeista ja paloista on täysin muokattavissa. Tutustu rakentamalla Android-lanka.

  1. Aloitat valitsemalla Taulun työkalu -työkalun ja valitsemalla Android Mobilen Ominaisuudet-paneelin Google-osasta .
  2. Valitse Tiedosto> Avaa UI-sarja> Google-materiaali . Tämä avaa materiaalisuunnittelun käyttöliittymän. Valitse suurennuslasi ja vedä se näytön oppaiden taulunalusta . Haluan aloittaa tämän, koska se antaa minulle oppaat, jotka mahdollistavat käyttöliittymän elementtien oikean näytön sijoittamisen. Jos napsautat yhtä Blue-palkkeja, näet, että se on lukittu. Avaa lukitus napsauttamalla niitä lukittua lukkoa . Merkitse taulu ja kopioi valinta leikepöydälle. Palaa asiakirjaasi ja liitä se taulu-albumiin.
  3. Napsauta kerran sovelluksen palkissa, joka näkyy taulun ylälaidassa. Huomaa, kuinka voit valita sen. Valitse Objekti> Järjestä> Tuo eteen. Valintasi on nyt näytön oppaiden yläpuolella. Tämän pitäisi kertoa, että jokainen ruudulla olevista elementeistä voidaan muokata.
  4. Kaksoisnapsauta Tila-palkkia yläosassa ja Ominaisuudet-paneelissa ja täytön väreissä 455A64 . Kaksoisnapsauta App Bar ja aseta sen täyttöön 607D8B. Tämän pitäisi kertoa, että jokainen UI-paketin osa voidaan muokata vastaamaan projektin väritietoja.
  5. Entä kuvakkeet? Näin muutat niiden väriä. Valitse kaksoisnapsauta sydäntä . Jos tarkastelet Ominaisuudet-paneelia, oletetaan, että et voi muokata valintaa. Ei aivan. Kaksoisnapsauta sydäntä vielä kerran . Ominaisuudet avautuvat ja muutat täyttöväriä FF0000: een. Toista tämä tupla-kaksoisnapsautuva temppu jäljellä olevien kuvakkeiden ja tekstin kohdalla.