こんにちは、Mac / iOS の UI デザイン担当の松野です。
小さなタブバーを押さなくても、すぐさまタブを切り替えられる TouchPaging は、iPhone / iPad 版のみならず今や Sleipnir 自体の特長となっています。今日は、元々の Sleipnir Mobile for iPhone / iPad の TouchPaging がどのようにして今の形になったのか、その辺りを順を追ってご紹介してみようと思います。
操作はいつものスクロール
TouchPaging の一番のポイントは「ふつうにスクロールしているかのように」操作できるところです。これによって、誰でも使い方を覚えることなく操作できるようになります。これを実現するために、画面の端でスクロールしようとしたときだけ TouchPaging が始まるようにしています。
となれば、まずはページとページの間を取る必要があります。どこまでがページでどこからが次のタブかわからなければ、意図せず隣のタブに行ってしまいます。
スクロールと同じように
いつものスクロールで操作するならば、当然 TouchPaging 自体もいつものスクロールと同じように見せるべきです。通常、画面端でスクロールしようとして表示される背景や影は、実は iOS が用意しているものです。TouchPaging の背景も、あえてこれと同じものにして違和感がないようにしています。スクロールする度に違う色の背景が現れては、何が起こっているのかよくわかりません。
ちなみに、影の深さは少し浅めになっていますが、こちらはページ間の距離がそれほど大きくないためです。また、パフォーマンスも考慮してのことです。
モードに入る
次に考えたことは、タブの再読み込みをどうするかです。iPhone や iPad では、デバイスのメモリの制約などから、開いているタブでも読み込み直しが発生することがあります。都度、隣のタブに移動するだけでは、何度も読み込みを待つことになります。
そのため、モードに入ることで、毎回読み込みが始まらないようにしました。一度 TouchPaging が始まると、確定するまでは読み込むことはありません。遠くのタブへも TouchPaging のみで連続して移動できます。
モードを知らせる
そうなると、今度はモードに入ったことにユーザーが気付けることが大事になってきます。TouchPaging に入るときにページを縮小したような見た目になって、戻るときも画面にフィットして確定するのは、そういう理由からです。それでもなお、なるべく大きめの表示にして、あくまでページ自体を直接切り替えている感覚も残しました。
また、指を離せば自動的に確定するようにして、モードを出る方法に迷わないようにしています。確定までの時間も極力短くして、待ち時間をなくすよう調整されています。
どのタブが選択されているか
TouchPaging モード中は、今どのタブに切り替えようとしているかがわかるほうが使いやすいと考えました。一見ささいなことですが、自分の操作の結果が予測できることはとても重要です。そこで、選択中のタブは明るく（それ以外を暗く）しました。
ちなみに、よく見ると TouchPaging し始めたときだけ、隣のタブが明るくなるまでの距離が短いのがわかると思います。スワイプでもぱっと開始できるように、最初だけ短めにしてあるのです。このときも、切り替わるタブがわかることで、距離に関わらずいつものように操作できます。
Mac / PC はモードに入らない
Sleipnir 3 for Mac や Sleipnir 3 for Windows にも TouchPaging はありますが、こちらはモードには入りません。これは、iPhone や iPad と違って、Mac や PC では毎回読み込み直したりしないためです。ただ隣のタブに移動できればいいですし、その分、待ち時間も短くできます。
同じ用途、同じ操作でも、環境によって動作を変えて、一番いいと思える結果を常に求めています。
さて、その Sleipnir 3 for Mac ですが、まもなく 3.0 をリリースする予定です。RC 版ではまだ少しぎこちなく動いていた TouchPaging のパフォーマンスも大きく向上しています。リリースをお楽しみにお待ちください。
追記：究極の先端的ウェブブラウザ Sleipnir 4 for Mac がリリースされました。
関連記事
