Vizualne prelomne spremembe v sistemih oblikovanja

Spoštujemo API-je kode. Kaj pa barva, vrsta in prostor?

# 4 od 6 v seriji Sprostitve sistemov oblikovanja:
Rezultati | Kadenca | Različice | Razbijanje | Odvisnosti | Proces

Oblikovalni sistemi vzpostavijo osnovni vizualni slog, ki je bistvena odvisnost. Te izbire - barva, tipografija, vesolje in drugo - so natančno določene in od njih se pričakuje, da bodo stabilno in predvidljivo spremenile izdajo. Ko posvojitelj nadgradi, sistem oblikovanja ne sme nepričakovano razbiti svojih stvari.

Torej, vprašajte se ...

Ali lahko posvojitelji nadgradijo do manjše izdaje, prepričani, da se njihov uporabniški vmesnik ne bo zlomil zaradi vizualnih sprememb sistema?

Različica semantične različice (SemVer) ponuja jasna merila za sporočanje sprememb med različicami z uporabo večjih, manjših in oblikovnih oznak. Vsak oblikovalski sistem, na katerega naletim, uporablja SemVer in spremlja spremembe v programskem vmesniku ali API-ju programa. To je znano ozemlje za razvijalce, ki kodirajo JavaScript rekvizite in oznako HTML. Prekinite svoj API in vaša naslednja različica mora različico povečati do naslednje večje izdaje, na primer od 1.4.0 do 2.0.0.

Določitev vmesnika kompozicijskega vizualnega sloga nas izmika. Tako težko je določiti jasna in preprosta pravila za spremljanje sprememb v slogu. Proizvajalci sistemov se trudijo, da bi artikulirali, kaj ali zakaj "Sprememba tega sloga prekine uporabniški vmesnik posvojitelja" v primerjavi s "Sprememba tega sloga ne." Le malo sistemskih skupin dokumentira takšna merila. Vprašam "Katere posebne vrste vizualnih sprememb za vas sprožijo glavno različico?" Njihov odgovor: ¯ \ _ (ツ) _ / ¯.

V tem članku predlagam, da vsaj merila za barvo, tipografijo in vesoljski nalog zahtevajo spremembo. Obstajajo tudi druge lastnosti, ki jih je treba upoštevati. Sistem oblikovanja lahko ta merila opredeli, dokumentira in sporoči, tako da lahko posvojitelji z zaupanjem nadgradijo izdajo po izdaji.

Prelomna barva

Večina sistemskih skupin se počuti varno pri nastavljanju barve ozadja primarnega gumba. Mogoče je njihova motivacija izboljšanje kontrasta glede na običajno belo besedilo. "Daj malce zatemnite," pravijo "Izboljšali bomo dostopni barvni kontrast gumba od ocene AA do AAA."

Prilagajanje barve ozadja primarnega gumba

Zagotovo ekipe, ki sprejemajo, ne bi smele prevladati nad barvnim naborom osnovnega gumba. Če preglasite izbiro sistema, prekine povezavo s sistemom. V tem trenutku je posvojitelj sam. Zato je prilagajanje odtenka barve ozadja primarnega gumba varno in ni prelomna sprememba.

Vendar pa lahko spreminjanje barv drugod ogrozi posvojitelje. Upoštevajte naslednje scenarije.

Primer: sistemsko besedilo na ozadjih po meri

Predstavljajte si sistemski tim za natančno nastavitev interaktivne modre barve za izboljšanje barvnega kontrasta. Interaktivno-modra barva v1.4.0 je bila dostopna na belem ozadju, na ogljenem ozadju pa ni uspela.

Preverjanje barvnega kontrasta s pomočjo Contrast-grid.eightshapes.com

Torej, za različico v1.5.0 je ekipa interaktivno-modro prilagodila svetlejšemu, bolj nasičenemu tonu, ki deluje tako na beli kot na oglje.

Prilagajanje barve besedila nalepk gumba na nepredvidljivih ozadjih

Toda posvojitelj je na svetlo sivi podlagi uporabil gumb Ghost, ki je odvisen od te barve. Po spremembi sistema je kontrast barv besedila na oznaki nedostopen. Vaš sistem je pokvaril njihov izdelek.

Primer: Ozadja sistema s tekstom po meri

Podobno si predstavljajte, da sistem zatemni barvno barvo komponente kartice. Vsebinsko območje kartice vsebuje varno območje vsebnika, v katerega posvojitelji vstavljajo želeno vsebino in oznako.

Prilagajanje barve ozadja kartice, ki omogoča vsebino po meri

V tem domnevno varnem območju je posvojitelj dodal sekundarno besedilo, ki je, čeprav subtilno zmerno sivo, opravilo test barvnega kontrasta. Po spremembi sistema barvni kontrast ni več dostopen. Vaš sistem je pokvaril njihov izdelek.

Predstavljajte si, da so te prilagoditve vključevale manjšo izdajo vašega sistema. Nazaj združljiv, ste rekli? Pri nadgradnji ni tveganja, so zaupali? Ne! Vaš sistem je zlomil njihov izdelek!

Zato ocenite lastnosti spremenjenih barv, da ugotovite, ali se je sistem spremenil, na primer:

  • Barva besedila, ki se lahko pojavi nad posvojiteljsko barvo ozadja, slike ali drugo teksturo.
  • barva ozadja, na kateri je prevzeta barva besedila posvojitelja.
  • barva ozadja, barva obrobe, barva besedila, polje-senca ali druga lastnost, sestavljena poleg, nad ali pod robom ali vsebino druge komponente, da se zmanjša kontrast med elementi.

Ti primeri so bili dostopni. Obstaja tudi estetsko tveganje, saj lahko dobronamerne spremembe sistema porušijo barvno harmonijo, ki jo doseže oblikovalec izdelkov. Interakcije barv imajo v celotnem uporabniškem vmesniku dovolj, da sistemski oblikovalec ne nadzoruje ali ima vidnosti.

Takeaway: Začnite kršiti pogovor o spremembi z barvnimi merili. Lažje je prenašati tveganje, objektivno je izmerljivo in je povezano z dostopnostjo, ki vzbuja strasti. Oboroženi z nekaj merili, lahko premaknete na druge skrbi.

Razbijanje tipografije (z ovijanjem)

Tipografija je temeljni vidik katerega koli vizualnega sloga. Ekipe hočejo dobiti prav. In na voljo je toliko številk za izbiro: družina pisav, teža pisave, velikost pisave, preoblikovanje besedila, višina črte, razmik med črkami in še več.

Niso vsi deležni tveganj, da se sistem prilagodi tipografiji. Za vsebinske izkušnje je lahko vsebina vsakega elementa nepredvidljiva, različnih dolžin in zasnovana tako, da zavije in se odzove na spremembe v širini vidnega polja.

Za gostejše vmesnike mora biti tipografija natančna. Oblikovalci več ur meljejo tipografijo in urejajo nalepke, da se prilegajo kompaktnim območjem. Če prilagodite tipografijo sistema, se lahko njihovi elementi nepredvidljivo ovijejo ali obrežejo.

Primer: Zaviranje zavihkov je grozno

Predstavljajte si, da vaš sistem prilagodi težo oznake pisava od običajne do krepke.

Po manjši nadgradnji različice se odzovejo neodzivni zavihki. Slabo.

Posvojitelj nadgradi. Njihovi obstoječi neodzivni zavihki presegajo dodeljeni prostor, zato se ovijejo. Grozno! Vaš sistem je pokvaril njihov izdelek.

Primer: razmik med črkami

Smernice blagovnih znamk se razvijajo, kar prinaša novo hierarhijo in slog naslova. Tako se vaš sistem prilagodi s povečanjem razmika med črkami vsakega naslova.

Posvojitelj nadgradi svojo gosto aplikacijo za radiologijo na eni strani, ki je prevedena v 14 jezikov, sestavljeno iz neštetih nadzornih plošč, vsaka plošča pa je sestavljena iz elementov obrazca in naslovov. Nadgradijo in uporabniški vmesnik je prepreden z nepredvidljivo obrezanimi naslovi. Skličejo krizni sestanek. Povabijo inženirje podatkov za nazaj, za dobroto! Vaš sistem je zlomil njihov izdelek!

Prilagoditev tipografije sistema je lahko nevarna. Za vas je osvežujoča tipografska evolucija brez napora, ki jo lahko brez težav razporedite po knjižnici. Z njimi se besedilo začne slabo obnašati. Krivijo te. Mogoče vas plamtijo v kanalu # Slack-design. Nihče tega ne potrebuje.

Odvzem: Pred 1.0.0 skrbno delajte, da eksperimentirate, izpopolnite in dokončate vrste stilov, ki ustrezajo raznolikosti stranke. Ko 1.0.0 preide, ohranite stabilno bazo in preučite spremembe. Razmislite o rezervah nevarnih premikov za naslednjo večjo izdajo. Do takrat postopoma dodajte vsebovane funkcije, kot je komponenta Long Form Text za oblikovanje samo kopije članka.

Razbijanje prostora in velikosti

Vsaj vidite barvo in tipografijo. Prostor in velikost? Te je težje opredeliti kot konkretno uporabne, kaj šele spremljanje za prebijanje sprememb.

V HTML-ju, ko spremenite lastnosti modela komponente polja - oblazinjenje, rob, širina, višina, zaslon, velikost polja, položaj, levo, desno, zgoraj, spodaj - tvegate, da boste vplivali na sestavo postavitve, ki bo komponento uredila z drugimi elementi strani.

Primer 1: Odstranjevanje navpičnega razmika

Vaša sistemska ekipa se odloči za odstranitev navpičnih razmikov uporabljenih kontrol obrazcev v obliki roba spodaj. To vpliva na ,