Fejlesztőként mindig a színek megválasztása volt a legnehezebb feladatok között. Segíteni szoktam olyan eszközöket használni, mint a Coolors, a SASS Color Generator és ez a színkontraszt-ellenőrző.

A folyamatom ilyesminek nézett ki:

1. Generáljon palettát a Coolors segítségével
2. Válasszon változatokat minden színhez a SASS Color Generator segítségével
3. Párosítsa a változatokat háttér / előtér kombinációkká.
4. A színkontraszt-ellenőrző segítségével ellenőrizze, hogy a párok hozzáférhetők-e.
5. Adja hozzá a választott színeket a választott tervezőeszközömhöz (Figma).
6. Csípje meg a színeket, és ismételje meg a 2. lépéstől.

Szóval mi volt a probléma?

Régi folyamatom rengeteg oda-vissza járást jelentett a különböző alkalmazások között. Nem tudtam megváltoztatni a színeimet, és nem láttam valós időben az akadálymentességre gyakorolt ​​hatást. Ehelyett a HEX kódokat kellett másolnom / beillesztenem az egyik alkalmazásból a másikba. Aztán amikor készen álltam a fejlesztés megkezdésére, manuálisan kellett létrehoznom a változókat a SASS / CSS-ben, és újra átmásolni az értékeket.

És a megoldás?

Hozzon létre egy eszközt, ahol (szinte) mindent megtehetek egy helyen. Célom egy ilyen folyamat felé haladni:

1. Generáljon palettát a Coolors segítségével
2. Válasszon változatokat, párosítsa a színeket, és végezzen módosításokat egyetlen alkalmazás segítségével.
3. Adja hozzá a kapott színeket a választott tervezőeszközömhöz.

Azt is szerettem volna, hogy az alkalmazás képes legyen exportálni a színeimet kódokba, így jó kiindulópontom lesz a fejlődéshez.

A koncepció kezdeti bizonyítéka

A lehető leggyorsabban szerettem volna valamit üzembe helyezni, hogy elkezdhessem tesztelni. Ennek érdekében hozzáláttam egy prototípus elkészítéséhez.

Használjon tokokat

A prototípus összeállításának első lépése az volt, hogy meghatározza azokat a felhasználási eseteket, amelyek hajtják.

1. Felhasználóként az alapszíneimhez szeretnék változatokat generálni.

Azt akartam, hogy megnyithassam az alkalmazást, hozzáadhassam az alapszíneimet, kiválaszthassam a variánsokat, majd újra exportálhassam őket a tervezőeszközömbe. Egyszerű?

2. Felhasználóként szeretném ellenőrizni, hogy elérhető-e egy háttér / előtér színpár.

A beírt alapszínekből vagy azok variánsaiból azt akartam, hogy ellenőrizhessem, elérhető-e két szín összekapcsolva.

3. Felhasználóként látnom kell az alapszín megváltoztatásának a hozzáférhetőségre gyakorolt ​​hatását.

Szerettem volna tudni valós idejű visszajelzést kapni azokról a színpárokról, amelyeket minden egyes alkalommal kiválasztottam, amikor az alapszíneimhez csíptem.

(Nagyon durva) működő változat

A meghatározott felhasználási esetekkel ezután nekiláttam a prototípus megtervezésének. Kitaláltam egy színpalettát, korlátozott alkatrészkészletet terveztem, és végül egy olyan megoldásra jutottam, amelynek három „módja” vagy oldala volt, és a felhasználónak váltania kellett közöttük a feladatok elvégzéséhez.

Ahelyett, hogy tovább leírnánk, vessünk egy pillantást.

Amint a fenti képen látható, a prototípus mindent elért, amit a kezdeti felhasználási esetek alapján szerettem volna… Rendben.

Kattintson ide, ha saját maga szeretné kipróbálni a prototípust, köszönhetően a Netlify telepítési előnézeteinek varázsának.

Az eredeti kialakítás jó és rossz

Sosem szántam, hogy az első prototípus más legyen, mint egy lépcsőfok, és magad is láthatod, hogy elég durva és hibás volt.

A következő verzióhoz azzal kezdtem, hogy megnéztem, mi tetszik a prototípusban.

Változat mód

Nagyon elégedett voltam azzal, hogy hogyan alakult a prototípus generáló változata. Nagyon egyszerű volt kiválasztani egy színt és megszerezni a változatok listáját. Ezenkívül a füles megközelítés elég jól működött több alapszín hozzáadásakor.

Látható az akadálymentesség változásai a szín megváltoztatása után

Amint az a fenti rövid bemutatóban látható, nem volt szükség HEX kódok másolására / beillesztésére az alkalmazások között. Most megváltoztathattam az egyik színemet, és megnézhettem, hogy ez milyen gyorsan befolyásolja a színek elérhetőségét.

Aztán elkezdtem olyan dolgokat válogatni, amelyek nem tetszettek és javításra szorultak .

A kölcsönhatások nem voltak nyilvánvalóak

A kezdőlapra való megérkezés alapján nem volt azonnal nyilvánvaló, hogy hogyan válasszon változatokat és ellenőrizze az akadálymentességet. Valószínűleg rájöhetett, hogy végül a csempékre kellett kattintania, de ez nagyon ügyetlen volt.

Az üzemmódok zavarosak voltak

A kezdeti tervekben csak a paletta nézetből adhatott párokat, és csak a változatok nézetből adhatott hozzá / távolított el variánsokat. Mindez sok váltást jelentett a képernyők között, és azon kaptam magam, hogy frusztrált vagyok, hogy az alkalmazás mekkora munkát végzett. Ez elvezet a következő pontomhoz.

Túl sok kattintásra volt szükség

Kattintson egy változat hozzáadásához. Ezután kattintson a paletta nézetre lépéshez. Ezután többször is kattintania kell egy pár létrehozásához. Ezután még kattintania kell az imént hozzáadott pár megtekintéséhez. Mint fent említettem, az egész meglehetősen nehézkes volt, és ez valószínűleg a prototípus legrosszabb része volt, és tudtam, hogy változtatnom kell.

Nem volt egyszerre elég információ a képernyőn

Minél többet használtam, annál inkább nem szerettem az általam létrehozott „módok” koncepciót. Azt hiszem, rám hatott az eredeti folyamat, amely inspirálta az alkalmazást, és a képernyőket silókban terveztem, nem pedig egységes élményt terveztem. A prototípus használata után úgy döntöttem, hogy át kell térnem a „mode” koncepciótól olyan dologra, amelyet ideális esetben egyetlen oldalon lehet megtenni.

Egy második kísérlet

Vettem a prototípusból levont tanulságokat, és nekiláttam az alkalmazás jobb verziójának elkészítéséről.

A szükséges interakciók számának csökkentése, az interakciók kétértelműségének csökkentése és a felhasználó számára elérhető információk mennyiségének növelése érdekében úgy döntöttem, hogy áttérek egy drag and drop alapú felhasználói felületre, ahol a felhasználó képes lesz húzni csempézzen körül, hogy hozzáadja a palettájához, vagy akadálymentességi ellenőrzéseket hozzon létre.

A húzási cél mindig megjelenik, és ezzel elkerülhetővé válik a képernyők közötti váltás.

Vessünk egy pillantást arra, mit találtam ki.

Az alkalmazás aktuális verzióját itt érheti el.

Következő lépések

Az alkalmazás még mindig nagyon gyerekcipőben jár, és bár a második verzió sokkal közelebb áll a gondolatomhoz, még mindig vannak fejlesztések, amelyek elvégezhetők.

Importálás kódból

A paletta exportálásán túl azt tervezem, hogy hozzáadjam a kezdeti alapszínek kiolvasását a változókat tartalmazó kódoktól (kezdetben SASS és CSS változók)

Exportálás több formátumba

Jelenleg csak a SASS programot exportálhatja. A jövőben a CSS-változók és más formátumok támogatását tervezem.

Integrálja a tervezőeszközökkel

A kódba történő exportálás nagyszerű, de még jobb lenne, ha exportálhatnám a palettát, majd rétegként vagy megosztott stílusként importálhatnám olyan tervezőeszközökbe, mint a Figma vagy a Sketch.

Finomítsa a felhasználói felületet

Valljuk be, nem ez a legjobban kinéző alkalmazás a világon. Azt tervezem, hogy módosítom a felhasználói felület összetevőit, hogy vizuálisan javítsam az alkalmazást.

Visszajelzés és hibajelentés

Ez önmagáért beszél. Az alkalmazást csak azok fejlesztésével javíthatom, akik használják. Ehhez a jövőben visszajelzési űrlapot tervezek hozzáadni.

Visszacsatolás

A visszajelzésekről szólva ... Két okból írtam ezt a cikket. Az első, aki végigvezette Önt a folyamaton, azon mentem keresztül, hogy eljussak a jelenlegi tervhez abban a reményben, hogy tanulhat belőle.

A második ok az, hogy szerettem volna bemutatni az eszközt a fejlesztő és tervező közösség számára, mivel úgy gondolom, hogy sok ember számára hasznos lehet, és visszajelzéseket is gyűjthetek róla a jelenlegi állapotában.

Tehát, ha bármilyen gondolata van a dizájnnal, a funkcionalitással, az eszköz létrehozásának folyamatával vagy bármi mással kapcsolatban, szívesen meghallgatom!

Linkek

Prototípus

Jelenlegi verzió

Alkatrészkönyvtár