Googleアナリティクス画面をトレースする その3 〜解析画面のカードについて〜
こんにちは。
今回からいよいよ、解析画面のトレースをしていきます。
ボタンやテキストなどの細いかUIにとりかかる前に、まずは土台となる「カード」について調べてみようと思います。
マテリアルデザインにおいて、これがカードと呼ばれるコンポーネント(構成要素・部品)です。
カードとは?
私もカードの扱い方をよく知らないので、調べてみました。
こちらの記事がとても分かりやすかったです。
本家のマテリアルデザイン ガイドラインはこちら。
Cards - Components - Material design guidelines
ガイドラインはあくまで指針なので「必ずこうやって使わないといけない」という事ではなく、「こうしたらユーザーは使いやすいよ」と推奨されているものです。
これを適材適所にどう使っていくかがデザインの仕事ですね。
トレース画像の用意。こんな機能がありました。
Webサイトはだいたいがスクロールしますよね。
上から下までが長いスクロールだと、一回のスクリーンショットでは撮れないので、何回かに分けて撮っていました。この機能を知るまでは...
これを使うとスクロールするページでも1枚の画像として撮ってくれます。
下記よりインストールできます。
もっと早く知りたかった..
今回トレースしたのはこちら
(サイドメニューはこの高さで固定されており、解析画面がスクロールします)
カードだけでなく、全てのコンポーネントには「配置される高度(単位はdp)」が決まっているそうです。高度とは奥行き(空間)のこと。
カードの場合は通常「2dp」、選択して浮き上がると「8dp」の高度になるとのこと。
(単位の「dp」とはAndroid独自の単位だそう。pxに換算するとどのぐらい?この辺は無知なので調べます)
通常2dpの時、影幅は狭く輪郭ははっきりしています。
選択して浮き上がると8dpになり影幅は広く輪郭はぼやけています。
こんなイメージ:
「8dpの方が、2pdよりも上にあるな」と直感的に分かりますね。
※ここで紹介しているカードはどちらも影がありますが、未選択時は影が一切ついていないカードもあり、マウスオーバーすると浮き上がり影がつきます。
カードは4カラムで配置さてれいました。
1つのカードは
W:320
H:500
空き:16
これを基準に、横に2・1・1だったり、
3・1だったり、
1.5・1.5・1とゆうふうに並んでいます。
カードが持っている機能
こちらのカードは
・タブ切り替え(見たい情報をカード内で切り替える)
・プルダウン(期間を絞り込む)
・テキストリンク(他ページへ遷移する)
という、3つの機能を抱えています。
カードが持てる機能に、こんなにバリエーションがあるんですね。知りませんでした。
細かいのが、左上角のタブが青くなっている部分。
カードは四隅が角丸になっていますが、ここだけは四角になっていました。
カードの色について
カードにはこんなふうに色をつけられます。
解析画面にも色付きのカードがありました。
他は全て白なのに、このカードだけ青です。重要度の高い項目なのでしょうか?
あと、気になったのがこのカード。グリッドに合っていませんね。揃ってなくてもOKなんですね。
最後に気づいたこと。
それは「カード内でスクロールさせない」。
どれを見ても、カード内でスクロールするものがありません。
(ガイドラインに書かれているのかも?)
カードはあくまでもカードであり、ページではないので、スクロールさせないのが自然なのでしょう。
カードは「ある情報への入り口」として扱われています。
それでは、今回はこの辺で〜。