Vizualno lomljive promjene u dizajnerskim sustavima

Poštujemo API-je koda. Ali što je sa bojom, vrstom i prostorom?

Br. 4 od 6 iz serije Oslobađanje dizajnerskih sustava:
Izlazi | Kadenca | Verzije | Razbijanje | Ovisnosti | Postupak

Sustavi dizajna uspostavljaju osnovni vizualni stil od suštinske ovisnosti. Ovi izbori - boja, tipografija, prostor i ostalo - precizno su određeni i očekuje se da stabilno, predvidljivo promijene izdanje po izdanju. Kad se usvojitelj nadogradi, dizajnerski sustav ne bi smio iznenada razbiti svoje stvari.

Dakle, zapitajte se ...

Mogu li usvojitelji nadograditi na manje izdanje sigurni da se njihov interfejs neće slomiti zbog vizualnih promjena sustava?

Semantička inačica (SemVer) nudi jasne kriterije za komuniciranje promjena kroz izdanja pomoću glavnih, malih i zakrpa. Svaki dizajnerski sustav s kojim se susrećem koristi SemVer i nadzire promjene u programskom sučelju programa ili API-ja za njihov paket. Ovo je poznato područje za programere koji kodiraju JavaScript rekvizite i HTML oznaku. Prekidajte svoj API i vaša sljedeća verzija mora povećati verziju do sljedećeg velikog izdanja, poput 1.4.0 do 2.0.0.

Određivanje sučelja kompozicijskom vizualnom stilu nas izmiče. Tako je teško odrediti jasna, jednostavna pravila za praćenje promjena stila. Proizvođači sustava se trude artikulirati što ili zašto "Promjena ovog stila prekida korisničko sučelje usvojenika" nasuprot "Promjena tog stila ne znači." Malo je timova sustava koji dokumentiraju takve kriterije. Pitam "Koje vrste vizualnih promjena pokreću glavnu verziju za vas?" Njihov odgovor: ¯ \ _ (ツ) _ / ¯.

U ovom članku predlažem da barem kriteriji za boju, tipografiju i svemirske naloge koji predstavljaju prijelomnu promjenu. Postoje i druga svojstva koja treba uzeti u obzir. Sustav dizajna može te kriterije definirati, dokumentirati i prenijeti tako da usvojitelji mogu s povjerenjem nadograditi izdanje prema puštanju.

Razbijanje boje

Većina timova sustava osjeća se sigurno u podešavanju pozadinske boje primarnog gumba. Možda je njihova motivacija poboljšati kontrast u odnosu na obično bijelu naljepnicu teksta. „Neka malo potamni čaj“, kažu oni. "Poboljšat ćemo pristupni kontrast boja tipkama od AA do AAA ocjene."

Podešavanje boje pozadine primarnog gumba

Sigurno da timovi koji prihvataju ne bi trebali prevladati od standardnog niza boja u boji. Nadjačavanjem izbora sustava prekida se veza sa sustavom. U tom trenutku posvojitelj je sam. Stoga je podešavanje nijanse boje pozadine primarnog gumba sigurno i nije probojna promjena.

Međutim, mijenjanje boja drugdje može usvojiti posvojitelje. Razmotrite sljedeće scenarije.

Primjer: Tekst sustava na prilagođenim pozadinama

Zamislite tim sustava za precizno podešavanje interaktivne plave boje kako bi poboljšali kontrast boja. Interaktivno plava boja v1.4.0 bila je dostupna na bijeloj pozadini, ali nije uspjela na pozadini drvenog ugljena.

Provjera kontrasta u boji putem contra-grid.eightshapes.com

Dakle, za v1.5.0, tim je interaktivno-plavu prilagodio svijetlijem, zasićenijem tonu koji je djelovao i na bijeli i na drveni ugljen.

Prilagođavanje boje teksta naljepnice gumba duhova na nepredvidivim pozadinama

Međutim, posvojitelj je na svijetlo sivoj pozadini koristio gumb Ghost koji ovisi o toj boji. Nakon promjene sustava, kontrast boje teksta na naljepnici je nepristupačan. Vaš je sustav pokvario njihov proizvod.

Primjer: Pozadine sustava s prilagođenim prekrivenim tekstom

Slično tome, zamislite da sustav zamračuje pozadinsku boju komponente kartice. Područje sadržaja kartice sadrži "sigurnu" zonu spremnika sadržaja u koju usvojitelji ubacuju sve sadržaje i oznake koje žele.

Prilagođavanje boje pozadine kartice koja omogućava objedinjeni prilagođeni sadržaj

U toj pretpostavljenoj sigurnoj zoni posvojitelj je dodao sekundarni tekst koji je, iako suptilno umjereno sive boje, prošao test kontrasta boja. Nakon promjene sustava kontrast boje više nije dostupan. Vaš je sustav pokvario njihov proizvod.

Zamislite da je manje izdanje vašeg sustava uključivalo ta prilagođavanja. Nazad kompatibilni, rekli ste? Nema rizika u nadogradnji, vjerovali su? Nope! Vaš je sustav pokvario njihov proizvod!

Stoga procijenite svojstva promijenjenih boja da biste utvrdili je li se promijenio sustav, poput:

  • Boja teksta koja se može pojaviti iznad boje pozadine, slike ili druge teksture usvojitelja.
  • pozadinska boja na kojoj je prekrivena boja teksta usvojitelja.
  • boja pozadine, boja obruba, boja teksta, sjenka okvira ili drugo svojstvo sastavljeno pored, iznad ili ispod ruba ili sadržaja druge komponente kako bi se umanjio kontrast između elemenata.

Pristupačnost je pokrenula ove primjere. Postoji i estetski rizik jer bi dobronamjerne promjene sustava mogle poremetiti šareni sklad koji je postigao dizajner proizvoda. Interakcije boja obiluju korisničkim sučeljem koje dizajner sustava ne kontrolira ili nema vidljivost na njemu.

Takeaway: Počnite razbijati promjenu razgovora s kriterijima boja. Lakše je prenijeti rizik, objektivno je mjerljiv i vezan je za pristupačnost koja potiče strasti. Oružani s nekoliko kriterija možete prijeći na druge probleme.

Razbijanje tipografije (omotanjem)

Tipografija je temeljni vid svakog vizualnog stila. Timovi žele to ispravno dobiti. A tu je broj točaka za podešavanje: obitelj fonta, težina fonta, veličina fonta, transformacija teksta, visina crte, razmak između slova i još mnogo toga.

Ne doživljavaju svi rizici ako se sustav prilagodi tipografiji. Za iskustva koja su mučna sa sadržajem, sadržaj svakog elementa može biti nepredvidiv, različitih duljina i dizajniran je tako da se obavija i reagira na promjene u širini prikaza.

Za gušća sučelja tipografija mora biti precizna. Dizajneri satima usitnjavaju tipografiju, uređujući naljepnice kako bi stale u kompaktne prostore. Ako prilagodite tipografiju sustava, njihovi se elementi mogu namotati ili obrezati na neočekivane načine.

Primjer: Zamotavanje kartica je strašno

Zamislite da vaš sustav prilagođava težinu naljepnice na karticama od normalne do podebljane.

Nakon manje nadogradnje verzije, kartice s neodgovarajućim softverom će se završiti. Nije dobro.

Usvajanje nadogradnje. Njihove postojeće nereagirane kartice premašuju dodijeljeni prostor, pa se zamotaju. Mrtvački! Vaš je sustav pokvario njihov proizvod.

Primjer: Raspored slova s ​​razbijanjem slova

Smjernice za marke se razvijaju, rezultirajući novom hijerarhijom i stilom naslova. Stoga se vaš sustav prilagođava povećanjem razmaka slova svakog zaglavlja.

Usvojitelj nadograđuje svoju gustu aplikaciju za radiologiju s jednom stranicom koja je prevedena na 14 jezika, a sastoji se od bezbroj kontrolnih ploča, a svaka je podložna elementima oblika i naslovima. Oni nadograđuju, a korisničko sučelje obiluje naslovima nepredvidivo obrezanim. Oni sazivaju krizni sastanak. Pozivaju inženjere stranih podataka, za dobrobit! Vaš je sustav pokvario njihov proizvod!

Podešavanje tipografije sustava može biti opasno. Vama je, to osvježavajuća tipografska evolucija, bez napora raspoređena kroz knjižnicu. Tekst prema njima počinje loše ponašati. Oni vas krive. Možda vas plamte u # slack kanalu dizajna sustava. Nitko to ne treba.

Odlazak: Prije 1.0.0, marljivo radite na eksperimentiranju, pročišćavanju i dovršavanju tipova stilova koji odgovaraju kupčevoj raznolikosti. Jednom kada prođe 1.0.0, održavajte stabilnu bazu i pažljivo razmotrite promjene. Razmislite o rezerviranju opasnih pomaka za sljedeće veliko izdanje. Do tada, postupno dodajte sadržane značajke, poput komponente dugog oblika teksta za oblikovanje samo kopije članka.

Razbijanje prostora i veličine

Bar možete vidjeti boju i tipografiju. Prostor i veličina? Teže ih je definirati kao konkretno ponovljive za upotrebu, a kamoli pratiti za probijanje promjena.

U HTML-u, kad promijenite svojstva modela okvira okvira - padding, margina, širina, visina, prikaz, veličina okvira, položaj, lijevo, desno, vrh, dno - riskirate utjecati na sastav izgleda koji rasporedi komponentu s drugim elementima stranice.

Primjer 1: Uklanjanje okomitog razmaka

Vaš sistem sustava odlučio je ukloniti vertikalne razmake primijenjenih kontrola oblika u obliku dna margine. To utječe na ,