Art and Science of Visual Analytics Episode 1

Slide 1

Slide 1 text

Art and Science of Visual Analytics Episode 1: Colors

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Episode 0 Visual Analytics 考えなくても、理解できるように工夫する Preattentive Attributes Visual Analyticsを助ける考え方(= Art and Science)

Slide 4

Slide 4 text

今回は、色

Slide 5

Slide 5 text

Preattentive Attributesの種類 Color - 色 Form - 形 Position - 位置 Movement - 動き

Slide 6

Slide 6 text

Form Color Position

Slide 7

Slide 7 text

TL;DR Colors Rules Power of Colors

Slide 8

Slide 8 text

Hue

Slide 9

Slide 9 text

Learn the Basics of Color Theory to Know What Looks Good

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

記憶の三段階タイプ保持期間容量制限 Sensory memory(即時記憶) 200~500ミリ秒特徴のあるものだけ。 Short-term memory(短期記憶) 10~15秒一度に7項目まで。 Long-term memory(長期記憶) 生涯個人差がある。

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Best Practices of Hue

Slide 16

Slide 16 text

メッセージ性さえあれば、色相は少なくても伝わる

Slide 17

Slide 17 text

色は極限まで少なくするオススメは3色ルール ● ベースカラー　　: 5 ● メインカラー　　: 4 ● アクセントカラー: 1 (もしくは4色ルール) ● ベースカラー　　: 4 ● メインカラー　　: 3 ● サブカラー　　　: 2 ● アクセントカラー: 1 必要な情報を必要な分だけ

Slide 18

Slide 18 text

https://www.pinterest.com/pin/514465957416721893/

Slide 19

Slide 19 text

Saturation

Slide 20

Slide 20 text

https://twitter.com/KaorixTab/status/1106358530401931264

Slide 21

Slide 21 text

Best Practices of Saturation

Slide 22

Slide 22 text

強調したい(注目させたい)ときは、原色に近い彩度にオススメは赤系と緑系 ● 赤系は危険、注意、アラートなど、ネガティブ要素を示す力がある ● 緑系は安心、平常心、達成感など、ポジティブ要素を示す力がある隠蔽したい(注意を逸らせたい)ときは、彩度を落とすオススメは薄灰色 ● 強調と組み合わせると、強調 / 隠蔽の強さが相対的に増す ● 不必要な情報を落とす場合、非常に効果的にはたらく手法強調と隠蔽

Slide 23

Slide 23 text

caution!

Slide 24

Slide 24 text

Color blindness

Slide 25

Slide 25 text

What Color(s)?

Slide 26

Slide 26 text

カラーユニバーサルデザイン色は誰にでも同じに見えるとは限らない多様な色覚を持つ方に配慮し、情報がなるべく正確に伝わるように利用者目線に立ってデザインすることが重要。詳細は、東京都カラーユニバーサルガイドラインを参照。

Slide 27

Slide 27 text

TL;DR Colors Rules 3色ルールベース : メイン : アクセント = 5 : 4 : 1 Power of Colors 強調と隠蔽見る人によって色の世界は異なる

Slide 28

Slide 28 text

No content