Sito web
Design di sito web per tour notturno di Bianjing
Un viaggio notturno interattivo attraverso un’immaginaria Bianjing dell’epoca Song, che combina una città fluviale persistente, poesia, lanterne e un ritmo narrativo multilingue articolato per capitoli.
LLM Arena settembre 2026
Note sul caso- Modello
- GPT 6 Sol
- Attività di design
- Crea un viaggio notturno multilingue e interattivo attraverso un’immaginaria Bianjing dell’epoca Song.
- Output
- Sito web
Pensato per
- Siti web di storytelling culturaleTrasforma l’interpretazione storica in un viaggio digitale atmosferico e navigabile.
- Esperienze di mostra digitaleCollega una tipografia narrativa di grandi dimensioni a scene, capitoli e stati locali responsivi.
- Approfondimenti editoriali interattiviEsplora come un mondo Three.js fisso possa sostenere una storia di ampio respiro.
Punti salienti
- Città fluviale persistenteUn’unica città animata rimane sullo sfondo durante tutte e cinque le transizioni dei capitoli.
- Orientamento multilingueI controlli in cinese, inglese e giapponese restano visibili per tutta l’esperienza.
- Dalla poesia alle lanterneUna riga cinese selezionata viene trasferita dalla lettura alla conclusione.
Anteprima del sito web per tour notturno di Bianjing
1 / 6
Come il sito web per tour notturno di Bianjing costruisce il suo mondo
Design di sito web per tour notturno di Bianjing presenta una notte immaginaria nella Bianjing dell’epoca Song attraverso cinque capitoli collegati. La sua interpretazione culturale contemporanea trae il carattere urbano da Lungo il fiume durante la festa di Qingming e dagli scenari notturni della poesia classica. Non è un tour reale, un servizio di prenotazione né una ricostruzione storicamente verificata.
L’hero stabilisce immediatamente il dispositivo centrale: “Segui un fiume di luce di lanterne in una notte a Bianjing.” Una città fluviale persistente in Three.js si trova dietro il livello editoriale, mentre l’indicatore dei capitoli, il controllo Giorno / Notte e il selettore della lingua fanno percepire l’esperienza come un unico viaggio, anziché come cinque pagine non collegate.
Le evidenze visive mostrano un contrasto deliberato tra una città blu scuro, la luce calda delle finestre e una tipografia color crema di grandi dimensioni. Questa scala conferisce a ogni capitolo un registro emotivo inconfondibile, ma riduce anche lo spazio disponibile per controlli densi. Il design colloca quindi i gruppi di interazione sotto o accanto all’affermazione principale, invece di competere con essa.
Un’interpretazione contemporanea
La fonte identifica materiale pittorico di pubblico dominio, versi classici di pubblico dominio e illustrazioni ispirate alla dinastia Song create con l’IA. Questi elementi definiscono un’interpretazione progettata del luogo, non dimostrano che le strade, gli edifici o il viaggio rappresentati siano esistiti come mostrato.
Questo confine è utile per i team culturali: l’esperienza può prendere in prestito atmosfere visive e poetiche mantenendo esplicita la propria cornice. La nota conclusiva ribadisce la distinzione, descrivendo un’immaginazione contemporanea invece di rappresentare un luogo reale.
Dove si inserisce questo modello di storytelling culturale
Questo caso è adatto a organizzazioni culturali, team editoriali e progettisti di esperienze che sviluppano una narrazione digitale guidata a partire da archivi visivi. Dimostra come esplorare un luogo attraverso sequenza, atmosfera e contesto interpretativo, invece di una mappa convenzionale o di una pagina di destinazione.
I cinque capitoli creano un modello di ritmo utile. I visitatori incontrano prima la città alla Porta sull’acqua, attraversano il Ponte Arcobaleno, entrano nel mercato, si fermano con la poesia sull’acqua e terminano con le lanterne che ritornano. Ogni tappa cambia il soggetto, mentre la città sottostante preserva la continuità.
Interpretazione guidata dall’archivio
Usa un dipinto di pubblico dominio come riferimento visivo, circondandolo con una nuova scena atmosferica. Nel capitolo del mercato, l’immagine di origine appare sotto la scena interattiva attraverso il percorso “Visualizza opera completa”, così il materiale d’archivio sostiene l’interpretazione senza sostituirla.
Mostra articolata per capitoli
Trasforma una storia di ampio respiro in cinque momenti distinti e navigabili. La navigazione persistente 01–05 fornisce orientamento, mentre etichette come “Tè · Seta · Il suono della strada” stabiliscono un’attenzione sensoriale mutevole.
Lettura interattiva della poesia
Permetti ai lettori di selezionare una riga, invece di trattare la poesia come una decorazione statica. Il finale delle lanterne sul fiume porta la riga testata “海上明月共潮生。” in un momento conclusivo più ampio, collegando la lettura alla scena finale.
Come cinque capitoli condividono un’unica città animata
La pagina usa un’unica tela animata fissa con sei catture a schermo intero che rappresentano l’hero e i cinque capitoli. Una striscia di navigazione leggera deriva da quella scena continua, mentre il caricamento originale della galleria rimane invariato. Questa struttura permette alla città di persistere mentre avanza il livello editoriale.
I controlli sono intenzionalmente stabili. Cinese, EN e 日本語 rimangono nella navigazione superiore, insieme a Giorno / Notte e ai numeri dei capitoli. I controlli della lingua indicano un sistema di design multilingue, mentre le evidenze fornite non stabiliscono la completezza o il comportamento in esecuzione di ogni traduzione.
Livello stabile
La città fluviale e la navigazione dei capitoli conservano l’orientamento mentre il visitatore cambia attenzione.
Livello mutevole
La selezione del mercato e delle lanterne fornisce una risposta locale senza richiedere una nuova pagina.
Livello editoriale
Titoli grandi e brevi descrizioni delle scene regolano il ritmo emotivo di ogni stato.
| Elemento osservato | Effetto sul lettore | Compromesso |
|---|---|---|
| Scena fluviale persistente | Mantiene la continuità spaziale tra i capitoli | Può competere con testo e controlli |
| Quattro controlli del mercato | Aggiunge causa-effetto locale | Aumenta la densità delle interazioni |
| Riga cinese selezionata | Collega la lettura al finale | Richiede attenzione alla lingua e alla leggibilità dello stato |
Dalla porta al ponte
Il primo capitolo colloca il visitatore alla Porta sull’acqua, tra nebbia, gronde sovrapposte e una barca che emerge dall’oscurità. Il secondo riformula lo stesso fiume come un attraversamento: lanterne sul Ponte Arcobaleno, barche sotto di esso e sagome sul ponte. Il riutilizzo dell’acqua rende leggibile la transizione, mentre il passaggio da soglia ad attraversamento mantiene in movimento la narrazione.
Stato del mercato e feedback locale
Il capitolo del mercato introduce quattro controlli: Venditore di tè, Negozio di seta, Fiori di ferro e Fuochi d’artificio. Lo stato testato di Fuochi d’artificio modifica il messaggio locale, mostrando come una piccola interazione possa alterare il significato di una scena stabile. Il compromesso è la densità: quattro controlli, testo esplicativo e scena visiva competono tutti con il titolo del capitolo di grandi dimensioni.
Navigazione della poesia e ritorno
Il capitolo della poesia cambia il ritmo, dall’attività della strada alla lettura ravvicinata. Inizia con “Ormeggio presso il ponte degli aceri di notte”, identifica Zhang Ji e i Tang e offre controlli per la poesia precedente e successiva con una posizione 1 / 4 visibile. La navigazione prosegue poi verso “Canto del fiume serale”, trasformando la poesia in una sequenza anziché in una singola citazione.
Cosa dimostra il sito web per tour notturno di Bianjing
L’artefatto fornito è un’esperienza digitale guidata dal design, rappresentata da catture a schermo intero di una scena Three.js fissa. Le catture dimostrano la composizione visibile, le etichette, l’ordine dei capitoli e stati testati come Fuochi d’artificio e la riga selezionata delle lanterne sul fiume. Da sole non dimostrano servizi backend, prenotazioni, dati persistenti degli utenti o il comportamento della piattaforma in produzione.
La principale sfida progettuale consiste nel bilanciare atmosfera e leggibilità. La tipografia editoriale di grandi dimensioni rende memorabili i capitoli e sostiene un ritmo di lettura lento, ma aree dense come i controlli del mercato e le schede della poesia necessitano di contrasto, spaziatura e adattamento responsivo sufficienti per rimanere leggibili. Il cambio giorno/notte e i controlli multilingue dovrebbero essere valutati come stati dell’interfaccia, non presunti in base alla loro presenza visiva.
Anche il pannello di scoperta delle lanterne modella un’interpretazione responsabile. Specifica esplicitamente che una poesia di Hangzhou citata non parla di Bianjing, offrendo i versi per i loro aceri sul fiume, le luci dei pescatori e l’atmosfera notturna su una barca. Questa nota preserva l’associazione poetica senza presentarla come prova geografica.
Come creare in OpenDesign un design di sito web per tour notturno di Bianjing
Imposta la scena continua
Costruisci un’unica tela di città fluviale in grado di supportare cinque inquadrature narrative: Porta sull’acqua, Ponte Arcobaleno, Mercato notturno, Poesia sull’acqua e Finale delle lanterne sul fiume. Mantieni persistenti l’indicatore dei capitoli e i controlli della lingua. Verifica che ogni inquadratura abbia un soggetto distinto, mentre il fiume, la luce delle lanterne e la profondità della città continuano a collegare la sequenza.
Prompt suggeritoCrea un sito web multilingue di storytelling notturno su un’immaginaria città storica. Usa un’unica scena fluviale persistente in stile Three.js dietro cinque capitoli a schermo intero: Porta sull’acqua, Ponte Arcobaleno, Mercato notturno, Poesia sull’acqua e Finale delle lanterne sul fiume. Includi controlli in cinese, inglese e giapponese, un controllo Giorno / Notte, numeri dei capitoli, titoli editoriali di grandi dimensioni e un’area compatta per le interazioni locali. Aggiungi quattro scelte di mercato — Venditore di tè, Negozio di seta, Fiori di ferro e Fuochi d’artificio — con un messaggio locale modificato per Fuochi d’artificio. Aggiungi un lettore di poesie con quattro posizioni, quindi trasferisci una riga cinese selezionata nello stato finale delle lanterne. Tratta tutta la storia come un’interpretazione contemporanea, non come un tour reale, un flusso di prenotazione o una ricostruzione verificata. Mantieni leggibili i testi visibili con il movimento ridotto ed evita di presumere l’uso di archiviazione backend.
Affina la densità delle interazioni
Usa il capitolo del mercato per verificare l’equilibrio tra atmosfera e azione. Mantieni comprensibili i quattro controlli accanto al titolo grande e fai in modo che la risposta testata di Fuochi d’artificio sia chiaramente locale, invece di modificare l’intero viaggio. Nel capitolo della poesia, mostra il titolo, l’attribuzione, la posizione 1 / 4 e la relazione precedente/successiva, senza permettere alla scala decorativa di oscurare i versi.
Verifica il viaggio dall’inizio alla fine
Rivedi ogni inquadratura dei capitoli su desktop e su larghezze ridotte. Verifica che il cambio di lingua conservi il capitolo corrente, che la presentazione con movimento ridotto mantenga leggibili il contesto della scena e i controlli e che una riga selezionata resti identificabile quando raggiunge il Finale delle lanterne sul fiume. Conferma che la nota sulla poesia di Hangzhou resti associata alla citazione e che le opere d’arte d’archivio siano presentate chiaramente come materiale di origine.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.
Design sito web carriere
Uno studio carriere Kimi costruito su otto scene lunari, con transizioni collegate allo scroll e un processo di candidatura illustrato.
Sito web
Design di Sito Portfolio Creativo
Il portfolio fittizio di Maya Rowan collega schede progetto, pratica e note.
Sito web
Design di un sito web per il ripristino forestale
Esplora Second Spring, dove un ramo caduto interattivo conduce a storie dal campo, a un piano di ripristino forestale e a modalità simulate per contribuire.
Sito web
Design di un sito web per ristorante hotpot
Yàn Huǒ presenta l’hotpot attraverso un menu d’autore con prezzi, una galleria dedicata all’esperienza gastronomica e i dettagli per la visita prima della prenotazione.
Sito web