本文将以项目甲（代称）的乙系统（代称）设计为例浅谈空间复用解决大信息量问题，输出一些项目的经验和总结。乙系统整合了不下五个上一个版本的功能系统，而且新增加3个第三方接入系统，每一个功能系统的数据量和信息量都极为庞大。整合到一个功能模块内，无论是系统的稳定性和体验都要经受极大的考验。

B端综合性的软件系统会在单一模块融合进大量的业务需求，体现系统的集成优势，是为了整合业务也是智能化管理调度的趋势所在。单一模块大量的业务需求的处理在表现层的表达便是大信息量。单一模块大业务量、大信息量、密集的多样信息形式会混乱操作流程，挤压界面的有限空间，用户的学习成本也会徒然增加。所以无论是为了优化流程，还是提升信息可读性，都需要做减法。单一模块业务流程多，信息量大是无法改变的质的问题（客户强需求），所以只能做形式上的减法，以形式转换偷换空间感的减法体验，提高流程空间和界面空间的利用率。为了处理单一模块繁多业务流程、大信息量，软件通常会运用“藏”--增加信息层级的方式，但简单的藏会带来软件层级过深体验不佳的弊病。但藏应该是一个方向，因为空间拥挤是现实。有的放矢的“藏”，会是问题解决的方向。下面以乙系统的设计为例论述在有限空间处理大业务量、大信息量的另一种方式-空间复用，通过空间复用结合信息层级的处理，达到解决单一模块大业务量、大信息量的问题。因为主要总结空间复用解决单一模块大业务量、大信息量的问题，所以主要侧重空间复用的总结输出。

取词语在汉语里场景的多样化定义，空间复用里的“空间”并不是只局限于字面上页面的空间，放在具体的业务语境中空间既可指页面的空间也可指流程的空间，所以在文章的语境下空间复用包括以下几点：

空间复用：字面的页面空间复用，如A与B可以共同使用这一空间；

形式复用：指某空间模块内容形式的复用，业务流程形式的复用，从属于空

间复用的业务语境；

同类聚合：将空间复用和形式复用的信息整合，组成页面组件或流程组件，

体现出空间复用的页面信息处理功用。

空间复用能够解决单一模块大业务量、大信息量的空间不足的问题，同时同质信息表达形式的复用也能提升页面的可读性，提升学习效率。下面将以空间复用、形式复用、同类聚合三个方向结合乙系统的设计进行实例的总结及应用。

1.空间复用

常见的空间复用有两个方向：

方向一-共存复用：两个信息模块在同一页面区域内共存，可调和彼此大小。

优点-降低信息层级，缺点-单一类信息页面展示区域有限。适用于两类信息

同时并存的需求场景。

方向二-互斥复用：两个信息模块互斥，在同一个页面区域展示，但不共存。

优点-简化信息量，缺点-增加信息层级。适用于两类信息同时并存需求不强

的场景。

根据具体的需求场景选择以上两个方向的空间复用方式，下文将以乙系统模块为实例具体介绍关于空间复用的运用。

1.1空间复用

1.1.1共存复用

图1左侧导航所示的资源从上到下依次为资源1快捷菜单、资源2的树，资源1快捷菜单与资源2树之间可通过拖动相邻的边缘互斥改变某一项的区块大小，以便能够最大化展示特定情境下需要关注点的信息。因为二者都是地图定位和操作的源头，优先级高信息量大，有同时存在的需求，如紧急情况下需要查看具体资源2周边的资源1类资源。二者关联较紧密，所以采用共存复用的方式解决二者大信息量的空间复用，既能满足共存显示的要求，又能满足需要时突出展示某一类信息的情境。

图1  资源1与资源2资源树的共存复用

接续上面的叙述，框选的结果有资源1和资源2，二者资源量又都比较大所以需要通过快捷菜单进行过滤。右侧资源2按类别过滤及资源2、资源1的过滤结果（图2所示右侧矩形框选区）展示，同样可以通过拖动相邻的边缘互斥改变某一项的区块大小，以便能够最大化展示关注点的信息。采用共存复用的方式解决三者大信息量的空间复用。当然三者可共存但并不是必须共存，只有在三类信息都需要时：对框选结果进行资源1和资源2同时过滤时会出现图2的共存。

地图上的资源1、资源2的框选结果（图2圆形框选区）同样采用共存复用的方式同时展示，同时又通过动态的资源2的图标和不同色彩拉出二者的层级，因为相对于资源1，在框选或搜索操作中，此行业用户更关注该行业管理的资源2。

图2  资源1与资源2结果的共存复用

1.1.2互斥复用

图3所示从左至右依次为资源1快捷菜单、资源1搜索结果、资源1快捷菜单-展开、线路导航。四类信息复用同一个区域，也就是互斥复用，不共存。从本质上来说，之所以采用互斥复用，是因为上述四类信息是同类信息，没有共存的必要。前三类是资源1的不同规模的展示形式：快捷菜单显示所有种类、展开的菜单是连续的菜单详细信息、搜索结果是某一个具体的资源1、导航的依据几个资源1之间的位置，同类信息互有操作动作及因果关系，通过互斥复用的方式解决空间问题（完整流程在同一区域展示）的同时能够突出当前的核心信息，减少信息量，优化界面的视觉噪音。

图3 资源1与导航结果的互斥复用

图4所示从左至右依次为一类搜索、资源2过滤、操作一、操作二、操作三，五种信息种类差异化较大，共存的场景近乎为零，同时又都是低频的操作（这可以作为归类的一个性质依据），聚合到一起采用互斥复用的方式会使整个界面的划分更清晰。操作聚合，块面感会更好。­­­

图4 低频操作的互斥复用

1.2空间复用方法总结

1.2.1区分共存复用与互斥复用

落到业务场景上来说，共存复用的信息一般信息层级较高，而且信息关联性较强，业务场景较复杂，如上述图1提到的资源1与资源2通过左侧资源树在地图上的定位、框选的关联查看和操作都和具体的业务场景密切相关。而互斥复用的信息一般信息层级较低，信息之间业务关联较低，如图4中一类搜索、资源2过滤、操作一、操作二、操作三之间关联极弱而且都是一些低频操作。

从上面的例证中可知，共存复用和互斥复用之间的差别，这也是在设计中要关注的点。需要设计师通过对信息的层级的判断、业务场景关联的判断进而选择需要的空间复用方式，以便处理好信息的层级和块面的分割。空间复用只是一种信息展示处理方式，好坏的评判取决于业务流程梳理的流畅性，界面信息分割和层级的优劣。

1.2.2注意复用区域内的信息层级

空间复用并不是复制到粘贴的含义，不管是形式还是空间的复用都是为了保持信息的统一性。统一性是方向，信息的层级是产品的纹理，二者统一才能完整。所以在统一背景下也需要一些点睛之笔，以便通过视觉焦点这种自然的生理方式突出同一区域内优先级高的信息，为流程和业务场景梳理自然的起始节点。如图5所示框选结果中动态的资源2视觉突出，能够有效呈现用户关注的资源2信息，能够快速锁定目标进行下一步的操作，这里的视觉焦点便自然的成为业务流程起点。

图5 信息层级

2.形式复用

形式的复用基本上就是同样的形式不同的运用，一般意义上的形式的完全复用应该是完全同类型的信息复用，而在软件中同性质的信息形式复用也能在很大程度上提升信息学习的效率。简单界定一下，方便理解。

同类信息：同样的信息，A与B都是地点信息。

同性质信息：内在的属性或外在的表达属性相似，在设计中可以定的宽泛一些。同样的信息来源，如同样是框选获取的信息；表达含义的属性相似的信息，如路线的轨迹与台风的轨迹。

下面将通过乙系统设计实例介绍同类信息形式复用与同性质信息形式复用的具体运用。

2.1同类信息形式复用

如下图6所示的左右两侧分别为资源1类型的快捷定位、资源2类型的快捷点位。这两类信息虽然命名方式不同，但实质上是同类的信息-地图上的位置点定位，所以出于界面学习效率和业务理解引导的考虑，两类信息的选中状态形式可以完全复用，仅在定位图标的中心以具体地点类型图标示意不同地点分类。

图6 资源1与资源2类型定位形式的复用

小比例尺下地图视野将广泛，如图7所示，能够展示较多的区县行政单位（天气预报的最小单位），大比例尺下地图的行政区域点会缩小到只有一个区县行政单位，如图8所示。两种状态下开启天气预报，虽展示的位置和数量不同，但具体到一个天气预报单位上时展示的内容是相同的，所以完全复用形式，以便用户快速认知同类信息。

图7 多个行政区域天气预报

图8 单一行政区域天气预报

2.2同性质信息形式复用

当信息的获取模型相同时，我们可以从模型认知的角度复用二者的形式，从认知的源头做信息的复用。如框选与区域搜索便是认知模型相同的信息，框选是以折线/矩形/圆形框选地图上的资源1和资源2，如图9所示；区域搜索则是拿区域边界框选地图上的资源1和资源2，如图10所示。顶层的认知模型相同传导上层表达形式的相同，能够极大的提升信息的学习效率，所以二者表达形式可完全复用，即内在属性相同的同性质信息形式的复用。

图9 框选的展示形式

图10 区域搜索的展示形式

导航路线和台风路线同属于轨迹类的信息，即有信息内在属性的相似也有表达属性相似的，所以在一定程度上可以形式复用。再通过表达重点做相应信息的侧重，侧重的表达最好也要遵循一致性的原则按照形式复用的大方向走，如导航的起始点与台风轨迹节点的形式在表达上最好保持一定程度的一致性，如图11与12所示，二者同样以轨迹的形式展示，节点通过类似的圆环显示。相似中又有侧重点导航突出起途终三点，而台风轨迹只需要展示关键的节点，不需要做过多的突出。

图11 导航形式

图12 台风轨迹

2.3形式复用方法总结

区分同类信息与同性质信息

采用形式复用前需要区分信息的类型，上述论述的运用案例分别是同类信息形式复用与同性质信息形式复用。信息类型定义的不同，决定了形式复用使用的差异。

同类信息的形式复用最好是完全的复制，规避不同展示形式给同类信息带来的认知误导，而同性质的信息的自由度就相对高一些。

同性质信息的形式复用根据或是信息的内在属性或外在表达形式的相似，但本质上并非同一类的信息。不同类别的信息就存在优先级的不同，即使采用了形式的复用也要做一定的侧重区分。如导航突出起始点、而台风为了更契合用户的习惯就要展示台风的动态轨迹和节点信息，如图13所示。

图13 台风轨迹信息突出

所以在决定选用形式复用前必须区分适用信息的性质，进而选择需要的形式复用方式。

3. 同类聚合

进行空间复用的运用是为了将流程和界面从大业务量、大信息量中解放出来，以便提升大业务量、大信息量软件产品的用户体验。复用并不是零散的套用，同类聚合便是空间复用的落脚点。

同类在此处特指同类操作或同类信息，同类聚合将以上两种复用的信息进行串联，以便流程及信息能够优化展示，体现出空间复用的优势。

对应功能软件而言，一般都是操作和反馈的基本流程。所以对于同类聚合的论述可以通过操作到结果的顺序进行同类的聚合。

操作的同类聚合：对信息的源头进行聚合，突出高优先级的信息。

结果信息的同类聚合：对操作反馈的结果信息的同类聚合，提升结果信息的展示效果和读取效率。

3.1通过信息流聚合操作

如图14所示，区域1的资源导航属于高频高优先级的操作，在展示空间、界面位置上都做对应的体现。区域2同属于框选同一类操作、区域3属于更低频的操作，所以从操作类别和操作的优先级也做相应的体现。

区域1的高频同类操作聚合对比区域2的低频同类操作聚合、区域3的低频非同类操作聚合，整个聚合的形式和布局遵循信息流规律。体现在界面上：同类聚合，依据信息流的规律-先左后右，先高后低依次布局高频高优先级-低频低优先级的聚合信息。

图14 不同频率的操作聚合显示

3.2同类聚合结果信息

操作的同类聚合能够解决页面初始的静态效果，对于操作的反馈结果的同类聚合能够确保整个业务流程高效清晰，结果展示的高效清晰。

如图15所示区域A是框选的资源1和资源2在地图上的聚合展示，区域B是资源2统计过滤及资源1过滤的列表展示。A是两类新信息在地图上的图形化，B是两类信息文本化的详细信息。

两个区域的信息针对同一操作的结果聚合关联展示，类似的表达形式和有限度的突出保证界面的统一性和信息读取时视觉轨迹长度和效率。

图15 框选的资源1与资源2结果信息聚合

4. 空间复用方法总结     

4.1通过信息属性选用空间复用方法

宏观上通过同类聚合的方式将信息有效整理起来，如信息流串联，同类信息聚合，同性质操作聚合，低频操作聚合，同类聚和是寻找一个信息聚合的根据解决信息在流程和界面中的位置，从而达到宏观上解放空间的目的。

通过宏观的同类聚合解决信息和流程的结构，下一步便可以通过具体的空间复用和形式复用解决具体信息的解放空间处理，如图16所示的流程简介。

空间复用：

通过共存复用处理需要共存的信息，共存的属性决定了信息高优先级、结构层信息、信息间关联性较强的一般性特点。

通过互斥复用处理不需要共存的信息，不共存的属性决定了低优先级信息、偏低频操作信息、信息间关联性较弱的一般性特点。

梳理出信息属性，信息之间的对比：高对低、结构对操作、强关联对弱关联能给出明晰的指导方向，根据属性选择对应的空间复用方法，有针对性的突出和隐藏，以便达到空间复用效果。

形式复用：

通过形式复用处理同类信息，可以采用复制粘贴完全的形式复用，避免同类信息不同的表达方式带来理解上的不必要歧义。

通过形式复用处理同性质信息，需要突出信息之间的优先级，以便通过画龙点睛的手法确立流程明显的节点。同性质信息的性质维度是根据业务场景确定的，比如底层的模型相似、同属低频操作、表达形式类似，但归结到本质上还是非同类信息，非同类信息就涉及信息优先级的问题。

图16 空间复用流程

4.2通过业务场景梳理信息属性

上一节提到了空间复用的关键在于通过信息属性选择合适的空间复用的方法，那这一节简单提一下信息梳理的属性。

信息属性的梳理包括信息的层级-结构层/操作层等、信息本身的属性-高频/低频/引导/提醒等。能够快速的梳理好信息从层级到属性的方式便是业务场景，拿到设计需求后，通过业务场景串联起所有的需求，并进行信息的梳理。一一列出归类，便于进一步的信息空间复用方法的选择。

因为文章的重点在于介绍空间复用的运用，涉及业务场景梳理这一设计的常规流程不在这里做进一步的展开论述。

5. 小结     

文章从交互设计师的角度论述空间复用在解决单一模块大业务量、大信息量的问题，以项目甲乙系统的设计为例进行论述。

核心内容：通过业务场景梳理信息属性，通过信息属性选择空间复用的方法。进而达到空间的有效复用，处理好单一模块大业务量、大信息量的问题。

仅供参考。