Rake、エミュレータ、アニメーター（upd@21.06）

最近、私は自分のアイデアをプロトタイピングおよびアニメーション化するための優れたツールを探し始めました。 その結果、市場調査は、その武器庫のツールの専門性の改訂に変わり、新製品の設計プロセスを磨きました。



必要なツールの種類を理解するために、現在のワークフローをまとめました。 新製品の設計は、次の段階を経ます。

• モデリング
  
  製品の静的モデルの作成：頭の中をスクロールし、紙の上で開発し、静的モックアップを反映します。
• シンプルなプロトタイピング
  
  シンプルなページのプロトタイプ、テスト、修正。
• 洗練されたプロトタイピング
  
  複雑な多層プロトタイプ、テストおよび修正。
• 荷降ろし
  
  プロジェクト文書の準備とパッケージ化、試運転。

このようなプロセスのパラダイムで、私のツールキットは次の分類を取得しました。

• 建築家
  
  機能面（情報アーキテクチャ、構造、シナリオ、メカニズムなど）の作成。
• ビジュアライザー
  
  比ur的な側面（アイデンティティ、イラスト、セマンティクスなど）の作成。
• テスター
  
  ユーザーのテストとフィードバックの収集。
• すくい
  
  シンプルで、多くの場合、ページごとのプロトタイプを作成します。このプロトタイプでは、製品の基礎を組み合わせて、旅行の開始時に誤った動きや誤った動きを排除します。
• エミュレーター
  
  できるだけネイティブ環境に近い複雑なプロトタイプを作成します。
• アニメーター
  
  多くの場合、このタイプのツールは生産プロセスにほとんど関連していないため、クライアントは未実現の初期の美しさを攻撃することはなく、開発者は将来の苦痛から気を失うことはありません。 しかし、コンセプト、インタラクティブな発明、その他の実験や空想を作成するには-それだけです。
• ドキュメンタリー
  
  プロジェクトドキュメントの保守と設計、開発者向けのパッケージの作成。

誰でも、彼のプロセスのために、特定の問題を解決する彼自身の種類のツールを作成できます。 たとえば、誰かが別のツールを使用してムードボードを作成する場合があります。 しかし、私はそれらを非常にめったに使用せず（そしておそらく無駄に）、ツールのメインリストにそれらを含めませんでした。



したがって、上記の分類に基づいて、レーキ、エミュレーター、およびアニメーターが必要でした。 1つの会社の1つのアプリケーションであるか、3つの異なるアプリケーションであるかは関係ありません。タスクセットのみが簡単に、便利に、効率的に実行された場合です。



必要なツールのカテゴリを決定したら、ポイントの基準と希望を明確にしました。

• 製品を素早く、明白で、直感的に知っている。時間も、長い学習ツールへの欲求もない。
• PsまたはSketchからのレイアウトの簡単でロスレスなインポートと同期。
• プロトタイプはどのプラットフォームでも作成できます。
• アニメーターは、できるだけ簡単な操作で複雑なアニメーションを作成する必要があります。
• 複雑なプロトタイピングについて空想を作らないために、エミュレーターは、実際の製品とその複雑なプロトタイプとの偏差ができるだけ少なくなるように、できるだけネイティブな動作を生成する必要があります。
• GIFまたはビデオ出力。
• クリック可能なプロトタイプを同僚やユーザーと共有し、プレゼンテーションに埋め込み、さまざまなデバイスに触れることができます。
• リーズナブルな価格。

テスト開始時の潜在的なツールの選択は次のとおりです。

• Adobe After Affects
• Adobe Expirienceデザイン
• マーベル
• インビジョン
• シルバーフロー
• 原理
• Flinto for Mac
• Proto.io
• Atomic.io
• ピクサート
• フレーマースタジオ
• 折り紙スタジオ

もう一度説明しすぎないことをもう一度説明します。サンプルには、必要なタスク（単純で複雑なプロトタイピング、アニメーション）を引き受ける可能性のあるツール、および建築家や他の専門分野に引き寄せられるツール（Axure、UXPin、 Balsamiq、WebFlow、Justinmind、Indigo Studioなど）。



また、ツールの知識は、個人のビジョンと作業プロセスおよびその他の専門的な好みの理解に大きく依存することを思い出します。そのため、判断する前に必ず製品を試してください。



今、私は各ツールを試乗して、一般的な印象を加え、作業プロセスの特徴と個人的な希望のチェックリストを手に持たなければなりませんでした。 さあ、行こう！



*** 2016年4月22日のフェアのパルス***



Adobe After Effects このツールは確かに強力ですが、インターフェイスをアニメーション化するために作成されたものではないため、自分にとっては簡単な方法で迂回的に作成したため、それを脇に置くことにしました。 将来は、他のニーズのためにお互いをもっと詳しく知りたいと思っていますが、今のところは他の時間を過ぎて行きます。



Adobe Expirienceデザイン 。 非常に素晴らしく、簡単なプロトタイプに適しています。デバイス上でリンクまたはビデオファイルpoyuzatを共有できます。 プロトタイプからのフィードバックを見ることができないのは残念です。 ただし、これはプレビューに過ぎないため、将来は何でも可能です。 [デザイン]タブは私にとっては不要です。どのようにデザインするか想像できませんが、これは習慣の問題である可能性が高いです。 幸いなことに、プログラムで十分に遊んで、シャフトに必要かどうかを理解する時間です（有料プログラムは年末になる予定です）。 これまでのところ、Macプラットフォームでのみというのは良くありません。



ピクサート このツールで作成したプロトタイプは非常に適切に見えますが、私のやり取りはすぐにはうまくいきませんでした。 ワイヤなしで接続されたデバイスの最も単純なメカニズムを嘆くのは素晴らしいことでしたが、これはまだエミュレータであるため、プロトタイプにはより複雑な出力が必要です。 無料なので、空いた時間にマスターしようとするので、友達を作ることができます。



原理 プレゼンテーションの詳細なビデオは模範的なものです。製品の可能性が水なしで迅速に示されているので、私は最初に試しました。 プロセスはすぐにロールバックされ、ほとんどすべてが私にとって非常に明確です。 チュートリアルで少し調べて、この機器のさらに大きなパワーをテストしました。 何らかの理由で、私は彼がエミュレーターの役割を果たすことを期待していましたが、それでもアニメーターです：まだ手間をかけずにアプリケーションプロトタイプを完全にウォークスルーすることは想像できませんが、これらの目的には別の側面のいくつかのメカニズムについて空想することは素晴らしいことです。 将来、アニメーターのこのトラックで正確に改善され、After Effectsの本格的で軽量でシャープなバリエーションになれば素晴らしいことです。



Flinto for Mac 。 彼は最後近くでテストのために並んでいた。 さらに嬉しかったのは、彼と一緒に仕事をしたことの驚きでした。知り合いが大成功を収め、機能が非常に速く飛びました。自分で短い公式チュートリアルとテストを実行した後、私はさらに大きな印象を残しました。 変換のデザイナーにとって、また1つのオブジェクトに複数のジェスチャを追加できるという大きな利点：現在のプロジェクトでは、必死にそれを必要としていました。 Principleをエミュレーターとして見た場合、何らかの理由でFlintoはアニメーターのように思えました。 Flintoで非標準のアニメーションと共に複雑なプロトタイプを作成すると、他のすべての製品よりも簡単で高速であることが判明しました。 暇なときは、この会社の別のツールであるFlinto Liteをぜひお試しください。



マーベル 何よりも驚いたのは、彼がショーをしようとしていて、特別なことは何も期待していなかったからです。 最初の知人はまったく気付かれずに通過しました：ほんの数分で、すでにモバイルで簡単なプロトタイプをめくっていました。同僚やLookbackを使ってユーザーをテストし、リンクをメールまたはSMSで送信し、クリック可能なプロトタイプをBehanceプレゼンテーションに挿入しました。 きれいで整頓されたシェルと一緒に非常に快適な印象を残し、私のプロセスの第2段階（単純なプロトタイピング）のための完全なツールの重いアプリケーションを作成しました。 決定的な要因は、正確に共有とフィードバックの機能でした。 シンプルなレイアウトを作成することは可能ですが、私にとっては、Adobe XDのようにこの機能は不要です。



InVision 。 優れた視点を持つ強力なツール。 Silver Flowsの購入で体重が増えました。これを試してみたかったのです。 そして、私がこれをいつ実行できるかは完全には明らかではありません。昨年9月から8月に発表されたInspectやMotionなどの一部の機能は、まだクローズドベータ版であり、いつリリースされるかはわかりません。 マイナスの点で、私は少し過負荷になった外観に注意します。Marvelの後は太りすぎて濃く見えますが、これは個人的な経験です。 したがって、私にとっては、InVisionはダークホースのままであり、これは間違いなく従います。これには、私の武器庫で優れた包括的なツールになるためのすべての前提条件があります。



Proto.io それで作られたプロトタイプは印象的ですが、数回の訪問後、知人はうまくいきませんでした。 ほとんどの場合、ツールにアーキテクトの機能をロードすることができなかったので、必要ありませんでしたが、15日間の試用期間のために複雑なプロトタイプを作成する方法を学ぶ時間がなく、5つのプロジェクトに月額24ドルを支払う方法を理解できませんでした、これ私の選択の中で最も高価なオファー。 残念ながら、私はエミュレーター兼アニメーターだと主張しています。



Atomic.io 。 プロトタイプは再び印象的ですが、エミュレーターの作成に気づいていましたが、アニメーターに似ています。 このプロセスは完全にはスムーズに進みませんでしたが、試用期間は月単位であるため、公式の情報源があるため、さらに詳細に調査する機会があります。 論理的にPixateを思い出させます。



フレーマースタジオ 。 発表された機能とプロトタイプは非常に良い印象を残します。 可能性は非常に多くありますが、より詳細な調査が必要です。 複雑なプロトタイプの作成には時間がかかりますが、出力は戦闘条件に非常に近いサンプルになります。 4月12日にリリースされた新しいバージョンでは、より迅速な仕事とデートのプロセスに対する期待がさらに大きくなります。



折り紙スタジオ 。 ビジュアルプログラミングで遊んでみることを楽しみにしています。ロジックと作業プロセスはとても親しみやすく、親愛なるように見えます。 4月上旬に発表された新しいバージョンを待つだけです。 代替のフォームがありますが、折り紙では推奨事項に重点が置かれているので、それから始めることを考えています。



***



フェアを歩き回って、現在の小計を作成しました。

• Marvelは私の第2段階（ラピッドプロトタイピング）のタスクをほぼ終了するので、特に、より詳細な実際の知り合いの段階では、あなたが装う必要はないので、私はまず熊手とテスターの1人としてそれをサービスに持っていきます。 InVisionとFlinto Liteに直面して、Nearbyは代替手段を提供します。
• エミュレータとして初めてFlintoを試しますが、開発プログラムでは、複雑なプロトタイピング（FramerとOrigami）の研究を優先しました。 アントン・カルタショフは、 RPCグループと同様に、 私が始めようとする彼の資料で 、このトピックでよく燃えています 。 おそらく将来、より複雑なプロトタイプをすばやくスケッチする必要がある場合はFlintoを、実際のエミュレーションが必要な場合はFramer（Origami）を試してみます。
• アニメーターとして試用期間中にPrincipleを使用します。現在、After Effectターボディーゼルは必要ありません。
• 必要に応じて武器を調整するために、残りのツール、特にInVisionを保持します。

検索中に見つけたニュアンス：

• トライアルモデルは、それ以上の知り合いを妨げました。 もう1つは、原則のように、実際の使用日数をカウントする場合です。 しかし、短期の知り合いの過程で、製品に最初または2度目にフックしなかったときに、反対側からツールをひねり、別の機会を与えたいと思います。 しかし、最終的には、単純な就職を含むさまざまな理由により、私は2週間の期間を満たせず、知り合いはいませんでした。 したがって、無料ベースでの永続的であまりジャムではない使用のモデルは、製品のより快適な印象を残し、大容量で有料ベースでさらに知り合うために使用する可能性があります。 一般的に、この市場では、無料支払いはより魅力的な収益化の形態のように見えます。
• 非常に鋭く高度に専門化された機能を備えたツールは、これらの問題を他の人と一緒に解決する「ハーベスター」よりも快適な印象を残します。「ハーベスター」よりもうまく機能するだけでなく、その棚の頭にあるだけです。問題を解決し、複数の棚を連続して占有せず、他のツールと混同します。 ドキュメンタが必要な場合-Zeplinを入手できます。テスターが必要な場合- ルックバックなどを入手できます。

プロトタイピング市場での戦いは本格的であるため、このトピックをパルスに保ちます：更新の場合、見出しは日付（upd@day.month）を変更し、コメントで正確に更新されたものを示します。



この研究の過程で、私のツールのコンセプトが生まれました。それをこの記事で急いで共有しました。



ツールボックスまたは独自の分類を満たすことができてうれしいです。 または、上記の代替種名を加速して作成することもできます（熊手-髪型、櫛、テスター-代理店、ハックスター、エミュレータ-パンドラ、銅パイプ）。



upd@29.04。 追加のサンプルと新しいツール



追加サンプル



アトミック 非常に価値のある製品です。ぜひ試してください。 マーベル、プリンシプル、フリントの間に何かを見ました。 そしてこれでは、あなたの作業プロセスに応じて、それは良いか、私の場合のように、実際にはそうではありません。 私のプロセスでは、それは十分に原始的ではなく（言葉の意味では）、Marvelのような「レーキ」のフィードバック機能が異なり、原理のような「アニメーター」としてはあまり便利ではなく、エミュレーターには届きません。 したがって、今のところ、この製品の楽しい印象を残して、私はそれを脇に置きます。

Flinto Lite 。 おもしろい仕掛けで、すっきりとした良いレーキ。 ただし、選択したクリック可能なゾーンをランディングページに接続し、すぐに消える投稿が実際に接続していることをすぐには認識しませんでした:)これを行うには、左側のサイドバーに小さなターゲットで「ターゲット：ランディングページ」を表示する必要がありました。 一般的に、このツールは興味深いものですが、Marvelの直接的な競合他社に出会った場合、2番目のツールは同じフィードバック機能とより良い価格の提案が豊富です。

ピクサート よく知り合った後、楽器の仕事はより明確になりましたが、今のところ私に適したものを言うことはできません。 ただし、忘れないでください。プログラムは無料なので、ブランカーに入れて定期的に入手することを妨げるものは何もありません。 Flintoとともに、彼らはほぼ同じレベルに住んでいるので、PCシュニックにとってこれは良い選択肢です。

フレーマー 10年以上前、雑誌で特定のCoffeeScript言語について読んだことがあります。 彼と少し遊んだので、私はそれを他の時間に延期することにしました。 フレーマーに会った後、これらの時代が来たようです。 キャンバスとそのオブジェクトをうまく制御できます。この素晴らしいツールをより詳しく知り、ツールの分野の配置を大幅に修正した後で見ました。 アニメーターとエミュレーターの両方の役割をすぐに主張します。

InVision 。 Silver Flowsに加えて、彼らはMacaw 、 Easee 、 Relayも購入したことがわかりました 。 どんな種類の船になるか想像するのが怖いので、この農場から大きな関心を寄せてくれるのを楽しみにしています。



自分で見つけた新しいツール



フロイド 。 Macプラットフォーム用のプロトタイピングとHTMLへのアップロードのための興味深い無料ツール。 多くの可能性がありますが、これまでのところ湿っていて、ありふれた欠陥がいくつかあります。 先週試しましたが、今はサイトを利用できません。 私はまだ何が起こったのか分かりませんが、すべての消防士のために私は彼をここに残します。

コンセプト 。 プロトタイピングとUX分析のためのWebプラットフォーム。 このプロジェクトはまだクローズドベータです。 料金プランにグラデーションはありません。プロトタイピングには1人あたり月額30ドルかかります。興味のあるアナリティクスの場合は、月額100ドルを要求します。アナリティクスは1つだけではなく、月額130ドルを支払う必要があります。 彼らがこのような金融モデルを選んだ理由はわかりません。このツールで作成されたプロトタイプはサイト上にあり、特別なものは何もありませんが、そのような値札の分析で何が起こるかさえ想像できません。 登録後、キューの1154番目の番号が与えられたので、今は少ししか待つことができません。

クレオ このツールで作成されたプロトタイプは、魔法のようにネイティブアプリケーションに変わります。 この製品の第一印象は、デモビデオの最後に小作人を作るうなずきに似ています。 実際、公式リリースの結果は非常に興味深いものです。現在、製品はオープンベータ版です。

Noodl レビューでのコメントで言及されたNoodlは本当に興味深いものですが、それは別の知人を必要とします。それを視覚プログラミングの知人の段階に委任しました。

タンパク質 。 デザイナー、開発者、テスターがインターフェース設計で協力できるようにする非常に興味深いロシアのサービス。 CPUの詳細なストーリー 。



upd@21.06。 おわりに



市場を十分に調査したので、私はこの記事に終止符を打ち、プロトタイプ作成に入る経験をすることにしました。 私は必要なものすべてを研究し、私が触れたいと思っていた、すでにリリースされていたすべての製品について最終的な結論を出した。 これが私のスティックに蓄積された印象と発見です。



ヒューズ Creolabsに似た奇妙なコンストラクターで、AndroidおよびiOS用の実際のアプリケーションをアンロードできます。 これは、特に大量のソース例と活発なコミュニティがあるため、習得が容易なXMLの一種であるUXマークアップに基づいています 。 無料のオープンベータ。



ポップ 独自のフリーハンドアウトラインから簡単なプロトタイプを作成します。 非常にシンプルで快適。 1人あたり2つのプロトタイプの場合、無料で使用できます。



CanvasFlip さまざまな方法でテストのためにユーザーに送信できる単純なプロトタイプを簡単に作成できる、もう1つの大きなレーキ。 分析は優れています。コンバージョンファネル、インタラクティブヒートマップ、セッションビデオを見ることができます。 それは非常に楽しい印象を残し、さらにプロジェクト管理のためのシンプルなボードがあります。 無料の試作品が5つあります。



コンセプト 。 Marvelのほぼ完全な類似体で、私が感心しなかった分析の小さな部分がありました。 また、アナログを無料で使用できる場合、コンセプトにはまだ月額130ドルが必要です。



Noodl 新しいバージョン1.0は、新鮮な機能だけでなく、特定の専門分野、つまりモノのインターネットも獲得しました。 開発者であるTopp Studioは、機能するプログラムを起動する際に、 優れた例とレッスンをリリースに提供しました。Chromeの拡張機能であることを思い出してください。



クラフトプロトタイプ 。 以前はSilverFlowsとして知られていた待望のツールのベータリリースには、楽観的なプロモーション記事が含まれていました 。



Qwikly 。 プロトタイプだけでなく、実際のアプリケーションを生成できる別のツール。 開発中、2016年後半にリリース。



uilang 。 プロトタイピングを含む、デザイナー向けの非常にシンプルなフレームワーク。 著者はまた、デザイナーがJSを理解し習得し始めるための優れた出発点として位置付けています。 トランスポーター （翻訳者）が注目に値する： clicking on "#switch" toggles class "active" on "#switch"



などの簡単な文を入力すると、何らかのjsコードが得られます。



ブロック 。 コードを書くのが面倒な人には、素晴らしいビジュアルエディターを使用できます。これにより、レイアウトが楽しくなります。



Tumult Hype このツールでは、より高度なレイアウト機能（アニメーション、物理など）を調べることができます。



スクラッチ 。 そして、プログラミングの学習に遊び場を活用してみませんか？ :)非常に基本的なことは誰も気にしませんでした。



QtQuick 。 そして、基本を理解しやすいレベルにキャプチャして開発した後、このライブラリを使用して最初のクロスプラットフォームアプリケーションを記述できます。 これは紹介ビデオで確認できます。



ロシアのプロトタイピングクラブグループは、プロトタイピング市場の動向を把握しています。 そして、Mediumのブログでプロトタイピングのさらなる研究を行います。 すべて成功！