Summary

Bu yapay zeka wireframe oluşturucu, WordPress blok editörünü açmadan önce sayfa düzenini blok çıkmanızı sağlar. İnişli çıkışlı sayfa, blog yazısı, panel, ürün sayfası, portföy veya iletişim formu gibi bir sayfa türü seçin, bir düzen stili (yığılı bantlar, kart ızgarası veya kenar çubuğu artı ana) seçin ve iki ile sekiz arasında bölüm sayısı belirleyin. Araç gerçek, orantılı kutuları canlı olarak yeniden çizer ve F-pattern ve Z-pattern okuma sırası gibi kurulmuş UX kurallarını takip ederek, çıkardığınız taslak zaten bir sayfa gibi görünür, bir tahmin değil.

Yapay Zeka Wireframe Oluşturucu: Hızlıca Çızın

Bir sayfa türü, bir düzen stili ve bir bölüm sayısı seçin. Gerçek bir düşük doğruluklu kutu düzeni Gutenberg bloğu yerleştirilmeden önce canlı olarak yeniden çizilir.

Desen Taslağı Oluştur

Sayfa düzeninizi çizin

İnşa ettiğiniz sayfa türünü, içerik alanı için bir düzen stilini ve kaç bölüme ihtiyacı olduğunu seçin. Aşağıdaki kutular her değişiklikte güncellenir.

Yalnızca wireframe önizlemesi. Kutular nihai metin veya görüntü değil, düzen bölgelerini temsil eder.

Bu wireframe nasıl dürüst kalır

Wireframe'in dürüstlüğü nasıl korunur?

F-pattern ve Z-pattern okuma sırası

Yığılı içerik bantları, göz takip araştırmasının metin yoğun sayfalarda sürekli bulduğu F-pattern'i takip eder. Başlık, altbaşlık ve harekete geçiş çağrısı bir satırda olan merkez kahramanı, bunun yerine Z-pattern'i takip eder, bu, okuyucunun gözünün seyrek, karardan sonra okuyan bir ekranda izlediği şeklidir.

Gerçek kurallar üzerine inşa edilmiş sayfa türü hazır ayarları

Bir panel, başka her şey değişse de kalıcı bir sol gezinme sütununu tutar, yönetici panellerinin gerçekten nasıl oluşturulduğu gibi. Bir blog yazısı, ana makale sütununu bir kenar çubuğuyla eşleştirir. Bir ürün sayfası, galeriyi ve kasa kutusunu katlamanın üstüne bölüyor, ardından aşağıya detay bölümleri yığıyor.

Gerçekten yanıt veren ızgara matematik

Izgara düzeni CSS otomatik dolmasını kullanır, böylece kartlar bölüm sayısı değiştikçe kendi başlarına yeniden akışı sağlar; ve her düzenin, ızgara, yığılı veya kenar çubuğu-artı-ana, kabaca 480px genişliğinin altında tek sütuna çökmesi.

Üç ayar, bir taslak

  1. 1

    1. Sayfa türünü seçin

    İnişli çıkışlı sayfa, blog yazısı, panel, ürün sayfası, portföy veya iletişim formu. Bu, başlığı, kahramanın şeklini ve altbilgiyi o sayfa türünün gerçekten neye ihtiyacı duyduğuyla eşleştirecek şekilde ayarlar.

  2. 2

    2. Bir düzen stili seçin

    Yığılı bantlar, kart ızgarası veya bir kenar çubuğunun yanında bir ana sütun. Her sayfa türü, yapı oluşturucuların en çok ulaştıkları stille açılır ve bunu geçersiz kılabilirsiniz.

  3. 3

    3. Bölüm sayısını ayarlayın

    İkiden sekize kadar içerik bölümlerini kaydırın. Aşağıdaki wireframe kutuları canlı olarak ekler veya kaldırır ve aynı başlığı, kahramanı ve altbilgiyi yerinde tutar.

Site Editörüne dokunmadan önce istemci önüne koyabileceğiniz bir taslak

Bu kadar kaba bir wireframe gerçek metinle irtibata geçmeyi amaçlamaz. Bir sayfanın iskeleti hızlı bir şekilde anlaşmayı amaçlamaktadır: kaç bölüm, katlama çizgisinin neyi oturması, blogun hiç yan çubuğa ihtiyacı olup olmadığı. İskelet anlaşıldıktan sonra, Site Editöründe eşleşen Grup, Kapak ve Sorgu Döngüsü blokları inşa etmek çok daha kısa bir konuşmadır, çünkü kimse artık yapı hakkında tartışmıyor, sadece içine giden sözler ve resimler hakkında.

  • Site Editörünü açmadan önce bölüm sayısı hakkında anlaş
  • Aynı aramada istemciye iki düzen stili göster
  • Masaüstü taslağıyla aynı ekranda mobil versiyonu kontrol et
Çeşme kalemi ve cetvel kullanarak kağıt üzerinde wireframe kutularını elle çizerek yakından görünüm

Wireframe oluşturucu hakkında sık sorulan sorular

Bu yapay zeka wireframe oluşturucu ücretsiz mi?
Evet. Tarayıcınızda tamamen çalışır, kayıt gerekmez ve kullanım sınırlaması yoktur. Sunucu çağrısı yok: düzen matematik, bir denetimi hareket ettirdiğiniz anda cihazınızda gerçekleşir.
Girdilerimi bir yere kaydeder veya gönderir mi?
Hayır. Sayfa türü, düzen stili ve bölüm sayısı sayfanın belleğinde kalır. Hiçbir şey veritabanına yazılmaz ve aracın kaç ziyaretçi çalıştığını ölçmek için kullanılan anonim bir araç-çalıştırma sinyali hariç sunucuya gönderilmez.
Bu düzen desenleri nereden geliyor?
Tahminlerden ziyade belgelenen, geniş alıntılanan UX araştırmasından: F-pattern ve Z-pattern göz takip çalışmaları (Nielsen Norman Grubu), yönetim panelleri genelinde kullanılan kalıcı kenar çubuk gezinti kuralı, ürün sayfalarında yaygın olan bölünmüş galeri-artı satın alma kutusu deseni (Baymard Enstitüsü bulgusu) ve kısa formlar için usabilite araştırmasının sürekli olarak en iyi dönüşüm sağladığını bulduğu tek sütunlu düzen.
Bu wireframe'i gerçek bir Gutenberg deseni olarak dışa aktarabilirim?
Doğrudan hayır. Bu bir kod oluşturucu değil, bir planlama adımıdır: Site Editörünü açmadan ve Grup, Kapak ve Sorgu Döngüsü blokları elle inşa etmeden önce bir istemci veya bir takım üyesiyle bir yapı hakkında anlaşmanıza yardımcı olur.
Panel sayfa türü seçtiğim düzenden bağımsız olarak neden her zaman sol kenar çubuk tutuyor?
Kalıcı gezinme sütunu bir yönetim panellerinin yapısal kuralı olduğu için, stilistik bir seçim değil. Düzen seçici hala içindeki widget'ları nasıl düzenlediyse de değişir (kart ızgarası veya yığılı liste), ancak nav sütununu kaldırmak gerçek panelların nasıl oluşturulduğunu yanlış temsil eder.
İnişli çıkışlı sayfa için hangi düzen stilini kullanmalıyım?
Kart ızgarası, özellik ve proje bölümleri genellikle yan yana taranabilir olduğundan, iniş sayfaları ve portföyler için varsayılandır. Yığılı bantlar, ziyaretçilerin bir anda bir şeyi okumasını istediğiniz bir ürün sayfası veya form için uygun olur.
Wireframe küçük bir telefon ekranında çalışıyor mu?
Evet. Her düzen yaklaşık 480px genişliğinin altında tek sütuna çöker; ızgara ve kenar çubuğu-artı-ana düzeni de dahil olmak üzere, böylece masaüstü taslağıyla aynı ekranda mobil taslağı kontrol edebilirsiniz.
Daha sonra daha fazla sayfa türü eklenecek mi?
İnişli çıkışlı sayfa, blog yazısı, panel, ürün sayfası, portföy ve iletişim formu, serbest WordPress oluşturucularının en çok taslak yaptıkları sayfa türlerini kapsar. Uygulamada açık bir boşluk ortaya çıkarsa, hazır ayar listesine eklenir.

Sekmenizde açık tutmaya değer daha fazla WordPress aracı

noonwp, Gutenberg, Tam Site Düzenleme ve RTL WordPress'i kapsar - insanlar sadece onları okumak değil, istemci siteleri teslim eden insanlar için.

Scriptorium Aç
Noon