Kolay Prototip – Bir InVision Studio Eğitimi

2018'in ilk yarısında uyumadıysanız, muhtemelen InVision Studio uygulamasının piyasaya sürülmesiyle sonuçlanan etkileşimli tasarım topluluğundaki hararetli beklentinin kesinlikle farkındaydınız. InVision, Craft gibi Sketch ve Photoshop eklenti takımlarıyla ve statik arayüz tasarımlarını tıklanabilir ve paylaşılabilir prototiplere hızla dönüştürmek için başvurulan platform olarak bilinir. Geçen yıl cesur bir adımla, Sketch ve Figma gibi endüstrinin favorileriyle rekabet edebilmek için kendi dijital tasarım yazılımlarını geliştirdiklerini duyurdular.

Ürün devrim niteliğindeydi ve tasarımdan prototipe kusursuz bir iş akışı, karmaşık etkileşim işlevselliği, nefes kesici geçiş animasyonu için bazı önemli sözler verdi ve ücretsiz olacaktı. InVision, tasarımcıları heyecanlandırmak için oldukça heyecan verici tanıtım videoları ve demolar yayınladı. İlk beta sürümünün yılın başında birkaç defadan fazla geri itilmesiyle beklenti daha da arttı.

Daha fazla tasarımcı yazılımla oynamaya başladıkça, uygulama arayüzü tasarım aracının temellerini göstermek için daha fazla öğretici ve kılavuz ortaya çıkıyor. InVision ayrıca, kullanıcıları InVision Studio'nun temel bilgilerine dahil etmek için birkaç tane oluşturmuştur.

Erken erişim sürümleri karışık eleştiriler alıyor olsa da, Studio'nun bazı ilginç özellikleri ve çok fazla potansiyeli var. Bu eğitim, erken benimseyenlere InVision Studio prototiplemenin temelleri hakkında bilgi vermeyi ve bazı temel prototip animasyonları eklemeyi amaçlamaktadır.

Bu InVision Studio eğitimini takip ederek, anında animasyonlu geçişlerle etkileşimli bir prototip oluşturun!

InVision Studio Çalışma Alanının Nikel Turu

Studio'nun çoğu, UI tasarımcılarına ve Sketch gibi dijital tasarım yazılımlarını kullanan herkese aşina olmalıdır. Çalışma alanının çoğu, sol taraftaki panel sayfaları, katmanları ve grupları barındıran Sketch'in UI'sinden ipuçlarını ödünç alır; müfettişler için sağ yan panel; ve üst kısımdaki bağlamsal bir araç çubuğu.

Bazı işlevler farklı adlandırılmış olsa da, aynı araçların çoğunu da bulacaksınız. Örneğin, bir Sketch "sembol", Studio'da bileşen olarak adlandırılır.

Etkileşimler Paneli

Bu öğreticinin amaçları doğrultusunda, ekranlar arasında etkileşimli etkin noktalar oluşturmak ve bunlar arasında yumuşak geçişler oluşturmak için etkileşim araçlarını kullanmaya odaklanacağız. Studio çalışma alanının sağ tarafındaki "etkileşimler panelinde" birçok sihir gerçekleşecek.

Etkileşim oluşturmanın basit yolu, bir tetikleyici katman veya grup seçip klavyede "c"ye basmak (veya üst araç çubuğundaki şimşek simgesini tıklamaktır), bu da hedef ekranı seçmek için mavi bir seçim kırbacı başlatır. Ardından Studio, tasarımcıdan olayı tetikleyen hareketi veya kullanıcı girişini seçmesini ve bir dizi önceden ayarlanmış geçiş veya bir "hareket" geçişi arasında seçim yapmasını ister.

InVision Studio Animasyonu

Harika etkileşim tasarımının birçok unsuru vardır, ancak bir kullanıcı arayüzünde animasyonlu geçişlerin ve mikro etkileşimlerin doğru kullanımı, vitrin süslemesinden daha fazlasıdır.

Kullanılabilirliği artırırlar ve sevilen bir ürün ile kafa karıştırıcı bir karmaşa arasındaki fark anlamına gelebilirler.

Bu eğitim boyunca, uygulama prototipimizi oluşturmak için önceden ayarlanmış geçişler ve hareket geçişlerinin bir kombinasyonunu kullanıyoruz. Önceden ayarlanmış geçişler oldukça basittir ve InVision çevrimiçi prototip platformunun kullanıcılarına tanıdık gelecektir.

Ekranlar arasında hareket geçişlerinin nasıl çalıştığını yöneten kurallar biraz daha gizemli. Aracı oluştururken göz önünde bulundurulan pek çok tasarımcı düşüncesi (örneğin, ekranlar arasındaki öğelerin otomatik olarak bağlanması) olsa da, geçişlere hareket eklerken belirli efektleri elde etmek için biraz deneme yanılma gerekir. Umarım bu eğitim, tasarımcıların InVision Studio'nun sunduğu şeylerle biraz daha rahat denemeler yapmasına yardımcı olur.

Akılda Tutulması Gerekenler

Studio, animasyonlar etrafında birçok akıllı işlevsellik vaat ediyor. Örneğin, bir etkileşim yoluyla bağlandığında bir çalışma yüzeyinden diğerine kopyalanan nesneler arasında hareket geçişleri oluşturabilir. Tasarımcılar daha sonra bazı güzel yumuşatma ve diğer hareket efektlerini elde etmek için bu animasyonları istedikleri gibi ayarlayabilir. Belirli bir sırayla bir nesne yığınını değiştirmeye çalışırken bunun nasıl çalıştığının tuhaflıklarını öğrenmek, sabır ve biraz pratik gerektirebilir.

Hareket geçişleri, en iyi şekilde, çalışma yüzeylerindeki birbirinden çoğaltılmış nesnelerle çalışır. Animasyon özelliği, aynı katman adlarına sahip yinelenen nesneleri tanıdığı için "akıllı"dır, bu nedenle ekranlar arasındaki anahtar katmanları kaldırmamaya veya yeniden adlandırmamaya dikkat edin (bu, harika bir animasyonu mahvetmenin sinir bozucu derecede kolay bir yoludur).

Studio'nun henüz emekleme aşamasında olduğunu unutmayın, bu nedenle tasarımcıların adil bir hata payıyla karşılaşmaya hazırlıklı olmaları gerekir. Örneğin, "önizleme" düğmesi prototipin etkileşimli bir önizlemesini başlatır, ancak bazen etkileşimler hiç tetiklenmez, bu durumda dosyayı kaydetmeniz ve yeniden açmanız gerekir.

Yazılımı öğrenirken, birden fazla dosyanın kendisini garip bir şekilde bozduğunu gördüm - tüm çalışma yüzeylerini sildi ve tüm araç panellerini erişilemez hale getirdi. Hatayı bildirdim ve çok fazla iş kaybetmemek için dosyalarımın birden çok sürümünü kaydetmeyi öğrendim.

Son olarak, her zaman organize olmaya yardımcı olur. İster Studio, ister Sketch veya Marvel olsun, herhangi bir platformda bir prototip oluştururken, nesneleri ve katman etiketlerini takip etmek, özellikle bir ekiple çalışıyorsanız veya dosyayı bir noktada teslim ediyorsanız, zamandan ve hayal kırıklığından tasarruf etmenizi sağlar. Etkileşimler oluştururken katmanların ve katman gruplarının sırasını not edin; bu genellikle istenen animasyon efektini elde etmede büyük bir fark yaratır.

Eğitim!

Hadi başlayalım! Henüz yapmadıysanız, Studio uygulamasının erken erişim sürümünü indirmek için InVision Studio'ya gidin. Bilgisayarınızda InVision Studio'yu kurduktan sonra, eğitim dosyalarını buradan indirin. Studio yazılımını başlattığınızda, dosyayı kaydettiğiniz yerden açmayı seçin.

Adım 1: Dosyayı Açın ve Bir Bakın

Bu etkileşimli prototip, 19. yüzyılın sonlarından 20. yüzyılın başlarına kadar modern sanatçılar hakkında bir mobil uygulama için olacak. Tüm ekranlar, hareket geçiş özelliğinin doğru kullanımı için gerekli olan dikkatli çalışma yüzeyi çoğaltması kullanılarak önceden oluşturulmuştur.

Hiyerarşinin, "Ev"den başlayarak her bir sanatçının biyografisine ve son olarak da sanatçının eserinin dört örneğinden oluşan bir atlıkarıncaya kadar uzanan 3 derinliği vardır. "Ana Sayfa" çalışma yüzeyinin, prototip için başlangıç ​​çalışma yüzeyini belirleyen küçük bir ev simgesine sahip olduğunu fark edeceksiniz.

Eğitim, bu üç derinlik seviyesini birbirine bağlayan basit gezinme yolları oluşturmaya odaklanacaktır. Prototipin düzgün bir şekilde etkileşimli bir uygulama gibi hissetmesini sağlamak için Studio'nun etkileşim ve geçiş araçlarını kullanacağız.

2. Adım: Sanatçı Döşemesini Sanatçı Biyografisine Bağlayın

İlk çalışma yüzeyine gidin. "Artist Tile 1" katman grubunu genişletmek için biraz zaman ayırın. Üç iç içe grup göreceksiniz: biri sanatçı adı için, biri öne çıkan görüntü için ve üçüncü katman “Bio Text” içeren.

Çalışma yüzeyi ekranına bakıldığında, Studio'nun hareket geçişlerini işleme biçimi nedeniyle üçüncü katman grubu hemen görünmez; buna birazdan değineceğiz. Şimdilik sadece not edin.

Bu öğelerin tümünü içeren katman grubunu seçin: "Sanatçı Döşemesi 1." Bu grup seçiliyken, etkileşim aracını başlatmak için klavyenizde “c”ye basın (veya üst araç çubuğundaki şimşek simgesine tıklayın). Etkileşiminiz için hedef ekranı seçmek için imlecinizi mavi bir kırbaç izleyecektir.

Hemen sağdaki “Artist Bio 1” başlıklı çalışma yüzeyini seçin ve tetikleyiciyi ve geçiş türünü seçmeniz istenecektir. Tetik için "Dokun"u seçin ve ardından geçiş olarak "Hareket"i seçin. Daha sonra geçişin süresini seçebilirsiniz. Bu geçişi 2 saniyeye ayarlayalım ve “Kaydet”e basalım.

Prototipi önizlemek için oynat düğmesini tıklayın. Ekranda işlerin nasıl hareket ettiğini ve biyo katmanın görüntünün altından nasıl aşağı kaydığını gördünüz mü? Tebrikler—oldukça akıcı bir etkileşim geçişi yarattınız!

3. Adım: Ana Ekrana Geri Düğmesi Bağlayın

Şimdi kullanıcılara ana ekrana geri dönmeleri için bir yol vermeliyiz. “Artist Bio 1” çalışma yüzeyine gidin ve sol üst köşedeki “btn_back” bileşenini seçin. Burada "c"ye basarak ve "Ana Sayfa" çalışma yüzeyini seçerek bir tetikleyici oluşturun.

Yine, tetikleyiciyi “Tap”, etkileşimi “Hareket” ve süreyi 2 saniye olarak ayarlayalım. Önizleme'ye tıklayın ve az önce oluşturduğunuz kaygan açma ve kapama geçişlerinin keyfini çıkarın. Döşemeyi kapatarak tetiklenen animasyonun, döşeme açılırken oynatılan animasyonun tersi olduğuna dikkat edin.

4. Adım: Galeriyi Bağlayın

Birinci ve ikinci çalışma yüzeylerindeki katman adlarını not alıyorsanız, bunların aynı olduğunu fark edebilirsiniz. Bunun nedeni, daha önce bahsedildiği gibi, Studio animasyonlarının, bir adı paylaşıyorlarsa çoğaltılan katmanları bir çalışma yüzeyinden diğerine otomatik olarak bağlamasıdır. Bu katmanların adını değiştirmek, animasyon bağlantısını kesecek ve geçiş, varsayılan olarak basit bir solmaya dönüşecek - özellikle anlamlı katman etiketlerine takıntılı olanlar için zorlayıcı.

Dönen resim galerisini açmak için düzgün bir hareket geçişi daha uygulamak istiyoruz. "Sanatçı 1 - Resim 1" başlıklı çalışma yüzeyi, "Sanatçı Biyografisi 1" çalışma yüzeyinden kopyalanan öğeler içeriyor ve örnek resmin daha fazlasını göstermek için yeniden boyutlandırılıyor.

"Öne Çıkan Resim" grubunu seçmek için "Sanatçı Biyo 1" katmanına tıklayarak başlayın. Bu, galeriyi açmak için tetikleyici olacaktır. Burada galerideki ilk çalışma yüzeyine bağlanan bir "Dokunma" etkileşimi oluşturun ve "Hareket"i seçin. Bu sefer süreyi biraz daha hızlı olacak şekilde ayarlayın: 1 saniye.

Galeriyi kapatmak için güzel bir geçiş oluşturmak için, "Artist 1 - Image 1" çalışma yüzeyindeki kapat düğmesi katmanını seçin ve daha önce olduğu gibi aynı ayarlarla "Artist Bio 1" çalışma yüzeyine geri bağlayın.

Bu animasyonu önizleyin ve prototipin sanatçının biyo ekranından görüntülerin atlıkarıncasına ve geriye ne kadar güzel geçtiğine hayret edin. Artık, uygulamamızın hiyerarşisinin üç düzeyinde gezinmeyi bağladık!

Adım 5: Tüm Galeri Görüntülerini Bağlayın

Yapmamız gereken hareket geçişlerinin çoğunu yaptık ve şimdi galerinin geri kalanı için bazı animasyon hazır ayarlarını kullanmaya başlayacağız.

Kullanıcımızın bu resim karuselini çevirmesi için buradaki etkileşim modeli, tanıdık bir kaydırma hareketi olacaktır. İyi haber şu ki, bu son kısım oldukça basit ve Studio'nun animasyon ön ayarlarını kullanmak hiç zaman almıyor.

"Sanatçı 1 - Resim 1" resim panosunu seçin ve bir sonraki çalışma yüzeyine, "Sanatçı 1 - Resim 2"ye yönlendiren bir etkileşim oluşturun. Bu sefer tetiği “Sola Kaydır” olarak ayarlayın. Geçiş için "Ön Ayar"ı seçin ve açılır menüden "Sola Bas"ı seçin.

Ters etkileşim oluşturmak için, "Sanatçı 1 - Resim 2" çalışma yüzeyini seçin ve önceki çalışma yüzeyine bağlayın, ancak bu sefer "Sağa Kaydır" hareketi ve "Sağa Bas" geçişi kullanın.

Resim 2'den Resim 3'e ve Resim 3'ten Resim 4'e çalışma yüzeylerini bağlayarak bu kalıbı sonraki birkaç çalışma yüzeyi ile tekrarlayın. Kolay!

Bunu daha gerçekçi hale getirmek için, Resim 1 ile Resim 4 arasındaki döngüyü kapatalım. Resim 4 için çalışma yüzeyini seçin ve Resim 1'e bağlayın. serideki sonraki resim. Image 1 çalışma yüzeyini ters ve presto ile Image 4'e bağlayın; döngüsel bir galeri oluşturdunuz!

Son olarak, resim galerisi çalışma yüzeylerindeki "btn_close" bileşenlerinin her birini seçin ve bunları biyo çalışma yüzeyine geri bağlayın. Burada istediğiniz geçişi seçebilirsiniz, ancak ben “Sağa Bas” ile gittim.

Şimdiye kadar, gösteriş yapmak için oldukça iyi sıralanmış bir navigasyon yolunuz var. Önizlemeyi tıklayın ve deneyin; prototipiniz, bu eğitimin başındaki gif'e çok benzer şekilde çalışmalıdır. Kendinize hak ettiğiniz bir sırt sıvazlayın.

6. Adım: Tekrarla

İlk sanatçı örneğinin tüm ekranlarını akıcı etkileşimlerle bağladığınıza göre, öğretici dosyasındaki diğer iki ekran grubu için adımları tekrarlayın. Benzer şekilde düzenlenirler ve Studio'nun çalışma şekline alışmak için iyi bir uygulama olacaktır.

Sonraki adımlar

Umarım bu eğitim, InVision Studio prototiplemenin bazı harika özelliklerine bir giriş sağlamıştır. Studio'ya alışırken, gelişmiş animasyon araçlarını kullanarak geçişleri değiştirmeyi denemelisiniz. Çalışma alanındaki diğer araçlarla denemeler yapın ve diğer InVision Studio eğitimlerini takip etmeyi deneyin. Pratik yaparak, önde gelen InVision Studio tasarım gurularından biri olabilirsiniz.

Yol boyunca bazı hatalar veya beklenmedik davranışlarla karşılaşmış olabilirsiniz, ancak yeni yazılım denemenin doğası budur. InVision'dakiler geri bildirimlere çok duyarlılar ve kesinlikle Studio'yu geliştirmeye devam edecekler, bu da onu her zamankinden daha istikrarlı ve kullanışlı hale getirecek.

Studio, denemek için eğlenceli bir araçtır ve ücretsiz bir uygulama prototipleme aracıyla deneme yapmamak için hiçbir neden yoktur. Bugün tasarım topluluğunda Sketch gibi go-to yazılımın yerini alması pek olası olmasa da, çok fazla potansiyeli var.

Toptal Tasarım Blogunda daha fazla okuma:

• UX Tasarım Sürecinizi Mükemmelleştirin - Prototip Tasarım Kılavuzu
• Bir Tasarım Aracı Olarak Figma'nın Gücü
• Gerçek Verilerle Prototip Oluşturma - Bir Çerçeve Oluşturucu Eğitimi
• Mobil Kullanılabilirlik için Temel Kılavuz
• Mobil Uygulama Tasarımı En İyi Uygulamaları ve Hataları