# Sistema di progettazione ServiceNow Horizon ## Anteprima dell’interfaccia del sistema di progettazione sistema di design ServiceNow Horizon Mantieni le bozze tra i record, contrassegna una richiesta come esaminata e riprendi il lavoro dopo aver filtrato o riaperto. ## Riferimento di progettazione del sistema di progettazione sistema di design ServiceNow Horizon Riferimenti pubblicati di Horizon Workspace per spaziatura, raggi degli angoli e tipografia. I colori originali dell’applicazione sono intenzionalmente esclusi da questa tabella di riferimento ufficiale. ### Spaziatura pubblicata di Workspace | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $now-global-space--xxs | 2px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--xs | 4px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--sm | 8px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--md | 12px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--lg | 16px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--xl | 24px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--xxl | 32px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | | $now-global-space--3xl | 40px | Nomi esatti dei riferimenti Sass pubblicati; non sono proprietà personalizzate di CSS inventate. | ### Raggio degli angoli pubblicato | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | now-global-border-radius--sm | 2px | Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori. | | now-global-border-radius--md | 6px | Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori. | | now-global-border-radius--lg | 8px | Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori. | ### Ruoli tipografici pubblicati | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Heading family | Cabin | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | Body family | Lato | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | header-hero | 32px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | header-primary | 24px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | header-secondary | 20px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | header-tertiary | 16px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | title-primary | 20px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | | title-secondary | 16px | Ruoli tipografici documentati di Workspace. Lo studio carica localmente i file dei font pubblici Cabin e Lato. | ## Guida completa al sistema di progettazione sistema di design ServiceNow Horizon Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Ambito di Workspace e implementazione del sistema di progettazione sistema di design ServiceNow Horizon ### Inizia dal framework dell’app > Horizon supporta diversi framework per le app ServiceNow. Questa pagina si concentra su Workspace: una coda e il record selezionato restano visibili insieme, così chi esamina le richieste può gestire le attività locali senza perdere il contesto. Service Portal, Native Mobile e Core UI non vengono presentati come temi intercambiabili. Lo studio interattivo è un’applicazione originale HTML, non un’istanza ServiceNow incorporata. ### Distingui le basi verificate dalle scelte originali La documentazione di riferimento riporta i nomi esatti degli spaziature pubblicati, i valori dei raggi e i ruoli tipografici. Il verde per le azioni, le superfici neutre e il blu per il focus dello studio sono valori OpenDesign originali, dichiarati con un prefisso dell’app. Non sono presentati come esportazioni ufficiali dei token Horizon. Per eseguire l’esempio completo non è necessaria l’installazione di pacchetti ServiceNow inventati né una piattaforma API. ## Spaziatura, raggi e tipografia di Workspace nel sistema di progettazione sistema di design ServiceNow Horizon ### Usa la sequenza di spaziatura effettiva La scala documentata è 2, 4, 8, 12, 16, 24, 32 e 40px. Lo studio la usa per distinguere lo spazio tra la coda e il record, la spaziatura interna al record e le distanze più ridotte tra i metadati. Questi valori rispondono a diverse esigenze di raggruppamento, anche quando si ripete lo stesso intervallo. Una schermata con spaziatura uniforme perderebbe questa gerarchia. ### Assegna ruoli distinti ai titoli e al testo di lettura Cabin viene usato per i titoli e Lato per il testo del corpo, in linea con i ruoli pubblicati delle famiglie tipografiche. Lo studio usa un titolo di pagina da 32px sugli schermi più ampi e un titolo del record da 24px. I raggi di riferimento sono 2, 6 e 8px, non una sequenza generica presunta di 4/8/12. Le etichette di stato arrotondate non comunicano lo stato soltanto tramite forma o colore: riportano anche le parole Aperto o Esaminato. ## Coda, record selezionato e filtri nel sistema di progettazione sistema di design ServiceNow Horizon ### Mantieni un solo record selezionato Ogni azione nella coda indica una richiesta di esercitazione e ne mostra il responsabile e lo stato. Selezionandola, si compilano i dettagli adiacenti e si sposta il focus sul nuovo titolo. L’azione selezionata usa aria-current e un bordo visibile. Si tratta di un pattern originale di elenco e dettagli, non di un componente nativo di Horizon API; la logica completa degli stati è inclusa per poterla esaminare. ### Ripristina la selezione quando un filtro la rimuove Il filtro per stato restringe la coda visibile. Se la richiesta selezionata non rientra più nei risultati, l’applicazione seleziona la prima richiesta disponibile che corrisponde al filtro. Se non ne rimane nessuna, mostra un messaggio di elenco vuoto e un’azione Mostra tutte le richieste. Il conteggio usa come denominatore l’intera raccolta di tre record. Il filtro non elimina record né ne modifica lo stato senza avvisare. - Mantieni il record selezionato nell’insieme filtrato corrente. - Mostra uno stato vuoto chiaro quando l’insieme non contiene record. - Ripristina la coda con Mostra tutte le richieste, senza eliminare dati. ## Note in bozza e verifica dell’esame nel sistema di progettazione sistema di design ServiceNow Horizon ### Associa le bozze al rispettivo record Mentre chi esamina scrive, l’area di testo aggiorna una bozza associata al record corrispondente. Passando a un’altra richiesta e tornando indietro, la bozza viene mantenuta. Una nota vuota o composta solo da spazi non può contrassegnare una richiesta come esaminata: compare un errore in linea, viene impostato aria-invalid e il focus torna all’area di testo. Il modello dei dati mantiene espliciti la nota salvata e la bozza corrente. ### Rendi osservabile la transizione dello stato locale Una revisione riuscita salva la nota senza spazi superflui e modifica lo stato del record in Esaminato. La coda viene aggiornata in base al filtro corrente e un messaggio di stato indica il record interessato. Il messaggio specifica che nessun record è stato inviato a ServiceNow. In questo modo, una conferma visiva non lascia intendere che l’esempio abbia eseguito un’operazione sulla piattaforma che in realtà non ha effettuato. ## Riapertura e feedback accessibile nel sistema di progettazione sistema di design ServiceNow Horizon ### Conserva il lavoro utile alla riapertura L’azione Riapri richiesta riporta un record esaminato allo stato Aperto, mantenendone la nota salvata. Se è attivo il filtro Solo esaminati, l’elenco può restare vuoto; l’azione di ripristino rende quindi nuovamente disponibile l’intera coda. Questa combinazione mette alla prova la relazione tra stato del record, filtri e dettagli selezionati ed è più significativa del controllo isolato di ciascun pulsante. ### Combina testo, focus e stato I colori dello stato sono accompagnati da etichette testuali. La convalida sposta il focus sul campo da correggere, la navigazione tra i record lo sposta sul titolo e gli aggiornamenti locali vengono comunicati tramite una regione di stato. In un ambiente Workspace di produzione, lo studio non sostituisce i test con tecnologie assistive. Fornisce un flusso locale completo e ispezionabile da cui iniziare quei test. ## Codice sorgente locale completo e verifiche del sistema di progettazione sistema di design ServiceNow Horizon ### Installa le dipendenze pubbliche dei font Il file di ingresso fornito importa i pacchetti pubblici dei font Cabin e Lato e il foglio di stile originale della composizione. Il contenitore HTML fornisce l’elemento radice. Questo esempio non include runtime, credenziali o endpoint ServiceNow. Per un’integrazione effettiva con la piattaforma, è opportuno partire dalle risorse per sviluppatori e Workspace di Horizon, anziché considerare l’array locale dei record come un contratto API di ServiceNow. 1. Installa le dipendenze pubbliche dei font in un’app vanilla. 2. Salva il file di ingresso completo, il foglio di stile e il contenitore radice HTML. 3. Verifica che la bozza venga mantenuta prima di salvare una revisione. 4. Combina il filtro per stato con la riapertura e il ripristino dello stato vuoto. ### Verifica il flusso di lavoro integrato Invia una nota vuota, inserisci una bozza, apri un’altra richiesta e torna indietro per verificare che sia stata mantenuta. Contrassegna il record come esaminato, filtra gli elementi esaminati e riaprilo. Controlla il ripristino dello stato vuoto e la conservazione della nota. Sugli schermi stretti, la coda si dispone sopra i dettagli senza nascondere alcuna azione. Oltre a queste variazioni di stato, vengono verificati il caricamento dei font, gli errori JavaScript e lo scorrimento orizzontale. ## Esempi di componenti del sistema di progettazione sistema di design ServiceNow Horizon ### main.js — logica completa della coda e delle revisioni Tutti i record, le bozze, i filtri, la convalida e le procedure di ripristino. ``` import '@fontsource/cabin/latin-600.css'; import '@fontsource/lato/latin-400.css'; import '@fontsource/lato/latin-700.css'; import './horizon.css'; const records=[{id:'REQ-104',title:'Review the workshop outline',owner:'Design team',priority:'Normal',detail:'Compare the proposed agenda with the decision the team needs to make. Capture one question that should be resolved before the workshop.'},{id:'REQ-105',title:'Check the shared resource list',owner:'Content team',priority:'High',detail:'Review the resource titles for clear action language and confirm that each summary explains when the resource is useful.'},{id:'REQ-106',title:'Prepare the research readout',owner:'Research team',priority:'Normal',detail:'Group the observations by theme. Keep direct observations separate from the team’s interpretation and include the questions still open.'}].map(x=>({...x,status:'Open',note:''}));let selected=records[0].id; document.querySelector('#root').innerHTML=`

OpenDesign · Workflow study

Team review workspace

Review three original practice requests. Update a local record while keeping the queue and details in context.

`; function renderQueue(){let filter=document.querySelector('#filter').value,visible=records.filter(x=>filter==='All'||x.status===filter);if(!visible.some(x=>x.id===selected))selected=visible[0]?.id;const queue=document.querySelector('#queue');queue.replaceChildren(...visible.map(r=>{let b=document.createElement('button');b.className='queue-item';b.dataset.id=r.id;b.setAttribute('aria-current',String(r.id===selected));b.innerHTML=`${r.id}${r.title}${r.owner}${r.status}`;b.onclick=()=>{selected=r.id;renderQueue();renderDetail();document.querySelector('#record-title')?.focus()};return b}));document.querySelector('#queue-count').textContent=`${visible.length} of ${records.length} requests`;document.querySelector('#empty').hidden=visible.length>0;document.querySelector('#clear').hidden=visible.length>0;} function renderDetail(){const r=records.find(x=>x.id===selected),panel=document.querySelector('#detail');if(!r){panel.innerHTML='

Choose another status

All local requests are still available through the status filter.

';return}panel.innerHTML=`

${r.id} · ${r.owner}

${r.title}

${r.detail}

Priority
${r.priority}
Status
${r.status}

Write one useful observation. This note remains in the page.

`;const note=panel.querySelector('#note');note.value=r.draft??r.note;note.oninput=()=>{r.draft=note.value;document.querySelector('#error').hidden=true;note.removeAttribute('aria-invalid');document.querySelector('#feedback').textContent=''};panel.querySelector('#review').onsubmit=e=>{e.preventDefault();if(!note.value.trim()){document.querySelector('#error').hidden=false;note.setAttribute('aria-invalid','true');note.focus();return}r.note=note.value.trim();r.draft=r.note;r.status='Reviewed';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reviewed locally. No record was sent to ServiceNow.';document.querySelector('#record-title')?.focus();};panel.querySelector('#reopen').onclick=()=>{r.status='Open';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reopened. The saved review note is retained.';document.querySelector('#record-title')?.focus();};} document.querySelector('#filter').onchange=()=>{renderQueue();renderDetail();document.querySelector('#feedback').textContent=''};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All';renderQueue();renderDetail();document.querySelector('#filter').focus()};renderQueue();renderDetail(); ``` Riferimento del codice - Tutto il comportamento è implementato con codice originale dell’applicazione, non con un componente ufficiale di Workspace API. ### horizon.css — composizione originale Riferimenti documentati a tipografia, spaziatura e raggi, con colori originali dotati di prefisso dell’app. ``` :root{--app-ink:#21342c;--app-action:#285c47;--app-surface:#f2f5f3;--app-border:#c9d3cd;--app-error:#a32424;--app-radius-small:2px;--app-radius-medium:6px;--app-radius-large:8px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Lato,Arial,sans-serif;color:var(--app-ink);background:var(--app-surface)}main{max-width:1160px;margin:auto;padding:32px}h1,h2,h3{font-family:Cabin,Arial,sans-serif;font-weight:600;line-height:1.25}h1{font-size:32px;margin:8px 0 16px}h2{font-size:24px;margin:8px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}header>p:last-child{max-width:68ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}.toolbar label{display:flex;gap:12px;align-items:center}select,textarea,button{font:inherit}select{padding:8px;border:1px solid var(--app-border);border-radius:6px;background:white;color:var(--app-ink)}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:24px}nav{align-self:start}.queue-item{display:grid;gap:8px;width:100%;text-align:left;margin-bottom:12px;background:white;border:1px solid var(--app-border);border-radius:8px;padding:16px;color:var(--app-ink);cursor:pointer}.queue-item[aria-current=true]{border:2px solid var(--app-action);padding:15px;background:#e8f0ea}.queue-item strong{font-size:16px}.record-id,.queue-item>span{font-size:14px}.status{justify-self:start;border-radius:2px;padding:2px 8px;background:#e8eeeb}.status.reviewed{background:#d0ead9}.workspace section{background:white;padding:24px;border:1px solid var(--app-border);border-radius:8px;min-width:0}dl{display:flex;gap:40px;margin:24px 0}dt{font-size:14px;color:#58685f}dd{margin:4px 0;font-weight:700}form>label{font-weight:700}.hint{font-size:14px;margin:8px 0}textarea{width:100%;padding:12px;border:1px solid #6b7f72;border-radius:6px;resize:vertical;color:var(--app-ink)}button{border:1px solid #6b7f72;border-radius:6px;background:white;padding:8px 16px;color:var(--app-ink);cursor:pointer}.primary{background:var(--app-action);color:white;border-color:var(--app-action)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.error{color:var(--app-error);font-weight:700}.hint,.error{max-width:60ch}#feedback:empty{display:none}#feedback{background:#d0ead9;padding:16px;border-radius:6px}footer{font-size:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--app-border)}:focus-visible{outline:3px solid #477fd0;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.workspace section{padding:16px}h1{font-size:24px}.eyebrow{overflow-wrap:anywhere}} ``` Riferimento del codice - I valori dei colori originali non devono essere descritti come token ufficiali di Horizon. ### index.html — shell radice Il punto di ingresso completo per l’app autonoma. ``` Team review study
``` Riferimento del codice - Sostituisci il file index.html radice di Vite con questo file. ## Configurazione dell’agente del sistema di progettazione sistema di design ServiceNow Horizon ### Punto di partenza per l’implementazione Questo esegue solo lo studio originale. Un’implementazione nativa di ServiceNow richiede l’ambiente di sviluppo della piattaforma appropriato. ``` npm create vite@latest horizon-study -- --template vanilla cd horizon-study npm install npm install @fontsource/cabin@5.3.0 @fontsource/lato@5.3.0 # Save index.html at root; main.js and horizon.css in src. npm run dev ``` ### Un prompt per il tuo progetto ``` Realizza lo studio completo originale per la revisione delle richieste, usando i riferimenti verificati di Horizon Workspace per tipografia, spaziatura e raggio. Mantieni i colori originali con prefisso app. Conserva le bozze per singolo record, convalida prima della revisione, aggiorna la selezione filtrata dopo le modifiche di stato, conserva le note alla riapertura e prevedi il recupero in caso di elenco vuoto. Non dichiarare che esiste una connessione attiva a ServiceNow. ``` ## Fonti e ambito del sistema di progettazione sistema di design ServiceNow Horizon Studio originale OpenDesign HTML/CSS ispirato alle basi di Horizon Workspace. Utilizza i valori di tipografia e spaziatura/raggio documentati per Cabin/Lato, con colori e logica del flusso di lavoro originali. Non è un’istanza ServiceNow né un runtime nativo di Workspace. - Panoramica di Workspace Contesto del framework e risorse correlate. - Spaziatura Riferimenti esatti alla scala modulare e ai nomi Sass. - Raggio degli angoli Valori pubblicati di 2/6/8px. - Tipografia Cabin/Lato e ruoli dimensionali. - Indicazioni sui colori Scopo e indicatori di stato non basati sul colore. ## Risorse correlate del sistema di progettazione sistema di design ServiceNow Horizon ### ServiceTitan Anvil Rendi concreto Anvil2 con il suo modello di token a tre livelli, valori dei ruoli verificati per temi chiari e scuri e un’interazione completa per l’assegnazione dei servizi, con stati sincronizzati di tecnico, orario e revisione. ### Siemens iX Esamina gli eventi industriali con un vocabolario esplicito dei livelli di gravità, ruoli cromatici adattati al tema e iX Event List API. Questa guida crea un registro locale delle attrezzature senza confondere un record revisionato con un allarme macchina risolto. ### Sprout Social Seeds Esamina i token effettivi di Seeds per colori, spaziatura, tipografia di prodotto e bordi attraverso una coda editoriale completa, con selezione multipla, stati vuoti dopo il filtraggio e annullamento. - [Riferimento per l’implementazione](https://horizon.servicenow.com/workspace/overview) - [Fonte](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Fonte](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Fonte](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Riferimento del codice](https://horizon.servicenow.com/workspace/overview) - [Panoramica di Workspace Contesto del framework e risorse correlate.](https://horizon.servicenow.com/workspace/overview) - [Spaziatura Riferimenti esatti alla scala modulare e ai nomi Sass.](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Raggio degli angoli Valori pubblicati di 2/6/8px.](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Tipografia Cabin/Lato e ruoli dimensionali.](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Indicazioni sui colori Scopo e indicatori di stato non basati sul colore.](https://horizon.servicenow.com/workspace/foundations/color/color-overview)