UIUXを考える

アプリデザイナーのブログ

Googleアナリティクス画面をトレースする その3 〜解析画面のカードについて〜

こんにちは。
今回からいよいよ、解析画面のトレースをしていきます。
ボタンやテキストなどの細いかUIにとりかかる前に、まずは土台となる「カード」について調べてみようと思います。


マテリアルデザインにおいて、これがカードと呼ばれるコンポーネント(構成要素・部品)です。

f:id:kishatatsu:20170724175431p:plain

カードとは?

私もカードの扱い方をよく知らないので、調べてみました。

こちらの記事がとても分かりやすかったです。

これで完璧!マテリアルデザインの「カード」の使い方

 

本家のマテリアルデザイン ガイドラインはこちら。

Cards - Components - Material design guidelines

 

ガイドラインはあくまで指針なので「必ずこうやって使わないといけない」という事ではなく、「こうしたらユーザーは使いやすいよ」と推奨されているものです。

これを適材適所にどう使っていくかがデザインの仕事ですね。

 

トレース画像の用意。こんな機能がありました。

Webサイトはだいたいがスクロールしますよね。

上から下までが長いスクロールだと、一回のスクリーンショットでは撮れないので、何回かに分けて撮っていました。この機能を知るまでは...

 

『FireShot』 Chrome拡張機能

これを使うとスクロールするページでも1枚の画像として撮ってくれます。

 

f:id:kishatatsu:20170731112313p:plain

 

下記よりインストールできます。

chrome.google.com

 

もっと早く知りたかった..

 

今回トレースしたのはこちら

f:id:kishatatsu:20170731134147p:plain

 (サイドメニューはこの高さで固定されており、解析画面がスクロールします) 

 

カードだけでなく、全てのコンポーネントには「配置される高度(単位はdp)」が決まっているそうです。高度とは奥行き(空間)のこと。

カードの場合は通常「2dp」、選択して浮き上がると「8dp」の高度になるとのこと。

(単位の「dp」とはAndroid独自の単位だそう。pxに換算するとどのぐらい?この辺は無知なので調べます

通常2dpの時、影幅は狭く輪郭ははっきりしています。

選択して浮き上がると8dpになり影幅は広く輪郭はぼやけています。

こんなイメージ:

f:id:kishatatsu:20170801172452p:plain

「8dpの方が、2pdよりも上にあるな」と直感的に分かりますね。

※ここで紹介しているカードはどちらも影がありますが、未選択時は影が一切ついていないカードもあり、マウスオーバーすると浮き上がり影がつきます。

 

カードは4カラムで配置さてれいました。

f:id:kishatatsu:20170801174353p:plain

1つのカードは

W:320

H:500

空き:16

 

これを基準に、横に2・1・1だったり、

3・1だったり、

1.5・1.5・1とゆうふうに並んでいます。

 

カードが持っている機能

こちらのカードは

・タブ切り替え(見たい情報をカード内で切り替える)

・プルダウン(期間を絞り込む)

・テキストリンク(他ページへ遷移する)

という、3つの機能を抱えています。

f:id:kishatatsu:20170801175529p:plain

カードが持てる機能に、こんなにバリエーションがあるんですね。知りませんでした。

細かいのが、左上角のタブが青くなっている部分。

カードは四隅が角丸になっていますが、ここだけは四角になっていました。

f:id:kishatatsu:20170801175955p:plain

f:id:kishatatsu:20170801180111p:plain

 

カードの色について

カードにはこんなふうに色をつけられます。

f:id:kishatatsu:20170801182403p:plain

 

解析画面にも色付きのカードがありました。

f:id:kishatatsu:20170801182722p:plain

他は全て白なのに、このカードだけ青です。重要度の高い項目なのでしょうか?

 

あと、気になったのがこのカード。グリッドに合っていませんね。揃ってなくてもOKなんですね。

f:id:kishatatsu:20170801183059p:plain

 

最後に気づいたこと。

それは「カード内でスクロールさせない」。

どれを見ても、カード内でスクロールするものがありません。

ガイドラインに書かれているのかも?)

 

カードはあくまでもカードであり、ページではないので、スクロールさせないのが自然なのでしょう。

カードは「ある情報への入り口」として扱われています。

 

 

それでは、今回はこの辺で〜。