Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile frontier chapter7

996 views

Published on

  • Login to see the comments

Mobile frontier chapter7

  1. 1. 第7章 モーションとアニメーション 2012年7 7⽉28⽇ ARCHIT 安藤直紀
  2. 2. 第1部 第2部 第3部 第4部バイルの特殊性 現れつつある モバイルの モバイルUXの未 モバイルのパターン モバイルのパタ ン エクスペリエンスを 創る い ユ モ 形 モ モ モ 感 う ー バ デ 態 バ バ バ 動 情 新 パ ザ イ ン の イ イ イ き に し ラ ー ル バ 変 ル ル ル の 働 い ダ イ 固 ー 遷 の の プ つ き モバ イ の ロ け か イ ム ン 有 ピ ト か け ル UX UX パ パ タ の ー タ タ タ た る の ーフ ナチ ナッ イ 形 ェ ー ー ピ ー ュ ツ ン ン ン ス ラ バ 5 グ と ルな ター 選
  3. 3. Layer6:ビジュアルデザイン ・視覚的にどのように⾒せるか? 視覚的にどのように⾒せるか? ビジュアルデザイン ビジ アルデザイン ・どう演出するか? Layer5:コンテンツ作成 ・どんなコピー、⽂章、写真に展開するか? コンテンツ作成 Layer4:情報設計・インタラクション ・画⾯の中で情報をどう整理するのか? 画⾯の中で情報をどう整理するのか? インタラクション 情報設計 ・ユーザーの⾏動にどんな反応を⾏わせるのか? デザイン (画⾯構成) Layer3:サイト構造設計 y ・情報をどう整理して構造化するのか? 情報構造設計 ・ユーザー導線、ユーザータスク検討 Layer2:機能・コンテンツ要件 Layer2:機能 コンテンツ要件 ・どんなコンテキスト、コンテンツにするか? 機能要件 コンテンツ ・どんな機能をどのように実装するか? 要件 Layer1:戦略・施策検討 ・ビジネス・ユーザー条件検討 戦略・施策検討 (ユーザーニーズ、ビジネス要件) ・ターゲットユーザー、ペルソナ、シナリオ検討 ・ユーザーニーズ、ビジネス要件検討アニメーションに関する書籍で で紹介されている12の基本原則を
  4. 4. モバイルエクスペリエンスにおいてわずかな動きを伴 伴ったアニメーションは強制的なデザイン材料として扱われ始めている幼少時の⼟曜⽇朝のテレビタイムの回想 Movement breathes life into everything it touches o touches. 「動き」が全ての触れるものに命を与える
  5. 5. アニメーションにおける12の基本原 原則 1.潰れと伸張 2.予期(アフォーダンス) 3.ステージング 4.Pose to Pose 5.フォロースルーとオ オーバーラップ 5.ゆっくり始まりゆっくり終わる 7.アーク(弧) 8.副次的なアクション 9.タイミング グ 10.誇張 11.ソリッドドローイ グ リ ドド イング イ 12.アピール
  6. 6. 1.潰れと伸張現実世界にあるものの持つ質感の特 特徴を考えて、取り⼊れる。 特徴を考えて 取り⼊れる・本棚や⽊の椅⼦について、堅くて曲がらない印象を持っている・布⽣地や植物の葉について、柔 布⽣地や植物の葉について、柔 柔軟性を持っていると思っている Flip”board”は硬さを表現、iBook ksは曲がりで薄さと柔軟さを表現
  7. 7. 2.予期(アフォーダンス)アクションをアニメーションで表現アクシ ンをアニメ シ ンで表現 現するのに必要な3つの状態 アクションの アク クション アクションの結果 準備完了状態 その のもの 次に起こること とを予期させる
  8. 8. 2.予期(アフォーダンス)WindowsPhone7でのアプリケーシ ン の遷移Wi d Ph 7でのアプリケ シ ションへの遷移 次に起こること とを予期させる これは本当にタイルUIへの の予期をさせているのか?
  9. 9. 2.予期(アフォーダンス)Palm Preで⾒られるアフォーダンスP l P で⾒られるアフ ダン 操作⽅法を予期させる
  10. 10. .ステージング(演技⼒?)インタラクションの遷移を明確に伝インタラクシ ンの遷移を明確に伝 伝える 「リアルだけど伝わらない」より「伝わる⾒え⽅」 「リアルだけど伝わらない」より「伝わる⾒え⽅」
  11. 11. .ステージング(演技⼒?)インタラクションの遷移を明確に伝インタラクシ ンの遷移を明確に伝 伝える iPad版Keynoteで⽤いられ れているステージング。 ファイル構造の中でどれに フ イル構造の中 どれに に働きかけているのかわかり に働きかけ るのかわかり エクスペリエンスをより強 強固にさせる(適切なサンプル?)
  12. 12. 4.Straight AheadとPoseToPose e■Straight Ahead キーフレーム間のシーケンス キ フレ ム間のシ ケンス を全て可視化する■Pose to Pose キーフレームのみの表現 単純な遷移ならPos to Poseで⼗分。 se
  13. 13. 4.Straight AheadとPoseToPose e ■Pose to Poseの例 ■Straight Aheadの例 g 例 ⾃分の⼟地の育成が主⽬的 果物を切る爽快感がこのアプリの 新しい作物が誕⽣したことの表現は 体験価値 それほど重要ではない
  14. 14. 5.フォロースルーとオーバーラッ ップ 各要素をタイミングをず ずらしたり速度をずらす
  15. 15. .ゆっくり始まりゆっくり終わる(加速度の表現) 慣性の採⽤、 、イージング
  16. 16. .ゆっくり始まりゆっくり終わる(加速度の表現) 慣性の採⽤、 、イージング
  17. 17. .ゆっくり始まりゆっくり終わる(加速度の表現) 慣性の採⽤、 、イージング
  18. 18. .弧物体は様々な⼒によって⽅向性を物体は様々な⼒によ て⽅向性を を持って動くが軌跡は⽬に⾒えない を持 て動くが軌跡は⽬に⾒えない機械は直線的に動くし、有機的な なものの軌跡は曲線を描く
  19. 19. .副次的なアクション 体と⾜としっぽの動きは別 ぽ
  20. 20. 副次的なアクション 「追いやられるスクリーン ン」の横移動と 「新しいウインドウ」が⼿ ⼿前に移動の別々の動き
  21. 21. タイミングサイズや重さ、スケ ルなど現実サイズや重さ スケールなど現実 実の感覚を想起させるのに重要 シュッと広がる、ずず ずずいっと広がる
  22. 22. 0.誇張⾮現実的な強調表現は親しみが⽣まれる ⽣まれる ⽣
  23. 23. 0.誇張⾮現実的な強調表現は親しみが⽣まれる ⽣まれる ⽣
  24. 24. 1.ソリッドドローイング主にキャラクタ 表現で使われる主にキャラクター表現で使われる る⼿法だがモバイルUXにも応⽤可陰や光を使った3次元表現で重さ さやバランスの表現を⾏う
  25. 25. 2.アピール必ずしもポジティブな印象や同情 情を誘うようなものでなくてよい醜いもの、モンスターでも同様に にアピールになる
  26. 26. モーションを成果物に組み込むため めの⼿法 スケッチ
  27. 27. モーションを成果物に組み込むため めの⼿法 ワイヤフレ ム ワイヤフレーム
  28. 28. モーションを成果物に組み込むため めの⼿法 プロトタイピング
  29. 29. モバイルUXプロジェクトを実施する る際のTips ・やりすぎを抑えることを学ぼう う 提供しようとしているユ ザー体験をやりすぎないこと 提供しようとしているユーザ 体験をやりすぎないこと ザ ・法則を補完し合う それぞれの法則は単独では望望ましい効果を達成し得ない。 それぞれを協調させること ・サポートの役⽬としてのアニメ メーション モバイル体験の中でアニメー ーションは補助的な役割 ⼿段と⽬的を間違えないよう うに
  30. 30. 感想 ・12の法則は明確に分離していな ない 法則として正しいが、サンププルが適切でないものも。 今後多くの事例が⽣まれて初初めて完成するのかも ・感覚の違いを吸収するためのプ プロトタイピング コンパイルが必要なプロダク ンパイルが必要なプ ダク クトでは難しい? クト は難し ? アニメーションを検討するた ためのツールの必要性がありそう

×