it-swarm-tr.com

Hangi prototipleme araçları?

Bu, aşağıdaki soruya yoğun bir şekilde bağlanmaktadır:

Ancak önerileri "Web Tabanlı" araçlarla sınırlamak istemedim, geçmişte prototipleme, tel çerçeve oluşturma ve maketler için aşağıdaki araçları biraz başarılı buldum ve kullandım:

Ayrıca bazı tasarımcıların görev için Photoshop ve Illustrator gibi grafik uygulamalarını kullanmayı seçtiklerinin farkındayım.

Bu bir Topluluk Wiki sorusudur, bu yüzden düşüncelerinizi paylaşın, topluluğun bu araçlar hakkında nasıl hissettiği hakkında bir fikir oluşturabilmemiz için her cevap için bir pakette tutmaya çalışın.

34
Richard Slater

Animasyonla ayrıntılı etkileşimleri anlamaya çalışıyorsam, prototipimi en az iki iş parçacığında ve üçünde tutmak benim için önemlidir.

Konu 1: Akış, işlev, form ve veriler

  • Kağıt üzerinde başlamak (aslında başkalarıyla bir beyaz tahta tasarım oturumu). Ekran akışına, daha sonra özellikle önemli ekranların ana işlevlerine ve potansiyel düzenlerine odaklanın. En az iki farklı fikir deneyin.
  • Balsamiq'te bir sonraki sadakat seviyesi. İşlevsel ayrıntılar ekleyin, düzeni ayarlayın, ekrana somut, anlamlı örnek veriler ekleyin (gösterilebilir bir senaryo bağlamında).
  • Adım adım dizilen bir iş akışı prototipi, ekranlı tek yol senaryosu ve sonraki ekrana geçmek için beklenen etkileşimler oluşturun. Tüm ekran modellerini sırayla koyarak PowerPoint'i kullanma eğilimindeyim. Bu prototip, kavramları, iş akışlarını, fonksiyonel gereksinimleri, terminolojiyi vb. İyileştirmek için çok etkili olan çoğulcu gözden geçirmeler ile gerçek kullanıcılarla erken geri bildirim almanızı sağlar.
  • Erken, sık ve hızlı bir şekilde tekrarlayın.

Konu 2: Görsel program ve stil

  • İş parçacığı 1'deki temel maketlerden bazılarını kullanarak Photoshop veya benzer bir mekanizma kullanarak piksel düzeyinde ayrıntılı olarak görselleştirin (kompozisyon olarak). Renk, oran, görsel metaforlar, tipografi vb. Keşfedin. En az 3 fikir üretin.
  • İş akışı prototiplerinden bağımsız olarak bunlarla ilgili geri bildirim alın. Tercih testi, AB testi, eleştiri, karakter sayısı vb.
  • Tekrarlayın ve geliştirin.

Konu 3: Ayrıntılı etkileşim ve animasyon

  • Tek bir ayrıntılı etkileşime veya animasyon dizisine odaklanmak, sizin için en uygun araçlarda işlevsel bir prototipi bir araya getirir: HTML/CSS/JS, Flash, alt düzey programlama dilleri, UI bileşen çerçeveleri/kütüphaneleri, vb. En az iki alternatif etkileşim .
  • Zamanlama verisi toplama dahil az sayıda kısa kullanılabilirlik testi yapın. Karşılaştırmalı testler yapın. Tuş vuruşlarını/fare tıklarını/hareketleri sayın.
  • Tekrarlayın ve geliştirin.

Özetle, belirli soruları cevaplamak için özel amaçlar için özel tür prototipler oluşturun. Hiçbir durum tüm durumlar için çalışmaz. Estetik kaygıları iş akışı/işlev geri besleme döngüsünden uzak tutun. Farklı soru türleri için uygun ve etkili yöntemler kullanın. "Akarsuları geçme."

Neredeyse tüm temel tasarım geliştirmelerinin iş parçacığı 1 ve iş parçacığı 2'den geldiğini gördüm, ancak standart kontrollerin ötesine geçiyorsanız veya alan adınız yeni/karmaşık/spesifikse (örneğin, hareket etkileşimleri, çok boyutlu model) manipülasyon, fantezi yeni bir işletim sistemi için özel kontroller, bazı boyutlarda insan performansını optimize eder).

35
Jim Jarrett

Kurşun Kalem kullanıcı arayüzü maketleri oluşturmak için iyi bir araçtır. Firefox addon veya bir bağımsız uygulama olarak kullanılabilir.

alt text

Bahsedilen diğer bazı araçlara göre bir avantajı vardır, çünkü eğer serbest ve açık kaynak ise.

12
david4dev

Bir süre önce "Eskiz çizmek ya da çizmemek" olarak adlandırılan çok ilginç bir makale okudum - bir göz atmalısınız: eskiz sorus Ne zaman yaratıcılık gerektiğinde düşüncelerinizi araçlarla sınırlamamalısınız kullan. Daha sonraki temizlikler için kişisel tercihim, ele aldığım bölgeye yakın bir araçtır. HTML/CSS için genellikle basit mizanpajlarla başlarım ve ayrıntıları adım adım arttırırım. Aynı şey diğer alanlar için de yararlı olabilir. Düşükten yükseğe doğru prototipleme. Bu yüzden tavsiye edecek özel bir aracım yok ... duruma göre değişir.

Bu yüzden tavsiye etmek için özel bir aracım yok ... buna bağlı .

10
Daniel Bleisteiner

Şahsen Balsamiq'i ilk birkaç düzeltme için kullanıyorum ve sonra Blueprint gibi bir CSS çerçevesi kullanarak doğrudan bir HTML prototipine gidiyorum.

8
Michael Warkentin

İlginç olan Adobe Fireworks bu sitede çok az sevgi kazandı.

Diğer şeylerin yanı sıra,

  1. Farklı eyaletlerde bina
  2. Kalıp sayfalar
  3. Bağlantılar ve simgeler gibi HTML nesnelerine dışa aktarılacak işaretleme verilebilir (iç ve dış bağlantılar, meta veriler, tüm bu iyilikler)
  4. Gerçek stil sayfalarıyla standartlara uygun, CSS tabanlı mizanpajları dışa aktarır
  5. Logolar vb. İçin yerel Illustrator ve Photoshop entegrasyonu.

Balsamiq'i bir müşteriye bir IA sunması, sonra bir tasarımcı işbirliği yaptıktan sonra gezilebilir bir prototip için Fireworks'ü seviyorum. Fireworks uygulamasında yapılan çalışma, tam bir statik siteye veya dinamik bir site için şablon sayfaları/temalar olarak kolayca dönüştürülebilen HTML ve CSS'ye kolayca aktarılır.

8
Matt

Sadece kağıdın en iyi prototip aracı olduğunu söyleyeceğim. Evet, belli, ama elektronik başlatmaktan daha iyidir.

  • Paper, müşteriye bunun bir fikir olduğunu ve birçok olası fikirden biri olduğunu söyler.
  • Kağıt, istemcinin yazı tiplerine, renklere, şekillere veya görüntülere takılmasına izin vermez. Balsamiq'in eskiz stili tel kafesleri seçmesinin bir nedeni var.
  • Düzeltmeler hızlı
  • Gerçek el yazısını almak kolaydır ve üzerinde çizim yapmaktan korkmaz.
  • Elektronik olması için tarayabilir veya fakslayabilirsiniz.

Ben sonra html fonksiyonel prototipleri büyük bir hayranıyım, ama kağıt beyin fırtınası ve hızlı koridor ui testleri.

Birini bir kağıt taslağında yürümek kolaydır:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Eskizlerle başlamaz ve kullanıcı doğrulaması yaparsanız, silahı atlarsınız ve daha sonra geri almak ve tekrarlamak daha pahalı olur.

5
MattK

HTML/CSS'de Web UI maketi yapmayı tercih ederim.

  1. İşlevsel prototip oluşturma çok daha iyi bir çözümdür, çünkü kullanıcılar boyutsuz (Photoshop'a bakarken) deneyimden ziyade gerçek bir deneyim kazanırlar.

  2. Fonksiyonel prototipler işe yaramaz bir iş değildir.

  3. Bir geri bildirim döngüsü sırasında işlevsel bir prototip üzerinde yineleme yapmak çok daha hızlı

4
abrudtkuhl

Axure kullanıyorum.

Oldukça pahalı olmasına rağmen (lisans başına neredeyse 600 $) inanılmaz esneklik sağlar ve neredeyse her şeyi özelleştirmenizi sağlar.

Bir web sitesi yerine uygulama oluştururken kendi kontrollerinizi (veya maketlerini), ustalarınızı vb. Kullanabilmek zorunludur.

4
Dan Barak

Kağıt ve HTML en iyisidir.

Kağıt üzerinde hızlı çizimler. Ardından HTML'de gerçek şeyi oluşturun. StaticMatic bağlantı metni prototip oluşturmak için mükemmeldir.

Geçmişte Axure kullandım, ancak tel çerçeve oluşturma zaman kaybıdır.

3
Miki

Ayrıca Axure için oy verirdim. Ofisimiz, işbirliği araçlarını IA'lar ve Grafik tasarımcılarımız arasında sorumlulukları ayırmak için kullanır.

Omnigraffle olmasa da, tel çerçeve seçenekleri fazlasıyla yeterli. Yazılımın büyük usta işlevselliği vardır, bu yüzden bir prototipin sadakatini oldukça hızlı bir şekilde toplayabiliriz.

Dan'ın dediği gibi, tamamen özelleştirilebilir ve profesyonel şartname dokümanları yapar.

r.

3
Robert Hamburger

Adobe InDesign. Biraz garip görünebilir ama sevdiğim özellikler var:

  • Adobe tarzı arayüz. Photoshop veya diğer bazı Adobe ürünleriyle çalışsaydınız, InDesign'a geçmek çok kolay olurdu
  • tipografi, tablolar, stiller, ızgaralar vb. ile çalışmak için güçlü araçlar
  • aslında sadece bir tel kafes değil, aynı zamanda bir grafik tasarım da oluşturabilirsiniz.
  • tel kafesleri tıklanabilir PDF olarak dışa aktarabilirsiniz
3
Kostya

Yukarıdaki amswers bazı katılıyorum ama bazı ekstra bilgi ve ipucu eklemek istiyorum. Neredeyse her projeye beyaz tahta, farklı renklerde kalemler ve bazı post-it ile başlıyorum. Fikirleri iletmenin ve hızlı geri bildirim almanın en kolay yolu. Proje türüne bağlı olarak ana akış şemalarını yEd adlı bir programla çizmeye çalışıyorum. Fikirleri yapılandırmamın basit bir yolu. Yakınımda bir mac varsa OmniGraffle (akış şeması daha fazla için olağanüstü bir program) seçiyor.

Farklı türdeki düşük-fi ve hi-fi prototipleri elde etmek için Balsamiq , Çizim akışı ve Illustrator 'da prototip yapmaya devam ediyorum.

Bu bilgilerle ilgili olarak, aralarından seçim yapabileceğiniz zengin bir araç kutusuna sahip olmayı uygun buldum. Projenin türüne bağlı olarak farklı yaklaşımlar benim için önemli.

2
Anna

Daniel Bleisteiner'ın hareketini ikinci olarak: "Değişir."

Projelerin% 90'ı için kağıt için oyumu düşünün. Bu iş parçacığında kağıt için gerekçe bol, bu yüzden tekrarlamak istemiyorum.

Tasarım asla projeler arasında aynı değildir ve kesinlikle müşteriler arasında değildir. (Tasarımdan en belirsiz anlamda bahsediyorum, yani tasarım, geliştirme, prototip oluşturma, tel çerçeve oluşturma - dürüst olalım, hepsi yavaş yavaş birbirleriyle birleşiyorlar.)

Dolayısıyla, projelerin diğer% 10'u için, prototipleme aracı projeye bağlı olacaktır. Uzun mesafeli işbirliği gerektiriyorsa, Axure en iyisi olabilir. Öncelikle Adobe kullanan bir müşterinin dahili ekibiyle çalışmayı gerektiriyorsa, Fireworks en iyisi olabilir. Birçok araç var. Ne yazık ki, tanım gereği, araçlar çözmek için oluşturdukları sorunlar kadar çabuk adapte olamazlar; bu nedenle, bu ürünlerin birçoğu birbirine çok benzer, ancak tam olarak aynı görünmemektedir. Ve iş için hangisinin en iyi olduğunu değerlendirmek bize kalmış.

Ek düşünce: iPad, bizzat müşteri işbirliği ile bizzat müşterinin omzunu izlemesi arasındaki çizgilerin bulanıklaşmasına yardımcı olmaya başlıyor. Omnigraffle, SketchBook, TouchDraw, Draft ve diğer iPad uygulamaları, geliştirilmiş bir işbirliği deneyiminin yolunu açıyor. (Bir müşterinin bir iPad'de kağıda olduğu gibi rahat bir çizim yapmanın nihai hedefine doğru çalışmak gibi bir iyileştirmeden bahsediyorum, bunun avantajı, istemcinin statik bir sayfa yerine işlevsel bir prototip kullanmasıdır. nihai hedef sadece benim düşüncem.)

2
Tyler Hayes

Bu adımları takip ediyorum ...

1. Prototipleme. Balsamiq Mockups kullanıyorum çünkü çok kolay. Prototiplemenin asıl amacı, şeylerin temel düzenini bulmaktır. Bu, ciddi değişiklikler yaptığınız aşamadır. Neyse ki Balsamiq, olmadığı bir şeymiş gibi davranmaz ve kullanımı son derece kolay kalır. Balsamiq'i kullanmak benim için çizmekten daha hızlı. Ve öğeleri silmek ve yeniden çizmek yerine ekran boyunca sürükleyebilmenin yararı ile birlikte gelir.

2. Tasarımı sonlandırın. Bunun için Photoshop ve bazen küçük bir Illustrator kullanıyorum, böylece herhangi bir kod yazmadan önce grafikleri mükemmelleştirebiliyorum.

Piksel mükemmelliğiyle taşınmaya eğilimli olduğumuz için Photoshop'ta tasarımınızda köklü değişiklikler yapmak daha zordur. Ve uygulamanızda bir kez daha zor. İlerlememin nedeni bu ve neden mümkün olan en kolay araçla başlıyorum ... Balsamiq.

2
Steve Wortham

Ben eskiz defteri/kalem-ilk ve Balsamiq - ikinci tür bir adamım. Daha sonra, HTML ve CSS'ye atlamak için yeterli olana kadar detayları temizlemek için Photoshop.

1
blackant

Balsamiq. Masaüstü tabanlı yazılımlar için de iyidir ve öğrenmesi çok kolaydır.

1
franz976

Ayrıca kontrol etmeye değer gomockingbird Bu sadece beta'dan geliyor

1
Paul McKeever

Eşimin interaktif ajansı şu konularda başarılı oldu:

http://www.mockflow.com/

Hızlı başlangıç ​​ve prototipler ve tel kafesler için makul miktarda yerleşik kontrol ve ekran.

1
noluckmurphy

Soru, bir prototipleme aracının gerekliliğinden bahsediyor, ancak prototipinizin ne kadar gerçekçi olması gerektiğinden bahsetmiyor. Yarım yamalak, tel kafes tipi bir prototip için, çoğu yorumda kalem/kağıt, Balsamiq ve hatta Visio'nun iyi araçlar olduğunu kabul ediyorum. Ancak, daha gerçekçi görünümlü bir prototip gerektiğinde bunlar yapmayacak ve sonra Axure veya Adobe Fireworks/Catalyst (iRise fiyatlandırmanın çok üzerinde) gibi şeylere bakmanızı öneririm ve sorunları olsa da Axure için gideceğim .

0
Geert

Bazı dezavantajları olmasına rağmen Pencil'ı da kullanıyorum:

  • no Tablo Veri İşleme: Bir tabloyu tel kafes yapmak istiyorsanız, kaybolursunuz.
  • metin kutularında WordWrap yok. Bazı lorem ipsum yerleştirmeye çalışırken, sargıyı kendim yapmak zorundayım. Bu berbat.

ancak, bu aracı çok seviyorum.

0
cukabeka

Bazen bu aracı kullanıyorum http://www.hotgloo.com/

0
512x512

Sorunuz özellikle prototipleme ile ilgili olduğundan, eskiz gibi prototiplemeden önce gerekli gördüğünüz adımları yaptığınızı varsayıyorum.

Ürününüz Web üzerinden teslim edilecekse, prototiplerinizi Web'i (HTML, CSS, JS) kullanarak oluşturun. Sonunda, kullanabileceğiniz her şeyden daha hızlı, daha ucuz ve daha doğru. Axure gibi araçların basit şeyler için iyi olduğunu gördüm, ancak daha sonra orta derecede karmaşık bir şey yapmak için dik bir öğrenme eğrisi gerektiriyor. Bu noktada, uzun vadede size daha faydalı olacak Web standartlarını öğrenirken özel bir araç öğrenmek için zaman harcıyorsunuz.

Bir müşterinin "bittiğini" düşünmesinden endişe ediyorsanız, stilin sonuna kadar dışarıda kalabilirsiniz, ancak prototipinizin ne kadar "gerçek" olduğunu, daha kolay değerlendirildiğini buldum.

0
Craig Villamor

Gerçekten projenin ne olduğuna bağlı.

Prototiplediğiniz web sitesi statik içeriğe sahip sadece birkaç sayfa olacaksa, Photoshop veya Fireworks gibi bir grafik düzenleyici kullanmak muhtemelen iyi olacaktır. Tasarım öğelerini "ne pahasına olursa olsun" prototiplemekten uzak tutma tavsiyesi burada uygun olmayabilir.

Ancak, birçok kullanım örneğiyle büyük bir uygulama oluşturduğunuz spektrumun diğer ucunda, Jim Jarrett'ın cevabı gibi bir şey öneriyorum. Büyük ölçekli uygulamaların yinelemeli bir süreç olduğunu (veya en azından olması gerektiğini) ekleyeceğim: Faz I için prototip ve daha sonra faz II sürümü için prototip yapacaksınız. Prototiplemenin bu aşamalarının her biri farklı detay seviyeleri gerektirebilir . Sonunda mevcut aşamanın yapısından/prototipinden çalışmak isteyebilirsiniz veya ilk ilkelere dönüp sıfırdan başlamanın zamanı gelmiş olabilir.

0
skybondsor

Axure harika bir tel çerçeve/prototipleme/şartname aracıdır. Oluşturduğunuz şeylere odaklanmanızı sağlar ve ek açıklamalar, notlar, etkileşimler gibi şeyleri belirtmeyi çok kolaylaştırır.

Artı, etkileşimleri belirttiğinizde, tel çerçevelerinizden prototipler oluşturduğunuzda, bu etkileşimlerin gerçek çalışma widget'larına dönüşmesidir. (Axure HTML prototipleri üretir)

Ayrıca bir ekran tasarımı (örneğin JPEG'de) görüntüyü alabilir, "görüntü haritası" aracını kullanarak görüntünün alanlarını etkinleştirebilir ve daha sonra daha yüksek doğrulukta bir prototip elde edebilirsiniz!

Axure ayrıca değişkenlere dayalı eylemler oluşturmanıza izin verir (bunları ayarlayabilir veya okuyabilirsiniz). Ayrıca, bir etkinlik oluşturmak için bir pencere öğesi alma kavramı da vardır, etkinliği başka bir pencere aracının dinlemesini ve ardından bu pencere öğesinin bir şekilde yanıt vermesini sağlayabilirsiniz.

Ben gidip gelebilir ... Aşağı tarafı maliyeti ~ 550 $, ama zaman tasarrufu tamamen buna değer. E-posta yoluyla müşteri destekleri harika; genellikle birkaç saat içinde bana geri dönüyorlar ... bazen derhal.

0
milesmeow

Mockingbird'ü basit tel çerçeveler için iyi buldum. Yakında her zaman omnigraffle'dan ayrılmama izin vermeyecek, ancak web tabanlı bir araç için oldukça iyi: http://gomockingbird.com/

0
fluxd

İhtiyacınıza uygun olup olmadığını görmek için App Sketcher (şu anda sürüm adayı) 'na bakın. Tel kafes ve etkileşimli web uygulama prototipleri oluşturmak için hızlı bir HTML prototipleme aracıdır. HTML bileşenleri, jQuery UI bileşenleri, web widget'ları (Google Haritalar ve YouTube oynatıcı gibi) ekleyebileceğiniz ve bunları jQuery teması ve CSS özellikleri ile şekillendirebileceğiniz tasarım yüzeyi olarak katıştırılmış bir WebKit tarayıcısı kullanır. Basit eylemler de tanımlanabilir. Kullanıcılar, prototipi varsayılan tarayıcılarında çalıştırabilir/test edebilir ve tasarımdan memnun olduklarında HTML/CSS/JavaScript kaynağını dışa aktarabilir. Bu araç, Axure benzeri bir deneyime daha çok yöneliktir, ancak maketlerin/tel çerçevelerin web teknolojileri ile geliştirme aşamasında gerçekleştirilmesini sağladığından "tarayıcıda çalışmak için tarayıcıda tasarım" a vurgu yapın.

Bu uygulamanın geliştiricisiyim. Bu utanmaz öz tanıtım için çok üzgünüm. Yine de, iyi bir HTML prototipleme aracı ve bir göz atmaya değer olabileceğini düşünüyorum.

0
Feng Chen