Etkinlik Yardımcı Programı Tasarım İstemi

Mevcut proje teknoloji yığınını kullanarak [PROJECT] ve [AUDIENCE] için düzenlenebilir, mobil öncelikli bir uygulama prototipi oluşturun. Görev: Etkinlik Rehberi Programı.

Gerekli içerik ve yapı

Oturumları zamana ve konu kategorisine göre keşfedin, kişisel bir gündem oluşturun ve çakışmaları, salon değişikliklerini ve etkinlik duyurularını gösterin.

Ekranlar ve gezinme

Birbirine bağlı üç görünüm oluşturun: Program; Oturum ayrıntısı; Günüm. Seçilen kaydı ekran başlığında veya özetinde görünür tutun. Açık bir geri eylemini destekleyin ve görünümler arasında geçiş yaparken devam eden girdileri koruyun. Birincil eylemi ilgili içeriğin yakınında tutun; mobil güvenli alanları, görünür yazılım klavyesini ve uzun çevrilmiş etiketleri hesaba katın. Masaüstü genişliklerinde, bir adımı kaldırmadan veya görevi değiştirmeden kompozisyonu uyarlayın.

Proje girdileri

Adlar, kayıtlar, etiketler, miktarlar ve hedefler için [APPROVED_CONTENT] kullanın. Operasyonel iddialar uydurmak yerine eksik verileri isteyin. Demo kayıtlarında kurgusal Gather markası kullanılabilir; bunları örnek veri olarak etiketleyin. Hangi eylemlerin yerel prototip etkileşimleri olduğunu ve hangilerinin kimlik doğrulama, kalıcılık, izinler veya backend gerektireceğini açıklayın. Entegrasyon açıkça uygulanıp test edilmedikçe harici hizmetlere bağlanmayın veya bir işlemin tamamlandığını iddia etmeyin.

Tasarım yönü

[BRAND_RULES] kurallarına uyun. Marka sağlanmadığında siyah, beyaz, asit sarısı ve kalın konferans tipografisi kullanın. Genel dashboard kartlarını yinelemek yerine iş akışını kendi içeriği ve kontrolleriyle ayırt edilebilir hâle getirin. Tutarlı bir boşluk ölçeği ve net bir metin hiyerarşisi kullanın. Görünür klavye odağı, erişilebilir adlar, yeterli kontrast ve renge dayanmayan durum etiketleri ekleyin. Azaltılmış hareket tercihlerine saygı gösterin ve animasyonlu geçişleri isteğe bağlı tutun.

Göreve özel kabul kontrolü

• Çakışan kayıtlı oturumları ve saat dilimi değişikliklerini, seçimleri sessizce kaldırmak yerine açıkça gösterin.

Etkileşim durumları

Üç ekranlı başarılı akışı yerel örnek verilerle uygulayın. Kullanışlı bir boş durum, eylemi tamamlamadan önce doğrulama, yükleniyor veya bekliyor durumu ve giderilebilir bir hata durumu ekleyin. Yıkıcı değişiklikler için inceleme veya geri alma yolu gerekir. Bir kaydın durumunu üç görünümün tamamında tutarlı tutun. Kısmen tamamlanmış girdileri sessizce silmeyin veya yeniden denemeden sonra kullanıcının seçimini değiştirmeyin.

Teslimat ve inceleme

Düzenlenebilir uygulama görünümlerini sunun; veri modelini, yerel depolama davranışlarını ve uygulanmamış entegrasyonları açıklayın. 320px genişlikte ve daha geniş bir görünüm alanında; klavye navigasyonu ve uzun içerikle test edin. Özellik eklemeden önce sonucu incelemek için yukarıdaki göreve özel kabul kontrolünü kullanın. Tanıtım davranışını çalışan bir üretim hizmetinden açıkça ayırın.

Referans eki ve yeniden oluşturma hedefi

Bu istemin indirme paketindeki reference.webp dosyasını, bu istemle birlikte OpenDesign'a ekleyin. Benzer kompozisyon ve hiyerarşiye sahip, düzenlenebilir bir sonuç oluşturun; referans görselin tamamını bitmiş arayüz olarak gömmeyin. Kurgusal örnek etiketlerle çelişmesi durumunda onaylanmış proje içeriğini ve marka kurallarını koruyun. Görsel eksikse veya okunamıyorsa görsel doğruluk iddiasında bulunmak yerine dosyayı isteyin.

Referans kompozisyon — birbirine bağlı üç uygulama ekranı

Ekli görsel, kurgusal konferans uygulaması Gather'ı soluk asit sarısı bir sunum arka planı üzerinde eşit genişlikte üç mobil ekran olarak gösterir. Program, Oturum ayrıntısı ve Günüm görünümlerini birbirine bağlı uygulama görünümleri olarak oluşturun. Üç ekranlı montajı tek bir sayfa olarak oluşturmayın veya referansın tamamını arka plan olarak kullanmayın. Mobil genişlikte her seferinde tek bir görünüm gösterin. Daha geniş bir önizleme, karşılaştırma amacıyla görünümleri yan yana gösterebilir; ancak çalışan uygulama gezinme yapısını ve durumunu korumalıdır.

Program ekranı

İnce, koyu renkli dış kenara sahip beyaza yakın bir tuval kullanın. Başlıkta solda kalın siyah Gather logosunu; sağda ise kompakt etkinlik tarihleri, mekân bilgileri ve bir arama simgesini eşleştirin. Altına büyük boyutlu, kalın bir Program başlığı ve daha küçük, tek satırlık bir giriş ekleyin. Sal 14 Eki, Çar 15 Eki ve Per 16 Eki için üç sütunlu bir tarih seçici ekleyin; seçili tarih asit sarısı, diğerleri ise açık renkli ayırıcılarla beyaz olmalıdır. Altında Tüm konu kategorileri ve Tüm türler filtreleri ile kompakt bir liste görünümü kontrolü yer almalıdır. Ana liste; dar bir saat sütunu, dikey konu kategorisi renk çubuğu, ardından büyük harfli konu kategorisi etiketi, kalın oturum başlığı ve daha küçük salon etiketi kullanmalıdır. Her satırın sağında hizalanmış dairesel bir artı eylemi ve ince yatay bir ayırıcı bulunmalıdır. Gösterilen konu kategorilerinde mavi, sarı, pembe, yeşil ve mor kullanın; rengin tek ayırt edici unsur olmaması için adlarını da gösterin. Alt gezinme siyah olmalı ve Program, Günüm, Duyurular ile Daha Fazla seçeneklerini içermelidir; etkin simge ve etiket sarı olmalıdır.

Oturum ayrıntısı ekranı

Açık renkli liste görünümünü siyaha yakın bir ayrıntı yüzeyiyle karşılaştırın. Geri, yer imi ve paylaşım kontrollerini üst kısma yerleştirin. Üst bölümün arkasında, metin kontrastını koruyan koyu bir katmanla birlikte belirsiz bir konferans fotoğrafı kullanın. Küçük, sarı bir ÜRÜN etiketi; büyük, iki satırlı, sarı Ölçekli Tasarım Sistemleri başlığı ve beyaz bir destekleyici satır gösterin. Altına takvim/saat ve mekân/salon meta verilerini, çizgi ikonlarla iki sütun hâlinde yerleştirin. Ardından ince çerçeveli konu etiketleri, kısa bir açıklama ve dairesel portre, ad, rol, kuruluş ve ayrıntı oku içeren bir konuşmacı satırı ekleyin. Geniş, asit sarısı Günümü kaydet düğmesini, ardından koyu çerçeveli Takvime ekle düğmesini kullanın. Bir ayırıcıdan sonra, küçük bir Tümünü gör eylemi ve kompakt oturum satırlarıyla İlgili oturumlar bölümünü başlatın. Geri dönüş yolunu açık tutun; demo verilerini değiştirirken gerçek konuşmacılar veya destek beyanları uydurmayın.

Günüm ekranı

Kırık beyaz yüzeye dönün ve Gather üst bilgisini, tarihi, mekânı ve ayarlar ikonunu tekrarlayın. Büyük bir Günüm başlığı ve kısa bir alt başlık kullanın. Soluk sarı bildirim bandında bir zil, kalın Saat dilimi değişikliği başlığı, destekleyici metin ve kapatma kontrolü bulunsun. Altında Gündemim, Çakışmalar (1) ve Bildirimler (2) seçeneklerini üç segment olarak gösterin; seçili segment beyaz metinli siyah olsun. Kaydedilmiş oturumlarda program satırı yapısını yeniden kullanın. Çakışan bir oturumu soluk pembe panel, kırmızı saat ve konu kategorisi vurgusu, açık bir Kaydedilmiş oturumla çakışıyor etiketi ve İkisini de tut kontrolüyle gösterin. Değişen mekânı kırmızı Salon değişikliği: B1 → B2 satırıyla belirtin. Siyah alt gezinme çubuğunu, Günüm etkin ve Bildirimler üzerinde sarı bir sayı rozeti olacak şekilde tekrarlayın.

Görsel hiyerarşi ve tasarım belirteçleri

Kelime markası ve büyük başlıklarda kalın, nötr bir grotesk; gövde metni ve kontrollerde okunaklı bir sans-serif; ana yüzeylerde siyah ve kırık beyaz; birincil eylemler ve seçili durumlarda asit sarısı kullanın. Başlangıç olarak 8px aralık ölçeği, 16–24px yatay sayfa dolgusu, en az 44px dokunma hedefleri ve başlık/gövde/meta veriler arasında güçlü kontrast kullanın. Bunları ölçülmüş piksel özellikleri değil, uygulama için başlangıç değerleri olarak ele alın. Ekran görüntüsündeki kompakt zaman çizelgesini, kalın ayrıntı başlığını ve belirgin açık/koyu kontrastını koruyun. Özgün veya lisanslı konferans fotoğrafı ile kurgusal bir konuşmacı portresi kullanın; etiketleri canlı metin olarak tutun. Bu örnekteki yuvarlatılmış kontroller, tasarım istemi kitaplığı sitesindeki düğmelerden bağımsız olarak Gather'ın görsel referansının bir parçasıdır.

Etkileşim ve veri sözleşmesi — uygulayın ve doğrulayın

Kararlı oturum kimlikleri, başlık, konu kategorisi, tür, UTC başlangıç/bitiş zamanı, etkinlik saat dilimi, salon, previousRoom, konuşmacı ve kaydedilme durumu içeren yerel demo kayıtları kullanın. selectedDate, searchQuery, konu kategorisi/tür filtreleri, savedSessionIds ve dismissedNoticeIds alanlarını açıkça tanımlayın. Görsel kavramsaldır; tarihler ve saat dilimi ifadeleri bağlayıcı bir etkinlik programı değildir. Gösterilen hiyerarşiyi korurken tutarsız demo tarihlerini düzeltin. Bir gün seçildiğinde tarih vurgusu ve liste güncellensin. Arama, oturum ve konuşmacı adlarıyla eşleşsin; filtreler birlikte çalışsın ve kullanışlı bir boş durum ile temizleme eylemi sunsun. Bir satır açıldığında aynı oturumun ayrıntıları gösterilsin; Geri eylemi önceki listeyi, filtreleri ve kaydırma konumunu geri yüklesin. Artı ve Günümü kaydet kontrolleri aynı oturumu yalnızca bir kez kaydetsin ve açıkça anlaşılır bir kaydedildi durumuna dönüşsün. Oturum kaldırıldığında Günüm ve bildirimler tutarlı biçimde güncellensin. Aynı tarihteki kaydedilmiş oturumlarda çakışmayı startA < endB ve startB < endA koşullarıyla tespit edin. Bir uyarı ve her iki kaydı gösterin; İkisini de tut eylemi, seçimlerden birini sessizce silmeden çakışmayı onaylasın. Çakışmalar, etkilenen çiftleri göstersin ve ayrıntılarına bağlantı versin. Saat dilimi değişikliği, aynı UTC anlarını seçilen adlandırılmış saat dilimine dönüştürsün, görüntülenen tarih ve saatleri güncellesin ve gruplamayı yeniden hesaplasın; gerçek etkinlik sürelerini değiştirmemelidir. Görünür bir saat dilimi etiketi ve kapatılabilir bir açıklama bulundurun. Salon değişikliği bildirimi eski ve yeni salonları göstersin; bildirimin kapatılması yeni salon değişikliğini geri almasın. Takvime ekle için geçerli bir yerel takvim dosyası sunun veya eylemi açıkça demo olarak etiketleyin; harici takvim bağlantısı ima edilmemelidir. Paylaş eylemi, bağlantıyı kopyalama yedeğiyle platformun paylaşım sayfasını kullanabilir. Yer imi, bildirim kapatma ve gezinme kontrolleri görünür klavye odağına ve erişilebilir adlara sahip olmalıdır. Birincil eylemleri mobil güvenli alanın üzerinde erişilebilir tutun. Kaydedilmiş oturum yok, eşleşen sonuç yok ve kurtarılabilir depolama hatası durumlarını ekleyin. Ayrı olarak istenmedikçe ödeme, hesap oluşturma veya canlı etkinlik güncellemeleri uygulamayın.

Görsel karşılaştırma ve teslim

1. Sonucu ekli görselle eşleşen oranlarda karşılaştırın. Dekoratif ayrıntıları iyileştirmeden önce ana bölgelerin yerleşimini, göreli görsel boyutlarını, satır sonlarını, boşlukları, tipografi hiyerarşisini, kontrastı, etkin durumları ve içerik yoğunluğunu inceleyin.
2. Ardından masaüstü metnini küçük etiketlere sıkıştırmadan dar düzeni test edin.
3. Logoları, fotoğrafları ve simgeleri ayrı varlıklar olarak; anlamlı tüm etiketleri ise düzenlenebilir tutun. Kullanılamayan yazı tiplerini/varlıkları ve bilinçli sapmaları listeleyin. Çalışan dosyalarla birlikte uygulanan davranışların ve kalan entegrasyonların kısa bir açıklamasını sunun; yalnızca isteme dayanarak piksel düzeyinde aynı sonuç vadetmeyin.