Pocket

どうもどうも、YOHICです。
ここ数年でデザイナーの仕事の範囲も大きく変わりましたよね。(変わったというか、増えたというか…

UIの動きのデザインもその一つだと思うんです。
UIの動きを説明するために絵コンテを描いたりするんだけど、「どう動くか」もどれだけ引き出しが多いかでかなり差がでるわけです。

我々デザイナーはどこまで守備範囲を広げればいいんだろうか…
…と気が遠くなりそうになったので考えるのはこの辺でやめて、今日はこれいいな!って思ったUIの動きをベンチマークしたのでご紹介しますよ!

スポンサーリンク




Amazon Payment Flow C


https://www.uplabs.com/posts/amazon-payment-flow-concept
アマゾンのUIがこんな感じになった使いやすいですねー!
今のUIに慣れちゃってるので賛否ありそうですが、進化させることは大切ですよね。EC系やってるデザイナーさんには参考になるかなと!

Shoe / sneaker shopping


https://www.uplabs.com/posts/shoe-sneaker-shopping-design-animation-conce
マウスオーバーするとちょっと靴が動くのいいですね。視覚的に選択してるのがわかりやすい。

Dropleft Animation


https://www.uplabs.com/posts/dropleft-animation
シェアする際の動きです。
少ないエリアで表示させる時に便利。
ただ、日本でやるとなると「ユーザーのリテラシーが…」という問題にブチ当たるので使えるシーンは限られそうですね。

Vehicle Transportation Website


https://www.uplabs.com/posts/vehicle-transportation-website-design-and-animatio
メインビジュアルの見せ方の参考に。
線画がフワーーーっと出てくるのが良いですね。
UIだけじゃなくてメインビジュアルも動きをつけなきゃな…

Cover Page


https://www.uplabs.com/posts/cover-page-animation
これもメインビジュアルの見せ方の参考に。

Dashboard Details


https://www.uplabs.com/posts/dashboard-details

マウスオーバーのアイディアに。
ここまで細部を作り込めるようになりたいなー…
うん、時間があったらやりたいかな…時間があったら…

Horizontal Blog Scrollbar


https://www.uplabs.com/posts/horizontal-blog-scrollbar
スクロールバーの動きの参考に…ってちょっと独特な動きですね。これ。
こういう見せ方もできるなーという参考に。

Text Editor Animation


https://www.uplabs.com/posts/text-editor-animation-animation
CMSの管理画面をデザインした時にここまで出来てれば…
次、機会があればここまで詰めて作りたい。

Microinteractions: Like & Shar


https://www.uplabs.com/posts/microinteractions-like-share-button

ソーシャルボタンのUI。
ハートだけ出しておくのシンプルでいいなと思ったんだけど、これだと「シェア」の意味が伝わりにくいような…お国柄なのかなー

Clevertech Landing Page


https://www.uplabs.com/posts/concept-exploration-animation-for-ct-website
写真やテキストの出るタイミングだとか、出し方とか。
ちょっとためてから出る、とか。なんか見覚えあるなーと思ったらFlash全盛期の時ってこんな動きばっかり考えてましたね。懐かしい。。

MIXIN – Portfolio Case File


https://www.uplabs.com/posts/mixin-portfolio-case-file
うお!かっこいい!
ブランド系のサイトでこういう動き使いたい。

FlightTracker


https://www.uplabs.com/posts/flighttracker
アプリのUIで参考にできそう。
飛行機が着陸して離陸するとか芸が細かいですね。
空港の掲示板にあるパタパタするヤツみたいな動きも最高。

スポンサーリンク



Focus on Highlights


https://www.uplabs.com/posts/focus-on-highlights

画面内での動きも難しいですよね。
消した場合はどう動かすかとか、アクティブにした場合はどうするか…など。
参考にしたいです。

Search for flights with tags


https://www.uplabs.com/posts/search-for-flights-with-tags
地味なんですが、こういう部分の見せ方って大切ですよね。
ユーザーが気持ちよく操作できるUIを作るために、動きをつける。
これを忘れるとただ単にガチャガチャしたデザインになっちゃいますね。

Search input


https://www.uplabs.com/posts/search-input
検索窓のデザインも悩ましいですよね。
ゴチャゴチャさせないためには、こうやって動きをつけて表現するのが良さそう。

Visval Catalog


https://www.uplabs.com/posts/visval-catalog
商品一覧の限られたスペースを上手く使う参考みたいなUIですね。
ほんと、商品一覧は全部の情報を盛り込もうとするとカオスになりますよね。。

Submit Now Button


https://www.uplabs.com/posts/gif-submit-now
送信とローディング、完了までを一連の動きで!
完了=ニコちゃんマークなのか?という疑問もありますが、素敵っす。

Sign In and Sign Out


https://www.uplabs.com/posts/sign-in-and-sign-out
サインイン、サインアウトのUIも動きがあるとわかりやすいですね。
この動きの気持ちよさって何回も試してを繰り返さないと見つからないですが、だんだんわからなくなってきますよねw
ゼロから考えるのではなく、自分がいいなと思った動きをまず参考にして、それからチューニングしていくのが近道だと思います。

Instagram Desktop


https://www.uplabs.com/posts/instagram-desktop-concept
インスタのUIもこれくらいリッチだといいのになー…
アプリメインだからしょうがないのかもですが…

Pricing Table of Printing Services


https://www.uplabs.com/posts/pricing-table-of-printing-services
料金表の見せ方。
料金表のデザインって結構出尽くしている感があるので、動きをつけて目を引くのはアリだなーと思いました。ただ、若干見難いかなー…

さてさて、いかがだったでしょうか。
参考になりそうな動きはありましたか?
「オ!この動きええやんか!」ってなってからエンジニアさんを説得するのがまた大変なん…

ではでは!

スポンサーリンク



Pocket

There are currently no comments.