Jopa kokeneelle suunnittelijalle uuden tyylioppaan luominen tuotteelle on vaikeaa - on monia mahdollisia suunnitteluohjeita, ja prosessi voi nopeasti tulla ylivoimainen. Elämä aloittaa se on melko hektinen, nopea ja täynnä kliseitä, kuten 'täydellisyys on vihollista tekemällä jotain', 'liikkua nopeasti ja rikkoa asioita' tai 'aloitetaan nyt, korjataan se myöhemmin'.

Tyylioppaan luominen tällaisten vaihtuvien iskulauseiden ja prioriteettien alle on haastavaa, mutta välttämätöntä, jos haluamme tuotesuunnittelun menestyvän pitkällä aikavälillä.

Globaali kielikokemus (GEL) BBC kertoo kunkin komponentin tarkoituksen ja miten niitä tulisi käyttää.

Viime vuosina olemme kuulleet paljon asettelujärjestelmistä, tyylioppaista, kuvakirjastoista ja atomisuunnittelu . Ja vaikka nämä työkalut ovat erittäin hyödyllisiä, niiden käyttäminen voi tuntua ylenmääräiseltä, kun haluat vain luoda pari näyttöä MVP: lle tai sovelluksen esittelylle. Tyylin oppaan saaminen ei kuitenkaan vain paranna yleistä suunnitteluprosessia, vaan tekee sovelluksestasi myös vankemman ja johdonmukaisemman.

Puhutaan ensin tyylioppaiden tärkeimmistä eduista ja sitten keskitytään käynnistysympäristön haasteisiin. Lopuksi puhumme siitä, kuinka tyyliopas kehittyy aina elävänä asiakirjana.

Viisi parasta syytä, miksi tyyliopas on hyvä idea

1. Tyyliopas tekee malleista konkreettisia ja tuotemerkkejä selkeitä

Yhtenä suunnittelijana startupissa - mikä on usein tapana - ei ole paljon mahdollisuuksia tarkastella ja haastaa suunnittelupäätökset, jotka muut tiimin ihmiset ovat tehneet monta kertaa. Vaikka monet saattavat työskennellä yhteistyössä, malleja ei välttämättä jaeta muiden kanssa. Tämä tarkoittaa, että vain yksi henkilö vahvistaa lopulliset mallit.

Tyylin opas tarjoaa käyttöönoton, jossa on ohjeet ja ohjeet viitteeksi. Haastaa osan suunnittelupäätöksistä suunnittelija tai tiimi, koska heidän on vahvistettava ne sovelluksen globaalissa kontekstissa. UI-komponentin suunnittelu, koska se toimii hyvin näytöllä, ei onnistu; Hyvin harkitun asettelun tulisi ratkaista yksittäinen asetteluongelma tilanteessa sekä yleinen ongelma, joka löytyy sovelluksen muista näytöistä.

Tämän sovelluksen käyttöliittymäsuunnittelussa käytetään toistuvasti otsikkoa 'kontakti', mikä on ihanteellinen ehdokas sisällytettäväksi komponenttina tyylioppaaseen. (kirjoittanut Ivan Bjelajac päällä Dribbble)

Tyylioppaan avulla kaikki yleiset suunnittelutyylit, tuotemerkin oppaat, tekniset tiedot ja säännöt ovat kaikkien yrityksesi käytettävissä, ja vain yhden napsautuksen päässä. He voivat siirtyä URL-osoitteeseen saadakseen sen helposti käyttöön tai ladata sen PDF-muodossa. Suunnittelusta tulee kaikkien työ - se ei ole vain suunnittelutiimin vastuu. Se on varovainen lähestymistapa, joka parantaa tuotteen käyttöliittymää.

IBM tallentaa 'suunnittelukielien' oppaasi verkossa, mikä helpottaa kaikkien, myös julkisten, asioita, jotta ne voidaan nähdä.

2. Tyyliopas tekee suunnittelustasi johdonmukaisemman

Se tarjoaa eräänlaisen sanakirjan käyttöliittymän suunnittelukielelle. Voit käyttää samaa terminologiaa, kun haluat viestiä jo ilmaisemastasi. Kuvittele, jos meillä olisi eri sanoja ilmaisemaan samaa:

1. 'Sataa, tarvitsen sateenvarjoani.'
2. 'Sataa, tarvitsen sateenvarjoani'
3. 'Sataa, tarvitsen sateenvarjoani'

Se tekee kielestä runollisen, mutta sitä on vaikea ymmärtää. Pohjimmiltaan se on sama idea sivuston tai sovelluksen käyttöliittymän kanssa. Ollaksesi helppokäyttöinen, sinun on vain muodostettava uusi 'sana', kun olet itse luomassa jotain uutta. Tällä tavalla sinua sitoo tiukka sääntö, joka sanoo: 'Ainoastaan ​​komponentit, jotka ratkaisevat toistuvan suunnitteluongelman tuotteen kautta, ovat sallittuja tuotteessa ja sen jälkeen tyylioppaassa.'

Johdonmukaisuus tekee tuotteestasi käyttäjäystävällisemmän; erittäin käyttökelpoinen tuote tarkoittaa myyntiä ja markkinoinnin sitoutumista.

Onboarding-näytöissä käytetään yleensä animaatioita tai visuaalisia tehosteita, joita ei ole muualla sovelluksessa. Se antaa suunnittelijoille hyvän mahdollisuuden luoda uusi ulkoasu.
(kirjoittanut Murat Gursoy on Dribbble).

3. Saman komponenttijärjestelmän uudelleenkäyttö tekee sovelluksestasi helppokäyttöisen

Kuten kieliesimerkissä, johdonmukaisuus on avainasemassa. Joka kerta, kun käyttäjä ymmärtää jokaisen komponentin, kun sitä käytetään uudelleen ja eri yhteydessä, ihmiset tuntevat jo vanhan käyttäytymisen. Kun kyse on käyttäjien vuorovaikutuksesta, tämä johdonmukaisuus yleensä parantaa tuotteen käytettävyyttä.

Tapahtuma käytä kolmen kuvakkeen asettelua monissa osioissasi. Kun käyttäjä kohtaa nämä komponentit uudelleen, hän tuntee jo heidän yleisen käyttäytymisensä.

Työskentely komponenttipohjaisen suunnittelujärjestelmän kanssa säästää aikaa ja tekee tuotteesta myös helpon päivitettävissä. Jos komponentilla on tietyssä tilanteessa käytettävyysongelma, se voidaan korjata, kun kaikki muut komponentin mahdolliset ongelmat on päivitetty.

4. Tyyliopas tekee sovelluksestasi helpon kehittää pitkällä aikavälillä

Kun tiimisi kehittää yhteistä komponenttia näytölle, he kehittävät ratkaisua, jota he käyttävät myös muualla. Tämä säästää kehitysaikaa - itse asiassa paljon. Kun yrityksesi kasvaa, tämä säästää ehkä kymmenen kertaa uuden näytön luomiseen tarvittavat työtunnit.

5. Tyyliopas helpottaa tuotannon tehokkuutta ja innovointia

Tyylioppaan luominen tekee malleista helpommin saataville ja muun yrityksen saataville. Kehittäjät ja suunnittelijat he voivat prototyypin idean nopeammin ja helpommin. Bootstrapia ylistetään yleensä elämän helpottamisesta kehittäjät luoda toimiva prototyyppi - tyylisi opas palvelee samaa tarkoitusta. Se tarjoaa perustiedot uudelle käyttöliittymälle, jonka kehittäjät voivat luoda ilman, että suunnittelutiimi luo ensin näytön (vaikka suunnittelutiimin tulisi tehdä lopullisten näyttöjen laadunvalvonta tai laatutesti).

Shopifyn suunnittelujärjestelmä kopioitu, kopioitu Polaris .

Käynnistämisen haasteet, tyyliopas jatkuvassa muutoksessa

Suunnittelujärjestelmän luominen käynnistysympäristössä ei ole niin lineaarista kuin se näyttää olevan kypsässä yrityksessä, jossa he ovat tottuneet virtaviivaisempaan prosessiin. Perinteisemmässä yrityksessä suunnittelutiimi kehittää a UX-tutkimus , ideoita ja kokeiluja ja keksi sitten lopullinen tuotemerkkityylin opas. Tämä prosessi ei ole tarkoitettu kaikille yrityksille, koska startupit toimivat ympäristössä, jossa niiden visio ja tuotevaatimukset eivät aina muutu jatkuvasti. He työskentelevät MVP: n (elinkelpoiset tuotteet), niiden sovellusten keskeneräisten versioiden kanssa, joita käytetään testaamaan ideoitaan ja näyttämään sitä potentiaalisille käyttäjille.

Opastustyylin luomisesta voi tulla ongelma.

Ympäristössä, jossa se kehittyy jatkuvasti, a suunnittelija sinua on yleensä vaikea luoda opastava tyyli, jonka oletetaan olevan jotain 'kiinteää'. Suunnittelijalla ei ole aikaa ajatella kaikkia luomiasi komponentteja, vaikka ne saattavatkin näkyä viimeisinä. vapauta sovelluksen. Facebook muutti tunnetusti hampurilaisvalikkonsa navigointia varten välilehdet kun he kypsyivät vähän. Luuletko, että kuka tahansa hampurilaisen valikon laittaneen, lisäsi sen myös Facebook-tyylioppaaseen?

Voit myös ajatella, että ei ole vielä aika luoda tyyliopasta. Saatat huomata, että tarvitset pitkällä aikavälillä sellaista, mutta nyt on tärkeämpää valmistaa näyttöjä sarjatuotannossa. Lisäksi tarvitset joitain markkinointisivuja sovelluksesi mainostamiseen. Yhtäkkiä suunnittelusi on kaksinkertaistettava panos, ja kun luot näyttöjä, alat nähdä arvon, että sinulla on tyyliopas, joka voi pitää yrityksesi brändäyksen ja mallit yhtenäisenä.

Ongelmana on, et tiedä tarkalleen, milloin on oikea aika käydä kauppaa joustavuudella vakauden takaamiseksi. Sinun on päätettävä, milloin sinun tulisi alkaa keskittyä tyylioppaaseen ja milloin sinun pitäisi keskittyä näyttöjen luomiseen. Optimaalinen lähestymistapa voi olla tyylioppaan tuottaminen samanaikaisesti, kun toimit näyttöjä - tällä tavalla saat parhaat puolet molemmista maailmoista.

Aloita UI-inspiraatiosta

Hyvä tapa aloittaa, etenkin jos et ole suunnittelija, on kerätä esimerkkejä haluamistasi suunnittelutyyleistä tai jotain tärkeämpää, johon luulet käyttäjien vastaavan. Kerää niin monta esimerkkiä kuin mahdollista ja laita ne InVision / Niice-kansioon tai -taululle jne. Niitä voidaan käyttää viitteenä ja inspiraationa suunnitteluherkkyystesi yhteydessä. Voit rakentaa niitä myöhemmin luoda kuvakirjaston.

Esimerkiksi kun työskentelin viihde-alan taiteilijoita mainostavan yrityksen tyylioppaan parissa, mietimme, vaikuttaisiko vaalea tai tumma tausta suuresti käyttäjiimme. Katsoin satoja erilaisia ​​verkkosivustoja peleissä / elokuvissa / visuaalisissa tuotannoissa nähdäksesi, kuinka he käyttivät vaaleaa ja tummaa taustaa.

Pelin verkkosivusto Tähtien sota: Battlefront 2 käytä tummia värejä, kun HÄN käytä kevyempää palettia.

Tein huijausarkin, jossa korostin yleisimmät mallit. Yksi tunnistamani malli oli, että alan yritykset käyttävät yleensä tummempia taustoja esitellessään tuotteitaan, mutta käyttävät valkoista taustaa markkinoinnissa, verkkokaupassa ja myymälöissä.

Sinun ei tarvitse mennä niin syvälle, mutta huomasin, että visuaalisten viitteiden saaminen auttaa paitsi tyylioppaan luomisessa myös muistaa joitain käyttötapauksia, jotka sinun on ehkä suunniteltava. Kun tunnet olosi hyväksi keräämiesi viitteiden suhteen, voit aloittaa visuaalisen suunnittelun.

Eri mielialataulut, jotka käyttävät eri viitteitä.
(lähteet: Simpsonin vetokoukku kesällä ; Vivek Venkatraman ; Keltainen päällä Dribbble)

Suunnittele kiinteät käyttöliittymäkomponentit

Startup-yrityksissä työskenneltäessä on ainakin alussa vaikeampaa luoda komponentteja kuin sivuja. Kun suunnittelet sivua, sinulla on yleensä käsitys siitä, miten sitä käytetään. Näin ei välttämättä ole, kun suunnittelet komponenttia; yrität suunnitella tiettyä käyttötapaa varten, mutta haluat sen olevan osa yleistä suunnittelujärjestelmää, ja sinun on lähestyttävä sitä tällä tavalla. Haluat esimerkiksi luoda komponentin alisuuntaukseen kolmella painikkeella. Voit myös työskennellä neljällä, viidellä tai kymmenellä painikkeella, ja heidän on toimittava mobiililaitteella, tabletilla ja työpöydällä. Sinun täytyy ajatella pidemmälle.

Tyylin opas Operaattori määritä, miten kukin komponentti reagoi navigoinnin ja visuaalisen hierarkian perusteella. (lähteet: Kerem Suer päällä Dribbble)

Haluat tietyn tason sitkeys tai kiinteä teho komponentissa. Yleisten komponenttien ei pitäisi muuttua liikaa, ja niiden pitäisi olla uudelleenkäytettäviä monissa paikoissa koko tuotteessasi. Esimerkiksi, jos olet kiinnostunut vain iOS-sovelluksesta, sinun kannattaa testata komponentteja vaihtoehtojen määrän tai sisällön pituuden perusteella, ei välttämättä näytön koon mukaan. Ajatuksena on, että jos se on käyttökelpoinen käyttöliittymässä monissa sovelluksen paikoissa, tiedät, että se on osa, joka voi olla osa tyylisi opasta.

Salesforce Lightning Design System osoittaa kuinka joustava komponentti on ja voidaanko se mukauttaa mobiilikäyttöliittymään.

Käynnistyksen on aloitettava käytännössä ei mitään itsestään ja siirryttävä nopeasti. Pomosi saattaa haluta päivän loppuun suunnitellun näytön, mikä tarkoittaa, että et pysty todella kehittämään tyylin opasta ja sitten suunnittelemaan näyttöä. Mikä vielä pahempaa, voit suunnitella tyylin, joka sisältää komponentteja, jotka eivät koskaan näe päivänvaloa, koska yrityksen visio on muuttunut. Kuten sanotaan, on parempi käynnistää nyt.

Salesforce Analytics -käyttöliittymäpaketti on kirjasto tavallisista komponenteista, joita teoriassa käytetään uudelleen jokaisessa sovelluksessa. (lähde: Eli Sebastian Brumbaugh )

Hyvän tyylioppaan luominen vie aikaa, ja koska siitä tulee suunnittelujärjestelmän perusta, haluat saada sen oikein. Käynnistysympäristössä sinun on työskenneltävä tyylisi oppaassa kaiken mielessä. ## Tyyliopas elävänä asiakirjana

Sinun tulisi ajatella tyylisi opasta keskeneräisenä työnä. Aloittelijana, joka yrittää selvittää strategiansa, joudut selvittämään tyylisi oppaan matkan varrella. Voit muokata ja säätää sitä ajan myötä, kunnes siitä tulee käyttöliittymän perusta. Hyödyllinen lähestymistapa on aloittaa ensimmäisellä mallilla samalla kun aloitat tyylisi oppaalla. Avaa kaksi tiedostoa suosikkiohjelmistasi (minun tapauksessani Sketch); yksi nimeltään nombre de página ja toinen guía de estilo. Kun työskentelet näytön suunnittelun parissa, voit aloittaa tyylisi ohjaamisen elementeillä, jotka muodostavat suunnittelusi.

Esimerkki käynnistysprojektista, jossa on kaksi avointa tiedostoa. Tyyliopas vasemmalla ja mobiilinäyttö oikealla.

Mitä enemmän työskentelet näiden oppaiden parissa, huomaat melkein heti, että on joitain komponentteja, jotka on tärkeää sisällyttää tyylioppaaseen. Esimerkiksi, jos olet päättänyt kuvaketyylistä, kaikki kuvakkeet voivat siirtyä oppaaseen alusta alkaen.

Luon yleensä jakson nimeltä 'toistaiseksi kuvakkeet'. Ja jos joku jossakin vaiheessa tarvitsee kuvaketta, hänen on käytävä läpi tämä osa ensin ennen uuden luomista.

Myyntivoima , Älähtää Y Mapbox heillä kaikilla on laajat kuvakirjastot sovelluksilleen. Tyylin oppaasi tulisi sisältää myös käyttöliittymän elementtejä, joita käytetään koko sovelluksessasi.

Muita huomioitavia asioita ovat värit, valitsimet, otsikot, otsikot, tekstit jne. Jos käytät erityistä tyyliä markkinoinnissa, voit harkita sen sijoittamista tyylioppaaseen ja merkitsemistä siihen asianmukaisesti. On okei, jos et ole täysin varma tietystä tuotteesta, voit tarkentaa käyttöjärjestelmän käyttöliittymän elementtejä suunnittelujärjestelmässäsi myöhemmin, kun tilaisuus tulee, ja päivittää opas oikein. Älä unohda, tyyliopas on a elävä asiakirja , varsinkin käynnistettäessä.

Lopulta, kun aloitan asettelujen asettamisen oppaaseen, tiedän, että olen alkamassa päästä pisteeseen, jossa kaikkien komponenttien tulisi olla lähellä lopullista tilaa. Tämä osa on kriittinen hetki tyylioppaan luomisprosessissa - nyt voit juhlia! Hyvä tapa juhlia tällaista saavutusta on luoda logo tai kuvake (harkitse sen nimeämistä) oppaan versiolle 1.0.

Jotkut ihmiset jopa tulostavat logon / kuvakkeen tarraksi, jotta joukkueella on jotain samanlaista kuin pokaali. Se on myös kohta, jossa menen yleensä kohti perinteisempää tapaa työskennellä oppaan kanssa, joka on ensin avata opas ja luoda sitten uusi tiedosto tarvittavalle käyttöliittymälle.

johtopäätös

Suunnittelijana luomalla tyylin oppaan mahdollisimman varhaisessa vaiheessa varmistat, että aloituksesi noudattaa melko korkeaa laatutasoa. Se voi olla haastavaa, mutta se on kaikkien siihen kohdistettujen ponnistelujen arvoinen. Vankka ja hyvin tehty opas ei vain auta sinua saamaan hyvää tuotetta, vaan myös vähentää kehityskustannuksia.

On olemassa tapa tehdä tämä mahdolliseksi nopeatempoisessa ympäristössä, jossa tehdään nopeita päätöksiä ja joissa mallien on joskus muututtava nopeasti. Toivottavasti yllä kuvattu prosessi auttaa suunnittelijat missä tahansa käynnistysvaiheessa vastaamaan monimutkaisuuden ja nopeuden haasteisiin ja luomaan samalla vahva tyyliopas tuotteen hyödyksi.