【Unity道場05】モダンなUIの提案と実装 に参加しました
概要
- 資料が公開されるかもという話なので私的メモレベル
- 10minくらい遅れて行ったので漏れがあるかも
- 講演者は @ivoryfunc さんと @tsubaki_t1 さん
追記: 資料公開されました!
昨今のUI界隈で起きていること
- 進んで行く専門性
- スキューモグラフィック/自己回帰性/身体性/透明性
- それに対してUnity
- uGUIの正式なリリース、武器はある
環境が変われば読みやすいフォントも変わる
- ディスプレイフォントの主流変化
- 72dpi: ビットマップフォント
- 96-250dpi アンチエイリアスは一般化したもの
- 300dpi やっぱり一般な紙面で読みやすいフォントが良いよね
そもそもUIって何?
- あっちの世界とこっちの世界をつなぐものと表現
- PCを使用するのであれば、IFの存在は不可欠
- コンピュータと人間という異質なもの同士をつなぐもの
- 大まかに2種類存在する
- ヒューマンインターフェイス
- ハードウェアを指す事が多くソフトウェアでは手出し出来ない
- ユーザーインターフェース
- ヒューマンインターフェイス
誰のためのデザイン?
http://www.amazon.co.jp/%E8%AA%B0%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E2%80%95%E8%AA%8D%E7%9F%A5%E7%A7%91%E5%AD%A6%E8%80%85%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8E%9F%E8%AB%96-%E6%96%B0%E6%9B%9C%E7%A4%BE%E8%AA%8D%E7%9F%A5%E7%A7%91%E5%AD%A6%E9%81%B8%E6%9B%B8-%E3%83%89%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB-%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%B3/dp/478850362Xwww.amazon.co.jp
- 道具がうまく使えなかったら、それは道具のデザインが悪いせい
- デザインはそもそも「問題を解決する」という意味
- 問題が解決されていない時点で道具が悪い
理想的なインターフェイス
- ヒューマンインターフェイスとユーザインターフェイスが一致している
正しくアフォーダンスが設定されている
画面上のキューブを自由に操作するための最も適切なインターフェイスはなんだろう?
- 手を突っ込んで直接動かす
- 抽象化を挟む
- スワイプで回転/日本指で移動
- 指先のメタファーであるカーソルをマウスで遠隔調査
抽象化を挟む毎に、ユーザインターフェイスとヒューマンインターフェイスにギャップが生じる
- 理解してもらうための仕組みが必要になる
- 習熟に時間が掛かる様になる
République
- OMNIビューのUI
- 初期段階: ダメだった
- タップ可能領域がユーザに伝わらない、ボタンだと気付かれない
- きわめてシンプルな物に変更
- 初期段階: ダメだった
タッチデバイスに対する理解
理解度の低下を補うヒント
メタファー
- 物理的なボタンを模した形にする
- 新しいインターフェース環境の誕生時に有効なアプローチ
- そもそもPC自体はメタファーの山のような存在
- カーソル/デスクトップ/フォルダ/ゴミ箱…
-
- アイコンを行間文字として使えば、プレイヤーは概ねボタンと見なしてくれる
上記の手段が使えないケース
- タップした場所によって行動が変化する
- 隠れる/立ち止まる/攻撃/ドアに入る….
- 事前に伝えるのが難しい
- タップ後にアイコンを出して行動をユーザに知らせた
- 事前に知らせる事をあきらめ、事後に伝える様に変更した
脱メタファーの話
iMacいまむかし
- だんだんシンプルになってる、スッキリした印象
OSのUIはどうあるべき?
- 見た目の印象をハードウェアに合わせるべき?
- あるいはデバイスを意識せず存在すべき?
スクリーンをプロダクトの延長の実平面か、仮想的な空間をのぞく窓と捉えるか
- iOS6の頃
- OSは素材感、質感、光といったフェイクに満ちている
- ハードウェアは無駄を省いてシンプルになっていった
- ここに乖離が生じている
- ユーザインターフェイスとヒューマンインターフェイスの乖離
- 理想的に近しい方が望ましい
UIをプロダクトの延長に存在し得るための試み
とりあえず見た目を合わせてみる
- ミニマルなデザインならルックアンドフィールの無駄を省く
動きを変える
結果どうなったか
フラット以降を学ぶテキスト
様々なものの意味合いが変わった
- 影の深さによって、後ろのオブジェクトとの無関係性を伝える
- スキューモグラフィックとの相性の悪さ
- 動きには意味がある
- すいこまれることで画面が開く / ジニーエフェクト
- 閉じてもアプリが終了しないので、吸い込まれる事でまだ生存している事を伝える
- 搭乗時に動く事でスワイプ出来る事を伝える
- すいこまれることで画面が開く / ジニーエフェクト
フラットデザインに移行した理由
- 成熟度による要因
- ユーザはPCのデスクトップ等に慣れた
- メタファーの限界
- 現実世界に似たような物が無いが溢れる様になった
- メタファーの弊害が顕著になった
- ユーザに類推や先入観を与えてしまうことで損させるケース
ゲームのUIはどうなんだ
- 世界観を模したアートスタイルを作るという考えが主流
- アイコン等のインフォグラフィックは統一化しようという動きが強い
- 他のアプリやOSのネイティブなUIを意識すべき?
Unityで制作したサンプルプロジェクト
- 以下のゲームUIの実装方法/使用アセットの紹介
追記: 上記プロダクトのGitHubが公開されました
サンプルで使用したアセット
- DOTween
- iTweenはレガシーなものになりつつある
- 置き換わるような位置づけ
- C#の拡張メソッドを使用
- Typeface Animator
- テキストを動かすためのアセット
- Image Deformer
- Spriteをいい感じに歪ませるアセット