Una guida Orbit dedicata ai viaggi, con colori e spaziature effettivi del prodotto, opzioni native per i bagagli, un riepilogo dei prezzi coerente e un flusso completo di revisione locale.
Layout di selezione viaggi del sistema di progettazione sistema di design Kiwi Orbit
Mostra l’itinerario prima degli extra
Il riepilogo dell’itinerario mostra i codici dei due aeroporti, i nomi delle città e una durata fittizia prima delle opzioni per il bagaglio. In questo modo il contesto dell’acquisto resta visibile mentre l’utente confronta gli extra. Il tratteggio è un’illustrazione originale CSS, non una grafica del percorso di un vettore né una promessa relativa a un servizio reale.
Tieni separate le scelte dal totale
I viaggiatori e i bagagli sono da un lato, mentre il dettaglio dei prezzi è accanto. Lo stesso stato determina sia i controlli selezionati sia gli importi. Sul telefono, il riepilogo segue le scelte nell’ordine del documento, così è chiaro quali opzioni determinano il totale.
Colori del prodotto e feedback nel sistema di progettazione sistema di design Kiwi Orbit
Usa la palette del prodotto per l’azione principale
Il pacchetto di token fornisce un’azione del prodotto verde, con tonalità distinte per hover e active. Il riferimento elenca i valori esatti del ruolo del pulsante, anziché basarsi su un verde del brand ipotizzato. Le superfici neutre color nuvola incorniciano gli extra selezionabili senza fare concorrenza all’azione di revisione.
Fai in modo che il feedback rispecchi il risultato
L’avviso di successo nativo dice «Selezione esaminata in locale» e indica il numero di viaggiatori e il totale. Viene cancellato ogni volta che cambia una scelta. Una conferma verde precedente non può quindi restare visibile come se convalidasse un nuovo insieme di extra modificato.
Tipografia e gerarchia dei prezzi nel sistema di progettazione sistema di design Kiwi Orbit
Usa gli stili di testo nativi per i contenuti esplicativi
Orbit offre stili nativi per il corpo del testo da 13px (piccolo) e 15px (normale), oltre ad altri formati più grandi. L’esempio usa i componenti nativi Text e Heading, mentre i codici dell’itinerario e il totale sono messi in risalto appositamente. Qui il browser usa uno stack di font di fallback documentato; il font del brand Kiwi.com non viene caricato di nascosto.
Mantieni le unità accanto agli importi
Il prezzo di ogni bagaglio è indicato per viaggiatore. Il dettaglio moltiplica ogni extra selezionato per il numero di viaggiatori e il totale risalta più delle singole voci. L’unità non deve scomparire su mobile: senza indicarne l’ambito, un numero grande e accattivante può essere facilmente interpretato male.
Scale di raggi e spaziature del sistema di progettazione sistema di design Kiwi Orbit
Distingui i controlli dalle superfici più ampie
La scala attuale dei raggi comprende valori di 2, 4, 6, 8, 12 e 16px, oltre a none e full. I pannelli dell’itinerario e del riepilogo creati appositamente usano angoli da 12px, mentre i controlli nativi mantengono le regole del proprio tema. Applicare il raggio più ampio a ogni elemento annidato farebbe perdere gerarchia al modulo.
Mantieni integra la riga dell’opzione anche quando va a capo
Checkbox e Select controllati nel sistema di progettazione sistema di design Kiwi Orbit
Usa le etichette dei componenti e i campi informativi
Checkbox riceve l’etichetta visibile e le informazioni di supporto tramite le props pubbliche. Select riceve un’etichetta e opzioni esplicite per scegliere da uno a quattro viaggiatori. Queste composizioni native mantengono il comportamento di interazione e di etichettatura senza ricorrere a un div cliccabile che finge di essere un controllo per il bagaglio.
Gestisci ogni extra in modo indipendente
Il bagaglio a mano e quello da stiva sono booleani separati. L’applicazione non presume che selezionarne uno deselezioni automaticamente l’altro. È una regola volutamente semplice per questo esempio; una compagnia aerea reale potrebbe avere pacchetti incompatibili o franchigie specifiche per passeggero, che richiederebbero un modello diverso.
Calcolo e revisione della selezione nel sistema di progettazione sistema di design Kiwi Orbit
Calcola il totale con un’unica formula
L’esempio calcola il numero di viaggiatori moltiplicato per la tariffa base più gli extra selezionati per persona. Non memorizza un totale modificabile a parte, che potrebbe non corrispondere alle opzioni visibili. Tutti i prezzi e le franchigie sono dichiaratamente fittizi e non rappresentano offerte Kiwi.com attuali.
Salva un’istantanea della revisione
La revisione salva insieme il numero di viaggiatori, le scelte sui bagagli e il totale. Se si modifica un controllo, l’istantanea viene cancellata. L’esempio illustra quindi la coerenza dello stato senza presentare un clic locale come prenotazione, pagamento, verifica della disponibilità in tempo reale o preventivo definitivo.
Feedback accessibile sulle scelte nel sistema di progettazione sistema di design Kiwi Orbit
Verifica insieme le etichette e il ricalcolo
Chi usa la tastiera o il puntatore può selezionare i viaggiatori e attivare una delle due opzioni per il bagaglio con i controlli nativi. L’esito della revisione appare in un’area di stato. Non vengono inventati errori di convalida per il bagaglio facoltativo: lasciare deselezionati entrambi gli extra è una scelta valida per questa tariffa fittizia.
Seleziona due viaggiatori e aggiungi il bagaglio a mano.
Aggiungi il bagaglio da stiva e verifica tutti e tre gli importi del dettaglio.
Esamina la selezione in locale, modifica una scelta e verifica che il messaggio di successo precedente scompaia.
Evita conseguenze nascoste
La pagina chiarisce che si tratta di un esempio fittizio sia prima del modulo sia accanto al totale. L’azione è «Esamina la selezione in locale», non «Acquista» o «Prenota». Tutte le modifiche restano nella pagina e, per una dimostrazione che non ne ha bisogno, non vengono richiesti dati personali dei passeggeri.
Provider e stili compilati nel sistema di progettazione sistema di design Kiwi Orbit
Usa la versione stabile corrispondente
Questo esempio usa React components 27.7.0 e i riferimenti ai token 11.0.0. Importa OrbitProvider, il defaultTheme del pacchetto e il file compilato lib/tailwind.css. Senza questo foglio di stile, gli stili dei componenti basati su utility resterebbero incompleti, anche se l’albero React venisse renderizzato.
OrbitProvider e defaultTheme del pacchetto.
lib/tailwind.css compilato da components 27.7.0.
Node.js 22 o versione successiva per l’ambiente di build del pacchetto.
Specifica chiaramente i requisiti di distribuzione
Esempi di componenti del sistema di progettazione sistema di design Kiwi Orbit
main.jsx — esempio completo funzionante
Scegli il bagaglio e consulta un esempio di totale. Il codice seguente è la voce React completa, con tutto lo stato e la convalida.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
OrbitProvider,
Button,
Checkbox,
Select,
Alert,
Heading,
Text,
} from "@kiwicom/orbit-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import "@kiwicom/orbit-components/lib/tailwind.css";
import "./orbit.css";
function App() {
const [travellers, setTravellers] = useState("1"),
[cabin, setCabin] = useState(false),
[checked, setChecked] = useState(false),
[saved, setSaved] = useState(null);
const count = Number(travellers),
extras = (cabin ? 18 : 0) + (checked ? 32 : 0),
total = count * (96 + extras);
function update(fn) {
fn();
setSaved(null);
}
return (
<OrbitProvider theme={defaultTheme}>
<main className="trip">
<header>
<Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
<Heading as="h1" type="title1">Choose what travels with you</Heading>
<Text>
Fictional one-way fare. Prices illustrate the interface, not a
bookable flight.
</Text>
</header>
<div className="trip-grid">
<section>
<div className="route">
<div>
<strong>PRG</strong>
<span>Prague</span>
</div>
<div className="route-line">
<span>1h 45m · direct</span>
<i></i>
</div>
<div>
<strong>AMS</strong>
<span>Amsterdam</span>
</div>
</div>
<div className="options">
<Heading as="h2" type="title3">Travellers and baggage</Heading>
<Select
label="Travellers"
ariaLabel="Travellers"
value={travellers}
options={[1, 2, 3, 4].map((n) => ({
value: String(n),
label: n + " adult" + (n === 1 ? "" : "s"),
}))}
onChange={(e) => update(() => setTravellers(e.target.value))}
/>
<div className="bag-option">
<div>
<Heading as="h3" type="title4">Personal item</Heading>
<Text size="small">
Fits under the seat · included in this example fare
</Text>
</div>
<strong>Included</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add cabin baggage"
info="One 10 kg bag per traveller · fictional allowance"
checked={cabin}
onChange={(e) => update(() => setCabin(e.target.checked))}
/>
<strong>
€18<span>/ traveller</span>
</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add checked baggage"
info="One 20 kg bag per traveller · fictional allowance"
checked={checked}
onChange={(e) => update(() => setChecked(e.target.checked))}
/>
<strong>
€32<span>/ traveller</span>
</strong>
</div>
</div>
</section>
<aside>
<Heading as="h2" type="title3">Your example selection</Heading>
<dl>
<dt>Base fare × {count}</dt>
<dd>€{96 * count}</dd>
{cabin && (
<>
<dt>Cabin baggage × {count}</dt>
<dd>€{18 * count}</dd>
</>
)}
{checked && (
<>
<dt>Checked baggage × {count}</dt>
<dd>€{32 * count}</dd>
</>
)}
</dl>
<div className="trip-total">
<span>Total</span>
<strong>€{total}</strong>
</div>
<Text size="small">
All amounts are illustrative. No payment or reservation will be
created.
</Text>
<Button
fullWidth
onClick={() => setSaved({ count, cabin, checked, total })}
>
Review local selection
</Button>
{saved && (
<div role="status" className="trip-confirm">
<Alert type="success" title="Selection reviewed locally">
{saved.count} traveller{saved.count === 1 ? "" : "s"} · €
{saved.total}. No booking created.
</Alert>
</div>
)}
</aside>
</div>
<footer>
Native Orbit 27.7.0 components and compiled package styles. Original
layout and fictional pricing logic by OpenDesign.
</footer>
</main>
</OrbitProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Salva il file accanto a main.jsx. Queste regole di composizione personalizzate sono distinte dal riferimento ai token della libreria.
04
Configurazione dell’agente per il sistema di progettazione sistema di design Kiwi Orbit
Punto di partenza per l’implementazione
L’esempio nativo bloccato è stato incluso nel bundle e verificato localmente nel browser. L’esempio usa solo lo stato locale dell’applicazione.
sh
npm create vite@latest orbit-trip -- --template react
cd orbit-trip
npm install
npm install [email protected][email protected] @kiwicom/[email protected]
# Use Node.js >=22. Replace src/main.jsx and add src/orbit.css.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea un selettore di extra per il viaggio con i componenti nativi Orbit e gli stili compilati. Mantieni coerenti il contesto dell’itinerario, i prezzi per viaggiatore, gli extra scelti e il totale. Indica chiaramente che i prezzi sono fittizi e che la revisione avviene in locale; cancella le revisioni non più valide dopo una modifica e non suggerire funzionalità di prenotazione o pagamento.
05
Fonti e ambito del sistema di progettazione sistema di design Kiwi Orbit
Guida per l’applicazione OpenDesign. L’itinerario, la durata, i prezzi e le franchigie bagaglio sono fittizi. I controlli nativi Orbit funzionano in locale; non vengono effettuati ricerche di voli, prenotazioni o pagamenti.
