Tervo
A Tervo vizuális nyelve egy lapon: a márkajel, a színek, a tipográfia, a térköz és a formák, az ikonkészlet, a mozgás, és a belőlük épülő felületi elemek. Itt dől el, hogyan néz ki a termék. Az alkalmazás ezt a lapot követi. A jobb felső sarokban a lap világos és sötét módja között lehet váltani, mindkettő a termék része.
© 2026 Biacsi Zoltán · Minden jog fenntartva
A jel egy T betű és egy pipa egyben. A gerenda, a pipa hosszú ága és a rövid ág egy egyenlő szárú háromszög három oldala: a szárak azonos szögben állnak, a csúcs a gerenda felezőpontja alatt van.
A szabad jel a saját felületeinken áll, ahol a háttér a miénk. A zárt alak oda kerül, ahol a hátteret nem mi választjuk: alkalmazásikon, favikon, profilkép, megosztás. A kitöltött forma hozza magával a saját hátterét.
A jel egy vonalvastagságból áll, ezért egy színnel is működik, árnyék és színátmenet nélkül. Tizenhat képpont alatt vastagabb vonallal rajzolódik, hogy a rés látható maradjon.
A jel egyetlen folyamatos vonással rajzolódik ki, abban a sorrendben, ahogy egy pipát a kézzel húzunk: a rövid ág aljától a csúcsig, onnan fel a hosszú ágon, majd végig a gerendán. A két rész ugyanabban a sarokban találkozik, ezért az egész jel egy útvonal, és a vonás sehol nem szakad meg.
Alkalmazásindításkor és az első betöltéskor. A vonás gyorsan indul, és a végén lassul le.
Ugyanaz az ütem és ugyanaz az irány: a vonal onnan tűnik el, ahol a toll elindult.
Rajzolás és eltüntetés felváltva, amíg a betöltés tart.
Betöltés közben két eset van, és a különbség az, hogy a várakozás elfedi-e az egész képernyőt.
Teljes képernyős várakozásnál a márkajel rajzolódik, nagy méretben, középen. Ez az indítás és a belépés utáni első betöltés. Néhány kör után szöveg kerül mellé, hogy ne tűnjön elakadásnak.
Képernyőn belüli várakozásnál semleges jelzés van. Kis méretben a rajzolás nem olvasható, és a tartalom mellett zavarna.
A jel nagyban, középen, felirattal: a rajzolás és a törlés váltakozik, amíg a tartalom megérkezik.
Az animált jel az alkalmazás saját első képernyőjén fut, nem az operációs rendszer indítóképén, mert az minden platformon állókép. Böngészőben és egy későbbi natív csomagolásban ugyanígy: az állókép után az alkalmazás animált képernyője jön.
Kilenc színszerep, világos és sötét témában egyaránt. Minden szerephez tartozik egy alapszín, egy sötétebb és egy világosabb változat, valamint a rá kerülő felirat színe.
A két szám minden sorban ellenőrzött érték: a kitöltés kontrasztja a lap hátterén, és a rajta ülő feliraté. Mindkettő megfelel a WCAG AA szintnek: a szöveg 4,5-szeres, a felületi elemek és az állapotjelzők 3-szoros kontraszttal. A színek egymástól való megkülönböztethetőségét vörös-zöld színtévesztésre szimulálva is ellenőrizzük, hogy az állapotok ne olvadjanak össze.
| szerep | minta | érték | a talajon | a felirat | shade · base · tint |
|---|---|---|---|---|---|
| primary | Aa | #0b74c4#4fa9ea | 4.577.17 | 4.877.01 | |
| secondary | Aa | #0a3d66#a5c8e0 | 10.5210.44 | 11.2210.68 | |
| tertiary | Aa | #0f766e#1a9c8f | 5.135.42 | 5.475.54 | |
| success | Aa | #018452#4ade80 | 4.4510.54 | 4.7510.79 | |
| warning | Aa | #cc4b00#e8701c | 4.305.92 | 4.596.05 | |
| danger | Aa | #b52230#f0525f | 6.085.32 | 6.495.44 | |
| medium | Aa | #606970#98a2ac | 5.257.08 | 5.607.25 | |
| light | Aa | #e8eef3#262e37 | 1.101.34 | 11.1111.45 | |
| dark | Aa | #1e252b#e6ebf0 | 14.5315.31 | 15.5015.31 |
#f5f8fa#101519#ffffff#1a2027#e8eef3#262e37#2b3238#e6ebf0#606970#98a2ac1.Csütörtöki ebéd12px2.Csütörtöki ebéd14px3.Csütörtöki ebéd16px4.Csütörtöki ebéd18px5.Csütörtöki ebéd22px6.Csütörtöki ebéd28pxregularSzendvicstál · 18 / 22400mediumSzendvicstál · 18 / 22500semiboldSzendvicstál · 18 / 22600boldSzendvicstál · 18 / 22700extraboldSzendvicstál · 18 / 22800Egyetlen térközskála az egész alkalmazásra, négy képpontos alappal. A csíkok hossza a tényleges érték.
1. lépcső4px2. lépcső8px3. lépcső12px4. lépcső16px5. lépcső24px6. lépcső32px1 · 4pxikon és felirat között, chip belső tere2 · 8pxösszetartozó sorok között, gombok között3 · 12pxkártyán belüli blokkok4 · 16pxkártya belső margója, listaelemek közötti rés5 · 24pxszekciók között egy képernyőn6 · 32pxképernyő széle, nagy blokkok közöttTelefonon ugyanezek a térközök vannak, kevesebb tartalommal egy nézetben.
xs · 2pxjelölőnégyzet, apró jelvénysm · 4pxbeágyazott elem, kódmd · 8pxlistasor, kis kártyalg · 16pxkártya, mező, gombpill · 999pxchip, állapotjelölés, kapcsolónincsa lapon fekszik, szekciók hátterehajszálkeretelhatárol, de nem emel: üres állapot, halk kártyaemelta lap fölött ül: kártya, ragadós sáv, értesítéskiemelta lapról leválik: párbeszédpanel, alsó lapMindkét emelt árnyék két rétegből áll, egy szűkebb és sötétebb, valamint egy tágabb és halványabb rétegből, és a semleges szürke helyett a paletta kékesszürkéjére hangolt, hogy ne fakítsa a színeket.
A mélységet árnyék és szín adja, nem körvonal. Keret csak akkor kerül egy felületre, ha az nem emelkedik ki, de mégis el kell válnia, vagy ha egy elemen belül kell határt húzni két sor közé.
A fókuszgyűrű minden billentyűzettel elért elemen ugyanaz: egy vastagság, egy eltolás, a márkaszínen. Az eltolás miatt a gyűrű a háttéren ül, nem a kitöltésen, így a márkaszínű gombon is látszik.
Az ikonkészlet a Phosphor. Előnye, hogy ugyanaz a rajz kontúros és kitöltött változatban is létezik, tehát az aktív állapot kifejezhető anélkül, hogy két különböző készletet kellene keverni.
Az alapértelmezés a kontúros változat. A kitöltött az aktív, kiválasztott állapoté.
Ez a fejezet azt mutatja meg, hogyan mozognak a felület elemei: mennyi ideig tart egy gomb, egy chip, egy kártya, egy alsó lap vagy egy értesítés megjelenése és eltűnése. Kis elemnek rövidebb, nagy felületnek hosszabb idő jut. A példák kattintásra lejátszhatók.
A gomb kicsit összenyomódik, amíg az ujj rajta van.
Egy chip megjelenése.
Egy kártya vagy listasor megjelenése.
Az alsó lap feljön a képernyő aljáról.
A kész jelzés megjelenése beküldés után.
Az értesítés felülről beúszik, és rövidebb idő alatt tűnik el.
Az aláhúzás átcsúszik a másik fül alá. A gomb oda-vissza vált.
A sor előbb elhalványul, aztán a helye összecsukódik.
A számjegyek tárcsaként fordulnak át az új értékre.
Négy állapot van: teljes · részleges · nem tud jönni · válasz nélkül. Mindegyikhez ikon és felirat is tartozik, nem csak szín, így színtévesztéssel és fekete-fehérben is olvasható.
Minden állapotnak halvány és tömör változata van: a halvány sorokban és listákban, a tömör ott, ahol az adott dolog a képernyő fő eleme.
Egy képernyőn legfeljebb egy tömör jelölés van.
Ha minden sor tömör, nem látszik az az egy, amelyikkel tennivaló van. Ezért a listában a halvány az alap, és csak a kivétel tömör.
A felület visszatérő elemei, kizárólag a fenti színekből, méretekből és formákból építve.
A címke a beírt érték fölött áll. A hibaüzenet nem foglal helyet előre, hanem a mező alatt jelenik meg, így a nyugalmi mező alacsonyabb marad.
Adj meg egy érvényes e-mail címet.
A mérő három szegmense: teljes, részleges, válasz nélkül. A sín chipjein a gyűrű mutatja, a lista hányadán állnak a válaszok.
Résztvevő: monogram, a jelvény az állapot (pipa: minden kötelező lista kitöltve, ×: nem tud jönni, semmi: még hiányzik), név, e-mail cím vagy „Nincs e-mail cím”. Tétel: darabszám ×-szel, lenyitva az összeállítások; a megjegyzéses választás külön sor, alatta az idézet és a név.
A Résztvevők sorából nyílik. Listánként a válasz; a nem kötelező lista neve után „nem kötelező”. Az emlékeztető sor csak akkor van ott, ha kötelező lista hiányzik.
A Csütörtöki ebéd minden listájával és válaszával együtt törlődik.
Négy jelentés, négy külön ikon: tájékoztatás, figyelmeztetés, hiba, siker. A jelentés az ikonból is olvasható, nem csak a színből.
Az értesítés a márka sötétkékjén jelenik meg, hogy a világos lapon is látszódjon.
A résztvevő a válasza után ide érkezik. Ezt az oldalt fiók nélkül is mindenki látja, ezért itt a márkaszín teljes felületet kap.