Meter
Metro
Un indicatore mostra una misurazione all'interno di un intervallo noto. Può anche segnare intervalli bassi, alti e migliori.
Meter compares a known value with a bounded scale.
Un esempio vero
Un pannello di archiviazione mostra 82 GB utilizzati su 100 GB. Il limite alto è 80 e l'intervallo migliore è sotto 60. Il testo indica anche “82 GB su 100 GB”, quindi il colore non è l'unico avviso. Un caricamento utilizza invece una barra di avanzamento.
Parti principali
- 01Intervallo noto
- 02Misurazione corrente
- 03Soglie e ottimo
Usalo quando
Usalo per un valore corrente, come spazio di archiviazione, punteggio o intensità del segnale, quando i limiti hanno un significato reale.
Non usarlo quando
Non usarlo per il progresso di un'attività, un valore senza limite o un valore che le persone cambiano direttamente.
Nome usato nel codice
meter value min max low high optimum Prima di spedire
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Metro (Meter). User context: Un pannello di archiviazione mostra 82 GB utilizzati su 100 GB. Il limite alto è 80 e l'intervallo migliore è sotto 60. Il testo indica anche “82 GB su 100 GB”, quindi il colore non è l'unico avviso. Un caricamento utilizza invece una barra di avanzamento. Recommended pattern: Metro (Meter). Why it fits: Usalo per un valore corrente, come spazio di archiviazione, punteggio o intensità del segnale, quando i limiti hanno un significato reale. Do not use it when: Non usarlo per il progresso di un'attività, un valore senza limite o un valore che le persone cambiano direttamente. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Lo standard copre solo l'ambito elencato. Non sceglie lo stile visivo, la decisione sul prodotto o l'esempio di vocabolario. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how Metro (Meter) is used now. Definition: Un indicatore mostra una misurazione all'interno di un intervallo noto. Può anche segnare intervalli bassi, alti e migliori. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.