TODOアプリとマテリアルデザイン

todo_material

現在開発中のTODOアプリはマテリアルデザインを採用しています。
今回はマテリアルデザインに焦点を当てて、ユーザーインタフェース(UI)の説明をします。

マテリアルデザインとは、Goolgeが発表したデザインの種類の一種で、紙とインクから着想を得たフラットデザインの進化版のようなものです。紙は重ねあわせを表現する影を取り入れて、触るとインクが落ちたような波紋が広がります。
そこからさらに細かいレイアウトのサイズ指定や、いくつか推奨されるアニメーションが決められています。
シンプルでエキサイティングでモダンらしいです。
さらに詳しく知りたい方は Google の Material Guidelinesを読んでみてください。

ただ、極力ガイドラインに沿うようにしていますが、ユーザビリティを重視して若干外れたこともしています。
タスク内のタグ表示はガイドライン上の最低フォントサイズを下回りますし、左右のマージンもあまりありません。限られたスペースでユーザに必要な情報を表示するためです。
タスク1枚の高さは通常時はガイドラインに沿っていますが、タスク名が長い場合最大で2行表示するようにしています。この際サイズがガイドラインから若干外れます。
ですが Android の設定でフォントサイズを変えた場合の対応は出来ています。

各UIについて

アクションバー(上の青いバー)ですが、こちらはスクロールによって隠れます。
アクションバーが隠れるのと同じタイミングで、ナビゲーションバー(下の半透明のバー)も隠れるようにして、より多くのタスクを見渡せるよういしています。ステータスバー(一番上の時刻やバッテリー等があるバー)は重要な情報を表示しているため隠していません。
また、ナビゲーションドロワ(左から出て来る画面遷移のためのメニュー)を開く際に左上の三本線がくるっと回転して変形しています。ほぼ見えてませんが。

ナビゲーションドロワもメニューを触ると浮かび上がり、波紋のエフェクトが入ります。

右下のオレンジ色のボタンはフローティングアクションボタンといいます。
こちらも触ると浮かび上がり、波紋のエフェクトが入ります。

タスクの一覧表示は、こちらも触ると波紋のエフェクトが入りまが、実装上の都合で浮かび上がりません。
しかし、スワイプによって裏にあるファンクションボタンを表示することが出来たり、左端の●が4*3並んでいる領域を触れることでそのままドラッグを開始させて並び順を変更することが出来ます。

裏にあるファンクションボタンも触ると浮かび上がり、波紋のエフェクトが入ります。
ここでキャンセルかチェックのボタンをタップすると処理した後にスナックバー(処理後一時的にポップアップしてくる黒背景のメッセージを表示するボタン付きのバー)というものを表示します。
スナックバーには UNDO のボタンがあり、それをタップすることで直前の処理を実行前に戻すことが出来ます。

UIの説明は以上です。
まだレイアウトも完成とはいえませんし、モックデータにスタブプログラムです。
これから UNDO の処理や差分バックアップの実装を想定したフレームワークを検討してそれから実際の処理を実装していく予定です。
一度に全てを実装するのは予算の都合上で無理なので、最初のリリースではナビゲーションドロワにあるタスク、プロジェクト、ファイル、タグ、完了タスク、設定を優先して実装する予定です。

なお、動画は予定していた撮影方法(screenrecord)ではエミュレータ(スマホサイズ)で使えなかったため、急遽実機(タブレット(Nexus9))で撮影しています。
Xperia Z が Android5にバージョンアップを予定しているので、そのうちスマホサイズでも撮影できるようになりますが、まだ出来ません。

Bookmark this on Delicious
Bookmark this on Digg
Pocket