UI Design modunu keşfedin

UI Design görünüm moduyla kullanıcı arayüzünü tasarlamaya başlayın.

UI Design görünümü ile mobil veya web uygulamalarının ekranlarını tasarlayabilirsiniz.

Arayüzü tasarlamak istediğiniz uygulamayı oluşturmak için Apps'a gelin ve web uygulaması geliştirmek istiyorsanız Create Web App, mobil uygulama geliştirmek istiyorsanız Create Mobile Compatible'ye tıklayın. Ardından isim vererek Create butonuna tıklayın. Oluşturulan uygulama, UI Design görünümüyle açılır. Bu görünümde soldaki Elements paneli ile ekrana yeni elementler ekleyebilir, sağdaki Properties (Özellikler) paneli ile bu elementlerin özelliklerini düzenleyebilirsiniz.

Açık olan ekran, UI Design görünümünün orta alanında görüntülenir. Screens (Ekranlar) paneli ile yeni ekranlar oluşturabilir ve bu ekranları New Folder'e tıklayın, klasör isimlendirmesini yapın ve Create butonuna tıklayınız. Oluşturduğunuz klasör içerisinde screens'leri düzenleyebilirsiniz.

Responsive ekran tasarımı hazırlıyorsanız, ekran genişliği için ücretsiz ve önceden tanımlanmış seçenekleri kullanabilirsiniz. Seçtiğiniz web, tablet ve telefon görünümünde UI tasarımınıza devam edebilirsiniz.

Kuika, Container, DataRepeater, Display ve Input gibi farklı kategorilerde elementlere sahiptir. Elementler panelinden ilgili elementi ekrana sürükleyip bırakarak ekleyebilirsiniz.

Item Tree (Bileşen Ağacı) ile ekranın ve elementlerin hiyerarşisini görüntüleyebilirsiniz. Buna yardımcı olması için alt kenardaki BreadCrumb satırını da kullanabilirsiniz. Bu alanda, seçilen elementin parent ve child ilişkilerini görüntüleyebilirsiniz. Ayrıca diğer elementleri de görüntüleyebilir ve tek tıkla ilgili elementi seçebilirsiniz.

Bir elementi seçtiğinizde, sağ taraftaki Properties (Özellikler) paneli, elemente ait parametreleri düzenlemek için de kullanılır. Properties (Özellikler) panelinin içeriği, seçilen elementin özelliklerine göre değişir. O anda açık olan ekranın özelliklerini görüntüleyebilmeniz için ekranın seçili olduğundan emin olun. Ekranın alt kenarına veya dış alanına tıklayarak ekranı seçebilir ve özelliklerini ayarlayabilirsiniz. Ayrıca Styling (Stil) paneli ile seçilen elementin görsel düzenlemelerini yapabilirsiniz. Styling(Stil) paneli aracılığıyla, boşlukları, tipografileri ve kenarlıkları düzenleyebilirsiniz.