Arculati kézikönyv - megjelenési szabályok fejlesztőknek

2023. szeptember 5.

Alapvető arculati leírás:

Logó: A logónk Asap betűtípusból és egy stilizált pénztárcából áll. Asap bold a márka és Asap italic a szlogen. 2 színű. #1a234a a kék rész és #d9ea00 a zöld.

Színek:

Világosabb zöld: #d9ea00
CTA gombok színátmenet: background: Color: #E0F10B - #CDDD02
~~Sötétebb zöld: #bfce00 (nem használjuk már)~~
Sötét kék: #1a234a
Oldal betűjének alap színe #696969
Oldal szürke háttere #f7f7f7
Halvány kék linkek színe #9ba2a9
Korrekt webáruház #0060b6

Betűtípusok: Work Sans

Gombok

Lekerekített színátmenetes sárga gombokat használunk CTA (call to action) gombok megjelenítésére. Bizonyos esetekben a kék megoldást szoktuk alkalmazni.

Formok - validáció - inputok

Inputok

A szűrőben jól látható, hogy milyen inputokat használunk az OP adminban:

Validáció

Minden inputhoz kötelező használni JS oldali és szerveroldali validációt!

JS oldali vizsgálat, amelyet a Parsley.JS segítségével alkalmazunk:

Vizsgálni, hogy a mező üres
Min-max karakterek vizsgálata
Kötelezően kitöltendő inputok vizsgálata
Formátum / Numerikus / String értékek vizsgálata
Stb.

Ellenőrizni, hogy mobilon és asztali megjelenésben is olvasható és egyértelmű hibaüzeneteket adunk a felhasználóknak.

Szerveroldali validáció:

Minden hibaüzenetet egyértelmű, érthető üzenetekkel adunk vissza. Mind user és partner oldalon is a megszokott notification ablakokat adjuk vissza Flash session segítségével!

Címek, szövegek

Címek:

Admin oldalon az oldalak címeit worksans_exbold határozzuk meg.
Betűmérete: 40px;
Színe: #1A234A;

Szövegek:

A cím alatti szövegeket kis dőlt betűvel szoktuk megírni.
Betűmérete: 18px;
Színe: #1A234A;

Címekre jó példaként szolgálhat az admin oldali exitpopup menüpontunk.

Panelek, szűrők, listák

A funkciókat fehér panelekbe szoktuk rendezni a könnyű láthatóság érdekében. Jellemzően az ilyen panelekben található szűrő és listákat is egy megszokott rendszerben készítjük.

Panelek: Fehér, lekerekített div, némi árnyékkal.

Szűrők: Szintén panel szerű keskeny megjelenésben helyezzük el a cím alatt. Ellátjuk egy Bootstrap 5 svg-vel a bal oldalán (Funnel fill). Az egyes inputjait a a fent leírt megjelenésben helyezzük el. Jellemzően GET lekérést alkalmazunk a linkelhetőség érdekében. Odafigyelünk a responsivitásra.

Listák: Az admin oldalon létrehozott listákat / táblázatokat valójában DIV-ek segítségével hozzuk létre. Ennek köszönhetően responsive listákat tudunk alkalmazni. A listaelemek esetében, ha van állapot, akkor állapotjelző ikonokat alkalmazunk a lenti példa szerint.

Offcanvas alkalmazása

Jellemzően a listaelemek tartalmait a Bootstrap 5 offcanvas megoldásával szoktuk megjeleníteni. Ez egy JOBBRÓL-BALRA beúszó lekerekeített div, amely segítségével nem kell a listelem tartalmát egy új oldalon betöltenünk. Tartalmát címmel és a fent leírt tartalmi megoldásokkal látjuk el.

Popupok

Popupokból két féle típust alkalmazunk jellemzően. Mindegyikre Bootstrap 5 megoldását használjuk.

Általános felugró popup: Keret nélküli tipikus popup. A jobb felső sarkában egy kerek fehér kör van, amelyben egy látható X-et helyezünk a bezáráshoz.

Ilyen popupot az OP admin felületén lehet másolni a szuperadmin / exitpopup menüben. Itt admin oldalira kell állítani a funkciót.

Conformation ablak / Notification popup: Confirmation és notification ablaknak egy előre formázott Bootstrap 5 megoldást használunk az alert helyett. Erre van előre elkészített megjelenésünk. JS megoldásával pillanatok alatt meghívható. Ilyen található például az admin főoldalon a visszahívást kérek részen.

Ikonok - piktogrammok

Egyes listaelemek, inputok, blokkok, egyéb arculati elemekhez Bootstrap 5 SVG ikonokat használunk a UX érdekében. Fontos: Tilos más ikonkészletet betölteni az oldalra, kivételek lehetnek olyan egyedi esetek, amikor a BS5-ben nincs megfelelő.

Színük: #1A234A

Egyéb arculati elemek

Notification

User és partner oldalon tipikus notification ablakokat csúsztatunk be jobbról-balra. Ezen kívül notification popupot is lehet alkalmazni a fent leírtaknak megfelelően. Ez a két megoldáson kívül tilos mást alkalmazni. Mindegyikre megírtuk az előre formázott megoldásokat, csak JS-sel meg kell hívni.

Dátum választó

Egységes dátum választót használunk az oldalon:

Ennek az dátum választónak, van dupla változata is, amit a partneri admin kampányok oldlaon lehet megtalálni:

Fejlesztések ellenörzése - átadása

Hibakezelés:

Kötelező minden fejlesztés átadása előtt megvizsgálni, hogy milyen hiba lehetőségekbe eshet a kód. Az elkerülhetetlen hibákat pedig KÖTELEZŐ lekezelni. Ez gyakorlatban egy notificationt jelent, amelyben tájékoztatunk a hibáról és egy email értesítést kell kapnia a fejlesztői csapatnak, hogy javítsa a problémát.

Az aktuális tesztelés elvárások itt találhatóak meg:

Tesztelési elvárások

Kicsúszó szövegek:

Front oldali fejlesztések esetén kötelező megvizsgálni olyan eshetőségeket, amikor a vártnál több tartalom kerül egy blokkba. Kicsúszó szövegek, túlzott tartalom esetén 3 db pont (...) szükséges elhelyezni vagy megkérdezi a fejlesztéshez tartozó osztály vezetőjét.

Mobil nézet:

Front oldali fejlesztések esetén vizsgáljuk a 320px szélességű mobil képernyőtől felfele minden nézetben. Plusz egybekötjük a mobil nézetben a túl hosszú szövegek vizsgálatával!

Checklist tipikus hibákról

Form validációk teljeskörű vizsgálata Parsley-val
Szerverodali validációk megléte
Mobil oldali nézet vizsgálata 320px-től felfele
Túl hosszú szövegek kezelése asztali és mobil nézetben
Szerveroldali hiba esetén kezelni a hibaüzenetet és megszüntetni a white blank screent!