Adobe XD'de Tekrar Izgarasını Keşfetme

Bir görsel tasarımcıysanız, muhtemelen zamanınızın çoğunu birden çok görsel öğede küçük ayarlamalar yaparak geçiriyorsunuzdur. Belki müşteriniz, öğelerinizin her biri arasında birkaç piksel daha dolguya ihtiyaç duyduğuna karar vermiştir veya belki de tüm avatarlarının köşeleri yuvarlatılmış olması gerektiğine karar vermiştir. Herhangi bir şekilde, tasarımınızda aynı ayarlamayı tekrar tekrar yaparken bulabilirsiniz… ve tekrar tekrar.

Adobe Experience Design CC'de (Beta), bir tasarımcının iş akışının bu sıkıcı yönünü ele almak için Izgarayı Tekrarla özelliğini tanıttık. Bu makalede, zaman kazandıran bu özelliğin gerçek gücünü ortaya çıkarmak için derinlere ineceğiz. Bir Tekrarlama Izgarası oluşturup ayarlayacağız, ona içerik ekleyeceğiz ve Adobe XD'nin basit ve güçlü Prototip Modunda bağlayacağız. Takip etmek isterseniz Adobe XD'yi ücretsiz olarak indirebilir ve test edebilirsiniz.

SmashingMag'de Daha Fazla Okuma :

• Adobe XD Kısayolları ile Hızlı UX Prototipleme
• Adobe XD ile Simgeler Nasıl Oluşturulur
• Prototiplemeyi Nasıl Kullanıyoruz ve Bizi Nasıl Daha Verimli Hale Getiriyor?

Tekrarlama Izgarası Oluşturma ve Ayarlama

Özünde, Tekrarlama Izgarası özel bir grup türüdür. Tıpkı nesneleri grupladığımız gibi, bir nesneyi veya bir grup nesneyi seçerek tekrarlama ızgaramızı oluşturacağız ve bunları bir tekrar ızgarasına dönüştüreceğiz. Bu alıştırmada, bir resim ve isim içeren basit bir telefon irtibat listesi yapacağız.

Adım 1: İlk Nesnelerimizi Oluşturun

• Karşılama ekranından, yeni bir dosya başlatmak için bir çalışma yüzeyi türü seçin.
• Dikdörtgen aracını ( R ) kullanarak bir dikdörtgen çizin.
• Dikdörtgeninizin sağında, yer tutucu metin yazmak için Metin aracını ( T ) kullanın.
• Seçim aracını ( V ) kullanarak, seçim çerçevesini seçerek (her iki nesnenin etrafına bir kutu çizerek) veya bir nesneyi seçip diğerini Shift tuşuna basarak seçerek her iki nesneyi de seçin.

Öğeleri daha sonra ayarlayabileceğimiz için bu noktada hassasiyete ihtiyacımız olmadığını unutmayın.

Adım 2: Tekrar Izgaranızı Oluşturun ve Yeniden Boyutlandırın

Özellik Denetçisindeki düğmeyi tıklatarak veya Cmd + R kısayol tuşunu kullanarak seçimi Tekrar Izgarasına dönüştürün.

Grubumuz artık bir Tekrar Izgarasıdır. Artık biri sağda diğeri altta olmak üzere iki tutamacı olduğunu ve grubunuzun etrafındaki kutunun yeşil, noktalı bir çizgi olduğunu görebilirsiniz.

Tekrarlama Izgarasını genişleterek sağ tutamacı tıklayıp sağa sürükleyin. Yineleme Izgarasını aşağı genişletmek için alt tutamacı aşağı sürükleyin.

Artık Tekrar Izgaramızda tekrarlanan öğeler var. Herhangi bir nesneye uyguladığımız tüm stiller, onun tüm tekrarlanan sürümleri için olacaktır.

3. Adım: Tekrar Izgaranızdaki Herhangi Bir Öğeyi Ayarlayın

Herhangi bir grup gibi, gruba çift tıklayarak Repeat Grid'in bileşen öğelerine erişebiliriz. Değişikliklerimizi yaptıktan sonra Escape tuşuna basarak düzenleme bağlamından çıkabiliriz. Ancak, bileşen öğelerine erişmenin başka yolları da vardır. Örneğin, Katmanlar panelinde ( Cmd + Y ) veya doğrudan seçerek ( Cmd + Click ) öğenin detayına inebiliriz.

• Seçim aracını ( V ) kullanarak, Yineleme Izgarasındaki herhangi bir dikdörtgene çift tıklayın. Şimdi düzenlediğiniz hücrenin etrafında açık mavi bir kutu görmelisiniz. Metninizi seçip dikdörtgeninize hizalanacak şekilde sürükleyin.
• Metin nesnesine tıklayın ve sağdaki Özellik Denetçisinde yazı tipini ve boyutu değiştirin. Tüm metin nesneleriniz aynı stili paylaşır.
• Düzenleme bağlamından çıkmak için Escape tuşuna basın ve Tekrarlama Izgarasını çalışma yüzeyiyle hizalanacak şekilde hareket ettirin.

Adım 4: Tekrar Izgaranızdaki Satır ve Sütun Doldurmasını Ayarlayın

Artık Tekrar Izgaramız olduğuna göre, her satır ve sütun arasındaki boşluğu ayarlamaya başlayabiliriz. Öğeler arasındaki boşluğun üzerine gelerek sütun ve satır göstergelerini etkinleştirebilir ve beğenimize göre değiştirebiliriz.

• İmlecinizi bir metin öğesinin sağ tarafı ile bir dikdörtgenin sol tarafı arasına, doğrudan sütun payına yerleştirin. Pembe sütun göstergesi görüntülendiğinde, oluğun sağ tarafını 30'a ayarlanana kadar sola ve sağa sürükleyin.
• İmlecinizi dikdörtgenler arasına, doğrudan satır oluğuna yerleştirin. Pembe sıra göstergesi görüntülendiğinde, oluğun altını 30'a ayarlanana kadar yukarı ve aşağı sürükleyin.
• Çalışma yüzeyinize uyacak doğru sayıda öğeye sahip olana kadar hücreler arasındaki boşluğu ve Yineleme Izgarasının boyutunu ayarlamaya devam edin.

Herhangi bir nesne kümesini bir Tekrar Izgarasına dönüştürebilirsiniz. Bu nesneler, Tekrar Izgarasında bir hücre haline gelir. Daha sonra hücreyi düzenleyebilir ve satırlar ve sütunlar arasındaki boşluğu ayarlayabilirsiniz.

Bir Tekrar Izgarasında Verileri Kullanma

Artık kişi listemizin genel şekline sahip olduğumuza göre, onu içerikle doldurabiliriz. Doldurmanın en basit yolu, her bir öğeyi ayrı ayrı değiştirmektir.

1. Adım: Tek Tek Metin Öğelerini Güncelleyin

• Cmd + Click . Artık Tekrar Izgarasının bağlam düzenleme modundasınız.
• Düzenlemek ve metni bir adla değiştirmek için metin öğesine çift tıklayın. İçeriğin, Yineleme Kılavuzundaki diğer metin nesnelerinin tümüne uygulanmadığını unutmayın. Ancak, metin nesnesine uygulanan herhangi bir stil , tüm metin nesnelerine uygulanır.

2. Adım: Bir Görüntü Doldurma Modeli Oluşturun

• Bir görüntüyü içe aktarmak için dikdörtgenlerden birine sürükleyin. Resminiz dikdörtgen için dolgu olarak uygulanacak ve şekli doldurmak için otomatik olarak yeniden boyutlandırılacaktır. Bu özelliğe otomatik maskeleme diyoruz.
• İkinci bir resmi ikinci dikdörtgene sürükleyin. Tekrarlama Izgarasındaki sıralamayı soldan sağa okuma sırasında tanımlarız (soldan sağa, sonra yukarıdan aşağıya). Tekrarlama Izgarasının artık ilk fotoğraf ve ikinci fotoğraf arasında değiştiğini unutmayın. Şimdi 2 fotoğraflı bir desen oluşturduk.
• Üçüncü bir resmi dördüncü dikdörtgene sürükleyin. Artık bir öğeyi dördüncü dikdörtgene sürüklediğinize göre, birinci ve üçüncü aynı resimler olan 4 fotoğraflı bir desenimiz var.
• Dördüncü bir resmi ilk dikdörtgene sürükleyin. Bu, 4 fotoğraflı deseninizdeki ilk öğenin yerini alır, bu nedenle artık deseninizde dört benzersiz fotoğrafınız olmalıdır.

Metin geçersiz kılma kavramı üzerinde çalışır; bir metin nesnesinin içeriğini geçersiz kılabiliriz, ancak stiller nesnenin tüm tekrarlarına uygulanmaya devam eder. Bununla birlikte, bir nesnenin görüntü dolgusunun tanımladığınız bir modelde tekrarlandığı, otomatik maskelenmiş nesnelerle tekrarlanan desenler kavramını oluşturabiliriz. Örneğin, üçüncü resminizi üçüncü dikdörtgenin içine sürükleseydiniz, 3 fotoğraflı bir desen oluşturmuş olurdunuz. Benzer şekilde, bir görüntüyü beşinci dikdörtgene sürüklemiş olsaydınız, 5 fotoğraflı bir desen oluşturmuş olurdunuz.

Ancak, bu gerçekten sıkıcı olabilir. Bunun yerine, önceden hazırladığımız içerikleri kullanacağız.

Adım 3: Dönüşle Ayrılmış Bir Metin Dosyasını Metin Nesnenize Sürükleyin

• .txt uzantılı bir metin dosyası oluşturun. Bunu Mac'in TextEdit'ini (Biçim > Düz Metin Yap'ı seçin) veya tercih ettiğiniz herhangi bir metin düzenleyiciyi kullanarak oluşturabilirsiniz. Her veri parçasını bir dönüşle ayırın.
• Dosyayı kaydettikten sonra, verileri içe aktarmak için Finder'dan Adobe XD'deki Repeat Grid metin nesnesine sürükleyin.

Şimdi nesnemiz, metin dosyamızdaki satır sayısına göre tekrar ediyor. Metin dosyamızda dört satır varsa, metin nesnesi başına bir satır yerleştirir ve ilk dördü yerleştirdikten sonra tekrar eder.

Adım 4: Bir dizi görüntü dosyasını dikdörtgeninize sürükleyin.

• Finder'da bir dizi görüntü seçin.
• Görüntüleri tekrarlanan dikdörtgen için dolgular olarak içe aktarmak için bu seçimi Finder'dan ve Tekrar Izgaranızın dikdörtgenine sürükleyin.
• Dikdörtgeni seçin ve yarıçap kontrollerinden birini sürükleyerek köşe yarıçapını değiştirin. Tüm stil değişiklikleriniz her tekrarda yansıtılır.

Resimleri birer birer sürüklemeye benzer şekilde, nesnenizin dolgusu için yinelenen bir desen oluşturuyorsunuz. Ve tıpkı metin gibi, kapsayıcıdaki herhangi bir değişiklik, Tekrarlama Izgarasındaki nesnenin tüm tekrarlarına yayılır.

Tek bir nesneyi değiştirerek veya veri kaynaklarını sürükleyerek bir Tekrar Izgarasının içeriğini kolayca değiştirebileceğinizi unutmayın. Verilerin içe aktarıldığını ve bağlantılı olmadığını unutmayın; bu nedenle kaynak dosyada yaptığınız herhangi bir değişiklik, XD dosyanıza önceden yerleştirmiş olduğunuz verileri etkilemeyecektir. Tüm stilleriniz ve herhangi bir kabın boyutu ve şekli, bir öğenin tüm tekrarlarında yansıtılır.

Bir Tekrar Izgarasına İçerik Ekleme

Artık oldukça ayrıntılı bir irtibat listemiz olduğuna göre, iş arkadaşlarımızdan ve paydaşlarımızdan geri bildirim alırken yineleyerek tasarım sürecimize devam edebiliriz. Bu durumda, olgudan sonra öğeler eklememiz gerekebilir. Yineleme Izgarası, bir hücreye öğe eklememize izin vererek bunu kolaylaştırır.

Örneğimizde, hücreleri dikey olarak ayırmak için yatay bir çizgi ekleyeceğiz.

Adım 1: Düzenleme Bağlamındayken Çizin

• Repeat Grid'in düzenleme bağlamını girin.
• Çizgi aracını ( L ) seçip sürüklerken Shift tuşunu basılı tutarak aşağıdaki hücrenin üzerine yatay bir çizgi çizin.
• Seçim aracını kullanarak çizginin konumunu dikdörtgenin soluna hizalanana kadar ayarlayın.
• Düzenleme bağlamından çıkmak için Escape tuşuna basın.

Siz onu oluşturduktan sonra bile, Repeat Grid'in düzenleme bağlamında herhangi bir öğe çizebilir veya metin ekleyebiliriz. Yineleme Izgarası her öğeyi otomatik olarak tekrarladığından, bu bize tasarımla yeni bir şekilde oynama esnekliği sağlar.

Az önce bir satır ekledik, ama şimdi hücreler üst üste biniyor ve bizi görsel bir karmaşa ile baş başa bırakıyor. Hücreler arasına dikey boşluk eklememiz gerekecek. Böyle bir şey olduğunda, Tekrar Izgarası satır veya sütun arasındaki (birinin altından bir sonrakinin üstüne veya birinin sağından diğerinin soluna) arasındaki oluğu yeniden hesaplar ve eğer varsa onu negatif bir sayıya ayarlar. örtüşürler.

2. Adım: Negatif Dolguyu Yeniden Ayarlayın

• Örtüşme alanında gezinin. Dikdörtgenin üstünden veya altından tutun ve aşağı doğru çekin, böylece örtüşme artık yok, sonra biraz daha ileri.

Bu sorunu çözdük, peki ya önceden oluşturduğumuz çizimleri eklemeye ne dersiniz? Bir bağlamdan kesip diğerine yapıştırabiliriz.

Adım 3: Tekrarlama Izgarasının Düzenleme Bağlamına Kesip Yapıştırın

• star.svg dosyasını indirin ve mevcut çalışma yüzeyinizin dışındaki çalışma alanına sürükleyin. Bu, star.svg dosyasını projenize aktarır.
• İçe aktarılan yolunuzu bir Tekrar Izgarasına dönüştürün ve toplam dört yıldız elde edene kadar sağ tutamacı sağa doğru sürükleyin. Yıldızları birbirine yaklaştırmak için dolguyu ayarlayın.
• Tekrarlama Izgarasını yıldızlarla ( Cmd + X ) kesin, ardından düzenleme bağlamına girmek için kişi listenizin herhangi bir hücresine çift tıklayın.
• Yapıştır ( Cmd + V ). Tekrarlanan yıldız ızgaranız hücrenin ortasına yapıştırılacaktır. Yıldızları metnin altında olacak şekilde hareket ettirin.

Bazen, Yineleme Izgarasını parçalamak isteriz; bazen onları sıraladıktan sonra bağımsız nesneler istersiniz. Bunu yapmak için Repeat Grid grubunu çözeceğiz ve değişikliklerimizi yapacağız.

Adım 4: İç Tekrar Izgarasının Grubunu Çözün ve Gerektiğinde Düzenleyin

• Halihazırda kişi listesinin düzenleme bağlamında olduğunuz için, onu seçmek için Tekrarlanan Yıldız Izgarasına tıklayın.
• Özellik Denetçisinde Grubu Çöz düğmesini seçerek, bağlam menüsünden Izgara Grubunu Çöz'ü seçerek (Ctrl-tıklama veya sağ fare düğmesi) veya Cmd + Shift + G klavye kısayolunu kullanarak Yineleme Izgarasının grubunu çözün.
• Yıldızlardan ikisini seçin ve dolgunun işaretini kaldırın.

Hatta oluşturduktan sonra, çizim veya düzenleme bağlamına yapıştırarak Tekrarlama Izgarasına nesneler ekleyebilirsiniz. Negatif dolgunuz varsa, örtüşme alanının üzerine gelerek bunu kolayca ayarlayabilirsiniz. Izgarayı Tekrarla'yı öğeler arasında kolay bir hizalama aracı olarak kullanabilir ve tekrarlanan öğeleri grubu çözerek ayırabilirsiniz.

Bir Tekrar Izgarasından Prototipleme

Artık bir Tekrar Izgaramız olduğuna göre, onu Prototip Modunda başka bir çalışma yüzeyine bağlayacağız. Adobe XD'yi kullanarak Tasarım ve Prototip Modları arasında hızlı bir şekilde geçiş yapabiliyoruz, bu da hem kullanıcı arayüzünü hem de etkileşimleri aynı anda düzenlememizi sağlıyor.

Bu durumda, sadece ikinci bir çalışma yüzeyi oluşturacağız ve üç farklı senaryoda Tekrarlama Izgaramızdan tel alacağız.

Seçenek 1: Tek Bir Etkileşim İçin Tüm Tekrar Izgarasını Bağlayın

• Çalışma Yüzeyi aracını ( A ) kullanarak dosyanızda ikinci bir çalışma yüzeyi oluşturun. İlk çalışma yüzeyinizin yanında başka bir çalışma yüzeyi oluşturmak için mevcut çalışma yüzeyinizin sağına tıklayın.
• Uygulama çerçevesinin üst kısmındaki sekmeye tıklayarak veya Cmd + Tab klavye kısayolunu kullanarak Prototip moduna geçin.
• İlk çalışma yüzeyinizde Izgarayı Tekrarla'yı seçin. Nesnenin sağ tarafında orta noktasında oklu bir bağlayıcı görünecektir.
• Bu bağlayıcıyı sonraki çalışma yüzeyine sürükleyin. Açılır pencerede geçiş seçeneklerinizi seçin, ardından Escape'e basın veya kapatmak için dışarıyı tıklayın.
• Uygulama çerçevesinin sağ üst köşesindeki Oynat düğmesine basarak veya Cmd + Enter klavye kısayolunu kullanarak önizleyin. Etkileşimi oynatmak için Tekrar Izgarası üzerinde herhangi bir yere tıklayın.

Bu noktada yaptığımız şey, dolgusu da dahil olmak üzere tüm nesneyi etkileşim için bir vuruş noktası olarak bağlamak.

Seçenek 2: Bir Etkileşim İçin Tekrarlama Izgarasının Tek Bir Elemanını Bağlayın

• Cmd + Z klavye kısayolunu kullanarak son kablonuzu geri alın.
• Doğrudan seçmek için Tekrarlama Izgaranızdaki bir dikdörtgene cmd-tıklayın.
• Dikdörtgenin sağındaki bağlayıcıyı sürükleyin ve ikinci çalışma yüzeyine sürükleyin. Açılır pencerede geçiş seçeneklerinizi daha önce olduğu gibi seçin, ardından kapatın.
• Önizleme pencereniz hala açık değilse, yeniden başlatın ve hedefi tıklayın.

Bu noktada elimizde tek bir eleman var ama tüm hücreyi seçmek istersek ne olur? Bunu geçerli bir isabet noktası yapmak için Tekrar Izgarası içinde bir grup oluşturabiliriz.

Seçenek 3: Yineleme Izgarası içinde bir öğe grubu oluşturun ve gruptan bir etkileşim oluşturun.

• Cmd + Z klavye kısayolunu kullanarak son kablonuzu geri alın.
• Sekmeyi tıklatarak veya Cmd + Tab klavye kısayolunu kullanarak Tasarım moduna geri dönün.
• Cmd + Click . Seçiminize eklemek için yanındaki metin nesnesini Shift tuşuna basarak tıklayın.
• Bağlam menüsü seçimini veya Cmd + G klavye kısayolunu kullanarak iki nesneyi gruplayın.
• Prototipleme moduna geri dönün. Seçiminizin Tasarım modundakiyle aynı kaldığını unutmayın.
• Bağlayıcıyı gruptan ikinci çalışma yüzeyine sürükleyin. Artık tüm grup alanını etkileşim için bir isabet noktası olarak bağladınız.

Vuruş noktasını tüm Tekrar Izgarasına, içindeki tek bir öğeye veya içinde oluşturulan bir gruba ayarlayarak bile bir etkileşim oluşturabilirsiniz.

Bu kadar!

Umarım bu kısa eğitim, Repeat Grid'in gücünü keşfetmenize yardımcı olmuştur. Bu basit ve güçlü özellik, beta sürümünde oldukça popülerdi ve kullanıcılardan daha fazla geri bildirim aldıkça gelişiyor. İyileştirmeler için bir fikriniz varsa, lütfen bunları aşağıdaki yorumlar bölümünde paylaşın.

Bu makale, Adobe tarafından desteklenen UX tasarım serisinin bir parçasıdır. Yeni tanıtılan Experience Design uygulaması, etkileşimli navigasyon prototipleri oluşturmanın yanı sıra bunları tek bir yerde test edip paylaşarak hızlı ve akıcı bir UX tasarım süreci için yapılmıştır.

Adobe XD ile oluşturulmuş daha ilham verici projeleri Behance'de inceleyebilir ve ayrıca güncel ve bilgi sahibi olmak için Adobe XD blogunu ziyaret edebilirsiniz. Adobe XD sık sık yeni özelliklerle güncellenmektedir ve genel Beta sürümünde olduğu için ücretsiz olarak indirebilir ve test edebilirsiniz.