0
8
1170
False
False
None
False
0
<style type="text/css">
</style>
<!--style type="text/css">
/* Overrides of notebook CSS for static HTML export */
body {
#overflow: visible;
#padding: 8px;
}
div#notebook {
overflow: visible;
border-top: none;
}@media print {
div.cell {
display: block;
page-break-inside: avoid;
}
div.output_wrapper {
display: block;
page-break-inside: avoid;
}
div.output {
display: block;
page-break-inside: avoid;
}
}
</style-->
<!-- Custom stylesheet, it must be in the same directory as the html file -->
<!--link href="/static/codemirror/codemirror.css" rel="stylesheet"-->
<!--link rel="stylesheet" href="/static/css/custom.css"-->
<!-- Loading mathjax macro -->
<section>
<div tabindex="-1" id="notebook" class="border-box-sizing">
<div id="notebook-container">
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>在之前的学习中，我们了解了数据的结构以及一些基本的可视化图形。其实在生活中，很多时候都需要我们为我们手里的数据量身设计可视化方案。其次，我们可能还要决定应该在图表中放多少信息，又应该舍去哪些信息。在这一章节中，我们将着重讲讲什么是好的可视化方案，什么是差的可视化方案。</p>
<p>说到可视化设计，我们就不得不先学习一下视觉的感知与认知，这就引出了著名的格式塔原理（Gestalt Laws of Grouping），又叫做完形原理（Principles of Grouping）。格式塔原理是由一群德国心理学家提出的，其核心理论为：人们总是先看到整体然后再去关注局部，人们对事物的整体感受不等于局部感受的加和。相信类似于下面的这种图大家都看过，这就是格式塔原理最经典的表现之一。</p>
<p><img src='/media/lecture/313/geshita.jpg' style='max-width:30%;'/></p>
<center>图15 “格式塔”视觉原理举例，图中的两只动物您看见了么？</center><p>格式塔原理主要有六大法则，它们分别是贴近法则（Proximity）、相似法则（Similarity）、连续法则（Continuation）、闭合法则（Closure）、共势法则（Common Fate）、和好图法则（Good Form）。接下来，我们将通过小例子来理解这6大主要法则。</p>
<h3 id="贴近法则（Proximity）">贴近法则（Proximity）<a class="anchor-link" href="#贴近法则（Proximity）">¶</a></h3><p>贴近法则是指当视觉元素在空间上距离较近时，人们通常倾向于将它们归到一起。例如由点阵组成的世界地图，即便是没有精细的轮廓，各个大陆的轮廓依旧“清晰可辨”。</p>
<p><img src='/media/lecture/313/Proximity.png' style='max-width:60%;'/></p>
<center>图16 使用贴近法则绘制的世界“点”图</center><h3 id="相似法则（Similarity）">相似法则（Similarity）<a class="anchor-link" href="#相似法则（Similarity）">¶</a></h3><p>相似法则是指当人们观察图形时，会自动根据事物的相似性（即，形状，颜色等特性）进行分组。例如下面的3D散点图，我们情不自禁的会认为是3类。</p>
<p><img src='/media/lecture/313/Similarity.png' style='max-width:60%;'/></p>
<center>图17 将点着色后我们会把相同颜色的点归为一类</center><h3 id="连续法则（Continuation）">连续法则（Continuation）<a class="anchor-link" href="#连续法则（Continuation）">¶</a></h3><p>连续法则是指我们在观察视觉元素时会很自然的沿着物体的边界，将不连续的物体视为连续的物体。例如，请判断下图中绳子的路经。</p>
<p><img src='/media/lecture/313/Continuation.jpg' style='max-width:40%;'/></p>
<center>图18 两条相交的线（a）会让人产生如（b）中的交错感觉</center><h3 id="闭合法则（Closure）">闭合法则（Closure）<a class="anchor-link" href="#闭合法则（Closure）">¶</a></h3><p>闭合法则是指在某些视觉映象中，物体本身是不完整的或者不闭合的。只要物体的形状足以表达物体本身，人们很容易的感知整体而忽略未闭合的特征。例如小米商标，我们可以清楚辨认出商标是由字面m和i组成。</p>
<p><img src='/media/lecture/313/Closure.jpg' style='max-width:20%;'/></p>
<center>图19 小米商标中未闭合的字母不会影响我们理解</center><h3 id="共势法则（Common-Fate）">共势法则（Common Fate）<a class="anchor-link" href="#共势法则（Common-Fate）">¶</a></h3><p>共势法则是指当视觉元素具有相似的排列模式，或者具有相似的运动路径时，我们将它们自然地归为一类物体。如下图，成群的鸟儿的飞行方式与速度一致，我们很容易的将它们定义为一个整体。</p>
<p><img src='/media/lecture/313/Common_Fate.jpg' style='max-width:60%;'/></p>
<center>图20 成群的鸟儿会让我们产生整体的感觉</center><p>共势法则的应用十分广泛，特别是在设计用户界面的时候。例如我们的窗口滚动条就和窗口内容同步在了一起，鼠标的移动就和屏幕里鼠标的移动同步在了一起。</p>
<h3 id="好图法则（Good-Form）">好图法则（Good Form）<a class="anchor-link" href="#好图法则（Good-Form）">¶</a></h3><p>好图法则是指人眼通常会将具有相似形状，规律，颜色的物体归为一类，即便是这些物体相互重叠，我们的大脑也可以不受干扰的解释它们的形状。例如我们熟悉的奥运五环的设计，即便是五环套在了一起，我们仍然可以联想到是五个完整的环。又如，只使用一种花纹的包装纸来包礼物，当很多这种包装的礼物叠在一起的，我们仍然可以通过花纹的走向等分辨出各个礼物。</p>
<p><img src='/media/lecture/313/Good_Form.png' style='max-width:40%;'/></p>
<center>图21 被遮挡的奥运五环并不影响我们对元素形状的判断</center><p><br></p>
</div>
</div>
</div>
</div>
</div>
</section>
实战演练（1）
返回 >
1