Kaip ir kodėl aš sukūriau spalvų variantą ir pritaikymo neįgaliesiems įrankį

Kaip kūrėjas, spalvų pasirinkimas mano dizainui visada buvo viena iš sunkesnių užduočių. Aš norėčiau padėti naudoti tokius įrankius kaip „Coolors“, „SASS Color Generator“ ir šį spalvų kontrasto tikrintuvą.

Mano procesas atrodė maždaug taip:

  1. Sugeneruokite paletę naudodami „Coolors“
  2. Pasirinkite spalvų variantus naudodami „SASS Color Generator“
  3. Derinkite variantus kartu su fono / pirmojo plano deriniais.
  4. Spalvų kontrasto tikrintuvu patikrinkite, ar poros yra prieinamos.
  5. Pridėkite pasirinktas spalvas prie pasirinkto dizaino įrankio (Figma).
  6. Patobulinkite spalvas ir pakartokite nuo 2 žingsnio.

Taigi, kokia buvo problema?

Mano senas procesas apėmė daugybę pirmyn ir atgal skirtingų programų. Negalėjau pakoreguoti savo spalvų ir realiuoju laiku pamatyti įtakos pasiekiamumui. Vietoj to, aš turėjau nukopijuoti / įklijuoti HEX kodus iš vienos programos į kitą. Tada, kai buvau pasirengęs pradėti kūrimą, turėjau rankiniu būdu sukurti kintamuosius SASS / CSS ir vėl nukopijuoti reikšmes.

O sprendimas?

Sukurkite įrankį, kuriame galėčiau padaryti (beveik) viską vienoje vietoje. Mano tikslas buvo pereiti prie tokio proceso:

  1. Sugeneruokite paletę naudodami „Coolors“
  2. Pasirinkite variantus, poruokite spalvas ir pataisykite naudodami vieną programą.
  3. Gautas spalvas pridėkite prie pasirinkto mano dizaino įrankio.

Taip pat norėjau, kad programa galėtų eksportuoti mano spalvas į kodą, kad turėčiau gerą atskaitos tašką kūrimui.

Pradinis koncepcijos įrodymas

Norėjau kuo greičiau kažką paruošti ir paleisti, kad galėčiau pradėti tai išbandyti. Tuo tikslu ėmiausi kurti prototipą.

Naudojimo atvejai

Pirmasis žingsnis sudarant prototipą buvo apibrėžti naudojimo atvejus, kurie jį paskatintų.

  1. Kaip vartotojas noriu sugeneruoti savo pagrindinių spalvų variantus.

Norėjau, kad galėčiau atidaryti programą, pridėti pagrindines spalvas, pasirinkti variantus ir tada vėl juos vėl eksportuoti į savo dizaino įrankį. Paprasta?

2. Kaip vartotojas noriu patikrinti, ar prieinama fono / priekinio plano spalvų pora.

Iš įvestų pagrindinių spalvų ar jų variantų norėjau patikrinti, ar suporavus abi spalvas galima pasiekti.

3. Kaip vartotojas turėčiau įžvelgti pagrindinės spalvos pakeitimo poveikį prieinamumui.

Norėjau, kad galėčiau realiuoju laiku gauti atsiliepimų apie spalvų poras, kurias išsirinkau kiekvieną kartą, kai patobulinau savo pagrindines spalvas.

(Labai grubi) darbinė versija

Apibrėžęs naudojimo atvejus, aš pradėjau kurti prototipą. Aš sugalvojau spalvų paletę, suprojektavau ribotą komponentų rinkinį ir galiausiai priėjau sprendimą, kuriame buvo trys „režimai“ ar puslapiai, o vartotojas, norėdamas atlikti savo užduotis, turėjo persijungti tarp jų.

Užuot daugiau aprašę, pažvelkime.

Kaip matote iš aukščiau esančio paveikslėlio, prototipas pasiekė viską, ko norėjau, remiantis pirminiais naudojimo atvejais ... Rūšiuoti.

Spustelėkite čia, jei norite išbandyti prototipą patys dėl „Netlify“ diegimo peržiūros magijos.

Gerai ir blogai originalaus dizaino

Niekada neketinau, kad pirmasis prototipas būtų kažkas kitas, išskyrus laiptelį, ir jūs patys galite įsitikinti, kad jis buvo gana grubus ir ydingas.

Kitą versiją pradėjau nuo to, kas patiko prototipe.

Varianto režimas

Buvau visiškai patenkinta, kaip pasirodė prototipo dalį generuojantis variantas. Buvo gana paprasta pasirinkti spalvą ir gauti savo variantų sąrašą. Be to, metodas su skirtukais buvo gana geras pridedant kelias pagrindines spalvas.

Galimybė pamatyti pasiekiamumo pokyčius pakeitus spalvą

Kaip matote aukščiau pateiktoje trumpoje demonstracinėje versijoje, nereikėjo kopijuoti / įklijuoti HEX kodų tarp programų. Dabar galėčiau pakeisti vieną iš savo spalvų ir pamatyti, kaip tai tikrai greitai paveikė spalvų prieinamumą.

Tada pradėjau rinktis dalykus, kurie man nepatiko ir kuriuos reikėjo patobulinti .

Sąveika nebuvo akivaizdi

Atsižvelgiant į atvykimą į pagrindinį puslapį, nebuvo iš karto akivaizdu, kaip jūs renkatės variantus ir tikrinate, ar nėra prieinamumo. Tikriausiai galėtumėte išsiaiškinti, kad galų gale turite spustelėti plyteles, bet tai buvo tikrai nepatogus.

Režimai buvo painūs

Pradiniuose projektuose poras galite pridėti tik iš paletės rodinio, o variantus galite pridėti / pašalinti tik iš variantų rodinio. Viskas reikalavo daug persijungti iš vieno ekrano į kitą ir man pasidarė apmaudu dėl to, kiek daug darbo man padarė programa. Tai veda mane prie kito klausimo.

Reikėjo per daug spustelėti

Norėdami pridėti variantą, turite spustelėti. Tada turite spustelėti, kad pereitumėte į paletės rodinį. Tada turite spustelėti kelis kartus, kad sukurtumėte porą. Tada turite dar spustelėti, kad pamatytumėte ką tik pridėtą porą. Kaip jau minėjau aukščiau, visa tai buvo gana sudėtinga ir tai tikriausiai buvo blogiausia prototipo dalis ir tai, ką žinojau, kad man reikia pakeisti.

Ekrane iškart nebuvo matoma pakankamai informacijos

Kuo daugiau juo naudojausi, tuo labiau man nepatiko sukurta „mode“ koncepcija. Manau, kad mane paveikė originalus procesas, kuris įkvėpė programą, ir ekranus kūriau silosuose, o ne vieningos patirties. Panaudojęs prototipą nusprendžiau, kad reikia pereiti nuo „režimų“ koncepcijos prie to, ką idealiu atveju būtų galima padaryti viename puslapyje.

Antras bandymas

Aš išmokau pamokas, kurias išmokau iš prototipo, ir ėmiausi kurti geresnę programos versiją.

Siekdamas sumažinti reikalingų sąveikų skaičių, sumažinti sąveikų dviprasmiškumą ir padidinti iš karto vartotojui prieinamos informacijos kiekį , nusprendžiau pereiti prie „drag and drop“ vartotojo sąsajos, kur vartotojas galės vilkti plytelės aplink, kad būtų galima pridėti prie jų paletės arba sukurti prieinamumo patikrinimus.

Tempimo tikslas visada bus rodomas ir taip išvengsite poreikio persijungti iš vieno ekrano į kitą.

Pažvelkime į tai, ką aš sugalvojau.

Su dabartine programos versija galite susipažinti čia.

Tolesni žingsniai

Taikomoji programa yra dar tik pradinėje stadijoje ir, nors antroji versija yra daug artimesnė mano turimai idėjai, vis dar yra patobulinimų.

Importuoti iš kodo

Taip pat eksportuodamas paletę planuoju pridėti galimybę skaityti pradines pagrindines spalvas iš kodo, kuriame yra kintamieji (pradedant SASS ir CSS kintamaisiais)

Eksportuoti į daugiau formatų

Šiuo metu galite eksportuoti tik SASS. Ateityje planuoju pridėti CSS kintamųjų ir kitų formatų palaikymą.

Integruoti su projektavimo įrankiais

Eksportuoti į kodą yra puiku, bet būtų dar geriau, jei galėčiau eksportuoti paletę ir importuoti ją kaip sluoksnį arba bendrą stilių dizaino įrankyje, pvz., „Figma“ ar „Sketch“.

Patikslinkite vartotojo sąsają

Pripažinkime, kad tai nėra geriausiai atrodanti programa pasaulyje. Aš planuoju patobulinti vartotojo sąsajos komponentus, kad galėčiau vizualiai patobulinti programą.

Atsiliepimai ir pranešimai apie klaidas

Šis kalba pats už save. Galiu patobulinti programą tik prisidedant tiems, kurie ją naudoja. Norėdami tai padaryti, ateityje planuoju pridėti atsiliepimų formą.

Atsiliepimas

Kalbėdamas apie atsiliepimus ... Parašiau šį straipsnį dėl dviejų priežasčių. Pirmoji pažinau jus per procesą, kurio metu tikėjausi, kad iš to galėsite pasimokyti.

Antroji priežastis yra ta, kad norėjau pristatyti įrankį kūrimo ir dizaino bendruomenei, nes manau, kad tai gali būti naudinga daugeliui žmonių, taip pat surinkti atsiliepimus apie ją dabartinėje būsenoje.

Taigi, jei turite minčių apie dizainą, funkcionalumą, procesą, kurį patyriau kurdamas įrankį, ar dar ką nors, norėčiau tai išgirsti!

Nuorodos

Prototipas

Dabartinė versija

Komponentų biblioteka