Vizualinis dizaino sistemų pasikeitimas

Mes gerbiame kodo API. O kaip spalva, tipas ir erdvė?

4 iš 6 serijos, išleidžiančios dizaino sistemas: 4:
Rezultatai | Kadencija | Versijos | Laužymas | Priklausomybės | Procesas

Dizaino sistemos sukuria pagrindinį vaizdinį stilių, kuris yra esminė priklausomybė. Šie pasirinkimai - spalva, tipografija, erdvė ir dar daugiau - yra tiksliai apibrėžti ir tikimasi, kad jie stabiliai, nuspėjamai pakeis išleidimą išleidžiant. Kai pritaikytojas atnaujina, projektavimo sistema neturėtų netikėtai sugadinti jų.

Taigi, paklauskite savęs ...

Ar įvaikintojai gali naujovinti į nedidelę versiją įsitikinę, kad jų vartotojo sąsaja nenutrūks dėl sistemos vizualinių pakeitimų?

Semantinis versijų kūrimas (SemVer) siūlo aiškius kriterijus, leidžiančius pranešti apie pokyčius įvairiose versijose, naudojant pagrindinius, smulkius ir pataisų pavadinimus. Kiekvienoje projektavimo sistemoje, su kuria susiduriu, naudojamas „SemVer“ ir stebimas pakeitimas jų paketo programų programavimo sąsajoje arba API. Tai pažįstama kūrėjų, koduojančių „JavaScript“ rekvizitus ir HTML žymėjimą, teritorija. Sulaužykite savo API ir kita jūsų versija turi padidinti versiją iki kitos pagrindinės versijos, pvz., Nuo 1.4.0 iki 2.0.0.

Nurodžius sąsają su kompoziciniu vaizdiniu stiliumi, išvengiama. Labai sunku apibrėžti aiškias, paprastas stiliaus pokyčių stebėjimo taisykles. Sistemos kūrėjai stengiasi išdėstyti, kas ar kodėl „Pakeitus šį stilių sutrinka įvaikio vartotojo sąsaja“, palyginti su „Pakeitus to stiliaus nėra“. Nedaug sistemos komandų dokumentuoja tokius kriterijus. Aš klausiu: „Kokie konkretūs regėjimo pokyčių tipai sukelia jums pagrindinę versiją?“ Jų atsakymas: ¯ \ _ (ツ) _ / ¯.

Šiame straipsnyje siūlau bent jau spalvų, tipografijos ir erdvės kriterijus, kurie atspindi pokyčius. Yra ir kitų savybių, į kurias reikia atsižvelgti. Projektavimo sistema gali apibrėžti, dokumentuoti ir perduoti šiuos kriterijus, kad priėmėjai galėtų patobulinti išleidimą išleisdami užtikrintai.

Laužanti spalva

Dauguma sistemos komandų jaučiasi saugiai derindami pagrindinio mygtuko fono spalvą. Galbūt jų motyvacija yra pagerinti kontrastą paprastai balto teksto etiketėje. „Patamsinkime arbatą šiek tiek“, - sako jie. „Patobulinsime mygtukų prieinamą spalvų kontrastą nuo AA iki AAA.“

Pagrindinio mygtuko fono spalvos reguliavimas

Be abejo, įvaikinančios komandos neturėtų viršyti standartinio pagrindinio mygtuko spalvų rinkinio. Svarbiausias sistemos pasirinkimas panaikina ryšį su sistema. Tuo metu įvaikiai yra vieni. Todėl saugu koreguoti pagrindinio mygtuko fono spalvą ir tai nėra žymus pokytis.

Tačiau pakeitus spalvas įvaikintojams gali kilti pavojus. Apsvarstykite šiuos scenarijus.

Pavyzdys: Sistemos tekstas pasirinktiniuose fonuose

Įsivaizduokite, kad sistemos komanda suderina interaktyvią mėlyną spalvą, kad pagerintų spalvų kontrastą. Interaktyvi mėlyna versija v1.4.0 buvo prieinama baltame fone, bet nepavyko ant medžio anglies fono.

Spalvų kontrasto tikrinimas per kontrastą-grid.eightshapes.com

Taigi, kad būtų naudojama v1.5.0, komanda interaktyvią mėlyną spalvą pakoregavo į lengvesnį, labiau prisotintą toną, kuris veikė ir ant baltos, ir ant medžio anglies.

„Vaiduoklio mygtuko“ etiketės teksto spalvos koregavimas nenumatytuose fonuose

Tačiau įvaikininkas naudojosi „Ghost“ mygtuku, priklausančiu nuo šios spalvos, šviesiai pilkame fone. Pakeitus sistemą, etiketės teksto spalvų kontrastas yra neprieinamas. Jūsų sistema sugadino jų produktą.

Pavyzdys: Sistemos fonai su tinkintu užkloju

Panašiai įsivaizduokite, kad sistema patamsina kortelės komponento foninę spalvą. Kortelės turinio srityje yra „saugaus“ turinio talpyklos zona, kurioje priėmėjai įterpia bet kokį turinį ir žymėjimą.

Koreguojama kortelės fono spalva, leidžianti naudoti pasirinktinį turinį

Toje tariamai saugioje zonoje įvaikintojas pridėjo antrinį tekstą, kuris, būdamas subtiliai pilkos spalvos, išlaikė spalvų kontrasto testą. Pakeitus sistemą, spalvų kontrastas nebepasiekiamas. Jūsų sistema sugadino jų produktą.

Įsivaizduokite, kad šie pakeitimai yra nedideli jūsų sistemos leidime. Tu sakei, kad suderini atgal? Ar nerizikuojate atnaujinti, jie pasitiki? Ne! Jūsų sistema sugadino jų produktą!

Todėl įvertinkite pasikeitusių spalvų savybes, kad nustatytumėte, ar pasikeitė sistema, pvz .:

  • Teksto spalva, kuri gali pasirodyti virš pritaikytojo fono spalvos, vaizdo ar kitos tekstūros.
  • fono spalva, ant kurios perdengta teksto spalva.
  • fono spalva, kraštinės spalva, teksto spalva, langelio šešėlis ar kita ypatybė, sudaryta šalia, virš ar žemiau kito komponento krašto ar turinio, kad sumažėtų kontrastas tarp elementų.

Prieinamumas paskatino šiuos pavyzdžius. Estetinė rizika taip pat yra ta, kad gerai apgalvoti sistemos pakeitimai gali sutrikdyti spalvingą harmoniją, kurią pasiekia gaminio dizaineris. Spalvų sąveika gausu visoje vartotojo sąsajoje, kurios sistemos dizaineris nekontroliuoja ar nemato.

Takeaway: pradėkite keisti pokalbį pagal spalvų kriterijus. Paprasčiau perteikti riziką, jis yra objektyviai išmatuojamas ir yra susietas su prieinamumu, kuris žadina aistras. Apsiginklavę keliais kriterijais, galite pereiti prie kitų rūpesčių.

„Breaking“ tipografija (apvyniojant)

Tipografija yra esminis bet kokio vaizdo stiliaus aspektas. Komandos nori, kad tai būtų teisinga. Derinti reikia tiek daug ratukų: šriftų šeima, šrifto svoris, šrifto dydis, teksto keitimas, eilutės aukštis, tarpai tarp raidžių ir dar daugiau.

Ne visi išgyvenimai rizikuoja sulaužyti, jei sistema pakoreguos tipografiją. Dėl turinio reikalaujančio įspūdžio kiekvieno elemento turinys gali būti nenuspėjamas, įvairaus ilgio ir sukurtas apvynioti ir reaguoti į peržiūros srities plotio pokyčius.

Tankių sąsajų tipografija turi būti tiksli. Dizaineriai valandų valandas šlifuoja tikslią tipografiją, išdėstydami etiketes, kad jos tilptų kompaktiškose vietose. Jei pakoreguosite sistemos tipografiją, jų elementai gali netikėtai suvynioti arba apkarpyti.

Pavyzdys: apvyniojantys skirtukai yra baisūs

Įsivaizduokite, kad jūsų sistema sureguliuoja skirtuką nuo normos iki paryškinto.

Po nedidelio versijos atnaujinimo nereaguojantys skirtukai įvyniojami. Negerai.

Įvaikintojas atnaujina. Jų esami nereaguojantys skirtukai viršija paskirtą vietą, todėl jie įvynioja. Baisiai! Jūsų sistema sugadino jų produktą.

Pavyzdys: raidžių išdėstymo chaosas

Prekės ženklo gairės vystosi, todėl atsiranda nauja antraštės hierarchija ir stilius. Taigi jūsų sistema prisitaiko padidindama kiekvienos antraštės raidžių tarpus.

Įvaikintojas atnaujina savo tankią vieno puslapio radiologijos programą, išverstą į 14 kalbų, susidedančią iš daugybės valdymo pultų, kurių kiekviena užpildo formos elementus ir antraštes. Jie atnaujinami, o vartotojo sąsaja yra praplatinama, kai antraštės nenuspėjamai apkarpomos. Jie vadina susitikimą krizės metu. Dėl gerumo jie kviečia naujausius duomenų inžinierius! Jūsų sistema sugadino jų produktą!

Pakoreguoti sistemos tipografiją gali būti pavojinga. Jums tai yra gaivi tipografinė evoliucija, lengvai pritaikyta bibliotekoje. Jiems tekstas pradeda netinkamai elgtis. Jie kaltina tave. Galbūt jie liepsnoja # sistemos dizaino „Slack“ kanale. Niekam to nereikia.

Pasirinkimas: iki 1.0.0 versijos, kruopščiai eksperimentuokite, patobulinkite ir galutinai pritaikykite kliento įvairovei tinkančius stiliaus stilius. Kai 1.0.0 praeis, išlaikykite stabilią bazę ir atsargiai apsvarstykite pakeitimą. Apsvarstykite galimybę atidėti pavojingas pamainas kitai svarbiajai laidai. Iki tol palaipsniui pridėkite turimų funkcijų, tokių kaip ilgos formos teksto komponentas, skirtas tik straipsnio kopijai formuoti.

Laužoma erdvė ir dydis

Bent jau galite pamatyti spalvą ir tipografiją. Erdvė ir dydis? Juos sunkiau apibrėžti kaip konkrečiai pakartotinai naudojamus, jau nekalbant apie pokyčių stebėjimą.

HTML rinkinyje pakeisdami komponento dėžutės modelio ypatybes - polsterį, paraštę, plotį, aukštį, ekraną, langelio dydį, padėtį, kairę, dešinę, viršuje, apačioje - rizikuojate paveikti maketo kompoziciją, kuri tą komponentą derina su kitais puslapio elementais.

1 pavyzdys: Vertikalių tarpų pašalinimas

Jūsų sistemos komanda nusprendžia pašalinti vertikalių tarpelių pritaikytus formos valdiklius kaip paraštės apačios formą. Tai daro įtaką ,