Visandõpetused

9 näpunäidet kiirema ja tõhusama kujundamiseks, nii et te ei lähe hullumeelseks

Jah, see on loetelu. Kuid need on head.

Autori märkus ja häbematu pistik: Need on tehnikad, mille valisin UXi tööriistade projekteerimissüsteemi ehitamisel. Olen aktiivne disainer ja kasutan seda süsteemi 10 tunni jooksul päevas koos kõigi käesolevas artiklis mainitud tehnikatega. Kui ma ei usuks sellesse, ei kirjutaks ma sellest

1. Kasutage stiile

Mul on valus, kui tihti seda tuleb öelda, kuid ütlen seda seni, kuni hakkate seda tegema

Sketchisse jõuavad peatselt põhimõttelised muudatused, mis muudavad teie elu nii palju lihtsamaks, kui teete lihtsalt pankrotti ja hakkate stiile kasutama. Pole paremat aega kui praegu.

Teksti- ja kihtstiilide kasutamine muudab teie kujunduse järjepidevamaks ja uskuge või mitte, siis töötate kiiremini.

2. Tehke stiilileht

Mittevajalik, kuid väga julgustatud lugemine:

Stiililehed on CSS-is äärmiselt olulised, kuna need võimaldavad teil tsentraalselt hallata, kuidas asjad veebisaidil visuaalselt paistavad. Muutke nuppude stiili ja kõik nupud kogu saidil värskendatakse.

Pole mingit põhjust seda mitte luua kujundusprojektide jaoks, nii et teil oleks sarnane juhtimistase. Kõik, mida peate tegema, on üks ühtne paan, millel on iga salvestatud tekstistiili ja kihistiili üks eksemplar. Kuni kasutate neid stiile oma kujunduse kujundamisel, saate alati seda stiililehe joonist vaadata, kui soovite fonti kunagi värskendada.

UXi tööriistade kujundussüsteem on üles ehitatud keskse stiililehe peale. Saate muuta ühel lehel fonte ja värve, sünkroonida muudatused ja kogu süsteem värskendab teie värskendusi. See on päris lahe ja säästab palju aega, kui töötan massiivsete kliendiprojektide kallal.

3. Kasutage läbipaistvust

See on tõesti lihtsalt lõbus peotrikk, kuid näitasin seda tehnikat eelmisel nädalal esiplaanil töötavale arendajale ja koristan endiselt konverentsiruumi, kus tema mõistus plahvatas.

Miks ma kasutan heksaväärtuste asemel läbipaistvust?

See on kena väike trikk, mis tagab, et teie tekst näeb välja suurepäraselt kõigi taustvärvide korral. Alloleval pildil näeb läbipaistvus (teine ​​rida) palju parem välja kui hall (esimene rida), kuna see on võtnud selle all oleva värvi tooni. Ei ole mingeid trikke; teine ​​tekstirida on täpselt sama igas värvistsenaariumis. Just teie jaoks töötav läbipaistvus paneb neid välja nägema erinevaid tekstistiile. Kõik ühe hinnaga. Kui mugav!

Seda väikest trikki saab kasutada ka nuppude ääriste jaoks. Teate, kuidas mõnikord soovite punast pisut tumedama punase äärega nuppu? Proovige 25% mustast sisepiirist:

Läbipaistev must ääris aitab teil jäljendada tumedamat värvi piirjoont ilma heksaväärtuseta peavalu.

4. Tehke tühja oleku sümbol

Olen hakanud seda tegema alles hiljuti, kuid see on tõesti tore aja kokkuhoid. Selliste asjade jaoks nagu andmevõrgud või lehed, kus andmeid võib olla või ei pruugi olenevalt sellest, mis on loodud või konfigureeritud, on hea mõte luua kena tühi olek, mis annaks kasutajale teada, et mitte kõik lootused pole kadunud!

Kujundage standardne tühja oleku sümbol ja saate seda hiljem hiljem kiiresti uuesti kasutada. Tavaliselt on mul pealkiri, kirjeldus, illustratsioon ja toimingunupp:

Illustratsioon minu imeliselt andeka kolleegi Parker McCullough poolt.

Boonuspunktide saamiseks tehke oma illustratsioon pesastatud sümboliks, et saaksite neid vastavalt vajadusele vahetada ja ümber vahetada.

Mis viib mind ...

5. Looge illustratsioonikogu

See on natuke arenenud tehnika, kuid see on lihtne kontseptsioon, mis muudab teie elu lihtsamaks ja ka teie lemmik illustraatori elu lihtsamaks (aitäh, Parker)!

Visandraamatukogud on juba mõnda aega väljas olnud, kuid enamik inimesi kasutab neid disainisüsteemide haldamiseks. Soovitan seda kasutada ka oma illustratsiooniteegi haldamiseks!

Looge illustratsioonide jaoks eraldi visandifail ja lisage see teegina:

Tehke oma illustratsioonikogudes joonised iga vajaliku kohandatud illustratsiooni jaoks ja seejärel importige need sümbolid kohahoidjatena oma kujundusfaili:

See töötab teie illustraatori iseseisval tööl ükskõik millises vektorprogrammis, mida nad soovivad (näiteks Illustrator või Affinity Designer). Kui nad on illustratsiooni lõpetanud, peavad nad selle lihtsalt oma illustratsioonide teegi faili sobivasse artboardi viskama. Sketch teavitab teid teegi värskendustest ja peate vaid muudatused sünkroonima. Nüüd on teie läikiv uus illustratsioon olemas kogu oma hiilguses:

Illustratsioon minu imeliselt andeka kolleegi Parker McCullough poolt.

Päris lahe, jah?

6. Kasutage järjepidevaid ikoone

Tuumaikoonid on vaieldamatult parimad ikoonid, mis Internetis olemas on. See pole mitte ainult massiivne ja mitmekesine, vaid ka nende töölauarakendus on uskumatu.

Saate muuta täidetud ikoonidelt reaikoonideks, muuta kaalu ja isegi määratleda aktsentvärvi:

Justkui sellest juba ei piisa, pole ma kunagi leidnud lihtsamat viisi arendajatele ikoonide ettevalmistamiseks kui nende ekspordifunktsioon:

Tõsiselt, see ei lähe palju lihtsamaks.

7. Kasutage Ale Muñoz'i Artboard Organizeri pistikprogrammi

Mul on häbi öelda, et ma ei teadnud, et see eksisteeris alles umbes kuu aega tagasi, kuid olen seda ajast aega obsessiivselt kasutanud.

Selle pistikprogrammi lõi üks Sketchi juhtiv arendaja, nii et see. lihtsalt. töötab.

Laadige see alla siit:

Vajutage klaviatuuri klahvi Control-Option-Command-A ja kõik teie tahvlid joondavad võluväel vertikaalselt ja horisontaalselt. Joonislaudade read tähistavad rühmitusi (iga tahvli vahel on 50 pikslit) ja rühmad eraldatakse vertikaalselt 250 piksliga.

Selle pistikprogrammi kaks parimat funktsiooni on: Artboard Snapping ja Layer Reordering. Kui loote joonise uude ritta, klõpsub see automaatselt oma kohale, isegi kui lohistate selle teiste tahvlite vahele. Veelgi parem, see artboard paigutab end õiges suhtes kõigi teiste kihtide loendis olevate artboardsidega. Ma ütlen teile, ma pole kunagi varem oma elus tundnud end nii organiseerituna!

Nii puhas ja korras!

8. Ehitage tootearhitektuur (vt ülal)

Kui olete pistikprogrammi nr 7 installinud, on tootearhitektuure (selle jaoks on ilmselt parem nimi) üles ehitada väga lihtne. Ülaltoodud ekraanipilt on reaalne tootearhitektuur, mille lõin kliendiprojekti jaoks. Ridad tähistavad funktsioone ja iga artboard tähistab meie tuvastatud ekraani, mis tuleb kujundada. Pisikesed on modaalsed.

Need on imelised, kuna kujundamisprotsessist saab sõna otseses mõttes mäng tühja mängu. Kogu dokumendist on lihtne läbi vaadata, et näha, milliseid lünki disainilahenduses veel leidub, ja on ilmselge, kui puuduvad liidesed.

9. Andke modaalidele nende enda papp

See on väike näpunäide, mida on mainitud punktis 8, kuid ärge lõpetage oma modaalide paigaldamist täislaudade peale. On tore, kui teete seda korra lihtsalt selleks, et veenduda, kas see tundub teise ekraani kontekstis õigesti, kuid pärast õige suuruse leidmist pole vaja seda muud ekraanil kuvada.

Miks?

Noh, mis juhtub, kui värskendate ekraani selle modaali all? Nüüd peate seda ekraani kaks korda värskendama: üks kord ekraanil endal ja teine ​​kord selle modaalkuva all. Päris tüütu.

Kui värskendate vasakpoolset ekraani, peate värskendama ka paremal asuvat ekraani. See muutub tõeliselt tüütuks, TÕESTI KIIRE.

Autonoomsete ümbersuunatahvlite tegemise teine ​​eelis on see, et saate neid linkida modaalsete dialoogidena, kasutades InVisioni prototüüpimistööriista. See võimaldab kasutajal klõpsata nupul teie InVision-maketis ja loodud modaal reaalselt animeeritakse ekraanile. Siis saavad nad modaalilt klõpsatusega klõpsata ja see suletakse täpselt nii, nagu see rakenduses päris oleks. Kliendid armastavad seda sitta!

Kui ma ei otsi sooje ja häguseid tundeid, töötan selliste ressursside poole nagu UX Power Tools, et muuta teid paremaks ja tõhusamaks disaineriks.

  1. Järgige UX-i tööriistu Twitteris
  2. Jälgi mind Twitteris
  3. Öelge LinkedInis
  4. Õppige mõnda kraami ja tellige minu agentuuri ajaveeb