Adobe CC'nin Tel Çerçeve Yapabileceğini Kim Bilebilirdi?

Tel çerçeveleme, bir web sitesi, uygulama veya yazılım ürünü olsun, herhangi bir kullanıcı arayüzü tasarlamanın önemli bir adımıdır. Görseller, renkler, tipografi, stiller ve efektler şeklinde dikkatiniz dağılmadan, içerik hiyerarşisini ve kullanıcı deneyimini tanımlamaya daha fazla odaklanabilirsiniz.

Düşük kaliteli tel çerçeveler ve prototipler yapmak, süreçte daha erken ve daha sık test etmenize ve yinelemenize yardımcı olacaktır. Düşük kaliteli tel çerçeveler, tasarımcıların daha hızlı çalışmasına ve kullanıcıların seveceği ürünler geliştirmesine olanak tanır.

Vahşi doğada seçim yapabileceğiniz birçok farklı tel çerçeveleme aracı vardır. Hangisini seçeceğiniz, kişisel tercihlerinize ve iş akışı stilinize bağlı olacaktır.

Baskı dünyasından dijital tasarıma geçen birçok tasarımcı gibi ben de Illustrator, InDesign ve Photoshop gibi Adobe uygulamalarında uzmanım. Bunları her yerde ve her zaman verimli ve sezgisel olarak kullanabilirim (gecenin bir yarısında biri beni uyandırsa ve bana bir fincan kahve vermeyi reddetse bile).

Şaşırtıcı olmayan bir şekilde, bu çok yönlü uygulamalar aynı zamanda web ve uygulama görsel tasarımı yapmak için kullandığım araçlar haline geldi. Bu nedenle, iş akışımın en verimli olması için onları tel çerçeveleme için de kullanıyorum.

Her projede, genellikle kağıt üzerinde veya ofis masamın yakınında değilsem iPad veya akıllı telefon ekranımda çok kaba eskizler yaparak tasarıma başlarım. Bu eskizler, seçilen konseptle ilgili düşüncelerimi odaklamak için var; müşteri muhtemelen hiçbirini görmeyecek. Fikrimin işe yaradığından emin olduğumda, tel çerçevelemeye geçiyorum. Ben genellikle Adobe Illustrator ve InDesign'ı bir arada kullanırım: UI kiti öğelerinin çoğunu oluşturmak için Illustrator'ı ve tel çerçevelemenin kendisi için InDesign'ı kullanırım.

Makalenin ilerleyen bölümlerinde bu araçları tel çerçeveleme iş akışınıza nasıl dahil edeceğinizi adım adım açıklayacağım, ancak ayrıntılara girmeden önce, InDesign'ı birincil tel çerçeve oluşturma aracı olarak kullanmanın güçlü ve zayıf yanlarını göstermeme izin verin. .

Adobe InDesign'ı Tel Çerçeve ve Prototipleme Aracı Olarak Kullanmanın Artıları ve Eksileri

Adobe InDesign, bir süredir yalnızca bir masaüstü yayıncılık uygulaması değil, aynı zamanda dijital yayıncılık ve EPUB oluşturma için de yaygın olarak kullanılmaktadır. Tel çerçeveleme için de uygun bir araç olmasının birkaç nedeni vardır:

• Kalıp sayfalar – Kalıp sayfaları kullanarak gezinme, üstbilgiler, altbilgiler gibi global tasarım öğelerini hızlı ve tutarlı bir şekilde uygulayabilirsiniz. İhtiyaç duyduğunuz kadar kalıp sayfa oluşturabilirsiniz ve bunun da ötesinde, bir kalıp diğerini temel alabilir.
• Katı ızgara desteği – Daha fazla karmaşıklık ve hassasiyet için modüller oluşturmak için farklı türde ızgaralar, tamamlayıcı sütunlar, yatay ve dikey kılavuzlar ve alt ızgaraları kolayca oluşturmanıza ve uygulamanıza olanak tanır.
• Alternatif düzenler – Aynı dosyada birden fazla cihaz ve yön için tel çerçeveleri etkinleştirir.
• CC Libraries – Sık kullanılan nesneler, renkler, karakterler ve paragraf stilleri gibi farklı yeniden kullanılabilir varlıklardan oluşan bir kitaplık oluşturur. InDesign, Illustrator veya Photoshop'ta ya da Adobe Capture mobil uygulamasıyla (hangisini tercih ederseniz) varlıklar oluşturun.
• Katmanlar – Tel çerçevedeki nesneleri ve içeriği seçici olarak organize etme, gruplama, gösterme/gizleme ve kilitleme/kilidini açma yeteneği sağlar. Çok sayfalı bir InDesign belgesinin her sayfası aynı sayıda ve katman sırasına sahiptir. Katmanlarda yaptığınız tüm değişiklikler, görünürlük, yığın sırası veya silme gibi tüm sayfalara yansıtılır.
• Stiller ve tablolar – InDesign stillerini kullanarak metninizin, nesnelerin ve tabloların görünümü üzerinde tam kontrol sağlar. Stiller, belge boyunca istenen biçimlendirmeyi kolayca basamaklandırma yeteneği sağlayarak birbirlerinden miras alabilir. Tel kafes içerik öğeleri ve hatta yerleşim amaçları için yardımcılar olarak kullanılacak tablolar oluşturmak ve biçimlendirmek çok basittir.
• Typekit entegrasyonu – Yüksek kaliteli örneklerde, masaüstüyle eşitlenen Typekit yazı tiplerinden herhangi birini kullanabilirsiniz.
• Etkileşim ve animasyonlar – Etkileşim prototiplemesi için farklı web durumları veya uygulama tasarım öğeleri oluşturmak için Adobe InDesign'ın yerleşik etkileşim ve animasyon özelliklerini kullanabilirsiniz. Çoğu kişi, dijital yayıncılık çözümleri ve sabit yerleşimli EPUB dışa aktarma için dergiler oluştururken bu özellikleri kullanır, ancak bunlar prototip oluşturmaya da uygundur.
• Dışa aktarma seçenekleri – InDesign, oluşturduğunuz tel çerçeveleri ve prototipleri çeşitli biçimlerde dışa aktarabilir. Etkileşimli PDF'ler çoğu durumda muhtemelen tercih ettiğiniz format olacaktır, ancak belgenizi modern masaüstü ve mobil tarayıcılarda görüntülenebilen etkileşimli HTML'ye dönüştürmek için Çevrimiçi Yayınla özelliğini de kullanabilirsiniz. Maalesef, Publish Online'ı kullanarak dışa aktarma üzerinde fazla kontrolünüz yok ve dışa aktarılan dosyalar Adobe sunucularında barındırılıyor. Prototip URL'yi müşterinizle paylaşabilir veya sitenize yerleştirebilirsiniz. Daha fazla kontrol ve HTML5'e doğrudan dışa aktarma için Ajar Productions'ın in5 uzantısını kullanabilirsiniz.

Adobe InDesign'ın tel kafes ve prototip oluşturma aracı olarak kullanılmasının birçok avantajı vardır, ancak bazı dezavantajları da vardır:

• Önceden tanımlanmış tel çerçeve şablonlarının ve öğelerinin eksikliği – InDesign'ın bir tel çerçeveleme aracı olması amaçlanmadığından, şablonları ve nesne varlıklarını kendiniz oluşturmanız ve hazırlamanız gerekir. (Bu adımı nasıl ele alacağınızı makalenin ilerleyen kısımlarında göstereceğim.) İyi haber şu ki, bu işin çoğu yalnızca bir kez yapılacak ve birkaç saatlik çalışmadan sonra, hemen başlamaya hazır olacaksınız. InDesign tel çerçeveleme. Ayrıca, internetten indirebileceğiniz çok sayıda varlık ve tel kafes kiti vardır, bu nedenle her şeyi kendiniz çizmenize gerek yoktur.
• Etkileşim ve animasyon özellikleri sınırlıdır - Sayfaları kolayca bağlayabilmenize ve bazı etkileşim ve animasyonlar eklemenize rağmen, işlem bazen uzun sürebilir. Basit etkileşim araçlarından bazıları çok sezgisel değildir. InDesign etkileşim özelliklerini kullanmadıysanız, bunları verimli bir şekilde uygulayabilmeniz için küçük bir öğrenme eğrisinin üstesinden gelmeniz gerekir.
• InDesign belgeleri doğrudan katmanlı PSD dosyaları olarak dışa aktarılamaz – Görsel tasarımınızı Adobe Photoshop'ta yapıyorsanız ve tasarımınızı oluşturmak için ayrı tel çerçeve öğelerine sahip olmak istiyorsanız, önce tel çerçevelerinizi PDF'ye dışa aktarmanız gerekir. Ardından, PDF'yi Illustrator'da açmanız ve tekrar katmanlı bir PSD olarak dışa aktarmanız gerekecektir. Mac üzerinde çalışan kişiler, InDesign dosyalarını katmanlı bir PSD olarak kaydetmek için Rob Day tarafından yazılmış ücretsiz bir komut dosyasını da kullanabilir.

İyi Tel Kafes Hazırlığı İşin Yarısı

Çalışma ortamınıza ince ayar yaparak başlayın. Bu tür bir çalışma için Illustrator ve InDesign'da kayıtlı bir çalışma alanınız yoksa, bir tane oluşturun. Illustrator'da önceden tanımlanmış Web çalışma alanıyla başlayın ve beğeninize göre uyarlayın: Sık kullanmadığınız panelleri kapatın, kullanacaklarınızı açtığınızdan emin olun ve ardından bunları çalışma stilinize göre düzenleyin.

Bittiğinde, Pencere > Çalışma Alanı > Yeni Çalışma Alanı'nı seçerek çalışma alanını kaydedin... Aynı şeyi InDesign'da Dijital Yayıncılık çalışma alanını başlatıcı olarak kullanarak yapın.

Tel Kafes/Mockup/Prototip Kitlerinin Montajı

Illustrator ve InDesign kullanan verimli bir tel çerçeve oluşturma iş akışı, önce kullanıcı arabirimi varlık setinizi oluşturmaya biraz zaman ayırmanızı gerektirir. Adobe Creative Cloud'un kullanıma sunulmasından bu yana CC Libraries, tüm UI kiti bileşenlerinizi depolamanın en iyi yoludur.

Tel çerçeveleme ve prototip oluşturma amacıyla bir veya daha fazla kitaplık oluşturabilirsiniz. Örneğin, web sitesi tel çerçeveleme için bir kitaplık, iOS uygulamaları için başka bir kitaplık, Android uygulamaları için üçüncü bir kitaplık vb. oluşturabilirsiniz.

Bir Adobe CC Kitaplığı oluşturmak için Kitaplıklar panelini açın ve paneldeki hamburger menüsünden Yeni Kitaplık Oluştur'u seçin. Kitaplıklara koyduğunuz varlıklar, Adobe ID'nizle oturum açtığınız tüm cihazlarda farklı Adobe masaüstü veya mobil uygulamalarında yapılabilir ve kullanılabilir. Bu, projeye iPad veya iPhone'unuzda başlayabileceğiniz, ofisteki masaüstü bilgisayarınızda devam edebileceğiniz ve tüm cihazlarda bulunan aynı varlıklarla ev dizüstü bilgisayarınızda son dakika değişiklikleri yapabileceğiniz anlamına gelir.

Daha büyük bir ekibin parçası olarak çalışıyorsanız, kitaplık varlıkları ekip üyeleri arasında paylaşılabilir. Kitaplıklar renkleri, grafikleri, katman stillerini (yalnızca Photoshop) ve paragraf ve karakter stillerini içerebilir. İlgili öğe seçiliyken CC Library panelinin altındaki ilgili düğmeye tıklayarak kitaplıklara varlık ekleyebilirsiniz. Grafik varlıklarını doğrudan çalışma yüzeyinizden Kitaplıklar paneline sürükleyerek de ekleyebilirsiniz.

Kitaplıklardaki varlıklar kategorilere göre düzenlenir. İyi uygulamalara bağlı kalın ve her varlığı anlamlı bir adla yeniden adlandırın. Kitaplıklar aranabilir ve bir varlığın adının başlangıcını yazarak bulmak, özellikle kitaplıklarınızda birçok farklı öğeniz olduğunda size daha sonra tonlarca zaman kazandıracaktır. Bir varlığın adını değiştirmek için üzerine çift tıklayın ve yeni bir tane yazın.

Tel Kafes Kiti Bileşenleri Oluşturma

Adobe InDesign'ın Illustrator'ınkine oldukça benzeyen bazı temel çizim araçları olmasına rağmen, Illustrator, tel kafesinizde çeşitli öğeleri çizmek için çok daha iyi bir seçimdir. Genel bir kural olarak, Illustrator'da temel geometrik şekillerden daha karmaşık çizim gerektiren tüm kit öğelerini oluşturun. InDesign'da basit düğmeler gibi mizanpajda değiştirmeniz gerekecek metin içeren daha basit öğeler oluşturun.

Yeni başlayanlar için, gezinme öğeleri, resimler dahil sayfa öğeleri, video çerçeveleri ve metin kutuları, simgeler, avatarlar, form öğeleri ve diğer tüm arayüz öğeleri gibi tel çerçevede ihtiyaç duyacağınız tüm öğelerin bir listesini yapın. Listeniz tamamlandıktan sonra, bu öğeleri oluşturmak için Illustrator ve InDesign'a gidebilirsiniz.

Tel kafes veya maket kiti bileşenleri için yeni bir belge oluşturarak başlayın. Illustrator'da Web/Aygıt Profili'ni veya Yeni Belge iletişim kutusundan Web/Dijital Yayıncılık Amacı'nı seçtiğinizi iki kez kontrol edin. Bu, piksellerin birim olarak kullanılmasını ve renk modunun RGB olarak ayarlanmasını sağlar.

Temsil ettikleri şey için çok ayrıntılı olmadan hızlı görsel ipuçları vermeleri gerektiğinden, tel kafes kiti varlıklarını olabildiğince basit hale getirin. Tercihen birkaç gri tonundan oluşan çok sınırlı renk paletleri kullanmalısınız. Daha önemli öğeleri daha koyu gölgelerle renklendirerek veya daha yüksek kontrast vererek görsel olarak vurgulayın.

Daha yüksek kaliteli maketler veya prototipler için, her projenin ilgili renk paletini kullanan daha ayrıntılı öğeler içeren UI kitleri oluşturun. Renk paletlerine kolay erişim için bunları CC kitaplıklarına ekleyin.

CC Libraries'de Adobe Illustrator Varlıkları

Illustrator'dan kitaplıklara eklediğiniz varlıklar varsayılan olarak bağlantılıdır (Adobe CC 2015'ten beri). Bu, Illustrator'da bir kitaplık varlığını değiştirdiğinizde, değişikliklerin kullanılan tüm örneklere yansıtıldığı anlamına gelir. Belgeye bağlantısız bir varlık eklemek istiyorsanız, onu panelden sürüklerken options/alt tuşuna basın.

InDesign'da bağlantılı Illustrator varlıklarını kullandığınızda, belge Normal modda görüntülendiğinde sol üst köşede küçük bir bulut simgesi olacaktır. Hepsi ayrıca Bağlantılar panelinde listelenir. Illustrator'da bir kitaplık varlığını değiştirirseniz InDesign belgesindeki değişiklikler otomatik olarak yapılmaz. Bulut simgesi, değiştirilmiş bir bağlantı ünlem işareti simgesiyle değiştirilecek ve bu bağlantıları güncellemeniz gerekecek.

Bir InDesign belgesine yerleştirdiğiniz InDesign varlıkları bağlantılı değildir. Bu, örnekleri orijinalden bağımsız olarak düzenleyebileceğiniz ve orijinal varlık değiştirildiğinde, bu değişikliklerin yerleşime önceden yerleştirilmiş varlıklara yansıtılmadığı anlamına gelir.

Tel çerçeveler oluştururken şu özellikleri göz önünde bulundurun: Global olarak değiştirilmeleri ve güncellenmeleri gerektiğini düşündüğünüzde Illustrator'dan Kitaplığa varlık ekleyin veya bunları tek tek değiştirmek isteyeceğinizi bildiğinizde InDesign'dan ekleyin. Ayrıca Illustrator'da grafikler oluşturabileceğinizi, bunları InDesign'a kopyalayabileceğinizi/yapıştırabileceğinizi ve ardından bunları bir InDesign varlığı olarak kitaplığa eklemeden önce gerekirse değiştirebileceğinizi unutmayın.

Hangi grafik varlığının hangi uygulama tarafından oluşturulduğunu unutursanız, Öğeleri Liste olarak Göster'i kullanırken Kitaplık panelindeki her bir öğenin sağ tarafına bakın.

İçerik ve Kopya ile Adobe InDesign Esnekliği

Tel çerçevelerinizdeki kopya ve tipografiyi kolayca değiştirebildiğinizden emin olmak için InDesign'da metin kapları oluşturun. InDesign, metin kutularını yer tutucu metinle doldurmak için güzel bir özelliğe sahiptir. Bir metin kutusu çizdiğinizde, üzerine sağ tıklayın ve Yer Tutucu Metinle Doldur öğesini seçin.

Diğer grafik öğeleri gibi Adobe kitaplığına metin kutularını sürükleyerek ekleyin. Bu metin varlıklarını daha sonra tel çerçeve düzeninizin bir parçası olarak kullandığınızda, metin kutusunun yanı sıra tel çerçevenizdeki içeriğini de değiştirebilirsiniz.

InDesign'da da düğme kullanıcı arabirimi öğeleri yapmayı düşünün. Bir düğme oluşturmak için bir metin çerçevesi yapın, metni yazın ve ardından İç metin aralığını tanımlamak için Nesne > Metin Çerçevesi Seçenekleri'ni kullanın. Hizala açılır menüsünden istediğiniz seçeneği belirleyerek bir kutu içindeki metnin dikey hizalamasını ayarlayın.

Otomatik Boyut sekmesine geçin ve uygun otomatik boyutlandırmayı (muhtemelen Yalnızca Genişlik olacaktır) ve uygun bir referans noktası seçin. InDesign'ın metninizi birden fazla satıra ayırmasını istemiyorsanız, Satır Sonu Yok seçeneğini işaretleyin.

Mevcut Kaynakları Kullan

İnternette satın alabileceğiniz ve hatta hazır bir çözüm istiyorsanız ücretsiz olarak indirebileceğiniz çok sayıda Adobe Illustrator tel çerçeveleme ve prototip oluşturma UI kiti bulunmaktadır. Belki de tamamlanmış projelerinizden çıkarabileceğiniz öğeleriniz zaten vardır. Bu belgeleri açın, önceden oluşturulmuş öğeleri gerektiği gibi değiştirin ve bunları ilgili kitaplıklarına koyun.

Belirli bir platform için (örneğin, bir iOS veya Android uygulaması) tasarım yapıyorsanız, bunların insan arabirimi yönergelerini dikkatlice okuduğunuzdan ve uygun varlıkları kullandığınızdan emin olun. Kitinizde çeşitli platformlara özgü UI öğelerinin olması uygun olabilir.

Gerçek tel çerçeveleme işlemine başlamadan önce kitaplıklarınızdaki gelecekteki her varlığı veya durumu hesaba katmaya çok fazla odaklanmayın. Kitaplıklarınıza daha sonra varlıklar ekleyebilir ve ilerledikçe bunları geliştirebilirsiniz.

InDesign Tel Çerçeve Şablonları Oluşturma

Bir önemli hazırlık adımı daha kaldı: Tel çerçeveler yapmak için kullanacağınız InDesign şablonları oluşturun. Web veya Dijital Yayıncılık amacı ile yeni bir belge oluşturarak başlayın ve tasarladığınız ekranlar için uygun sayfa boyutlarını tanımlayın.

Tel kafes elemanlarınızı yerleştirmek için bir tür ızgara kullanmanız tavsiye edildiğinden, kenar boşluklarını ayarlayın ve istenen sütun sayısını ve oluk alanını ayarlayarak bir sütun ızgarası oluşturun. Bu ayarları daha sonra Sayfalar panelinde ilgili ana sayfa (veya sayfalar) seçiliyken Düzen > Kenar Boşlukları ve Sütunlar'dan değiştirebilirsiniz.

Yatay kılavuzlara ve tamamlayıcı dikey kılavuzlara ihtiyacınız varsa, bunları manuel olarak oluşturun veya Düzen > Kılavuz Oluştur'u kullanarak ek bir kılavuz oluşturun. Bir ızgara oluştururken, Gridulator gibi çevrimiçi ızgara hesaplayıcı araçlarından birini kullanmak yararlıdır.

Ayrıca, tel çerçeveleriniz için bir çerçeve olarak cihaz maketleriyle sunum amacıyla ek şablonlar oluşturabilirsiniz. Bir InDesign belgesi diğerine bağlanabildiğinden, bir InDesign belgesinde tel çerçeveler oluşturabilir ve ardından bunu sunumlar için başka bir belgeye yerleştirebilirsiniz.

İlk bakışta karmaşık görünse de bu aslında çok basit ve etkili bir iş akışıdır. Gerçek tel kafesleri ayrı bir belgede tutmak, onaylanmış tel kafeslerden parlak bir görsel tasarıma kadar inşa etmeye devam etmeyi kolaylaştırır.

Ayrıca, tel çerçeveler yerleştirebileceğiniz, etiketler ve yorumlar ekleyebileceğiniz ve müşteriye en iyi çözümünüzü gösterebileceğiniz sunuma hazır şablonlar oluşturmak da kolaydır. Bir tel çerçeve dosyasında değişiklik yaptığınızda, onu bir sunum belgesindeki diğer herhangi bir bağlantı gibi güncelleyin ve ta-daaaa! Tüm değişiklikler sunumunuzda da var.

Katmanlar panelinde, farklı içerik türleri için ayrı katmanlar hazırlayabilirsiniz: kullanıcı arabirimi öğeleri, etkileşimli özellikler, hareketler, etiketler ve notlar. Belirli bir proje için daha fazla katmana ihtiyacınız varsa, bunları tel çerçeveleme işlemi sırasında istediğiniz zaman kolayca ekleyebilirsiniz.

Oluşturmayı tamamladığınızda şablonlarınızı InDesign.indt şablon dosyaları olarak kaydedin. İhtiyacınız olan tüm şablonlar kaydedildikten sonra, nihayet verimli bir şekilde tel çerçeve oluşturmaya hazırsınız.

Tel Çerçeveler Oluşturma

İlk önce, ana sayfayla başlayın. Projenizin tüm ekranlarında aynı olacak tüm global öğeleri kitaplıktan sürükleyin. Bir web sitesi tasarlıyorsanız, bunlar genellikle bir logo, gezinme ve altbilgi içeren üstbilgilerdir. Birden fazla kalıp sayfa oluşturabildiğiniz ve birbirlerinden miras alabildikleri için kalıp sayfaların iç içe yerleştirilmesinden yararlanabilirsiniz.

Örneğin, projeye bağlı olarak, kalıcı veya iletişim kutusu açılır penceresi gibi bir UI öğesi için bir kalıp sayfa oluşturabilir, ardından yalnızca farklı olması gereken öğeleri değiştirerek ilk kalıp temelinde yeni kalıplar oluşturabilirsiniz.

Kalıbı geçersiz kılmak için Command/Control + Shift tuşlarını basılı tutarken üzerlerine tıklamadığınız sürece normal belge sayfalarında kalıp öğeleri seçemez, değiştiremez veya silemezsiniz. Öğeniz geçersiz kılındığında, parametrelerinden herhangi birini değiştirebilir veya onu düzenden tamamen silebilirsiniz.

Öğeyi geçersiz kılsanız bile, değiştirmediğiniz parametrelerin ana öğeden devralınacağını unutmayın. Örneğin, rengini değiştirerek bir öğeyi geçersiz kılarsanız, ana öğeye bağlı olduğu için boyutu değişmez. Ayrıca, ana sayfada değiştirirseniz, daha önce geçersiz kıldığınız öğede de değiştirilir.

Tel çerçeveleme belgenize ek sayfalar eklerken, bunları ilgili kalıplarına dayandırmayı unutmayın. Zaten mizanpajda bulunan sayfalar için kalıbı değiştirmeniz gerekiyorsa, Sayfalar panelinde bunları seçin, sağ tıklayın ve Kalıbı Sayfalara Uygula'yı seçin. Kitaplık varlıklarını kullanın ve son UI tel kafes düzenlerini oluşturmak için Akıllı Kılavuzlar ve Hizala seçeneklerini kullanarak bunları düzenleyin.

Birden fazla ekran boyutu için tasarımlar oluşturuyorsanız, Düzenler > Alternatif Düzen Oluştur veya Sayfalar panelinden alternatif düzenler oluşturun. Sayfa öğelerini bir boyut ve yönlendirmeden diğerine otomatik olarak uyarlamak için alternatif düzenler oluştururken sıvı düzen kurallarını kullanabilir veya bunları manuel olarak kontrol edebilirsiniz. Sıvı Düzen Kurallarını uygulamak ve test etmek için Sayfa aracını kullanın veya Pencere > Etkileşimli > Sıvı Düzeni panelini açın.

Etkileşim Ekleme

Adobe InDesign, tel çerçeveler veya prototipler oluştururken yararlanabileceğiniz bir dizi etkileşim özelliğine sahiptir. Hangi özellikleri dahil edeceğiniz, tel çerçeveleriniz, prototipleriniz veya sunumlarınız için ihtiyaç duyacağınız son formata bağlı olacaktır.

PDF olarak dışa aktarıyorsanız, etkileşim sınırlı olacaktır, ancak en azından bunları oluşturmak için köprüler panelini kullanarak ekranlar arasındaki bağlantıların çalışmasını sağlayabilirsiniz. Bağlantı olarak davranmak istediğiniz öğeyi seçin ve Yeni Köprü simgesine tıklayın. Bağlantı Açılır menüsünden Sayfa'yı seçin ve istediğiniz sayfa numarasını girin. Ekranlar arasında bağlantı olarak davranmasını istediğiniz tüm öğeler üzerinde bu işlemi tekrarlayın.

Ayrıca ana sayfalarda bulunan nesnelere gerçek zamanlı bir tasarruf sağlayan köprüler de ekleyebilirsiniz. Ana sayfada bir kez bağlantılar oluşturun, bunlar belgenizin tüm ekranlarında çalışır.

Herhangi bir grafik, metin, görüntü veya öğe grubundan düğmeler oluşturabilirsiniz. Seçili bir nesneden düğme oluşturmak için Pencere > Etkileşimli > Düğmeler ve Formlar panelini kullanın ve Düğmeye Dönüştür simgesine tıklayın.

Düğmeler, normal, rollover ve tıklama görünümleri için oluşturulmuş farklı durumlara sahip olabilir. Düğmelere rollover veya tıklama durumları eklemek için, Düğmeler panelinde üzerlerine tıklayın ve her durum için düğme görünümünü düzenleyin. Bir düğmeye eylem eklemek için artı işaretine tıklayın ve listeden seçin. SWF/EPUB kapsamındaki eylemlerin etkileşimli PDF'lerde çalışmayacağını dikkate alın.

Açılır öğeler oluşturmak için Düğmeleri ve Formları Göster/Gizle'yi seçin. Düğmeleri tetiklenene kadar gizlemek için Tetiklenene Kadar Gizli seçeneğini işaretleyin. Etkileşimli bir PDF'ye çok durumlu nesneleri dahil edebilirsiniz, ancak bunları önce bir SWF olarak dışa aktarırsanız ve ardından PDF dışa aktarma için InDesign mizanpajına geri yerleştirirseniz. Bu iş akışı sıkıcıdır ve PDF'ler tüm PDF okuyucularında düzgün şekilde görülemez, bu nedenle gerçekten gerekmedikçe bunu yapmaktan kaçının.

Belgenizi InDesign CC 2015 Publish Online özelliğini kullanarak bir HTML prototipine dönüştürmek istiyorsanız, animasyonlar, çok durumlu nesneler ve SWF/EPUB dışa aktarmaya yönelik olanlar da dahil olmak üzere birden çok düğme eylemi gibi daha birçok etkileşimli seçeneği kullanabilirsiniz.

Animasyon panelini kullanarak ve açılır menüden yerleşik hazır ayarlardan birini seçip özelliklerini ayarlayarak basit animasyonlar ekleyebilirsiniz. Bir nesneye yalnızca bir animasyon uygulanabilir, ancak bunlardan daha fazlasını eklemeniz gerekiyorsa, nesnenizi boş bir kutu ile gruplandırın ve yeni oluşturulan nesne üzerinde yeni animasyonu kullanın.

Farklı durumların gösterilmesini gerektiren UI öğeleri için çok durumlu bir nesne oluşturun. Her durum için ayrı bir nesne oluşturun. Nesneler, tek bir öğe (resim, metin kutusu, grafik) veya bir grup farklı öğe olabilir. Pencere > Etkileşimli > Nesne Durumları panelini açın, çok durumlu nesne için oluşturduğunuz tüm nesneleri seçin ve panelin altındaki Yeni düğmesine tıklayın.

Çok durumlu nesneniz oluşturulduktan sonra, bir nesne durumundan diğerine geçmek için düğmeler oluşturmanız gerekir. Sonraki Duruma Git veya Önceki Duruma Git eylemleri, Duruma Git eylemiyle belirli nesne durumunu ortaya çıkarır.

Tel kafes/prototipinizde kaydırılabilir bir çerçeveye sahip olmak istiyorsanız, bir çerçeve oluşturmanın en kolay yolu, Ajar Productions'ın Evrensel Kaydırmalı Çerçeveler uzantısını kullanmaktır. Uzantıyı indirip yükledikten sonra InDesign paneli olarak kullanabilirsiniz. Kaydırılabilir bir çerçeve için, bir kap için bir çerçevenin yanı sıra içerik oluşturmanız gerekir.

Kaydırılabilir içerik bir metin çerçevesi, resim veya birlikte gruplandırılmış birkaç öğe olabilir. İçeriği ve kapsayıcı kutusunu oluşturmayı tamamladığınızda, içeriği ve Düzen > Kes'i seçin. Ardından kabı seçin ve Düzenle > İçine Yapıştır'ı kullanarak içeriği yapıştırın. Kabı seçin ve Evrensel Kaydırma Çerçevelerini kullanarak istediğiniz kaydırma yönünü ayarlayın.

Düğmeleri, çok durumlu nesneleri, animasyonları ve kaydırılabilir çerçeveleri birleştirerek zengin bir etkileşimli deneyim elde edebilirsiniz. InDesign'da etkileşimi test etmek için EPUB Etkileşim Önizleme panelini kullanın. Tek bir sayfayı veya tüm belgeyi önizleyebilirsiniz. Önizleme panelini ihtiyacınız kadar büyütün.

Adobe InDesign etkileşimli özelliklerini kullanmadıysanız, başlangıçta biraz öğrenme eğrisi olduğu için hazırlıklı olun. Ancak biraz pratik ve biraz deneme yanılma ile bunları çabucak öğreneceksiniz.

Biten Belgeleri Dışa Aktarma

Tel çerçeveleri ve sunum dosyalarını oluşturmayı tamamladığınızda, geriye kalan tek şey harika fikirlerinizi müşteriye mümkün olan en iyi şekilde göstermektir. Bu amaçla, tel çerçevelerinizi müşterinizin önizleyebileceği bir biçimde dışa aktarmanız gerekir. InDesign dosyaları çeşitli biçimlerde dışa aktarılabilse de, işlevsel düşük veya yüksek kaliteli prototipleri test ediyorsanız, muhtemelen Etkileşimli PDF'yi veya Çevrimiçi Yayınla özelliğini kullanacaksınız. Etkileşimli bir PDF olarak kaydetmek için Dışa Aktar iletişim kutusundaki Biçim açılır menüsünden Adobe PDF'yi (Etkileşimli) seçin ve özellikleri gerektiği gibi ayarlayın. Eklemek istediğiniz etkileşimli öğeler varsa Formlar ve Medya'yı işaretlemeyi unutmayın. Müşteriler, ücretsiz Adobe Reader'da PDF tel çerçevelerini görüntüleyebilir ve tüm yorumlarını aynı dosyaya yazabilir.

InVision (veya PDF'leri destekleyen başka bir araç) prototipi oluşturmak için InDesign'dan dışa aktarılan bir PDF belgesini de kullanabilirsiniz. Standart prototip oluşturma aracınız, belki de Marvel, bir PDF'yi içe aktaramıyorsa, InDesign tel çerçeve sayfalarınızı JPEG veya PNG görüntüleri olarak dışa aktarın.

Farklı cihazlarda modern tarayıcılarda görülebilen etkileşimli bir HTML prototipini dışa aktarmak için Dosya > Çevrimiçi Yayınla'ya gidin veya Uygulama Çubuğundan Çevrimiçi Yayınla düğmesini tıklayın. Belge çevrimiçi yayına hazırlandıktan ve karşıya yüklendikten sonra, paydaşlarla paylaşmak ve inceleme sürecini başlatmak için bir belge URL'sini kopyalayabilirsiniz. Ayrıca yayınlanan prototipi sitenize gömebilirsiniz.

Publish Online özelliğinin bir dezavantajı, dışa aktarma üzerinde herhangi bir ek kontrole sahip olmaması ve dosyaların her zaman Adobe'nin sunucularında saklanmasıdır. Ayrıca, bu hala bir önizleme özelliğidir ve Adobe'nin bunu hangi yönde geliştireceğinden veya durdurulup durdurulmayacağından emin olamazsınız.

Tel kafes/prototipiniz dışa aktarıldığında, test etme, gözden geçirme ve yineleme sürecinin başlama zamanı gelir.