読者です 読者をやめる 読者になる 読者になる

ぷらこあ

雑記/ゲームアイデア帳/成果物ぺろり

【Unity道場05】モダンなUIの提案と実装 に参加しました

Unityメモ セミナー/勉強会/イベント

概要

eventdots.jp

  • 資料が公開されるかもという話なので私的メモレベル
    • 10minくらい遅れて行ったので漏れがあるかも
  • 講演者は @ivoryfunc さんと @tsubaki_t1 さん

追記: 資料公開されました!

tsubakit1.hateblo.jp

昨今のUI界隈で起きていること

  • 進んで行く専門性
    • スキューモグラフィック/自己回帰性/身体性/透明性
  • それに対してUnity
    • uGUIの正式なリリース、武器はある

環境が変われば読みやすいフォントも変わる

  • ディスプレイフォントの主流変化
    • 72dpi: ビットマップフォント
    • 96-250dpi アンチエイリアスは一般化したもの
    • 300dpi やっぱり一般な紙面で読みやすいフォントが良いよね

そもそもUIって何?

  • あっちの世界とこっちの世界をつなぐものと表現
  • PCを使用するのであれば、IFの存在は不可欠
    • コンピュータと人間という異質なもの同士をつなぐもの
  • 大まかに2種類存在する

誰のためのデザイン?

www.amazon.co.jp

  • 道具がうまく使えなかったら、それは道具のデザインが悪いせい
    • デザインはそもそも「問題を解決する」という意味
    • 問題が解決されていない時点で道具が悪い

理想的なインターフェイス

République

republique.gungho.jp

  • OMNIビューのUI
    • 初期段階: ダメだった
      • タップ可能領域がユーザに伝わらない、ボタンだと気付かれない
      • きわめてシンプルな物に変更

タッチデバイスに対する理解

  • マウスカーソルにあってタッチデバイスに無いもの

    • オンマウスフィードバック
    • カーソルヒンティング
      • カーソルの形状が変化する
  • タッチデバイスの場合

    • タップ可能であることが伝わらない

理解度の低下を補うヒント

  • メタファー

    • 物理的なボタンを模した形にする
    • 新しいインターフェース環境の誕生時に有効なアプローチ
    • そもそもPC自体はメタファーの山のような存在
      • カーソル/デスクトップ/フォルダ/ゴミ箱...
  • ロールモデル

    • アイコンを行間文字として使えば、プレイヤーは概ねボタンと見なしてくれる

上記の手段が使えないケース

www.youtube.com

  • タップした場所によって行動が変化する
    • 隠れる/立ち止まる/攻撃/ドアに入る....
    • 事前に伝えるのが難しい
  • タップ後にアイコンを出して行動をユーザに知らせた
    • 事前に知らせる事をあきらめ、事後に伝える様に変更した

脱メタファーの話

  • iMacいまむかし

    • だんだんシンプルになってる、スッキリした印象
  • OSのUIはどうあるべき?

    • 見た目の印象をハードウェアに合わせるべき?
    • あるいはデバイスを意識せず存在すべき?
  • スクリーンをプロダクトの延長の実平面か、仮想的な空間をのぞく窓と捉えるか

  • iOS6の頃
    • OSは素材感、質感、光といったフェイクに満ちている
    • ハードウェアは無駄を省いてシンプルになっていった
    • ここに乖離が生じている
  • ユーザインターフェイスとヒューマンインターフェイスの乖離
    • 理想的に近しい方が望ましい

UIをプロダクトの延長に存在し得るための試み

  • とりあえず見た目を合わせてみる

    • ミニマルなデザインならルックアンドフィールの無駄を省く
  • 動きを変える

    • 現実の世界と同じルールで動かなくてはならない
      • iOS最後のアップデート後のiTunesの金属つまみはジャイロで光が反射する仕様
    • 効率よりも分かりやすさ/自然さを優先させてみよう
      • 身体に近いもの
  • 結果どうなったか

    • 物理世界の拡張シュミレーションみたいなものが誕生 = マテリアルデザイン
    • ヒューマンインターフェイスとユーザインターフェイスは近づいた
    • アニメーションに意図が存在
    • スキューモは廃止

フラット以降を学ぶテキスト

様々なものの意味合いが変わった

  • 影の深さによって、後ろのオブジェクトとの無関係性を伝える
  • スキューモグラフィックとの相性の悪さ
  • 動きには意味がある
    • すいこまれることで画面が開く / ジニーエフェクト
      • 閉じてもアプリが終了しないので、吸い込まれる事でまだ生存している事を伝える
    • 搭乗時に動く事でスワイプ出来る事を伝える

フラットデザインに移行した理由

  • 成熟度による要因
    • ユーザはPCのデスクトップ等に慣れた
  • メタファーの限界
    • 現実世界に似たような物が無いが溢れる様になった
  • メタファーの弊害が顕著になった
    • ユーザに類推や先入観を与えてしまうことで損させるケース

ゲームのUIはどうなんだ

  • 世界観を模したアートスタイルを作るという考えが主流
  • アイコン等のインフォグラフィックは統一化しようという動きが強い
  • 他のアプリやOSのネイティブなUIを意識すべき?
    • ゲームが主目的でない、スマホは得に意識すべき
      • スマホでプルダウンメニューは採用されてないので違和感

Unityで制作したサンプルプロジェクト

  • 以下のゲームUIの実装方法/使用アセットの紹介

f:id:lycoris102:20160430235708g:plain

追記: 上記プロダクトのGitHubが公開されました

github.com

サンプルで使用したアセット

  • DOTween
    • iTweenはレガシーなものになりつつある
    • 置き換わるような位置づけ
    • C#の拡張メソッドを使用
  • Typeface Animator
    • テキストを動かすためのアセット
  • Image Deformer
    • Spriteをいい感じに歪ませるアセット