A termékbemutatód valószínűleg asztali böngészőre lett tervezve — de sok látogató táblagépen vagy telefonon látja majd. A Yaplet automatikusan átpozicionálja a tooltipeket, hogy a nézetablakban maradjanak, de néhány lépés extra figyelmet igényel, hogy minden képernyőméreten jól nézzen ki.
Hogyan alkalmazkodik automatikusan a Yaplet
Ha egy mutató tooltip túlnyúlna a nézetablak szélén, a Yaplet az ellentétes oldalra fordítja (alulra az alap helyett, balra a jobbra helyett), hogy teljesen látható maradjon. A nyíl az új pozíciónak megfelelően renderelődik újra. Ez automatikusan történik, konfiguráció nélkül.
A középre igazított bejegyzéslépések mindig a nézetablak közepére igazítanak, és nem igényelnek reszponzív beállításokat.
Töréspontok és lépések láthatósága
A bemutató-készítő minden lépésénél van egy Megjelenítés beállítás három lehetőséggel:
| Lehetőség | Érintett töréspontok |
|---|---|
| Minden eszközön | Asztali gép, táblagép és mobil (alapértelmezett). |
| Csak asztali gépen | 1024 px-nél szélesebb képernyők. |
| Mobil és táblagép | 1024 px-nél keszkenyebb képernyők. |
Használd a Csak asztali gépen beállítást azoknál a lépéseknél, amelyek olyan felhasználói felületi elemekre mutatnak, amelyek nem léteznek mobilon (oldalsáv-navigáció, hover menük, billentyűparancsok). A Yaplet átugorja ezeket a lépéseket kisebb képernyőkön, és a következő látható lépéssel folytatja.
Tesztelés kisebb képernyőkön
Használd a bemutató-készítő Előnézet gombját, hogy megtekinthesd a bemutatót a kezdő URL-en. Ezután használd a böngésző eszközszimulációs módját (DevTools → Eszközeszköztár váltása) a táblagépes és telefonos nézetablakok szimulálásához, és járd végig a bemutatót minden méretben.
Figyelj a következőkre:
- Lépések, ahol a tooltip átfedi a horgonyelemét ahelyett, hogy tisztán mutatna rá.
- Lépések, amelyek horgonyeleme nem létezik ennél a nézetablak-szélességnél — visszaesnek egy középre igazított modalra, ami elfogadható vagy elrejtendő lehet.
- Hosszú lépéstörzs szöveg, amely levágódik a tooltip kártyában — rövidítsd a mobilon látható lépések szövegét.
Mobilspecifikus szelektorok
Ha ugyanaz a funkció másik felhasználói felületi elemet használ mobilon (hamburger menü egy látható navigációs elem helyett), létrehozhatsz egy külön lépést más CSS-szelektor és az elsőt Csak asztali gépen, a másodikat Mobil és táblagép beállítással. Mindkét lépés ugyanazt a „funkciót" fedi le, csak az adott kontextushoz igazítva.
Mi a következő lépés?
Ha a terméked több nyelven szolgálja ki a felhasználókat, lásd a Termékbemutató lefordítása cikket a többnyelvű lépéstartalom hozzáadásához.