Visandõpetused

Parem viis visandil nuppude tegemiseks

Nööbid nagu te pole kunagi varem näinud! Arvatavasti.

Seda artiklit on 2019. aastaks värskendatud! Uut tehnikat ja õpetust saate vaadata siit.

Märkus. Võite siiski järgida allolevat õpetust, kuid lihtsalt teadke, et see pole enam kõige optimaalsem viis nuppude eskiisi loomiseks.

Laadige see tutvustusfail alla, et seda jälgida, või vaadake UX-i tööriistu, et saada kogu UI-komplekt, mis on valmistatud kõikvõimalike nutikate sümbolitega nagu see.

Visandisümbolid on suurepärased, kuna need pakuvad ühte keskset kohta komponentide haldamiseks. Nupud on ühed hõlpsamad komponendid, kuid sarnaselt tekstiväljadega on neil palju erinevaid olekuid, värve ja stiile. Nii et see tähendab tavaliselt hunniku erinevate sümbolite loomist.

Vana tee

Minu nupu sümbolid nägid välja umbes kolm kuud tagasi järgmiselt:

Tõstke käsi üles, kui teie sümbolileht näeb välja selline ...

Kena ja puhas! Ma kasutasin seda lähenemist umbes 12 kuud ja mul polnud kunagi probleeme. See on hea viis nupusümbolite haldamiseks ja need hõlmavad kõiki olekuid, mida ma oma kujunduses vajan:

Nupuvärvid
Esmane, teisene, valge
Nööpide olekud
Vaikimisi hõljutage kursorit, vajutage nuppu, välja lülitatud

Rangelt võttes pole see halb. Kuid see võtab tee peal veidi peavalu:

  • Kui soovin lisada rohelise nupu, vajan kolme uut sümbolit ... ühte iga nupu oleku katmiseks.
  • Kui soovin valget sinise tekstiga nuppu, vajan kolme uut sümbolit.
  • Kui soovin lahti saada kõigi oma nuppude piiridest, pean seda värskendama kõigil minu loodud nupusümbolitel.
  • Kümme sümbolit ainult ühe komponendi jaoks?… Kas tõesti?… Kas see on vajalik?

Uus tee

Salvestan teatrid ja näitan teile lihtsalt seda, mida me kõigepealt loome. Minu kasutajaliidese komplektil pole enam 10-nupulisi sümboleid.

Nüüd… ainult üks.

Kui üksildane! See tuletab mulle meelde seda kurba stseeni Cast Awayst, kus Tom Hanks on üksi oma parvel. RIP Wilson.

Täielik avalikustamine: see üks sümbol on natuke eksitav, kuna see nõuab siiski teiste sümbolite ehitamist, mida kasutame nupu ehitamiseks tükkideks. Kuid neid sümbolitükke kasutatakse kogu UI komplektis tonnides teiste komponentidena, nii et see on positiivne kompromiss.

Kui oleme lõpetanud, saate luua nuppude vikerkaare igasugustes olekutes ... kõik ühe nupu sümbolist. Vaata järgi:

Nuppude struktuur

Sellel nupusümbolil on kolm pesastatud sümbolit:

  • Nuputekst (oluline): kasutame seda nupu öeldu muutmiseks.
  • Nuppikoon (pole nii oluline): saame selle sisse lülitada, kui nupp on olekus "laadimine".
  • Nööbikonteiner (kõige olulisem): see annab meile kuju, värvi ja oleku.
Need kolm sümbolit hakkavad meelt lööma.

Nuputekst

Olen sellest veidi varem kirjutanud allpool olevas artiklis, kuid panen asja uuesti järeltulevatele teemadele kokku:

“Miks on tekst sümbol?” Küsis naine rõhutatult.

Nii et te ei pea oma teksti jaoks sümboleid kasutama, kuid lisate seda tehes oma nupule tohutut paindlikkust.

Kiire meeldetuletusena võimaldab Sketch vahetada pesastatud sümboleid sisse ja välja, et kaitsta teid kardetud eemaldamise eest sümboli toimimise eest. Lihtsaim (ja kõige levinum) kasutusjuhtum on ikoonide puhul: vahetage tühja ruudu sümbol kontrollitud sümboli vastu. Lihtne.

Teen tegelikult täpselt sama asja, kuid tekstiga. Lõin visandis 10 tekstistiili, seejärel kasutasin neid tekstistiile, et luua igale kordumatu sümbol.

Need tekstistiilid ja värvid sobivad tegelikult kenasti tagasi minu keskmisele stiililehele.
Sümbolite vahetamise kuldreegel
Visand võimaldab teil sümboleid vahetada ainult teiste samade sümbolitega. See tähendab, et kui teie sümboliplaadid on üksteisega isegi 1x suuremad või väiksemad, siis EI kuvata neid sümbolite alistamise rippmenüüs (vt allpool). Nii et ma pidin tagama, et kõik minu ülaltoodud tekstisümbolite tahvlid oleksid täpselt sama kõrguse ja laiusega.

Kuna minu nupu tekst on pesastatud sümbol, valin sümbolieksemplaadi rippmenüüst lihtsalt ühe muust tekstisümbolist, kui soovin, et mu tekst oleks teistsuguse värvi. KUIDAS LIHTSALT SEE ?!

Nii hõlpsasti saaks hästi koolitatud kits hakkama.

Tõsi, läksin oma tekstisümbolitega natuke üle parda, omades igasuguseid erinevaid värve. Kuid vähemalt soovite tõenäoliselt heleda teksti sümbolit ja tumeda teksti sümbolit, mis tõenäoliselt moodustab valge teksti ja peamise kaubamärgi värvi teksti.

Nuppikoon

See on tõenäoliselt kõige vähem oluline sümbol - kui soovite, jätke see vabalt välja, kuid olen leidnud, et see on mõnes projektis kasulik. See on nupu klõpsamise vastuse illustreerimise mõte.

Süsteem mõtleb! Tõenäoliselt mõtlesin, et ma keerasin end kinni, aga see ikkagi mõtleb!

Selle nupu sarnaste põhisümbolite mõte on see, et paigutate kõik potentsiaalsed komponendi olekud efektiivselt ühte sümbolisse, lülitades sisse või välja pesas olevad sümbolid sõltuvalt olekust, mida proovite kiidukukk.

Ikooni sümbolikiht meie peamise nupu sümbolis on kohahoidja, mis tähistab meie nupu laadimisolekut (vt ülal).

Ausalt öeldes pole seda kihti eriti palju. Mul on lihtsalt selle väikese laadimiskujuga ikoonisümbol, siis hõljusin selle nupu keskel. Kas pole kindel, mida tähendab "ujuv"? Lugege seda hiilgavat artiklit Peter Nowell. Ta ei tea seda, aga ta õpetas mulle kõike, mida tean:

Vaadake, kui lihtne see on:

Kogu oma sissenõutud disainiaja jooksul soovitan alustada külgkõrgendust nagu UXi elektritööriistad.

Kui teie suu on agape, ei tea, kuidas mul on võimalus oma ikooni värvi muuta, siis vaadake seda fantastilist Francesco Bertocci artiklit:

Varastasin halastamatult tehnika otse tema sõrmede vahelt. Aitäh, mees!

Nööbikonteiner

Nööbikonteiner on kogu sümboli kõige olulisem osa ... Nii et kui see osa vahele jätta, siis eksam ebaõnnestub, ebaõnnestub koolist välja tulemine ja tõenäoliselt žongleerib raha eest tennisepalle Santa Monica kai ääres.

Sõltuvalt sellest, kui palju kujundeid soovite, saate teha igasuguseid erinevaid konteineri sümboleid. Siin on mõned, mille lõin:

Ootan endiselt rombrinuppe to

Õnneks on kõik need sümbolid funktsionaalselt identsed. Ainus erinevus on see, kuidas neid maskeeritakse (täiuslikus maailmas võiksid meil olla ka maskisümbolid, kuid me ei saa alati kõike, mida tahame, nüüd saame?).

Kasutan neid konteineri sümboleid ka näiteks mitme valikuga pillide / kiibide jaoks, nii et mulle meeldiks, kui saadaval on mitu erinevat kuju:

  • Kõva: 0-piksline ääristusraadius teravate nurkade jaoks
  • Pehme ümardatud: pehmete nurkade jaoks tavaliselt 2–10 pikslist raadiust
  • Ümardatud: kena ümardatud ristküliku kuju jaoks 100% ääristusraadius. Need sobivad suurepäraselt kiipide ja siltide jaoks.
  • Vasakult ümardatud: see on nii, et saaksin nupud nupurühma kokku panna. See on ümardatud nupp grupi vasakul küljel.
  • Paremale ümardatud: see on täpselt sama, mis ülalpool, kuid ainult paremale küljele.

Nagu ma ütlesin, vajate ainult nii palju konteinereid kui nupu kuju, mida arvate, et võiksite kasutada. See tähendab, et kui te ei kasuta kunagi ümaraid nuppe, siis ärge muretsege ümara konteineri loomise pärast.

Konteineri ehitamine

Iga konteiner on ehitatud kahe pesastatud sümboli ja maskiga:

  • Riigi sümbol: kas seda konteinerit hõljutatakse? Pressitud? Keskendunud?
  • Värvisümbol: mis värvi see konteiner on?
  • Mask: Mis kuju see konteiner on?

Osariigid

Osariigid on konteineris kõige kõrgem sümbol ning selliste tehnikate nagu läbipaistvus- ja segamisrežiimide kasutamine võib konteinerit mõjutada, et see näeks olevat hõljuv, fokuseeritud, vajutatud või keelatud.

Midagi sellist, nagu „Hover - Focused”, kasutage koos Hover ja Focused sümbolit. Nii värskendate nelja asemel ainult kahte sümbolit.

Meie nupu sümbolile lülitatuna näevad nad välja järgmised:

PUUDUTA SEDA!

Kuna olekud on sümbolid ja iga olekusümbol on täpselt ühesuurused, saan need sümboli alistamise rippmenüüst välja vahetada.

Rääkides sümboli alistusest ...
ProTip ™
Tehke sümbolikomplektid (kõik olekud, kõik värvid, kogu tekst) üksteisest pisut erineva laiusega. See tagab, et neid ei kuvata koos teie sümbolite alistustega. Te ei soovi juhuslikult nupu olekuks valida "Värv / Punane", kui tahtsite valida "Olek / kursor".

Värvid

Viimaseks värvikiht. Põhimõtteliselt on see lihtsalt sümbol, mis on valmistatud täitevärviga karbist. Huvitav:

Mulle meeldib teha hunnik neid erinevat värvi sümboleid:

Need on värvid, mis annavad mu nupule selle kena tooni. Pole palju muud öelda!

Kokkuvõte

Te ei vaja iga komponendi jaoks hunnikut erinevaid sümboleid. Andke endale lihtsalt vajalikud tükid ja ehitage see üks kord üles. Seejärel kasutage samu tükke teiste asjade ehitamiseks! Suurem osa minu sümbolilehest on lihtsalt tükid, mitte täielikud komponendid ise. Kuid kõiki neid tükke kasutades saan ehitada mõned keerukad komponendid.

See täielik UI-komplekt on saadaval aadressil UX Power Tools

Veel lugemist:

Kui ma ei kirjuta, töötan ma visandite kujundamise tööriistade, näiteks UX-tööriistade abil, et muuta teid paremaks ja tõhusamaks kujundajaks. Kõik parimad visandikujundajad ja meeskonnad kasutavad seda ja arvan, et ka teile võib see meeldida. Vaadake seda Marvelist!

Järgige UX-i tööriistu Twitteris
Jälgi mind Twitteris