İlgilenenler için tasarlamak Web siteleri için Adobe XD'deki UI kitleri bir proje başlatmanın harika bir yoludur tasarlamak Yeni. Bu kitlerle, web siteniz veya uygulama tasarımınız için düzenleyebileceğiniz ve kullanabileceğiniz bazı yararlı kaynaklara erişebilirsiniz.
Yazılımda yeniyseniz ve şu adresteki UI kitlerini nasıl kullanacağınızdan emin değilseniz: kerpiç XD, o zaman doğru yerdesiniz. Bu makalede, programa UI kitlerini nasıl yükleyebileceğinizi ve projeniz için dahil olan kaynakları nasıl kullanabileceğinizi göstereceğim.
Adobe XD'de UI kitleri nasıl indirilir
İlk olarak, kullanıcı arayüzü araç setlerini nasıl indireceğinize bir göz atalım. Adobe XD , Doğrudan programın içinden. Başlamak için şu adımları izleyin:
Adım 1: Programın sol üst köşesindeki hamburger menü düğmesine tıklayın.
Adım 2: Menüde, "Kullanıcı arayüzü gruplarını al" seçeneğine gidin, ardından mevcut üç seçenekten birini tıklayın.
Bu makale için Google Material UI Toolkit'i seçeceğim.
Ancak, projenize bağlı olarak Apple iOS veya Microsoft Windows kitlerini seçebilirsiniz. Bu, kullanıcı arayüzü gruplarını ücretsiz olarak indirebileceğiniz resmi bir web sayfası açacaktır.
Adım 3: Bir konum seçin kerpiç Bir sonraki web sayfasında XD UI kitini seçin ve sisteminize indirin.
Adım 4: Şimdi indirilen dosyayı Adobe XD'de açın, ilgili platformun kullanıcı arayüzü kaynaklarını içeren bir dizi çalışma yüzeyi ile karşılaşacaksınız.
Tek tek çalışma yüzeylerini görmek için yakınlaştırmak / uzaklaştırmak üzere Ctrl tuşuna basıp kaydırma tekerleğini hareket ettirebilirsiniz.
Bunun yerine Tel Çerçeveleri indirmek isterseniz, Kullanıcı Arabirimi Kitleri Al menüsünde Tel Çerçeveler seçeneğini tıklatabilirsiniz.
Ayrıca, UI Kitlerini Al menüsündeki "UI Kits" seçeneğine tıklayarak Adobe web sitesinde ek UI kitleri arayabilirsiniz.
Web sitesinde, baş döndürücü bir ekrana benzeyen gerçekten havalı Movie Magic UI koleksiyonu da dahil olmak üzere bazı harika seçenekler var.
Artık UI kitlerini nasıl indireceğinizi bildiğinize göre, bunları projelerinizde nasıl kullanacağınıza bakalım.
Adobe XD'de kullanıcı arabirimi kümeleri nasıl kullanılır
Projenizde kullanıcı arabirimi gruplarını kullanmak için şu basit adımları uygulamanız yeterlidir:
Adım 1: Projenizde kullanmak istediğiniz widget'ı yakınlaştırın ve seçmek için başlığını tıklayın.
Adım 2: Şimdi öğeyi Ctrl + C kısayolunu kullanarak kopyalayın.
Adım 3: Ardından menüden yeni bir Adobe XD projesi açın.
Adım 4: Burada, widget'ı Ctrl + V kısayolunu kullanarak yapıştırın.
Bu makale için Google Material UI araç setindeki Mobile Dark öğesini kullanacağım. Öğe, katmanlardan daha fazlasını yerleştirmenize yardımcı olacak kılavuzlar içerir, ancak bunları kullanmak istemiyorsanız bir sonraki adımı izleyerek kolayca kaldırabilirsiniz.
Adım 5: Kılavuzları kaldırmak için sol üst köşedeki kilit simgesine tıklayın ve ardından Sil'e basın. Öğeye daha fazla nesneyi tam olarak yerleştirmek için kılavuzları kullanmak istiyorsanız bu adımı atlayabilirsiniz.
Adım 6: Şimdi bu sayfaya eklenecek başka bir öğe seçmek için kullanıcı arayüzü grubuna geri dönün. Yine, öğe başlığına tıklayın ve Ctrl + C kısayolunu kullanarak kopyalayın.
İletişim kutularından birini kullanacağım bu makale için temel bir tema oluşturacağım.
Adım 7: Yeni öğeyi önceki öğeye yapıştırın, ardından kılavuzlara göre hizalayın.
Adım 8: Şimdi tosttaki her öğeyi düzenlemek için metin kutusuna çift tıklayın ve ardından kullanmak istediğiniz metni girin. İlk olarak, tostun başlığını değiştirelim.
Ardından, metin kutusunu çift tıklatıp eklemek istediğinizi yazarak metin içeriğini değiştirin.
Düğmelerin metnini de aynı şekilde değiştirebilirsiniz.
Metni düzenlemeyi bitirdikten sonra metnin rengini ve saydamlığını değiştirebilirsiniz. Opaklığı değiştirmek için, araç çubuğundaki Opaklık seçeneğinin altındaki kaydırma çubuğunu sağa hareket ettirmeniz yeterlidir.
Metin rengini değiştirmek için Doldur seçeneğinin yanındaki dikdörtgeni tıklatın ve ardından renk seçiciden yeni bir renk seçin.
Bu şekilde düzenleyebileceğiniz sadece metin değildir. İletişim kutusundaki hemen hemen tüm öğelerin rengini ve saydamlığını da değiştirebilirsiniz; bu, benzersiz bir renk şeması kullanıyorsanız harikadır.
Sonuçtan memnun kaldığınızda, devam edin ve menüdeki "Farklı Kaydet" seçeneğini tıklayarak veya Shift + Ctrl + S kısayolunu kullanarak dosyanızı kaydedin.
Kullanıcı arayüzü kombinasyonları ile tasarım başarınız
Artık Adobe XD'de UI kitlerini nasıl indireceğinizi ve kullanacağınızı bildiğinize göre, kısa sürede harika tasarımlar üretmeye başlayacağınızdan eminim. Bu kullanıcı arabirimi araç setleri kesinlikle oldukça kullanışlıdır ve kullanıcı arabiriminin tüm öğelerini tasarlama konusunda endişelenmenize gerek kalmadan projenize doğrudan erişmenize yardımcı olur.
