Üretken XD Prototipleme – Bir Adobe XD Bileşenleri Eğitimi

Adobe XD'nin bileşen sistemi, tasarımcılara dijital ürünlerin prototipini oluşturmaları için güçlü özellikler sağlar. Ancak, tuhaflıklar olmadan değildir ve özel bakım gerektirir. Akıllı kısayolları kullanmak ve en iyi uygulamaları takip etmek, tasarımcıların XD prototip oluşturma iş akışlarını kolaylaştırmasını sağlayacaktır.

Adobe XD, 2017 yılının sonlarında resmi olarak halka arz edilmesinden bu yana, UX tasarımcıları için oldukça rekabetçi bir tel çerçeve oluşturma ve prototip oluşturma aracı olma yolunda büyük adımlar attı. Özellikle yeni bileşen sistemi, tasarımcıların deneyebileceği etkileşim türlerini genişletiyor. Yine de, bileşenler tuhaflıklar ve dezavantajlar olmadan değildir. XD bileşenleriyle çalışırken, yoğun işlerden kaçınmak ve sistemin tüm potansiyelinden yararlanmak için bir dizi iş akışı uygulamasını benimsemek yardımcı olur.

Adobe XD Bileşenleri Nelerdir?

XD bileşenleri, metin, şekiller veya çizgiler gibi yeniden kullanılabilir öğe gruplarıdır. Bir bileşenin, üst öğe olarak hizmet veren bir "Ana Bileşen" ve çalışma yüzeyine yerleştirilen "örnekler" veya alt öğeler vardır. Ana Bileşeni değiştirirken, değişiklikler tüm örneklerine yayılır.

XD'nin benzer bir amaca hizmet eden önceki “sembol” sisteminin yerini alan bileşenler, önemli bir farklılaştırıcı sunuyor . XD'nin Prototip Modunda tanımlanan farklı girişlere yanıt veren birden fazla duruma sahip olabilirler. Örneğin, bir düğmenin varsayılan bir durumu olabilir, ancak fareyle üzerine gelindiğinde veya tıklandığında görünümünü değiştirebilir. Tıklandığında bir ses çalabilir, hatta konuşma tanımadan gelen girdilere göre görünümünü değiştirebilir.

Bileşen sistemi bir zaman tasarrufu sağlar ancak özel bakım gerektirir. Sistemin gücünden yararlanmak için dikkatli bir yaklaşım ve özenle hazırlanmış bir iş akışı gereklidir.

Adobe XD'ye aşinalık önerilir

Adobe XD'ye oldukça aşina olan tasarımcılar, aşağıdaki ipuçlarından ve önerilerden en fazla faydayı elde edeceklerdir. Avantajlı bir başlangıç ​​yapmak için Google'ın Materyal Tasarımı ana sayfasından Adobe XD Design Kit'i indirin. Kit, denemek ve yapısını bozmak için bir Adobe XD bileşen seti sağlayacaktır.

1. İpucu – Bir Bileşen Oluşturmadan Önce Tüm Durumları Düşünün

Tasarımcılar, durumları olan bir bileşeni ilk kez oluştururken, bir bileşendeki olası değişikliklerin diğer örnekleri nasıl etkileyebileceğini anlamalıdır. Örneklemek için, birkaç durum içeren bir açılır menüyü ele alalım:

• Varsayılan durum : menü daraltılmıştır
• Fareyle üzerine gelme durumu : imleç üzerindeyken anahat rengi değişebilir
• Genişletilmiş, tıklanmış bir durum : açılır menü seçenekleri gösterilir

Bir açılır listenin alt örneğinin varsayılan durumunu düzenlerken, bu değişiklikler fareyle üzerine gelme veya tıklanma durumlarına yayılmaz . Tüm örneklerin üzerine gelme veya tıklanma durumlarını güncellemek için Ana Bileşen'deki varsayılan durumda değişiklikler yapılmalıdır.

Ana Bileşenler üzerine atlamak ve yinelemeye başlamak cazip gelse de, üst ve alt bileşenlerin davranış biçimlerindeki farklılıklar nedeniyle bazen beklenmeyen sorunlar meydana gelebilir.

İyi bir uygulama, diğer durumları eklemeden veya bileşeni başlatmadan önce Ana Bileşenin varsayılan durumunda gereken her şeyi düşünmek ve tahmin etmektir - hatta farklı durumları yan yana yerleştirmeye kadar gidebilir.

Tasarımcılar, Ana Bileşenin varsayılan olmayan durumlarında veya alt örneklerde varsayılan durumu etkilemeden öğeler ekleyip değiştirebileceklerini de unutmamalıdır, ancak tersi doğru değildir.

Adobe için bir öneri : Tasarımcıların varsayılan olmayan durumları olduğu gibi tutabilmeleri ve Ana Bileşenin varsayılan durumundaki değişikliklerin yayılmasını önleyebilmeleri için bileşen durumlarına bir kilitleme özelliği verin.

2. İpucu – Yaratılıştaki Bileşenleri Adlandırın

Bir bileşen oluşturmak (bir öğeye sağ tıklayın, ardından menüden "Bileşen Yap"ı seçin veya Mac'te Cmd-K/PC'de Ctrl-K'ye basın), bileşeni sol kenar çubuğundaki Varlıklar paneline ekler. XD, bileşene varsayılan "Bileşen XX" adını verir ("XX" bir sayıdır). Çok açıklayıcı değildir, bu nedenle benzersiz, aranabilir bir ad vermek en iyisidir.

Neden yaptın? Bileşenler listesi dolduğunda, bileşenlerin tümü aynı varsayılan adla ve anlamsız bir sayı ile başlarsa hantal hale gelecektir. "Çömlek görünümü" seçeneği yardımcı olsa da, metin etiketleri içermediğinden görsel tanımlamayı yavaşlatır ve zorlaştırır. Küçük küçük resimlere sahip "liste görünümü", adı çözülemeyen bileşenler arasındaki farkları tanımlamayı da zorlaştırır. Bileşenler kaybolabilir ve kaybolacaktır. Adlandırılarak aranabilir hale getirilmesi daha sonra zaman kazandıracaktır.

Adobe için bir öneri : Bir bileşen oluştururken, onu otomatik olarak seçin ve yeniden adlandırmak veya bir adlandırma açılır penceresi açmak için kullanıcıyı Varlıklar->Bileşenler panelinde odaklayın. Bu özelliği Tercihler'de açmayı mümkün kılmak da yararlı olacaktır.

3. İpucu – Ana Bileşenleri Düzenli Tutun

Bir bileşen oluştururken, Ana Bileşeni yanlışlıkla çalışma yüzeyine yerleştirmek kolaydır. XD, Ana Bileşenleri bulmak için araçlar sağlarken (Varlıklar panelini arayarak veya sağ tıklayıp bir alt örnekten “Ana Bileşeni Düzenle”yi seçerek), bunun bir örnek olduğuna inanarak Ana Bileşende istenmeyen değişiklikler yapmak çok kolaydır. Bunu yapmak, birden çok çalışma yüzeyinde istenmeyen birçok değişikliğe yol açabilir.

Bir çalışma yüzeyinde yalnızca birkaç bileşen örneği olsa bile, çalışma yüzeyi klonlandığında işler hızla kontrolden çıkabilir. Ana Bileşende yanlışlıkla yapılan bir değişiklik, önlenebilecek temizleme süresini artırabilir.

Ana Bileşenleri, oluşturulduktan hemen sonra tasarım çalışma yüzeylerinden uzaklaştırma alışkanlığını edinmek en iyisidir . Bunu yapmanın ideal bir yolu, Ana Bileşenleri XD dosyasındaki çalışma alanına veya açıkça etiketlenmiş, ayrılmış Çalışma Yüzeylerine yerleştirmek olacaktır. Bunu yapmak, işleri daha sonra daha verimli hale getirecektir.

Adobe için bir öneri : Tasarımcıların, değişikliklerin alt örneklere yayılabileceği konusunda uyarılması için Ana Bileşen'de değişiklik yaparken bir bilgi istemi düşünün.

4. İpucu – Katmanlar Paneli ile Düzenli Kalın

Çalışma yüzeyinde fikirleri denemek ve bileşenleri gruplama/gruptan çıkarma ve bileşen durumlarının özelliklerini değiştirme akışına girmek kolaydır. Daha fazla çalışma alanına sahip olmak için sol kenar çubuğunu en aza indirmek için güçlü bir cazibe olabilir. Ancak, bileşen durumlarının ve geçişlerin yineleme telaşında beklendiği gibi davranmama olasılığı yüksektir. Bunun nedeni, alt öğelerin (şekiller, vektörler veya metin gibi) organizasyonu ve gruplandırılmasının, geçişlerin doğru çalışması için olması gerekenden uzaklaşmış olması olabilir.

Katman görünümü, öğelerin hiyerarşisi ve adlandırılması konusunda %100 şeffaflık sağlar ve hava geçirmez organizasyonu hayati önem taşır. XD'nin durumlar arasında güçlü Auto-Animate geçişini kullanmak, öğelerin bir bileşenin katman hiyerarşisinde aynı ada ve konuma sahip olmasını gerektirir. Aksi takdirde, geçiş, çekici bir Otomatik Animasyon yerine varsayılan olarak soluk olacaktır.

Zaman zaman, Otomatik Canlandırma geçişleri sırasında enterpolasyondan bir özelliği bastırmak istenebilir. Bunu başarmak için tasarımcılar, ada dayalı bağlantıyı kesmek için farklı bir bileşen durumundaki veya çalışma yüzeyindeki bir öğeyi yeniden adlandırabilir.

Her iki durumda da, beklenmedik sorunlar ortaya çıktığında sorun gidermek için Katmanlar görünümü kullanılabilir . İster bileşen durumları arasında ister çalışma yüzeyleri arasında bir geçiş olsun, prototip oluşturma sorunlarının hatalarını ayıklarken bu ilk adım olmalıdır.

İpucu #5 – Renkleri Araya Girmek İçin Alfa Solması Kullanın

Auto-Animate, XD'ye mükemmel bir ektir ancak sınırlamalar ve kendine özgü özelliklerle birlikte gelir. Bu tuhaflıklardan biri, Otomatik Animate kullanarak iki bileşen durumu veya çalışma yüzeyi arasında bir öğenin rengini değiştirirken ortaya çıkıyor. İki renk arasında yumuşak bir enterpolasyon yerine, test edildiğinde aniden değişir.

Mevcut geçici çözüm biraz garip ve Ana Bileşen durumlarının nasıl düzenlenmesi gerektiği konusunda sonuçları var. Bir yerine farklı renklere sahip iki nesne eklemeyi ve ardından yumuşak bir geçiş elde etmek için her iki durumdaki iki nesne üzerindeki alfaları çapraz soldurmayı içerir. Varsayılan soldurma geçişi işe yarayabilir, ancak Auto-Animate ile şekiller ve boyutlar enterpolasyon yapıyorsa, soldurma yeterli olmayabilir.

İpucu #6 – Bir Tekrar Izgarasındaki Bileşenlerden Yararlanın

Yineleme Izgarası, benzer öğelerin dizilerini düzenlemeyi ve korumayı kolaylaştıran, XD'de zaman kazandıran başka bir mükemmel özelliktir . Bileşenler gibi, Tekrar Izgaraları da hiyerarşik bir ilişkiye sahiptir; burada, ızgaranın sol üst köşesindeki ilk öğe, "alt" öğeler için özellikleri tanımlayan "üst" öğedir. (Bunun istisnaları vardır: bitmapler, metin dizeleri gibi bir alt öğe için benzersiz olabilir, ancak metin özellikleri olamaz.)

Ancak, Yineleme Izgaraları içindeki bileşenleri kullanırken işler değişir.

Tekrarlama Izgaraları ile normal olarak çalışırken, üst öğede yapılan değişiklikler hemen alt öğelerine de yayılır. Ancak, Ana Bileşen değişiklikleri, yerel özellik geçersiz kılmaları yoksa, yalnızca bir Yineleme Izgarasındaki alt öğelere yayılır . Başka bir deyişle, ızgaradaki bir bileşenin özelliğinin değiştirilmesi, onu Ana Bileşenden yayılan değişikliklerden “kilitler”.

Yineleme Izgarasında bir bileşen olan bir üst öğedeki değişiklikleri yaymak için, ızgarayı yalnızca üst öğeye yeniden boyutlandırın. Bu, çocuklarını ortadan kaldırır. Ardından, alt öğeleri güncellemek için tutamaçları istediğiniz boyutlara geri sürükleyin.

Tasarımcılar, bileşenlerin ve Tekrar Izgaralarının özellikleri üzerinde çalışabildiklerinde, bunları birleştirmek güçlü olabilir.

İpucu #7 – Zamana Dayalı Bileşen Durumu Geçişlerinin Olmadığını Varsayınız (Şimdilik)

Çalışma yüzeyleri arasında zamana dayalı gecikmeler (girişe dayalı değil) kullanarak geçişler uygularken, aynı şeyin bileşen durumları arasında da mevcut olduğunu varsaymak doğaldır. Ne yazık ki, durum böyle değil. Tüm bileşen tabanlı durum değişiklikleri, zamana değil, prototip modundaki kullanıcı girdisine veya etkileşimlerine dayanmalıdır.

Adobe için bir öneri: Durumlarının kullanıcı girdisinden bağımsız olarak canlandırılabilmesi için bileşenlere zamana dayalı bir geçiş seçeneği ekleyin.

İpucu #8 – Ana Bileşen Hiyerarşilerini Klonlarken Dikkatli Olun

Bu son ipucu, XD tasarımcılarının sıklıkla karşılaşmayabilecekleri, ancak farkında olmaları gereken bir uç durumdur.

Ana Bileşenin, özellikleri devralan çocukların "birden çoğa" kalitesini koruyan ancak mevcut alt bileşenleri etkilemeyen bir varyasyona ihtiyaç duyduğu bir senaryo varsayalım. Yeni bir üst bileşen hiyerarşisi oluşturmak için, örneklenmiş bir bileşenin grubu çözülmeli ve sıfırdan yeniden oluşturulmalıdır. Bileşenlerin grubunu çözme, Prototip modunda ayarlanan tüm durumları ve geçiş özelliklerini de kaybeder. İşte bir geçici çözüm:

• Bileşendeki her durum için bileşenin bir örneğini klonlayın.
• Her örneğin durumunu farklı bir duruma ayarlayın.
• Her bileşen örneğini gözden geçirin ve grubunu çözün.
• Her bileşen örneğinde istediğiniz ince ayarları ve değişiklikleri yapmaya başlayın.
• Yeni Ana Bileşeni yeniden oluşturun.
• Prototip moduna geçin ve daha önce kurulmuş olan etkileşimleri ve geçiş türlerini yeniden oluşturun.

Adobe için bir öneri: Varlıklar panelinde Ana Bileşene sağ tıklandığında, "yinelenen" bir menü seçeneği sağlayın.

Adobe XD Bileşenleri ile Prototip Oluşturma: Başarı için Çıkarımlar

Adobe XD, son birkaç yılda işlevsellik ve yardımcı programda önemli iyileştirmeler yaptı. Sketch ve diğer yerleşik prototip oluşturma araçlarına layık, rekabetçi bir alternatif haline geldi. Aracın ilk çıkışından bu yana nasıl geliştiğine bağlı olarak, muhtemelen daha birçok iyileştirme yolda.

Özellikle Adobe XD bileşen sistemi, tasarımcıların oluşturabileceği etkileşim türlerini geliştirmek ve genişletmek için mükemmel bir potansiyele sahiptir.

İşte akılda tutulması gereken bazı önemli çıkarımlar:

• Değişikliklerin Ana Bileşenler ve alt örnekler arasında nasıl yayıldığını anlayın.
• Bileşenlerin Adobe XD'nin Auto-Animate ve Repeat Grid gibi diğer özellikleriyle nasıl etkileşime girdiğinin farkında olun.
• Bileşenleri adlandırmak ve XD dosyasında ayrı bir Ana Bileşen çalışma alanı sağlamak gibi zamandan tasarruf etmek için tutarlı iş akışı uygulamalarını benimsemeye çalışın.

Disiplinli bir iş akışını sürdürürken Adobe XD bileşenleriyle çalışmanın kendine özgü özelliklerine dikkat etmek tasarım üretkenliğini en üst düzeye çıkaracaktır. Gereksiz temizlik ve bakımdan kaçınacak ve XD tasarımcılarına dijital ürünlerin prototipini oluştururken verimlilik avantajı sağlayacaktır.

Haydi ne düşündüğünü söyle! Lütfen düşüncelerinizi, yorumlarınızı ve geri bildirimlerinizi aşağıya bırakın.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Adobe XD ve Sketch – Hesaplaşma 2020
• Hassas Tasarım – Bir Adobe XD İncelemesi
• Çok Modlu Tasarımı Keşfetmek – Bir Adobe XD Eğitimi
• UX Mitleri - Prototipleme, Kullanıcı Testi ve UX Teslim Edilebilir Öğeleri
• UX Tasarım Sürecinizi Mükemmelleştirin - Prototip Tasarım Kılavuzu