Luonnosoppaat

Pikaopas UX-sähkötyökaluille

Se on niin helppoa, et ihmettele miksi olet koskaan suunnitellut jotain muuta tapaa.

UX-työkalut on kaikkien aikojen edistynein luonnossuunnittelujärjestelmä. Se on kuin suunnittelijoiden Bootstrap. Kaikki kova työ on jo tehty sinulle, joten keskityt hauskaan osaan: suunnitteluun.

Tyylit, symbolit ja erikoistekniikat tekevät sinusta tehokkaamman suunnittelijan ja auttavat sinua valmistamaan johdonmukaisempia malleja.

Tämän pikaohjeen tarkoituksena on näyttää perustelut järjestelmän mukauttamiselle ja mukauttamiselle tuotemerkkisi mukaiseksi ja suunnitteluprosessiisi sopivaksi.

Pikaoppaan sisältö

1. Johdanto: Vain johdanto!
2. Asennus: Ennen tiedostojen avaamista
3. Värit: Värien mukauttaminen ja lisääminen
4. Typografia: Fontin ja fontin värien muuttaminen
5. Symbolit: Johdanto symboleihin
6. Kuvakkeet: Kuvakkeiden vaihtaminen ja uusien lisääminen
7. Kentät: syöttökenttien mukauttaminen
8. Painikkeet: Painikkeiden mukauttaminen
9. Muut mukautukset: Varjot, ruutut ja paljon muuta!
10. Yhteenveto: Hengitä vähän!
11. Ohje: Lisää ohjeita + Mukautetut palvelut

1. Johdanto

Olen kokopäiväinen tuotesuunnittelija digitaalitoimistolle ja autan spin-hakuasi missä tahansa 12–20 suunnittelujärjestelmää ja -kehystä vuodessa uusille asiakasprojekteille. Rakensin UX-työkaluja välttämättömyydestä, jotta voisin olla tehokkaampi, ja se on lisännyt tuottavuuttani lähes kymmenkertaiseksi.

Kun olet oppinut järjestelmän perusteet ja saat asiat sormesi alle, suunnittelet tarkemmin, johdonmukaisemmin ja tehokkaammin. Tuhannet amatööri- ja ammattisuunnittelijat ympäri maailmaa yrityksissä, suurissa ja pienissä, käyttävät UX-työkaluja nopeuttaakseen työnkulkuaan.

Tämä pikaohjeopas toimii sekä verkko- että mobiilijärjestelmässä, joten sinun on opittava se vain kerran!

Tehdään se!

23:28 EST - Suunnittelemme tässä UX-työkaluja. Vasen, Christian. Eikä, Jon (minä). Hieman unta, vähän olutta ja paljon taulumerkkejä. Älä anna NYC-paidan huijata sinua. Asumme Indianapolis, Indiana.

2. Asennus

Asenna Open Sans-fontti

Se on saatavana ilmaiseksi Googlelta, ja se tulee myös itse paketin mukana. Se on todettu readmessä ja Sketch ilmoittaa sinulle myös. Tässä vaiheessa olemme vain nagging! Voit kuitenkin muuttaa tätä myöhemmin, mutta on hyvä varmistaa, että se on asennettu alkamaan, jotta et heitä symbolejasi pois.

Muuta Nudging-asetuksia

Järjestelmä perustuu kaikki 8 pikselin ruudukkoon, joten voit säästää itsellesi paljon päänsärkyä vaihtamalla nudge-asetukset 10xx8px.

...

Kaikki asennettu? Ihana!

3. Värit

Tämä on paras tapa aloittaa, joten olemme nimenneet sivun osuvasti ”Aloita tästä”. On melko vaikeaa sotkea tätä, ihmiset :)

Tällä sivulla on joitain opetusohjelmia, joita sinun on tervetullut seuraamaan, mutta tämä Pikaopas opastaa sinut läpi saman prosessin yksityiskohtaisemmin.

TyleStyle Stacks ™

UX-työkalut hyödyntävät pientä tehokkuustemppua nimeltään Style Stacks ™ (patentti vireillä) tehdäkseen erittäin helpoksi päivittää useita kerrostyylejä kerralla. Ne väripaikat, jotka näet "Aseta värit ja kirjasimet täällä" -taulun sisällä, ovat oikeasti suorakaiteen pinoja, joille jokaiselle on käytetty eri tasotyyliä. Tämän avulla voimme päivittää nopeasti kaikki nämä kerrostyylit samanaikaisesti. Kätevää!

Kuinka mukauttaa värejä

Vaihe 1
Napsauta ja vedä valitaksesi värilohko. Haluan aloittaa ensisijaisella tuotevärilläni, joten valitsen ”Ensisijainen”. Älä napsauta vain estää. Tässä pinossa on useita suorakulmioita, ja sinun on valittava ne kaikki.

Olen lukinnut kaikki tarrat, joten sinun ei tarvitse huolehtia tekstin vahingossa valitsemisesta!

Vaihe 2
Katso, kuinka tarkastaja näyttää täyttö-, reunus- ja sisävarjot? Tämä johtuu siitä, että tässä tyylipinoessa on suorakulmioita, joissa on yksi tai useampi näistä määritteistä. Valitse väri ja päivitä nämä väriarvot. Tykkään mennä alhaalta ylöspäin, koska värivalitsija voi päästä tielle:

Et näe värinmuutosta, kun muutat sisäisiä varjoja ja reunuksia, koska ne muuttuvat ylin suorakulmion alla. Mutta älä huoli, niitä muutetaan edelleen!

Vaihe 3
Synkronoi muutokset. Luonnos on erittäin hieno ja huolimatta näistä ominaisuuksista, jotka koskevat useita eri tasotyylejä, se synkronoi nämä muutokset jokaisessa vastaavassa tasotyylissä (täyttö, reuna, reuna vasemmalla, reunuksen alaosa jne.):

SKETCH UPDATE (31.8.2018):
Tyylien päivittäminen ja synkronointi on siirretty avattavaan tyyliin. Napsauta vain ”Päivitä tasotyyli” tallentaaksesi värimuutokset :)

Nopea tapa nähdä, toimiiko kaikki, on tarkistaa Komponentit-sivu (jos käytät web-järjestelmää) tai Tyyli-opasivu (jos käytät mobiilijärjestelmää). Sinun pitäisi nähdä aika uusi väri:

Hei katso, värimme! Paletti / käyttöliittymä / täyttö -tasotyyleja käytetään yleisimmin koko järjestelmässä, mutta myös reunatyylit on päivitetty, jos avaat tasotyylin avattavan Tarkastaja-sovelluksessa. Nämä tyylit ovat hyödyllisiä symbolisivulla. Pääsimme niihin myöhemmin.

Jatka tämän tekemistä muille kuvalaatan tyylipinoille täyttääksesi tuotemerkin värit. Tässä on nopea selvitys siitä, kuinka UXPT käyttää väriä:

  • Ensisijainen: Ensisijainen tuoteväri
  • Toissijainen: Toissijainen tuoteväri (jos sinulla on)
  • Aktiivinen: Tätä käytän valintaruuduissa, radioissa ja muissa aktiivisissa tiloissa. Minulla on tapana käyttää ensisijaista tuoteväriä tähän, mutta sinun ei tarvitse.
  • Aksentti 1: Sinun “menestys” väri
  • Aksentti 2: ”Varoitusvärisi”
  • Aksentti 3: “virhe” väri
  • Musta: Pohjasi musta. Suosittelen värisävyn käyttöä (katso UKK)
  • Valkoinen: Pohjasi valkoinen. Käytän yleensä vain #FFFFFF, mutta beige on myös viileä.

UKK

Miksi tekstini värit eivät päivittyneet synkronoidessani värimuutokseni?
Tekstityylit ja kerrostyylit ovat erilaisia. Päivitämme vain tasotyyleja tässä vaiheessa. Älä huolestu, siirrymme seuraavan osan tekstityyleihin.

En näe värimuutosta muilla sivuilla!
Varmista, että valitset koko tyylipinon vetämällä, älä napsauta vain yläreunassa olevaa suorakaiteen muotoa. Ja älä unohda synkronointia!

Mitä tarkoittaa "värin pudotus mustalle"?
Käytän suunnittelussa harvoin puhdasta mustaa (# 000000). Sen sijaan haluan käyttää mustaa, joka on sävytetty kohti ensisijaista tuoteväriä. Tämä värin pudotus suorakulmio on päävärisi, jonka päällä on 80% puhdas musta suorakulmio. Se on hyvä lähtökohta värjäytymiselle sävytetylle mustalle värille.

Miksi vain 8 väriä?
Pidä se yksinkertaisena. Kannatan värin käyttöä erittäin tarkoituksella käyttöliittymässä, joten mielestäni harvoin tarvitaan enemmän värejä kuin tämä. Se ei ole kova sääntö, mutta se toimii minulle! Voit lisätä lisää. Mikä vie meidät kätevästi ...

Kuinka lisätä muita värejä

Joskus haluat kolmannen värin tai muiden aksenttien käytettäväksi koko mallissasi. Uuden värin lisääminen on helppoa:

  1. Vedä valitaksesi olemassa olevan värityylipinon kuten aiemmin.
  2. Kopioi pinon sisältö Command + C: llä.
  3. Liitä tämä pinokopio jonnekin värikansiolle.
  4. Päivitä värit kuten aiemmin, mutta älä synkronoi vielä.
  5. Ryhmittele tämä tyylipino (tämän avulla on helppo käydä läpi kaikki pinossa olevat esineet). Siirry nyt tyylipino-ryhmään ja valitse ylin suorakulmio. Siirry inspektorin avattavaan tasotyyliin ja vieritä alaosaan. Valitse ”Luo ​​uusi jaettu tyyli”. Anna sille uusi nimi.
  6. Toista vaihe 5, kunnes olet luonut uudet tasotyylit jokaiselle suorakaidelle uudessa tyylipino-ryhmässä. Kun olet valmis, voit ryhmitellä sen, jotta niitä on helppo vetää ja valita myöhemmin.
  7. Tehty! Luomme näille värisymbolit myöhemmin osiossa 5: Symbolit.
Katsokaa sitä ihanaa sinistä, jonka juuri lisäsin. Älä unohda kopioida ja liittää koko tyylipino.

4. Typografia

Typografia antaa sovelluksellesi äänen, joten tässä osiossa opit mukauttamaan fonttia.

Kätevästi voimme tehdä kaiken samalta sivulta (“Aloita tästä”), jossa mukautimme värejämme:

Ensimmäiset asiat ensin. Tämä ei ole vika:

Aivan kuten väreissäkin, käytämme tyylipinoja auttaaksemme meitä vaihtamaan nopeasti useita tekstityylejä kerralla. Joten vaikka näyttää siltä, ​​että muutat vain 18 mustaa tekstiä, muutat tietyissä tapauksissa 72 eri tyyppistä piirtoheitinkalvoa ja kohdistusta:

Kaksi viimeistä riviä näyttävät kaksoiskappaleilta, mutta toisessa niistä on 18 keskitetysti asetettuja tyylejä ja toisessa on 18 vasemmalle tasoitetut tyylit.

Syy siihen, miksi asiat saattavat näyttää hieman vääristyneiltä aikaisemmassa kuvakaappauksessa, johtuu siitä, että jotkut tekstityylit ovat keskitettyinä ja osa tekstityylejä kohdistettu vasemmalle. Joskus kirjainten etäisyydessä on pieniä variaatioita, joten ne eivät välttämättä sovi täydellisesti. Tällä ei ole kielteistä vaikutusta järjestelmään. Se on puhtaasti kosmeettinen takki.

Kuinka muokata fonttia

Vaihe 1
Vedä ja valitse kaikki ”Käynnistä tästä” -taulun koko teksti:

Se voi viive sekunnilla, koska olet valinnut niin monta tasoa. Ei huolia!

Vaihe 2
Valitse uusi kirjasintyyppi Tarkastaja-paneelista. Ole varovainen nuolessa avattavan fonttien kautta. Jos kohtaat fontin, jolla ei ole lihavoitua variaatiota, se eroaa ”Lihavoidusta” fonttipainosta tekstityyleille, jotka päättyvät ”2”, etkä näe lihavoitua tekstiä koko kuvataulun tekstissä tyylit, kun jatkat kirjasinten nuolemista.

Tekstityylit saattavat näyttää väärin suuntautuneilta, mutta sinun tarvitsee vain vetää valitaksesi tekstisarake ja napsauttaa sitten Kohdista vasen -painiketta.

Vaihe 3
Synkronoi muutokset ja olet valmis! Jos teit sen oikein, näet fonttisi päivityksen koko tiedostossa:

SKETCH UPDATE (31.8.2018):
Tyylien päivittäminen ja synkronointi on siirretty avattavaan tyyliin. Napsauta vain ”Päivitä tasotyyli” tallentaaksesi värimuutokset :)

UKK

Mitkä ovat ”2” -tekstityylit?
He ovat lihavoitu versio vastineistaan. Käytämme numeroa niin, että se on avoinna mitä haluat. Joskus tähän tyyliin käytetään puoliksi lihavoitua, keskikokoista tai mustaa.
Kuinka voin nopeasti muuttaa lihavoidut tekstityylit enemmän / vähemmän lihavoituiksi?
Etsi kerrosluettelosta ”2” (aseta välilyönti 2 eteen), valitse kaikki tekstikerrokset ja muuta sitten kirjasinpainoasi Tarkastaja-paneelissa. Sync!
Mitä tällä "Pieni, kuvateksti, kappale ..." -nimityssopimuksella on?
Nämä nimet ovat vain muistamista varten. Tämä tarkoittaa, että sinun ei tarvitse käyttää ”runkoa” runkotekstiin. Järjestelmää rakennettaessa perinteisiä XS, S, M, L, XL, XXL -kokoisia nimiä oli vaikea muistaa, joten päätimme antaa heille nimet sen sijaan. Voit muuttaa niitä vapaasti, jos haluat!
Mitä Normaali, Toissijainen ja Pois käytöstä tarkoittaa tekstityyleissä?
Ne ovat kyseisen tekstityylin värin eri sävyjä. Normaali on 100% läpinäkymätön, toissijainen on 50% läpinäkymätön ja Disabled on 25% läpinäkymätön. Kalvot ovat parempia, koska jos käytät niitä värin päällä, ne sävytetään kohti tätä väriä. Esimerkki: 50% läpinäkyvä valkoinen teksti punaisella taustalla näyttää hieman vaaleanpunaiselta. Yli sininen, se on vaaleansininen.
Päivitin fonttini ja komponentit ovat nyt rivityspakkauksia!
Älä huoli! Suurimmalla osalla järjestelmän komponentteja on vasemmalle linjatut tekstisymbolit, joten sinun tarvitsee vain tehdä komponentista hieman leveämpi. Heti kun teksti ei enää kääri uudelle riville, komponentti on tasaisesti pehmustettu molemmilta puolilta.
Päivitin fonttini ja nyt TEKSTISYMBOLIT ovat rivityspakkauksia!
Tämä ei oikeastaan ​​riko mitään! Se on vain kosmeettinen sivuvaikutus joillekin kirjasintyypeille, joilla on laajempi kerning. Älä tee tekstimerkkejä leveämmiksi. Jos se todella häiritsee sinua, muuta vain tekstisymbolien arvo lyhyemmäksi, kuten “…” tai “abc”.
Päivitin fonttini, ja nyt teksti ei ole pystysuoraan keskittynyt symboleihin!
Meidän piti saada hieman fiksu tapa, jolla tekstimerkit (seuraava osa) luotiin, jotta fontin päivittäminen oli mahdollisimman helppoa ja kivutonta. Joskus kun päivität fonttia, mukana olevien tekstisymbolien tekstikerrokset siirtyvät ylös tai alas symbolisivun sisällä, heittäen pystysuuntaisen kohdistuksen. Kohdista teksti vain symbolisivun / -taulujen keskelle, ja kaiken pitäisi olla normaalissa tilassa.

Tekstivärien vaihtaminen

Vaihe 1
Vedä ja valitse tekstityylien sarake, valitse uusi väri:

Vaihe 2
Synkronoi muutokset!

Vaihe 3
Jatka tämän tekemistä kaikille muille tekstityylien sarakkeille. Väritän yleensä vain pudota suorakulmioista kunkin sarakkeen yläpuolella.

Vaihe 4
Tehty!

Symbolit

Jokainen UX-työkalujen kerros on sidottu joko tasotyyliin, tekstityyliin tai symboliin. Kuten CSS: ssä, kaikki on keskitetty, joten jos joudumme koskaan päivittämään järjestelmäämme, on helppo synkronoida ne koko suunnitteluomme.

Juuri tästä syystä symbolit ovat koko tiedoston ydin. Symbolit rakennetaan käyttämällä juuri määrittelemiämme tasotyyliä ja tekstityylejä sekä muita sisäkkäisiä symboleja siten, että muutosten tekeminen on vaivatonta.

Koko järjestelmä on rakennettu käyttämällä NELJÄ symboliluokkaa:

1. Tekstisymbolit
Luonnoksen avulla voit korvata symbolin tekstin arvon, mutta se ei salli sinun korvata symbolissa käytettyjä tekstityylejä. Joten tekstisymbolit ovat fiksu ratkaisu tähän rajoitukseen. Koska voimme ohittaa ja vaihtaa sisäkkäisiä symboleja, olemme luoneet symbolit jokaisesta tekstityylistämme, jotta voimme muuttaa tekstin tyyliä. Esimerkki: Haluan käyttää tummaa tekstiä painikkeessa, jolla on vaalea tausta, ja vaaleaa tekstiä painikkeessa, jolla on tumma tausta. Sisäkkäisten tekstisymbolien avulla voimme tehdä tämän! Katso heidät toiminnassa alla:
2. Täyttö- ja reunusvärisymbolit (alias “Mixins”)
Symbolien korvaaminen on paras ystäväsi UX-työkaluissa, ja Täytä / reunat-symbolit muuttavat elämääsi. Aivan kuten tekstisymbolit sallivat meidän ohittaa symbolin tekstityylin, värisymbolien avulla voimme ohittaa täytteet ja reunat. Aina kun luulet käyttäväsi tai luomalla symbolia, joka saattaa muuttaa väriä, on parasta käyttää sisäkkäistä värisymbolia. Katso heidät toiminnassa alla:
3. Säiliön symbolit
Kontit antavat elementtejä, kuten painikkeet, merkit ja sirut niiden muodon. Ne on rakennettu värisymboleilla, tilamerkeillä ja naamioilla. Muuta komponentin muotoa tai tekstikentän tilaa ohittamalla sen säilö. Katso heidät toiminnassa alla:
Muuta painikkeen muotoa muuttamalla säilytysastian ohitusta.Lisää leijutustila kenttään muuttamalla säilö tilaan ”Hover”.Näytä muut tekstikenttätilat valitsemalla ”Reunus” -säiliötyyppi.
4. Valtion symbolit
Tilasymbolit auttavat sinua lisäämään vuorovaikutustunnetta komponentteihin, kuten painikkeet, sirut ja merkit. Ne on aina sijoitettu toisen värimäärän yläpuolella olevan symbolin sisäpuolelle, koska he käyttävät sekoitustiloja komponentin värin vaalentamiseksi, tummentamiseksi tai tyydyttämiseksi. Mikä tahansa komponentti, joka käyttää säilösymbolia, ”perii” tilat automaattisesti, koska ne ovat sisäkkäin itse konttisymbolin sisällä. Huomaa: Valtiot ovat puhtaasti kosmeettisia osoittaakseen kehittäjille, kuinka leijuvan / painetun / tarkennustilan tulisi näyttää. Koska käytämme sekoitustiloja, kehittäjät eivät voi käyttää Zepliniä tai InVision Inspectia näihin tiloihin. Sen sijaan suosittelen, että he käyttävät vaaleampia () ja tummentavia () toimintoja LESS- tai Sass-ohjelmissa näiden tulosten saavuttamiseksi koodissa.

UKK

Kuinka voin lisätä uusia täyttöjä, jotta ne ovat saatavilla avattavissa avattavissa luetteloissa?
Kopioi yksi Symbolit-sivun Mixin / Fill -tauluista, valitse uusi väri suorakulmulle ja lisää sitten kerrostyyli uudelle värillesi. Tasotyylin lisääminen on valinnaista, mutta suosittelemme aina käyttämään tasotyylejä, jotta se voidaan päivittää nopeasti myöhemmin, jos käytät sitä useissa paikoissa. Varoitus: Älä muuta tämän kuvataulun kokoa. Sen on oltava täsmälleen samankokoinen kuin kaikki muut Mixin / Fill -taulu, jotta se näkyy Tarkastaja-paneelin pudotusvalikossa.

Icons

Kuvakkeet ovat luultavasti tylsin osa sarjaa, mutta säästät lopulta tonnia aikaa pitkällä tähtäimellä. Tätä tekniikkaa käyttämällä teemme kuvakkeistamme naamioita ja laitamme sitten siihen Mixin / Fill-symbolin.

Koska luonnos antaa meille ohittaa symbolit, voimme vaihtaa tämän kuvakkeen värin mihin tahansa väreihin, jotka olemme lisänneet symboliksi!

Kuvakkeen vaihtaminen

Kuvakkeiden vaihtaminen on erittäin helppoa inspektorin ohituspaneelin avulla:

Voit muuttaa väriä käyttämällä kuvakkeen alla olevaa pudotusvalikkoa.

Kuvakkeen lisääminen

  1. Kopioi olemassa oleva kuvake ja poista peitekerros.
  2. Liitä uusi kuvake ja varmista, että luot yhden polun. Voit tehdä tämän valitsemalla Taso → Yhdistä → Liitos tai Kerros → Yhdistä → Ero.
  3. Poista kaikki täytteet kuvakepolulla. Ei täyttöjä!
  4. Laita kuvakepolkusi ”↳ Color” -kerroksen alle.
  5. Tee kuvakkeesta maski (paina Ctrl + Command + M).
  6. Tehty!

UKK

Tämä kestää ikuisesti.
Sitä ei ole optimoitu alussa, mutta saat koko ajan takaisin pitkällä tähtäimellä. Lupaus.
Onko olemassa nopeampi tapa?
Ei minun tietääkseni. Jos joku haluaa tehdä kuvasarjan maskeja, se varmasti tekee tästä prosessista helvetin paljon nopeammin!
Tukeeko tätä kuvakemenetelmää Zeplin, InVision, [dev handoff tool]?
Lähetän yleensä dev-tiimilleni todellisen kuvakefonttin ja / tai SVG-spritejä, joten en ole huolissani tästä liikaa. Tästä huolimatta Zeplin tekee hienoa työtä värien ohittamisessa, ja yleensä voit viedä SVG-tiedostot hienosti.
Kuvakkeeni ei näy ikkunan ohitus -pudotusvalikossa!
Varmista, että kuvakkeen kuvataulu on täsmälleen samankokoinen kuin kaikki muut kuvakepiirustukset. Jos ei, niin se ei tule näkyviin.

Fields

Kentät (tai syöttötiedot ... riippumatta siitä, minkä pidät) koostuvat kahdesta pääosasta: säiliöstä ja tekstistä. Sekä säilö että teksti ovat symboleja, jotta voimme helposti ohittaa ne eri tilanteisiin sopiviksi.

Kuten kaikki järjestelmän symbolit, tekstikentät ovat täysin koon mukaisia. Jos teksti ei sovi, tee vain leveämmäksi tai korkeammaksi.

Kenttien mukauttaminen

Jos haluat muuttaa tekstikentän muotoa tai tyyliä, suurin osa työstä tulisi tehdä Mixin / Container / Field symbolilla / symboleilla:

  • Reunattomat kentät: Poista ”Reunus” -kerros.
  • Kentät varjon kanssa: Lisää varjo Mask-kerrokseen.
  • Kovat kulmat -kentät: Aseta Mixin / Border-symbolien ja säiliö / kenttämaskin reunasäde nollaan.
  • Materiaalisuunnittelukentät: Tee kovat nurkkakentät ja vaihda sitten ”Reuna” -kerros arvoksi Mixin / Border / Bottom-Active. Sinun on luotava toinen alareunan sekoituskuvake oletustilaan.

UKK

Mikä on Resizer-kuvake?
Tämä on tarkoitettu, kun yrität edustaa tekstiä. Voit vapaasti poistaa tämän, jos et usko sinun tarvitsevan sitä.
Voinko poistaa “Kohdistin” -symbolin?
Varma! Pidän siitä hyödyllistä ajoittain, mutta se on sinun tehtäväsi.

painikkeet

Painikkeet ovat hyvin samanlaisia ​​kuin kentät siinä mielessä, että ne on rakennettu käyttämällä muita symboleja. Painikkeen pesätekstisymboli on asetettu muuttamaan kokoa, mikä varmistaa, että täydellinen vasen / oikea pehmuste säilyy aina.

Paras temppu täydellisen pehmusteen takaamiseksi on 1px Nudge ™. Muuta painikkeesi kokoa oikealle asti, kunnes teksti alkaa kääntyä, ja tee siitä 1xx leveämpi:

Täydellinen pehmustus!

UX-työkaluissa on myös keskitetty painike, jos haluat käyttää sitä modaalin (tai vastaavan) pohjassa:

Painikkeiden mukauttaminen

Jos haluat muuttaa painikkeen muotoa tai tyyliä, suurin osa työstä tulisi tehdä Mixin / Button-symbolien avulla:

Olemme tehneet suurimman osan työstä antaaksemme sinulle joukon painikkeiden muotoja, joista valita, mutta jos haluat, että oletusnäppäimen muoto on pyöreämpi tai kovempi, vaihda Mixin / Button / Fill -maski.

UKK

Kuinka lisätä varjon nappiini?
Valitse Mask-kerros Mixin / Button -säiliössä Symbolit-sivulta ja lisää varjo. Älä unohda tehdä kaikkia nappisäiliöitä.

Muut mukautukset

” Aloita tästä” -sivulla on taulu, jolla on ” Säädä muita juttuja täällä!” Tässä voit säätää esimerkiksi varjoja ja vieriä.

Kiinteiden ruuvien mukauttaminen

Kun mukautat värejäsi “Aloita tästä” -sivulla, mustat ja värivirheet vaihtuvat automaattisesti puolestasi. Voit vapaasti leikkiä läpinäkyvyystasoilla, kunnes löydät jotain pidät. Laitin ne joidenkin kuvataustojen yli luettavuuden mittaamiseksi.

Gradient Scrim -sovelluksen mukauttaminen

Sinun on päivitettävä kaltevuus scrim käsin. Se on totta, käsintehty scrim. Haluan tehdä kaltevuuspiirin 50%: sta pohjaani mustasta 0%: iin mustasta.

Varjojen mukauttaminen

Valittavana on 6 varjotasoa. Sinun on päätettävä, milloin ja missä haluat käyttää niitä, mutta Material Designilla on hienoja ideoita varjojen käytöstä, koska se liittyy ”digitaaliseen materiaaliin”.

Kannatan aina varjoidesi mustan perusvärin käyttämistä puhtaan mustan sijasta: # 000000 (Ian Storm Taylorin artikkeli on inspiroinut vuodelta 2012. Tämä antaa sovelluksellesi pehmeämmän tunteen, ja varjot eivät näytä niin kovalta. Päivittäminen kaikki kerralla on nopeaa:

  1. Valitse musta perusvärisi ja kopioi heksaarvo.
  2. Korosta kaikki 6 varjolohkoa.
  3. Avaa varjovärinvalitsin ja liitä heksaarvoarvoosi.
  4. Paina Enter.
  5. Synkronoi, ja valmis!
Minun ei tarvinnut synkronoida täällä, koska olin jo käyttänyt mustaa perusvärini.

Yhteenveto

Onnittelut nopeimman saatavilla olevan Sketch-suunnittelujärjestelmän saamisesta! Tiedän, että tämä kaikki näyttää melko ylivoimaiselta, mutta sinun on tehtävä vain niin paljon mukautuksia kuin haluat. Rehellisesti katsoen, että se näyttää melko hyvältä laatikosta. Vaihda värit ja voit mennä.

Kenen pitäisi käyttää sitä?

  • UX-suunnittelijat
  • UI-suunnittelijat
  • Tuotepäälliköt (tarkempi langankehys)
  • Kehittäjät (jotka eivät halua sotkea muotoilua)
  • Yrittelevät toimitusjohtajat (koska miksi ei?)

Onko sinulla vielä järjestelmää?

Vieraile sivustollamme lukeaksesi lisää kahdesta suunnittelujärjestelmästämme (verkko ja mobiili), lataa esittely tai tartu molemmat alla olevaan. Jokaisessa järjestelmässä on ilmaiseksi aloittelija, joka sisältää yli 70 ainutlaatuista kaavotyyppiä (tummissa ja vaaleissa teemoissa), joten seuraavan kerran, kun pomppari pyytää ”seksikkäitä kojetauluja, kuten minä näen Dribbblessa”, et pudota silmiäsi kokonaan pää

Tarvitsetko edelleen apua?

  • Sano hei sähköpostitse: [email protected]
  • … Tai Twitter
  • … Tai Facebook
  • … Tai LinkedIn

Haluatko räätälöityä suunnittelujärjestelmää?

Jos kaikki tämä näyttää vain liian monimutkaiselta tai jos siirryt toisesta sovelluksesta (Illustrator, Photoshop, Axure, Adobe XD jne.), Anna meidän auttaa! Ammu meille sähköpostia ja autamme ryhmäsi perustamisessa ja ajamisessa nopeasti.