Színrendszer
A widget színei egy alapszínből és egy-három márkaszínből jönnek, plusz egy választásból arról, hogyan kerülnek a márkaszíneid a gombokra és az üzenetekre. Minden más számolódik és olvashatóságra ellenőrzött.
Áttekintés
Nincs kitöltendő paletta. A Márka → (a márkád) → Chat widget → Megjelenés (Chat widget) Widget szekciója néhány dolgot kér, és a widget minden más színe — felületek, szöveg, címkék, jelvények, színátmenetek, a köszöntés mögötti szín, az indítógomb — ezekből számolódik. A szekció saját alcíme: „Maga a panel: a képeid, a színeid és minden elem formája.”
Minden widgetnek saját témája van. Mivel egy márkához legfeljebb egy chat widget tartozik, ez márkánként egy témát jelent — és a márka nyilvános oldalai is ezt használják.
Widget színe
„A widget alapszíne. Innen dől el, hogy világos vagy sötét.” Ez dönti el, hogy a widget világos vagy sötét, és minden szürke árnyalat ebből kap színezetet. Hat színminta ad gyors kezdést — Paper #FFFFFF, Linen #FBF7F1, Mist #F5F7FB, Slate #1E2430, Graphite #15171C, Ink #0B0D14 —, alatta pedig egy színválasztó bármilyen színt elfogad.
Márkaszínek
„Az első a gombokat és a linkeket festi. Legfeljebb három, a színátmenet sorrendjében.”
- Fő — gombok, linkek, az aktív fül a navigációs sávban és a látogató saját üzenetbuborékjai. A weboldaladon lévő indítóbuborék is ezt követi, egészen addig, amíg saját színeket nem adsz neki.
- 2. és 3. — a színátmenetekben és a köszöntés mögötti formákban jelennek meg, abban a sorrendben, ahogy megadod őket.
A Szín hozzáadása előre kitölti azt az árnyalatot, amelyet a widget egyébként kitalált volna arra a helyre, így olyasmiből indulhatsz, ami már illik. A Feljebb / Lejjebb nyilakkal rendezed, az Eltávolítás gombbal dobsz el egyet (az utolsó szín nem távolítható el), és háromnál megállsz — „Legfeljebb három szín adható meg.”
Gombok és üzenetek
„Hogyan kerülnek a márkaszíneid a gombokra és a látogatók üzeneteire.” Két lehetőség:
| Beállítás | Mit csinál |
|---|---|
| Egy szín | „A gombok, a látogatói üzenetek és az indító buborék egyetlen tömör színnel.” |
| Színátmenet | „A színeid futnak végig a gombokon, a látogatói üzeneteken és az indító buborékon, a fenti sorrendben. Az Indító részben saját színt adhatsz neki, akkor különválik.” |
A színátmenet szöge rögzített; nincs mit beállítani.
A köszöntés mögötti szín
A negyedik dolog, ami a színeidet viszi, a kezdőlap hátterének Szín rétege — Nincs, Színfolt, Tömör vagy Színátmenet. A Kezdőlap szekcióban található, a Widget szekció alatt, a Fénykép, a Fényfoltok és a Vonalak rétegek mellett, és itt van leírva: A kezdőlap háttere.
Mit számolunk ki helyetted
Ezekből a választásokból a widget levezeti, és szinkronban tartja:
- minden kártya, címke, panel és a szövegmező felületszínét, annyi márkaszínnel, amennyit a Kártyák beállítás kér — Semleges, Halvány, Közepes vagy Erős (lásd: Megjelenés & Témázás)
- a szöveg négy szintjét — címsorok, törzsszöveg, feliratok, időbélyegek — az oldalon és minden felületen
- a linkszínt, az aktív navigációs elemet, az olvasatlan jelvényt, a hiba-, siker- és figyelmeztetőszíneket
- a köszöntés mögötti színt és a rajta olvasható tintát
- az indítóbuborékot és a rajta lévő ikon színét, amíg te magad nem állítod be őket
- a kezdőlap formáinak és vonalainak színeit, ahhoz árnyalva, amin ülnek
Az olvashatósági ellenőrzés
A Widget szekció fejlécében egy kis ikon mutatja, hol tartasz: egy zöld pipa ezzel a buboréksúgóval: „Minden szöveg olvasható marad ezzel a témával.”, vagy egy figyelmeztető jel. Ha egyes párok nem érik el a célt, a szekció tetején egy figyelmeztető sáv is megjelenik — például „3 szöveg-háttér páros nem éri el a célértéket ezzel a témával.” —, egy Részletek gombbal.
Az ikon és a Részletek is az Olvashatóság ablakot nyitja meg: minden pár — címsorok kártyán, törzsszöveg az oldalon, gombfelirat, az indítógomb ikonja, a köszöntés a kezdőlap fejlécén és így tovább — a mért kontraszttal. A címsorok 10:1-re, a törzsszöveg 7:1-re, minden más 4,5:1-re, az indítógomb ikonja 3:1-re törekszik. Ugyanez az ablak felsorolja azokat az igazításokat is, amelyeket a widget magától végzett el az olvashatóság kedvéért, például egy kicsit összehúzott színátmenetet. Semmi sem marad csendben olvashatatlanul.
Kiindulópontok
A Widget szekció fejlécében a Kiindulópontok tizenkét kész megjelenés egyikét alkalmazza — a színeket, a kezdőlap hátterét, a kártyák stílusát, a sarkokat és a buborékot együtt. A teljes lista: Megjelenés & Témázás.
Bízd az AI-ra a tervezést
Ugyanebben a fejlécben az Újratervezés AI-val egy webcím alapján tervezi meg a widgetet, és mentés előtt előnézetet mutat — lásd: Megjelenés & Témázás.
Sötét widget
Nincs sötét mód kapcsoló. Állítsd a Widget színe mezőt sötétre — Slate, Graphite vagy Ink, vagy bármilyen saját sötét szín —, és a widget világos szöveget, világos hajszálvonalakat és hozzá illő felületeket számol rá. A sötét kiindulópontok (Midnight, Terminal, Twilight, Ember és Aurora) ugyanezt teszik egy kattintással.
Élő előnézet
Minden módosítás azonnal megjelenik az űrlap melletti widget-előnézetben — a Kezdőlap, a csevegés, a Súgó és a többi —, így mentés előtt az egész widgetet látod az új színekben. Az előnézet indítóbuborékja is követi.