Origami Studio ile bir mobil uygulamayı prototip nasıl yapılır

Sep 15, 2025

Nasıl Yapılır

Kullanıcıların web ve mobil üzerinde deneyimlerinin yüksek beklentileri olduğu bir dünyada, prototipleme ve kullanıcı değerlendirmesi anahtardır. Artık giderek yüksek sadakat ile prototipleri aşamalı olarak yinelemeyi ve gelişen bir kullanıcı deneyimi Endüstri bu kritik aktiviteler kümesinde büyüdü. Sonuçta, prototipleme aşamasında doğru yazılım almak sizi daha sonra zaman ve / veya para kazandırır.

10 Üst Prototipleme Araçları

Prototipleme yapabileceğiniz birçok yaklaşım var ve orada yardımcı olmak için çok sayıda alet. Bloğun en yenilerinden biri Origami stüdyosu , Facebook tarafından geliştirildi ve MacOS için ücretsiz olarak kullanılabilir.

Aslında hayatını kuvars besteci için bir eklenti olarak başlayan Origami Studio (MacOS'un Xcode Geliştirme ortamında görsel bir programlama dili), bağımsız bir araç olmadan önce, geçen yıla çok fazla ilgi gördü.

Bu, sadece büyük isim geliştiricisi tarafından yaptırıldığı için değil, aynı zamanda güç ve sadelik kombinasyonu nedeniyle, yüksek kalitede, etkileşimli prototipler geliştirmeye getirdiği için aynı zamanda.

Origami Studio'yu bir prototip oluşturmak için ne kadar kolay kullanabileceğinizi keşfetmek için şu adımları izleyin.

01. Yeni bir prototip

Start by creating a new iPhone 8 prototype — Yeni bir iPhone 8 prototipi oluşturarak başlayın

Kedilerin resimlerini ve bazıları gibi 'benzeri' olarak kaydırmamıza izin verecek bir mobil uygulama için bir prototip yaratacağız. Origami Studio'yu kurduğumuzda, açılış ekranından yeni bir iPhone 8 prototipi oluşturacağız.

02. Katman ekleme

Prototipimize bazı katmanlar eklemeye başlayabiliriz. Bu durumda, ekranın üstüne yerleştirilmiş bir logo ekleyeceğiz. Sağ üstteki + düğmesini kullanarak katmanı ekleriz ve 'görüntü katmanı' seçeneğini seçiyoruz. Katmanın özelliklerini vurgulayarak ve değiştirerek uygun şekilde yeniden boyutlandırabilir ve konumlandırabiliriz. Markamızdan sonra, 'Gibi' butonumuz olarak hizmet etmek için ekranın altına bir kalp resmi ekleyeceğiz.

03. Bir Etkileşim Oluşturma

For interactions you'll need to create a patch — Etkileşimler için bir yama oluşturmanız gerekir

Kalp düğmemizin kullanıcı etkileşimlerine yanıt vermemiz gerekiyor. Önizleme penceresinde, imleç bir mobil cihazdaki dokunuşu temsil etmek için değiştiğini fark edeceksiniz. Buna cevap vermek için, esasen Origami'deki girdileri alan ve çıkış üreten bir işlevi olan bir 'yama' oluşturmamız gerekiyor. Yeni yamalar listesini getirmek için boş gri alana çift tıklayın ve 'etkileşimi' arayın. Yamanızı yerleştirin ve ekranda görünmelidir.

04. Etkileşimleri katmanlara bağlama

Change the patch properties so that it only responds when you click in the right place — Yama özelliklerini değiştirin, böylece yalnızca doğru yere tıkladığınızda yanıt verir.

Şu anda, yamanız prototipin herhangi bir yerine dokunmaya cevap verecektir. Tıklayın ve 'Aşağı' ve 'Tap' özelliklerini gerçek zamanlı olarak değiştirerek test edersiniz. Yamadaki 'Katman' özelliğini seçerseniz, onu kalp görüntüsünü içeren katmana bağlayabilirsiniz ve şimdi yalnızca bu belirli bir alandaki tıklamalara cevap verecektir.

05. Animasyonlar

A pop animation will give users a bit of visual feedback — Bir pop animasyonu, kullanıcılara biraz görsel geri bildirim verecektir.

Şimdi etkileşimimiz tetiklerken bir şeyin olmasını istiyoruz. Başka bir yama oluşturun, bu sefer bir 'pop animasyonu'. Bu, bir yaylı etki yaratmak için kullanılır. Özellikleri şimdilik olarak bırakın, ancak daha önce oluşturduğumuz etkileşimin dokunma çıkışı ile yeni POP animasyonumuzun sayı girişi arasında bir bağlantı oluşturacağız. Bunu, her birinin yanındaki küçük daireler arasında tıklayarak ve sürükleyerek yapıyoruz. Şimdi kalbi tıklarsanız, şimdi etkileşimin POP animasyonunun 'ilerleme' çıktısında bir değişikliği tetiklediğini göreceksiniz.

06. Geçişler

You can change the extent to which objects change size when they're clicked — Hangi nesnelerin tıklandığında boyutunu değiştirdiğini değiştirebilirsiniz.

İhtiyacımız olan bir sonraki şey bir geçiş yamasıdır. Bu, POP animasyonunun ilerleme çıkış değişikliği olarak arasında hareket etmek için düşük ve yüksek değerler belirlememize izin verecektir. Origami'nin tıklandığında yeniden boyutlandırmasını söylemek için geçişin çıkış değerlerini Kalp Görüntü Katmanının Ölçek özelliğine bağlayabiliriz. Şimdi kalbe tıkladığınızı bulmalısınız, boyut olarak kısa bir değişikliği canlandırmaya neden olur. Ancak tam olarak doğru değil, çünkü hemen normalden geri döndüğü için.

07. Anahtarlar

Use switch patches to toggle objects between different states — Farklı durumlar arasındaki nesneleri değiştirmek için anahtar yamaları kullanın

Anahtar yamaları Origami'nin iki eyalet arasında geçiş yapmanın yoludur. 'Gibi' düğmemiz için istediğimiz şey bu. Bir anahtar yamasına geçilen bir giriş, daha sonra sonraki yamalara bir çıktı olarak iletilebilen 'açık' ve 'Kapalı' durumları arasında çevirebilir. Yeni bir anahtar oluşturalım ve etkileşim ve pop animasyonu arasında yerleştirelim. Daha sonra küçük ve büyük devletler arasında geçiş yapmak için kalbi tıklamanız gerekir.

08. Daha karmaşık davranış

By experimenting with patches you can add more complex behaviour to your prototype — Yamalar ile deneme yaparak prototipinize daha karmaşık davranış ekleyebilirsiniz.

Tebrikler! Şimdi, sizi tekrar kullanacağınız en yaygın yamaları kullanarak ilk etkileşimli özelliğinizi oluşturdunuz. Daha karmaşık davranış oluşturmak için daha fazla yama ekleyebiliriz. Doğrudan akımımızın arkasında farklı bir renkli kalp tabakası oluşturalım, ardından hem aynı anda ölçeklenecek yeni yamalar ekleyelim ve orijinal katmanımızın opaklığını değiştirin, böylece görünür hale getirilir. Şimdi, kalbe dokunduğunuzda, daha büyük ve daha küçük geçiş yapılır, aynı zamanda rengi değiştiriyor gibi görünür.

09. Carousel

It's time to bring on all the cats — Tüm kedileri getirmenin zamanı geldi

Prototipimizi bitirmek için, kullanıcıların 'beğenmesine izin vermek istediğimiz kedilerle bir resim atlıkarınca ekleyelim. Bunu yapmak için önce bir grup katman eklememiz gerekir. Her görüntü, öne çıkan X koordinatlarını artan bir şekilde dengelendiren ayrı bir katman olacaktır, böylece esasen herhangi bir öğede ekranda görünür olarak bir araya getirin.

10. Sola ve sağa kaydırın

Follow these steps to add a classic swiping action to your carousel — Carouselinize klasik bir kaydırma işlemi eklemek için şu adımları izleyin

İş yapmak için yapmamız gereken son şey, atlıkarınca kaydırmak için sol ve sağdaki kaydırıcıların sağlanmasıdır. Bunu atlıkarınca katman grubuna (bireysel görüntüler değil) bağlamak için bir kaydırma etkileşimi oluşturarak yapıyoruz. Etkileşim, daha sonra hareket ettirmek için atlıkarıncın X özelliğine bağlanabileceğimiz bir X koordinatını verir. Arada, arada, atlıkarın kenarının dışındaki koordinatlara kaydırmamızı sağlamak için değerleri sınırlamak için kullanılabilecek bir klip yama ekleyeceğiz.

11. Sonraki Adımlar

Now you've learned the basics you can add more advanced features — Şimdi daha gelişmiş özellikler ekleyebileceğiniz temel bilgileri öğrendiniz

Bu kadar. Çok temel bir uygulama yarattınız. Origami Studio'yu, profesyonel bir bitişi vermeye yardımcı olabilecek bir cihaz arka planına yerleştirmek için 'çerçeveleri' olarak da kullanabilirsiniz. Artık, yamaları kullanmanın temellerini aşina olduğunuzda, daha gelişmiş davranışlar oluşturmaya başlayabilirsiniz. Origami Studio web sitesinde, uygulamalarda yaygın olarak görülen popüler işlevselliklerin nasıl uygulanacağını açıklayan birçok rehber var.

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi Web Tasarımcısı'nın 270. sayısında yayınlandı. Sayı 270 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

2018'de uygulama tasarımını şekillendirecek eğilimler
Bir web sitesi prototipi oluşturmanın en iyi yolu
Mockup'lar, tel kafesler ve prototipler hakkında bilmeniz gereken tek şey

Origami Studio ile bir mobil uygulamayı prototip nasıl yapılır

01. Yeni bir prototip

02. Katman ekleme

03. Bir Etkileşim Oluşturma

04. Etkileşimleri katmanlara bağlama

05. Animasyonlar

06. Geçişler

07. Anahtarlar

08. Daha karmaşık davranış

09. Carousel

10. Sola ve sağa kaydırın

11. Sonraki Adımlar

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

'inde Bio'nuzdaki yazı tipi nasıl değiştirilir

WordPress sitelerini nasıl hızlandırır ve optimize edilir

Karakter sanatınızı nasıl geliştirilir

Afinite Tasarımcısı: Kalem Aracı Nasıl Kullanılır

Photoshop'ta gerçekçi dalgalar nasıl boyanır

Khroma ile sonsuz renk paletleri oluşturur

Houdini'de çarpıcı manzaralar oluşturun

Afinite Tasarımcısı ile Retro Logo Nasıl Oluşturulur

Kategoriler