InVision Studio: Genel Bakış ve İnceleme

InVision Studio, esnek katmanlar ve sonsuz bir tuval sayesinde hızlı bir şekilde gelişmiş, vektör tabanlı ekran tasarımları oluşturmanıza olanak tanıyan bir prototip oluşturma ve animasyon aracıdır. Piyasadaki en iyi yüksek kaliteli prototipleme araçlarından biri olarak kabul edilir. InVision Studio ile iş akışınızı hızlandırabilirsiniz; ilginç, etkileşimli prototipler oluşturun; tasarımlarınızı ekibe ve müşterilere iletin; tasarımlarınızı test edin; ve geliştirme aşamasından önce soruları, endişeleri ve tasarım değişikliklerini ortadan kaldırın.

InVision Studio, tüm ürün tasarımı iş akışınızı bağlayabileceğiniz, depolayabileceğiniz ve paylaşabileceğiniz InVision Cloud'u ve tüm ürün tasarımı iş akışınızı depolayıp kontrol edebileceğiniz bir tasarım sistemi yöneticisi ve kitaplığı olan InVision DSM'yi de içeren InVision araç paketinin bir parçasıdır. marka ve UX bileşenleri. InVision Studio, Mac ve Windows'ta kullanılabilir. Sketch dosyalarını da içe aktarabilirsiniz.

InVision Studio'nun Özellikleri

InVision Studio uygulamasını indirdikten sonra, oluşturulacak proje seçeneklerine sahip olacaksınız. Ne tasarlamak istediğinizi seçtikten sonra arayüz turuna çıkacaksınız.

Katman veya bileşen eklemek için üstteki artı işaretine tıklayın. Bir bileşen eklediğinizde, tüm seçenekleriniz sağda gelir.

InVision'ın bazı dikkate değer özelliklerini gözden geçirelim.

Görüntüleri maskesiz yeniden boyutlandırın ve kırpın.

Akıllı görüntü kırpma adı verilen bu özellik, siz boyut değiştirdikçe görüntüleri otomatik olarak keser. Sketch'te bir görüntü dolgusu oluşturmaya ve ardından onu "doldur"a ayarlamaya benzer, ancak daha az adımda ve daha sezgisel bir şekilde. Akıllı görüntü kırpma, odak noktası merkeze yakın olan görüntüler içindir. Daire, dikdörtgen veya yuvarlak dikdörtgen şeklinde kırpmak istiyorsanız da en iyisidir. Farklı bir odak noktasına veya daha ilginç bir şekle sahip görüntüler için, daha fazla özelleştirme seçeneğine erişmek için bir maske oluşturmak isteyeceksiniz.

Kaynak: LearnInVisionStudio.com

Kaydırırken öğeleri düzeltin.

Üstbilgi ve altbilgiyi düzeltmek InVision'da yeni değildir, ancak diğer öğeleri düzeltmek yenidir. Kaydırmayı yatay, dikey veya her ikisine ayarlayın, ardından sağ üstteki sabitle simgesine tıklayarak düzeltmek istediğiniz öğeyi seçin.

Birkaç çalışma yüzeyini tek bir animasyona bağlayın.

Zamanlayıcı, tek bir animasyona dönüştürmek istediğiniz birden çok çalışma yüzeyi üzerinde kontrol sahibi olmanızı sağlar. Ayrıca, son çalışma yüzeyinin ilkini göstermesi için bir animasyonu döngüye alabilirsiniz. Veya tasarımınızın başka bir bölümüne doğrudan çok adımlı bir animasyona sahip olabilirsiniz. Bunun gibi karmaşık animasyonlar, video girişleri ve çıkışları için idealdir.

Paralaks animasyonları için kaydırma tetikleyicileri oluşturun.

Kaydırma tetikleyicileri, kaydırma sırasında meydana gelen paralaks efektleri ve diğer türde animasyonlar oluşturabilir.

Kod yazmadan duyarlı prototipler oluşturun.

Duyarlı prototiplerle, her şeyi yüzdeye dayalı hale getirebilir ve her öğeyi çalışma yüzeyi boyutuna göre yeniden boyutlandırabilirsiniz. Ardından, her türlü ekrana yanıt veren prototipler oluşturabilirsiniz. Bu, farklı boyutlarda maketler oluşturmayı kolaylaştırır. Ayrıca, bir tasarımı Studio'da "yeniden boyutlandırılabilir" olarak ayarlamak, tarayıcıda görüntülendiğinde tasarımı otomatik olarak yeniden boyutlandırır.

Kaynak: LearnInVisionStudio.com

Prototipleri telefonunuza yansıtın.

Telefonunuzda bir animasyonu veya prototipi test etmek istiyorsanız, paylaşabilir, “ayna” seçeneğini seçebilir ve ardından mobil uygulamada QR kodunu tarayabilirsiniz.

Sketch benzeri kısayollar kullanın.

Halihazırda Sketch kullanıyorsanız, InVision Studio'nun kullandığı kısayollara zaten aşina olacaksınız - özellikle de denetçi, katmanlar ve araç çubuğu söz konusu olduğunda, hemen hemen hepsi aynıdır.

Açık ve koyu temalar arasında geçiş yapın.

Tasarımcı olmayanlar bu özelliğin ne kadar kullanışlı olduğunu anlayamayabilir. Hafif bir arayüz tasarlarken, koyu temanın eklenen kontrastı yardımcı olabilir (ve tam tersi).

Ekiple gerçek zamanlı olarak işbirliği yapın.

İşbirliği ve iş akışı basitleştirilmiştir ve ekip üyeleri gerçek zamanlı olarak tasarım yapabilir ve yorum yapabilir. Küresel senkronizasyon ve gerçek zamanlı güncellemeler ile kimse döngünün dışında kalmayacak.

Tarayıcıda InVision Studio ile Tasarım Yapma

Size InVision Studio'nun tarayıcı sürümüyle çalışmanın nasıl bir şey olduğunu hızlıca göstermek istiyorum. Bir tahta tasarlamayı, bir prototip oluşturmayı ve serbest el modunu kullanmayı kısaca gözden geçireceğiz.

Bir Pano Tasarlamak

Komuta merkeziniz ekranın sağ üst köşesindedir. Beş simge şu anlama gelir:

• Başlığı düzenle
• Düzen türünü ayarla
• Ayarlar
• Yorumlar
• Paylaş

Başlığı Düzenle

Başlıkla biraz oynadım. “Başlığı Düzenle”ye tıkladıktan sonra şu seçenekler belirdi:

Resmi ve metni değiştirdim, biraz bulanıklaştırdım ve metnin öne çıkması için hafif bir bindirme ekledim. Özellikle "Boyut" seçeneğini seviyorum - farenizi üzerine getirin ve üç boyuttan birini seçin.

Düzen Türünü Ayarla

Daha sonra düzen türünü “Titiz” olarak değiştirdim. Bu, başlığın altındaki içerik blokları içindir ve siz aşağı kaydırdıkça görünecektir.

Ek Bölümleri Düzenleme

Fareyle bölüm başlığının sağına giderseniz üç simge görürsünüz. Aşağı ok, "Bölümü Aşağı Taşı" ve "X", "Bölüm Başlığını Kaldır" dır. Onu siler ve sonra fikrinizi değiştirirseniz, fareyle aynı alanın üzerine gelebilirsiniz ve yeni bir bölüm başlığı ekleme seçeneğiniz olur.

Okun sağındaki artı işaretine ve “X”e tıklayarak yeni bir menü göreceksiniz. Soldan sağa, simgeler şu anlama gelir:

• Renk Örneği Ekle
• Bir not ekle
• Dosya yükleme

Bir içerik bloğunun üzerine geldiğinizde, başlıkta olduğu gibi yeniden boyutlandırma seçeneklerini tekrar göreceksiniz. Farklı bir boyut seçmek, blokları yeniden yerleştirmek için yerleşimin geri kalanını otomatik olarak güncelleyecektir. Bir içerik bloğuna tıklamak, sağda bir pencere açar.

Çubuktaki renklerden birinin üzerine gelindiğinde renk kodu gösterilir. Bu pencere ayrıca ekip üyelerinin bu özel tasarım bloğu hakkında yorum bırakabileceği yerdir.

Prototip Oluşturma

Size seçeneklerin ne olduğunu göstermek için prototip demosu ile de oynadım.

Burada, kontrol merkeziniz alt kısımdadır. Soldan sağa göz simgesinden başlayarak simgeler aşağıdaki gibidir:

• Önizleme modu
• Yapı Modu
• Yorum Modu
• İnceleme Modu
• Geçmiş Modu
• sosyal paylaşım
• Yükleme Ekranları
• Yapılandırma
• Ekran Durumu

Serbest El Modu

Serbest el modu, nasıl kullanılacağını hızlı bir şekilde göstermek için etkileşimli bir demo ile başlar. Ardından, projenizi bir araya getirmek için sonsuz bir tuvalle çalışırsınız. Uygulamada çalışıyorsanız, bir ekip üyesine “Freehand ile canlı işbirliği yap” bağlantısını gönderebilirsiniz ve o, gerçek zamanlı olarak projeyi çizebilir ve projeye metin ekleyebilir.

InVision Studio Fiyatlandırması

Ücretsiz plan, sınırsız ortak çalışan ve ekranlı bir prototip içerir. Tek ihtiyacın olan buysa, asla ödemek zorunda değilsin. Demolar sınıra dahil değildir. Birden fazla prototip tasarlarsanız, sınırsız prototip oluşturmak için altı günlük ücretsiz erişim elde edersiniz. Bundan sonra, ek prototipler oluşturmak ve kullanmak için yükseltme yapmanız gerekecek. Yükseltmek istiyorsanız, planları şunlardır:

Son düşünceler

Diğer tasarım araçlarıyla karşılaştırıldığında, InVision Studio'yu biraz yavaş ve bazen sorunlu bulabilirsiniz - bu genel olarak yavaş olduğu anlamına gelmez, sadece Adobe XD, Figma ve Sketch gibi diğer benzer araçlardan daha yavaştır (bazen). Bu sorunu şahsen yaşamadım, ancak incelemelerde çok fazla çıkıyor. Ayrıca, InVision Studio eklenti desteği sunmaz, bu nedenle bu sizin için önemliyse, bunun yerine Sketch'i düşünün.

Prototipleme söz konusu olduğunda, özellikle bir ekiple işbirliği yapmanız gerekiyorsa, InVision Studio'yu yenmek zordur. Adobe XD kadar güçlü olmayabilir, ancak yine de bulabileceğiniz en iyi prototip oluşturma araçlarından biridir.

InVision Studio'nun arayüzünün öğrenilmesi ve kullanılması kolaydır ve simgeler şık ve moderndir. Öğreticiler, turlar ve daha fazla rehberliğe bağlantılarla çok fazla yardım da var. (Şimdi, bunun tam tersini söyleyen incelemeler okudum, bu yüzden sanırım bu bir zevk meselesi.) InVision Studio ile çok az tahminde bulunulur ve hemen orada olduğunuz şeye geçebilirsiniz: yaratmak.

Tasarım yaparken altın kural Altın Oranı kullanmaktır. Altın Oranı kullanma ve anlama konusundaki nihai rehberime göz atın.

Görsel Üretim / Shutterstock.com aracılığıyla öne çıkan görsel