作者： little山林

本篇文章介绍如何给皮肤增加“动感”，使皮肤更具富生动活泼性。

以控制按钮为例。

给按钮添加上如下动作。

补充说明，格式处可供选择的有设定、改变、切换元素比例，三个之间的区别和在制作导航图文章中提到的关于设定、改变、切换位置是一样的。不过是一个作用在元素大小上，一个作用在元素位置上。

将上面的动作添加给所有按钮，可以使用快捷方法，动作都是一样的，可以直接将动作复制给其他按钮。

按住Shift可多选，然后鼠标右键选择拷贝，或者直接快捷的Ctrl + C

然后在树列表选择其他按钮元素，直接Ctrl + V

预览。

上面这只是一个参考，同样的操作也可以设置给缩略图或者其他的一些皮肤元素，还可以组合一些动作实现更丰富的效果。

另外，这种由“动作”实现的效果不仅可以给按钮，还可以给图片等任何皮肤元素设置。如果仅仅对按钮丰富效果的话，按钮元素有自己的“技能”（只有按钮元素有此设置）。

点击“ 鼠标‘经过’ ”、“选定的”后面的更改，可以设定更换的图片。设定后，鼠标经过和鼠标按下会更换按钮图片。至于更换成什么样的图片，我们就需要提前备好了，如果这里的鼠标‘经过’，设定的是提前备好的原比例110%的按钮图片，那么就可以实现上面由动作实现的效果了。

下面我们设定提前准备好的不一样颜色的按钮图片。

预览看一下效果。

如果对于普通的图片元素想快速的实现这样的效果，可以将图片元素转换为按钮元素。

实现上面的效果，唯一麻烦的就是需要提前准备好对应的更换图片。

导航图，就不顾名思义了。在制作室内房产家装的全景漫游时，常使用平面CAD图或平面效果图作导航，顺便也能提供个户型示意。在制作室外小区园区的全景漫游时，常使用平面设计图或者截取第三方地图作为导航图。

我们下面开始说一下制作导航图的大概步骤。

首先选择“添加图片”，添加提前制作或截取的平面导航图。

大概的位置，可以选择边角位置，也可以选择居中位置。这里我们选择右上角的位置。

位置注意设置一下锚点。

接下来“添加节点标记”。

根据我们场景的实际位置，固定节点标记的位置。

节点标记没有“实体”，实际是不显示的，实时预览和输出都不显示，所以我们要给节点标记，制作一个实体样式。

添加图片

选择实体节点图标，之所以有两个，是想制作节点激活与未激活（正在浏览与其他未浏览节点）两种状态。

然后设置节点标记。

漫游节点/标签，选择节点对应的场景。正常方式克隆，选择未激活时显示的图标，这里选蓝色小图标。克隆并激活，选择激活时显示的图标，这里选红色小图标。

制作完一个后，添加多个“节点标记”只需要复制然后改变ID和位置即可。（左侧树列表选中Mark 1，之后复制粘贴，右侧参数栏修改复制的Mark 1的ID和位置）

最后，拖动三个节点，使成为导航图片的子级。

那两个用作节点实体的小图标，可以不用在意，被克隆之后，将不再显示。当然也可以一样拖动为导航图的子级，方便管理。

基本的制作完成，实际预览一下。

下面我们再从外观上丰富一下。

添加文本。

输入文字内容，回车Enter调整文字间隔。

将文本和导航图片放进一个容器里，成组。记得设置一下容器的锚点：右上。

当然上面这几步，我们建议是直接源图片入手，即使用图片制作编辑工具，将地图截图左边添加上导航图文本，毕竟图片制作添加文本的样式远比皮肤编辑的文本样式丰富。

同缩略图导览，如果觉得导航图占位置或影响浏览，除了可以参照缩略图导览的办法，使用按钮控制显示隐藏外，我们这里再补充一个知识点：鼠标事件改变元素的位置。

记住导航图组的位置，然后将其向右移动，并记住移动完的位置。

然后给导航组容器添加动作。

 

这里使用鼠标进入、鼠标离开两个事件完成，当然也可以使用单个事件，鼠标点击来完成。如果使用鼠标点击的话，动作设置如下。

这一块只要把“格式”弄明白，我们就能理解了。

格式一共有以下几种。

设定元素位置和改变元素位置是一样的作用，结果一样，只是二者的“过程”不一样。设定元素位置的动作是瞬时的，干净利索。改变元素位置的动作是缓和的，位移的过程可见。另外这两者的动作是单向一次性动作，单向执行一次就结束了。起始点参考是目标元素的原始位置。

切换元素位置，动作过程和改变元素位置是一样的，有个位移的过场。不同的是切换元素位置是双向一次性动作。一次动作执行一次位移，下一次动作会回归原始状态，循环交替。

设定相对位置和改变相对位置，二者的动作过程分别和设定元素位置和改变元素位置是一样的。不同的是，二者的动作是单向连续的，可单向连续执行，第一次位移参考是元素的原始位置，以后的位移便是参考上一次位移后的位置结果。这个遇到具体问题时再具体的分析。另外，滚动到视图，这里也不介绍。

回头再看一下“偏移”。我们这里设置的效果其实是导航图水平的移动，所以只改变了X的值，未改变Y的值。值的大小是由我们之前让记住的移动前与移动后的差值计算而来，至于正负，看实际向哪移动，向左位移就是负值，向右位移就是正值。我们上面制作移动前是360，移动后是596，实际移动是鼠标进入左移，所以是-236。

最后说明一下，以上属于制作静态导航图，针对室外的全景漫游，在Pano2VR中我们除了使用设计图和截取三方地图外，还可以使用API动态调用读取Google地图作为导航图。如何使用谷歌地图制作导航，请在高阶教程会员文章中查看。

Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

什么是缩略图导览，这个我们在添加背景音乐中见到过。

 

我们直接步入正题，看看是如何制作的。

缩略图在分类上大体可分两类：一类是自动创建的缩略图，我们上面所看到的就是。另一类，则需要我们手动添加。

我们先看第一类。

首先，添加滚动区域。

和文本、矩形一样，可以直接绘制一个粗略大小。

然后，添加克隆。克隆的作用就是将单元内的内容复制。

最后，添加节点图像。这一步是“自动”的关键。

剩下的就是调整和设置了。

先把节点图像调节成克隆单元区域（白色区域）的大小。看一下参数区的克隆单元尺寸。

将节点图像的大小的宽、高设置比克隆单元的宽、高都小 4 像素（这个值的作用是留出间隔大小，可以根据自己的需求来设置）。

接下来，将节点图像拖动至克隆单元，并通过位置参数微调，使节点图像在克隆单元“内”并居中。

在树列表中，拖动节点图象使之成为克隆单元的子级。

同样的步骤将克隆单元移至滑动区域内，并使克隆单元成为滑动区域的子级。

我们注意一下，滑动区域一定要比克隆单元的高，多出一下，大概20～25像素，这部分是留给滑动条的（当克隆的节点总宽超出滑动区域宽的时候）。

至于右边的留白，我们不必在意，因为克隆默认是水平一行向右克隆。内容多的话会自动填满的。

最后，调整缩略图的位置以及尺寸。在这里，我们全新的接触一下位置和尺寸的问题。

大致的位置选择就不赘述了，一般就是底部居中位置。其他位置当然也可以，这个根据自己的需求来。下面要说一下我们需要注意的问题。

我们仔细点会发现，在版本5中，位置和尺寸多了一个“单位”的选择。之前的版本默认就是“像素”，在版本5中增加了一个“百分比”的选择。这一点，直接解决的一个就是，移动端兼容的问题。我们知道，电脑和手机屏幕的宽高比和分辨率都是不一样的，在前端开发中，“高配”做法是根据终端做出不同的适配样式，然后判断接入终端再匹配样式，“低配”做法是做一个“兼容”样式适应大部分的终端。当然实际适配两种做法都需要，毕竟终端不仅仅要区分电脑与移动端，电脑端还要覆盖不同屏幕分辨率，比如台式机的显示器和笔记本的显示器，移动端，要考虑各种品牌型号的手机，还有Pad也要考虑。现在简单一些了，电脑的显示器普遍1080宽屏，手机也逐渐趋于一致，以前电脑手机各种分辨率都有。（关于适配和终端兼容的问题，会有专门的文章介绍）

在版本5之前，想实现“低配”都是较难的，到版本5我们解决了这个问题，可以做出兼容性很好的皮肤。

先看尺寸，重点是“宽”，毕竟电脑和手机最大的区别就是“宽”不同，“高”的部分我们还能滑动翻页。

我们将固定的像素宽，更换为百分比。

这里会根据原来的像素宽占画布宽的百分比，自动给出一个值。我们建议重新设置这个值，至少80%以上，这个值如果太小，比如50%，在手机上的显示占屏宽太小了。

我们更换成90% ，然后将位置 X 单位也换成百分比。

继续两步调整，将 X 的值改为5%，把锚点设为靠下。

这里解释一下5%，X=（100% - 宽）÷ 2 ，这个式子我们思考一下就知道了，内容宽度已经90%了，想要保证整体居中，左右要5%，X是从左边计算，所以是5%。

在显示上我们制作算基本完成，再添加上动作我们才算总体完成。

给节点图像，添加动作。

以上就是制作自动创建的缩略图。

如果觉得麻烦，可以通过组件库中现成的组件快捷添加。组件库中自带两套不同风格的组件。

下面我们介绍一下手动添加制作的缩略图。

自动创建的缩略图也有适用限制，当缩略图很多且使用场景视图的时候，自动创建缩略图是合适的，基本上移动端用自动创建缩略图都是合适的。但如果缩略图不多，不足以超出屏幕宽度，比如在电脑端，滑动区域内的内容默认是左对齐（可以调整，专门文章介绍，这里不再赘述），另外如果实际需求不使用场景视图的时候，那么上面的这种缩略图就不太适合了，我们就需要手动创建制作缩略图。

比如实际需求中我们得使用要求的图片作为缩略图。

添加图片并大致的排列好。

绘制容器成组。

如果需要有个背景底色，再绘制一个矩形。（为什么不使用滑动区域？——滑动区域使用缩略图多的情况，小于屏幕总宽度时，显示上无法居中。）

接下来对矩形进行参数上的调整。宽设为100%，X设为0（此时像素百分比就无所谓了），锚点左下，背景色彩根据需求调整，设置的时候可以将Alpha值调小，设置半透明的状态，边框可以设为0。

此时，矩形使盖在图片组上方的。我们拖动图片的容器组，使之成为矩形的子级即可。

若想要缩略图居中，设置容器组的锚点居中。

预览看一下效果。

剩下的就是给每个缩略图添加动作了。

URL处直接选择对应的漫游全景即可。

手动添加缩略图也是版本5之前制作缩略图的大致步骤。

最后还有个小问题，缩略图是比较占位置的，我们如何在需要它的时候再显示它。默认状态不显示。这里就引出一个知识点：用按钮控制元素的显示与隐藏。

我们只需要添加一个按钮，然后给这个按钮添加动作，点击显示隐藏。

再给缩略图组一个动作，初始不可见（或者外观去掉可见勾选也可以），当然是要给缩略图组的父级矩形。

以上就是本篇文章的内容。

关于缩略图，后期会有很多补充，比如缩略图在不同终端的适配、分组缩略图、圆形缩略图等等。

这是模仿自带皮肤构成的最后一部分（三部分分别是：控制按钮、热点、加载进度条）。

这一部分其实比较难，难是难在思路上，如果我们不参考自带皮肤的进度，可能很难下手制作。

我们这里既然是学习，那就从逻辑上入手分析，然后再看一下如何制作。

我们观察一个加载进度条，其最重要的就是“动”的部分，这部分拆解的话，其实就是一个“图形”在水平方向上拉长。对应到皮肤编辑中，就是 X缩放。其实有没有这个动的加载进度条不重要，实际加载过程依旧是进行的，我们只是用进度条来表示出加载过程。

我们就参照上面这个进度条的样子，模仿制作一个加载进度皮肤。“动”的条可以由皮肤元素的“矩形”制作出来。

点击“绘制矩形”。

绘制完，可以再细节调整“矩形”的位置以及尺寸。

然后再继续调整“矩形”的相关参数。

背景，就是填充色设置。去掉开启勾选，表示不填充颜色。勾选后，可以点击下面色彩后面的方框，选择颜色。

边框，宽是指矩形边的粗细；半径是设置矩形的角，这块是调整矩形角的圆润程度，通过这里的设置可以将矩形变成圆角矩形，可以将正方形变圆。色彩是指边的颜色，如果是制作进度条，这里最好是和背景颜色一致。

我们参照上面的进度条，大致模仿一下。

中间的“动”的部分，大致样子制作完，需要在外层包裹一个“框”。这部分依旧通过绘制矩形来完成。

绘制完外框，可能在显示上会遮住进度条，我们可以在树列表，将外框移至进度条的下方（树列表里谁在上，显示谁在前），或者干脆将进度条变成外框的子级。

外框设置和进度条类似，唯一不同的就是，外框只有“边框”没有“背景”。

剩下的就还剩一个，Loading字样。

这个就需要添加文字，即“绘制文本区”。

绘制过程和绘制矩形一样。

文本区其实就是矩形加文字，其中矩形我们可以理解为文字的“底”。

矩形我们就不做设置了，去掉背景开启勾选，边框设为0 ，文本直接不要“底”。

文本，文字处更改内容，当然在画布上直接双击也能更改文字。下面的颜色、对齐就不再赘述了，很简单。填充，其实就是前端的“padding”概念，即文本内容到边框的距离。

基本制作完成后，记得将矩形文本“成组”，放到一个容器里。

接下来，就是重要的，让进度条动起来。

前面我们分析过了，进度条只是个显示，是实际加载的映射，用矩形X缩放表示。

这部分不再是依靠“动作”完成，而是靠“修改器”。

像添加“动作”一样，添加“修改”。

然后还需要注意，进度条“矩形”是X方向上的缩放，但是，是固定左边向右缩放。因此要更改一下锚点，设为左。

基本的制作是完毕了，还差最后的一步，我们要注意，进度条加载完毕就隐藏掉，再次加载的时候重新显示。

需要给整个进度条容器组添加一组动作。

预览一下效果。

 

我们在前面的 添加热点 的文章中，已经知道了如何添加热点，并且知道热点可以配置制作好的热点皮肤。接下来，我们就探讨如何制作热点皮肤。

所谓制作热点皮肤，实际上是制作热点的样式模板。把默认的皮肤样式换成我们制作的模板样式。

点击“添加交互热点模板”。

在画布的任意位置（尽量还是边缘位置）点击鼠标添加。

我们之前说过，添加的任何元素都会默认给出一个ID，这里的热点模板有一个默认的ID：Hotspot 1 ，我们可以对其进行重命名，重命名与否，都要记住这里的ID。

接着添加“图片”。

添加图片就是添加的热点样式。

在画布空白处单击鼠标，选择我们提前准备好的图片。

接下来有两步：第一，在画布上拖动图片的位置契合一下模板。第二，在树状列表里拖动图片使之成为热点模板的子级。

下一步，给热点模板，也就是 Hotspot 1 添加上动作。

这样，基本的制作热点皮肤模板就算完成了。

使用的时候，只要我们使用的是该皮肤文件。

然后，在热点配置的参数区设置。

皮肤ID选择 Hotspot 1 ，即制作的热点模板的ID，上面我们让记住的。

注意一下，上面我们添加动作时，“URL”和“视图”分别选的“热点URL”和“目标视图”，就是调用读取的这里的“链接目标网址”以及“目标视图”。

热点我们必须是一个个的添加设置，但是这样做的热点模板以及添加的动作，就可以让热点真正的使用的是样式，选择皮肤ID就能改变样式，而不用每个热点都制作皮肤。

制作的热点模板，预览是看不到的，只有在被配置了输出后才会看到。我们输出后看看效果。

另外，我们还要注意一下，我们上面制作的是导览节点的热点皮肤，用来切换场景的。除了导览节点外，热点的类型还有网址、图片、视频、信息，这些都可以制作热点模板，这些我们参考一下自带的那些皮肤就清楚了，而制作步骤和上面制作导览节点的模板是一样的。

本篇文章讲的热点模板是静态的，会员文章会介绍制作动态的热点模板。

补充：制作完热点皮肤，怎么让热点显示文本提示，请看文章 皮肤特效篇——提示 。

控制按钮，就是操作浏览的按钮，一般位于底部。

在制作之前，我们首先要有按钮的素材，也就是按钮图片，可以是任何图片格式，但首推svg格式，其次png格式，鉴于png格式较为常见且容易通过PS、FW等工具制作，所以我们这里使用png的按钮图片。

点击下载一组个人自制png按钮图标

更多素材可以关注我的淘宝店铺：little山林的店

有了按钮图标之后，我们可以开始制作控制按钮了。

打开皮肤编辑器。

点击“添加按钮”。

在画布空白处单击鼠标，选择要添加的按钮图标（点击其左边的“添加图片”也可以制作按钮，且图片可以转换为按钮元素），添加按钮或添加图片可以一次选择一个，也可以按住Ctrl键一次选择多个进行添加。

添加完后，需要对按钮进行排列排版，排成什么样子根据(UI)设计要求或者自己的喜好来，可以参考自带的那些皮肤，也可以借鉴我们见过的一些皮肤。

按钮的排版可以先鼠标拖动，排出大致轮廓，再通过右边的参数“位置”调整按钮确切位置。大致就是保持按钮等间距，计算一下调整各按钮的 X 值，保持按钮的等高度，调整按钮的 Y 值。

按钮排好之后，我们就需要给按钮添加“动作”，也就是触发它们得到什么结果。毕竟按钮就是按了之后要有动作有结果。

点击后面的+加号或者双击前面空白处，给按钮添加动作。由图标我们也可以能看出每个按钮要实现的动作，开始给第一个这按钮添加一个“点击左转”的动作。

弹出动作设定的设置。

来源，就是由什么触发。可以是鼠标的事件触发，也可以时其它的事件触发。我们这里就不逐个解释每个事件了。这些事件单从字面意思就可以很好理解，绝大部分我们后面都会提到。

动作，就是触发后干什么，也即是赋给按钮真正的意义。要说明一点，我们能实现的动作，这里统统都给出了，超出范围的就无能为力了。

除了来源和动作之外，其实具体的不同的动作还对应一些不同的参数。我们与实际情况会一一说明。

我们开始给第一个按钮添加点击后左转的动作。

我们可以看到这里就多了两个参数，一个方向，一个速度。方向不多说了，说一下“速度”参数，说速度可能不太准确，这个参数在这里的意思是，点击后转动的幅度大小。这个参数默认是0，数值越大动作幅度越大。但是需要注意，当值是0或者我们不设置时，统统默认为最小值1。至于具体的我们想点击一下实现多大的动作幅度，可以根据实际情况一点点的试验，得出最满意的效果。

后面几个按钮的动作我们就依次的设置。

以上，是我们制作的第一种按钮，只赋予了一种单向的动作。比如左转，点击只左转就可以。

下面再说第二种按钮，赋予双向的动作，严格说是两个按钮分别赋予的单项动作，但占用一个位置，看起来像是按钮可切换能实现双向动作。

以上这四组按钮分别是音乐开关、自动旋转切换、拖拽方式切换、全屏切换。

我们先以“音乐开关”为例。

给两个按钮分别添加上播放和暂停的动作，这里注意目标是 _background ，我们以第一种方式添加的背景音乐，默认的ID就是 _background 。

添加完动作我们就需要将两个按钮拖到一起（可使用参数调节使契合更严谨），占用同一位置。

接下来，我们需要继续给按钮添加动作。再添加动作前，先从逻辑上理顺：两个按钮，同时只能显示一个，另一个隐藏。在点击显示的按钮时，自身隐藏，另一个则显示出来。

所以两个按钮在开始之前就需要隐藏一个，至于隐藏哪个要根据具体情况来，如果我们添加背景音乐时，循环参数设为0或者1、2、3…… 即进入场景就播放音乐的，那就把播放的按钮先隐藏，显示暂停的按钮。如果是循环参数是-1，即进入场景不自动播放音乐的，那就把暂停的先隐藏，显示播放的按钮。这样我们也能理解，按钮如果设置播放动作时，还有个循环参数，那是针对循环为-1为前提进行设置的。

我们的音乐是进入场景就播放的，所以动作设置如下。

先让播放按钮的初始值是隐藏自己。

然后给两个按钮的动作，分别是点击隐藏自己和点击显示对方。

当然，如果要求不高，只使用一个按钮，我们的动作也能实现。

因为双向的动作本身就存在。

制作音乐开关的按钮完毕，我们依次制作自动旋转切换、拖拽方式切换、全屏切换的按钮。

注意一下，开始自动旋转的两个参数“延迟”和“恢复视野”。“延迟”在前面的开启自动旋转文章说过，它是指等待鼠标键盘无操作后多长时间开始旋转。这里的延迟是一个意思，不是点击按钮后等待多长时间开始旋转，而是点击按钮后立即开始旋转，而后我们操作了鼠标键盘后，旋转动作会暂停，接着等待鼠标键盘无操作后的“延迟”时间再开始旋转。“恢复视野”，也即是返回水平线，这里的数值不是时间，而是速度，值越大，返回水平的速度越快。

拖动模式有两种，连续模式和拖动模式，前者是浏览视野跟随鼠标拖动的方向，后者是浏览视野想着鼠标拖动的反方向，具体的我们实际操作一下就明白了。其中还有一种模式是切换模式，即双向动作，点击后切换连续和拖动模式。

全屏没什么好说的。

这四组按钮对应的动作，都可以由一个按钮赋予一个双向的动作完成。

在设置完动作和按钮的位置设定后，为了对按钮的统一管理（比如统一移动位置、共同作为动作的目标等），还需要对按钮“成组”

（有一点需要注意，当两个按钮重叠时，谁在树列表里靠上，谁显示在前，这和PS里图层类似）

点击“绘制容器”。

绘制过程和我们鼠标选择多个文件类似。

绘制完，我们可以看到所有的按钮文件，都成为容器 Container 1 的子级。

对于放进一个容器的控制按钮组，我们还需要注意，调整容器的位置。不是X、Y，而是锚点位置。这样设置，控制按钮才会真正的位于底部居中位置。

最后说明，对于我们添加的任何元素，软件会默认给出一个ID，不论是容器还是按钮，我们可以使用默认的ID，也可以在右侧的参数区进行ID重命名，总之一定要保证元素ID不要重复，避免动作逻辑混乱。

制作完毕或者在制作过程中，我们可以随时“实时预览”。

制作完成，记得保存，命名。

使用时，直接在这里选择就可以了。

制作按钮介绍完毕，要在这里说明一下，我们为了介绍制作按钮的基本步骤，做了这么一组按钮，实际上，上面这样一组按钮是没有必要的，上下左右放大缩小这几个按钮除了看起来有排面，实际用处并不大，电脑上完全鼠标就能完成，而且操作上本来就是更多的使用鼠标，至于手机端就更不需要了，而且对于手机端来说还占地方，所以，我们制作皮肤按钮时，要慎重考虑实际效果。

我们在学习制作皮肤之前，肯定不能凭空造，如果我们是从未接触，那势必要有个参考，而最好的参考就是官方自带的皮肤文件。通过自带的皮肤文件，先了解一下皮肤的大致的构成。

首先打开自带的一款皮肤，这里就挑选simplex_v5为例。

点击“编辑皮肤”打开

或者在皮肤编辑器里通过文件——打开，选择simplex_v5文件。

进入皮肤编辑。

我们先看树列表。有两点需要说明，第一，列表显示所有的元素，相关的元素之间有父级和子级的关系。第二，元素过多的情况下，我们可以通过前面的“眼睛”图标勾选框，使部分元素在右边画布显示隐藏，以方便我们的编辑。

再看画布部分。画布的有效区域就是格子底色的区域，我们可以打开所有自带皮肤观察，会发现皮肤文件的总大小都不大。在全景漫游中会以当前大小布局适应，自动的伸展平铺。我们自己制作皮肤文件时，可以根据自己的需要适当调整画布大小，但是建议不要太大（超出1920×1080），也不要太小（要放得下布局元素）。

我们可以点击画布的空白区，查看画布的属性。画布只有三个属性，大小、边缘和变量。

当然，针对不同的元素，这里的参数也会不同。比如，在画布中或者树列表里选择一个按钮元素，相应的参数就完全不一样了。

回到树列表和画布部分，我们可以观察到，simplex_v5主要有三部分：控制按钮，热点，进度加载条。

这是一个经典的Pano2VR皮肤构成，我们会先从这三部分挨个的学习制作，并在后期补充另外的两大部分，导航图和缩略图。