#author("2023-07-21T11:53:09+09:00;2023-07-21T11:41:50+09:00","default:inoue.ko","inoue.ko") *諸琳｜「動き」について #author("2023-11-01T12:05:33+09:00","default:inoue.ko","inoue.ko") ~ ***CONTENTS #contents2_1 ~ ~ **はじめに 一般にWeb画面では，動的画面は図形、カラーブロック，フォントの動き変化から構成されることが多く，運動のデザインは動的要素の重要な部分である。この章では、1) 運動の基本スタイル、2)視点の運動、3)動きの構成、および4)動的効果の機能方式について調査した。 ~ ~ **運動の基本スタイルについて ***変位移動 変位とは、物体の位置における移動視覚要素（・素材）の位置の変化と方向指向の変化変位が動の要素における重要な情報表現の1つであることを意味する。変位には以下のような表現がある： -並進（トランスレーション）：デザイン要素を水平方向（X軸）、垂直方向（Y軸）、縦方向（Z軸）にスムーズに移動させること -経路運動：ペンやベッセルツールなどを用いて閉じたまたは開いた線、視覚要素の特定の軌跡に沿った変位運動を描画する -サラウンド運動：視覚要素が他の物体を中心にして行う環状の円環運動 (地球が太陽の周りを回る) -往復運動：デザイン要素が2点間を繰り返し移動すること（例：左から右へ、そして右から左へ） ~ ***変形 視覚的な要素は、形状や体積が変化し、 形状の変化に規則性があるかないかで、規則的な変形と不規則な変形の2つに分けられる。 ~ -規則の変形：視覚要素の外形変化は明らかな規則性が現れ、漸次的で規則的な運動変化である。 規則変形は人に秩序、厳密、甚だしきに至っては機械的視覚感覚を与え、比較的に強い規則性を持っているため、変形の結果はしばしば計算されることができる。規則変形は最も基本的で、最も一般的な運動効果の1つであり、規則変形の表現方法は多くの種類があり、一般的なものはスケーリング、ねじれ、曲げ、膨張、ねじれなどである。 --1）スケール：デザインの要素（・素材）の拡大と縮小です。スケーリングは、物体の面積と体積の変化を直接引き起こすことができる。視覚要素（・素材）は大から小へ、小から大へ、または延父から近へ、近から遠への変化運動効果 --2）曲げ：デザインの要素（・素材）は、1つの軸で回転したり曲げたりして変形させる --3）ねじれ：要素（・素材）をデザインして1つの軸方向に自分の軸に沿ってねじれ、外形変化を実現する。 --4）押出（スクイーズ）：デザインの要素（・素材）が1つまたは2つの軸に力を受け、外形が変化させること --5）膨張：デザインの要素（・素材）の内力作用による増大体積運動 -不規則なメタモルフォーゼ 不規則な変態とは、視覚的要素の形が、予測不可能なパターンから別の予測不可能な形に変化することである。 偶然性とランダム性がある（雲、水蒸気、落下する水滴、煙など、生活によくあるもの） --1) Bursting motion：完全な形態変化が割れた不規則な偶然状態(物体爆発時の瞬間状態をシミュレートし --2）溶解運動：規則的な形状が不規則な形状に変化する（水滴飛散） --3）押し出し運動：外力や内力の作用で規則正しい形が不規則に変形する（熱膨張・熱収縮） -成長 デザイン要素が何かから無へ、単純から複雑へ、あるいは無から単純、複雑へと減少していく過程のダイナミクスを指す。 絵の構図の基本要素は抽象的な点、線、面であり、それらは柔軟に変形し、相互に関連して使用することが可能である。 --1）点の成長：幾何学において、点は位置のみを表し、線に成長することができる方向性を持っている --2）線の成長：長さを伸ばしたり、幅を広げたりすることができる。 動的なイメージのデザインにおいて、線の成長は方向性や方向性を明確に持っている --3）面の成長：ダイナミックグラフィックスの絵の構成では、表面は組成の非常に顕著な要素である。表面の成長は、基本的に絵の全体的な効果を破壊しない、ほとんど視覚的要素や色の数の変化が、表面の成長は、関係の変化の組織の画像要素の一部を作ることができる、運動の効果を達成するには、画像の組成を豊かにしながら、動的効果をマスターするには非常に実用的かつ容易である。 --4）ブロック（・ボリューム）の成長：形状と体積を有する運動と変換（生活の中でよく植物、動物、骨格の成長など） ~ ***回転 デザイン要素が特定の軸を中心に回転する動作のこと。 回転運動は自己回転運動であり、この間は大きな位置の変化はない。 位置が大きく変化することはない。 ~ ***変質 画像特性が同じ変化の場合の形状や輪郭のデザイン要素 -カラーチェンジ：色の3要素（色相、明度、純度）の変化、透明感、暖色系と寒色系、無色から有色への変化 -テクスチャーの変化：：ビジュアルデザインにおいて、美術品の質感や絵の効果の異なる感情的な色を表現するために用いられ、ユニークな絵の効果やデザインテーマの表現 （新から旧へ、滑らかから粗へ、柔らかから硬へ、派手から素朴へ、ぼかしから透明へ、古代から現在へ、伝統からモダンへなどがある) ~ ~ **動的効果の機能 ***交流トランジションとトランジション (Interactive transition and transition) -ページ間の遷移関係や変更経路をより明確に理解することができ、ページを切り替える際に、何がどのように変更され、どのような新しいコンテンツに注意を払う必要があるのか、ユーザーに心的な期待を持たせることができる。 通常使用されるジェスチャーは、シングルクリック、ダブルクリック、スライド、ドラッグ＆ドロップ、2本指ズームなどで、ダイナミックエフェクトは、変位、拡大縮小、透明度、回転などのエフェクトを組み合わせ、さらにシルクのように滑らかなトランジションアニメーションで、変形とレベル間の切り替えを構築する。 ***視覚コアと感情化アニメ展示 視覚展示クラスのUI動作は、第1の時間にユーザの視覚を吸引することができ、製品のコア機能と特徴をよりよく強調し、ユーザの視覚的流れを誘導し、ユーザが製品を理解するのを助けることを目的とする。 主にトップページ，案内ページ，スクリーン動画，登録登録ページなどのシーンで用いられる。 ***シーンと機能ガイダンス シーンと機能ガイダンスのUI効果は、ページ上のいくつかの要素やモジュールを変更することで、異なるレベル間の視差を開放し、ユーザーを次のステップに誘導するために使用されます。 その目的は、ユーザーの注意を1つの要素やモジュールに集中させ、他の要素やモジュールとメイン要素の干渉を減らし、ユーザーをメイン要素に引き付け誘導することである。 よくある例としては、ブレスボタン、新機能、ホバーボールなどがある。 ***ローディングと操作フィードバック ローディングとフィードバックのUIエフェクトの違いは、ローディングエフェクトは、ネットワーク、データの読み取り、キャッシュなどのためにページ要素が時間内に応答できないため、トランジションとして使用されるのに対し、フィードバックエフェクトは、ユーザーの心理的な期待に応えるコンテンツを提示する即時のフィードバック変更する。 ~ ~ **動きの持続時間と速度 UX機能を持つアニメーションでは、タイミングが重要です。 動きの時間は短すぎてはいけません。ユーザーがインターフェイス要素の遷移や変化に気づくのに十分な時間を与える必要がありますが、ユーザーが引きずられるように感じるほど遅すぎてもいけません。 人間の目にとって、100ミリ秒以下のモーション・エフェクトを認識するのは難しく、モーション・エフェクトの最適な持続時間は200ミリ秒から500ミリ秒の間です。 アニメーションの最適な継続時間は200ミリ秒から500ミリ秒の間です。 インタラクションのシナリオが異なれば、アニメーションの妥当な動作時間も異なります。 __[[Google Material Design>https://m3.material.io/]]__は、アニメーションの動作時間を次のように提案している。 ~ ***モバイル モバイル機器では、アニメーションは通常約300msで終了します。 オブジェクトが画面に入ってくる時間は約225ms、オブジェクトが画面から出ていく時間は約195msです。400ms以上のアニメーションは遅く、ドラッグしているように見えます。 ***大画面のモバイル機器 大画面のモバイル機器では、同じ時間帯で、オブジェクトは短い距離よりも長い距離を速く移動します。 画面が大きいほど、オブジェクトの移動時間を長くして、ダイナミックな効果が速すぎないようにする必要があります。 ***タブレット端末 タブレット端末のアニメーションの持続時間は、モバイル端末よりも約30％長くする必要があります。 モバイルデバイスで300msの持続時間は、タブレットデバイスでは約390msになるはずです。 ***ウェアラブルデバイス ウェアラブルデバイスは、持続時間の動的効果について、モバイルデバイスよりも約30%短くする必要があります。 モバイル機器での300msの持続時間は、ウェアラブル機器では約210msであるべきである。 ~ 上記の分析に基づき、視覚的重み付けと運動速度には以下の4つのタイプがある：大面積で長時間の撮影、大面積で短時間、小面積で長時間の場合、小面積で短時間 ~ ~ **動きの表現形式 ***gifアニメーション ***PNGフレームアニメーション（シーケンスフレーム形式）。 ***SVG Animation ***JavaScriptとCSSアニメーション ***WEBP（動画フォーマット） ~ ~ **マイクロ·インタラクション Micro Interactions マイクロインタラクションとは、特定の場合、ユーザのインタラクションが、製品が特定の動作または動作を完了するにつれて行われることを意味する。 ユーザ体験設計ではマイクロインタラクションがますます重要になってきているが、動的設計はマイクロインタラクションの魂であり、わずかな視覚提示やフィードバックであっても、マンマシンインタラクションが使いやすい鍵である.。 典型的なケースから見ると、マイクロインタラクションの動画の詳細は明確な目的性を持ち，ユーザにリアルタイムフィードバックを獲得させ、ユーザに次のステップを指導しなければならない。 近年の設計傾向から，マイクロインタラクションは不可欠な存在となっている. ~ ***マイクロインタラクションの目的 -アクションに対するフィードバックを伝える -タスクの進行状況を伝える -現在のステータスを伝える -新着情報を伝える -エラーの発生を伝える 参考：https://webdesign-trends.net/entry/7583 ~ ***マイクロインタラクションのもたらす効果 -トリガー ユーザーのアクションを促す要素 -ルール ユーザーのアクションによって何ができるのかのルール -フィードバック ユーザーが何が起こったのか理解できるような動き -ループとモード どのような条件で 1 - 3を繰り返すのか ~ ***参考 -Micro Interactionsの紹介 https://mtame.jp/design/Microinteractions/ ~ ~ (より具体的な研究テーマを選択するために、事例を探し、運動効果やUXの種類を分類し理解することを続けいます）。 利用シーンに応じて、ダイナミックな演出や適切な動きのリズムを用いることで、ユーザーに一定の情報表現を伝える。 ~ ~ **参考情報・文献 -[[Wikipedia インタラクションデザイン>https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3]] -マイクロインタラクション ―UI/UXデザインの神が宿る細部 Dan Saffer,武舎 広幸,武舎 るみ オライリージャパン 2014/03/19 ~ ~