Slide-out Navigation という新しいユーザインターフェイスのパターン

Path や FaceBook で採用されているスライドインターフェイスについての考察。

New iOS Design Pattern: Slide-out Navigation - Ken Yarmosh

以下、引用と紹介。

多くはメニューボタンを左上に配置している。

最初の例として Facebookアプリが取り上げられている。Facebookではボタンでメニューを表示する。閉じるのにはボタンの他、左方向へのスワイプが使える。

次はその後に出た Gmail for iOS。スワイプで左側のメニューが開くようになった。また幅を可変にできる。

そして Path。Gmail同様にスワイプで切替られる。ただし幅は固定。また右に見えるコンテンツの幅が40ピクセルに調整されている。

- - - -
従来だと画面がまるごと切り替わるインターフェイスだったが、Facebook, Pathの出現によってこれが洗練された形になった。ポイントは (1)スワイプ切替と(2)半見せの２つ。(1)はタッチパネルらしい操作で違和感がないし、(2)は狭い画面で効果的に情報を見せることができる。iOSアプリの流れでいけばこのスタイルが最初に出たのは Twitterアプリの iPad版だと思う。また Windows Phone 7 のインターフェイスの影響も多分受けているんだろうな。