Adobe XD ile prototipler oluşturun

Çağdaş Web ve Uygulama Tasarımında, etkileşimin yepyeni bir sayfa veya ekranı açmadığı zamanlar vardır. Etkileşimli içerik oluşturmaya yönelik modern yaklaşım, tasarım arayüz elemanları arasındaki geçişler gerektirir, böylece kullanıcının değişen içeriği değiştirme deneyimi ile şaşırır ve vatan. Bu, bir yenileme olmadan aynı ekranda veya sayfada olur. Bu tür etkileşimlerin tasarlanması ve onları düzgün çalışmaya hazır hale getirmek zaman alabilir, ancak kodunuzu yazmadan önce yapmaya değer.

Bu, Adobe XD'nin son birkaç ayını gelişimin sağlanmasını sağladığı şey. Bir anda bir durumda içerik oluşturun, bu içeriği yeni ekrandaki yeni duruma taşıyın ve sadece geçiş için 'Otomatik Animate' seçeneğini seçmeniz yeterlidir. Her iki ekranda da aynı olan tüm içerik otomatik olarak bir konumdan diğerine geçer. Her iki ekranda da görünen tüm içeriği istemiyorsanız, içeriği ilk önce görünmez hale getirin ve yerine geçecektir.

Gibi diğer Adobe yazılımlarını öğrenin Adobe boyutu .

• 8 Temel Prototipleme ve Yapı Araçları

Burada, sadece bunu yapan bir uygulama prototipinin nasıl oluşturulacağını göstereceğiz (daha fazlası için) Bir uygulama nasıl oluşturulur Öğreticiler, en iyilerinin yıkımızı kontrol edin). Ve bunun ötesine geçmek, XD'nin yeni bir özelliği, kullanıcının sesleriyle etkileşimleri kontrol etmesini sağlar. Bunu bir tasarım özelliği olarak keşfedeceğiz ve uygulamanın kullanıcıya nasıl tekrar konuşabileceği, bu da ilginç tasarım fırsatları sağlayabilir.

Proje dosyalarını indirin Bu eğitim için.

01. Projeye başlamak

Adobe XD'niz yoksa, indirip yükleyebilirsiniz. İşte . Yükleme tamamlandıktan sonra, yazılımı açın ve hoş geldiniz ekranı, indirmek için bir ekran boyutu seçmenizi sağlar. Bu durumda iPhone 6/7/8'i seçin, bu projenin doğru boyutu olduğu için, ancak çeşitli boyutlar olduğunu göreceksiniz.

02. İlk görüntüyü içe aktarın

Görüntüleri içe aktarmanın farklı yolları vardır, ancak bu ilk örnekte Dosya ve GT'ye gidin; İthalat. Proje dosyalarından 'varlıkların' klasörünü ve ithalat ilk görüntünün 'Sky.png' olacak. Ekranın üstüne yerleştirin ve sadece birkaç piksel aşağı hareket ettirin.

03. Kabini yerleştirin

Tasarım için bir sonraki resim 'cabin.png' olacaktır. Bunu önceki adımda yaptığınız şekilde aynı şekilde içe aktarın ve ardından ekranı doldurun. Son olarak, 'trees.png' imajını içe aktarın ve gölün üzerindeki ağaçlarla ekranın altına yerleştirin.

04. logo getirmek

Bu görüntülerin ayrı katmanlar olduğu nedeni, ekranlar arasında bir geçiş oluşturulduğunda ayrı ayrı hareket edebilirler. Dosya menüsüne gidin ve İçe Aktar'ı seçin. Bu sefer bir vektör görüntü olan 'logo.ai' seçeneğini seçin. Bu resmi ekranın üst merkezine yerleştirin.

05. Bir daire ekleyin

Daire aracını seçin ve logodan biraz daha büyük bir daire çizin. Sağdaki özellikler panelinde, inmeyi çıkarın ve arka planını siyah yapın. Arka plan bulanıklığı seçin ve parlaklığı -30'a kadar azaltın, böylece daire hala siyah olacaktır.

06. Grafikleri yeniden sıralayın

Şimdi dairenin logonun arkasına geçmesi gerekiyor. Nesne'yi seçin ve GT; Geriye doğru düzenleyin ve gönderin. Diğer Adobe ürünlerinde olduğu gibi, aynı zamanda CMD / CTRL + [ Herhangi bir grafiği katman sırasına geriye doğru hareket ettirmek için. Bu arada sağ kare braketi kullanarak, bir nesneyi siparişte öne çıkarır.

07. Mic'i bırak

Şimdi 'mic.ai' imajını alın ve görüntüyü nispeten küçük olacak şekilde yeniden boyutlandırın. Bunu ekranın altına yerleştirin. Bunun etrafında bir daire çizin ve doldurunca doldurun. Sonra kontur beyaz ve iki piksel genişliğinde yapın. 'MIC' imajının etrafında bulun.

08. Kısa mesaj

Mikrofonun altındaki 'Ara' kelimelerini eklemek için metin aracını kullanın. Metin beyazını yapın ve Helvetica Neue Yoğunlaştırılmış Siyah'a değiştirin. Ekranın sol alt kısmında açmak için Varlıklar paneli simgesine tıklayın. Ekranda seçilen metinle, bu formatı metin için kaydetmek için 'Karakter Stilleri' nin yanındaki '+' simgesine tıklayın.

09. Bir gruba katılın

Ekranın sol altındaki katman paneli simgesini seçin. Ekranda 'Ara' metnini seçin ve Shift-Click Daire ve mikrofon simgesini eklemek için. Nesneye gidin ve Grup'u seçin. Katman panelinde bu grubun 'Ara' olarak yeniden adlandırın. Özellikle bunları canlandırırken gruplar için yararlıdır.

10. logoyu gruplandırın

Tıpkı son adımda olduğu gibi, etrafındaki logoyu ve bulanık daireyi seçin, sonra bunları birlikte gruplandırın. Katman panelinde, buna daha sonra tekrar düzenlemeniz gerekirse, kolayca tanımlanabilir olması için tüm grubu yeniden adlandırın. An için ilk ekran için tasarım tamamlandı.

11. Ekstra Elemanlar

İlk ekran tamamlanmasına rağmen, eklenmesi gereken daha fazla tasarım öğesi var. Bu, elemanların ekranları arasındaki konumlandırmayı değiştirilerek animasyon oluşturulur. Dikdörtgen aracına gidin ve tutun Vardiya Ekranda bir kare eklemek, kenarlık beyazını yapmak için.

12. FARKLI İTHALAT

Şimdi işletim sisteminiz içindeki varlıklar için klasörü açın. 'Cabin1.png' görüntüsünü seçin ve bunu önceki adımda oluşturduğunuz kareye doğrudan sürükleyin. Bunun için otomatik olarak maskelenir. Görüntünün konumunu düzenlemek için çift tıklayın ve kabinin karede göründüğünden emin olun.

13. Bir etiket ekleyin

Metin aracını kullanarak, metnin altındaki 'orman kabini' etiketini ekleyin ve kaydedilen stildeki metni 8. adımdan stil etmek için Varlıklar panelini kullanın. Görüntüyü ve etiketi seçin ve bunları bir araya getirin. Katmanlar panelinde 'sol kabin' grubunu adlandırın.

14. Grubu çoğaltın

Normalde bir arayüz elemanının tekrarlanması 'Dinle Grid' aracı için mükemmel bir iştir. Ancak, bu, tekrarlama ızgarasıyla çalışmayan belirli bir animasyona ihtiyaç duyacaktır. Görüntü ve metin grubunu seçin, ardından orijinalin yanında oturmasını ve bunun yerine 'cabin2.png' görüntüsünü eklemek için kopyalayıp yapıştırın.

15. Yeniden Adlandır sonra tekrar kopyalayın

Metni 'kar kabinine' olarak değiştirin ve katmanlar panelinde bu 'sağ kabin' adını verin. Hem sol hem de sağ kabini seçin ve bunları çoğaltın, aşağıdaki kopyaları yerleştirin ve metinlerini ve görüntülerini 'cabin3.png' ve 'cabin4.png' ile güncelleyin. Bunların ikisini birlikte gruplandırın ve 'alt kabin' grubunu adlandırın.

16. Metin başlığı

Sayfaya metin 'Cabins için arama sonuçları' ile metin ekleyin. Bunu Rockwell TypeFace'e verin ve bunu varlık panelindeki karakter stillerine kaydedin. Şimdi 'alt kabin' grubunu ekranın altındaki sağa yerleştirin ve görünümü sıfıra indirin, böylece bu ekranda görünmez.

17. Opaklık Değiştirme

Şimdi sol ve sağ kabinleri seçin, ekranın altına getirin ve görünüm kaydırıcısını sıfıra çıkarın. Arama metni için tekrar tekrarlayın. Başka bir ekrana geçtiğimizde, bunların hepsi yeni konumlarına geçecektir. Katman panelinde, diğer kabin gruplarının üstünde 'sol kabin'i' hareket ettirin.

18. Ekranı çoğaltın

Adını tıklatarak artabeyi seçin, ardından artabaya çift tıklayın ve adını 'HOME' olarak değiştirin. Artasoyu kopyalayıp yapıştırın ve 'Ara' yeniden adlandırın. Şimdi logoyu seçin ve neredeyse ekrandan çıkın, ardından görünümünü sıfıra düşürün.

19. Arka planları hareket ettirin

Gökyüzü görüntüsünü seçin ve ekranda hafifçe çekin. Kabin görüntüsünü seçin ve kabin ekranın üstünde oluncaya kadar yukarı kaldırın. Ardından ağaçlara görüntüye tıklayın ve kabinin üzerine getirin. Son olarak, 'Ara' grubunu seçin ve görünümünü sıfıra düşürün.

20. Yeni öğeler belirir

Katman panelindeki arama sonuçlarını seçin ve görünümünü 100'e kadar getirin. Ekranda hareket ettirin. Bunu sol kabin, sağ kabin ve alt kabin için tekrarlayın. Basit bir arka düğmeyi çizmek ve etrafında bir daire eklemek için kalem aracını kullanın. Arka plan bulanıklaştırın ve bunun parlaklığını -30'a kadar çıkarın.

21. Geri düğmeyi tamamlayın

Arka oku seçin ve daireyi seçin, birlikte gruplandırın ve Katman panelinde 'Geri düğmesini' adlandırın. XD arayüzünün sol üst köşesindeki 'prototip' düğmesine basarak 'prototip' moduna geç. Ana ekran'ı seçin, mavi oku arama ekranına sürükleyin ve bir açılır panel görünecektir.

22. Sesli komut

Seslendirmek için tetiği değiştirin ve bunu kontrol etmek için 'Ara' kelimesini sesli komut olarak yazın. Eylemi otomatik animate ve geçmeyi kolaylaştırmak için değiştirin. Süre 1.5'lerini yapın. Arama ekranında arka düğmesine tıklayın ve mavi oku 'HOME' ekranına geri sürükleyin. Sadece dokunmak için tetiği değiştirin.

23. Prototipi test edin

XD arayüzünün sağ üst kısmında bir oyun düğmesidir. Buna tıklayın ve bir çalışma prototipi şimdi ekranda açılır. Ana sayfada, 'Ara' ses komutunu konuşurken boşluk çubuğunu basılı tutmanız gerekir. Boşluk çubuğunu bıraktığınızda, sizi bir sonraki ekrana götürür ve grafik arayüzünü konumuna getirir.

24. Geri dön

Geçiş çalıştırıldığında, ana ekrana geri dönmek için Geri düğmesine basabilirsiniz. Prototipi kapatın ve arama ekranına tıklayın, ardından sağdaki mavi oku tıklayın (sürüklemeyin). Tetiği zamana değiştirin, gecikmeyi 0'ları yapın ve eylemi konuşma oynatılmasına ayarlayın. Konuşmayı 'Mevcut kabinler için arama sonuçları' yapın.

25. Konuşma Onayı

Aramanın bir ses onayını duymak için bu şimdi oynat düğmesiyle test edin. Bunu denediğinizde prototipi kapatın. Başka bir ekran oluşturulacak, bu yüzden XD arayüzünün sol üstündeki 'Tasarım' görünümünü tekrar tıklatalım. Adını tıklatarak Arama ekranına tıklayın ve ardından kopyalayıp yapıştırın.

26. Görüntüyü ölçeklendirme

Yeni ekran 'kabini' olarak yeniden adlandırın. 'Sol kabin' katmanı için resme çift tıklayın. Köşe kollarını yeniden boyutlandırın, böylece ekranı doldurun, ardından görüntüyü içeride bu ekranı kapsayacak şekilde yeniden konumlandırın. Arama sonuçları metnine tıklayın ve görünümden kaldırmak için görünümü sıfıra indirin.

27. Yeni Ekran Elemanları

Grubun bir parçası olduğu için 'orman kabininin' metnini çift tıklatın. Metin boyutunu 26 piksel olarak büyütün ve ekranda hafifçe hareket ettirin. Helvetica Neue ortamındaki ekrana 14 piksel boyutunda metin ekleyin ve arka plana karşı öne çıkmak için beyaza ayarlayın. Başlığın altındaki çizgi aracıyla beyaz bir çizgi ekleyin.

28. Bir düğme oluşturun

Tasarımın altındaki ekranda bir dikdörtgen çizmek için dikdörtgen aracını kullanın. Bu şekle yuvarlak köşeleri vermek için köşe kulplarında sürükleyin. 'Rezerv' kelimesini buna ekleyin, Helvetica Neue için Varlıklar panelindeki Kayıtlı Karakter Stili'ni kullanarak yoğunlaştırılmış kalın.

29. Prototip moduna geçin

Tüm tasarım öğeleri, uygulamanın tüm tasarımı için şimdi yerindedir. Sol üst köşedeki 'Prototip' kelimesini tıklatarak 'Prototip' moduna gidin. Arama ekranında, görüntü ve metnin 'Orman Kabin' grubuna tıklayın. Mavi kolu bundan 'kabin' ekranına doğru sürükleyin.

30. Animasyon Ayarları

Ekranlar arasındaki geçiş için açılır panelde, tetikçe olarak dokunun, ardından Eylem Otomatik Animate'i yapın. Snap olarak gevşetmeye devam edin, ancak bunun süresini 0.6S'ye düşürün. Bu, animasyonun sürüklenmemesini sağlar - ilk ekranın ikinci ekrana hareketi, daha uzun bir geçiş gerektiren birçok harekete sahip olmasını sağlar.

31. Geri düğmeyi bağlayın

Şimdi son ekrandan arka düğmeyi seçin ve mavi oku bu tekrar 'Ara' ekranına kadar sürükleyin. Önceki geçişten gelen tüm ayarlar hatırlanmalıdır. Şimdi devam etmeye hazırsınız ve Oynat düğmesine tıklayarak bunu test edin.

32. Otomatik Animasyon

Otomatik animasyonla göreceksiniz, şimdi görüntünün ekranı doldurmak için genişlemesi ve artık gerekmeyen elemanların kaybolması durumunda, yeni metin kaybolurken uzaklaşır. Bu, oto-canlandırmayı üç ekranda çalışmayı görmek için iyi bir yol sağlar.

33. Projeyi Kaydet

Varsayılan olarak, projeniz otomatik olarak yaratıcı buluta kaydedilmelidir, ancak herhangi bir sorun olmaması durumunda bir kopyayı kendi sabit diskinize kaydetmek iyi bir fikirdir. Dosya ve GT'ye tıklayın; Kaydet, konumu kendi bilgisayarınıza değiştirin ve projeyi uygun bir adla adlandırın.

34. Projeyi paylaşma

Tüm prototipleme noktası, projeyi diğer insanlarda test etmektir. Neyse ki, bunu bir esinti yapan XD arayüzünün sağ üst kısmında bir paylaşım düğmesi var. Paylaş düğmesini tıklatın ve görünen damla menüsünde, inceleme için Option Paylaş'ı seçin.

35. Prototip Yayınla

Bir sonraki ekranda, otomatik animasyon desteğinin web için henüz mevcut olmadığı söylenir, ancak yakında geliyor. Genel Bağlantı Oluştur'u tıklayın ve ardından bir Web tarayıcısındaki halka açık bağlantıyı ziyaret etme hakkındaki bağlantıyı tıklayın. Sesli komutu prototiple kullanmak için boşluk çubuğunu basılı tutmanız gerekir.

36. Video sürümü

Başka bir prototip, arayüzü eylemde kaydedilerek paylaşılabilir. Paylaş düğmesini tıklayın ve video kaydet seçeneğini seçin. Bu bir pencere açacaktır ve bunu kapatırken, ekranın bir kaydını bir MP4 dosyası olarak kaydetmeniz istenir, bu da prototipinizi paylaşmanın faydalı bir yoludur.

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi'nin 285'inde yayınlandı. Web tasarımcısı . Sayı 285 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

• Mobil Uygulama Tasarımı: Bir Başlangıç ​​Kılavuzu
• Vue.js ile bir uygulama nasıl oluşturulur
• Mobil App Onboarding ile Sapları Get