7 alat wireframing dan prototaip terbaik untuk pembuat aplikasi

Akhir-akhir ini, saya banyak mengadakan perbincangan mengenai UI dan UX. Tidak ada yang mengeluh mengenai hal ini, jadi saya rasa kita mencapai titik di mana semua orang yang terlibat dengan pengembangan aplikasi menyedari betapa pentingnya UI dan UX.

Idea aplikasi hebat mudah dihancurkan oleh antara muka dan pengalaman yang kurang difikirkan. Dan dengan banyak alat yang kini tersedia untuk pembuatan kawat cepat dan prototaip, seharusnya tidak ada alasan untuk tidak menjalankan pengalaman yang cemerlang.

Walaupun istilah tersebut sering digunakan bersama, ada perbezaan yang jelas antara rangka kawat dan prototaip.

Rangka kawat adalah susun atur rangka aplikasi struktur anda. Ia biasanya dilakukan tanpa warna - hitam dan putih sederhana - dan sementara bingkai wayar menunjukkan ke mana teks, gambar, dan elemen reka bentuk lain akan pergi, ia tidak termasuk gambar, teks, dan lain-lain. Walau bagaimanapun, setiap elemen bingkai dawai adalah ditunjukkan pada skala benar. Sebabnya adalah bahawa rangka kawat dimaksudkan untuk memusatkan perhatian anda pada struktur, bukan reka bentuk sebenarnya. Sama seperti cetak biru untuk rumah atau bangunan: anda mendapat idea yang jelas mengenai struktur dan penempatan semuanya, tanpa terganggu oleh reka bentuknya.

Prototaip berada di antara bingkai kawat dan aplikasi yang berfungsi sepenuhnya. Bahagian terpenting dari prototaip adalah penggunaan animasi, yang membolehkan anda memeriksa bagaimana aplikasi anda akan bertindak balas terhadap interaksi pengguna, dan peralihan halaman atau skrin. Prototaip juga boleh merangkumi gambar sebenar, set ikon, dan teks, tetapi ini ditentukan oleh tujuan prototaip. Sekiranya anda hanya menguji interaksi dan aliran skrin, anda boleh membuat prototaip yang hanya merangkumi animasi dan mungkin sedikit warna. Sekiranya anda cuba mengesahkan idea anda, atau melamar calon pelabur, anda mahu prototaip anda lebih digilap, menggunakan gambar, teks, dll.

Walaupun alat yang saya sertakan dalam penggabungan ini menjadikannya lebih mudah untuk membuat prototaip, termasuk lebih banyak elemen di atas dan di atas animasi dan percikan warna bermaksud anda memerlukan lebih banyak masa untuk membuat perubahan pada prototaip.

1. Balsamiq

Sekiranya anda hanya berminat mengumpulkan kerangka idea aplikasi anda, maka Balsamiq adalah alat untuk anda. Tersedia sebagai aplikasi desktop dan web, Balsamiq telah wujud sejak tahun 2008.

Wireframe dimaksudkan untuk memerlukan sedikit usaha dan waktu, jadi Balsamiq dirancang untuk membantu Anda membuat wireframe dengan cepat. Cukup tambahkan elemen asas yang anda perlukan, kemudian ubah saiz, kedudukan, dan sesuaikan mengikut keperluan. Rangka wayar yang anda buat dengan Balsamiq akan kelihatan agak kasar, tetapi itu disengajakan. Pasukan kreatif di belakang alat ini percaya bahawa bingkai kawat yang lebih menyerupai lakaran mendorong percambahan idea. Yang merupakan alasan besar untuk melakukan wireframing.

Kawalan versi ringkas akan membantu anda mengesan dari mana anda bermula, dan di mana anda berada sekarang. Dan hanya kerana ini adalah wireframe tidak bermaksud anda tidak dapat mendapatkan input dari pengguna / klien yang berpotensi. Anda tidak dapat membuat prototaip interaktif sepenuhnya menggunakan Balsamiq, tetapi anda boleh menghubungkan skrin / halaman yang anda buat untuk menghasilkan prototaip klik-tayang yang mudah. Tidak ada animasi atau interaksi: tujuannya hanya untuk menunjukkan aliran.

Dan jika Balsamiq kelihatan terlalu terhad, anda selalu dapat menambahkan mana-mana sambungan, templat dan pek ikon yang dibuat oleh komuniti.

Balsamiq tersedia sebagai aplikasi desktop, dengan harga $ 89 / pengguna, aplikasi berasaskan web mulai dari $ 12 / bln, atau aplikasi yang dipautkan Google Drive, dengan harga $ 5 / pengguna / bulan. Tetapi anda boleh memulakan dengan percubaan percuma terlebih dahulu, untuk melihat apakah itu alat yang tepat untuk anda.

2. WireframePro

Walaupun lesen MockFlow merangkumi akses ke lapan aplikasi yang berbeza, WireframePro akan menjadi minat anda semasa anda mula mengembangkan aplikasi anda sendiri. Sekali lagi ia adalah aplikasi berasaskan web, dengan antara muka seret dan lepas untuk membuat wireframe dengan mudah.

Ia dilengkapi dengan semua elemen UI standard, bersama dengan banyak komponen lain yang mungkin anda perlukan, termasuk pilihan untuk jam pintar Apple dan Android. Aplikasi ini juga memberi anda akses ke Mock Store, yang menawarkan banyak pilihan templat pihak ketiga yang boleh anda gunakan untuk inspirasi, atau sebagai titik permulaan cepat untuk bingkai kawat anda sendiri.

Seperti semua alat yang disenaraikan di sini, WireframePro direka untuk individu dan pasukan, dengan alat kolaborasi yang terpasang tepat. Penyertaan yang bagus adalah kemampuan untuk menghasilkan spesifikasi secara automatik untuk setiap elemen, jadi jika anda tidak membuat reka bentuk berfungsi sendiri, pereka anda akan mempunyai akses mudah ke semua butiran berkaitan reka bentuk

Akhirnya, apabila berkongsi mana-mana projek anda, anda dapat memberikan hak, membatasi beberapa orang hanya untuk dapat melihat dan memberi komen pada projek, sementara yang lain juga dapat mengeditnya.

WireframePro tidak mempunyai rancangan percuma, tetapi anda boleh mencubanya selama 30 hari sebelum beralih ke pelan berbayar. Lesen bermula pada $ 19 / bln untuk satu pengguna, dan $ 39 / bln untuk tiga ahli pasukan.

3. UXPin

Seperti namanya, pasukan di belakang UXPin menekankan UX. Tidak ada yang salah dengan itu, wireframing dan prototyping bertujuan untuk membantu anda menyempurnakan UX aplikasi anda. Dengan UXPin, anda boleh mengurus wireframing dan prototyping, jadi tidak perlu menukar alat.

Seperti yang anda harapkan, UXPin menyokong fail sumber Sketch dan fail Photoshop. Tetapi ia juga memiliki editor bawaan yang mendukung potongan kode CSS, yang memungkinkan anda untuk menyesuaikan elemen apa pun yang digunakan dalam bingkai kawat dan prototaip anda. Dan UXPin menjadikannya sangat mudah untuk melacak setiap lelaran setiap fail yang anda tambahkan atau buat, jadi anda tidak perlu mengklik puluhan fail yang mencari versi asalnya.

Membuat rangka dan prototaip asas adalah pantas dan mudah, dengan semua interaksi prototaip standard tersedia. Secara semula jadi, anda masih boleh membuat interaksi tersuai sekiranya diperlukan. Setelah prototaip anda siap, anda boleh menghantarnya kepada sesiapa sahaja untuk diuji, dengan semua interaksi ditangkap dalam video, bersama dengan audio komen setiap penguji.

UXPin menyokong pemformatan wayar dan prototaip laman web, aplikasi mudah alih, dan aplikasi web, dan dilengkapi dengan 14 titik putus yang telah ditetapkan, yang membolehkan anda melihat reka bentuk anda dengan mudah pada pelbagai peranti. Harga bermula dari $ 19 / bln untuk pelan asas, dan $ 29 / bln untuk membuka kunci ciri lanjutan.

4. Prott

Walaupun Prott dijenamakan sebagai alat prototaip, ia juga merangkumi fitur wireframing. Sekiranya idea aplikasi anda lebih kurang daripada lakaran yang dilukis secara kasar, anda boleh memotret lakaran anda dan mengimportnya terus ke aplikasi. Sketsa ini kemudian dapat dianimasikan, atau digunakan sebagai landasan untuk bingkai kawat anda. Seret dan lepaskan bentuk yang telah ditetapkan dan elemen UI terus ke lakaran anda untuk beralih dari garis goyah, ke bingkai kawat lo-fi profesional.

Prott merangkumi sebilangan besar kit UI untuk pelbagai peranti, dari iOS hingga Android dan web. Tetapi anda juga boleh membuat perpustakaan elemen antara muka anda sendiri.

Daripada hanya berkongsi prototaip anda dengan orang lain, anda kini boleh menyertakan peta terperinci yang menunjukkan struktur aplikasi anda dengan jelas. Dan sesiapa sahaja yang anda gunakan untuk berkongsi prototaip dapat memberi komen secara langsung di setiap skrin, jadi lebih mudah bagi anda untuk memahami apa yang berkaitan dengan komen mereka.

Prott menawarkan percubaan 30 hari yang lengkap, dengan rancangan percuma tanpa had selain jumlah projek yang boleh anda buat. Sekiranya anda perlu membuat lebih banyak projek, anda boleh beralih ke pelan Starter atau Pro, dengan harga dari $ 19 / bln.

5. InVision

InVision eksklusif untuk prototaip, tetapi dengan sokongan untuk pelbagai kegunaan. Dengan InVision anda dapat dengan cepat membuat prototaip interaktif dari laman web, aplikasi web, atau aplikasi mudah alih anda, dan kemudian melihat prototaip pada peranti sebenar. Dan ini termasuk tablet dan alat pakai, bukan hanya telefon bimbit.

Prosesnya semudah:

  • Tambahkan aset reka bentuk anda (InVision menyokong GIF, PNG, JPEG, PSD, dan fail sumber Sketch) melalui drag and drop, atau dengan menyegerakkan dengan Dropbox.
  • Lukis titik panas pada setiap aset, dan tetapkan untuk dihubungkan ke aset lain, URL luaran, atau jangkar.
  • Tambahkan interaktiviti dalam bentuk gerak isyarat (ketukan atau sapu), kawasan tetap (bar menu, dll.), Dan peralihan.

Setelah selesai, anda dapat melihat projek di telefon, tablet atau komputer anda, atau bahkan SMS atau e-mel pautan kepada rakan dan rakan sekerja. Ini memudahkan anda untuk melibatkan orang lain dalam proses reka bentuk, dengan sesiapa sahaja yang anda hantarkan pautan dapat memberi komen pada setiap reka bentuk.

Harga untuk InVision bermula tanpa kos untuk satu prototaip, $ 25 / bln untuk prototaip tanpa had, dan $ 99 / bln untuk pasukan sehingga 5 ahli.

6. Kagum

Seperti InVision, aplikasi Marvel adalah untuk membuat prototaip. Ini termasuk sokongan standard untuk fail Sketch dan Photoshop, atau anda boleh menggunakan alat reka bentuk Canvas terbina dalam mereka. Marvel juga mempunyai aplikasi iOS dan Android yang membolehkan anda memotret coretan dan reka bentuk anda sendiri, dan memuat naiknya terus ke perpustakaan Marvel anda.

Sangat mudah untuk membuat titik panas pada reka bentuk anda, dengan puluhan interaksi dan peralihan skrin yang tersedia untuk menghidupkan prototaip anda. Dan anda boleh menguji prototaip anda pada banyak skrin, termasuk Apple Watch.

Sudah tentu, tidak ada alat prototaip yang perlu dibincangkan jika tidak termasuk kerjasama. Dan dengan Marvel, anda dapat memberi penjelasan kepada prototaip anda untuk menonjolkan bidang tertentu yang anda mahu komen orang lain. Komen boleh dibuat oleh sesiapa sahaja yang anda kirimkan prototaip anda, tanpa perlu mereka membuat akaun Marvel terlebih dahulu.

Harga di Marvel bermula pada $ 0 / bln untuk satu pengguna dan hingga dua projek, tetapi dengan ciri yang terhad. Dengan harga $ 14 / bln anda mendapat projek tanpa had, dan semua ciri, dengan harga yang berasingan untuk pasukan dan pelanggan perusahaan.

7. Proto.io

Proto.io adalah alat prototaip popular yang menerima kemas kini besar-besaran pada tahun 2016. Proto.io merangkumi semua ciri yang diperlukan dalam alat prototaip, tetapi kemas kini juga telah membawa banyak ciri yang dipermudahkan.

Bersama dengan UI yang direka bentuk semula yang menjadikan semua ciri inti lebih mudah diakses, Proto.io juga telah memberikan banyak penekanan pada animasi. Motion adalah ciri penting aplikasi mudah alih, dan ciri Peralihan Negeri Proto.io memudahkan sesiapa sahaja untuk membuat dan menyesuaikan animasi dalam prototaip mereka.

Proto.io juga telah memperkenalkan perpustakaan corak reka bentuk interaksi, menjadikan penambahan interaksi dengan mudah. Corak ini merangkumi interaksi seperti menu slaid-in, dan tarik untuk menyegarkan. Yang harus anda lakukan hanyalah menambahkan interaksi pada projek anda, dan menyesuaikannya.

Versi baru Proto.io memperluas kemampuan anda agar pengguna menguji dan memberi komen mengenai prototaip anda. Ini berintegrasi dengan platform pengujian pengguna seperti Validately dan UserTesting, memberi anda akses ke kumpulan pengguna sebenar yang lebih besar. Dengan integrasi Lookback, anda mendapat rakaman tanpa had - pada iOS sahaja, buat masa ini - menunjukkan kepada anda bagaimana pengguna berinteraksi dan menavigasi aplikasi anda.

Proto.io menawarkan percubaan 15 hari yang lengkap, selepas itu anda boleh beralih ke akaun percuma yang sangat terhad. Pelan berbayar bermula dari $ 29 / bln, bergantung pada saiz pasukan anda.

Kesimpulannya

Semasa anda baru memulakan pengembangan aplikasi, anda mungkin ingin membuat kedua wireframe dan prototaip idea aplikasi anda. Tetapi apabila anda menjadi lebih selesa dengan proses pengembangan, anda boleh mempertimbangkan untuk melakukan satu atau yang lain.

Oleh kerana rangka kawat sangat asas dalam reka bentuk, mereka memaksa anda untuk fokus untuk mendapatkan aliran dan pengalaman pengguna dengan tepat. Prototaip dapat membantu anda memperbaiki aliran dan UX, menonjolkan sebarang kekurangan reka bentuk, dan yang lebih penting, kelihatan lebih baik daripada bingkai kawat jika anda perlu menunjukkan kepada pelanggan atau pelabur. Walaupun mungkin menggoda untuk mencari alat yang menggabungkan kedua wireframing dan prototyping, faktor penentu harus selalu menjadi alat mana yang merangkumi semua ciri yang sebenarnya anda perlukan, dan paling selesa digunakan. Dan kerana setiap alat yang disenaraikan di sini menawarkan rancangan atau percubaan percuma, mengapa tidak menghabiskan satu hari untuk menguji semuanya sebelum membuat keputusan?