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

ゲーム開発に役立つ情報をつぶやいています 【HaxeFlixel / GameMaker:Studio / Unity / Pyxel】

http://t.co/gFJyItXRzB
みんなの反応
わど☆☆★ @waddled_p
イージング入れるか入れないかでかっこよさが変わってくるね
早川雪子 @KawasYuki
イージングしていけ。しかし「俺は今すぐ操作したいんだがなんだこのウェイトは???」ってならないようにも気を配っていけ。
リンク Google Developers 8 users イージングの基本 | Web | Google Developers アニメーションをやわらかく見せたり、重みを与えたりする方法を学習します。
𝕒𝕞𝕒𝕚𝕟𝕦🐾 @amainu_dog
これエフェクトのパラメータ調整するときもなるべく直線避けて曲線にしてる… その方が不自然っぽさ薄くなるから
高屋野 住季 @hinatanimato
慣性を考えてやるのもいい。(弾性とか摩擦みたいなの含む) 多分、脳が現実でよく見る動きだから安心するんだろうな。
あぜる@あじぇるんば @ajeru6180
これUIだけじゃなく表現するもの全般に言えるよね 不思議
ただ...
@man_goose
見栄えがいいのはめちゃくちゃわかるんだけど極度のめんどくさがりなので動いてないで最初からそこにいろってキレてしまうんだよね
あさぶろX @AsaburoX
@2dgames_jp 直線のほうが計算式が楽でいいけど、曲線のほうは多少の手間でここまでよくなるものなのか。すごい
🌸ukio🌸 @u_ki_o
めっちゃわかるけどこの一手間がまぁまぁ面倒なんすよねぇ
笑也素人 えみーや @shiroemiya12
@2dgames_jp たしかに動きはいいんですけど、フレームレートで差が出ちゃうんで敬遠しちゃうんですよね…
竹村 @takemura_a
根本的なところからひっくり返して申し訳ないがボタン類は動かず最初からそこにあって欲しい。
注意点
わがまま夜詩 @yauta01
どうだろう。 初見だけかなー。ってなりそう。 だから初見が一番大事なUならおkで、何度も見ることになるなら このエフェクトOFFのSWが欲しい。
524 @zerohime524
動きが気持ちよくても、(表示されるまで)操作できない時間が長くなってしまうのはNGなんですよね。
しき@C96 三日目(日曜日) 南チ-32a @psyg2
なおかつ表示するためのアニメーション展開中でも操作できる柔軟性があるやつは最強
神秘親和金属カエル @deku_monk
これ見てる時はいいんだけど触る時になると、特に日常的になるほど動きを待ってるのが面倒になる(何F待つのが嫌なんだよ)時もあるから、本音を言えば現れてくる動きよりも先に選択動作を感知してほしいんだよな というのをしっかりやっていたUIがペルソナ5
セミ @seminmin0794
おいら曲線移動大好き♥️♥️♥️
残りを読む(2)

コメント

ふぁむ氏 @phantom0730 2019年2月28日
イージング…オニオンスキン…friction変数…う、頭が
ふぁむ氏 @phantom0730 2019年2月28日
UIの本懐はユーザに行動を喚起させる事だから「画面が賑やかになる」とか「恰好良いから」で導入すると逆効果というヤツ。10回も同じ画面見たらもう"指が操作を覚えている"んだからアニメーションはラグでしかないね。
Licorice @Licorice_90 2019年2月28日
効果音も大事。個人的にはFF12のが至高
いくら @YamadaIkra 2019年2月28日
Windowsの[システムの詳細設定]-[パフォーマンス]-[視覚効果]でアニメーションスライドフェード全部OFFにするマン「一瞬で出せ」
キャンプ中毒のドライさん(Drydog(乾)) @drydog_jp 2019年2月28日
タイトル画面とかステージ開始時に1回だけ表示みたいな場面では可なんだが、RPGで毎ターン選択するメニューでこれをやられると、飛ばさせろ💢 ってなる
優魚 @e_kuma3 2019年2月28日
演出過剰でしょ。それよりも適切な階層化とか本当の基本をキチンとやって欲しい。
和菓子 @nkltsl2 2019年2月28日
UIデザインとしては『果たしてその動きや演出がユーザの利便性に貢献しているか』という視点を抜きにしてしまうと、ただ無駄に動きが多いだけのウザいUIになってしまうから要注意な。 動き1つにしても意味を持たせないといけない。
パワードたぬき @powered_tanuki 2019年2月28日
マックとかiPhoneを「使っていて気持ち良い」という声があるのはこういうことなんだろうな、アニメーションとか全部切る派
フローライト @FluoRiteTW 2019年2月28日
ようは数よ。「キレちまう」とかイキってるのが一考に値しない数ならハナで嗤って無視していい。
海◆eoxyl9RE @umi_eoxyl9RE 2019年2月28日
ふわっと出るのは目が疲れる。ゲームとかでたまにさわるぶんには演出としていいだろうね。業務用の毎日使うアプリあたりで開発がそういうのをやらかすとですね、電話が鳴り止まなくなるんですね。
のヮの (限定解除) @no05071730 2019年2月28日
動きが大きすぎるとそれはそれでウザいので、緩いフェードイン/アウトを重ねてふわっと着地させるといいんじゃないかな(知ったかぶる
ですの @_desuno_ 2019年2月28日
いい動きにするって思考になってる時点でUIとして真逆の方向性なのでは?
saku @sakuuuuuuune 2019年2月28日
自己満足とユーザーに寄与するアニメーションは別で、イージングしたり、ずらしたからいいインターフェースになるわけではないんだよね ゲームでいうなら、ロードを意識させない、メニューの構造が理解できる、なにをすべきかわかる、待たされる感が減る、感触、世界観が表現できるといった、明確なユーザ体験を検討して動きを作ったりするんだけど、究極系はSwitchのシステムメニュー
古橋 @FuruhasiYuu 2019年2月28日
drydog_jp 速度の問題だとは思います。例の速さだとどう考えてもダメ。ゲームで最初に「上手く」導入したのはたぶんペルソナ3で、あれは良くできてた。文化的にはかつてのFLASHムービーの流れから来てるはずです。
カラスモドキ @karasumodoki 2019年2月28日
なんというか流行り動きって感じ
kusano @t_kusano 2019年2月28日
ユーザーインターフェースじゃないよこれ。また課金みたいに誤用が広がってるのかねえ。
gaheki @gaheki 2019年2月28日
タイムラグもなく一瞬で出そろい続ければいいって声もあるけどとそれはそれでまた扱いにくくなるんだよね。  経験上早く操作する上には最強に思えるけど無意識でもガンガン操作進められ過ぎてしまうんで一度間違うと間違いに気づくまでに大量の操作が済んでしまってる状態によく陥る そこまで人間は早く正確に動けるもんじゃない
cocoon @cocoonP 2019年2月28日
これはUIじゃなくて「演出」の話なのでは
西瓜 @suikaisu 2019年2月28日
演出入れるとここにボタンあるんやで!って主張にもなるから、かっこつけとか以外にも意味あるんですよ
八月さん @hatigatusandesu 2019年2月28日
動きは見てて気持ちいいけど、毎回見るのはウザいと思う派 iPhoneの視覚効果も最初は良かったけど今は切ってるし、日常使いには邪魔だよなぁと思う。
SAKURA87@多摩丙丁督 @Sakura87_net 2019年2月28日
設定でオフにできるなら思う存分凝ってくれて構わんよ。
Daregada @daichi14657 2019年2月28日
「すべてのテキストにドロップ(一文字ずつ文字が落ちてくるため、大変時間がかかる)のアニメーション効果を付けたため、発表時間内に最後のスライドまで行かない学生」みたいなことにならなければいいが
RGB000 @19666_61 2019年2月28日
マテリアルデザインみたいな「動作に流れをもたせて自分が今している動きを見失わない」ようなアニメーションはもっと繁栄して欲しい。
yuki🌾4さい⚔ @yuki_obana 2019年2月28日
大丈夫、画面見なくても音声だけでどこタップすればいいか分かってくるようになるから(´・ω・`) 1)位置を可能な限り片手タップ可能且つ誤タップ回避できるデザインにする 2)とにかく高速巡回できるようにする 3)音声+BGMでタップタイミングを認識可能にする 4)とにかく要求するタップ数を減らす これだけやってくれ、頼むから…
竹箒清掃中 @takebouki_kirei 2019年2月28日
これでボタンの位置とか大きさが動線に合ってないとイラつく。
かしわ天 @kashiwaten6mai 2019年2月28日
本当に合理的な目的での最低限かつ効果的な演出の類は別にして、「オサレ/意識高い系モーション信奉・肯定論」って、なんかこう「個人サイト隆盛時のマウスストーカー」のそれに何か似てるなって思う。もっともらしいコト言ってても、それは結局「この動く奴いれたい!」っていう結論ありきで固められた理屈。
_ @readonly6582 2019年3月1日
任務画面…大淀さん…うっ頭が
まんまるまるまいん @manmarumarumain 2019年3月1日
頻繁に見るところはこういうのなしでお願いしたい。ぱっと出してくれたらええねん。
カムイトウ@自動手記人形 @kamui10 2019年3月1日
かっこいいなーと思いつつ、毎日使っても鬱陶しく思わせてはいけないのがUI。
ゆーき @yuki073 2019年3月1日
readonly6582 そういえばマウスストーカーにも「マウスを見失いにくくUX向上になるから設置すべき」みたいな意見があったような。(要出典)まあ邪魔なだけですけど。
よーいちろー🌖 @youichirou 2019年3月1日
演出効果はわかるし、UIの理解を促す効果もあると思うんでいいんだけど、これ見よがしにトロいアニメーションされるとうざいので、やるにしてもシュッとスピーディにしてほしい。
かつのり @k5n6 2019年3月1日
xを100から200に1秒で変化させる場合、 ある時点でのxの値は 100 (200 - 100) * 経過時間の割合(0.0〜1.0)で求まる。経過時間の割合に、0.0〜1.0を受け取って0.0〜1.0を返す関数を挟むとイージングと呼ばれる処理になる。単純なら受け取った数値の2乗を返すだけでもいい。
エリ・エリ・レマ・サンバディトゥナイ @mtoaki 2019年3月1日
k5n6 1秒は長いよ。気にならないのは0.1~0.2秒くらいじゃない?
雅(まさ) @masa_masa_X 2019年3月1日
UIは一昔前の任天堂は最強だった。 気持ちよさとスピードとわかりやすさが全部揃ってた。
七枝七夏 @7eda7ca 2019年3月1日
readonly6582 遠征出発アニメーション時、クリックを感知しない画面……うっ (HTML5移行時に改善して欲しかった
aitsuki @aitsuki2 2019年3月1日
ただし、webページでこういうのを使うのは万死に値する
denev @_denev_ 2019年3月1日
こういう系の演出は操作が極まってくると遅延がウザくなる。
xi @accountLINKonly 2019年3月2日
言ってることはわかるけどUIでコレ組み込んだらキレる自信しかない
くらっく @crazyslime 2019年3月7日
メニューや選択画面なら演出はいらないっす
ログインして広告を非表示にする
ログインして広告を非表示にする