Web sitesi

Bianjing Gece Turu Web Sitesi Tasarımı

Hayalî Song dönemi Bianjing'inde, kalıcı bir nehir kenti, şiir, fenerler ve çok dilli bölüm akışını birleştiren etkileşimli bir gece yolculuğu.

OpenDesignTasarım ve prodüksiyon
Resmi
Etkileşimli Tarihsel Anlatı6 bölüm
Bianjing Gece Turu Web Sitesi Tasarımı: İngilizce fenerlerle aydınlatılmış nehir kenti hero alanı
Bianjing Karanlıktan Sonra · Gece ManzarasıEkran görüntüsü 1 / toplam 6

LLM Arena Eylül 2026

Vaka notları
Model
GPT 6 Sol
Tasarım görevi
Hayalî Song dönemi Bianjing'inde çok dilli, etkileşimli bir gece yolculuğu oluşturun.
Çıktı
Web sitesi

Şunlar İçin Tasarlandı

  • Kültürel Hikâye Anlatımı Web SiteleriTarihsel yorumu atmosferik, gezinilebilir bir dijital yolculuğa dönüştürün.
  • Dijital Sergi DeneyimleriBüyük anlatı tipografisini sahneler, bölümler ve duyarlı yerel durumlarla birleştirin.
  • Etkileşimli Editoryal ÖzelliklerSabit bir Three.js dünyasının uzun soluklu bir hikâyeyi nasıl taşıyabileceğini keşfedin.

Öne Çıkanlar

  • Kalıcı Nehir KentiTek bir animasyonlu kent, beş bölüm geçişinin tamamının arkasında kalır.
  • Çok Dilli Yön BulmaÇince, İngilizce ve Japonca kontrolleri deneyim boyunca görünür kalır.
  • Şiirden FenerlereSeçilen bir Çince dize, okumadan sona taşınır.

Bianjing Gece Turu Web Sitesi Dünyasını Nasıl Kuruyor

Bianjing Gece Turu Web Sitesi Tasarımı, hayalî Song dönemi Bianjing'inde bir geceyi birbirine bağlı beş bölüm aracılığıyla sunar. Çağdaş kültürel yorumu, kentsel havasını Along the River During the Qingming Festival'dan ve klasik şiirin gece tasvirlerinden alır. Bu, gerçek bir tur, rezervasyon hizmeti veya tarihsel olarak doğrulanmış bir yeniden oluşturma değildir.

Hero alanı temel aracı hemen kurar: “Follow a river of lamplight into one night in Bianjing.” Kalıcı bir Three.js nehir kenti editoryal katmanın arkasında dururken bölüm göstergesi, Day / Night kontrolü ve dil değiştirici deneyimin beş ilgisiz sayfa yerine tek bir yolculuk olarak okunmasını sağlar.

Görsel kanıt, koyu mavi kent, sıcak pencere ışığı ve büyük krem rengi tipografi arasındaki bilinçli karşıtlığı gösterir. Bu ölçek her bölüme belirgin bir duygusal ton kazandırır; ancak yoğun kontroller için kullanılabilir alanı da daraltır. Bu nedenle tasarım, etkileşim gruplarını birincil ifadeyle rekabet ettirmek yerine onun altına veya yanına yerleştirir.

Gökkuşağı Köprüsü, nehri, mimariyi ve arşivsel referansı tek bir eksiksiz bölüm kompozisyonunda görünür tutar.
Gökkuşağı Köprüsü, nehri, mimariyi ve arşivsel referansı tek bir eksiksiz bölüm kompozisyonunda görünür tutar.

Çağdaş Bir Yorum

Kaynak, kamu malı resim malzemesi, kamu malı klasik dizeler ve yapay zekâyla oluşturulmuş Song esintili illüstrasyonlar tanımlar. Bu unsurlar, tasarlanmış bir mekân yorumunu ortaya koyar; tasvir edilen sokakların, yapıların veya yolculuğun gösterildiği biçimde gerçekten var olduğuna dair kanıt sunmaz.

Bu sınır kültür ekipleri için yararlıdır: deneyim, çerçevesini açık tutarken görsel ve şiirsel atmosferlerden yararlanabilir. Kapanış notu da bu ayrımı yineler ve herhangi bir gerçek yerin yerine geçmeyen çağdaş bir hayal olarak tanımlar.

Bu Kültürel Hikâye Anlatımı Deseni Nerelere Uyar

Bu çalışma, görsel arşivlerden yönlendirmeli bir dijital anlatı geliştiren kültür kuruluşları, editoryal ekipler ve deneyim tasarımcıları için uygundur. Bir yerin, geleneksel bir harita veya destinasyon sayfası yerine sekans, atmosfer ve yorumlayıcı bağlam aracılığıyla nasıl keşfedilebileceğini gösterir.

Beş bölüm yararlı bir tempo modeli oluşturur. Ziyaretçiler önce Su Kapısı'nda kentle tanışır, Gökkuşağı Köprüsü'nü geçer, pazara girer, su kenarında şiirle duraklar ve geri dönen fenerlerle tamamlar. Her durak konuyu değiştirirken alttaki kent sürekliliği korur.

Arşiv Odaklı Yorum

Kamu malı bir resmi görsel referans olarak kullanırken onu yeni bir atmosferik sahneyle çevreleyin. Pazar bölümünde kaynak görsel, canlı sahnenin altında “View full artwork” rotasıyla görünür; böylece arşiv malzemesi yorumun yerini almak yerine onu destekler.

Bölüm Tabanlı Sergi

Uzun soluklu bir hikâyeyi beş farklı, gezinilebilir ana dönüştürün. Kalıcı 01–05 navigasyonu yön duygusu sağlarken “Tea · Silk · The Sound Of The Street” gibi bölüm etiketleri değişen bir duyusal odak oluşturur.

Etkileşimli Şiir Okuması

Şiiri durağan bir dekor olarak ele almak yerine okurların bir dize seçmesine izin verin. Nehir feneri finali, test edilen “海上明月共潮生。” dizesini daha büyük bir serbest bırakma anına taşır ve okumayı son sahneye bağlar.

Beş Bölüm Tek Bir Animasyonlu Kenti Nasıl Paylaşır

Sayfa, hero alanını ve beş bölümü temsil eden altı tam ekran görüntüsüyle tek bir sabit animasyonlu tuval kullanır. Hafif bir navigasyon şeridi bu süreklilik taşıyan sahneden türetilirken özgün galeri yüklemesi değiştirilmeden kalır. Bu yapı, editoryal katman ilerlerken kentin kalıcı olmasını sağlar.

Kontroller bilinçli olarak sabittir. Chinese, EN ve 日本語, Day / Night ve bölüm numaralarıyla birlikte üst navigasyonda kalır. Dil kontrolleri çok dilli bir tasarım sistemine işaret eder; ancak sunulan kanıt, her çevirinin eksiksizliğini veya çalışma zamanındaki davranışını ortaya koymaz.

Şiir bölümü, aynı nehir kenti arkasında görünür kalırken okuma paneline yeterli alan tanır.
Şiir bölümü, aynı nehir kenti arkasında görünür kalırken okuma paneline yeterli alan tanır.

Sabit Katman

Nehir kenti ve bölüm navigasyonu, ziyaretçi odağını değiştirirken yön duygusunu korur.

Değişen Katman

Pazar ve fener seçimi, yeni bir sayfa gerektirmeden yerel yanıt sağlar.

Editoryal Katman

Büyük başlıklar ve kısa sahne açıklamaları her durumun duygusal temposunu yönetir.

Gözlemlenen Anlatı İlişkisi
Gözlemlenen ÖgeOkur Üzerindeki EtkiÖdün
Kalıcı nehir sahnesiBölümler boyunca mekânsal sürekliliği korurMetin ve kontrollerle rekabet edebilir
Dört pazar kontrolüYerel neden-sonuç ilişkisi eklerEtkileşim yoğunluğunu artırır
Seçilen Çince dizeOkumayı finale bağlarDilin ve durumun dikkatle anlaşılır kılınmasını gerektirir

Kapıdan Köprüye

İlk bölüm ziyaretçiyi sis, katmanlı saçaklar ve karanlıktan çıkan bir tekneyle Su Kapısı'na yerleştirir. İkinci bölüm aynı nehri bir geçiş olarak yeniden çerçeveler: Gökkuşağı Köprüsü'nde fenerler, altında tekneler ve güvertede silüetler. Suyun yeniden kullanılması geçişi anlaşılır kılarken eşikten geçişe yönelen değişim anlatıyı ilerletir.

Pazar Durumu ve Yerel Geri Bildirim

Pazar bölümü dört kontrol sunar: Tea Seller, Silk Shop, Iron Flowers ve Fireworks. Test edilen Fireworks durumu yerel mesajı değiştirir; bu da küçük bir etkileşimin sabit bir sahnenin anlamını nasıl değiştirebileceğini gösterir. Bunun karşılığı yoğunluktur: dört kontrol, açıklayıcı metin ve görsel sahne büyük bölüm başlığıyla aynı alanda yarışır.

Şiir Navigasyonu ve Dönüş

Şiir bölümü ritmi sokak etkinliğinden yakın okumaya taşır. “Mooring by Maple Bridge at Night” ile başlar, Zhang Ji ve Tang'ı belirtir ve görünür 1 / 4 konumuyla önceki ve sonraki şiir kontrollerini sunar. Navigasyon daha sonra “Chant of the Evening River”a ilerleyerek şiiri tek bir alıntı değil, bir sekans hâline getirir.

Bianjing Gece Turu Web Sitesi Neyi Gösteriyor

Sunulan eser, sabit bir Three.js sahnesinin tam ekran görüntüleriyle temsil edilen tasarım odaklı bir dijital deneyimdir. Görüntüler görünür kompozisyonu, etiketleri, bölüm sıralamasını ve Fireworks ile seçilen nehir-feneri dizesi gibi test edilmiş durumları kanıtlar. Ancak tek başlarına arka uç hizmetlerini, rezervasyonu, kalıcı kullanıcı verilerini veya üretim platformu davranışını kanıtlamazlar.

Temel tasarım sorunu atmosferi okunabilirlikle dengelemektir. Büyük editoryal tipografi bölümleri akılda kalıcı kılar ve yavaş bir okuma temposunu destekler; ancak pazar kontrolleri ve şiir kartları gibi yoğun alanların okunabilir kalması için yeterli karşıtlığa, boşluğa ve duyarlı uyarlamaya ihtiyacı vardır. Day/night geçişi ve çok dilli kontroller, görsel varlıklarından varsayılmak yerine arayüz durumları olarak değerlendirilmelidir.

Fener keşif paneli de sorumlu yorumu modeller. Alıntılanan bir Hangzhou şiirinin Bianjing hakkında olmadığını açıkça belirtir; dizeyi nehir akçaağaçları, balıkçı ışıkları ve teknede gece atmosferi için sunar. Bu not, şiirsel çağrışımı coğrafi kanıt olarak göstermeden korur.

OpenDesign'da Bianjing Gece Turu Web Sitesi Tasarımı Nasıl Oluşturulur

  1. OpenDesign'ı İndirin ve Kurun

    Masaüstü uygulamasını indirin, kurun ve kurulumu tamamlayın. Tasarımınız için bir proje oluşturun.

    OpenDesign'ı İndir
  2. Süreklilik Taşıyan Sahneyi Kurun

    Beş bölüm çerçevesini destekleyebilecek tek bir nehir-kenti tuvali oluşturun: Su Kapısı, Gökkuşağı Köprüsü, Gece Pazarı, Su Kenarında Şiir ve Nehir Feneri Finali. Bölüm göstergesini ve dil kontrollerini kalıcı tutun. Her çerçevenin farklı bir konuya sahip olduğunu, nehir, fener ışığı ve kent derinliğinin ise sekansı birbirine bağlamayı sürdürdüğünü kontrol edin.

    Önerilen Prompt

    Hayalî bir tarihsel şehir hakkında çok dilli bir gece hikâyesi web sitesi oluşturun. Beş tam ekran bölümün arkasında tek bir kalıcı Three.js tarzı nehir sahnesi kullanın: Water Gate, Rainbow Bridge, Night Market, Poetry By The Water ve River Lantern Finale. Çince, İngilizce ve Japonca kontrolleri, bir Day / Night kontrolünü, bölüm numaralarını, büyük editoryal başlıkları ve kompakt bir yerel etkileşim alanını ekleyin. Tea Seller, Silk Shop, Iron Flowers ve Fireworks olmak üzere dört pazar seçeneği ekleyin; Fireworks için değişen bir yerel mesaj gösterin. Dört konumlu bir şiir okuyucu ekleyin, ardından seçilen bir Çince dizeyi son fener durumuna taşıyın. Tüm tarihi gerçek bir tur, rezervasyon akışı veya doğrulanmış bir yeniden oluşturma olarak değil, çağdaş bir yorum olarak ele alın. Görünür metinleri azaltılmış harekette okunabilir tutun ve arka uçta depolama varsayımından kaçının.

  3. Etkileşim Yoğunluğunu İnce Ayarlayın

    Atmosfer ile eylem arasındaki dengeyi test etmek için pazar bölümünü kullanın. Dört kontrolü büyük başlığın yanında anlaşılır tutun ve test edilen Fireworks yanıtının tüm yolculuğu değiştirmek yerine yerel olarak görünür biçimde değişmesini sağlayın. Şiir bölümünde başlığı, atfı, 1 / 4 konumunu ve önceki/sonraki ilişkisini gösterin; dekoratif ölçeğin dizeleri gizlemesine izin vermeyin.

  4. Yolculuğu Baştan Sona Kontrol Edin

    Her bölüm çerçevesini masaüstünde ve dar genişliklerde inceleyin. Dil değiştirmenin mevcut bölümü koruduğunu, azaltılmış hareket sunumunun sahne bağlamını ve kontrolleri okunabilir tuttuğunu, seçilen dizenin River Lantern Finale'e ulaştığında tanımlanabilir kaldığını doğrulayın. Hangzhou şiiri notunun alıntısına bağlı kaldığını ve arşiv sanatının kaynak malzeme olarak açıkça sunulduğunu teyit edin.

  5. Dışa Aktarın ve Paylaşım Bağlantısı Alın

    Bitmiş tasarımınızı dışa aktarın, ardından bir paylaşım bağlantısı almak için OpenDesign'daki Paylaş seçeneğini kullanın. Bağlantıyı göndermeden önce ayrı bir tarayıcı penceresinde açarak amaçlanan sürümün ve bileşenlerinin erişilebilir olduğunu doğrulayın.

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için