Radix Themes Tasarım Sistemi.

Radix Themes Tasarım Sistemi Görsel Tema ve Atmosfer

Duygu Panosu Değil, İşlevsel Bir Arayüz

Radix Themes; insanların okuduğu, karar verdiği, bilgi girdiği ve yarım kalan işlerine geri döndüğü ürünler için kullanışlı bir referanstır. Görsel karakteri; ölçülü boşluklardan, sade yüzeylerden, net bir tipografi hiyerarşisinden ve tekrarlanabilir bileşen durumlarından oluşur. Bu kılavuzu proje çalışma alanı, hesap alanı, ayarlar ekranı veya veri inceleme akışı oluştururken kullanın. Amaç, bir görev olmadan bir araya getirilmiş göz alıcı bileşenler koleksiyonu değil, gerçek içerik barındıran, tutarlı ve işlevsel bir ekrandır.

Doğru Başlangıç Noktasını Seçin

React uygulaması geliştiriyorsanız gerçek Radix Themes paketini kullanarak başlayın ve özel alternatifler yazmadan önce paketin bileşenlerinden yararlanın. Farklı bir teknoloji yığınında görsel bir konsept oluşturuyorsanız bu ilkeleri referans olarak kullanın ve sonucu sistemden esinlenilmiş olarak tanımlayın. Radix Themes ile Radix Primitives farklı başlangıç noktalarıdır: bu kılavuz, stillendirilmiş Themes kitaplığıyla ilgilidir. Bir OpenDesign kılavuzu, gelişigüzel bir HTML maketini yerel bir Radix uygulamasına dönüştürmez.

Somut Bir Görev Etrafında Oluşturun

1. İlk ekranda proje oluşturma veya hesap ayarlarını kaydetme gibi tek bir ana işlem seçin.
2. Bu kararı vermek için gereken bilgileri işlemden önce sunun.
3. Gezinmeyi, nesne meta verilerini, düzenlenebilir alanları ve geri bildirimi görsel olarak birbirinden ayırın.
4. Tasarım yaparken gerçekçi uzun başlıklar, farklı durum değerleri ve boş durum kullanın.
5. Yalnızca üç kısa yer tutucu etiketle çalışan bir ekran, kullanılabilir bir sistem ortaya koymuş sayılmaz.

Üslup ve İçerik

Kısa ve açıklayıcı etiketler, net fiiller ve doğrudan açıklamalar kullanın. Bir düğme, sırada ne olacağını belirtmelidir: Değişiklikleri Kaydet, Üye Davet Et veya Proje Oluştur. Başlıkları bölüm konuları için kullanın; her küçük denetime pazarlama sloganı vermekten kaçının. Bir işlem başarısız olduğunda kişinin neyi düzeltebileceğini açıklayın ve yaptığı işi koruyun. Bunlar, referansı uygulamaya yönelik OpenDesign editoryal önerileridir; Radix tarafından sağlanan ek API'ler değildir.

Radix Themes Tasarım Sistemi Renk Paleti ve Rolleri

Marka Rengini Anlamdan Ayırın

Ekranlarda Sabit Renkler Kullanmak Yerine Temayı Kullanın

Resmî Tema yapılandırması şunları sunar: accentColor ve grayColor. Bileşenlerin aynı seçimleri paylaşması için bunları kök düzeyinde belirleyin. Özel bileşenlerde, ekran görüntüsünden renk kopyalamak yerine geçerli temanın CSS değişkenlerine başvurun. Aşağıdaki jeton referansı, sık kullanılan kompakt bir alt kümeyi listeler. Jeton, yapılandırılmış bir tema içindeki rolü tanımlar; tek bir onaltılık değerin açık modda, koyu modda ve her vurgu seçeneğinde aynı kalacağını garanti etmez.

Yüzey ve Kenarlık Hiyerarşisi

Sade bir sayfa arka planıyla başlayın. Kartlara ve düzenlenebilir panellere yalnızca ilişkili işleri bir araya getirdiklerinde farklı bir yüzey verin. Aynı listeye ait satırları ayırmak için ayırıcılar kullanın. Her öğeye aynı anda kenarlık, gölge, renkli arka plan ve rozet eklemekten kaçının. Ayarlar ekranında, satırlara bölünmüş tek bir panel genellikle havada duran altı karttan daha anlaşılırdır. Temel metni soluklaştırmadan hiyerarşiyi düşük kontrastla görünür kılın.

Açık ve Koyu Görünüm

Yerel bileşenler için resmî görünüm ayarını kullanın ve aynı içerikle her iki görünümü de doğrulayın. Renkleri düşünmeden tersine çevirerek veya açık mod gölgelerini yeniden kullanarak koyu ekran oluşturmayın. Katmanları, etkin olmayan alanları, ayırıcıları, seçili satırları ve vurgu renklerinin üzerindeki metni ayrı ayrı kontrol edin. Bu sayfadaki etkileşimli inceleme, küçük bir tema seçeneği kümesini gösterir; eksiksiz kitaplık ve yerel davranışı için resmî oyun alanını referans alın.

Kontrast ve Tekrarlanan İpuçları

Vurgu veya yüzeyi değiştirdikten sonra son ön plan/arka plan eşleşmelerini kontrol edin. Beklemede, Tamamlandı ve Başarısız gibi durumları metinle birlikte renk kullanarak belirtin. Seçili seçenekler için onay işareti veya başka bir görünür ayrım ekleyin. Erişilebilir bileşen kitaplığı kullanmanın her içerik veya tema birleşimini erişilebilir kılacağını varsaymayın: etiketleriniz, iç içe yerleşiminiz, özel CSS ve bilgi sıralamanız da ekranın bütün olarak kullanılabilirliğini etkiler.

Radix Themes Tasarım Sistemi Tipografi Kuralları

Özenle Belirlenmiş Bir Okuma Hiyerarşisi

Ekrana tek ve net bir başlık verin; ardından bölüm başlıklarını, gövde metnini, alan etiketlerini ve yardımcı meta verileri birbirinden ayırın. Bu ilişkileri açıklamaya yetecek en az sayıda yazı boyutu kullanın. Yoğun ürün ekranlarında okunaklı etiketler, büyük gösterim yazılarından daha önemlidir. Açıklayıcı bir paragrafı, açıkladığı denetimin yakınında tutun; bir giriş alanına değer girildikten sonra da etiketini görünür bırakın. Yer tutucu metin bir ipucudur, alan etiketinin yerini tutmaz.

Yazı Boyutu Ölçeği ve Kalınlık

Radix, eşleştirilmiş yazı boyutları, satır yükseklikleri ve harf aralıklarından oluşan dokuz adımlı bir tipografi ölçeği belgeler. Bu sayfadaki referans tablosu, temel ölçekteki bu değerleri korur. Bir adımı, onunla ilgisiz bir satır yüksekliğiyle karıştırmak yerine, eksiksiz bir birleşim olarak seçin. Gövde metninde normal kalınlık, başlıklarda veya vurgulanmış etiketlerde daha güçlü bir kalınlık kullanın. Her şeyi kalın yazarsanız görsel hiyerarşi kaybolur; ikincil tüm metinleri inceltirseniz ekranı okumak zorlaşır.

Yazı Tipi Seçimi ve Geri Dönüşler

Radix Themes varsayılan olarak bir sistem yazı tipi yığını kullanır. Belirli bir marka yazı tipinden çok farklı ortamlarda tutarlı görünüm önemliyse bu yığını koruyun veya belgelenmiş özelleştirme mekanizmasıyla lisanslı bir yazı tipi yapılandırın. Çevresindeki OpenDesign sitesi Albert Sans kullanıyor; bu, Albert Sans'ın resmi Radix yazı tipi olduğu anlamına gelmez. Çok dilli uygulamalarda, gerçek geri dönüş yazı tiplerinde temsili Çince, Japonca ve Korece metinleri ve uzun Avrupa dillerindeki etiketleri test edin.

Sayılar, Kod ve Satır Kaydırma

Değerleri dikey olarak karşılaştırılabilir kılmak için sayısal sütunları hizalı tutun. Karakter sınırlarının önemli olduğu kod, tanımlayıcı ve tasarım belirteçlerinde tek aralıklı bir yazı tipi kullanın. Başlıkların ve açıklamaların doğal biçimde satır kaydırmasına izin verin; yalnızca kart yüksekliğini korumak için önemli yönergeleri kırpmayın. Kimlik gibi gerçekten bölünmeyen bir dizge için kontrollü satır kaydırma veya kopyalama olanağı sunun. Mobilde, düzen değişse bile anlamın tamamını erişilebilir tutun.

İçerik Uzunluğu Tasarımın Bir Parçasıdır

Bir bileşeni yeniden kullanılabilir ilan etmeden önce uzun bir proje adını, iki satırlık bir üye rolünü ve çevrilmiş bir eylem etiketini test edin. Mümkün olduğunda tüm düğmelere sabit genişlik vermek yerine büyümelerine izin verin. Gövde paragraflarını rahat okunabilecek bir satır uzunluğunda tutun; kullanıcıların paralel bilgileri karşılaştırması gerekiyorsa liste veya tablo kullanın. Sayfayı daha tasarlanmış göstermek için açıklayıcı metni çok sayıda küçük dekoratif karta bölmeyin.

Radix Themes Tasarım Sistemi Bileşen Stilleri ve Durumları

Düğmeler ve Eylem Hiyerarşisi

Bir eylem grubunda öncelikli kararı belirleyin ve ona en belirgin görünümü verin. İkincil eylemler kolay bulunmalı, ancak öncelikli eylemle eşit ölçüde öne çıkmamalıdır. Yıkıcı eylemleri olağan onay eylemlerinden ayırın. Gönderim sırasında yinelenen işlemleri önleyin ve görünür bir ilerleme göstergesi sunun; işlem tamamlandığında gerçek sonucu gösterin. Devre dışı bir düğmenin nedeni formdan anlaşılmıyorsa, yakınında bu nedeni açıklayın.

Giriş Alanları ve Formlar

• Her giriş alanının üstüne veya yanına kalıcı bir etiket yerleştirin.
• Yardım metnini ilgili alanın yanında tutun; doğrulama iletilerini yalnızca genel bir başlıkta göstermek yerine ilgili alana bağlayın.
• Doğrulama başarısız olduğunda girilmiş değerleri koruyun.
• İlgili alanları anlamlı bir bölüm başlığının altında gruplayın.
• Kişinin görevi tamamlamasına tarayıcının ve yardımcı araçların destek olabilmesi için uygun giriş türünü ve otomatik tamamlama değerini kullanın.

Kartlar, Listeler ve Tablolar

Anlamlı bir özeti ve eylemi olan, kendi başına yeterli bir nesne için kart kullanın. Benzer kayıtlar dizisi için liste, kullanıcıların kayıtların özelliklerini karşılaştırması gerektiğinde ise tablo kullanın. Dekoratif grafik parçaları yerine sahip, güncelleme zamanı ve durum gibi gerçek alanları gösterin. Bir kart, içindeki bağlantılar veya düğmelerle rekabet edecek şekilde tıklanabilir olmamalıdır; net bir bağlantı hedefi belirleyin ve olağan klavye davranışını koruyun.

Gezinme ve Seçim

Genel gezinmeyi sayfa düzeyindeki sekmelerden ve yerel filtrelerden ayrı tutun. Etkin hedef, yalnızca vurgu rengine dayanılmadan ayırt edilebilmelidir. Gezinme için bağlantı, sayfa içi değişiklikler için düğme kullanın. Sekme düzeni uygularsanız klavye davranışını da ekleyin; aksi hâlde açıkça etiketlenmiş sıradan bir düğme grubu kullanın. Etkileşimli gibi görünen ancak çalıştırılamayan bir dizi biçimlendirilmiş span oluşturmayın.

Menüler, İletişim Kutuları ve Katmanlar

React ürünü uygularken karmaşık davranışlar için yerel kütüphane bileşenini kullanın. Bir iletişim kutusunun başlığı, net bir kapatma yolu, uygun odak yönetimi ve odağın kutuyu açan denetime geri dönmesi gerekir. Bu davranışları sağlamadan mutlak konumlandırılmış bir karttan modal oluşturmayın. İletişim kutusunu tek bir karara odaklayın; uzun düzenleme iş akışları, giderek kalabalıklaşan bir katman yerine çoğu zaman ayrı bir sayfada sunulmalıdır.

Yükleniyor, Boş, Hata ve Başarı

• Her durumu aynı gerçek görev üzerinden tasarlayın.
• Boş bir proje listesi, ilk projenin nasıl oluşturulacağını açıklamalıdır.
• Yükleme durumu, rahatsız edici bir sıçramayı önleyecek kadar yapıyı korumalıdır.
• Hata durumu anlamlı bir sonraki adım sunmalı ve tamamlanmış işleri silmemelidir.
• Başarı iletisi, neyin değiştiğini belirtmelidir.
• Bu sayfadaki statik örnek düğmeler görünümü gösterir; bu durumların üretim ortamındaki davranışlarını kanıtlamaz.

Radix Themes Tasarım Sistemi Düzeni, Boşluk ve Yoğunluk

Ortak Bir Boşluk Ölçeği Kullanın

Belgelenmiş boşluk ölçeğinde dokuz temel adım bulunur: 4, 8, 12, 16, 24, 32, 40, 48 ve 64 piksel. Birbiriyle yakından ilişkili denetimlerin içinde küçük adımlar, bağımsız bölümler arasında ise daha büyük adımlar kullanın. Başlık ile içeriği arasındaki görünür ilişkiyi koruyun. Ekranı doldurmak için boş alanı eşit biçimde dağıtmayın: yakınlık, hangi bilgi parçalarının birbiriyle ilişkili olduğunu anlatmalıdır.

Yoğunluk Yapılacak İşe Göre Belirlenir

Bir kaynak dizini, karşılaştırma yapmayı destekleyecek kadar öğeyi görünür kılmalıdır. Bir yapılandırma formunda etiketler, yardım metinleri ve hatalar için yeterli alan bulunmalıdır. Bir okuma sayfasında tutarlı bir satır uzunluğu ve görünür bir içindekiler bölümü olmalıdır. Her yerde aynı kart boyutunu kullanmak yerine yoğunluğu göreve göre seçin. Radix ayrıca ilişkili boyutları birlikte ayarlayan bir ölçeklendirme ayarı sunar; kompakt ölçeği ürünün varsayılanı yapmadan önce ortaya çıkan okunabilirliği ve etkileşim hedeflerinin boyutlarını değerlendirin.

Izgara ve Kapsayıcı Davranışı

Önce bir sayfa kapsayıcısı belirleyin, ardından ana içeriği ve varsa destekleyici sütunu tanımlayın. Dış tuval geniş olsa bile uzun metinleri okunabilir bir sütunda tutun. Daha dar ekranlarda destekleyici içeriği ana içeriğin altına alın veya uzun bir yan sütunu erişilebilir bir yerel gezinme denetimine dönüştürün. Mobil akışın ve klavye sırasının masaüstü ızgarasındaki yerleşime bağlı olmadan anlamlı kalması için kaynak sırasını koruyun.

İç İçe Kartlar Yerine Satırlar

Kompakt bir tasarım belirteci başvuru tablosunda adı, değeri ve kullanım amacını tek bir tarama satırında sunun. Bir katalogda başlığı, kategoriyi, açıklamayı ve hedefi bir arada tutun. İç içe kutuları tekrarlamak görsel gürültü yaratır ve içeriğe ayrılması gereken genişliği tüketir. İlişkili satırları ince bir ayırıcıyla ayırmayı tercih edin; çevrelenmiş panelleri canlı önizleme veya kod örneği gibi bağlam değişikliği olan durumlara saklayın.

Önemli İçeriği Görünür Tutun

Sayfayı kısaltmak uğruna ayrıntılı bir kılavuzu kısa özetlere indirgemeyin. Kullanıcıların ilgili noktadan başlayabilmesi için bir içindekiler bölümü ve belirgin alt başlıklar sunun. Bir filtre veya akordeon görünürlüğü değiştiriyorsa boş durum ve seçili durum açık olmalıdır. Gerçek bir etkileşim ihtiyacını karşılamadığı sürece bağımsız olarak kaydırılan iç listelerden kaçının; uzun bir kaynak koleksiyonunda sayfanın olağan kaydırma davranışı genellikle daha kolaydır.

Radix Themes Tasarım Sistemi Yarıçap, Derinlik ve Hareket

Yarıçap Bir İlişkidir

Radix, adlandırılmış yarıçap ayarları ve bağlama göre bileşen davranışları sunar. Her öğeye aynı rastgele yarıçapı atamak yerine tema düzeyinde bir ayar seçin. Düğme, onay kutusu ve büyük panel farklı yapısal rollere sahiptir. Bu rolleri silmeden şekillerinin birbiriyle uyumlu olmasını sağlayın. Kendi bileşeninizde bir yarıçap belirteci kullanıyorsanız, aynı sisteme ait olduğuna karar vermeden önce onu yerel bir düğme ve alanın yanında test edin.

Yükselti Katmanları Açıklar

Bir katmanı, altındaki sayfadan veya etkileşimli bir paneli sade bir zeminden ayırmak için derinlik kullanın. Radix, altı kademeli bir gölge ölçeği sunar. Gölge kademelerini kartlar için dekoratif bir popülerlik sıralaması gibi kullanmayın. Yoğun bir katalogda yalnızca kenarlıklar çoğu zaman yeterlidir. Gölgeleri her iki görünümde de inceleyin; açık modda kullanılan bulanıklık koyu bir yüzeyde kaybolabilir veya yanlış bir derinlik izlenimi veren hale etkisi oluşturabilir.

Hareket Değişikliği Açıklamalı

Seçimi, açılmayı, ilerlemeyi veya ilişkili durumlar arasındaki geçişi açıklamak için kısa geçişler kullanın. İçeriğin görünmesini giriş animasyonuyla geciktirmeyin. İş odaklı ekranlarda arka planda sürekli hareketten kaçının. Azaltılmış hareket tercihlerini dikkate alın ve geçişler kaldırıldığında son durumun okunaklı kalmasını sağlayın. Özel bir uygulamadaki zamanlama tercihleri uygulamaya özgüdür; doğrulanmamış bir resmî Radix süre belirtecini bu kılavuzda varmış gibi göstermeyin.

Süslemeden Etkileşim

Üzerine gelme stili, bir öğenin kullanılabileceğini pekiştirmelidir. Odak stili, bitişik yüzeylere karşı net biçimde görünür kalmalıdır. Yoğun bir satırı üzerine gelindiğinde, kullanıcı okurken bilgilerin yer değiştireceği kadar oynatmayın. Dokunmatik ekranlarda temel işlemler, üzerine gelme olmadan da kullanılabilmelidir. Efekt, animasyonun kendisine dikkat çektiğinde değil, kullanıcının denetimi anlamasına yardımcı olduğunda başarılıdır.

Radix Themes Tasarım Sistemi: Yapılması ve Kaçınılması Gerekenler

Yapın: Eksiksiz Bir Ekran Oluşturun

Gerçek gezinme öğelerini, anlamlı içeriği, birincil eylemi ve en az bir istisnai durumu içeren bir ekran oluşturun. Düzinelerce yeniden kullanılabilir bileşen çıkarmadan önce ekranı gözden geçirin. Vurgu rengi, yoğunluk, yazı tipi boyutları ve boş durum metni gibi bilinçli tercihleri kaydedin. Böylece kodlama yapan yapay zekâ ajanına izlemesi gereken belirli bir çerçeve sunar ve sonraki yinelemelerde sapmaları fark etmek kolaylaşır.

Yapın: Yerleşik ve Özel Çalışmaları Tutarlı Kılın

Kütüphanenin zaten desteklediği davranışlar için öncelikle mevcut bileşenlerini kullanın. Özel sarmalayıcılarda tema değişkenlerini kullanın ve bu sarmalayıcıları her iki görünümde de kontrol edin. Biçimlendirirken etiketleri ve anlamsal HTML yapısını koruyun. Projede mevcut bir tasarım sistemi varsa, onu değiştirmeden önce bu referansla karşılaştırın; denetimsiz ikinci bir tema katmanı, giderdiğinden daha fazla tutarsızlığa yol açabilir.

Yapmayın: Yalnızca Renkleri Değiştirerek Marka Kimliği Oluşturmaya Çalışmayın

Tek başına vurgu rengini değiştirmek tutarlı bir arayüz oluşturmaz. Görsel kimliğin büyük bölümünü aralıklar, yazı karakteri, içerik hiyerarşisi, etkileşim kalıpları ve duyarlı tasarım tercihleri belirler. Maket kütüphaneye benziyor diye resmî entegrasyon iddiasında bulunmayın. Yeni bir ürün ekranına başka bir ürünün ticari markasını, mülkiyete tabi varlıklarını veya ticari iddialarını taşımaktan kaçının.

Yapmayın: Daha Temiz Bir Ekran Görüntüsü Uğruna Anlamdan Ödün Vermeyin

Radix Themes Tasarım Sistemi: Duyarlı ve Erişilebilir Davranış

Küçültmeden Önce Yapıyı Uyarlayın

Ekran daraldığında sütun sayısını azaltın, ana eyleme giden yolu kısaltın ve ikincil bilgileri normal okuma akışına taşıyın. Masaüstü panosunu tek bir görsel olarak küçültüp bunu mobil düzen diye sunmayın. İçeriğin tamamını; satır kaydırma, alt alta yerleştirme veya uygun bir tablo düzeni kullanarak erişilebilir tutun. Bağlantı metinlerini açıklayıcı tutun; böylece hedef, masaüstündeki kartın çevresindeki içerik olmadan da anlaşılabilsin.

Belgelenmiş Kesme Noktalarını Bilinçli Kullanın

Resmî kesme noktalarının adları initial, xs, sm, md, lg ve xl'dir. Minimum genişlikleri sırasıyla 0, 520, 768, 1024, 1280 ve 1640 pikseldir. Bunları her adımda düzeni değiştirmek için zorunlu kurallar değil, kullanılabilir araçlar olarak değerlendirin. İçerik farklı bir düzen gerektirdiğinde kesme noktası ekleyin. Kırılgan ara düzenleri bulmak için kesme noktasının yanı sıra adlandırılmış kesme noktaları arasındaki genişlikleri de test edin.

Klavye ve Odak

• Anlamlı tüm eylemler klavyeyle kullanılabilmelidir.
• Görünür odak durumunu üzerine gelme durumundan ayırt edilebilir kılın ve bir kapsayıcı içeriği kırpsa bile görünür kalmasını sağlayın.
• Denetimlerin sırasını öngörülemez biçimde değiştiren pozitif tabindex değerlerinden kaçının.
• Bir filtre sonuçları değiştirdikten sonra odağı denetimde tutun ve kısa bir sonuç sayısı gösterin.
• Bir iletişim penceresini kapattıktan sonra odağı belgenin başına bırakmak yerine uygun bir konuma geri taşıyın.

Etiketler, Hedefler ve Yardımcı Metinler

Yalnızca simge içeren eylemlere, simgenin şeklini değil eylemi belirten erişilebilir bir ad verin. Görsel simge küçük olsa bile dokunma hedeflerini rahatça kullanılabilecek boyutta tutun. Dekoratif simgeleri erişilebilirlik ağacının dışında bırakın. Kaydedilen değişiklikler veya arama sonuçlarının sayısı gibi güncellemeleri, ilgisiz içeriği tekrar tekrar duyurmadan bildirin. Bir durumda hem simge hem metin kullanılıyorsa ekran okuyucuya aynı mesajı iki kez okutmayın.

Gerçek İçerikle Doğrulayın

• Bir masaüstü, bir tablet ve dar ekranlı bir telefon düzenini kontrol edin.
• Metin genişlemesini, eksik bir görseli, boş bir listeyi ve boşluksuz uzun bir tanımlayıcıyı test edin.
• Sayfayı azaltılmış hareket ayarı ve klavye gezinmesiyle test edin.
• Renklerde önemli bir değişiklik yaptıktan sonra her iki görünümü de inceleyin.
• Otomatik denetimler yapısal sorunları bulabilir; ancak hiyerarşinin, içerik yoğunluğunun ve genel görsel karakterin ürünün amaçlanan ihtiyaçlarını karşılayıp karşılamadığına karar veremez.

Radix Themes Tasarım Sistemi: Yapay Zekâ Ajanı İstem Kılavuzu ve Uygulama

Proje Bağlamını Hazırlayın

1. Kodlama yapan yapay zekâ ajanına ne oluşturulduğunu, kimlerin kullanacağını, ana eylemi ve mevcut tasarımı tanımlayan dosyaları bildirin.
2. Ajanından belirsiz bir ekran görüntüsünü taklit etmesini istemek yerine bu kılavuzu referans olarak ekleyin.
3. React kullanıyorsanız yerleşik Radix Themes bileşenlerinin tercih edilmesi gerektiğini belirtin.
4. Başka bir teknoloji yığını kullanıyorsanız, açıkça etiketlenmiş bir yorumlama isteyin ve bunun gerektireceği ek etkileşim çalışmalarını gözden geçirin.

Eksiksiz Bir İlk Sürüm Tanımlayın

Gerçek içerik ve az sayıda durum içeren, çalışan tek bir ekran isteyin. Gezinme öğelerini, alanları, nesne üst verilerini ve birincil eylemin beklenen sonucunu belirtin. İsteğe klavye odağını, boş durumu, doğrulamayı ve dar ekran düzenini ekleyin. Mevcut bir başlık, üretim verisi sözleşmesi veya önceden onaylanmış bir içerik bloğu gibi korunması gereken kısıtları belirtin.

Gerçek Sorunları Bulmak İçin Sırayla İnceleyin

1. Önce ekranın amaçlanan görevi desteklediğini doğrulayın.
2. Ardından bilgi hiyerarşisini, aralıkları, yazı karakterini ve renkleri seçilen referansla karşılaştırın.
3. Son olarak etkileşim durumlarını ve duyarlı düzenleri test edin.
4. Sayfa derleniyor veya ekran görüntüsü düzenli görünüyor diye görsel bir değişikliği kabul etmeyin.
5. Görsel düzenlemelerden sonra uzun içeriklerin, hataların ve yinelenen eylemlerin hâlâ çalıştığını kontrol edin.

Açık Kararlarla Genişletin

İlk ekran çalışır duruma geldiğinde tema yapılandırmasını, yazı tipi rollerini, aralık tercihlerini ve tekrarlanması gereken bileşen kalıplarını kaydedin. Yapay zekâ ajanından, kabul edilen içeriği sessizce yeniden yazmadan bu kararları sonraki ekrana uygulamasını isteyin. Yeni bir ekran farklı bir kalıp gerektiriyorsa bunun nedenini belgeleyin ve önceki ekranın tutarlılığını kontrol edin. Yüzeysel olarak birbirine benzeyen çok sayıda sayfa oluşturmak yerine doğrulanmış davranışları temel alarak genişletin.

Bilinen Kapsam ve Kaynak Sınırları