家計簿アプリの画面（データ一覧画面補足編1）

デザイン理論

2016-05-12T09:30:22

前回は、リストとアイコンを調整して、アクションを考えてデータ一覧画面を完成させました。

前回までの話を読んでいない方はまずこちらからお読みください。

今回は、次の画面に行こうかと思ったのですが、「データ一覧画面」での仕上げをしていきます。
ここでは主に「データが多くなったときのこと・データがまだないときのこと」を考えます。
この、ひとつの画面でも状態が変わることがあるということは、エンジニアはわりと常に考えるのですが、静止画の状態でUIを考えるデザイナーには、実はこれが抜けていることが多いので、必ず考えるようにしましょう。

【2-4】もうひとつのアクション：日付の移動

前回はここまでいきました。右上は、メニューボタンを押すと出てくるリストです。

bookkeeping-2-3-3

さてここで、もうひとつのアクションを考えます。

家計簿なので、日付ごとのデータがどんどん並んでいきます。
データが少ない、今のような状態だと全体を見通せることはもちろんできますが、データが増えていくと、どんどん縦にだけ積み重なってしまいます。
1年前のデータに遡ることは、とても困難です。

そこで、日付を移動させるUIを考えます。

– データが並ぶ単位を考える

日付を移動させるといいましたが、厳密には日付というわけではないですね。
「○月○日のデータが見たい！」…ということはちょっとぐらいあるかもしれませんが、それよりは、「月ごとでデータを見たい」というほうが一般的です。
家計簿のデータは月ごとでまとめられることが多いでしょう。

↑と考えましたが、これはあくまでわたしの頭のなかにある仮説（妄想）。
厳密にUIを考えるなら、ターゲット層へのユーザーテストをおこなって、ユーザーの意見を聞くのがいちばんです。

月でまとめるので、月を移動するUIが必要です。
ここでも、もしWebとかであれば、UIどうしようかな〜〜とうんうん悩むのですが、今回はAndroidアプリですので、Androidのガイドラインの中で使えるものがないかをまず探します。どうしても見つからない場合は独自のものを考えます。

– ViewPagerをつかう

Androidでは、横向きにスワイプをすると画面が切り替わるというUIが多くあります。
たとえば、前々回に紹介した「タブ」のUIでも、上側にタブが並んでいて、タブの中をタップしなくてもコンテンツ自体を横向きにスワイプすると、その画面に遷移できます。（もちろんタブをタップしてもいけます）

ここで、タブの数が多くなった場合にはタブ自体も横スクロールすることになります。

今回は「月の移動」をしたいので、左右スワイプでどんどん切り替えられる、このような見た目・使いみちのものがよさそうです。
そこで、これに似ている「ViewPager」というものを使います。

デザイン的には、ViewPagerもこのスクローラブルタブによく似ていますが、見た目の上では

ViewPagerのほうがスクローラブルタブよりも少し高さが低い
タブの場合は、いち画面内に3〜4つのメニューが見えていますが、ViewPagerの場合は、「自分とその前後」のメニューしか見えない

というのが違いです。

bookkeeping-2-4-1

上は、ViewPagerの例です。
タブの高さが48dpなのに対して、ViewPagerの高さは36dpです。

また、今が10月のリストだとすると、前後は「9月」と「11月」しか見えていません。
スワイプしながら、タブの位置もどんどん変わっていきます。

– タブとViewPagerの使い分け

ここで、カンのいい人は「タブとViewPager、けっこう似ているのにどうやって使い分けるんだ…」と思うでしょう。
これはあくまでわたしの所感ですが、タブの場合は「メインのコンテンツ」を並べることが多いように思います。

それに対してViewPagerは、サブ的な分類になります。
たとえば今回のように月ごとでデータを並べて、それを格納していく形式。
また、タブ内の一覧性はどちらかというとあまりよくないので、時間ごとで並べたり、月ごとで並べたり、「タブの中身の全体を見渡せなくてもなんとなく次の分類が想像できる」ときに使うことが多いです。

下は、ABC（Android Bazzar Conference）2014 というAndroid関連イベントのアプリですが、タイムテーブルの時間移動でViewPagerを使っています。