UIおよびアプリ全体の流れにおけるUXを検証するとき、プロトタイピングツールは必須となっています。数多くのプロトタイピングツールが存在する中で、アニメーションの動きを細かく検証できる強みを持つものとしてOrigami Studioがあることをご存知でしょうか？
Facebookからリリースされているこのプロトタイピングツールですが、他のプロトタイピングツールと比べて学習コストが高い代わりに細かくインタラクションを設定して精度の高い検証ができることが特徴です。
今回は、Origami Studioを使って近年流行りであるTinderUIの動きをプロトタイピングすることで、Origami Studioの基礎的な使い方とテクニックをチュートリアル形式で紹介できればと思います。
1. まずはオブジェクトを動かす
本来であればまずはSketchでUIを組んでそれをOrigami Studioへコピー&ペーストする必要があるのですが、今回は省略してあらかじめorigamiファイルを用意しました。こちらからダウンロードしてください。また、Origami Studio自体もインストールしておきましょう。
ファイルを開くとこんな画面になりますが、右側にあるのがオブジェクト一覧、左側に出ているUIが出力結果、黒い領域はパッチを組むエリアとなっています。何はともあれまずはオブジェクトを動かしてみましょう。
womanのグループを選択して[Touch]→[Swipe X]を選択します。
すると動きを制御するパッチが現れ、womanグループのX座標とひも付けられました。
試しにUI上でwomanのカードを右へスワイプすると動くようになっています。
また、UIをRestartさせたい場合は更新マークをクリックすると元通りになります。
このようにオブジェクトの持つ数値に対してインタラクションとどれだけ変化させるかを設定してアニメーションさせていくのが基本的な流れとなります。
womanグループと同様に今度はmanグループが左へスワイプすると消えるパッチを追加しましょう。ポイントとしては[Pop Switch]の[End Value]を-340にしておくことで左に消えるようになります。
これで基本となる左右の動きは実装できました。
2. 条件分岐で回転・移動させる
次はTinderUIの特徴であるカードを投げた感じを再現してみましょう。
(本来の動き方はスワイプ量に合わせた自由移動なのですが難易度が高いので今回は擬似的な動きをプロトタイピングします)
まずはwomanグループと紐付いている[Pop Switch]について上のようにパッチを組んでみましょう。
新たなパッチをセットするときは黒いエリアをダブルクリック、パッチとオブジェクトの数値(青いやつ)を紐付けるときはパッチからオブジェクトの数値へ直接ドラッグアンドドロップするとできます。
[Greater Than]は条件分岐のパッチで指定した数値よりも大きい値が入力されるとスイッチがオンになります。今回はある程度横にスワイプしてからカードを回転させたいために使っています。
[Transition]は基本的には数値変化のパッチでPositionなどの数値を[Progress](0〜1)の値に応じて[Start]から[End]の値まで変化させます。
[Classic Animation]は数値変化を[Duration]の時間分かけて変化させるパッチです。[Transition]の変化において一気に変化させるのではなく段々と変化させたいときはこの[Classic Animation]パッチを挟まないといけません。
ちなみに[Smooth Value]というパッチも[Classic Animation]と似たような役割をしてくれるのですが、上のパッチでは[Greater Than]で0か1かのスイッチングによって動作させている関係でこのように[Transition]と[Classic Animation]を組み合わせる必要があります。
うだうだ解説してますが、[Greater Than]や[Classic Animation]を消した状態でパッチを組んでみるとどういうことが起こるかわかるかと思います。
そして、上のようにパッチを組むとあのTinderっぽい動きが実装できました。
動きとしては、womanグループのPosition Xが0以上になったときに、-90度回転させつつY軸を-160にするという内容になっています。
上のパッチを参考にして同じようにmanグループにも動きを追加してみましょう。注意点として[Greater Than]を[Less Than]にする必要があることと、
manグループの[Pivot]を中央上にしておくことが必要です。
manグループもちゃんとパッチが組めるとこんな感じの動きになります。それっぽくなってきましたね。
3. ディテールをつめる
最後にディテールとして、1枚目のカードをスワイプしたら2枚目のカードが現れるようにしてみましょう。
上にある[Pop Switch]の[On/Off]から伸びているパッチを追加してみましょう。これは1枚目のカードがスワイプされたらOnになるという条件分岐を利用しています。
[Smooth Value]は[Transition]の変化をイイ感じにしているパッチです(説明が雑ですみません...これがあるか無いかで動きを試してみるといいと思います...)。
全て実装できるとこのように1枚目のカードをスワイプしたあとで2枚目のカードがいい感じに出現するようになります。これで完成です。
最後に
パッチを配置してつなげるだけでここまでの動きをプロトタイピングできるOrigami Studioはアニメーションや具体的な遷移を検証するときに非常に役に立つツールだと思います。一方で、パッチの処理としてできることの限界もあるのでOrigami Studioだけで全てのインタラクションを実装するのは正直キツいので使い分けが肝心だなと思いました。
UIデザインに携わる人にとって学んでおいて損のないツールであることには変わりないので皆さんも是非使ってみてください。
完成形のorigamiファイルもこちらに置いておきます。