Lo-fi (etkileşimli olmayan) UI prototiplerini nasıl oluşturmalıyım?

Şu anda, kısmen gereksinimleri toplamak ve kısmen de son kullanıcı arayüzünü tasarlamak için bazı temel prototipleri bir araya getirmeye çalışıyorum.

Şu anda Post-it notları kullanarak, bilgi için sarı notlar ve eylemler için pembe (düğmeler veya menüler) kullanarak ekranı oluşturmaya çalışıyorum. Fikir kolayca taşıyabilir, kaldırabilir ve bilgi ekleyebilirsiniz. Ama eminim orada daha verimli yöntemler var.

Geliştiricilerin etkileşimli olmayan UI prototiplerini verimli bir şekilde oluşturmaları için önerilen yol nedir?

Ve neden?

Bazı kalem, kağıt ve Post-it not versiyonlarını denedim ve kurşun balon gibi düştüler (muhtemelen çizim becerilerim). Sonunda şimdiye kadar çoğu kullanıcı tarafından sevilen ve prototip olduğunu Balsamiq kullandım . Ne yazık ki, bazı insanlar hala ilk bazı uygulamanın bazı lo-fi prototipleri aracılığıyla ne yapması gerektiği hakkında bir fikir alması ve gerçekten bir şey taahhüt etmeden önce "ekranda bir şey görmek" fikri ile ilgili sorunlar yaşıyor.

Beyaz tahtayı tercih ederim.

Her şeyi yeniden çizmeden karar verirken değiştirmeyi kolaylaştırır. Diğer (yakındaki) geliştiricilerle paylaşmak kolaydır. Yapışkan notlar veya diğer renkler kullanarak açıklama eklemek kolaydır.

Balsamiq maketleri genellikle ilk çağrı limanıdır, neredeyse bir kalem ve kağıt kullanmak kadar hızlıdır ve tekrar kullanılabilir.

Ayrıca, örneğin sayfaları birbirine bağlayarak isterseniz bir dereceye kadar etkileşim ekleyebilirsiniz.

http://balsamiq.com/

Kurşun Kalem Projesi , güzel ve basit maketler yapan bir Firefox eklentisidir.

Kurşun Kalem, masaüstünden mobil platformlara kadar farklı kullanıcı arabirimi türlerini çizmek için çeşitli yerleşik şekiller koleksiyonu sağlar. 2.0.2'den başlayarak Pencil, Android ve iOS UI şablonlarıyla önceden yüklenmiş olarak gönderilir. Bu, basit bir kurulumla uygulamaları prototiplemeye başlamayı daha da kolaylaştırır.

Çizim işlemlerini kolaylaştırmak için Kurşun Kalem'de popüler çizim özellikleri de uygulanır ...

MS Paint ve Visual Studio'nun bir birleşimini kullanıyorum. İstediğim tüm kontrolleri bir forma sürükleyip bırakmak için VS'yi kullandım, sonra göründüğü gibi olana kadar yeniden düzenlemek için MS boyasına ekran görüntüsü aldım.

Bu şekilde, kullanıcı arayüzümü taklit etmek için basit, tanıdık, ücretsiz ve her zaman erişilebilir araçları (benim için) kullanabilirim ve istemci, uygulama bittiğinde muhtemelen kullanıcı arayüzünü görebilir. Buna ek olarak, çoğu zaman VS benim için projemin başlangıcını içerir.

Düzenleme: Toby'nin cevabı beni Balsamiq'e götürdü ve bu şimdi UI maketleri için diğer insanlara sunmak için tercih ettiğim birincil araçtır.

Hala arada sırada MSPaint veya kalem / kağıt çekiyorum, ancak genellikle sadece kendi referansım için temel UI tasarımını çizdiğimde veya müşteriye tamamlanmış bir ekran için iki seçenek sunmak istersem (ör. " Burada veya Burada düğmeleri ister misiniz? " )

İyi yöntemler kullandığınız anlaşılıyor, ancak insanların hızlı prototipleme yöntemini kabul etmelerini sağlayarak direnişe giriyorsunuz. Herkes kodlamayı sever, ancak yarım saat içinde JScrollBars ile savaşıyorlarsa ve 12 model oluşturduysanız, bu araçların gücünün hızlı yinelemede olduğunu anlayabilirler .

Bununla birlikte, çeşitli düşük fi yaklaşımlarının farklı güçlü yönleri vardır:

• Beyaz tahta prototipi kullanışlıdır, çünkü herkes katılabilir ve fikirlerin temel alınmasına yardımcı olur, ancak bu sadece bir tartışma aracıdır. Bir tasarımda yineleme yapacaksanız, sadece eski işaretçiyi silmek zorlaştığı için bir adım daha ileri bir şey istiyorsunuz. ;)

• Kağıt prototiplemesi faydalıdır, çünkü insanlar bunun kalıcı ve değişime açık olduğunu anlar ve hızlı bir şekilde tekrarlayabilir ve yine de çok iyi sonuçlar alabilirsiniz. Bir kağıt prototip üzerinde bazı kullanıcılarla kullanılabilirlik testi yapın ve bir tasarım hakkında çok hızlı bir şekilde, oldukça düşük maliyetle harika geri bildirim alabilirsiniz. İnsanlar arayüzü kağıt üzerinde görebiliyor ve hissedebiliyorlar.

• Balsamiq , hızla yeniden kullanılabilir kağıt prototipleri yapmak için bir kısayoldur. Ekran görüntüleri yazdırıyorum ve bunları kağıt prototipleri olarak kullanıyorum. Ben de kullanmak sırasında beyaz tahta prototip benzer - biz onları olduğu gibi fikirler kadar yardım taklidinin toplantılar. Bunun için Visio ve OmniGraffle kullandım.

• Kes ve yapıştır prototipleri mevcut bir tasarımda yineleme yapmak için iyidir - bir ekran görüntüsü alın, bir görüntü düzenleyicide doğrayın ve yeni kontrollerle karıştırın ve eşleştirin (Balsamiq veya başka bir yerden). Bir kez daha hedefiniz, prototipin hızlı bir şekilde yinelenmesi, iyi görünen bir şey değil.

Kullanıcılarla asla prototip yapmam. Sahip olduğumuz kullanıcı verilerine dayanarak tasarım ekibiyle yapıyorum. Kullanıcılar tasarımcı değildir ; Onlara tasarımcı olarak davranırsanız, sulu domates sosu, acı kahve (teşekkürler Malcolm Gladwell) ve Homer arabasıyla sonuçlanırsınız. Tasarımınıza kullanıcı girdilerini toplayın ve tasarımı tasarım ekibiyle hassaslaştırmak için kullanın.

İlk maketlerim her zaman kalem ve kağıt veya beyaz tahta, ancak temel bilgiler çivilendiğinde genellikle HTML'ye geçiyorum. "Header", "Banner", "Image", "Chart" ve benzerlerini söyleyen bir grup yer tutucu resmim var. İşleri biraz akılcı bir şekilde ortaya koymak için basit bir CSS ve işim bitti. Bir kontrole bağlı küçük bir JS, size işlevsellik benzemesi verebilir ve insanlar sadece "daha iyi" gibi görünüyorlar.

Bununla ilgili tek sorun muhtemelen dünyanın en kötü yaşayan UI tasarımcısı olduğum ve bazen insanlara sadece gereksinimleri topladığımı, tamamlanan şeyin nasıl görüneceğini göstermemek gerektiğini hatırlatması gerektiğidir. Sık sık arka planı pembeye ya da başka bir şeye ayarladım, bu yüzden "Pembe olması gerekiyor mu?" "Bu sadece bir model, gerçek şey farklı görünecek" (ya da "Bunu tasarımcıyla tartışmanız gerekecek") ile karşı koyabilirim.

Önce kalem ve kağıt kullanıyorum, sonra UI'yi birkaç hızlı çizim yaptıktan sonra, 2 veya 3 kez powerpoint yapmaya çalışıyorum. Gerçek düzenleyiciye girmeden önce 5 veya 6 yinelemeye sahip olmak, kullanılamaz UI'leri kısaltmama yardımcı olur (kullanıcı henüz X'i görmediğinde X metin kutusuna dayalı Y içeriği oluşturmak gibi). Bunu aptallardan hemen kurtulmak için bir fırsat olarak görüyorum.

Kalem ve kağıt / beyaz tahta ve ayrıca Visio veya benzeri bir şey kullanabilirsiniz (Visio, ortak kontroller için UI şablonlarıyla birlikte gelir). Bazen elimizdeki mevcut (benzer) kullanıcı arayüzünün çekimlerini alıp yeni kullanıcı arayüzünü Paint.NET gibi bir boya programı kullanarak kesip yapıştırıyorum.

Delphi'de birkaç kez hızlı prototipleme yaptım. Powerpoint veya visio'dan çok daha hızlı bir ekran düzenini çok hızlı bir şekilde bir araya getirmeyi kolaylaştırır. Ortaya çıkan exe, herhangi bir bağımlılık gerektirmeden e-postalara eklenebilir. Web uygulamalarını prototiplemek için kullandığım için, prototipi yarı bitmiş bir sürümle karıştırmanın tehlikesi yoktur.

Aynı şeyi Sencha Ext Designer ile yapmaya çalıştım, ancak Ext JS'nin düzen sistemini kullanmak daha zordur ve fikirleri hızlı bir şekilde yinelemek için bir kolaylıktan daha fazla bir yük gibi hissettim.

Her zaman aynı yaklaşımı kullanmam. Kullandığım tekniklerden bazıları (kabaca sıklık sırasıyla):

• Beyaz tahta (etkileşimli olarak prototip oluşturmak / tartışmak için. Daha sonra bir fotoğraf çekin!)

• RAD tarzı GUI tasarımcısı (Visual Studio, NetBeans, Delphi)

  • Bu konuda iyi olun ve aslında "windows, widget ve formlar" uygulamasının prototiplerini oluşturmanın en hızlı yollarından biri haline gelebilir. Bonus: Prototipler, ne kadar hızlı bir şekilde attığınıza bağlı olarak gerçekten oldukça profesyonel görünebilir. Bazen bir prototip onaylandıktan sonra gerçek şeyi yaratmak için bir başlangıç ​​noktası olarak hizmet edebilirler.
    
    

• Kağıt ve kalem / kurşun kalem (genellikle kendime beyin fırtınası yapmak için)

• Diskteki statik HTML / CSS / JS dosyaları

  • Bir WYSIWYG tasarım uygulamasının burada incinmeyeceğini düşünürdüm, ancak genellikle sadece ham HTML'yi hacklerim. Zaten bunların çoğunu yapmıyorum.
    
    

• Vektör çizim araçları - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Raster grafik araçları - Photoshop / Gimp

• ASCII sanatı ;-)