ユーザーインターフェースをいい動きにするには2つの要素が大事らしい→試してみると確かに急にカッコよくなってすごい

ぜんぜん違う!
228
しゅん @2dgames_jp

UIを良い動きにするには、 ①直線ではなく曲線を使う ②各部品をずらして動かす の2つが基本となりそう。これをやるだけで柔らかく見えて、さわり心地の良いUIになるはず pic.twitter.com/zafDQkgCVH

2019-02-26 07:15:41

みんなの反応

西山 信行 @5mingame2

@2dgames_jp これは具体的でとても役立ちますね!

2019-02-26 18:07:20
石月わど @waddled_p

イージング入れるか入れないかでかっこよさが変わってくるね

2019-02-27 16:44:03
ゆきしろ晶 @KawasYuki

イージングしていけ。しかし「俺は今すぐ操作したいんだがなんだこのウェイトは???」ってならないようにも気を配っていけ。

2019-02-27 15:23:45
リンク Google Developers イージングの基本 | Web | Google Developers アニメーションをやわらかく見せたり、重みを与えたりする方法を学習します。 8 users
𝕒𝕞𝕒𝕚𝕟𝕦🐾 @amainu_dog

これエフェクトのパラメータ調整するときもなるべく直線避けて曲線にしてる… その方が不自然っぽさ薄くなるから

2019-02-27 16:27:35
高屋野 住季 @hinatanimato

慣性を考えてやるのもいい。(弾性とか摩擦みたいなの含む) 多分、脳が現実でよく見る動きだから安心するんだろうな。

2019-02-27 21:18:22
あぜる @ajeru6180

これUIだけじゃなく表現するもの全般に言えるよね 不思議

2019-02-27 17:40:29

ただ...

@man_goose

見栄えがいいのはめちゃくちゃわかるんだけど極度のめんどくさがりなので動いてないで最初からそこにいろってキレてしまうんだよね

2019-02-27 16:29:52
あさぶろ @AsaburoX

@2dgames_jp 直線のほうが計算式が楽でいいけど、曲線のほうは多少の手間でここまでよくなるものなのか。すごい

2019-02-26 23:08:26
🪦ukio💐 @u_ki_o

めっちゃわかるけどこの一手間がまぁまぁ面倒なんすよねぇ

2019-02-27 20:35:49
笑也知郎 えみーや @shiroemiya12

@2dgames_jp たしかに動きはいいんですけど、フレームレートで差が出ちゃうんで敬遠しちゃうんですよね…

2019-02-26 23:26:42
竹村 @takemura_a

根本的なところからひっくり返して申し訳ないがボタン類は動かず最初からそこにあって欲しい。

2019-02-27 16:50:42

注意点

わがまま夜詩 @yauta01

どうだろう。 初見だけかなー。ってなりそう。 だから初見が一番大事なUならおkで、何度も見ることになるなら このエフェクトOFFのSWが欲しい。

2019-02-27 20:19:38
524 @zerohime524

動きが気持ちよくても、(表示されるまで)操作できない時間が長くなってしまうのはNGなんですよね。

2019-02-28 08:37:30
しき @psyg2

なおかつ表示するためのアニメーション展開中でも操作できる柔軟性があるやつは最強

2019-02-28 08:42:26
デクノボ @deku_monk

これ見てる時はいいんだけど触る時になると、特に日常的になるほど動きを待ってるのが面倒になる(何F待つのが嫌なんだよ)時もあるから、本音を言えば現れてくる動きよりも先に選択動作を感知してほしいんだよな というのをしっかりやっていたUIがペルソナ5

2019-02-28 09:05:48
セミ @seminmin0794

おいら曲線移動大好き♥️♥️♥️

2019-02-28 16:17:24