web-dev-qa-db-ja.com

インタラクションデザインで「アニメーション効果」をどのように説明しますか?そして、どのフェーズでこれを行いますか?

質問:インタラクションデザインのアニメーション効果(またはギミック)をいつどのように説明しますか?

説明:アニメーション効果/ギミックでは、「ボタンの上にマウスを置くと光ります。クリックすると光ります。星と虹を上から撮影します。」.

そのようなアニメーション効果の説明は、設計ドキュメントではどのように見えますか?そして、どのフェーズで、どのアニメーションを使用し、どのように見えるか、またはユーザーエクスペリエンスに影響を与えるかを決定します。

これも私が参照しているアニメーション効果の例です:

Selecting a whine will make it float and it will fly to your "bag" when clicked "add to cart"

上記の例のuser-storyは次のようになると思います。「顧客として、カートにワインボトルを追加できます」

そしてuse-case:追加ボタンをクリックすると、アイテムがカートに追加されます

そして、モックアップには、ページの静止画像があります

しかし、どこに/いつ、マウスが上に移動するとボトルが浮き、「カートに追加」をクリックするとカートボックスに飛ぶという事実を説明しますか?

3
DennisW

これをaffordanceと呼びます。

アフォーダンスは、物事の操作への強力な手がかりを提供します。 UIの適切なアフォーダンスは、通常、物理的な世界の知識と、物理的なオブジェクトとの対話方法を活用します。

最初の例のアニメーションは、アイテムを操作できること(ボ​​トルを持ち上げたときのようにボトルが持ち上げられること)を示し、クリックすると、アイテムがショッピングカートに移動することを示しています。物理的な世界との強い類似性があります。

5
Franchesca