Visandõpetused

UX-tööriistade lühijuhend

See on nii lihtne, et te ei tea, miks te kunagi muul moel kavandasite.

UX Power Tools on kõige arenenum visandite kujundamise süsteem, mis eales tehtud. See on nagu disainerite Bootstrap. Kogu raske töö on juba teie heaks ära tehtud, nii et peate keskenduma lõbusale osale: tegelikult disainimisele.

Stiilid, sümbolid ja spetsiaalsed tehnikad muudavad teid efektiivsemaks disaineriks ja aitavad teil kujundada järjepidevamaid disainilahendusi.

Selle lühijuhendi eesmärk on näidata teile süsteemi kohandamise ja suuruse muutmise põhitõdesid, mis sobivad teie brändiga ja sobivad teie kujundamisprotsessi.

Kiirjuhendi sisu

1. Sissejuhatus: lihtsalt tutvustus!
2. Seadistamine: enne faili (de) avamist
3. Värvid: värvide kohandamine ja lisamine
4. Tüpograafia: fondi ja fondivärvide muutmine
5. Sümbolid: sümbolite tutvustus
6. Ikoonid: ikoonide vahetamine ja uute lisamine
7. Väljad: sisendväljade kohandamine
8. Nupud: nuppude kohandamine
9. Muud kohandamised: varjud, karbid ja palju muud!
10. Kokkuvõte: hingake natuke!
11. Abi: rohkem abi + kohandatud teenused

1. Sissejuhatus

Olen digitaalagentuuris täiskohaga tootedisainer ja aitan uute klientide projektide jaoks luua igal aastal 12–20 disainisüsteemi ja -raamistikku. Ehitasin UX-i tööriistad vajadusest välja, et saaksin olla tõhusam, ja see on suurendanud minu tootlikkust peaaegu kümme korda.

Kui olete süsteemi põhitõed selgeks õppinud ja asjad sõrmede alla saanud, kavandate te täpsemalt, järjekindlamalt ja tõhusamalt. Tuhanded amatöör- ja profidisainerid kogu maailmas suurtes ja väikestes ettevõtetes kasutavad UX-i tööriistu oma töövoo kiirendamiseks.

See lühike juhend töötab nii veebisüsteemi kui ka mobiilsüsteemi jaoks, nii et peate selle õppima ainult üks kord!

Teeme ära ittttttt!

23:28 EST - siin me projekteerime UX elektrilisi tööriistu. Vasakpoolne, Christian. Õige, Jon (mina). Natuke magamist, natuke õlut ja palju tahvlitähiseid. Ärge laske NYC-särgil end petta. Me elame Indianapolis, Indiana osariigis.

2. Seadistamine

Installige font Sans

See on Google'ist tasuta saadaval ja on kaasas ka paketi endaga. See on märgitud loetellu ja Sketch teavitab teid ka sellest. Sel hetkel oleme lihtsalt närus! Igatahes saate seda hiljem muuta, kuid on hea veenduda, et see on installitud, et te ei viskaks oma sümboleid.

Muutke oma Nudging seadeid

Kõik süsteem põhineb 8-pikslilisel ruudustikul, nii et saate säästurežiimi sätete 10px kuni 8px muutmiseks endale palju peavalu säästa.

Kas kõik on installitud? Imeline!

3. Värvid

See on parim viis alustamiseks, nii et oleme nimetanud lehe sobivalt “Start Here”. Inimesed on seda üsna raske jamada :)

Sellel lehel on mõned õpetused, mida peate kindlasti järgima, kuid see lühike juhend juhendab teid samast protsessist üksikasjalikumalt.

TyleStyle korstnad ™

UX Power Tools kasutab väikest tõhususe trikki, mida nimetatakse Style Stacks ™ (patent on ootel), et oleks ülimalt lihtne palju kihistiile korraga värskendada. Need värviplokid, mida näete üle artisti "Värvide ja fondide määramine siin", on tegelikult ristkülikute virnad, millest igaühele on rakendatud erinev kihtstiil. See võimaldab meil kõiki neid kihtstiile korraga kiiresti värskendada. Mugav!

Kuidas värve kohandada

Samm 1
Värviploki valimiseks klõpsake ja lohistage. Mulle meeldib alustada oma peamise brändivärviga, seetõttu valin valiku „Peamine”. Ärge klõpsake lihtsalt plokki. Selles virnas on mitu ristkülikut ja peate need kõik valima.

Olen kõik sildid lukustanud, nii et te ei pea muretsema teksti tahtmatu valimise pärast!

2. samm
Vaadake, kuidas inspektor näitab täidet, äärist ja sisemist varju? Selle põhjuseks on asjaolu, et selles stiilipakis on ristkülikud, millel on üks või mitu neist atribuutidest. Valige värv ja värskendage kõiki neid värviväärtusi. Mulle meeldib minna alt üles, sest see värvivalija võib takistusi saada:

Sisevarjude ja ääriste muutmisel ei näe te värvimuutust, kuna need muutuvad kõige ülemise ristküliku all. Kuid ärge muretsege, neid muudetakse endiselt!

3. samm
Sünkrooni muudatused. Visand on ülihea ja vaatamata sellele, et need atribuudid kehtivad mitme erineva kihi stiili kohta, sünkroonib see muudatused iga vastava kihi stiiliga (täitke, äärista, vasak äär, äär põhja jne):

SKETCH UPDATE (8/31/2018):
Stiilide värskendamine ja sünkroonimine on viidud stiili rippmenüüsse. Värvimuudatuste salvestamiseks klõpsake lihtsalt värskenda kihi stiili.

Kiire viis, kas kõik toimis, on vaadata lehte Komponendid (kui kasutate veebisüsteemi) või Stiilijuhendi lehte (kui kasutate mobiilset süsteemi). Te peaksite nägema oma päris uut värvi:

Kuule, meie värv! Kihi palette / kasutajaliidest / täitmist kasutatakse kõige sagedamini kogu süsteemis, kuid näete ka ääriste stiilide värskendamist, kui avate inspektori rippmenüü kihtide stiilid. Need stiilid on kasulikud sümbolite lehel. Nendeni jõuame hiljem.

Jätkake seda joonistuslaual olevate teiste stiilipakkide jaoks, et täita oma kaubamärgi värvid. Siit saate teada, kuidas UXPT värvi kasutab:

  • Esmane: teie peamine brändi värv
  • Teisene: teie teisene kaubamärgi värv (kui teil on selline)
  • Aktiivne: seda kasutan märkeruutude, raadiode ja muude aktiivsete olekute jaoks. Ma kipun selleks kasutama peamist kaubamärgi värvi, kuid te ei pea seda tegema.
  • 1. aktsent: teie “edu” värv
  • 2. aktsent: teie “hoiatav” värv
  • 3. aktsent: teie “vea” värv
  • Must: teie alus must. Soovitan kasutada toonitud musta (vt KKK)
  • Valge: teie alus valge. Ma tavaliselt kasutan lihtsalt #FFFFFF, aga ka beež on lahe.

KKK

Miks ei värskendatud minu teksti värve, kui sünkroonisin oma värvimuutusi?
Teksti- ja kihtstiilid on erinevad. Uuendame just selles etapis kihistiile. Ärge muretsege, jõuame järgmises jaotises tekstistiilide juurde.

Ma ei näe värvimuutust teistel lehtedel!
Veenduge, et valite terve stiilipakk, ja ärge klõpsake lihtsalt ülaosas asuvat ristkülikut. Ja ärge unustage sünkroonimist!

Mida tähendab „värvide langus mustale”?
Kujundamisel kasutan harva puhast musta (# 000000). Selle asemel meeldib mulle kasutada musta värvi, mis on toonitud minu peamise kaubamärgi värvi poole. See värvilanguse ristkülik on teie põhivärv, mille peal on 80% puhas must ristkülik. See on hea lähtekoht värvitud musta värvi värvimiseks.

Miks ainult 8 värvi?
Hoidke see lihtne. Ma pooldan UI-s värvi väga teadlikku kasutamist, nii et leian, et siin on harva vaja rohkem värve. See ei ole raske reegel, kuid minu jaoks see sobib! Lisage julgesti. Mis viib meid mugavalt ...

Kuidas lisada rohkem värve

Mõnikord soovite kolmanda astme värvi või muid aktsente kasutada kogu oma kujunduses. Uue värvi lisamine on lihtne:

  1. Olemasoleva värvilise stiili virna valimiseks lohistage nagu varem.
  2. Kopeerige virna sisu Command + C abil.
  3. Kleepige see korstna koopia kuskile värvilauale.
  4. Värskendage värve nagu varem, kuid ärge sünkroonige veel.
  5. Rühmitage see stiilipakk (see muudab kõigi virnas olevate elementide hõlpsaks läbimiseks). Nüüd minge stiilipakkide rühma ja valige ülemine ristkülik. Minge inspektori rippmenüüsse kihtide stiilid ja liikuge kõige alumisse ossa. Valige „Loo uus jagatud stiil”. Andke sellele uus nimi.
  6. Korrake 5. sammu, kuni olete loonud uue kihirühma iga ristküliku jaoks uued kihtstiilid. Kui olete lõpetanud, saate selle grupeerida, et neid oleks hiljem hõlpsasti lohistada-valida.
  7. Valmis! Nende jaoks loome värvisümbolid hiljem jaotises 5: Sümbolid.
Vaata seda armsat sinist, mille ma just lisasin. Ärge unustage kogu stiilipakki kopeerida ja kleepida.

4. Tüpograafia

Tüpograafia annab teie rakendusele hääle, nii et selles jaotises saate teada, kuidas fonti kohandada.

Mugavalt saame teha kõike samalt lehelt („Alusta siit“), kus kohandasime oma värve:

Esimesed asjad kõigepealt. See pole viga:

Nii nagu meie värvide puhul, kasutame stiilivirde, mis aitavad meil kiiresti muuta mitut tekstistiili korraga. Ehkki tundub, et muudate ainult 18 musta teksti stiili, muudate teatud juhtudel tegelikult erineva lüümiku ja joondamise 72 tekstistiili:

Kaks viimast rida näevad välja nagu duplikaadid, kuid ühel neist on 18 keskele joondatud stiili ja teisel 18 vasakule joondatud stiili.

Põhjused, miks asjad võivad varasemas ekraanipildis näida pisut valesti, on seetõttu, et osa tekstistiile on joondatud keskele ja mõned tekstistiilid on joondatud vasakule. Mõnikord võib tähtede vahe olla väike, nii et need ei pruugi ideaalselt joonduda. See ei avalda süsteemile negatiivset mõju. See on puhtalt kosmeetiline veidrik.

Kuidas fonti kohandada

Samm 1
Lohistage kogu teksti valimiseks töölaual „Alusta siit“ kogu teksti valimiseks:

See võib hetkeks maha jääda, kuna valite nii palju kihte. Ära muretse!

2. samm
Valige paneelil Inspektor uus kirjatüüp. Olge rippmenüü fontide abil nooltega ettevaatlik. Kui näete fonti, millel pole paksus variatsiooni, vabaneb see tekstistiilide lõpptähisega „… 2” paksusest „Bold” ja te ei näe rasvases tekstis kogu läbilõike teksti kui jätkate fontide noolte abil.

Tekstiilid võivad näida valesti joondatud, kuid kõik, mida peate tegema, on tekstiveeru valimiseks lohistamine, seejärel vajutage nuppu Joonda vasakule.

3. samm
Sünkrooni muudatused ja oletegi valmis! Kui tegite õigesti, näete oma fondi värskendust kogu failis:

SKETCH UPDATE (8/31/2018):
Stiilide värskendamine ja sünkroonimine on viidud stiili rippmenüüsse. Värvimuudatuste salvestamiseks klõpsake lihtsalt värskenda kihi stiili.

KKK

Millised on „… 2” tekstistiilid?
Nad on kolleegide julge versioon. Kasutame numbrit, nii et see on avatud kõigile, mida soovite. Mõnikord kasutatakse selle stiili jaoks poolpaksut, keskmist või musta värvi.
Kuidas saaksin paksus kirjastiili kiiresti rohkem / vähem paksuks muuta?
Kihtide loendis otsige sõna „2” (sisestage tühik enne tühikut), valige kõik tekstikihid ja muutke seejärel inspektori paneelil oma fondi kaalu. Sünkrooni!
Mis on selle nimega „väike, pealdis, põhiosa…” nimetamistavaga?
Need nimed on üksnes meelde tuletamiseks. See tähendab, et te ei pea põhiteksti jaoks kasutama teksti „Kere”. Süsteemi ehitamisel oli traditsioonilisi suuruse XS, S, M, L, XL, XXL suurusega nimesid raske meeles pidada, mistõttu otsustasime neile hoopis nimesid anda. Muutke neid, kui soovite!
Mida tähendab tekstistiilides tavaline, teisene ja puudega?
Need on selle teksti stiili värvi erinevad varjundid. Tavaline on 100% läbipaistmatu, sekundaarne on 50% läbipaistmatu ja puudega on 25% läbipaistmatu. Eelistatakse lüümikuid, sest kui kasutate neid mõne värvi peal, siis toonitakse need selle värvi poole. Näide: 50% läbipaistev valge tekst punasel taustal näeb kergelt roosa välja. Üle sinise on see helesinine.
Uuendasin oma fonti ja nüüd on komponendid reaümbrised!
Ärge muretsege! Enamikul süsteemi komponentidest on vasakpoolsed joondatud teksti sümbolid, nii et peate vaid oma komponenti pisut laiemaks muutma. Niipea, kui tekst ei mähki enam uuele reale, on teie komponent mõlemal küljel ühtlane polster.
Uuendasin oma fonti ja nüüd on TEXT SYMBOLS ridadeks mähitavad!
See ei riku tegelikult midagi! See on lihtsalt mõne laiema kergusega kirjatüübi kosmeetiline kõrvalmõju. Ärge tehke teksti sümboleid laiemaks. Kui see teid tõesti häirib, muutke lihtsalt tekstisümboli (te) väärtus lühemaks, näiteks „…” või „abc”.
Uuendasin oma fonti ja nüüd ei ole tekst vertikaalselt sümbolites sümbolites!
Pidime olema pisut nutikad teksti sümbolite (järgmine osa) loomise viisiga, et fondi värskendamine oleks võimalikult lihtne ja valutu. Mõnikord, kui fonti värskendate, nihkuvad kaasasolevate tekstisümbolite tekstikihid sümbolite ülaosas üles või alla, visates vertikaalse joonduse maha. Joondage tekst lihtsalt sümbolitüüpi (de) keskmesse ja kõik peaks tagasi normaalseks minema.

Tekstivärvide muutmine

Samm 1
Tekstiilide veeru valimiseks lohistage uus värv:

2. samm
Sünkrooni muudatused!

3. samm
Jätkake seda kõigi muude tekstistiilide veergude korral. Tavaliselt värvin iga veeru kohal ristkülikutest lihtsalt värvi.

4. samm
Valmis!

Sümbolid

UX-tööriistade iga kiht on seotud kas kihistiili, tekstistiili või sümboliga. Nii nagu CSS-is, on kõik tsentraliseeritud, nii et kui meil on kunagi vaja oma süsteemi värskendusi teha, on neid lihtne kogu kujunduse vältel sünkroonida.

Just sel põhjusel on sümbolid kogu faili tuum. Sümbolid on üles ehitatud just määratletud kiht- ja tekstistiilide ning muude pesasümbolite abil, nii et muudatuste tegemine oleks vaevatu.

Kogu süsteem on üles ehitatud NELJAS sümbolikategoorias:

1. Teksti sümbolid
Visand lubab teil sümboli teksti väärtuse üle kirjutada, kuid see ei luba teil sümbolis kasutatud tekstistiile üle kirjutada. Nii et tekstisümbolid on selle piirangu mõistlik lahendus. Kuna me võime pesastatud sümboleid alistada ja vahetada, oleme loonud sümbolid igast meie stiilistiilist, et saaksime oma teksti stiili muuta. Näide: tahan kasutada heleda taustaga nupul tumedat teksti ja tumeda taustaga nupul heledat teksti. Pesastatud teksti sümbolid võimaldavad meil seda teha! Vaadake neid allpool tegutsedes:
2. Täidise ja äärise värvisümbolid (teise nimega “Mixins”)
Sümbolite alistamine on teie parim sõber UX-i tööriistades ja täitmise / äärise sümbolid muudavad teie elu. Nii nagu tekstisümbolid võimaldavad meil alistada sümboli tekstistiili, võimaldavad värvsümbolid täita ka täiteid ja piire. Iga kord, kui arvate, et kasutate või loote sümbolit, mis võib värvi muuta, on kõige parem kasutada pesastatud värvisümbolit. Vaadake neid allpool tegutsedes:
3. Konteineri sümbolid
Konteinerid annavad elementidele nagu nupud, märgid ja kiibid oma kuju. Nende ehitamiseks on kasutatud värvisümbolid, osariikide sümboleid ja maske. Muutke komponendi kuju või tekstivälja olekut, alistades selle konteineri. Vaadake neid allpool tegutsedes:
Nööbi kuju muutmiseks valige konteineri alistamine.Lisage väljale hõljumise olek, muutes konteineri väärtuseks „Hõljutage“.Teiste tekstivälja olekute kuvamiseks valige konteineri tüüp „Border”.
4. Riigi sümbolid
Osariikide sümbolid aitavad teil lisada suhtlemistunnet sellistele komponentidele nagu nupud, kiibid ja märgid. Need on pesastatud alati mõne muu värviga sümboli sees, kuna nad kasutavad komponendi värvi heledamaks, tumedamaks muutmiseks või desatureerimiseks segamisrežiime. Kõik komponendid, mis kasutavad konteineri sümbolit, pärivad automaatselt olekud, kuna need on pestud konteineri sümboli enda sisse. Märkus. Osariigid on puhtalt kosmeetilised, et näidata arendajatele, kuidas hõljumise / vajutamise / fookuse olek välja peaks nägema. Kuna me kasutame segamisrežiime, ei saa arendajad nende olekute jaoks kasutada Zeplinit ega InVision Inspect'i. Selle asemel soovitan neil kasutada LESS- või Sass-funktsioone heledamaks () ja tumedamaks (), et neid tulemusi koodis saavutada.

KKK

Kuidas lisada uusi täiteid, et need oleksid rippmenüü (de) s saadaval?
Kopeerige üks sümbolite lehe Mixin / Fill tahvlit, valige ristküliku jaoks uus värv ja lisage seejärel uue värvi jaoks kihtstiil. Kihtstiili lisamine ei ole kohustuslik, kuid soovitame alati kasutada kihtstiile, nii et hiljem on seda kiire värskendada, kui kasutate seda mitmes kohas. Ettevaatust: ärge muutke selle tahvli suurust. See peab olema täpselt samas suurusjärgus kui kõik muud Mixini / Täite joonlauad, et see ilmuks rippmenüüsse Inspektor.

Ikoonid

Ikoonid on arvatavasti komplekti kõige tüütum osa, kuid need säästavad pikas perspektiivis tonni aega. Seda tehnikat kasutades muudame oma ikoonid maskideks ja paneme siis sümboli Mixin / Fill.

Kuna visand võimaldab meil sümboleid alistada, võime selle ikooni värvi asendada mis tahes värviga, mille oleme sümbolina lisanud!

Kuidas ikooni vahetada

Ikoonide vahetamine on inspektori override paneeli abil ülilihtne:

Selle värvi saate muuta ikooni all asuva rippmenüü abil.

Kuidas lisada ikooni

  1. Kopeeri olemasolev ikoon ja kustuta maskikiht.
  2. Kleepige oma uus ikoon ja looge kindlasti üks tee. Seda saate teha kihiga → Kombineeri → Liit või Kiht → Kombineeri → Erinevus.
  3. Eemaldage kõik tähed ikooni teelt. Nr täidab!
  4. Pange oma ikooni tee kihi „↳ olColor” alla.
  5. Tehke ikoon maskiks (vajutage juhtnuppu + käsku + M).
  6. Valmis!

KKK

See võtab igavesti.
Seda pole alguses optimeeritud, kuid pikemas perspektiivis saate kogu selle aja tagasi. Lubadus.
Kas on kiirem viis?
Mitte, et ma tean. Kui keegi soovib meisterdada maskide ikoonikomplekti, muudab see protsessi kindlasti palju kiiremaks!
Kas seda ikoonimeetodit toetab Zeplin, InVision, [dev handoff tool]?
Tavaliselt saadan oma dev-meeskondadele tegeliku ikooni fondi ja / või SVG-vormingu, nii et ma ei muretse selle pärast liiga palju. Sellegipoolest teeb Zeplin suurepärase töö värvide ülekirjutamisega ja lubab teil SVG-faile tavaliselt suurepäraselt eksportida.
Minu ikooni ei kuvata ikooni alistamise rippmenüüs!
Veenduge, et ikooni artboard oleks täpselt sama suur kui kõik muud ikooni artboard. Kui seda pole, siis seda ei kuvata.

Väljad

Väljad (või sisendid… olenevalt sellest, kumb teile sobib) koosnevad kahest põhiosast: mahutist ja mõnest tekstist. Nii konteiner kui ka tekst on sümbolid, nii et me saaksime need hõlpsasti ümber lükata vastavalt erinevatele olukordadele.

Nagu kõigi süsteemi sümbolite puhul, on ka tekstiväljade suurused täiesti muuttavad. Kui tekst ei sobi, muutke see lihtsalt laiemaks või pikemaks.

Väljade kohandamine

Kui soovite muuta tekstivälja kuju või stiili, tuleks suurem osa tööst teha Mixini / konteineri / välja sümbolitega:

  • Ääristeta väljad: eemaldage kiht “Border”.
  • Varjuga väljad: lisage vari kihile „Mask”.
  • Kõva nurga väljad: segage Mixini / Borderi sümbolite ja raadiuse maski piiri raadius nulli.
  • Materjali kujundusväljad: tehke kõva nurga väljad, seejärel muutke kiht „Border” väärtuseks Mixin / Border / Bottom-Active. Peate looma vaikeseisu jaoks veel ühe alumise ääre mikseerimise sümboli.

KKK

Mis on ikoon „Resizer”?
See on ette nähtud juhul, kui proovite tekstivälja kujutada. Kustutage see julgelt, kui te ei usu, et vajate seda.
Kas ma saan kustutada sümboli „Kursor“?
Muidugi! Minu arvates on see aeg-ajalt kasulik, kuid see on teie otsustada.

Nupud

Nupud on väljadega väga sarnased, kuna nende ehitamiseks kasutatakse muid sümboleid. Nupus oleva pesas oleva teksti sümboli suurus on seatud, mis tagab, et vasakul / paremal oleks alati täiuslik polsterdus.

Parim trikk täiusliku polsterduse tagamiseks on 1xx Nudge ™. Lihtsalt muutke oma nupu suurust kuni teksti kerimiseni, siis muutke see 1x laiemaks:

Täiuslik polster!

UX-i tööriistadel on ka keskne nupp juhuks, kui soovite seda kasutada modaali (või muu sarnase) põhjas:

Nuppude kohandamine

Kui soovite muuta nupu kuju või stiili, tuleks suurem osa tööst teha Mixini / nupu sümbolitel:

Oleme suurema osa tööst teinud selleks, et anda teile hunnik nuppude kuju, mille vahel valida, kuid kui soovite, et teie nupu vaikemoodus oleks ümaram või raskem, muutke segu Mikseri / Button / Täitmise maski.

KKK

Kuidas saab nupule varju lisada?
Valige lehel Sümbolid segukihi / nupu konteineris kiht Mask ja lisage vari. Ärge unustage teha kõiki nupu konteinereid.

Muud kohandamised

Lehel „Alustage siit” on tahvel jaotisega „ Kohandage muid asju siin!” Siin saate kohandada selliseid asju nagu varjud ja kerimised.

Tahkete kriimustuste kohandamine

Kui kohandate värve lehel „Alusta siit”, muutuvad mustad ja värvilised värvid automaatselt teie jaoks. Mängige läbipaistvuse taseme (te) ga, kuni leiate midagi, mis teile meeldib. Panin need üle mõne pildi tausta, et aidata teil loetavust mõõta.

Gradient Scrim'i kohandamine

Gradiendi kriimustust peate käsitsi värskendama. See on õige, käsitsi meisterdatud kriips. Mulle meeldib, kui gradientkraan läheb 50% -lt minu alusest mustast 0% -ni mustast.

Varjude kohandamine

Valida on 6 varjutaset. Teie otsustada, millal ja kus soovite neid kasutada, kuid Material Designil on varje kasutamise kohta mõned lahedad ideed, kuna see puudutab „digitaalset materjali”.

Ma pooldan alati musta varjundi kasutamist musta varjundi asemel: # 000000 (inspireerisin 2012. aasta Ian Storm Taylori artiklist. See annab teie rakendusele pehmema tunde ja varjud ei näe nii karmid välja. Nende värskendamine) kõik korraga on kiire:

  1. Valige oma must must värv ja kopeerige heksaväärtus.
  2. Tõstke esile kõik 6 variplokki.
  3. Avage varju värvivalija ja kleepige oma kuueteistkümnendsisaldus.
  4. Vajutage sisenege.
  5. Sünkrooni ja tehtud!
Ma ei pidanud siin sünkroonima, sest ma kasutasin juba oma musta musta värvi.

Kokkuvõte

Õnnitleme Sketchi jaoks kiireima disainisüsteemi hankimise puhul! Ma tean, et see kõik näeb välja üsna üle jõu, kuid peate tegema ainult nii palju kohandamist, kui soovite. Ausalt, meie arvates tundub see karbist üsna hea välja. Vahetage mõned värvid välja ja teil on hea minna.

Kes peaks seda kasutama?

  • UX disainerid
  • KÜ disainerid
  • Tootejuhid (täpsema kaadri kujundamiseks)
  • Arendajad (kes ei taha disaini segamini ajada)
  • Ettevõtlikud tegevjuhid (sest miks mitte?)

Kas teil pole veel süsteemi?

Külastage meie saiti, et lugeda rohkem meie kahe kujundussüsteemi (veebi ja mobiili) kohta, alla laadida demo või haarata mõlemad allpool. Igas süsteemis on 70-st unikaalsest graafikutüübist koosnev Ilmaistarjous (pimedas ja heledas teemas), nii et järgmine kord küsib bossman „seksika juhtpaneeli, nagu näen Dribbble'il”, et te ei tõmba oma silmi oma käest täielikult välja pea

Kas vajate ikkagi abi?

  • Öelge tere e-posti aadressil: hello@uxpower.tools
  • … Või Twitter
  • … Või Facebook
  • … Või LinkedIn

Kas soovite kohandatud kujundussüsteemi?

Kui see kõik tundub lihtsalt liiga keeruline või kui siirdate teisest rakendusest (Illustrator, Photoshop, Axure, Adobe XD jne), siis aitame teid! Tulistage meile e-kiri ja me aitame teie meeskonna kiiresti tööle panna.