it-swarm.asia

Alat prototyping yang mana?

Ini sangat terkait dengan pertanyaan berikut:

Namun saya tidak ingin membatasi saran untuk alat "Berbasis Web", saya telah menemukan dan menggunakan alat berikut untuk membuat prototipe, wireframing dan maket di masa lalu dengan beberapa keberhasilan:

Saya juga sadar bahwa beberapa desainer memilih untuk menggunakan aplikasi grafis seperti Photoshop dan Illustrator untuk tugas itu.

Ini adalah pertanyaan Wiki Komunitas, jadi tunggulah dengan pikiran Anda, coba dan simpan di satu paket per jawaban sehingga kami dapat membangun gagasan tentang bagaimana perasaan masyarakat tentang alat-alat ini.

34
Richard Slater

Penting bagi saya untuk menyimpan prototipe saya di setidaknya dua utas, dan tiga jika saya mencoba memahami interaksi terperinci dengan animasi.

Thread 1: Aliran, fungsi, formulir, dan data

  • Mulai di atas kertas (sebenarnya biasanya sesi desain papan tulis dengan yang lain). Fokus pada aliran layar, lalu fungsi utama dan tata letak potensial layar yang sangat penting. Cobalah setidaknya dua gagasan berbeda.
  • Tingkat kesetiaan berikutnya di Balsamiq. Tambahkan detail fungsional, sesuaikan tata letak, tambahkan data sampel yang konkret dan bermakna ke layar (dalam konteks skenario yang dapat dibuktikan).
  • Buat prototipe alur kerja dengan merangkai langkah demi langkah, skenario jalur tunggal dengan layar dan interaksi spesifik yang diharapkan untuk pindah ke layar berikutnya. Saya cenderung menggunakan PowerPoint, menempatkan semua mockup layar secara berurutan. Prototipe ini memungkinkan Anda mendapatkan umpan balik awal dengan pengguna nyata dengan penelusuran jamak , yang sangat efektif untuk menyempurnakan konsep, alur kerja, persyaratan fungsional, terminologi, dll.
  • Ulangi lebih awal, sering, dan cepat.

Thread 2: Program visual dan gaya

  • Dengan menggunakan beberapa mockup kunci dari utas 1, visualisasikan mereka (seperti komputer) dalam detail tingkat piksel menggunakan Photoshop atau mekanisme serupa lainnya. Jelajahi warna, proporsi, metafora visual, tipografi, dll. Hasilkan setidaknya 3 ide.
  • Dapatkan umpan balik tentang ini secara independen dari prototipe alur kerja. Gunakan pengujian preferensi, pengujian AB, kritik, charettes , dll.
  • Iterasi dan perbaiki.

Thread 3: Interaksi terperinci dan animasi

  • Berfokus pada satu interaksi interaksi terperinci atau urutan animasi bersama prototipe fungsional dalam alat apa pun yang paling cocok untuk Anda: HTML/CSS/JS, Flash, bahasa pemrograman tingkat rendah, kerangka kerja komponen/perpustakaan UI, dll. Setidaknya dua interaksi alternatif .
  • Jalankan sejumlah kecil tes kegunaan singkat termasuk pengumpulan data waktu. Lakukan tes perbandingan. Hitung keystrokes/mouseclicks/gestures.
  • Iterasi dan perbaiki.

Singkatnya, buat prototipe jenis tertentu untuk tujuan tertentu ... untuk menjawab pertanyaan spesifik. Tidak ada satu tipe yang berfungsi untuk semua situasi. Jauhkan masalah estetika dari loop alur kerja/fungsi umpan balik. Gunakan metode yang tepat dan efektif untuk berbagai jenis pertanyaan. "Jangan menyeberangi sungai."

Saya telah menemukan bahwa hampir semua perbaikan desain mendasar berasal dari utas 1 dan utas 2, tetapi utas 3 diperlukan jika Anda melampaui kontrol standar atau domain Anda baru/kompleks/spesifik (misalnya interaksi gestural, model multi-dimensi manipulasi, kontrol khusus untuk OS baru yang mewah, mengoptimalkan kinerja manusia dalam beberapa dimensi).

35
Jim Jarrett

Pensil adalah alat yang bagus untuk membuat mockup UI. Ini tersedia sebagai addon Firefox atau aplikasi mandiri .

alt text

Ini memiliki keunggulan dibandingkan beberapa alat lain yang disebutkan karena itu gratis dan open source.

12
david4dev

Saya telah membaca artikel yang sangat menarik beberapa waktu lalu yang disebut "Untuk membuat sketsa atau tidak membuat sketsa" - Anda harus melihatnya: pertanyaan sketsa Setiap kali kreativitas diperlukan Anda tidak harus membatasi pikiran Anda dengan alat Kau gunakan. Pilihan pribadi saya untuk pembersihan nanti adalah alat yang dekat dengan area yang saya tangani. Untuk HTML/CSS saya biasanya memulai dengan tata letak sederhana dan meningkatkan detail langkah demi langkah. Hal yang sama mungkin terbukti bermanfaat untuk bidang lain juga. Prototyping dari detail rendah ke tinggi. Jadi saya tidak punya alat khusus untuk merekomendasikan ... itu tergantung.

Jadi saya tidak punya alat khusus untuk merekomendasikan ... itu tergantung .

10

Saya pribadi menggunakan Balsamiq untuk beberapa revisi pertama, dan kemudian langsung pergi ke prototipe HTML menggunakan kerangka kerja CSS seperti Blueprint .

8

Menarik bahwa Adobe Fireworks telah mendapatkan sedikit cinta di situs ini.

Di antara hal-hal lain, saya menikmati

  1. Bangunan di berbagai negara bagian
  2. Halaman master
  3. Objek HTML, seperti tautan dan ikon, dapat diberi markup yang akan diekspor (tautan internal & eksternal, metadata, semua kebaikan itu)
  4. Mengekspor layout standar berbasis CSS yang sesuai standar dengan stylesheet aktual
  5. Native Illustrator dan integrasi Photoshop untuk logo, dll.

Saya suka Balsamiq karena melempar IA ke klien, lalu Fireworks untuk prototipe yang bisa dilayari begitu seorang desainer berkolaborasi. Pekerjaan yang dilakukan dalam Fireworks mengekspor cukup mudah ke HTML dan CSS yang menerjemahkan dengan cukup mudah menjadi situs statis penuh atau sebagai halaman templat/tema untuk situs dinamis.

8
Matt

Saya akan mengatakan hanya kertas adalah alat prototipe terbaik. Ya, sudah jelas, tetapi lebih baik daripada memulai elektronik.

  • Paper memberi tahu klien bahwa ini adalah gagasan, salah satu dari banyak kemungkinan.
  • Kertas tidak membiarkan klien terperangkap dalam font atau warna atau bentuk atau gambar. Ada alasan yang balsamiq memilih wireframes gaya sketsa.
  • Revisi adalah cepat
  • Sangat mudah untuk mendapatkan tulisan tangan mereka yang sebenarnya di atasnya dan itu tidak mengintimidasi mereka dari menggambar di atasnya.
  • Anda dapat memindai atau mengirim faks jika Anda ingin elektronik.

Saya penggemar berat prototipe fungsional html setelah, tetapi kertas menurunkan penghalang untuk brainstorming dan tes lorong cepat ui.

Mudah untuk memandu seseorang melalui sketsa kertas:

"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?"

Jika Anda tidak memulai dengan sketsa dan mendapatkan validasi pengguna, Anda akan melompat dan hanya akan lebih mahal untuk membatalkan dan mengulanginya nanti.

5
MattK

Saya lebih suka melakukan mockup UI Web dalam HTML/CSS.

  1. Prototyping fungsional adalah solusi yang jauh lebih baik karena pengguna mendapatkan pengalaman aktual daripada pengalaman non-dimensi (melihat Anda Photoshop).

  2. Prototipe fungsional bukan pekerjaan sekali pakai.

  3. Jauh lebih cepat untuk beralih menggunakan prototipe fungsional selama umpan balik

4
abrudtkuhl

Saya menggunakan Axure .

Meskipun cukup mahal (hampir $ 600 per lisensi) itu memberikan fleksibilitas luar biasa dan memungkinkan Anda untuk menyesuaikan hampir semuanya.

Mampu menggunakan kontrol Anda sendiri (atau maketnya), master, dll. Sangat penting saat membuat aplikasi daripada situs web.

4
Dan Barak

Kertas dan HTML adalah yang terbaik.

Sketsa cepat di atas kertas. Kemudian buat hal yang nyata dalam HTML. StaticMatic tautan teks sangat bagus untuk membuat prototipe.

Di masa lalu saya menggunakan Axure, tetapi wireframing adalah buang-buang waktu.

3
Miki

Saya juga akan memberikan suara untuk Axure. Kantor kami menggunakan alat kolaboratifnya untuk membagi tanggung jawab antara IA dan desainer Grafis kami.

Meskipun bukan Omnigraffle, opsi penyadapan lebih dari cukup. Perangkat lunak ini memiliki fungsi master yang luar biasa, sehingga kita dapat meningkatkan kesetiaan sebuah prototipe dengan cukup cepat.

Dan seperti kata Dan, itu sepenuhnya dapat disesuaikan dan membuat dokumen spesifikasi profesional.

r.

3
Robert Hamburger

Adobe InDesign. Ini mungkin terlihat sedikit aneh tetapi ada fitur yang saya sukai:

  • Antarmuka bergaya Adobe. Jika Anda pernah bekerja dengan Photoshop atau beberapa produk Adobe lainnya, akan sangat mudah untuk beralih ke InDesign
  • alat yang ampuh untuk bekerja dengan tipografi, tabel, gaya, kisi dan sebagainya
  • sebenarnya Anda tidak hanya bisa membuat gambar rangka tetapi juga desain grafis
  • anda dapat mengekspor gambar rangka sebagai PDF yang dapat diklik
3
Kostya

Saya setuju dengan beberapa amswers di atas tetapi saya ingin menambahkan beberapa informasi dan tip tambahan. Saya hampir memulai setiap proyek dengan papan tulis, pena dalam berbagai warna dan juga beberapa post-it. Cara termudah untuk mengomunikasikan ide dan mendapatkan umpan balik yang cepat. Bergantung pada jenis proyek saya kemudian mencoba untuk membuat sketsa diagram alir utama dengan program yang disebut yEd . Ini cara sederhana bagi saya untuk menyusun ide. Jika saya memiliki mac terdekat saya akan memilih OmniGraffle (program luar biasa untuk lebih dari diagram alur).

Saya terus melakukan prototipe di Balsamiq , Sketch flow dan Illustrator untuk mendapatkan berbagai jenis prototipe low-fi dan hi-fi.

Mengenai informasi ini, saya merasa cocok untuk memiliki kotak alat kaya untuk dipilih. Sangat penting bagi saya untuk dapat mengambil pendekatan yang berbeda tergantung pada jenis proyek.

2
Anna

Saya gerakan Daniel Bleisteiner kedua: "Itu tergantung."

Untuk 90% proyek, pertimbangkan suara saya untuk kertas. Pembenaran untuk kertas berlimpah di utas ini, jadi saya tidak akan mengulanginya.

Desain tidak pernah sama di antara proyek, dan tentu saja tidak di antara klien. (Saya berbicara tentang desain dalam arti yang samar-samar, mis. Desain, pengembangan, pembuatan prototipe, wireframing - mari kita jujur, mereka semua secara bertahap bergabung satu sama lain.)

Jadi, untuk 10% proyek lainnya, alat protoyping akan tergantung pada proyek. Jika membutuhkan kolaborasi jarak jauh, Axure mungkin yang terbaik. Jika itu mengharuskan bekerja dengan tim internal klien yang menggunakan terutama Adobe, Fireworks mungkin yang terbaik. Ada banyak alat. Sayangnya, menurut definisi, alat tidak dapat beradaptasi secepat masalah yang mereka bangun untuk dipecahkan; karenanya, banyak dari produk ini tampak sangat mirip, tetapi tidak cukup identik, satu sama lain. Dan terserah kepada kita untuk melakukan evaluasi mana yang terbaik untuk pekerjaan itu.

Pemikiran tambahan: iPad mulai membantu mengaburkan batas antara kolaborasi klien secara langsung dengan klien yang diawasi secara langsung. Omnigraffle, SketchBook, TouchDraw, Draft, dan aplikasi iPad lainnya membuka jalan untuk pengalaman kolaborasi yang lebih baik. (Saya berbicara tentang peningkatan sebagai upaya menuju tujuan akhir agar klien merasa nyaman menggambar di iPad seperti yang mereka lakukan di atas kertas, keuntungannya adalah bahwa klien dapat menggunakan protoype fungsional daripada halaman statis. tujuan akhir hanya pendapat saya.)

2
Tyler Hayes

Saya ikuti langkah-langkah ini ...

1. Prototyping. Saya menggunakan Balsamiq Mockups karena mudah. Inti dari pembuatan prototipe adalah untuk mencari tahu tata letak dasar berbagai hal. Ini adalah tahap di mana Anda membuat perubahan drastis. Untungnya Balsamiq tidak berpura-pura menjadi sesuatu yang bukan dan tetap sangat mudah digunakan. Lebih cepat bagi saya untuk menggunakan Balsamiq daripada menggambarnya. Dan itu datang dengan manfaat bisa menyeret elemen di layar daripada menghapus dan menggambar ulang mereka.

2. Finalisasi desain. Saya menggunakan Photoshop dan kadang-kadang Illustrator kecil untuk ini sehingga saya bisa mendapatkan gambar yang disempurnakan sebelum menulis kode apa pun.

Lebih sulit untuk membuat perubahan drastis pada desain Anda di Photoshop karena kami cenderung terbawa oleh pixel-perfection. Dan masih lebih sulit setelah aplikasi Anda. Jadi ini adalah alasan untuk kemajuan saya, dan mengapa saya mulai dengan alat termudah yang mungkin ... Balsamiq.

2
Steve Wortham

Saya seorang sketsa/pensil-pertama dan Balsamiq - kedua agak cowok. Setelah itu, Photoshop untuk menyempurnakan detail sampai ada cukup untuk melompat ke HTML dan CSS.

1
blackant

Balsamiq. Ini bagus juga untuk perangkat lunak berbasis desktop, dan sangat mudah dipelajari.

1
franz976

Juga patut dicoba gomockingbird yang baru keluar dari versi beta

1
Paul McKeever

Agen interaktif istri saya telah sukses dengan:

http://www.mockflow.com/

Cepat untuk memulai dan cukup banyak kontrol bawaan dan layar untuk prototipe dan gambar rangka.

1
noluckmurphy

Pertanyaan itu menyebutkan perlunya alat prototyping tetapi tidak seberapa realistis prototipe Anda perlu. Untuk jenis prototipe wireframe yang samar, saya setuju dengan sebagian besar komentar di sini bahwa pena/kertas, Balsamiq atau bahkan Visio adalah alat yang baik. Namun, ketika Anda memerlukan prototipe yang terlihat lebih realistis, ini tidak akan dilakukan dan kemudian saya akan menyarankan untuk melihat orang-orang seperti Axure atau Adobe Fireworks/Catalyst (iRise jauh lebih mahal) dan meskipun memiliki masalah, saya akan memilih Axure .

0
Geert

Saya menggunakan Pensil juga, meskipun memiliki beberapa kelemahan:

  • tidak ada Penanganan Data Tabel: Jika Anda ingin menggunakan bingkai tabel, Anda tersesat.
  • tidak ada WordWrap di kotak teks. Ketika mencoba menempatkan lorem ipsum, saya harus membungkusnya sendiri. Itu menyebalkan.

namun, saya sangat menyukai alat ini.

0
cukabeka

Terkadang saya menggunakan alat ini http://www.hotgloo.com/

0
512x512

Karena pertanyaan Anda secara khusus tentang pembuatan prototipe, saya berasumsi Anda melakukan langkah apa pun yang Anda anggap perlu sebelum membuat prototipe seperti membuat sketsa, dll.

Jika produk Anda akan dikirimkan melalui Web, buat prototipe Anda menggunakan Web (HTML, CSS, JS). Pada akhirnya itu lebih cepat, lebih murah dan lebih akurat daripada apa pun yang mungkin Anda gunakan. Saya telah menemukan bahwa alat seperti Axure baik untuk hal-hal sederhana, tetapi kemudian memerlukan kurva belajar yang curam untuk melakukan sesuatu yang cukup kompleks. Pada saat itu, Anda menghabiskan waktu mempelajari alat berpemilik ketika Anda bisa mempelajari standar Web yang akan lebih bermanfaat bagi Anda dalam jangka panjang.

Jika Anda khawatir tentang klien yang berpikir bahwa itu "selesai", Anda dapat meninggalkan gaya hingga akhir, namun saya telah menemukan bahwa semakin nyata prototipe Anda, semakin mudah itu dievaluasi.

0
Craig Villamor

Itu benar-benar tergantung pada apa proyeknya.

Jika situs web tempat Anda membuat prototipe hanya akan menjadi beberapa halaman dengan konten statis, menggunakan editor grafis seperti Photoshop atau Fireworks mungkin akan baik-baik saja. Saran untuk menjauhkan elemen desain dari pembuatan prototipe "apa pun alasannya" mungkin tidak sesuai di sini.

Namun, di ujung lain dari spektrum di mana Anda sedang membangun aplikasi besar dengan banyak kasus penggunaan, saya akan merekomendasikan sesuatu yang lebih seperti jawaban Jim Jarrett. Saya akan menambahkan bahwa aplikasi skala besar (atau setidaknya seharusnya) merupakan proses berulang: Anda akan membuat prototipe untuk fase I dan kemudian prototipe lagi untuk rilis fase II, dll. Masing-masing fase prototipe ini mungkin memerlukan tingkat detail yang berbeda . Anda mungkin ingin bekerja dari pembuatan/prototipe fase saat ini, atau mungkin sudah waktunya untuk kembali ke prinsip pertama dan mulai dari awal.

0
skybondsor

Axure adalah alat wireframing/prototyping/spesifikasi yang bagus. Ini memungkinkan Anda untuk fokus pada apa yang Anda buat dan membuat hal-hal seperti anotasi, catatan, interaksi, sangat mudah ditentukan.

Nilai tambahnya adalah saat Anda menentukan interaksi, saat Anda membuat prototipe dari gambar rangka Anda, interaksi itu diterjemahkan ke widget yang berfungsi nyata. (Axure menghasilkan prototipe HTML)

Anda juga dapat mengambil desain layar (dalam JPEG misalnya) mengimpor gambar, mengaktifkan area gambar menggunakan alat "gambar peta" dan Anda kemudian secara efektif memiliki prototipe kesetiaan yang lebih tinggi!

Axure juga memungkinkan Anda membuat tindakan berdasarkan variabel (Anda dapat mengatur atau membacanya). Ada juga konsep mendapatkan widget untuk menghasilkan suatu acara, Anda dapat meminta widget lain mendengarkan acara tersebut dan kemudian widget itu dapat merespons dengan cara tertentu.

Saya bisa terus dan terus ... Sisi buruknya adalah biaya ~ $ 550, tetapi penghematan waktu sangat berharga. Dukungan pelanggan mereka, melalui email, sangat bagus; mereka biasanya kembali kepada saya dalam beberapa jam ... kadang-kadang segera.

0
milesmeow

Saya menemukan Mockingbird ok untuk gambar rangka sederhana. Itu tidak akan membuat saya meninggalkan omnigraffle dalam waktu dekat tetapi itu cukup bagus untuk alat berbasis web: http://gomockingbird.com/

0
fluxd

Lihatlah Sketcher Aplikasi (saat ini pada kandidat rilis) untuk melihat apakah itu sesuai dengan kebutuhan Anda. Ini adalah alat prototipe HTML yang cepat untuk membuat prototipe aplikasi wireframe dan interaktif web. Ini menggunakan browser WebKit tertanam sebagai permukaan desain di mana Anda dapat menambahkan komponen HTML, komponen UI jQuery, widget web (seperti Google Maps dan pemutar YouTube) dan menatanya dengan tema jQuery dan properti CSS. Tindakan sederhana dapat didefinisikan juga. Pengguna dapat menjalankan/menguji prototipe di browser default dan mengekspor sumber HTML/CSS/JavaScript setelah mereka puas dengan desain. Alat ini lebih diarahkan pada pengalaman seperti Axure tetapi menekankan pada "desain di browser untuk berjalan di browser" karena memastikan mockup/wireframes dapat disadari dalam tahap pengembangan dengan teknologi web.

Saya adalah pengembang aplikasi ini. Maaf atas promosi diri yang tidak tahu malu ini. Namun demikian, saya pikir itu bisa menjadi alat prototyping HTML yang bagus dan patut dilihat.

0
Feng Chen