Če ste že nekaj časa v svetu oblikovanja, ste verjetno že slišali te izraze: ogrodje oblikovanja, ogrodje uporabniškega vmesnika, komplet uporabniškega vmesnika ali knjižnica vzorcev. Vsi se nanašajo na isto stvar: sistem standardov oblikovanja, predloge, vzorce uporabniškega vmesnika in komponente, ki se uporabljajo v celotnem izdelku in služijo njegovemu namenu. oblikovalski jezik . Če še niste zgradili okvira za oblikovanje, se vam zdi, da je njegovo zagon izjemno in dolgotrajen, vendar bo vaše oblikovalsko delo pospešilo in na splošno postalo bolj učinkovito.

Opišimo glavne težave, ki jih rešuje ogrodje oblikovanja, zakaj ga potrebujete in komponente, ki jih boste morali ustvariti pri izdelavi. Našli boste prenosni okvir Sketch UI prost kasneje v članku, ki vam omogoča, da ustvarite lasten okvir za oblikovanje.

Oblikovalski okvir v Sketchu

Kaj je okvir za oblikovanje?

Vsak dizajn uporabniškega vmesnika se začne s prazno umetniško ploščo in vsak oblikovalec ima postopek, s katerim to prazno platno spremeni v popolnoma delujoč izdelek. Ta postopek vključuje vse majhne oblikovalske sestavne dele in korake, ki jih oblikovalec sprejme za oblikovanje skladne celote, od barv do gumbov in vsega vmes.

To delo se pogosto ponavlja in ga je mogoče utrditi in narediti učinkovitejše z ustvarjanjem sistema med seboj povezanih vzorcev in komponent. Z drugimi besedami, oblikovalski okvir .

Oblikovalski okviri rešujejo več težav, med drugim:

• Odpravljanje nedoslednosti pri oblikovanju izdelka.
• Povečajte sodelovanje, učinkovitost in komunikacijo med oblikovalskimi in produktnimi skupinami.
• Posodobitve oblikovanja naj bodo pozneje med postopkom oblikovanja manj moteče.

Prva težava: nedoslednost izdelka

Doslednost spremeni dober dizajn v odličen dizajn. Doslednost izboljša uporabniško izkušnjo, splošno uporabnost in učinkovitost, s katero lahko uporabniki uporabljajo digitalne izdelke. Ne glede na to, ali gre za majhno spletno mesto, aplikacijo ali velik izdelek SaaS, nedoslednosti v oblikovanju ogrožajo videz, občutek, verodostojnost in uporabniška izkušnja izdelka.

Nedoslednosti se pogosto pojavijo, ko ekipa ali ekipa oblikovalec stvari počnete prehitro ali spreminjate sproti. Včasih se oblikovalec na stranko ali deležnika odzove na nekaj drugačnega, tako da jim hitro pokaže, kako bi bile videti te spremembe. Nenadoma oblikovalska ekipa naleti na štiri različne odtenke zelene in nihče ni prepričan, kakšna je glavna barva gumba.

Projektni okviri rešujejo ta problem z vzpostavitvijo doslednih standardov.

Drugi problem: vrzeli v sodelovanju in komunikaciji

Pogosto med razvojnim postopkom, ko na različnih točkah procesa sodeluje več članov ekipe, ki veliko sodelujejo pri oblikovanju, je lahko zmedeno, če ni nabora standardov, ki bi vodili ekipo.

Oblikovalski okvir povečuje sodelovanje in učinkovitost z racionalizacijo komunikacijskega procesa in zagotavljanjem jasnih standardov in usmeritev. Nič več ne zapravljamo časa s tekom, da bi ugotovili, katera barva ali pisava je prava za uporabo.

Pogosto opažena težava: trije različni slogi na istem gumbu

Tretji problem: spremembe v zasnovi zadnje faze

Kolikokrat morajo oblikovalci enkratno spremeniti barvo v oblikovalski datoteki s 120 že razvitimi namiznimi predlogami? Kolikokrat je treba spremeniti ikono, ki je del 200 komponent?

Spremembe so v celotnem postopku oblikovanja neizogibne, to je način, kako se izdelek izboljšuje, vendar se pogosto zgodi pozneje, kot bi želeli oblikovalci . Oblikovni okvir naredi spremembe v zadnji fazi veliko manj boleče, ker temelji na sistemu objektno usmerjenih komponent. Enkrat ga spremenite in valovi se skozi celotno zasnovo.

Kako ustvariti oblikovalski okvir

Zdaj, ko vemo, kaj je okvir za oblikovanje in težave, ki jih rešuje, se pogovorimo o tem, kako ga ustvariti (in kaj je v nalaganju kompleta za uporabniški vmesnik Sketch, ki je na voljo v nadaljevanju članka).

Okvir zasnove, uporabljen za ta članek, je ena datoteka skic, ki je predstavljena z uporabo posebne hierarhije komponent, ki je v Sketchu znana kot 'simboli'. Ti simboli omogočajo enostavno izvajanje sprememb celotne datoteke z enim samim klikom. Sprememba komponente 'master' - 'simbol' se takoj odrazi v vseh drugih primerih.

Hierarhija okvira oblikovanja

Če želite ustvariti dobro delujoč okvir za oblikovanje, začnite z vzpostavitvijo močne vizualne hierarhije. Najprej oblikujte najbolj razširjene komponente, kot sta barva in tipografija. Nato se pomaknite do manjših, kot so gumbi in vhodne komponente. Pomislite na to kot na gradnjo hiše - najprej zgradite temelje, nato dodajte ostale dele, ko projekt napreduje.

Brez barve in prostora: oblike, sence in tipografija so le nabor nevidnih parametrov.

Barva

Barva je najpomembnejši element v hierarhiji okvira Oblika uporabniškega vmesnika - vsaka komponenta modela uporablja barvo. Barva pri ljudeh izzove močne reakcije in čustva ter določi celoten videz, občutek in ton izdelka.

Dobra praksa je, da barve razdelimo v skupine:

1. Primarne barve so glavne barve blagovne znamke, ki se običajno uporabljajo za ustvarjanje celotne barvne sheme projekta in za ključne komponente, kot so gumbi.

2. Sekundarne barve dopolnjujejo glavno paleto - pogosto so različnih odtenkov, nasičenosti ali odtenkov osnovnih barv. Sivine Običajno se uporablja za tipografijo ali ozadja. Nekje med petimi in osmimi nivoji sive bi moralo zadoščati.

3. Barve sistemskih komentarjev so pomembna skupina, ki jo oblikovalci pogosto pozabijo. Te barve prikazujejo sistemska sporočila, vključno z opozorili, opozorili in obvestili.

Vsaka barva je ločen simbol v datoteki skice - to zagotavlja, da se ob spremembi barve spremenijo tudi vsi elementi, ki to barvo uporabljajo.

Mreža: Oblikovalski prostor

Ko so barve izbrane, je naslednji korak nastavitev mreže. Mreža ohranja vse ostale komponente na strani na pravem mestu in v vrstnem redu. To je splošni oblikovalski prostor.

Obstajata dve vrsti mrež: navpično Y. vodoravno .

Navpična mreža je najpogosteje uporabljena in ohranja vse vodoravno poravnane. Obstaja veliko priljubljenih omrežnih sistemov, kot je Bootstrap ali starejša mreža 960 px. Vodoravna mreža ni tako pogosta. Za tipografijo se uporablja vodoravna mreža. Ustvari navpični ritem za odstavke in je pogosto viden v časopisih.

Modifikatorji: slogovna pravila

Poleg barve in mreže obstaja še ena komponenta, ki je visoko v hierarhiji oblikovalskega okvira: modifikatorji. Ne morejo se uporabljati kot samostojne komponente - uporabljajo se za spreminjanje ali oblikovanje drugih.

Ta skupina projektu prinaša slog in vključuje sestavne dele, ki so odgovorni za estetiko, kot npr oblike ali odtenki ; njihova posamezna sprememba v poznejših fazah projekta je lahko okorna.

Modifikatorje obravnavajte kot parametre za vse nadaljnje gradnike. Simbole Sketch ustvarite na tri različne načine: pravokotnik, zaobljeni pravokotnik in krog. S temi oblikami ustvarite vsako komponento uporabniškega vmesnika, vključno z gumbi, vhodnimi komponentami, polji obrazcev itd. in elementi v ozadju.

Ta tehnika omogoča oblikovalcem osredotočite se bolj na UX kot na videz komponent UI. Omogoča tudi enostavno vrnitev k osnovni obliki, spreminjanje njenega sloga (npr. Polmer vogala) in vse povezano se bo samodejno posodobilo.

Ustvarjanje oblik kot simbolov skic je dobra praksa, saj jih lahko uporabimo za izdelavo naslednjih komponent. Vse spremembe osnovnih oblik se bodo takoj odražale v teh komponentah.

Tipografija: vsebina

Tipografija je zadnji pomemben sestavni del oblikovalskega okvira. Lahko ga razdelimo v dve skupini: statična kopija strani, kot so naslovi in ​​odstavki; in interaktivno kopiranje komponent, kot so gumbi, navigacija ali vnosna polja.

Oblikujte slog in velikost vseh naslovov (H1, H2, H3 itd.) In odstavkov. Statična kopija strani na splošno nima veliko slogovnih sprememb (barva ali teža). Edina sprememba glede na slog statičnega kopiranja strani je, ali gre za svetlo ali temno ozadje. Zato je najbolje ustvariti dva nabora barv, da zagotovite, da statična kopija strani deluje na obeh.

Elegantno telo besedila na svetlem in temnem ozadju

Kopija, ki se pojavi v interaktivnih komponentah, na primer gumbih ali sistemskih povratnih sporočilih, ima lahko več različic. Na primer, sistemska povratna sporočila so lahko prikazana v štirih različnih barvah ozadja, odvisno od vrste sporočila (opozorilo, napaka, uspeh itd.) - oznake gumbov imajo lahko tudi različno ozadje.

Vključitev te skupine v okvir oblikovanja je koristno pri globalnem razmišljanju o tipografiji. Najprej ustvarite normalno besedilo nalepke gumba, drugič pa njegove različice; s tem se boste izognili preveliki velikosti pisave. Ko ustvarjate nove komponente uporabniškega vmesnika v okviru, vedno preverite, ali obstaja obstoječ slog pisave, ki ustreza.

Barv kot simbolov skic ni mogoče uporabiti pri tipografiji; spremembe pa je mogoče uporabiti prek Sketch Styles. Dobra praksa je, da uporabite že ustvarjeno knjižnico barv in posodobite te sloge besedila, če se v knjižnici spremeni barva.

Ikone

V sistemu postavitve obstajata dve skupini ikon: informacijske in ikone uporabniškega vmesnika. Prva skupina je običajno del a ilustracijski komplet in se ne uporablja za nobene komponente interakcije z uporabniškim vmesnikom (na primer gumbi). Druga skupina - ikone uporabniškega vmesnika - dodaja pomen bolj zapletenim komponentam: gumbom, nalepkam ali tabelam, hkrati pa zaseda zelo majhno količino prostora. Ikone v uporabniškem vmesniku lahko uporabite tudi kot sprožilce funkcij, kot so 'urejanje', 'kopiranje', 'prenos' in 'brisanje'. Začnite s preprostimi ikonami, ki se uporabljajo za interakcije z uporabniškim vmesnikom, kot so puščice, »dodaj« (+) ali »zapri« (x). Dobra praksa je, da jih oblikujete v različnih velikostih (12px, 16px, 24px 32px).

Bistven in preprost nabor ikon uporabniškega vmesnika, ustvarjen kot simboli skic, ki bodo pomagali ustvariti druge elemente uporabniškega vmesnika v okviru oblikovanja.

Komponente

Gumbi

Gumbi so nedvomno ena najpomembnejših komponent pri oblikovanju uporabniškega vmesnika in v preteklih letih so šli skozi številne spremembe saj so oblikovalski trendi prihajali in odhajali.

Pri oblikovanju gumbov se prepričajte, da oblikujete njihova posamezna 'stanja'. Gumb ima praviloma več stanj in uporabnikom zagotavlja vizualne povratne informacije za prikaz trenutnega stanja (neaktiven, pomaknjen, pritisnjen, onemogočen, aktiven itd.). To lahko storite na dva načina: prvi je oblikovanje videza gumbov posebej za vsako stanje (običajno, aktivno, pomaknjeno in pritisnjeno). Ta rešitev je lahko dolgotrajna, vendar nato zagotavlja veliko prilagodljivosti. (Ta metoda je bila uporabljena v spodnjem brezplačnem okviru Sketch UI.)

Drugi način je načrtovanje vseh stanj na podlagi začetnega. Na primer, ustvari a Simbol skice, ki bo spremenil barvo, nasičenost ali svetlost vsakega stanja. Če želite to narediti, postavite simbol kot prekrivanje gumba z enim od načinov mešanja skice: odtenek, nasičenost ali prekrivanje. Uporabite črni pravokotnik z način mešanja odtenkov na običajnem gumbu, da spremenite njegovo nasičenost. Kasneje s spreminjanjem motnosti prosojnice postane bolj ali manj nasičen gumb.

Vsak gumb je narejen iz predhodno ustvarjenih simbolov. Če je polmer vogala nastavljen na osnovni simbol, bo to vplivalo na vse gumbe.

Vhodne komponente

Vhodi omogočajo uporabniku komunikacijo z aplikacijo in prenos podatkov. Uporaba komponent, kot so vnosna polja, skupaj z gumbi omogoča ustvarjanje preproste spletne aplikacije. Kot pri gumbih je tudi za vhodne komponente najbolje ustvariti različna stanja. Odvisno od okvira zasnove, vendar vsaj razmislite o ustvarjanju praznih, zapolnjenih in napak.

Kompleksne komponente

Na tej stopnji bi lahko oblikovalski okvir veljali za popolnega, ker vsebuje vse, kar potrebujete za ustvarjanje funkcionalnega izdelka. Vendar je pogosto vredno porabiti več časa za ustvarjanje bolj zapletenih komponent uporabniškega vmesnika za ogrodje uporabniškega vmesnika, kot so kartice, tabele, ločila datumov, grafikoni in obrazci.

Oddelki

Na tej stopnji je mogoče okvir za oblikovanje nadalje razviti z ustvarjanjem najpogostejših odsekov aplikacij ali spletnih mest. Z oblikovanjem stvari, kot so navigacija, naslovi, razdelek »o nas« in galerije, lahko oblikovalec prihrani čas v poznejših fazah projekta. Ustvarjanje več različic različnih odsekov izdelka bo olajšalo prilagajanje različnim projektom.

Dobre prakse oblikovalskega okvira

Nenehno preizkušajte oblikovalski okvir

Preskušanje mora biti vključeno v kateri koli postopek načrtovanja ali razvoja. Izogibajte se napakam in manjkajočim komponentam pri ustvarjanju majhnih kosov zasnove in testiranja izjemnih situacij. Na primer, preveri, ali spreminjanje komponente, ustvarjene na začetku, spremeni tudi nedavno dodano komponento.

Ustvarite preproste komponente uporabniškega vmesnika

Komponente naj bodo enostavne, medtem ko razmišljate o čim več primerih uporabe oblikovanja, tako da bo v prihodnosti mogoče zajeti kateri koli slog. Najbolje je, da sestavite komponente uporabniškega vmesnika s preprostimi oblikami in jih ohranite dovolj prilagodljive, da se enostavno prilegajo kateremu koli projektu.

Ne osredotočajte se samo na en slog

Oblikovni okvir mora biti univerzalen, zato se namesto, da bi se osredotočili na določen slog, osredotočite na komponente, ki jih lahko uporabite za ustvarjanje sloga.

Ustvarite svoj oblikovalski okvir

V naslednjem projektu si na začetku vzemite čas za natančno oblikovanje okvira za oblikovanje. Ugotovili boste, da izboljšuje celoten postopek oblikovanja, povečuje učinkovitost in izboljšuje doslednost oblikovanja izdelka, kar izboljša enostavnost uporabe. Prihranili boste čas, učinkoviteje komunicirali z oblikovalskimi idejami in razveselili kupce in zainteresirane strani, ko bodo te ideje v samo nekaj sekundah zaživele na 120 ploščah Sketch.

Ste pripravljeni na lastno oblikovalsko ogrodje?

Datoteko Sketch prenesite tukaj . Vključena so navodila za uporabo.

Navdihujoči sistemi oblikovanja in okviri uporabniškega vmesnika

Eden najboljših načinov za boljše razumevanje okvirov oblikovanja je preučiti, kako jih uporabljajo uveljavljena podjetja. Sledite tovrstnim podjetjem in poznajte njihov pristop. Googlovo materialno oblikovanje - trenutno eden najbolj priljubljenih oblikovalskih okvirov na svetu. Naučite se, kako Google prekriva celoten postopek načrtovanja in gradi uporabno hierarhijo komponent.

IBM-ov oblikovalski jezik - IBM deli celoten postopek načrtovanja, vključno s podrobno razlago vseh podrobnosti.

Veliko jih tudi delijo virov od njegovega oblikovalskega jezika, od preprostih ikon do knjižnice animacij uporabniškega vmesnika.

Atlassian –Još en odličen učni vir. njegovo vodnik po slogu izdelka to je odličen sistem oblikovanja za preučevanje. Delijo svoje Spletni GUI paket , datoteka Sketch s številnimi komponentami in koncepti.