フェンリル

Developer's Blog

縦長になって引っ張りやすくなった iPhone 5 で、色んな「引っ張って更新」を比べてみよう!

Pull to Refresh

こんにちは!UI デザインの松野です。

今日は iPhone 5 の発売日ですね!フェンリルでも長いとか軽いとか、実機テストしたりとかでいつもより少しだけ賑やかです。

もちろん Sleipnir や他の iOS アプリも、この新しい iPhone 5 に(もうすぐ)対応します。Sleipnir Mobile for iPhone / iPad、Sleipnir Linker、FlickAddress のアップデートを準備/申請中です。リリースまで今しばらくお待ちください!

さて、そんな iPhone で特徴的な操作のひとつに “引っ張って更新(Pull to Refresh)” があります。

ちょうど先日 iOS 6 でもメールアプリで採用されたことですし、今日は引っ張って更新について取り上げてみようと思います。

引っ張って更新って?

Pull to Refresh

引っ張って…

Pull to Refresh

離す!

テーブルを画面上端でさらに下に引っ張ると、更新できるという操作です。iOS ではもはやお馴染みですね。

元々は Tweetie という Twitter クライアントで最初に搭載されました。Tweetie は Twitter for iPhone(公式アプリ)の前身です。

Twitter のタイムラインは上に行くほど最新なので、上端でさらに引っ張って更新する操作は自然そのもの。この操作のスマートさが流行り、iOS アプリに数多くのフォロワーを生み、取り入れられました。

基本形

オリジナルにしてスタンダードな引っ張って更新をいくつか並べてみます。

引っ張って、離す、その操作をくるっと回る矢印で伝えます。離したときに引っ張り出したエリアが留まり、そこでプログレスインジケータをぐるぐるするところも合理的です。

Pull to Refresh

Tweetie での初登場時には、すでにこの形が完成していました。

Pull to Refresh

Facebook もほぼ同じ形態です。

Pull to Refresh

こちらは Dribbble クライアントの Balllin’ です。
他にも数多くのアプリが、この形で引っ張って更新します。

表現のバリエーション

同じ引っ張って更新でも、色々な表現で操作を伝えるアプリたちもいます。

特に秀逸と感じるのが RSS リーダーアプリの Reeder です。

Pull to Refresh
Pull to Refresh

引っ張って…

Pull to Refresh

離す!

折り畳まれた部分を引っ張り出します。現実の物に例えた表現で、矢印より感覚でわかります

ちなみに Reeder では、更新ではなく次/前の記事に移動する操作に使われています。

Pull to Refresh

Tweetbot では回転するゲージで引っ張り加減を表示します。
Tapbots のアプリらしく、メカっぽい感じが出ています。

Pull to Refresh

Readability は更新アイコンで、動作自体を直球で伝えています。

Apple の引っ張って更新

iOS 6 の引っ張って更新も一見同じに見えますが、少し動きが違います。

Pull to Refresh
Pull to Refresh

引っ張って…

Pull to Refresh

あれ?

引っ張るところは同じですが、充分に引っ張ったら離さなくても更新します。なるほど、これだと離すことがわからなくても偶然気づける確率が高いかもしれません(まぁ、ふいに更新し過ぎる気もしますが)。

引っ張ると伸びて、ちぎれたら更新。見た目もユニークです。この引っ張って更新は iOS 6 標準となっていますので、サードパーティのアプリでも使えます

Pull to Refresh

Flud News でもびよーんと引っ張ります。

発展形

テーブルを引っ張ることが多い引っ張って更新ですが、他の用途やシーンへの応用もあります

Pull to Refresh

更新も引っ張る Facebook ですが、写真を閉じるときにも引っ張ります。

Pull to Refresh

Twitter for iPhone で返信するときに引っ張ると、相手のツイートが確認できます。
やはり Tweetie の頃からありました。Tweetie は他にも、セルをスワイプして
アイコンを出すなど多くの発明を残しました。

Pull to Refresh

ちょっと趣旨と違いますが、iBooks の本棚を引っ張るとアップルロゴが…。
あくまで装飾でしかありませんが、ちょっと面白い使い方です。

Sleipnir Mobile では

実は Sleipnir Mobile にもあります。

Pull to Refresh

右端のタブからさらに右に行こうとすると…

Pull to Refresh

新規タブします!

矢印がくるっとプラスアイコンに変わる動きが見どころです。

もはやスタンダードになった引っ張って更新、今ではデバイスやプラットフォームを越えた広がりを見せています。しかしこのように、アプリごとにちょっとずつ違いがあるのがわかります。

今後も色んなところで見かけると思いますが、そんなときは用途に合わせてどのようにアレンジされているかを観察してみるのも面白いのではないでしょうか。

Mac でも iOS みたいにタッチして使うSleipnir for Mac はこちら

Facebook コメント

コメント

sin2012年09月26日 9:36

いつも大変具合よく使わせていただいております。
iphone5への対応版なのですが、いつ頃のリリースになりそうでしょうか?
もう待ちきれないです!!!
よろしくおねがいします。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。