Notisruta: När och hur du använder den
Använd en notisruta för att förtydliga närliggande innehåll utan att ändra läsarens handling, resultat, risk eller prioriteringar—och håll tips och varningar åtskilda varje gång.
En notisruta isolerar sammanhang som hjälper en läsare att tolka närliggande innehåll men ändrar inte vad läsaren bör göra, vilket resultat som förväntas eller hur allvarlig situationen är.
Detta renderade exempel besvarar en trolig fråga utan att lägga till ett steg. En läsare som hoppar över den kan fortfarande använda rapporten korrekt. En läsare som märker en tidsskillnad får det saknade sammanhanget och kan fortsätta utan att ändra arbetsflödet.
Varför detta element är viktigt
Läsare skannar en sida efter visuell prioritet. En avgränsad notis säger: “Detta sammanhang kan besvara en fråga, men det är inte en ny instruktion.” Den signalen minskar ansträngningen som krävs för att klassificera en sidoanmärkning. Läsaren kan kort lämna huvudargumentet, ta till sig förtydligandet och återvända till samma punkt utan att undra om processen har ändrats.
Elementet fungerar bara när det löftet förblir tillförlitligt. Om nödvändiga steg, säljbudskap, definitioner, varningar och bakgrundsfakta alla får notisstil slutar etiketten att hjälpa. Läsare måste inspektera varje ruta för att upptäcka vad den betyder, vilket tillför mer kognitiv belastning—den mentala ansträngning som krävs för att bearbeta information—än vanlig prosa skulle ha skapat.
Allvarlighetsetiketter lär också ut beteende genom upprepning. När harmlöst sammanhang får varningsfärger stöter läsare upprepade gånger på en brådskande signal utan meningsfull konsekvens. De lär sig att skumma förbi den. Nästa genuina varning måste då konkurrera med en historia av falsklarm. Att missbruka varningsstil för notiser gör inte bara en sida melodramatisk; det försvagar hela webbplatsens riskspråk.
För maskiner ger en typad notis en tydlig avgränsning och ett syfte. Ett innehållsmigreringsverktyg kan behålla blocket som kompletterande sammanhang istället för att slå samman det med ett procedurellt steg. Ett söksystem eller en AI-agent kan extrahera notisen med dess etikett och brödtext, och sedan hålla den underordnad det påstående den förklarar. Det förhållandet är svårare att återvinna från ett stycke som gjorts blått med sidans egen styling.
Extraherbarhet beror fortfarande på skrivandet. “Detta kan se annorlunda ut” är inte användbart utanför sitt stycke eftersom ämnet saknas. “Rapporttidsstämplar använder UTC, inte betraktarens lokala tid” är självständigt. Skrivreglerna för element har företräde: klassificera passagen efter dess syfte först, tillämpa sedan det registrerade elementet. Visuell betoning skapar aldrig den semantiska typen.
När du ska använda den
Använd en notis endast när alla fyra villkoren är uppfyllda:
- Passagen förtydligar ett närliggande påstående, värde, instruktion, exempel eller sekvens.
- Att hoppa över den ändrar inte den nödvändiga handlingen, det förväntade resultatet, den korrekta tolkningen av huvudpåståendet eller risknivån.
- Sammanhanget besvarar en trolig läsarfråga som annars skulle avbryta förståelsen.
- Passagen är tillräckligt självständig för att förbli meningsfull när den extraheras med sin etikett.
Bra notismaterial inkluderar en tidszonskonvention, ett namnalias, en omfattningsgräns som redan antyds av huvudtexten, en harmlös gränssnittsskillnad mellan versioner eller en förklaring av ett förväntat visningsläge. Till exempel: “Knappen heter Spara på månadskonton och Verkställ på årskonton; båda skickar samma inställningar.” Läsarens handling och resultat förändras inte.
Nära-missar är viktiga eftersom “användbar extra information” är en alltför bred definition:
- Ett faktum som behövs för att förstå nästa stycke hör hemma i huvudförklaringen. Att gömma det i en notis får nödvändig förståelse att se frivillig ut.
- En förkunskap hör hemma före proceduren. Om arbetet inte kan påbörjas utan administratörsåtkomst är åtkomst inte kompletterande sammanhang.
- En valfri teknik som gör arbetet snabbare eller bättre hör hemma i en tipsruta . Ett tips ändrar kvaliteten eller effektiviteten på resultatet; en notis gör det inte.
- Ett villkor som förhindrar radering, kostnad, exponering, skada eller ogiltigt arbete hör hemma i en varningsruta . Dess syfte är att ändra beteende före skada.
- En formell definition som fastställer vad en term betyder hör hemma i definitionselementet eller huvudförklaringen, inte i en notis.
- En källhänvisning hör hemma bredvid det påstående den stöder. Bevis är inte en sidoanmärkning när påståendet är beroende av det.
- En kampanj, registreringsuppmaning eller produktrekommendation är en uppmaning till handling, inte information.
Använd inget-förändras-testet när klassificeringen är osäker: “Om läsaren får veta detta faktum, måste de då ändra en handling, förväntning, beslut eller säkerhetsrespons?” Om ja, är det inte en notis. Om nej, fråga om faktumet löser en verklig tvetydighet. Om det inte gör det, ta bort det eller behåll det som vanlig prosa istället för att skapa onödig betoning.
Var du ska placera den
Placera en notis omedelbart efter det fullständiga innehållsblock den förtydligar. Målet kan vara ett stycke, listobjekt, steg, tabell, kodexempel eller kort sekvens, men målet måste vara begripligt innan notisen visas. Notisen tillhandahåller sedan kompletterande sammanhang utan att bryta isär målet.
När en notis gäller ett helt avsnitt, placera den efter inledningsstycket som definierar avsnittets omfattning. Nämn den omfattningen i notisens första mening. När den gäller en procedur, placera den efter inledningsstycket och före det första steget endast om ingen handling ändras; annars är innehållet en förkunskap eller varning. En notis om ett resultat hör hemma efter att resultatet introducerats, inte flera stycken senare.
Använd högst tre notiser per sida och en per avsnitt. Tre är ett tak. Om flera notiser samlas kring en passage saknar huvudtexten troligen en förklaring eller så förtjänar materialet ett särskilt underavsnitt.
En notis får inte placeras:
- Mellan en rubrik och dess inledningsstycke.
- Mellan ett påstående och beviset som stöder det.
- Mellan en instruktion och dess nödvändiga kontroll av framgång.
- Direkt bredvid ett tips, varning, CTA, reklambanner eller en annan notis.
- Inuti en tabellcell, FAQ-svar, citat, kodblock, accordionpanel eller ett annat utrop.
- I en hjältebild enbart för att skapa visuellt intresse, förutom där en elementspecifikation renderar ett obligatoriskt live-exempel.
- I slutet av en sida när dess mål förekom mycket tidigare.
Om närhet skulle skapa en stapel med rutor, flytta notisen in i prosan eller omstrukturera avsnittet. Lös inte kollisionen genom att ändra en notis till varningsfärger; presentation kan inte reparera ett otydligt innehållsförhållande.
Anatomi
Den renderade notisen har fyra synliga eller strukturella regioner:
- Typetikett: Det synliga ordet “Notis,” som identifierar blocket utan att förlita sig på färg eller en ikon.
- Valfri titel: En kort, faktabaserad fras som namnger sammanhanget, till exempel “Tidszon” eller “Gränssnittsetiketter.”
- Brödtext: Ett självständigt förtydligande och, när det är användbart, en mening som kopplar det till det närliggande innehållet.
- Angränsande mål: Det fullständiga blocket eller den namngivna sekvensen som förtydligas. Placeringen bär detta förhållande även om det inte är ett författat textfält.
Ramverk, bakgrunder, ikoner, avstånd och typstilar tillhör renderaren. Författare tillhandahåller mening, inte färginstruktioner eller dekorativa symboler.
Designexempel
De varianter som stöds testar innehåll och responsivt beteende. De skapar inte olika betydelsenivåer.
Standard: Renderaren tillhandahåller “Notis” och brödtexten innehåller ett förtydligande. Använd denna form oftast.
Anpassad titel: En faktabaserad titel identifierar ämnet. Den ökar inte allvarlighetsgraden eller ersätter komponentens notissemantik.
Max två stycken: Det första stycket anger sammanhanget; det andra löser en avgränsning eller harmlös undantag. Längre förklaringar blir vanligt innehåll.
Inline-referens: Ett inline-kodvärde eller en beskrivande länk kan förtydliga målet. Ingetdera bör göra notisen till dokumentation inom dokumentation.
Smal visningsport: Etikett, titel och brödtext bevarar sin läsordning, radbryts normalt och förblir förståeliga utan ramverk eller ikon.
Parametrar
Innehållsmodellen separerar den fasta semantiska typen, valfri namngivning, brödtext och relation till närliggande innehåll. “Källa” anger var en författare eller renderare hämtar värdet.
| Namn | Typ | Krävs | Min/max | Standard | Källa | |
|---|---|---|---|---|---|---|
type | Enum | Ja | Exakt note | note | Direktivnamn eller shortcode-attribut | |
title | Ren text | Nej | 1–6 ord; max 50 tecken | Note | Attribut; renderarens standard när utelämnad | |
body | Begränsad Markdown | Ja | 15–90 ord; 1–2 korta stycken | Ingen | Direktiv eller shortcode-brödtext | |
inlineLink | URL plus ankare | Nej | 0–1 länk | Utelämnad | Brödtext | |
inlineCode | Inline-kodspann | Nej | 0–2 korta värden | Utelämnad | Brödtext | |
target | Dokumentrelation | Ja | Exakt ett närliggande block eller en namngiven sekvens | Föregående fullständigt innehållsblock | Placering i dokumentordning | |
label | Härledd ren text | Ja | En synlig semantisk etikett | Note | Renderare från type |
Titeln är valfri eftersom “Notis” vanligtvis är tillräckligt. Det bärbara direktivets första rubrik kan mappas till title under standardreglerna för brödtext, men den koncisa attributformen är att föredra för detta element. Allt annat mappas till body. Den nuvarande Hugo-implementeringen accepterar en positionell typ eller en namngiven type, plus en valfri namngiven title; blanda aldrig positionella och namngivna parametrar.
Syntax och kodexempel
Dessa former har samma typ, titel och brödtext. Plattformspresentationen kan skilja sig åt, men förtydligandet måste förbli en notis.
Bärbart Markdown-direktiv
:::note{title="Tidszon"}
Rapporttidsstämplar använder UTC. Filter och beräkningar ändras inte när en betraktares lokala tidszon skiljer sig.
:::
Direktivnamnet tillhandahåller typen, attributet tillhandahåller den valfria titeln och den omslutna Markdown-koden tillhandahåller brödtexten.
Hugo-shortcode
{{< callout type="note" title="Time zone" >}}Report timestamps use UTC. Filters and calculations do not change when a viewer's local time zone differs.{{< /callout >}}
Detta exempel använder endast namngivna parametrar. Utan en anpassad titel är den positionella formen callout note giltig och renderaren tillhandahåller etiketten “Notis”.
WordPress-block eller shortcode
<!-- wp:amicited/note {"title":"Time zone"} -->
<p>Report timestamps use UTC. Filters and calculations do not change when a viewer's local time zone differs.</p>
<!-- /wp:amicited/note -->
[note title="Time zone"]Report timestamps use UTC. Filters and calculations do not change when a viewer's local time zone differs.[/note]
Det registrerade blocket är den föredragna WordPress-implementeringen. En shortcode är acceptabel där den installationen uttryckligen stöder det; importerande system får inte platta till notisen till en varning eller dra slutsatsen om en annan typ från dess färger.
Exempel
Bra: harmlös gränssnittsvariation
Detta är bra eftersom det besvarar en trolig gränssnittsfråga samtidigt som samma handling och resultat bevaras. Den namnger båda etiketterna, säger var var och en visas och bekräftar deras likvärdiga beteende. Notisen är begriplig även om den extraheras från den omgivande proceduren.
Dålig: en varning förklädd som information
Notis — Radering av arbetsyta: Om du tar bort arbetsytan tas dess rapporter bort permanent. Exportera nödvändiga poster innan du fortsätter.
Detta är dåligt eftersom konsekvensen kräver en beteendeförändring före en oåterkallelig handling. Lugnt språk och en neutral etikett gör det inte till kompletterande innehåll. Det måste vara en varning placerad före raderingskontrollen, med målet, konsekvensen och den förebyggande åtgärden uttryckligen angivna.
En annan dålig notis säger: “Exporten måste innehålla alla nödvändiga kolumner.” Det är ett godkännandekriterium. Placera de nödvändiga kolumnerna i instruktionen eller specifikationstabellen. En tredje säger: “Du kan spara tid genom att filtrera exporten först.” Det är frivilliga råd som förbättrar resultatet och därmed ett tips. Korrekt klassificering är viktigare än visuell variation.
Schemamarkering och tillgänglighet
En notisruta har ingen dedikerad Schema.org-typ eller egenskap. Den förblir synligt innehåll inom den omslutande Article, TechArticle, produkt eller annan sanningsenlig schema på sidnivå. Skapa inte ett fristående JSON-LD-objekt för den. När en notis förtydligar ett steg, håll den åtskild från HowToStep.text om inte förtydligandet är nödvändigt för att utföra steget; om det är nödvändigt var det inte frivilligt notisinnehåll från början.
En statisk notis behöver inte role="alert", ett ARIA live-område eller forcerad announcement. Dessa mekanismer kommunicerar brådskande eller dynamisk förändring, medan en notis finns i normal dokumentordning och bär icke-brådskande sammanhang. Aggressiv announcement skulle misstolka dess betydelse och göra hjälpmedelsteknikens utdata stökigare.
Rendera den synliga etiketten som text i Document Object Model, inte som en bakgrundsbild, ikon-only tooltip eller CSS-genererad dekoration. Om en region-roll används, koppla dess tillgängliga namn till den synliga etiketten eller anpassade titeln. Läsordningen är etikett, valfri titel, sedan brödtext. Färg och ikoner kan förstärka typen men får inte vara den enda skillnaden från tips och varningar.
Vid 200 % textzoom och på en smal visningsport måste brödtexten radbrytas utan horisontell scrollning. Länkar kräver beskrivande ankartext och måste vara tangentbordstillgängliga. Inline-kod måste förbli läsbar vid hög kontrast. Väsentlig information kan inte endast finnas i anatomiskärmdumpen eller en ikons alternativa text.
Skrivregler
Måla 15–60 ord. Den hårda maxgränsen är 90 ord över högst två korta stycken. En längre passage förtjänar vanligtvis integration i huvudförklaringen; en extremt kort notis är ofta en etikett utan användbart sammanhang.
Skriv ett förtydligande per ruta i en lugn, faktabaserad ton. Ange ämnet i första meningen, förklara sedan den harmlösa skillnaden eller avgränsningen. Föredra precis formulering som “Tidsstämplar använder UTC” framför samtalsfyllnad som “Bara så du vet.” Ge anledningen före någon tolkande regel: “Arkiverade projekt förblir synliga i historiska rapporter, så deras summor kan fortfarande visas i tidigare datumintervall.”
En notis får innehålla vanlig betoning, upp till två korta inline-kodvärden och högst en beskrivande länk. Den får aldrig innehålla:
- Ett nödvändigt steg, förkunskap, valideringsregel, framgångskriterium eller återhämtningsinstruktion.
- En väsentlig risk, oåterkallelig konsekvens, säkerhetsvillkor, juridisk instruktion eller kostnadsupplysning.
- Frivilliga råd vars syfte är att förbättra hastighet, kvalitet, noggrannhet eller bekvämlighet.
- En fullständig definition, bevis som behövs för att stödja ett påstående eller en källlista.
- Mer än ett oberoende förtydligande.
- En tabell, kodblock, formulär, knapp, CTA, vittnesmål, kampanj eller nästlat element.
- Skämt, alarmistiskt språk, dekorativa emojier eller ord som “kritisk” och “fara.”
Rubriksätt inte varje notis “Viktigt.” Betydelse är inte elementets syfte, och ordet närmar sig falskt varningsallvar. Använd “Notis” eller en faktabaserad ämnestitel. Använd aldrig en notis för att rädda otydlig prosa: reparera huvudförklaringen först, behåll sedan en notis endast om en genuint kompletterande tvetydighet kvarstår.
Inläggstyper som använder den
Fältet postTypes i frontmatter listar format där kompletterande sammanhang återkommer. Inkludering är fortfarande valfri; tabellen definierar den tillåtna rollen och positionen snarare än en obligatorisk plats.
| Inläggstyp | Typisk användning | Position | Lägg inte i notisen |
|---|---|---|---|
| Gör-det-själv-guide | Harmlösa skillnader i gränssnittsetiketter, version, tidszon eller visningsläge | Efter det fullständiga steget eller utdata det förtydligar | Förkunskaper, nödvändiga handlingar, framgångskontroller eller felåterställning |
| Ultimat guide | Omfattningsgränser, terminologialias eller kontextuella undantag som inte ändrar argumentet | Efter stycket som fastställer den allmänna regeln | Bevis, definitioner som behövs för förståelse eller större undantag |
| Vad är X-sida | En namnvariant eller avgränsning som förhindrar en förutsägbar missuppfattning | Efter kärndefinitionen och första förklarande stycket | Den kanoniska definitionen eller en kvalificering som ändrar dess noggrannhet |
| Produktsida | Godartad tillgänglighet, etikett, enhet eller visningskontext | Bredvid relevant faktasektion och bort från köpreglage | Prisvillkor, återkommande avgifter, kompatibilitetskrav eller köprisker |
Andra inläggstyper får använda en notis när samma inget-förändras-test godkänns. Att vara listad motiverar inte att lägga till en för visuell rytm, och att vara utelämnad gör inte en varning till en notis.
QA-checklista
Före publicering, verifiera varje punkt:
- Blocket förtydligar en närliggande passage och ändrar inte handling, resultat, prioritet, tolkning eller risk.
- Sammanhanget besvarar en trolig läsarfråga istället för att upprepa målet.
- Obligatorisk information finns kvar i huvudinnehållet.
- Notisen sitter omedelbart efter sitt fullständiga mål eller efter omfattningsstycket för en namngiven sekvens.
- Den skiljer inte en rubrik från dess introduktion, ett påstående från bevis eller en instruktion från dess framgångskontroll.
- Ingen varning, tips, CTA, banner eller andra notis sitter direkt bredvid den.
- Sidan har högst tre notiser och avsnittet har högst en.
- Brödtexten mål 15–60 ord, håller sig under 90 ord och innehåller ett förtydligande.
- Den synliga textetiketten fungerar utan färg, ramverk, ikon eller bild.
- Texten förblir meningsfull när den extraheras med sin etikett men utan omgivande styling.
- Rutan använder ingen alert-roll eller live-område när den finns vid sidladdning.
- Markdown-, Hugo- och WordPress-mappningar bevarar typ, titel, brödtext och placering.
- Hugo-parametrar är helt och hållet positionella eller helt och hållet namngivna; de blandas aldrig.
- Ingen ostödd nästlad komponent, kodblock, tabell, formulär eller kampanjåtgärd visas inuti.
- Skärmbildsmarkörer begär framtida captures utan att rendera icke-existerande tillgångar.
FAQ
Vad är skillnaden mellan en notis, ett tips och en varning? En notis förtydligar utan att ändra något. Ett tips erbjuder en frivillig förbättring. En varning ändrar beteende för att förhindra skada, förlust, kostnad, exponering eller ogiltigt arbete. Klassificera efter konsekvensen av att hoppa över blocket, inte efter dess färg.
Kan en notisruta innehålla obligatorisk information? Nej. Obligatorisk information hör hemma i huvudinnehållet där varje läsare stöter på den i ordning. En notis kan förklara en harmlös variation, men att hoppa över den får inte göra uppgiften eller tolkningen felaktig.
Hur många notisrutor bör en sida innehålla? Använd högst tre per sida och en per avsnitt. De flesta sidor behöver färre. Upprepade notiser indikerar att huvudförklaringen behöver omstruktureras.
Ska en notisruta använda varningsfärger eller en alert-roll? Nej. Varningspresentation signalerar en väsentlig konsekvens, och role="alert" signalerar brådskande dynamisk information. Att tillämpa någotdera på rutinmässigt sammanhang tränar människor att bortse från den verkliga signalen och vilseleder användare av hjälpmedelsteknik.
Kan en notisruta innehålla länkar eller kod? Den får innehålla en beskrivande länk eller upp till två korta inline-kodvärden när de direkt förtydligar målet. Använd huvudinnehållet för kodblock, tabeller, formulär eller dokumentation i flera steg.
En notis förtjänar sin avgränsning genom att lösa en verklig tvetydighet samtidigt som läsarens väg lämnas oförändrad. Håll den lugn, angränsande, självständig och visuellt åtskild från råd och risk.
Fler tutorials i det här avsnittet
Redo att omsätta det i praktiken?
Gratis kontroll · 7 dagars provperiod · inget kreditkort