私のお気に入りのプロトタイピングツールをお見せしましょう

May 09 2022
その間、インタラクションデザインのプロセスについても説明します。
私は、ツールがプロセスよりも重要ではないことを知るために、10年以上にわたってデジタル製品を設計してきました。探している結果が得られる限り、自分に最も適したソフトウェアを使用できると思います。
著者による画像

私は、ツールがプロセスよりも重要ではないことを知るために、10年以上にわたってデジタル製品を設計してきました。探している結果が得られる限り、自分に最も適したソフトウェアを使用できると思います。

各ツールの長所と短所の比較リストを作成して、製品設計のニーズにどちらを使用するかを決定するのに役立てることは私の意図ではありません(ただし、途中でそれを支援できれば、すばらしいです)。インタラクティブなプロトタイプを作成した経験の一部を共有する前に、これを強調したいと思います。

チームワーク、リアルタイムコラボレーション、カスタマーエクスペリエンスが重要となる製品開発に関しては、選択肢を検討し、選択したソフトウェアがニーズだけでなく、最適であるかどうかを継続的に再評価する必要があります。使い慣れた特定のツールを使用することは、それらが他のすべての人にとって可能な限り最高の仕事をすることを意味するわけではありません。心に留めておきます。

それでは、私のお気に入りのデザインツールについて話しましょう。

私は長年Sketchを使用して製品のインターフェイスとシステムを設計してきましたが、Figmaに切り替えた後は振り返ることはありませんでした。迅速なチームコラボレーションとクラウドファイル管理が、変更の2つの主な理由でした。

いくつか例を挙げると、FigmaやSketch以外にも、InVision、Adobe XD、Marvel、FramerなどのUIデザインツールを何十も試しましたが、プロトタイピングに関しては同じことが起こりませんでした。私は2015年に最初に遊んで以来、特に1つの大ファンです。

Principleに出くわす前は、私のデザインは非常に静的でした。開発者に要素またはページ間の遷移を実装する方法を伝えるには、仕様を書き留めるか、複数のフレームごとの画面を作成して、インタラクションイベントをどのように想定したかを示す必要がありました。

しかし、言う代わりに、私が彼らに見せることができたらどうでしょうか?それで私はその方法を学ぶことにしました。

小さな実験と知識の共有による学習

Principleを使用すればするほど、マイクロインタラクションに夢中になります。これらの小さな実験を作成することで、自分の創造性と製品の考え方を表現することができ、より優れたUXデザイナーになりました。

これらのプロジェクトやその他のマイクロインタラクションアニメーションの詳細については、私のウェブサイトをご覧ください‍

Principleの仕組みを理解すると、必要なレベルの詳細でアニメーションを作成するのが非常に快適になりました。プロトタイプの複雑さは、結果の品質とともに指数関数的に拡大しました。それは私が私の仕事を次のレベルに引き上げることを可能にしました。

数年前にDribbbleに積極的に投稿したとき、私はPrincipleの熱心な支持者であったことを覚えています。以前は、自分が取り組んだすべての個人プロジェクトのオープンソースファイルを共有していたので、誰でも突き刺して自分のバージョンを作成できました。

それが、世界中の人々によって作成されたインスピレーションあふれる作品の無限のページをコミュニティに還元する私の方法でした。私が共有した作業について肯定的なフィードバックを得たり、他のデザイナーが私のプロトタイプから学んでいるのを見ることができて、とても充実していました。とても楽しい時間です!

Principleに基づいてプロトタイプを作成する方法

Principleは、「コードなし」のプロトタイピングツールです。私はそれを使ってインターフェースを設計することは決してありません(あなたができるとしても、それがそのために最適化されているとは思いません)。私は常にFigmaからUIをインポートします。

ステップ1:基礎

アニメーションとトランジションの詳細に入る前に、インターフェイスの基盤に取り組みます。視覚的な要素に焦点を当てる前に、プロトタイプの主要な構造とナビゲーションを理解して理解することが不可欠です。

  • ワイヤーフレーム:一枚の紙に描くと、全体像を把握するのに役立ちます。
  • 忠実度の低いUI:クイッククリックスルーユーザーテストを実行する前に、ワイヤーフレームからより使いやすいインターフェースに移行すると役立つ場合があります。この時点では、色や画像は必要ありません。
  • クリックスループロトタイプ:アイデアを検証し、やり直しを避けるためにナビゲーションが理にかなっていることを確認することが不可欠です。
  • 忠実度の高いUI:最終的なUIができたら、プロトタイプを次のレベルに引き上げます。

これは常にプロセスの中で私の最も嫌いな部分でした。組み込みの「インポート」機能は、要素の位置がずれたり、他の問題が発生したりすることがあるため、十分に一貫性がありません。したがって、私は自分でインターフェースを再構築する必要があります。

はい、大変な作業であることは承知していますが、少なくとも私にとっては価値があります。ビデオ、ループアニメーション、複雑なインタラクティブイベントを組み込む必要がある場合、Figmaですべてを実行することはできません。

ステップ3)ドライバーとアニメーションパネルの操作

彼らはあなたの親友です。それらがどのように機能するかを理解することは、始めるために必要なすべてです。

ドライバータイムラインと同様に機能し、同じアートボード内のプロパティの変更(キーフレームを使用)に基づいてアニメーション化します。ドラッグ、スクロール、またはページネーションイベントに最適です。ドライバーを使用して、以下のNikeAdsコンセプトプロジェクトの視差効果を作成しました

ナイキのフルページモバイル広告のコンセプトプロジェクト。これはDribbbleで最も人気のあるショットの1つでした
「ドライバー」パネルと視差スクロール効果の作成に使用されたすべてのイベントを示すPrincipleのインターフェースのスクリーンショット

アニメーションページ間のアニメーションをカスタマイズするために使用されます。「前」および「後」のイベントに似ています。異なるページの2つのレイヤーの名前が同じで、プロパティが異なる場合、トランジション中に自動的にアニメーション化されます。クリックホバープレスイベント最適ですAnimateを使用して、以下の写真クラスWebサイトコンセプトプロジェクトのページ間のトランジション効果を作成しました

Muzliの2017ArticleDribbble Trend —Mondrianizmに触発された作品。私のウェブサイトでもっと読む‍
ページ遷移を作成するための「アニメーション」パネルイベントを示すPrincipleのインターフェイスのスクリーンショット

これらのアニメーションを作成するために、After Effectsなどの他のモーションデザインツールを使用しないのはなぜですか?Principleはより費用効果が高く、簡単なインターフェースを備えているためです。これは主にプロトタイピング用に設計されており、設計対象のデバイスで直接テストできるコンパニオンモバイルアプリの利点があります。

最終メモ

Figmaは、強力なプロトタイピング機能を備えた優れた設計ツールであり、新しい更新のたびに改善を続けます。チームのコラボレーションと状況に応じたフィードバックに最適です。そのため、Figmaは、すべて同じワークスペースでかなりまともで現実的なプロトタイプを作成できるため、私の選択したツールです。

一方、Principleは、高度なインタラクティブイベントと複雑なUIアニメーションをビデオスニペットやアニメーションGIFと組み合わせてプロトタイプを作成するための私の個人的な選択です。これは、特別なプロジェクトのためにバックポケットに入れておく、私のお気に入りのコードなしプロトタイピングソフトウェアです。

あなたはPrincipleのファンでもありますか?コメントで教えてください。

ハッピープロトタイピング、そして読んでいただきありがとうございます。

素晴らしい滞在!

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved