Mükemmel prototipler ve marvelli el-off tasarımları

Sep 14, 2025

Nasıl Yapılır

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

Invision App ve Enterprise Takımları için Yepyeni Tasarım Handect Araçları'ndan daha kısa bir öğrenme eğrisi ile, Marvel'in takımlarda prototipleme web ve mobil uygulamaları için hızlı ve zahmetsiz bir çözüm olabileceğini keşfetmek için daha iyi bir zaman yoktur.

Marvel, takımların tasarımlarını (kroki veya marvel olarak yapıldığını), kabataslak fikrinden test edilen konseptten almaya yardımcı olur. İşbirlikçi araçları, paydaşları yalnızca söylemelerini değil, tasarım iş akışının bir parçası olmalarını teşvik eder.

01. İlk Marvel Projenizi Oluşturun

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Projenizi seçtikten sonra, tasarım sürecini başlatmak için iki düğmeden birine tıklayın.

Başlamak için Marvel'de kaydolun, sadece adınızın ve e-posta adresinizin gerekli olduğu durumlarda. Tasarım projesi veya prototip projesini seçin. Bir prototip projesi, daha önce tasarladığınız ekranlar yüklediğinizde (genellikle kroki). Bir tasarım projesi sıfırdan başladığınızda ve Marvel'in düşük kaliteli bir mockup oluşturmak için kendi tasarım araçlarını kullanmak istiyorsunuz (bu hızlı yineleme ve beyin fırtınası için inanılmaz bir seçenektir).

Tasarım Projesi'ni seçin, ardından bir ad verin, ardından iPhone X'i seçin ve Proje Oluştur düğmesini tıklayın. Buradan (bu proje gösterge panelini buradan açıkça arayacağız), sol taraftaki tasarım düğmesini veya pencerenin ortasındaki başlangıç tasarım düğmesini tıklayacağız.

02. Tasarım düşük kaliteli prototipler

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Bu kamera ekranı gibi hazır bileşenleri kullanabilir ve uyarlayabilirsiniz.

Buradaki temel hedefimiz, nihai sonucun neye benzeyeceği konusunda endişelenmeden çok fazla zaman kaybı olmadan fikirlerimizi hızlı bir şekilde görselleştirmek. Buradan, Sekme çubukları gibi şekiller, görüntüler, metinler, hazır bileşenler ve hatta bu kamera ekranı gibi tüm tam ekran bileşenleri (sol taraf çubuğundan seçilmiş ve sağ) kullanılarak tam ekran bileşenleri oluşturabiliriz. kenar çubuğu).

Çizim şekilleri, metin katmanları oluşturmak ve basit görsel değişiklikler yapmak, tasarımcı olmayan bir tasarımcı için bile oldukça kolaydır, ancak tecrübeli tasarımcılar bir şeyler bir fikir atabildiklerini ve Proje'ye ekle düğmesine tıklayabileceklerini sevecekler.

Vektör çizim, maskeleme ve diğer karmaşık tasarım araçlarını beklemiyor olsanız da, bu arayüz, bir eskiz, Adobe XD veya FICMA kullanıcısıysanız (aslında, krokiden daha yüksek kaliteli tasarımlar ithalatını tartışacağız. bir anda). Bekleyebileceğiniz şey yakınlaştırma, hizalama, gruplama, temel görsel tasarım araçları, sürükleme, yeniden boyutlandırma ve döndürme ve birkaç kullanışlı klavye kısayolları gibi fare kontrolleri.

03. Geribildirim alın

Ancak, Marvel sadece tasarımcılar için değil. Bir tasarımcının endüstri standardı bir tasarım uygulamasında son tasarımı yaratmasını gerektirebilse de, fikirler her türlü paydaştan (yöneticiler, müşteriler, geliştiriciler vb.) Gelmelidir (ve yapmak).

Birincil rolünüzün bir takımda ne olursa olsun, Süper-Kolay olması gerekir: "Hey, bu bir fikir olabilir mi?" Ve sonra görsel olarak gösterilir. Marvel POP Mobil Uygulama, bu basitleştirilmiş tasarım araçlarını mobil cihazlara getirerek giriş engelini daha da azaltır, çünkü karşılaşalım, çünkü karşılaşalım, fikirler bize en garip zamanlarda gelebilir. Kağıda kabataslak fikirler, cihaz kamerasını kullanarak etkileşimli bir marvel ekranına dönüştürülebilir. Tasarım, herkesin karmaşık tasarım uygulamaları kullanımı ile sınırlı olmayan bir söylemesi olan demokratik olmalıdır.

04. Marvel'i kroki ile entegre edin

Ekibinizle düşük kaliteli fikirlerin üretken bir şekilde beyin fırtınası yapıldıktan sonra, seçiminizin tasarım uygulamanızdaki ilk yinelemeyi alay etmek istersiniz. Herhangi bir tasarım uygulamasından dışa aktarılan PNG ekranlarını tamamen yükleyebiliyorsanız, kroki önerilen uygulama, çünkü işlemi otomatikleştiren özel bir kroki eklentisi var (ve hatta tasarımın daha sonra geliştiriciler tarafından denetlenebilmesi için tasarımı okuyabilir). Tasarım Handish için Photoshop desteği daha sonra gelecek, ancak Adobe, artık Adobe XD'yi oluşturduğundan beri, artık kullanıcı arabirimi tasarımı için Photoshop'u touting değil.

Gösterge tablosundan, Ayarlar ve GT; Entegrasyonlar ve GT; Eklentiyi çizin, sonra eklentiyi indirin. Kurulduktan sonra ve tasarım dosyanızı açtıktan sonra, Sync Seçili veya Marvel çubuğundaki tüm düğmeleri senkronize edin (bu, katman listesinin üzerinde görünür), ekranları senkronize etmek için bir Marvel Projesi'ni seçmeye başlamak için.

05. Prototip Etkileşimleri

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Bir ekrandan diğerine bağlanmak için sıcak noktaları oluşturmak için bölgeleri sürükle

Ama elbette, onlara herhangi bir etkileşim eklememiz durumunda prototipleri test edemiyoruz, bu yüzden şimdi yapalım. Marvel Dashboard'a geri dönme, senkronize ettiğimiz ekranları göreceksiniz, ekran moduna girmek için ekranlardan herhangi birini Göster'i tıklatın.

Buradan, pencerenin her iki tarafındaki sol ve sağ okları kullanan ekranlar arasında gezinebiliriz, belirli sayıda saniyeden (sunumlar için faydalıdır!) Ekranlarda hareketi boyunca hareketi boyunca hareketi için zamanlayıcıya tıklayın (sunumlar için faydalıdır!) Veya eklemek için yorum yok İlk yorumunuz veya ekranda açıklamanız.

Muhtemelen fark edeceğiniz ilk şey, sırasıyla ekranın sol üst ve alt köşelerinin yakınında görünen sabit başlık ve sabit altbilgi düğmeleridir. Bu düğmeler sürüşlüdür ve ayrıca kaydırma görünümünün en üstüne sabit kalmak için bir başlık bölümünün kesme bölgesini işaretlemek için de hareket ettirilebilirler. Bu değeri manuel olarak belirlemek için metin alanlarını sağ üstte sağ ve sağ köşede de kullanabilirsiniz.

Ama aslında bir ekranı bir başkasına nasıl bağladığımız? Basit: Fare ile, ekranda bir bölgeyi başka bir ekrana bağlamak için bir bölgeyi sürükleyin (buna 'hotspot' denir). Bunu yaptıktan sonra, kullanıcının nereye alındığını, etkileşim sırasında gerçekleşen herhangi bir geçiş ve bu etkileşimi etkinleştirmek için hangi jestin gerekli olduğunu özelleştirmenizi sağlayan pencerenin altında bir arayüz görünecektir (dokunma, kaydırma vb. ).

Ve elbette, bu prototipleme araçlarını düşük kaliteli mockuplarda bile kullanabiliriz. Aslında, görüşmeleri ve yinelenmesi için yorum yapma özelliklerini kullanırken yapmanız önerilir.

06. Tasarımları geliştiricilere teslim etmek

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Tasarım handoff, tasarım ve geliştiricinin birbirleriyle çalışmasını kolaylaştırır

Ekibiniz nihai tasarıma tam güvenle tuttuğunda, yorumlama ve kullanıcı test araçlarını kullanarak doğrulandı, daha sonra kontrol edebilecek ve kodu kontrol edebilecekleri geliştirme zamanı. Tasarım, tasarımın teslim edildikten ve tasarımcıların ve geliştiricilerinin tamamlanmasına kadar gelişimi denetlemeye her zaman uyum içinde iletişim kurmaları gerektiğini hatırlamak önemlidir. Geliştiricinin bazı soruları da olabilir, bu yüzden bu yorum özellikleri hala çok aktif olmalıdır.

Tasarım Handoff arayüzünü açmak için oynat düğmesine basın, ardından sol alt köşedeki Handoff'u tıklatın. Buradan, geliştiriciler tasarım öğelerine tıklayabilir ve bunları sağ taraftaki kenar çubuğunu kullanarak (kroki, Figma veya Adobe XD'deki müfettiş arayüzü gibi) kullandıklarını yapan bireysel stilleri inceleyebileceklerdir. Buradaki tek fark, geliştiricilerin stilleri panoya kod olarak kopyalamak için Kopyala düğmesine tıklayabilmeleridir.

Bu makale, dünyanın web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan NET'in 301 sayısında yayınlandı. Satın almak Sayı 301 veya Net'e abone olun .

Yinelemeli prototipleme hakkında daha fazla fikir edinin

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby, Talk'ı veriyor mu? 25-27 Nisan 2018 tarihleri arasında New York'taki New York'tan ne zaman kazanan bir tasarım yaratmanıza yardımcı olacaktır.

Çoğu şirketin yeni bir web tasarımı oluşturması gerektiğinde, işlem tipik olarak perdelik fikirlerle başlar, tasarıma taşır, ardından geliştirme ve sonra yaşıyor. Ama ne işe yaramazsa? Sadece bir fikrin kötü performans gösterdiğini bulmak için harcayacak çok zaman, çaba ve para.

Neyse ki, konuşmasında 25-27 Nisan 2018 tarihleri arasında New York oluşturun , Marisa Morby, Clearhead'daki araştırma başkanı, yinelemeli prototipleme ve test kullanarak geleneksel tasarım işleminden daha hızlı, daha kolay ve daha ucuz olan yeni tasarımlar oluşturmanın ve doğrulamanın daha iyi bir yol gösterecektir.

New York'u 25-27 Nisan 2018 tarihleri arasında gerçekleşir. Şimdi biletini al .

İlgili Makaleler:

10 Üst Prototipleme Araçları
En iyi 18 tel kafes aracı
Prototipleme tuzakları nasıl önlenir

Mükemmel prototipler ve marvelli el-off tasarımları

01. İlk Marvel Projenizi Oluşturun

02. Tasarım düşük kaliteli prototipler

03. Geribildirim alın

04. Marvel'i kroki ile entegre edin

05. Prototip Etkileşimleri

06. Tasarımları geliştiricilere teslim etmek

Yinelemeli prototipleme hakkında daha fazla fikir edinin

Nasıl Yapılır - En Popüler Makaleler

İşletmeniz için bir web sitesi adı seçilir

Animasyonda Kompozisyon: Temelleri Öğrenin

Blender'de karmaşık bir 3D bilim kurgu sahnesi oluşturun

Diffush ile başlayın

Çevrimdışı çalışan uygulamaları oluşturun

Maya'da daha iyi karakter animasyonları oluşturun

Photoshop CC'sinde ressam efektler oluşturun

Kıyafetten Kürklü 3D karakter oluşturun

Kategoriler