Kujundussüsteemide visuaalne murdumine

Austame koodi API-sid. Kuidas on lood värvi, tüübi ja ruumiga?

Pilt 4 seeriast, mis vabastab disainisüsteemid:
Väljundid | Kadents | Versioonid | Purunemine | Sõltuvused | Protsess

Kujundussüsteemid loovad visuaalse stiili, mis on oluline sõltuvus. Need valikud - värv, tüpograafia, ruum ja muu - on täpselt määratletud ja eeldavad, et need muudavad vabastuse stabiilselt, ennustatavalt. Kui lapsendaja uueneb, ei tohiks disainisüsteem nende asju ootamatult rikkuda.

Niisiis, küsige endalt ...

Kas lapsendajad saavad üle minna väiksemale versioonile, olles kindlad, et nende kasutajaliides ei purune süsteemi visuaalsete muudatuste tõttu?

Semantiline versioonindus (SemVer) pakub selgeid kriteeriume muudatuste edastamiseks kogu väljalasete vahel, kasutades peamisi, väiksemaid ja paikade tähistusi. Kõik disainisüsteemid, millega kokku puutun, kasutavad SemVerit ja jälgivad muutusi oma paketi rakenduse programmeerimisliideses või API-s. See on JavaScripti rekvisiite ja HTML-i märgistust kodeerivatele arendajatele tuttav territoorium. Katkestage oma API ja teie järgmine versioon peab suurendama versiooni järgmise suurema versioonini, näiteks alates 1.4.0 kuni 2.0.0.

Kompositsioonilise visuaalse stiili liidese määramine väldib meid. Stiilimuutuste jälgimiseks on keeruline määratleda selgeid ja lihtsaid reegleid. Süsteemi loojad näevad vaeva, et sõnastada, mis või miks „Selle stiili muutmine rikub lapsendaja kasutajaliidese” versus „Selle stiili muutmine seda ei tee.” Vähesed süsteemimeeskonnad dokumenteerivad selliseid kriteeriume. Ma küsin: „Millised konkreetsed tüüpi visuaalsed muudatused käivitavad teie jaoks peamise versiooni?” Nende vastus: ¯ \ _ (ツ) _ / ¯.

Selles artiklis teen ettepaneku, et vähemalt värvi, tüpograafia ja kosmose õigustaksid kriteeriumid, mis kujutavad endast muutuste murdmist. Arvestada tuleb ka teiste omadustega. Kujundussüsteem saab neid kriteeriume määratleda, dokumenteerida ja edastada, nii et kasutuselevõtjad saaksid versiooniuuendusi vabastades enesekindlalt uuendada.

Katkev värv

Enamik süsteemimeeskondi tunneb end primaarse nupu taustvärvi häälestamisel turvaliselt. Võib-olla on nende motivatsioon parandada kontrasti tavaliselt valge teksti sildiga. "Tumedaks tee natuke," ütlevad nad. "Parandame nupule juurdepääsetava värvide kontrasti AA-st AAA-ni."

Põhinupu taustavärvi reguleerimine

Kindlasti ei tohiks adopteerivad meeskonnad alistada tavalise peamise nupu värvikomplekti. Süsteemi valiku alistamine katkestab ühenduse süsteemiga. Sel hetkel on lapsendaja omaette. Seetõttu on peamise nupu taustvärvi varju reguleerimine ohutu ega ole murranguline muudatus.

Värvide muutmine mujal võib aga adopteerijad ohtu sattuda. Mõelge järgmistele stsenaariumidele.

Näide: süsteemtekst kohandatud taustal

Kujutage ette, et süsteemimeeskond täpsustab interaktiivset sinist värvi kontrastsuse parandamiseks. V1.4.0 interaktiivne sinine oli juurdepääsetav valgel taustal, kuid süsi taustal ebaõnnestus.

Värvide kontrastsuse kontrollimine kontrasti-grid.eightshapes.com kaudu

Niisiis kohandas meeskond v1.5.0 jaoks interaktiivse sinise heledamaks, küllastunud tooniks, mis töötas nii valgel kui ka söel.

Kummitusnupu sildi teksti värvi kohandamine ettearvamatul taustal

Siiski oli lapsendaja kasutanud helehallil taustal Ghost-nuppu, sõltuvalt sellest värvist. Pärast süsteemi muutmist pole sildi teksti värvi kontrastsus juurdepääsetav. Teie süsteem rikkus nende toote.

Näide: süsteemitaustad kohandatud ülekattega tekstiga

Sarnaselt võite ette kujutada, et süsteem tumendab kaardikomponendi taustavärvi. Kaardi sisuala sisaldab "turvalist" sisu mahuti tsooni, kuhu adopteerijad sisestavad mis tahes sisu ja märgistused.

Kaardi taustavärvi reguleerimine, mis võimaldab sisaldada kohandatud sisu

Sinna, arvatavalt ohutusse tsooni, lisas adopteerija teisese teksti, mis oli küll mõõduka halliga, kuid läbis värvide kontrasti testi. Pärast süsteemi muutmist pole värvide kontrastsusele enam juurdepääsu. Teie süsteem rikkus nende toote.

Kujutage ette, et teie süsteemi väike versioon sisaldab neid muudatusi. Ühiselt öeldes, ütlesite? Kas teil pole uuendamisega riski, kas nad usaldavad? Ei! Teie süsteem rikkus nende toote!

Seetõttu hinnake muutunud värvide omadusi, et teha kindlaks, kas süsteem on muutunud, näiteks:

  • Teksti värv, mis võib ilmneda lapsendaja taustavärvi, pildi või muu tekstuuri kohal.
  • taustavärv, millele lapsendaja teksti värv on kaetud.
  • taustvärv, äärisvärv, teksti värv, kastivari või muu atribuut, mis on moodustatud teise komponendi serva või sisu kohal, kohal või all, et vähendada elementidevahelist kontrasti.

Ligipääsetavus tõstis neid näiteid. Esteetiline oht on ka selles, et heatahtlikud süsteemimuudatused võivad häirida tootedisainerite saavutatud värvikat harmoonia. Värvilisi interaktsioone on kasutajaliideses külluses, mida süsteemidisainer ei kontrolli ega näe.

Eemaldamine: alustage vestluse katkestamist värvikriteeriumidega. Riski on lihtsam edastada, see on objektiivselt mõõdetav ja seotud ligipääsetavusega, mis kireb kirgi. Relvastatud mõne kriteeriumiga, võite liikuda muude mureküsimuste juurde.

Tüpograafia murdmine (mähkimise teel)

Tüpograafia on mis tahes visuaalse stiili põhiosa. Võistkonnad tahavad seda lihtsalt õigesti mõista. Ja häälestamiseks on nii palju kettaid: fondiperekond, fondi mass, fondi suurus, teksti teisendamine, rea kõrgus, tähtede vahe ja palju muud.

Kui süsteem kohandab tüpograafiat, ei pruugi kõik kogemused puruneda. Raske sisuga kogemuste jaoks võib iga elemendi sisu olla ettearvamatu, erineva pikkusega ja mõeldud vaateakna laiuse muutuste mähkimiseks ja neile reageerimiseks.

Tihedamate liideste jaoks peab tüpograafia olema täpne. Disainerid jahvatavad tundideks täpsustavat tüpograafiat, paigutades sildid kompaktsetesse piirkondadesse. Süsteemi tüpograafia kohandamisel võivad nende elemendid ootamatult kattuda või kärpida.

Näide: mähkimiskaardid on kohutavad

Kujutage ette, et teie süsteem reguleerib vahekaardi labelfont-kaalu normaalsest paksuseni.

Pärast väiksemat versiooniuuendust keeratakse vahelehed reageerimata. Pole hea.

Vastuvõtja uuendab. Nende olemasolevad reageerimata sakid ületavad eraldatud ruumi, nii et nad mähivad. Kohutavalt! Teie süsteem rikkus nende toote.

Näide: tähtede vaheline kaos

Brändijuhised arenevad, saades uue rubriikide hierarhia ja stiili. Seega teie süsteem kohaneb, suurendades iga rubriigi tähtede vahekaugust.

Lapsendaja uuendab oma tiheda, ühelehelise radioloogiarakenduse, mis on tõlgitud 14 keelde, ja mis koosneb lugematutest juhtpaneelidest, millest igaüks on täis vormi elemente ja pealkirju. Neid täiendatakse ja kasutajaliides on pealkirjadega ettearvamatult kärbitud. Nad kutsuvad kokku kriisikoosoleku. Nad kutsuvad headuse huvides taustandmete insenere! Teie süsteem rikkus nende toote!

Süsteemi tüpograafia kohandamine võib olla ohtlik. Teile on see värskendav tüpograafiline areng, mida saab kogu raamatukogus vaevata kasutada. Neile hakkab tekst valesti käituma. Nad süüdistavad sind. Võib-olla leegitsevad nad teid kanalil # system-design Slack. Keegi ei vaja seda.

Eemaldamine: enne versiooni 1.0.0 töötage hoolikalt, et katsetada, viimistleda ja viimistleda kliendi mitmekesisusele sobivaid stiile. Kui 1.0.0 on möödunud, säilitage stabiilne alus ja kaaluge muutust ettevaatlikult. Kaaluge ohtlike vahetuste reserveerimist järgmiseks suuremaks vabastamiseks. Kuni selle ajani lisage järk-järgult sisalduvaid funktsioone, näiteks Pika vormi teksti komponent, et kujundada ainult artikli koopia.

Ruumi ja suuruse murdmine

Vähemalt näete värvi ja tüpograafiat. Ruum ja suurus? Neid on raskem määratleda kui praktiliselt korduvkasutatavaid, rääkimata muutuste rikkumise jälgimisest.

HTML-is, kui muudate komponendi kasti mudeli atribuute - polster, veeris, laius, kõrgus, kuva, kasti suurus, asukoht, vasak, parem, ülemine, alumine -, riskite mõjutada paigutuse kompositsiooni, mis korraldab selle komponendi teiste leheelementidega.

Näide 1: vertikaalse vahe eemaldamine

Teie süsteemimeeskond otsustab eemaldada vertikaalvahega rakendatud vormikontrollid veerise põhja kujul. See mõjutab , , , mikroskoopia ja muid elemente.

Algselt sisseehitatud vertikaalse vahega süsteem eemaldab veerised. Ja nii näevad vormid sujuvamad.

Lapsendaja oli sellele vahekaugusele tuginedes koostanud 38 erinevat vormi. Pärast süsteemi muutmist ei eralda kõik nende vormid enam vertikaalselt elemente. Teie süsteem rikkus nende toote.

Näide 2: Oletatava vahekauguse alusel kohandatud suurus

Pärast ulatuslikku arutelu disainerikogukonna üle lubab teie süsteem laiendada kaardi sisuploki polsterdust.

Kohandatud ikooni tööriistariba mähitakse pärast polsterduse muutmist. Ewww.

Lapsendaja oli kaardid korraldanud ja mõõtmeteks määranud vastavalt kliendi riistvaraseadetele. Nad lisasid alumisse ritta ka ainult ikoonidega tööriistariba. Pärast süsteemi muutmist mähivad ikoonid kahte rida. Teie süsteem rikkus nende toote.

Eemaldamine: kõigepealt vältige ruumipõhiseid reegleid (tavaliselt veeriseid) väljaspool komponendi piire. Teiseks tehke ruumilisi muudatusi väga, väga ettevaatlikult. Lapsendaja paigutuse halvustamine on kindel viis hõõrde tekitamiseks, usalduse vähendamiseks ja kogukonnas õigustatava halva suhtekorralduse saavutamiseks.

Suletud, mittemurdv ruumiline muutus

Mõni ruumiline muudatus ei mõjuta külgnevaid elemente ega lehe koostist. Näiteks sisemise polstri või virnastatud veerise pingutamine või laiendamine menüü üksuste vahel ei oleks murranguline muudatus, kuna need kohandused asuvad plokis, mille süsteem on täielikult määratlenud, ei sisalda muid kohandatavaid elemente ja on kihiline viisil mis avamise ja sulgemise korral lehekülje paigutust muidu ei mõjuta.

Mis veel võib visuaalset stiili rikkuda?

Üldiselt võiks visuaalse stiili muutusi määratleda kui muudatusi CSS-i omaduste piires, mille ulatust näitasid disainilahenduse sümboolika kollektsioonid müügialadel, Morningstaril, REI-l ja Avatud tabelil.

Milliseid muid omadusi saaksite jälgida lisaks ülalkirjeldatud värvile, tüpograafiale, ruumile ja suurusele? Komponentide jaoks, näiteks popovers, dialoogid, moodid ja tööriistaviisid, rakendatav z-indeks on paigutuse kolmandas, kihilises dimensioonis kompositsioonis keskne. läbipaistmatutele kihtidele (näiteks modaali all) laialdaselt kasutatav läbipaistmatus näib samuti tugev kandidaat. Isegi peened muudatused, nagu näiteks piiripõhi, avaldavad mõju.

Komponendi ääriste värvide reguleerimine muude komponentide läheduses
  • Teie süsteem muudab vertikaalse loendi viimase üksuse serva allosa läbipaistvaks. Lapsendaja paigutas selle loendi kenasti teise ploki kohale, tuginedes kontrasti loomiseks joonele. Pärast süsteemimuutust sulandub ploki päis loendi viimase üksuse sildiga viisil, mida pole ilmne eristada.
    Kui jah, rikkus teie süsteem nende toote.

Aga kuidas muuta kasti varju? Või piiride raadiuse peenhäälestamine? Kiiredisainerite ambivalentsus. Raske oleks veenda, et need muudatused rikuvad lapsendaja kogemusi.

Eemaldamine: vaadake üle CSS-i võimalike võimaluste suur kollektsioon ja arutage oma meeskonnaga kandidaatide atribuutide tagajärgi. Tööistung näitab viljakalt grupi sallivust lapsendajate kaitsmisel ja dokumenteerib, kui kaugele sa lähed.

Mis on visuaalne murranguline muutus?

Praegu mõtled: kas see on tõesti oluline? Kas me ei peaks oma süsteemi kasutama oma visuaalse keele kontrollimiseks? Kas lapsendajad lähevad tõesti hoolitsusele?

Insenerid võivad hoolida. Disainerid hoolitsevad lõplikult. Nad veedavad tunde, et täpsustada paigutusi, teha märkusi ja edastada detaile koostööd tegevatele loojatele. Seetõttu peaks kujundussüsteem kirjeldama, kuidas see muutub. Ja iga kord, kui see muutub, halveneb nende kujundus.

Vestlustes disainisüsteemi kolleegidega on tunded järgmised:

"Me teame, et sorta teame, mis on visuaalne murranguline muutus."
"Arutleme visuaalsete muutuste muutmise üle, kui seda soovitab ka kellegi instinkt."
"Olen nõus, et see on asi, me ei teeks seda rangelt ja see on oluline."

Morningstari kujundussüsteemi töös oleme dokumenteerinud, milliseid muudatusi peetakse olulisteks, väiksemateks ja paikapidavateks. Meie meeskond avaldab arvamust enesekindlalt kriitikavestlustes, kommenteerides tõmbetaotlusi ja aruteludes meeskondade vastuvõtmise ja täiendamise üle.

Meie valdkond kohandub versioonimisega, kuna see on meie praktikasse sügavalt haavatud. Teeme kõik endast oleneva, et oma lapsendajatega hästi suhelda ja neid kaitsta.

# 3. Versioon ← Eelmine | Järgmine → # 5. Sõltuvused