it-swarm-ja.com

インタラクションとアニメーションを拡張可能な方法で定義する方法は?


解答可能性のために要約された質問全体:

  • デザイナーが本当に複雑なUIを定義するのはどのようにしたらよいでしょうか?
  • 精神的な創造プロセスがどのように機能するかをツールにマッピングするのは良いアプローチでしょうか?

いつか、現在あるものよりも優れたデスクトップアプリケーションのUIデザイナーを作りたいと思っています(これは長期プロジェクトです)。本当に拡張可能なフレームワークを持つことが可能かどうかについて、私はすでに考えを集めようとしています。

私が目にする主な問題は、コンポーネント間の相互作用などの高レベルの抽象化と、半透明の表面にぼかしを適用するなどの低レベルの機能の間で反復できる必要があることです。これには、ユーザーインターフェイスを構成する適切なモデルが必要です。

「アニメーション」は、ぼかしやノイズなどの画像にエフェクトを適用することから、3Dでオブジェクトを移動すること、パスを塗りつぶしながら光のフレアをパスに移動させること、想像できるものまで、何でもかまいません。

相互作用も複雑です。別のアニメーションが進行中の場合や、一部のデータが存在しない場合などに、あるアニメーションを実行したくない場合や、イベントで何らかのアクションをトリガーしたい場合があります。

これらすべてをコードから定義することは、どんなコードであっても、理想的ではありません。デザイナーの観点から、そのようなものが「理想的」であるか、視覚的にもっと良いかについての意見を求めています。

つまり、のUI/UXデザイン環境は、あなたの夢はありますか?

(注:これらの問題は、ウェブサイトやモバイルのデザインにも当てはまるため、それらの分野について意見があれば、歓迎します)。

更新:

それがどうやってできるかについて私が持っているいくつかの考えを明らかにします。

何よりもまず、目的の1つは、デザイナーの作業とプログラマーの作業を完全に分離することです。

アプリケーションロジックを作成する前に、UIとUXを検討する必要があると私は信じています。GUIを見ると、欠落している機能や不要な機能がわかりやすい場合があります。
そのため、UIがコードを実行しない場合でも、デザイナーはUIで複雑な相互作用を作成できる必要があります。これにより、UIのデバッグも容易になります。

したがって、アプリケーションは次の要素で構成されるUIにAPIを公開します。

  • 「アクション」(パラメーターありまたはなし)
  • "プロパティ"
  • 「リクエスト」(つまり、パラメータのある機能。パラメータのない関数はプロパティのように見えます)

設計者は、カスタマイズされた形式で無意味なデータソースを提供するツールも持つため、Lorem Ipsumのように、デバッグ構成で「偽のプロパティ」にデータバインドする場合があります。

デザイナーに公開されるプロパティは、オブジェクトにすることはできません。 "Text"(文字列)、Integer、 "Decimal"、または "Image"などのいくつかの単純な汎用データ型になります(つまり、デザイナーにとってシンプル、後でパフォーマンスの問題を処理する方法の詳細)、いくつかの単純なタイプの配列、または「複合データ」、 タプル の概念に似ています=、いくつかのデータ型または配列をグループ化します。
これは、設計者が必要なデータを要求するか、デバッグ目的で偽のデータを簡単に生成できることを意味します。

では、パフォーマンスについてはどうでしょうか?

ええと、私たちは皆、同じ画像を何度も生成することはコストがかかることを知っていますが、設計者はこれについてあまり考えないようになっています。代わりに、同じ要素に対する繰り返しのリクエストは、APIのアプリケーションコード(プログラマーが作成)とUIの間の仲介者によってキャッシュされます。

私はまだこれの実装の詳細について考えていますが、プログラマーがAPIに同じパラメーターで同じ関数を何度も呼び出すと同じ結果が生成され、APIがこの関数の結果をスマートにキャッシュできることを意味します。
これを実装できる方法であれば、それが目的であるため、設計者には透過的です。

UI構成について考えているいくつかの概念について:

(かなり自明の用語)

Surfaces:プロパティと形状を持ち、マテリアルにバインドされているユーザーインターフェイスの基本コンポーネント。内部的にはベクター形式で表現されます。
Material:複数の要素のスタイル(グラデーションやテクスチャの塗りつぶし、境界など)を1か所で定義できるUIの共有要素、ドロップシャドウなど)。
コンポーネント:独自のロジックを備えたUIの一部で、生成するなど、サーフェスよりも高度な機能を実行できます 粒子効果 、相互にインタラクティブな方法で他のコンポーネントにリンクし、独自のサブコンポーネントを生成します。これにより、アニメーションの「読み込み中」の円のような特定の効果( このように )をより簡単に作成できます。それらにはスクリプト言語、おそらくJavaScriptエンジンが含まれます。
効果/遷移:これらは、UIの他の部分または状態の変化によってトリガーされることを目的としています。 ButtonFoo.GlowPanelBar.MoveToLeftなどは、デザイナーによって名前が付けられて設計され、名前空間のようなシステムにグループ化されます。
状態:これらは、UIの現在の状態を表し、トリガーで使用できます。
トリガー:これらは特定のエフェクトまたはトランジションを起動します。
条件:これらは、トリガーにアタッチできるチェックです。

デザイナは、デザイナ側から消費されたプロパティに似たシステムによって、プログラマにデータを公開することもできます。

7
Camilo Martin

私は、ユーザーが一度に1つのことに集中している可能性があると思います:ビュー階層内のいくつかのビューである可能性があります(1)。それ以外の場合、同時に多くのインタラクションビューがある場合、これらのビューは(良好になる)独立している必要があります(2 )。したがって、(1)の場合、アプリケーションは状態の現在のビューを制御でき、(2)の場合、アプリケーションは独立したビューの状態を同期する必要はありません。

たとえば、開発者は イベントドリブン有限状態マシン を実装して、依存するすべてのビューの状態を処理するか、または Iトリガー を使用してアニメーションを再生する必要があります。

1
igor