LogoMarkWhite.png

諸琳/調査研究1 のバックアップ(No.13)


諸琳|「動き」について


CONTENTS

'諸琳/調査研究1' does not exist.




はじめに

一般にWeb画面では,動的画面は図形、カラーブロック,フォントの動き変化から構成されることが多く,運動のデザインは動的要素の重要な部分である。この章では、1) 運動の基本スタイル、2)視点の運動、3)動きの構成、および4)動的効果の機能方式について調査した。



運動の基本スタイルについて

変位移動

変位とは、物体の位置における移動視覚要素(・素材)の位置の変化と方向指向の変化変位が動の要素における重要な情報表現の1つであることを意味する。変位には以下のような表現がある:

変形

視覚的な要素は、形状や体積が変化し、 形状の変化に規則性があるかないかで、規則的な変形と不規則な変形の2つに分けられる。

回転

デザイン要素が特定の軸を中心に回転する動作のこと。 回転運動は自己回転運動であり、この間は大きな位置の変化はない。 位置が大きく変化することはない。

変質

画像特性が同じ変化の場合の形状や輪郭のデザイン要素




動的効果の機能

交流トランジションとトランジション (Interactive transition and transition)

視覚コアと感情化アニメ展示

視覚展示クラスのUI動作は、第1の時間にユーザの視覚を吸引することができ、製品のコア機能と特徴をよりよく強調し、ユーザの視覚的流れを誘導し、ユーザが製品を理解するのを助けることを目的とする。
主にトップページ,案内ページ,スクリーン動画,登録登録ページなどのシーンで用いられる。

シーンと機能ガイダンス

シーンと機能ガイダンスのUI効果は、ページ上のいくつかの要素やモジュールを変更することで、異なるレベル間の視差を開放し、ユーザーを次のステップに誘導するために使用されます。 その目的は、ユーザーの注意を1つの要素やモジュールに集中させ、他の要素やモジュールとメイン要素の干渉を減らし、ユーザーをメイン要素に引き付け誘導することである。 よくある例としては、ブレスボタン、新機能、ホバーボールなどがある。

ローディングと操作フィードバック

ローディングとフィードバックのUIエフェクトの違いは、ローディングエフェクトは、ネットワーク、データの読み取り、キャッシュなどのためにページ要素が時間内に応答できないため、トランジションとして使用されるのに対し、フィードバックエフェクトは、ユーザーの心理的な期待に応えるコンテンツを提示する即時のフィードバック変更する。



動きの持続時間と速度

UX機能を持つアニメーションでは、タイミングが重要です。 動きの時間は短すぎてはいけません。ユーザーがインターフェイス要素の遷移や変化に気づくのに十分な時間を与える必要がありますが、ユーザーが引きずられるように感じるほど遅すぎてもいけません。
人間の目にとって、100ミリ秒以下のモーション・エフェクトを認識するのは難しく、モーション・エフェクトの最適な持続時間は200ミリ秒から500ミリ秒の間です。 アニメーションの最適な継続時間は200ミリ秒から500ミリ秒の間です。 インタラクションのシナリオが異なれば、アニメーションの妥当な動作時間も異なります。 Google Material Designは、アニメーションの動作時間を次のように提案している。

モバイル

モバイル機器では、アニメーションは通常約300msで終了します。 オブジェクトが画面に入ってくる時間は約225ms、オブジェクトが画面から出ていく時間は約195msです。400ms以上のアニメーションは遅く、ドラッグしているように見えます。

大画面のモバイル機器

大画面のモバイル機器では、同じ時間帯で、オブジェクトは短い距離よりも長い距離を速く移動します。 画面が大きいほど、オブジェクトの移動時間を長くして、ダイナミックな効果が速すぎないようにする必要があります。

タブレット端末

タブレット端末のアニメーションの持続時間は、モバイル端末よりも約30%長くする必要があります。 モバイルデバイスで300msの持続時間は、タブレットデバイスでは約390msになるはずです。

ウェアラブルデバイス

ウェアラブルデバイスは、持続時間の動的効果について、モバイルデバイスよりも約30%短くする必要があります。 モバイル機器での300msの持続時間は、ウェアラブル機器では約210msであるべきである。

上記の分析に基づき、視覚的重み付けと運動速度には以下の4つのタイプがある:大面積で長時間の撮影、大面積で短時間、小面積で長時間の場合、小面積で短時間



動きの表現形式

gif

PNGフレームアニメーション(シーケンスフレーム形式)。

WEBP

SVG Animation

JavaScriptとCSS動画




マイクロ·インタラクション  Micro Interactions

マイクロインタラクションとは、特定の場合、ユーザのインタラクションが、製品が特定の動作または動作を完了するにつれて行われることを意味する。

ユーザ体験設計ではマイクロインタラクションがますます重要になってきているが、動的設計はマイクロインタラクションの魂であり、わずかな視覚提示やフィードバックであっても、マンマシンインタラクションが使いやすい鍵である.。
典型的なケースから見ると、マイクロインタラクションの動画の詳細は明確な目的性を持ち,ユーザにリアルタイムフィードバックを獲得させ、ユーザに次のステップを指導しなければならない。

近年の設計傾向から,マイクロインタラクションは不可欠な存在となっている.

マイクロインタラクションの目的

マイクロインタラクションのもたらす効果


参考





(より具体的な研究テーマを選択するために、事例を探し、運動効果やUXの種類を分類し理解することを続けいます)。

利用シーンに応じて、ダイナミックな演出や適切な動きのリズムを用いることで、ユーザーに一定の情報表現を伝える。



参考情報・文献