ウェブアプリを iPhone アプリらしく仕上げるためには、画面のデザイン(とくに意匠)も iPhone 用のものが必要になる。単にスタイルシートの切り替えだけでは限界がある。さらに言えば、スタイルシートも共通部分と画面に特有のものとに分けるべきだ。
以下は、Blogger Glass の主要画面のデザインを iPhone 用に作り直したものだ。
| 画面 | 外観 | 説明 |
|---|---|---|
| 一覧画面 |
|
記事の一覧をリストとして表示する。各項目をタップすることで個別記事の内容画面に移る。左上のボタンでメニューを表示する。 |
| 内容画面 |
|
ブログの個別記事の内容を表示する。左上のボタンでリスト表示に戻る。左↓のボタンで、記事に付けられたラベル一覧を表示する(→ ラベル検索画面)。 |
| メニュー |
|
アプリメニューを表示する。「Back」でメニューを開く前の画面に戻る。 |
| ラベル検索画面 |
|
記事に付けられたラベルをリストで表示する。各項目をタップすることで、ラベル検索を行う。下部にはラベルによる絞り込みの状況を表示する。メニューと同様、「Back」で 1 つ前の画面に戻る。 |
画面のデザインが変われば機能にも手直しが入る。
たとえば、iPhone の画面の狭さから、これまではアプリ画面上部に共通で表示させていたメニューは、別画面として独立させることにした。また、内容画面では一覧表示に戻るためのボタン(リンク)を用意する。メニューやラベル検索画面にも「Back」ボタンを用意して元の画面に戻れるようにする。
この「戻る」を実現するためには、元の画面(をリクエストする URL)をプログラム的に記憶しておく仕組みが必要になる。
変更するのはスタイルシートとテンプレートだけで済みそうにないな。
0 件のコメント:
コメントを投稿