ハニコム対応戦略 〜その2〜 Tablet対応する際の機能マッピング戦略
前回はハニコム対応したアプリケーションの基本機能を紹介しました。
今回はTablet対応した際にPhone上で実現していた機能をどういう風にTablet上で表現するかを説明していきます。
まずは実際に対応を完了したアプリの画面を見ながら結果的にどうなったのかを説明していきます。
◆Tablet用画面
・画面を左右2分割して左側にサムネイル用のGridView、右側に選択した画像の高解像度表示を行います。
・画面上部にはActionBarを配置して、左上にはアプリケーションロゴと名称。右上には各機能呼び出し用のボタンを表示します。
・画面下部にはサムネイルの切り替え(ランキング/お気に入り)ボタンと、全ユーザのお気に入り登録回数とお気に入り登録ボタン(☆)を表示します。
・画面右下にリング型のProgressBarを配置して、サムネイル更新中または高解像度画像ダウンロード中はProgressBarを表示します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vgyXj39-aUWNReoMW8G592r5NYOvlpWISEiTFgUCG4be6lmrrjYo10LUhvDxu8Pc7RU005ISPhpp8l7F1HfzO8p9xkfP-0qv-tE7R1i9wHNl8ufq6Iq4l5LEtdNDgN3SSFaIhJMqRa0/s320/device-2011-07-21-230855.png)
フレーム表示だとこんな感じ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZkttRpXnKDDEvs70Oq53fibhi45AD0Vjh6w_bTCmtFFfS8oRO_qG1fv2TkKzrV8-p9VF14PpcTXGU7VWu1QBAeSjKQg3xnd0t5yXVlH_RY9GCst5sI1CAp098T0YMNXbdMhuW2dciJM/s320/balayout1.png)
◆Phone用画面
基本的には対応前と変わりませんが、以下の点が変わります。
・タイトルバーの代わりに、ActionBarっぽい感じで独自レイアウトのバーを画面上部に表示します。
・詳細画面でアプリロゴを選択するとホーム画面(サムネイル画面)に戻ります。
サムネイル画面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCTRkDjRaealSUTuTkgvagKevoGOcS3qtSEEjyAaW5gvYb6n9Ev0dicNVnPc2LR6n3yaK8zsPDFqko8ryExpP2igHrSN6LKnITdxsfp0evvVFqPBzMmXuSkneg_RAMQIP28KNrqKD4_TE/s320/device-2011-07-21-231847.png)
サムネイル画面フレーム
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSxdMl_ZkxBUzGpb4AUfn4-aDC3kO5N22QfoEFtpLdFjveEc_vSrqD09-ycGOf-2ontE7fGxlqPmHdw7s8AcQwKxWXACI9BAG1bouDafDCnkWEYd8OSl3DNfx8u02iWWOo_7TC2_1gC4/s320/balayout2.png)
詳細画面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ou-teiMRzjE7ERzlq6bI9ycfyhlD_zfWSABnprZ8w6EQpvKWEpDCi5tpzrD53NfNfX_g1e8lQr5_YkOdub_b3CdhvxFLKlrHmwpCixZa87VYQ6HETid4AlpYLztZ4czIz_mjQWvHTAc/s320/device-2011-07-21-231957.png)
詳細画面フレーム
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6_R6SlIcRZQ9YVUsM0O8GUADEso9lwdovbOa_F8ar6emSzC4bG5nyQS1uMQOywU2CII1foQ3jehP32kjZsA-2GhglqaRTZSnIPwKd1NNFuh4C1HvOxGmb1lh4CHNvHcMLxzOKDP2qpE/s320/balayout3.png)
☆基本戦略
◆Tablet画面
・サムネイル画面と画像表示画面をひとつの画面に固めることで画面遷移をなくす。
・画面下部に配置していたボタンのうち、よく操作するものをActionBar内に配置する。
◆Phone画面
・Tablet画面と画面デザインを合わせるため、タイトルバーに相当するバーの高さをTabletのActionBarと同じ高さにする。
・その他よく使用するボタン配置は使い勝手を優先して位置を変更しない。
だいたい以上のような感じになります。
次回はもう少し具体的に実装面で考慮すべき点をまとめようと思います。
今回はTablet対応した際にPhone上で実現していた機能をどういう風にTablet上で表現するかを説明していきます。
まずは実際に対応を完了したアプリの画面を見ながら結果的にどうなったのかを説明していきます。
◆Tablet用画面
・画面を左右2分割して左側にサムネイル用のGridView、右側に選択した画像の高解像度表示を行います。
・画面上部にはActionBarを配置して、左上にはアプリケーションロゴと名称。右上には各機能呼び出し用のボタンを表示します。
・画面下部にはサムネイルの切り替え(ランキング/お気に入り)ボタンと、全ユーザのお気に入り登録回数とお気に入り登録ボタン(☆)を表示します。
・画面右下にリング型のProgressBarを配置して、サムネイル更新中または高解像度画像ダウンロード中はProgressBarを表示します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vgyXj39-aUWNReoMW8G592r5NYOvlpWISEiTFgUCG4be6lmrrjYo10LUhvDxu8Pc7RU005ISPhpp8l7F1HfzO8p9xkfP-0qv-tE7R1i9wHNl8ufq6Iq4l5LEtdNDgN3SSFaIhJMqRa0/s320/device-2011-07-21-230855.png)
フレーム表示だとこんな感じ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZkttRpXnKDDEvs70Oq53fibhi45AD0Vjh6w_bTCmtFFfS8oRO_qG1fv2TkKzrV8-p9VF14PpcTXGU7VWu1QBAeSjKQg3xnd0t5yXVlH_RY9GCst5sI1CAp098T0YMNXbdMhuW2dciJM/s320/balayout1.png)
◆Phone用画面
基本的には対応前と変わりませんが、以下の点が変わります。
・タイトルバーの代わりに、ActionBarっぽい感じで独自レイアウトのバーを画面上部に表示します。
・詳細画面でアプリロゴを選択するとホーム画面(サムネイル画面)に戻ります。
サムネイル画面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCTRkDjRaealSUTuTkgvagKevoGOcS3qtSEEjyAaW5gvYb6n9Ev0dicNVnPc2LR6n3yaK8zsPDFqko8ryExpP2igHrSN6LKnITdxsfp0evvVFqPBzMmXuSkneg_RAMQIP28KNrqKD4_TE/s320/device-2011-07-21-231847.png)
サムネイル画面フレーム
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSxdMl_ZkxBUzGpb4AUfn4-aDC3kO5N22QfoEFtpLdFjveEc_vSrqD09-ycGOf-2ontE7fGxlqPmHdw7s8AcQwKxWXACI9BAG1bouDafDCnkWEYd8OSl3DNfx8u02iWWOo_7TC2_1gC4/s320/balayout2.png)
詳細画面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ou-teiMRzjE7ERzlq6bI9ycfyhlD_zfWSABnprZ8w6EQpvKWEpDCi5tpzrD53NfNfX_g1e8lQr5_YkOdub_b3CdhvxFLKlrHmwpCixZa87VYQ6HETid4AlpYLztZ4czIz_mjQWvHTAc/s320/device-2011-07-21-231957.png)
詳細画面フレーム
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6_R6SlIcRZQ9YVUsM0O8GUADEso9lwdovbOa_F8ar6emSzC4bG5nyQS1uMQOywU2CII1foQ3jehP32kjZsA-2GhglqaRTZSnIPwKd1NNFuh4C1HvOxGmb1lh4CHNvHcMLxzOKDP2qpE/s320/balayout3.png)
☆基本戦略
◆Tablet画面
・サムネイル画面と画像表示画面をひとつの画面に固めることで画面遷移をなくす。
・画面下部に配置していたボタンのうち、よく操作するものをActionBar内に配置する。
◆Phone画面
・Tablet画面と画面デザインを合わせるため、タイトルバーに相当するバーの高さをTabletのActionBarと同じ高さにする。
・その他よく使用するボタン配置は使い勝手を優先して位置を変更しない。
だいたい以上のような感じになります。
次回はもう少し具体的に実装面で考慮すべき点をまとめようと思います。
コメント
コメントを投稿