Jos olet ollut muotoilumaailmassa jonkin aikaa, olet todennäköisesti kuullut nämä termit: suunnittelukehys, käyttöliittymäkehys, käyttöliittymäsarja tai kuvakirjasto. Ne kaikki viittaavat samaan asiaan: suunnittelustandardien, mallien, käyttöliittymämallien ja komponenttien järjestelmä, jota käytetään koko tuotteessa ja joka palvelee sen tarkoitusta. suunnittelukieli . Jos et ole vielä rakentanut suunnittelukehystä, sen aloittaminen voi tuntua ylivoimaiselta ja aikaa vievältä, mutta se nopeuttaa suunnittelutyötäsi ja tekee siitä kokonaisuutena tehokkaampaa.

Kuvailkaamme tärkeimmät ongelmat, jotka suunnittelukehys ratkaisee, miksi sitä tarvitset, ja komponentit, jotka sinun on luotava rakennettaessa. Löydät ladattavan Sketch UI -kehyksen vapaa myöhemmin artikkelissa, jonka avulla voit luoda oman suunnittelukehyksen.

Suunnittelukehys luonnoksessa

Mikä on suunnittelukehys?

Jokainen käyttöliittymäsuunnittelu alkaa tyhjällä piirtoalustalla, ja jokaisella suunnittelijalla on prosessi, jota he käyttävät muuntaa tyhjä kangas täysin toimivaksi tuotteeksi. Tämä prosessi sisältää kaikki luodut pienet suunnittelukomponentit ja vaiheet, jotka suunnittelija toteuttaa yhtenäisen kokonaisuuden luomiseksi väreistä painikkeisiin ja kaikkeen siltä väliltä.

Tämä työ on usein toistuvaa ja voidaan yhdistää ja tehostaa luomalla toisiinsa liittyvien mallien ja komponenttien järjestelmä. Toisin sanoen, suunnittelukehys .

Suunnittelukehykset ratkaisevat useita ongelmia, mukaan lukien:

• Poistetaan epäjohdonmukaisuudet tuotesuunnittelussa.
• Lisää yhteistyötä, tehokkuutta ja viestintää suunnittelu- ja tuotetiimien välillä.
• Tee suunnittelupäivityksistä myöhemmin suunnitteluprosessissa vähemmän turhauttavaa.

Ensimmäinen ongelma: epäjohdonmukaisuus tuotteessa

Johdonmukaisuus muuttaa hyvän suunnittelun upeaksi. Johdonmukaisuus parantaa käyttöjärjestelmää, yleistä käytettävyyttä ja tehokkuutta, jolla käyttäjät voivat käyttää digitaalisia tuotteita. Olipa kyse pienestä verkkosivustosta, sovelluksesta tai suuresta SaaS-tuotteesta, epäjohdonmukaisuudet suunnittelussa vaarantavat ulkoasun, tuntuman, uskottavuuden ja käyttäjäkokemus tuotteen.

Epäjohdonmukaisuuksia esiintyy usein, kun joukkue tai joukkue suunnittelija teet asioita liian nopeasti tai teet muutoksia lennossa. Joskus suunnittelija vastaa asiakkaalle tai sidosryhmälle pyytämään jotain erilaista osoittamalla nopeasti, miltä nämä muutokset näyttävät. Yhtäkkiä suunnittelutiimi kohtaa neljä erilaista vihreää sävyä, eikä kukaan ole varma, mikä painikkeen ensisijainen väri on.

Suunnittelukehykset ratkaisevat tämän ongelman luomalla yhdenmukaiset standardit.

Toinen ongelma: yhteistyön ja viestinnän aukot

Usein kehitysprosessin aikana, kun mukana on useita tiimin jäseniä ja monet työskentelevät suunnittelun suhteen prosessin eri kohdissa, voi olla hämmentävää, jos tiimille ei ole ohjeita.

Suunnittelukehys lisää yhteistyötä ja tehokkuutta virtaviivaistamalla viestintäprosessia ja tarjoamalla selkeät standardit ja suunta. Aikaa ei tuhlata juoksemisessa yrittää selvittää, mikä väri tai kirjasin on oikea käyttää.

Yleisesti nähty ongelma: kolme eri tyyliä samalla painikkeella

Kolmas ongelma: muutokset viimeisen vaiheen suunnittelussa

Kuinka monta kertaa suunnittelijoiden on tehtävä kertaluonteinen muutos suunnittelutiedostossa 120 jo kehitetyllä työpöytämallilla? Kuinka monta kertaa on tarpeen muuttaa kuvaketta, joka on osa 200 komponenttia?

Muutos on väistämätöntä koko suunnitteluprosessin ajan, se on tapa, jolla tuotetta parannetaan, mutta se tapahtuu usein myöhemmin kuin he haluaisivat suunnittelijat . Suunnittelukehys tekee viimeisen vaiheen muutoksista vähemmän tuskallisia, koska se on rakennettu olio-komponenttijärjestelmälle. Vaihda se kerran ja se käpristyy koko mallissa.

Suunnittelukehyksen luominen

Nyt kun tiedämme mikä on suunnittelukehys ja sen korjaamat ongelmat, puhutaan sen luomisesta (ja mitä myöhemmin artikkelissa olevassa Sketch UI -paketin latauksessa).

Tässä artikkelissa käytetty suunnittelukehys on yksi luonnostiedosto, joka esitetään käyttäen tiettyä komponenttien hierarkiaa, joka tunnetaan Sketchissä 'symboleina'. Näiden symbolien avulla koko tiedostoon tehtävät muutokset on helppo toteuttaa yhdellä napsautuksella. Muutos 'master' -komponentissa - 'symboli' - näkyy välittömästi kaikissa muissa tapauksissa.

Suunnittelukehyksen hierarkia

Hyvin toimivan suunnittelukehyksen luomiseksi aloita luomalla vahva visuaalinen hierarkia. Suunnittele ensin yleisimmät komponentit, kuten väri ja typografia. Siirry sitten pienempiin, kuten painikkeet ja syöttökomponentit. Ajattele sitä kuin talon rakentaminen - rakenna ensin perusta ja lisää sitten muut osat projektin edetessä.

Ei väriä ja tilaa: muodot, varjot ja typografia ovat vain joukko näkymättömiä parametreja.

Väri

Väri on tärkein elementti kehyshierarkiassa UI-suunnittelu - mallin jokaisessa osassa käytetään väriä. Väri herättää ihmisissä voimakkaita reaktioita ja tunteita ja määrittää tuotteen ulkonäön, tunnelman ja sävyn.

Hyvä käytäntö on jakaa värit ryhmiin:

1. Päävärit ovat tärkeimmät tuotemerkin värit, joita käytetään yleensä projektin yleisen värimaailman luomiseen ja tärkeisiin osiin, kuten painikkeisiin.

2. Toissijaiset värit ne täydentävät pääpalettia - ne ovat usein eri sävyjä, kylläisyyksiä tai päävärien sävyjä. Harmaasävy Sitä käytetään yleisesti typografiaan tai taustatietoihin. Jossain viidestä kahdeksaan harmaan tason pitäisi olla riittävä.

3. Järjestelmän kommenttien värit ne ovat tärkeä ryhmä, jonka suunnittelijat usein unohtavat. Nämä värit näyttävät järjestelmäviestit, mukaan lukien hälytykset, varoitukset ja ilmoitukset.

Jokainen väri on luonnostiedostossa erillinen symboli - tämä varmistaa, että kun väriä muutetaan, myös kaikki kyseistä väriä käyttävät elementit muuttuvat.

Ruudukko: Suunnittelutila

Kun värit on valittu, seuraava askel on ruudukon asettaminen. Ruudukko pitää sivun kaikki muut osat oikeassa paikassa ja järjestyksessä. Tämä on yleinen suunnittelutila.

Ristikkoja on kahden tyyppisiä: pystysuora Y vaakasuorassa .

Pystysuuntainen ristikko on yleisimmin käytetty ja se pitää kaiken vaakasuorassa. On olemassa monia suosittuja ruudukkojärjestelmiä, kuten Bootstrap tai vanhempi 960 kuvapisteen ruudukko. Vaakasuuntainen ruudukko ei ole niin yleinen. Typografiaan käytetään vaakasuuntaista ristikkoa. Luo vertikaalisen rytmin kappaleille ja nähdään yleisesti sanomalehdissä.

Muuttajat: tyylisäännöt

Värin ja ruudukon lisäksi suunnittelukehyksen hierarkiassa on vielä yksi komponentti: muokkaajat. Niitä ei voida käyttää itsenäisinä komponentteina: niitä käytetään muokkaamaan tai muotoilemaan muita.

Tämä ryhmä tuo tyyliä projektiin ja sisältää estetiikasta vastaavia komponentteja, kuten muodot tai sävyjä ; Niiden muuttaminen erikseen projektin myöhemmissä vaiheissa voi olla hankalaa.

Käsittele muokkaajia kaikkien seuraavien rakennuspalikoiden parametreina. Luo luonnosmerkkejä kolmella eri tavalla: suorakulmio, pyöristetty suorakulmio ja ympyrä. Käytä näitä muotoja luodaksesi käyttöliittymän komponentit, mukaan lukien painikkeet, syöttökomponentit, lomakekentät ja niin edelleen. ja taustaelementit.

Tämä tekniikka sallii suunnittelijoille keskity enemmän käyttöliittymään kuin käyttöliittymän komponenttien ulkonäköön. Sen avulla on myös helppo palata perusmuotoon, muuttaa tyyliä (esimerkiksi kulmasäde), ja kaikki liitetyt päivittyvät automaattisesti.

Muotojen luominen luonnosmerkeinä on hyvä käytäntö, koska niitä voidaan käyttää seuraavien komponenttien rakentamiseen. Kaikki muutokset taustalla oleviin muotoihin heijastuvat välittömästi näihin komponentteihin.

Typografia: sisältö

Typografia on suunnittelukehyksen viimeinen pääkomponentti. Se voidaan jakaa kahteen ryhmään: staattinen sivukopio, kuten otsikot ja kappaleet; ja komponenttien, kuten painikkeiden, navigointi- tai syöttökenttien, interaktiivinen kopiointi.

Suunnittele kaikkien otsikoiden (H1, H2, H3 jne.) Ja kappaleiden tyyli ja koko. Sivun staattisessa kopiossa ei yleensä ole paljon tyylivaihtoehtoja (väri tai paino). Ainoa muunnelma suhteessa staattiseen sivun kopiointityyliin on, onko kyseessä vaalea vai tumma tausta. Siksi on parasta luoda kaksi väriä, jotta staattinen sivukopio toimii molemmissa.

Tyylikäs runkoteksti vaalealla ja tummalla taustalla

Interaktiivisissa komponenteissa, kuten painikkeissa tai järjestelmän palauteviesteissä, esiintyvällä kopiolla voi olla useita muunnelmia. Esimerkiksi järjestelmän palauteviestit voidaan näyttää neljällä eri taustavärillä viestityypistä riippuen (varoitus, virhe, onnistuminen jne.) - painikkeiden tarroilla voi olla myös erilainen tausta.

Tämän ryhmän sisällyttäminen suunnittelukehykseen on hyödyllistä ajatellen typografiaa globaalisti. Luo ensin normaali painikkeen tarrateksti ja toiseksi sen muunnelmat; tämä auttaa välttämään liian monta fonttikokoa. Kun luot uusia käyttöliittymäkomponentteja kehyksessä, tarkista aina, onko olemassa olemassa olevaa kirjasintyyliä, joka sopii.

Värejä luonnossymboleina ei voida käyttää typografian kanssa; muutoksia voidaan kuitenkin soveltaa luonnostyylien avulla. On hyvä käyttää jo luotua värikirjastoa ja päivittää nämä tekstityylit, jos kirjastossa muutetaan väriä.

Kuvakkeet

Asettelujärjestelmässä on kaksi kuvakeryhmää: informaatio- ja käyttöliittymäkuvakkeet. Ensimmäinen ryhmä on tyypillisesti osa a kuvitus sarja eikä sitä käytetä mistään käyttöliittymän vuorovaikutuskomponenteista (kuten painikkeista). Toinen ryhmä - käyttöliittymäkuvakkeet - lisää merkityksen monimutkaisemmille komponenteille: painikkeille, tarroille tai taulukoille ja vie samalla hyvin vähän tilaa. Käyttöliittymän kuvakkeita voidaan käyttää myös triggereinä toiminnoille, kuten 'muokkaa', 'kopioi', 'lataa' ja 'poista'. Aloita yksinkertaisista kuvakkeista, joita käytetään käyttöliittymän vuorovaikutuksessa, kuten nuolilla, 'lisää' (+) tai 'sulje' (x). Hyvä käytäntö on suunnitella ne erikokoisiksi (12 kuvapistettä, 16 kuvapistettä, 24 kuvapistettä 32 kuvapistettä).

Tärkeä ja yksinkertainen joukko käyttöliittymäkuvakkeita, jotka on luotu luonnosmerkeinä, jotka auttavat luomaan muita käyttöliittymän elementtejä suunnittelukehyksessä.

Komponentit

Painikkeet

Painikkeet ovat epäilemättä yksi käyttöliittymäsuunnittelun tärkeimmistä komponenteista, ja vuosien varrella ovat käyneet läpi monia muutoksia koska suunnittelusuunnitelmat ovat tulleet ja menneet.

Kun suunnittelet painikkeita, muista suunnitella niiden yksittäiset 'tilat'. Painikkeella on yleensä useita tiloja, ja se antaa käyttäjille visuaalista palautetta nykyisen tilan osoittamiseksi (ei-aktiivinen, vieritetty, painettu, poistettu käytöstä, aktiivinen jne.). Voit tehdä tämän kahdella tavalla: ensimmäinen on suunnitella painikkeiden ulkonäkö erikseen kullekin tilalle (säännöllinen, aktiivinen, vieritetty ja painettu). Tämä ratkaisu voi olla aikaa vievää, mutta tarjoaa sitten paljon joustavuutta. (Tätä menetelmää käytettiin alla olevassa Sketch UI -kehyksessä.)

Toinen tapa on suunnitella kaikki tilat alkuperäisen perusteella. Esimerkiksi luoda a Luonnossymboli, joka muuttaa kunkin tilan väriä, kylläisyyttä tai kirkkautta. Voit tehdä tämän sijoittamalla symboli painikkeen päällekkäiseksi jonkin luonnoksen sekoitustilasta: sävy, kylläisyys tai peitto. Käytä mustaa suorakulmiota sävyn sekoitustila normaalipainikkeessa sen kylläisyyden muuttamiseksi. Peitteen peittävyyden muuttaminen myöhemmin tekee siitä enemmän tai vähemmän kylläisen painikkeen.

Jokainen painike on valmistettu aiemmin luoduista symboleista. Jos kulman säde on asetettu alla olevaan symboliin, se vaikuttaa kaikkiin painikkeisiin.

Syöttökomponentit

Tulojen avulla käyttäjä voi olla yhteydessä sovellukseen ja ladata tietoja. Komponenttien, kuten syöttökenttien, käyttö painikkeiden kanssa mahdollistaa yksinkertaisen verkkosovelluksen luomisen. Kuten painikkeiden kohdalla, on parasta luoda eri tilatulokomponentteja. Se riippuu suunnittelukehyksestä, mutta harkitse vähintään tyhjien, täytettyjen ja virhetilojen luomista.

Monimutkaiset komponentit

Tässä vaiheessa suunnittelukehystä voidaan pitää täydellisenä, koska siinä on kaikki mitä tarvitset toimivan tuotteen luomiseen. Usein on kuitenkin syytä käyttää enemmän aikaa luoda monimutkaisempia käyttöliittymäkomponentteja käyttöliittymäkehykselle, kuten kortteja, taulukoita, päivämäärän erottimia, kaavioita ja lomakkeita.

Osiot

Tässä vaiheessa suunnittelukehystä voidaan edelleen kehittää luomalla yleisimmät sovellusten tai verkkosivustojen osiot. Suunnittelemalla esimerkiksi navigointia, otsikoita, 'meistä' -osion ja gallerioita suunnittelija voi säästää aikaa projektin myöhemmissä vaiheissa. Luomalla useita muunnelmia tuotteen eri osioista, on helpompaa sovittaa eri projektit riviin.

Hyvät käytännöt suunnittelukehyksessä

Testaa suunnittelukehystä jatkuvasti

Testaus tulisi sisällyttää mihin tahansa suunnittelu- tai kehitysprosessiin. Vältä virheitä ja puuttuvia osia, kun luot pieniä muotoiluja ja stressitestejä. Se esimerkiksi tarkistaa, muuttaako alussa luotua komponenttia myös äskettäin lisätty komponentti.

Luo yksinkertaisia ​​käyttöliittymäkomponentteja

Pidä komponentit yksinkertaisina ajattelemalla mahdollisimman monta suunnittelun käyttötapausta, joten tulevaisuudessa mikä tahansa tyyli voidaan kattaa. On parasta luoda yksinkertaisen muotoiset käyttöliittymäkomponentit pitämällä ne riittävän joustavina, jotta ne sopivat helposti mihin tahansa projektiin.

Älä keskity vain yhteen tyyliin

Suunnittelukehyksen tulisi olla universaali, joten keskity tiettyyn tyyliin keskittymisen sijaan komponentteihin, joita voidaan käyttää tyylin luomiseen.

Luo oma suunnittelukehyksesi

Käytä seuraavassa projektissasi aikaa alussa rakentaa suunnittelukehys huolellisesti. Huomaat, että se parantaa yleistä suunnitteluprosessia, lisää tehokkuutta ja parantaa tuotesuunnittelun johdonmukaisuutta ja parantaa käytön helppoutta. Säästät aikaa, välität suunnitteluideoita tehokkaammin ja ilahdutat asiakkaita ja sidosryhmiä, kun nämä ideat heräävät eloon muutamassa sekunnissa 120 Sketch -tauluulla.

Oletko valmis aloittamaan oman suunnittelukehyksesi?

Lataa Sketch-tiedosto täältä . Mukana on ohjeet sen käytöstä.

Innostavat suunnittelujärjestelmät ja käyttöliittymäkehykset

Yksi parhaista tavoista ymmärtää suunnittelukehyksiä on tutkia kuinka suuret vakiintuneet yritykset käyttävät niitä. Seuraa tämäntyyppisiä yrityksiä ja tiedä heidän lähestymistavansa. Googlen materiaalisuunnittelu - tällä hetkellä yksi suosituimmista suunnittelupuitteista maailmassa. Opi, miten Google kerää koko suunnitteluprosessin ja rakentaa hyödyllisen komponenttien hierarkian.

IBM: n suunnittelukieli - IBM jakaa koko suunnitteluprosessinsa, mukaan lukien yksityiskohtainen selitys kaikista yksityiskohdista.

He jakavat myös monia resursseja sen suunnittelukielestä yksinkertaisista kuvakkeista käyttöliittymän animaatiokirjastoon.

Atlassian - Toinen suuri oppimisresurssi. hänen tuotteen tyyliopas se on hieno suunnittelujärjestelmä tutkittavaksi. He jakavat omansa Web-käyttöliittymäpaketti , luonnostiedosto, jossa on paljon komponentteja ja käsitteitä.