Kuidas luua stiilijuhist: alustage kasutajaliidese raamistikust

Küsimused ja vastused AdRolli UX Designeriga selle kohta, miks me seda tegime ja mida õppisime

See ajaveebipostitus on esimene sarjast, mis kirjeldab stiilijuhi teekonda alates selle loomisest kuni meie meeskondade küpse kasutajaliidese pakkumiseni ja lõpuks meie toodete ainulaadse hääle ja tooni destilleerimiseni.

Tere! Olen Arya Srinivasan, AdRolli UX-teadlane. Istusin koos UX-i disainer Mason Leega, kes töötab AdRolli loomulike reklaamide API-toote kallal, et rääkida oma tööst AdRolli stiilijuhendi väljatöötamisel.

Arya: Miks te alustasite stiilijuhi projekti, et asjad käima lükata? Mis oli probleem, mis vajas lahendamist?

Mason: Probleemiks oli disainilahenduste ebajärjepidevus nii toodete vahel kui ka ühe toote sees. Näiteks nupp, mis peaks kõikjal ühesugune välja nägema, kuid erineb tegelikult värvi, fondi kaalu ja äärise stiili järgi.

Nööbid näevad üksikute disainerite piltide ja meie rakenduste puhul välja erinevad.

AdRolli kiire kasv tähendas, et keskendusime kiirusele. Oleme nüüd suurem ettevõte, millel on mitu toodet, nii et disainerina usun, et meie jaoks on oluline rõhutada oma toodete esitlemise järjepidevust: disaini kaudu.

Kujundusele keskendumiseks oli vaja kõigepealt parandada olemasolevad ebakõlad. Siinsed UX-i disainerid keskenduvad tavaliselt ühele või kahele tootele, nii et selleks, et meie meeskond mõtleks kõigi toodete kujundusele, korraldasin iganädalase “UI Smackdown” koosoleku, kus arutati kasutajaliidese juhiseid.

Igal kohtumisel vaatlesime disaini ebakõlasid, et otsustada ühe kujunduse üle. Pärast mõnda kohtumist küsisid disainerid minu käest ikka õige värvi või polstri kohta jne. Vajasime kõigi vastustega keskset dokumenti, nii et ehitasin meie eskiisliidese UI raamistiku disainerite ressursina. Kui saame aru, et puudu on mõni komponent või soovime uut komponenti lisada, arutame selle läbi ja lisame selle UI-põhifaili.

Arya: Mainisite, et soovite, et AdRoll oleks disainikeskne ettevõte - mida te selle all silmas peate?

Mason: Ma tahan, et AdRoll seaks disaini esiplaanile, et see oleks konkurentsi eristaja - kliendid tunnevad seda hästi läbimõeldud tootena, mis nende vajadusi tõesti lahendab.

Arya: Millised olid teie stiilijuhendi vahetud eesmärgid? Kas teil on selle projekti kohta pikemaajaline visioon?

Mason: Minu lühiajaline eesmärk on saavutada disainilahenduste kooskõla disainerite vahel, standardiseerides meie kasutajaliidese komponendid. Ma tahan, et disainerid räägiksid disaini rääkides sama keelt. Näiteks ehitavad insenerid modaali või rippmenüü järgi disainerite soovituste põhjal. Kui kujunduselemendid on disainerite vahel erinevad, valmistavad insenerid sama elementi erineval viisil.

Minu keskpika perioodi eesmärk on see stiil määratleda meie koodis jaotises „RollUp”, AdRolli sisemine kasutajaliidese komponentide kogu. Kui meil on etteantud stiilileht, peavad kõik meie insenerid selle kopeerima. Disainerid ja insenerid saavad rääkida sama keelt.

Arya: Kas teil oli stiilijuhendi koostamisel probleeme? Kuidas te need lahendasite?

Müürsepp: Üks suuremaid takistusi oli inimeste sisseostmine tootetiimide kaudu. Kõigi kaasamiseks panin paika kohtumise, kus oli selge loetelu päevakorrapunktidest. Esitasin disaini ebakõlasid, nagu näiteks toodete erinevad rippmenüüd. Visuaalsete tõendite esitamine käivitab vestlused ja lõpuks hoolivad inimesed oma tootest ning soovivad järjepidevust.

Teine väljakutse oli reeglite üle otsustamine. Komponendi standardiseerimisest rääkides peaks see olema rakendatav kõikjal, igas kontekstis. Peate mõtlema iga serva juhtumi üle. Komponent peab olema paindlik, kuid samal ajal piisavalt funktsionaalne, et see oleks hõlpsasti kasutatav, tarbitav ja rakendatav.

Siin on näide meie stiilijuhi paindlikkusest. Meie esialgne otsus geograafilise sihtimise rippmenüüst polstri kohta oli liiga suur, nii et muutsime stiilijuhendi selle kasutusjuhu arvessevõtmiseks.Enne (vasakul), Pärast (paremal)

Tegelikult tahan välja kutsuda veel ühe väljakutse! Nimetamine võib olla keeruline. Nagu ma juba ütlesin, tahan, et disainerid ja insenerid räägiksid sama keelt, kuid seda tuleb teha hoolikalt. Nii lihtsa kui rippmenüü jaoks on meil tegelikult mitu varianti (üks märkeruutudega, teine ​​märkeruutude ja tekstiplokiga ning teine ​​on tavaline rippmenüü). Kuidas nimetada kolme erinevat rippmenüüd, nii et on olemas üldine arusaam, kumb on kumb?

Semantika on keeruline; meie nimetamine peab olema mõistlik. Kasutasime nime valimisel konsensuse saavutamiseks mõnda lahedat koostöövahendit. Näiteks aitas Wake meil koguda kõiki lahtisi küsimusi ja küsimusi, arutada lahendusi, jälgida UI Smackdowni otsuseid ja jätkata vestlust suurema tootetiimiga, integreerides Slacki.

Kuidas kasutasime Wake'i, et arutada kasutajaliidese vastuolude üle ja teha koostööd komponentide reeglite väljatöötamisel.

Arya: Kas AdRolli kasutajaliideses on midagi ainulaadset, mida pidite stiilijuhendi loomisel arvestama?

Mason: Meie armatuurlaud on väga andmemahukas. Lisaks annab kampaania loomise voog reklaamijatele hunniku tõmbejõude. Vähem kogenud reklaamijate vajaduste rahuldamiseks on meie eesmärk saada tõhusad vaikesätted. Meie toodetes on komponentidel keerukad funktsioonid, kuid need näevad välja lihtsad ja neid on lihtne kasutada.

Arya: Kas on mõnda asja, mida soovite teada saada, kui hakkasite stiilijuhendit looma?

Mason: Soovin, et mul oleks sügavam arusaam sellest, kuidas kõik meie tooted algusest peale toimivad. Näiteks jagame iganädalases disainikriitika koosolekul seda, kuidas meie tooted töötavad, nii et ma tean, kuidas SendRoll (meie e-posti aadressi ümbersuunamise toode) toimib pinnal, kuid mul pole selle disaineriga seotud sügavaid teadmisi SendRolli kohta. Arvan, et toote nüansirikas mõistmine aitab stiilijuhendi koostamisel kindlasti kaasa, sest siis on mul kõigist võimalikest kasutusjuhtudest parem ülevaade.

Arya: Mis on parim viis saavutada see ühine arusaam disainerite protsessist ja nende tootest?

Mason: Ehkki me oleme tõesti keskendunud oma toodete saatmisele, teeme head tööd oma iganädalases disainikriitika koosolekul oma disainiprotsessi jagamisel. Arvan, et saame paremini suhelda pärast iga koosolekut - kuidas disainer kaasati kohtumise tagasiside? Kui toode on meie reklaamijate poolt kohale toimetatud ja seda kasutatud, võiksime analüütika teadmiste põhjal jagada ka seda, kuidas reklaamijad tooteid kasutavad.

Arya: Kas oli mingeid ressursse, millele viitasite selle projekti kallal töötades?

Mason: Lugesin Brad Frosti aatomikujundust, uurisin veebist ja rääkisin MeetUpsis teiste UX-i disaineritega. Kui arvate, et mõni konkreetne ettevõte praktiseerib head disaini, on üsna tõenäoline, et nad on oma stiilijuhist kuskil veebis rääkinud.

Arya: Milline on meie stiilijuhi staatus?

Müürsepp: Olen jäädvustanud ja vaadanud läbi kõik kasutajaliidese elemendid, mida me oma erinevates toodetes kasutame, ja rühmitanud need alusteks, komponentideks, mustriteks ja lehtedeks, mis on meie kasutajaliidese kujunduse tõeallikaks.

Saate kontrollida vundamendi ja komponendi kasutajaliidese elemente Dribbble'is. Kui olete tuttav aatomikujundusega, siis rühmitasin „aatomi” ja „molekuli” tasemed nn komponentideks. Näiteks vormi vormingu pealkirja ja sisendi kombineerimine võimaldab teistel disaineritel täidetud vormi hõlpsalt kopeerida. põld.

Täname, et lugesite!

Stiilijuhendi väljatöötamisel järgige neid tulevasi teemasid:

  • Kuidas kasutajaliidese raamistik lihtsustab koostööd
  • UI raamistiku põhjal uute stiililehtede väljatöötamine
  • Kuidas luua stiilijuhi veebisait
  • Reis meie hääle ja tooni leidmiseks