Ugrás a fő tartalomhoz

Dizájnrendszer

A Scoutello megjelenésének barátságosnak, hozzáértőnek és a termékre összpontosítónak kell lennie. Az ajánlott megjelenés világos, tágas, lekerekített és szerkesztett hatású: először az egyértelmű tartalom, ezt követik a visszafogott márkaszínek, a lágy felületek és a nyugodt animációk, amelyek reszponzívvá teszik a terméket anélkül, hogy zavaró dekorációvá válnának.

A marketingcélú landing page a jelenlegi vizuális irány legvilágosabb nyilvános referenciája. A termékfelületeken lehetőség szerint újra fel kell használni a közös dizájntokeneket, és csak akkor érdemes kifejezőbbé tenni őket, ha a felület kifejezetten márka- vagy marketingközpontú.

Logó és márkaeszközök​

A Scoutello logóját a nyilvános dokumentációs eszköz URL-jéről kell használni, amikor egy ügynöknek, integrációnak vagy generált oldalnak újra felhasználható márkajelzésre van szüksége:

Az éles megjelenítés érdekében, különösen eltérő képernyőméreteken, részesítsd előnyben az SVG-verziót. A PNG-verziót akkor használd, ha az adott eszköz vagy célfelület nem támogatja az SVG-t. Hagyj elegendő szabad teret a jel körül, ne nyújtsd meg és ne színezd át, valamint fehér, meleg krémszínű vagy más nyugodt felületen helyezd el, amely biztosítja a megfelelő kontrasztot.

Márkaszínek​

Elsődleges szín: #ff8d49

Az elsődleges narancsszínt a Scoutello kiemelőszíneként használd: elsődleges cselekvésre ösztönző elemekhez, fókuszállapotokhoz, aktív navigációhoz, kisebb ikonhátterekhez, kiemelt szöveghez, lágy fényhatásokhoz és meleg színátmenetekhez. A termékkódban ez a --primary: 24 100% 64% értéknek, valamint többek között a bg-primary, text-primary, border-primary/15 és shadow-primary/10 Tailwind-osztályoknak felel meg.

Másodlagos szín: #145466

A másodlagos sötét türkiz szolgáljon stabilizáló színként. Elsősorban az elsődleges narancsszínnel alkotott színátmenetekben, sötét cselekvésre ösztönző paneleken, vizuális mélység létrehozására és ritkábban használt, nagy hangsúlyú márkaelemeknél működik jól. Nem helyettesítheti az elsődleges narancsszínt az alapértelmezett cselekvési színként.

Kiegészítő színek:

  • Meleg krémszínű hátterek: #fff8f1, #fff4ea, #fcf6f1, valamint lágy orange-50 / amber-50 felületek.
  • Terméksemleges színek: fehér kártyák, sötét előtérszöveg, körülbelül 70–75%-os átlátszóságú tompított szöveg és világos szegélyek.
  • Harmadlagos kék: a hsl(205 100% 51%) kiegészítő tokenként érhető el, de takarékosan használd, hogy a narancssárga és a türkiz továbbra is felismerhető márkapár maradjon.

Vizuális stílus​

A tiszta, prémium SaaS-megjelenést részesítsd előnyben, amelyben elegendő melegség van ahhoz, hogy ne hasson sablonosnak. A landing page krémszínű, hálós háttereket, fehér kártyákat, nagyméretű termékképernyőképeket, lekerekített sarkokat és visszafogott színátmeneteket kombinál.

Használd:

  • A lekerekített kártyákat és paneleket, gyakran a rounded-2xl és rounded-[2rem] közötti értékekkel.
  • Az olyan lágy szegélyeket, mint a border-primary/10, border-primary/15, ring-black/5 és a világos semleges szegélyek.
  • A nehéz, színes blokkok helyett egymásra rétegzett fehér vagy krémszínű felületeket.
  • Az olyan visszafogott árnyékokat, mint a shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, illetve egyedi, alacsony átlátszóságú árnyékokat.
  • Nagyméretű termékképernyőképeket vagy UI-maketteket bizonyítékként, különösen marketing- és funkcióbemutató tartalmakban.
  • Apró márkaelemeket, például narancssárga kiemelőszöveget, ikonchipeket, gyűrűket, fényhatásokat és színátmenetes CTA-kat.

Kerüld:

  • A harsány, teljes oldalt kitöltő narancssárga háttereket.
  • A türkiz túlzott használatát hétköznapi vezérlőelemeknél.
  • A sűrű, zsúfolt elrendezéseket.
  • A kemény árnyékokat, éles téglalapokat és hideg, monokróm irányítópultokat.
  • Az olyan dekoratív animációkat, amelyek elvonják a figyelmet az olvasásról vagy a feladat elvégzéséről.

Tipográfia​

A marketingoldal ezeket használja:

  • Space Grotesk a címsorokhoz a landing-display osztályon keresztül.
  • Manrope a marketingcélú törzsszöveghez.

A közös alkalmazás- és dokumentációs felületek rendszerhez igazodó UI-tipográfiát használnak, amely jelenleg inkább az Interhez áll közel. A stíluscél minden felületen azonos: magabiztos címsorok, szoros betűköz a címsorokban, jól olvasható törzsszöveg és tágas sorköz.

Címsorokkal kapcsolatos irányelvek:

  • Marketingoldalakon használj nagyméretű, kiegyensúlyozott címsorokat.
  • Csak a fontos kifejezést emeld ki az elsődleges narancsszínnel.
  • Ahol elérhető, a max-w-* és text-balance használatával szabályozd a sorhosszt.

A törzsszöveggel kapcsolatos irányelvek:

  • A bekezdések legyenek nyugodtak és közvetlenek.
  • A leírásokhoz használj tompított előtérszínt, általában a text-foreground/70 vagy text-foreground/75 értéket.
  • Részesítsd előnyben az áttekinthető szakaszokat, a rövid bekezdéseket és az egyértelmű címkéket.

Elrendezés és térközök​

Az elrendezések hassanak tágasnak és stabilnak. A landing page egy max-w-7xl tárolót használ reszponzív vízszintes belső térközzel és nagyméretű függőleges szakaszokkal.

Gyakori minták:

  • Szakaszonként körülbelül py-16, py-20 vagy a nagyobb marketingcélú szakaszoknál ennél is nagyobb belső térköz.
  • Reszponzív rácsokban elrendezett kártyák, egységes térközökkel.
  • Hero szakaszok erős bal oldali tartalmi oszloppal, jobb oldalon pedig termékképernyőképekkel vagy eszközkompozíciókkal.
  • Középre igazított szakaszcímek átfogó termékígéretekhez; balra igazított címsorok történet- vagy munkafolyamat-szakaszokhoz.
  • Mobile-first elrendezések, amelyek nagyobb képernyőkön több oszlopossá válnak, miközben kisebb méreteken rendezetten egymás alá sorolódnak.

A térközt a dizájn részeként használd. Ha egy szakasz nem egyértelmű, először egyszerűsítsd a tartalmat, és növeld a szabad teret, mielőtt további dekorációt adnál hozzá.

Komponensek és felületek​

A Scoutello felületeinek tapinthatónak, mégis könnyednek kell hatniuk:

  • Gombok: a hangsúlyos marketing-CTA-khoz lekerekített kapszulagombok; máshol szabványos termékgombok.
  • Kártyák: fehér vagy krémszínű, lekerekített, szegéllyel ellátott és enyhén kiemelt felületek.
  • Ikonok: kis méretű, egyszerű vonalas ikonok narancssárgás árnyalatú chipekben.
  • Statisztikai és bizalmi elemek: visszafogott kártyák narancssárgás szegélyekkel vagy színátmenetekkel.
  • Űrlapok: egyértelmű címkék, közvetlen súgószöveg és mobilhasználathoz elegendő térköz.
  • Képernyőképek: nagyméretű, éles és enyhén kiemelt megjelenítés. Konkrét bizonyítékként használd őket a termék bemutatására.

Termékfelület fejlesztésekor az egyedi, egyszeri stílusok helyett a meglévő megosztott UI-komponensekből és tokenekből induljon ki. Marketingfelületek fejlesztésekor használja a landing primitive-okat és landing classokat, ahol illeszkednek.

Mozgás​

A mozgás tegye kifinomultabbá a felületet anélkül, hogy zsúfolttá tenné. A landing oldal rövid megjelenési animációkat, eszközkiemelési effektusokat, fényudvar-felerősödési effektusokat és enyhe hover-elemeléseket használ.

Javasolt mozgások:

  • Felfelé történő megjelenés 12–24 px-ről, finom átlátszósággal.
  • A hoverelt kártyák csak néhány pixellel emelkedjenek meg.
  • A CTA hover-állapota enyhén emelkedjen meg, és az árnyék mélyüljön.
  • Lépcsőzetes szakaszbelépések, amikor támogatják a tartalom történetszerű áttekintését.

Mindig tartsa tiszteletben a csökkentett mozgásra vonatkozó beállításokat. Kerülje az olyan animációkat, amelyek elrejthetik a tartalmat, akadályozhatják az interakciót, vagy azt a benyomást kelthetik, hogy az oldal megértéséhez szükségesek.

Hangnem és tartalomtervezés​

A vizuális rendszer közvetlen, konkrét szövegekkel működik a legjobban. Olyan megfogalmazást részesítsen előnyben, amely bemutatja, mit tehet közzé, kezelhet vagy automatizálhat egy szervezet a Scoutello használatával.

Használjon:

  • Termékspecifikus főneveket: landing oldalak, csempék, túrák, események, szervezetek, irányítópult, vendégek, QR-kódok, fordítások.
  • Eredményközpontú leírásokat, amelyek összekapcsolják a vendégélményeket az üzemeltetési munkafolyamatokkal.
  • Nemsemleges nyelvezetet németül és más lokalizált szövegekben.

Kerülje:

  • A példák nélküli, homályos platformnyelvezetet.
  • A túlzottan formális vállalati zsargont.
  • A hosszú bekezdéseket ott, ahol egy jól áttekinthető szakasz jobban működne.

Gyakorlati szabályok​

  • A #ff8d49 legyen a fő márkaakcentus, a #145466 pedig a másodlagos kiegyensúlyozó szín.
  • A termékfelületeken részesítse előnyben a tokenizált classokat (primary, secondary, foreground, muted, border) a rögzített színekkel szemben.
  • A marketingoldalak legyenek melegek, tágasak, lekerekítettek, képernyőképekre épülők és visszafogottan animáltak.
  • Az irányítópultok és az operatív felületek legyenek nyugodtabbak, csak szükség esetén sűrűbbek, és jobban a feladatokra összpontosítsanak.
  • A termék által már biztosított márkaépítési vezérlők esetén engedje, hogy az ügyfél tulajdonában lévő vendégélmények támogassák a szervezet márkáját, a Scoutello tulajdonában lévő felületek azonban maradjanak összhangban ezzel a rendszerrel.

Kapcsolódó fogalmak: Útvonalak és felületek, Landing oldalak és csempék, Böngészőalapú vendégélmények.