【第2回】iOSアプリ ticket to UI/UX

サイドバーはどうなっていく!?

下画像("facebook"の画面)の左側の部分のことをここではサイドバーと呼ぶことにします。多くのアプリで見られるものですが、このサイドバーも最近ではさまざまなバリエーションがでてきたのかなと思っています。

f:id:ushisantoasobu:20121214012802j:plain


"kuvva"というアプリでは、このサイドバーの開きが「開いていない」「アイコンのみ表示されるよう開いている」「アイコンとメニューの文字も含めて表示されるよう開いている」の、一般的なものよりも1つ多く段階が設けられています(2段階式になっています)。「慣れてきたらアイコンだけでわかるでしょ?慣れてきたらいちいちこれまでのものと同じくらい開く必要はないでしょ?」という意図なのかなと自分は思っています。

f:id:ushisantoasobu:20121214012711j:plain

f:id:ushisantoasobu:20121214012645j:plain

f:id:ushisantoasobu:20121214012658j:plain


また@fladictさんによる"NewsStorm"ではその開きの量といい、(確かですが)デフォルトではサイドバーが表示された状態であることから、「サイドバーのような、でもそうでないような」もののように見えて個人的には興味深いです。

f:id:ushisantoasobu:20121214012741j:plain

f:id:ushisantoasobu:20121214012749j:plain


「画面を引き下げて 指を離して更新」はどうなっていく!?

いまでは多くのアプリで見られる「画面を引き下げて 指を離して更新」という情報の更新の仕方("Pull-to-Refresh"というの呼び方が一般的?)。その多くが、「画面を引き下げて」のときには下を向いた矢印が表示され、「指を離して更新」のときには上を向いた矢印が表示されている、というものだと思います。ただ最近ではこちらもさまざまなバリエーションがみられるように思えましたが、こちらのサイト(http://blog.fenrir-inc.com/jp/2012/09/pulltorefresh.html)にキレイにまとまっているので、ここでは1つ「かわいい」感じのを1つ紹介したいと思います。

"Timehop"(下画像)のPull-to-Refreshの見せ方は、簡単にいうと、画面を引き下げるのにあわせて恐竜のようなマスコットがインジケータを回転させ、指を離すと一気にインジケータが回転し、更新が開始されます(恐竜は下の方にいなくなります)。

f:id:ushisantoasobu:20121214012716j:plain

f:id:ushisantoasobu:20121214012725j:plain

わかりやすくはないかもしれないけれど、ちょっと心が和む、そんな見せ方だと思います。


パララックスビューはどうなっていく!?

"Path"でおなじみのパララックスビュー。シューティングゲームで手前のオブジェクトはどんどん通りすぎていきますが、奥の背景画像はゆっくりと動いていく、みたいなものと見せ方ですね。他のアプリでもみかけたことで(あとgithubにもたまたまそのようなライブラリをみかけて)個人的にいま注目しています(下画像は"Starmatic")。

f:id:ushisantoasobu:20121210002017j:plain

f:id:ushisantoasobu:20121210002023j:plain

(ちょっとわかりにくかもしれませんが、裏の写真も下に若干下がっています)