Site
Design de Site de Tour Noturno por Bianjing
Uma jornada noturna interativa por uma Bianjing imaginada da era Song, combinando uma cidade fluvial contínua, poesia, lanternas e ritmo de capítulos multilíngue.
LLM Arena Set 2026
Notas do caso- Modelo
- GPT 6 Sol
- Tarefa de design
- Crie uma jornada noturna multilíngue e interativa por uma Bianjing imaginada da era Song.
- Saída
- Site
Projetado Para
- Sites de Narrativa CulturalTransforme a interpretação histórica em uma jornada digital atmosférica e navegável.
- Experiências de Exposição DigitalConecte tipografia narrativa superdimensionada a cenas, capítulos e estados locais responsivos.
- Recursos Editoriais InterativosExplore como um mundo fixo em Three.js pode conduzir uma narrativa longa.
Destaques Principais
- Cidade Fluvial PersistenteUma única cidade animada permanece atrás das cinco transições de capítulo.
- Orientação MultilíngueOs controles em chinês, inglês e japonês permanecem visíveis durante toda a experiência.
- Da Poesia às LanternasUma linha chinesa selecionada é levada da leitura até o encerramento.
Prévia do Site de Tour Noturno por Bianjing
1 / 6
Como o Site de Tour Noturno por Bianjing Constrói seu Mundo
O Design de Site de Tour Noturno por Bianjing apresenta uma noite imaginada na Bianjing da era Song por meio de cinco capítulos conectados. Sua interpretação cultural contemporânea extrai seu temperamento urbano de Along the River During the Qingming Festival e dos cenários noturnos da poesia clássica. Não se trata de um tour real, serviço de reservas ou reconstrução historicamente verificada.
O destaque estabelece imediatamente o dispositivo central: “Siga um rio de luz de lanternas por uma noite em Bianjing.” Uma cidade fluvial persistente em Three.js fica atrás da camada editorial, enquanto o indicador de capítulo, o controle Day / Night e o seletor de idioma fazem a experiência ser percebida como uma única jornada, e não como cinco páginas sem relação.
As evidências visuais mostram um contraste deliberado entre uma cidade azul-escura, a luz quente das janelas e uma tipografia creme superdimensionada. Essa escala dá a cada capítulo um registro emocional inconfundível, mas também reduz o espaço disponível para controles densos. Por isso, o design posiciona os grupos de interação abaixo ou ao lado da afirmação principal, em vez de fazê-los competir com ela.
Uma Interpretação Contemporânea
A fonte identifica material de pintura em domínio público, versos clássicos em domínio público e ilustrações inspiradas na era Song criadas por IA. Esses elementos estabelecem uma interpretação projetada do lugar, não evidências de que as ruas, os edifícios ou a jornada retratados tenham existido como mostrados.
Esse limite é útil para equipes culturais: a experiência pode tomar emprestadas atmosferas visuais e poéticas, mantendo explícito seu enquadramento. A nota final repete essa distinção, descrevendo uma imaginação contemporânea em vez de representar qualquer lugar real.
Onde Este Padrão de Narrativa Cultural se Encaixa
Este caso é adequado para organizações culturais, equipes editoriais e designers de experiências que desenvolvem uma narrativa digital guiada a partir de arquivos visuais. Ele demonstra como um lugar pode ser explorado por meio de sequência, atmosfera e contexto interpretativo, em vez de um mapa convencional ou uma página de destino.
Os cinco capítulos criam um modelo útil de ritmo. Primeiro, os visitantes encontram a cidade no Water Gate, atravessam a Rainbow Bridge, entram no mercado, fazem uma pausa com a poesia à beira do rio e terminam com as lanternas que retornam. Cada parada muda o tema, enquanto a cidade subjacente preserva a continuidade.
Interpretação Orientada pelo Arquivo
Use uma pintura em domínio público como referência visual, envolvendo-a com uma nova cena atmosférica. No capítulo do mercado, a imagem de origem aparece abaixo da cena ao vivo por meio de uma rota “View full artwork”, para que o material de arquivo apoie a interpretação sem substituí-la.
Exposição Baseada em Capítulos
Transforme uma narrativa longa em cinco momentos distintos e navegáveis. A navegação persistente 01–05 oferece orientação, enquanto rótulos de capítulo como “Tea · Silk · The Sound Of The Street” estabelecem um foco sensorial em transformação.
Leitura Interativa de Poesia
Permita que os leitores selecionem uma linha, em vez de tratar a poesia como decoração estática. O final das lanternas no rio leva a linha testada “海上明月共潮生。” a um momento de liberação maior, conectando a leitura à cena final.
Como Cinco Capítulos Compartilham uma Cidade Animada
A página usa uma única tela animada fixa com seis capturas em tela cheia, representando o destaque e os cinco capítulos. Uma faixa de navegação leve é derivada dessa cena contínua, enquanto o upload original da galeria permanece inalterado. Essa estrutura permite que a cidade persista enquanto a camada editorial avança.
Os controles são intencionalmente estáveis. Chinese, EN e 日本語 permanecem na navegação superior, ao lado de Day / Night e dos números de capítulo. Os controles de idioma sinalizam um sistema de design multilíngue, enquanto as evidências fornecidas não estabelecem a completude nem o comportamento em tempo de execução de todas as traduções.
Camada Estável
A cidade fluvial e a navegação de capítulos preservam a orientação enquanto o visitante muda o foco.
Camada Mutável
A seleção do mercado e das lanternas fornece uma resposta local sem exigir uma nova página.
Camada Editorial
Títulos grandes e descrições curtas de cena controlam o ritmo emocional de cada estado.
| Elemento Observado | Efeito no Leitor | Desvantagem |
|---|---|---|
| Cena fluvial persistente | Mantém a continuidade espacial entre os capítulos | Pode competir com texto e controles |
| Quatro controles do mercado | Adiciona causa e resposta locais | Aumenta a densidade da interação |
| Linha chinesa selecionada | Conecta a leitura ao final | Exige cuidado com o idioma e a legibilidade do estado |
Do Portão à Ponte
O primeiro capítulo coloca o visitante no Water Gate, com névoa, beirais em camadas e um barco emergindo da escuridão. O segundo reformula o mesmo rio como uma travessia: lanternas na Rainbow Bridge, barcos sob ela e silhuetas no convés. Reutilizar a água torna a transição compreensível, enquanto a mudança de limiar para passagem mantém a narrativa em movimento.
Estado do Mercado e Feedback Local
O capítulo do mercado introduz quatro controles: Tea Seller, Silk Shop, Iron Flowers e Fireworks. O estado testado de Fireworks altera a mensagem local, mostrando como uma pequena interação pode mudar o significado de uma cena estável. A desvantagem é a densidade: quatro controles, texto explicativo e a cena visual competem com o título de capítulo superdimensionado.
Navegação do Poema e Retorno
O capítulo de poesia muda o ritmo da atividade de rua para a leitura atenta. Ele começa com “Mooring by Maple Bridge at Night”, identifica Zhang Ji e Tang e oferece controles de poema anterior e próximo com uma posição 1 / 4 visível. A navegação então continua até “Chant of the Evening River”, transformando a poesia em uma sequência, e não em uma única citação.
O que o Site de Tour Noturno por Bianjing Demonstra
O artefato fornecido é uma experiência digital orientada pelo design, representada por capturas em tela cheia de uma cena fixa em Three.js. As capturas comprovam a composição visível, os rótulos, a ordem dos capítulos e estados testados, como Fireworks e a linha selecionada das lanternas do rio. Por si só, elas não comprovam serviços de backend, reservas, dados persistentes do usuário ou comportamento da plataforma em produção.
O principal desafio de design é equilibrar atmosfera e legibilidade. A tipografia editorial superdimensionada torna os capítulos memoráveis e favorece um ritmo de leitura lento, mas áreas densas, como os controles do mercado e os cartões de poemas, precisam de contraste, espaçamento e adaptação responsiva suficientes para permanecer legíveis. A alternância Day/night e os controles multilíngues devem ser avaliados como estados de interface, e não presumidos apenas por sua presença visual.
O painel de descoberta das lanternas também modela uma interpretação responsável. Ele observa explicitamente que um poema citado de Hangzhou não trata de Bianjing, oferecendo o verso por causa de seus bordos de rio, luzes de pesca e atmosfera noturna em um barco. Essa nota preserva a associação poética sem apresentá-la como evidência geográfica.
Como Criar um Design de Site de Tour Noturno por Bianjing no OpenDesign
Defina a Cena Contínua
Crie uma única tela de cidade fluvial capaz de sustentar cinco enquadramentos de capítulos: Water Gate, Rainbow Bridge, Night Market, Poetry By The Water e River Lantern Finale. Mantenha o indicador de capítulo e os controles de idioma persistentes. Verifique se cada enquadramento tem um tema distinto, enquanto o rio, a luz das lanternas e a profundidade da cidade continuam conectando a sequência.
Prompt sugeridoCrie um site multilíngue de narrativa noturna sobre uma cidade histórica imaginada. Use uma única cena fluvial persistente, no estilo Three.js, atrás de cinco capítulos em tela cheia: Water Gate, Rainbow Bridge, Night Market, Poetry By The Water e River Lantern Finale. Inclua controles em chinês, inglês e japonês, um controle Day / Night, números de capítulo, títulos editoriais superdimensionados e uma área compacta de interação local. Adicione quatro opções de mercado — Tea Seller, Silk Shop, Iron Flowers e Fireworks — com uma mensagem local alterada para Fireworks. Adicione um leitor de poemas com quatro posições e, em seguida, leve uma linha chinesa selecionada para o estado final das lanternas. Trate toda a história como uma interpretação contemporânea, não como um tour real, fluxo de reservas ou reconstrução verificada. Mantenha o texto visível legível com movimento reduzido e não presuma armazenamento em backend.
Refine a Densidade da Interação
Use o capítulo do mercado para testar o equilíbrio entre atmosfera e ação. Mantenha os quatro controles compreensíveis ao lado do título grande e faça com que a resposta testada de Fireworks seja claramente local, em vez de alterar toda a jornada. No capítulo de poesia, mostre o título, a atribuição, a posição 1 / 4 e a relação anterior/próximo sem permitir que a escala decorativa obscureça o verso.
Verifique a Jornada de Ponta a Ponta
Revise cada enquadramento de capítulo em larguras de desktop e estreitas. Verifique se a troca de idioma preserva o capítulo atual, se a apresentação com movimento reduzido mantém o contexto da cena e os controles legíveis e se uma linha selecionada continua identificável ao chegar ao River Lantern Finale. Confirme que a nota sobre o poema de Hangzhou permanece associada à sua citação e que a obra de arte de arquivo é apresentada claramente como material de origem.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de Site de Carreiras
Um estudo de carreiras da Kimi construído a partir de oito cenas lunares, com transições vinculadas à rolagem e um processo de candidatura ilustrado.
Site
Design de Site de Portfólio Criativo
O portfólio fictício de Maya Rowan conecta cartões de projetos, prática e notas.
Site
Design de site de restauração florestal
Explore o Second Spring, onde um galho caído interativo conduz a relatos de campo sobre a floresta, um plano de restauração e formas simuladas de contribuir.
Site
Design de site para restaurante de hotpot
Yàn Huǒ apresenta o hotpot por meio de um menu de especialidades com preços, uma galeria do salão e informações para visita antes da reserva.
Site