NinjaMock-インターフェースのプロトタイプ作成のための無料のアプリケーション

Hi％username％！ 素晴らしいニュースがあります。オンラインプロトタイプサービスであるNinjaMockの公式バージョンがリリースされました。 Webおよびモバイルアプリケーションの優れたプロトタイプを無料で作成できるようになりました！



昨年の忍者プロトタイプの作成方法に関する記事の後、NinjaMockサービスは大幅に成熟し、いくつかの興味深い変化を経験しました。 チームを拡大し、多くの新しい機能を追加し、最初の公式リリースをリリースし（無料バージョンがあります）、Habréで独自のブログを開始しました。
この記事では、最も興味深い機能と、なぜNinjaMockが他のプロトタイピングアプリケーションよりも優れているかについて説明します。

最も興味深い機能

完全無料版

特に優れた無料アプリであれば、私たちは皆無料アプリを愛しています。 したがって、私たちはNinjaMockを非営利目的で永久に無料で使用することにしました。 これは、無料版をトリミングしている競合他社とは明確に区別されます。 エディターの機能に制限を課さないことにしました。 無料版ではすべてが利用可能です。プロジェクト内のページ数に制限はなく、PDFおよびPNGへのエクスポート、コメントのサポート、マスターページの使用などが可能です。

同じことは、今後追加するエディターのすべての新機能にも当てはまります。すべての機能は無料で利用できます。

2つの理由から、このような贅沢を買う余裕があります。 まず、何をすべきかを指示する投資家がいません。 すでに投資家からいくつかのオファーを受けていますが、自由は私たちにとってより重要です。 第二に、アプリケーションを構築するための有能なアプローチのおかげで、プロジェクトインフラストラクチャをサポートすることで、実質的に費用はかかりません。 次のいずれかの記事で、1か月あたり4ユーロのホスティングに対するhabr-およびredditの効果にどのように耐えたかを知ることができます。 興味深い場合は、コメントに書いてください。

紙のスタイル

現実的な（忠実度の高い）スタイルでプロトタイプを作成するのは非効率的であると考えています。 昨年の会議全体を、ロシアと海外の両方でモバイルアプリケーションとウェブサイトを開発する大小のチームと過ごしました。 プロトタイピングから最終設計まで、作業プロセスの複雑さをマスターしました。 その結果、詳細度の低い「紙」のプロトタイプを作成する際に、完全な完成度を達成しました。

アイテム

現在、次のプラットフォームをサポートしています。


プロトタイプを作成するために使用されるユーザーコントロールはベクトルですが、これに誰も驚かないことはほとんどありません。 ただし、ここには興味深い機能があります。すべての要素はNinjaMock自体で作成されます。 長方形、楕円、線、多角形、ポリライン、ベジェ曲線などのプロトタイピングに必要な基本ベクトルツール、および手で描くことができる鉛筆を提供します。

これがあなたにとって何を意味するのか：要素またはアイコンが欠落している場合、非常に簡単に自分でそれを行うことができます。

ズーム

前の記事で、 NinjaMockがどのように完全に構​​築されているかを説明しました。 HTML5キャンバスを使用して独自のレンダリングテクノロジーを実装したため、本格的なスケーリングが可能になり、ユーザーエクスペリエンスを向上させるこれらの興味深い効果が得られました。

コメントと通知

Googleドキュメント、特にコメント機能の使用を心から楽しんでいます。 そのため、NinjaMockで同様の機能を開発する際に、Google Docsで例を取り上げました。 その結果、誰もがプロトタイプにコメントする直感的で馴染みのある方法が得られました。コメントへの応答、コメントのステータスの変更、および電子メール通知をサポートしています。

さらに、個々のプロトタイプページのステータス（進行中、完了、承認済み）を付加する機能を追加しました。 これにより、設計がどの程度完了しているかを簡単に判断できます。

これは、アプリケーション自体の外観です。


そのため、特別なページにプロジェクトのステータスが表示されます：

プロジェクト表示（共有）

NinjaMockには、プロトタイプをクライアントに送信してフィードバックを得る機能があります。 （共有ボタンをクリックして）プロジェクトへのアクセスを開き、メールまたはその他の方法でリンクを送信するだけで十分です。 しかし、リンクと一緒に少し進んで、たとえば電話からスキャンして特別なQRコードを生成し、デバイスでプロトタイプを直接実行して、どのように機能するかを確認します。

QRコードは本物です。

重要なポイントは、ページを表示できるステータスを選択できることです。 たとえば、デザインがまだ完成していないページを表示しない場合があります。

紙でのエクスポートとナビゲーション

設計チームの多くのオフィスでは、壁に印刷されたプロトタイプと最終設計のページが飾られています。 一部のチームはそれらをインスピレーションのために使用し、一部のチームは壁について直接議論してコメントを書きます。




NinjaMockには、コメントとページリンクを印刷する機能とともに、PDFとPNGにエクスポートする機能があります。 互いに「ペーパーナビゲーション」と呼びます。要素に別のページへのリンクへのリンクがある場合は、リンク先のページ番号を含む特別な脚注でこれを示します。

ページとプロジェクトの構成

複雑なプロジェクトでは、ページを整理する必要があります-たとえば、ページを論理的にグループ化する（登録ページ、プロファイル編集ページなど）、または単にページの多くの状態を表示する（通常の状態のページ、同じページだがその上にダイアログがあり、など）。

Axureなどの競合他社の多くでは、ページツリーを作成できます。 私たちは多くのデザイナーと話をしましたが、あるページが別のページの子会社である場合の意味を説明できる人はほとんどいませんでした-誰もが独自の方法でこれを理解しています。 代わりに、PowerPointを使用する多くの人々の使い慣れたエクスペリエンスを再現し、ページサムネイルを表示して、より高速で簡単なナビゲーションを実現することにしました。

プロジェクトの論理編成のために、ユーザーにページの名前付きグループを作成する機能を提供しました。 プロジェクトでは、無制限の数のグループを作成したり、グループ間でページを移動したり、グループ内のページの順序を変更したりできます。


NinjaMockでプロジェクトを整理するために、コンピューター上のファイルを操作するエクスペリエンスを再現しました。プロジェクトをフォルダーにグループ化したり、フォルダーを他のフォルダーにドラッグしたりできます。 これは、クラウド内の独自のファイルシステムです。

ユーザーコラボレーション

NinjaMockには特別なタイプのアカウント-ProPlusがあります。 ProPlus管理者は、ユーザーを追加および削除したり、さまざまな役割と権限を割り当てたりできます。 現時点では、非常に柔軟な権限システムを実装していますが、3つのロール（管理者、デザイナー、レビューア）のいずれかを選択できます。 ユーザーのリクエストがある場合は、より柔軟な方法でロールを構成します。

素敵なささいなこと

要素のスマートな位置決め

NinjaMockのほとんどの要素は、どこに配置する必要があるかを知っているため、1回クリックするだけで十分であり、現在のコンテキストの最適な場所に自動的に追加されます。

アンカー

多数の要素がコンテナであり、コンテナ内の要素の相対的な配置を維持する必要がある場合が非常に多いため、アンカー（アンカー）のサポートを追加しました。
ここで、たとえば、グループでこれを行う方法。

ページウィザード

プロトタイプページは、他のページのマスターページとして選択できます。 いくつかの興味深い機能：

• アンカーを使用すると、Webサイトのスティッキーフッター（高さに関係なく常にページの下部にあるフッター）を簡単に作成できます。 これを行うには、フッター要素に左アンカーと下アンカーを指定するだけです。
• ページウィザードを使用すると、特定のページのさまざまな状態を簡単に表示できます。 たとえば、ページにダイアログが表示されている場合は、空白のページを作成し、ウィザードとしてページを選択して、単にダイアログを描画します。 これにより、ページ全体を複製する必要がなくなり、ページを変更する際の時間を節約できます。

ホットキー

プロのユーザーにとっては、Adobe Photoshopの場合と同じように、ホットキーをサポートする瞬間が快適になります。

私たちは今何に取り組んでいますか？

1. バージョン管理。 これで、各プロジェクトがGitリポジトリに保存されました。 ユーザーがバージョン管理システムの機能を便利に使用できるように取り組んでいます。
2. ユーザーが作成したコントロール。 上で書いたように、すべての要素はNinjaMock自体の中のベクターエディターを使用して作成されます。 本格的なコントロールを作成する可能性のほとんどは、率直に言ってまだ「未加工」である多くの機能があるため、ユーザーから隠されています。 これらすべての機会を徐々に広げていきます。 独自の要素（アセット）を追加できるようになりました。まもなくカスタムプロパティを作成できるようになります。
3. ベクター形式でPDFにエクスポートします。 多くのユーザーから、ベクトル要素をエクスポートする機能、たとえばAdobe Illustratorでそれらを使用する機能を追加するように求められます。 すぐにそのような機会があります。
4. コピー/貼り付け-要素をプロジェクト内でのみコピーできるようになりました。 HTML5 Clipboard APIを使用すると、プロジェクト間、さらには異なるアプリケーション間でコピーする機能を追加できます。

競合他社

多くの面で私たちのアプリケーションは、すべての競合他社よりもはるかに優れていると考えています。 あなた自身が比較して確認できるように、それらのリストを同封します。
balsamiq.com
proto.io
moqups.com
mockflow.com
hotgloo.com

以下は、NinjaMockでできることのほんの一部のリストです。 アプリケーションの機能について詳しく知りたい場合は、ninjamock.comにアクセスしてプロトタイピングを開始してください！