就在最近，我们的同事 Junling Chang 使用SAP 分析云中的分析应用功能，开发了一个专为移动端展示而设计的移动应用demo。
我们先来看下这个demo，这是一个移动端上的仪表盘，展示的是业务用户比较关心的一些关键指标，这些指标会按照不同的主题来加以分类，包括财务、销售、生产和库存等四个不同的主题。用户可以在这四个主题间做切换，快速定位到自己所关心的那部分内容。
关于这个demo的详细内容，可以参考以下的这篇blog：
今天我们就以这个移动应用为例，来简单介绍下如何利用分析应用做有针对性的移动设计，以及设计过程中需要注意的一些点或经验。
1 – 为什么要使用分析应用
我们都知道，在SAP 分析云的故事中，已经可以使用响应式画布来做设计，而这些响应式页面已经支持在移动端实现自适应的展现。但是，使用故事的响应式画布，在实际应用中，还是会遇到某些限制，比如：
- 画布的自适应行为完全由系统来决定，单个微件（widget）会占据整个屏幕的宽度，无法有效利用屏幕的全部空间
- 不同微件之间不允许重叠，在页面设计上会有一定局限性，尤其是最终的界面美观
- 用户交互的方式比较有限
而如果采用SAC的分析应用，则可以利用更丰富的配置以及灵活的脚本语言，来做灵活的页面布局，更美观的页面设计，以及更多样的用户交互，从而在移动端实现更好的用户体验。
目前，分析应用已经支持在IOS的SAC移动app，或者在移动设备的浏览器上使用。对于安卓端的SAC移动app对分析应用的支持，也已经在开发的产品路线图上。
关于分析应用的更多详细信息，可以参考以下帮助文档：
2 – 如何为移动端设计分析应用
应用的页面分为上下两个部分：
- 位于页面底部的切换面板，方便用户在不同主题间做内容的切换
- 占据大部分页面的主题面板，展示不同主题下的内容，主题面板也包括两部分：
- 页面上方固定位置的KPI面板，展示用户最关心的一组关键指标
- 页面中间的分析面板，用户可以通过手指的移动来展示更多内容
下面我们就依次来介绍下不同面板的一些设计细节。
2.1 – 切换面板
切换面板包含了四个区块，代表不同的主题（财务、销售、生产、库存），供用户做切换，每个区块占据25%的屏幕宽度。
在设计上，每个区块其实都包含了四个不同的微件：
- 图片，即不同的小图标
- 文本，主题描述，如“财务分析”
- 前景图形，用于用户点击
- 背景图形，用于标识当前选中的主题
这个切换面板占据100%的屏幕宽度，为了保证切换面板一直显示，将其高度设计为固定的11%的屏幕高度（可根据页面设计自由调整），并且在位置上，设置为从屏幕底部开始布局。
每个区块则占据25%的屏幕宽度，分别从屏幕的0%、25%、50%和75%处开始定位。
设计前景图形的目的，是用来给用户点击切换，使用图形可以比使用小图标或者文本占据更大的空间，方便用户点击。因此在设计上，放置在最前，可以触发微件被点击的操作，同时使用了透明色，能显示出背后的图标和文字。
前景图形的脚本还是相对简单的，对于每个主题对应的图形，被点击时，只需要显示对应的主题面板，并隐藏其他的主题面板即可，这里用到了’setVisible’这个函数。
以第一个财务主题对应的图形为例：
我们在这里再额外添加一个背景图形的原因，是希望有办法可以让用户很清楚的了解当前在看的是哪个主题。我们可以通过不同的颜色，来标识当前正在展示的主题。而将这个图形放置在背景上，则不会影响到靠前的其他微件。
根据用户选择来改变颜色，这个可以通过CSS样式来实现。我们首先可以定义两个不同的CSS样式：
然后使用‘setCssClass’这个函数来切换CSS样式：
需要注意的是，在这里，我们把切换CSS样式的代码放置在显示隐藏主题面板的代码之前。这么做的原因是因为脚本是按顺序执行的，我们需要在将图表显示出来之前，将CSS样式先准备好。
2.2 – 主题面板
因为设置了4个不同的主题，所以也分别设计了4组不同的主题面板，应用中所用到的各种图表展现也是在这些主题面板中设计。为了统一的用户体验，每个主题面板采用了相似的设计。
以财务分析这个主题面板为例，整个面板也分为上下两部分：
- 位于屏幕上方的关键指标面板，用于展示最重要的一些关键指标，这个指标面板会固定在最上方
- 位于屏幕中间的分析面板，用来展示相关主题的一些详细内容，这个分析面板允许用户做上下的拖动，来展示更多的内容
指标面板里用的是数值图表，因此可以在同一水平上放置两个图表，以更好的利用屏幕宽度。这也是使用用户故事的响应式画布无法达到的效果。
另外，由于需要展示的内容比较多，只用一个分析面板来展示所有内容并不方便（需要多次拖动屏幕），因此可以设计多个子面板，将内容按类别放置在不同的子面板里，并配合用户交互及脚本来实现不同子面板的切换。切换这些子面板的方式也很简单，同样使用’setVisible‘函数就可以。
而各个子面板的设计也比较直观，将需要展示的内容选择合适的图表类型加以添加。设计方式和标准的故事或者应用分析的设计是一样的。
这里我们也给出一点小窍门。默认情况下，每个面板以及每个图表会占据100%的屏幕宽度，在这样的设置下，图表会非常贴近屏幕边缘，这样在视觉上的用户体验并不是很好。因此可以通过位置的设置，给屏幕边缘留出一点空间，这样在视觉上会更舒服一点。我们在测试了不同的比例单位后，选择了在屏幕两侧各留出2%的空间。
另外一个小窍门是关于CSS样式的另外一种方式。在上面的例子里，我们在关键指标面板里放置了两个数值图表，分别展示的是收入指标和利润指标。因此，在中间的分析面板里，我们也设计了两组不同的子面板来分别展示收入和利润的详细信息。因此，用户也可以在关键指标面板里，通过点击不同的区域，来切换不同的子面板。
和切换面板类似，这时候我们也需要有办法让用户清楚地了解到当前在看的是哪个子面板。这时候，采用背景图形的颜色就不适用了，因为会被上方的数值图表所遮挡。而且大面积的改变数值图表的背景色在视觉上也不是很美观。
这种场景下，我们可以利用另一种CSS样式，也就是边框线。如下图所示，在选中的指标图表下方，通过一根醒目的边框线来做标识：
为了做到这一点，在CSS样式中，我们可以定义两种不同的边框线样式：
然后同样使用’setCssClass’函数来做CSS样式的切换：
需要注意的是，其中作为隐藏效果的CSS样式，其实并不是将边框线隐藏，而是将边框线的颜色设置成指标图表一样的背景色，从而实现了隐藏的效果。
2.3 – 分析应用独有的微件和用户交互
和用户故事相比，分析应用有更多的微件类型可以来使用，其中有些微件也比较适合用在移动端的设计上。
2.3.1 – 下拉框
在生产分析这个主题下，我们添加了一个下拉框微件，用户可以通过下拉框来选择要看某个特定的产品的生产信息。
可以使用‘getSelectedKey’函数来获取下拉框中选中的值，之后再使用‘setDimensionFilter’函数来动态的切换相应图表的过滤条件。
当然，在分析应用中也可以使用输入控件（input control）来实现切换维度成员。使用输入控件的话，可以不需要写任何脚本。但是，使用下拉框在某些场景下，会提供更多的灵活性，因为除了用下拉框来对某个维度成员做选择，还可以用下拉框选择不同的维度，甚至不同的场景，从而可以实现在查看的同时，改变某个图表的结构，而这也是用用户故事达不到的功能。
另外，下拉框占据的屏幕空间更小，更适合移动端的场景。
2.3.2 – 滑动块
在SAC中，对于分析场景或者计划预算场景来说，都会有一些模拟试算的场景。而在分析应用中，可以利用滑动块这个微件，作为模拟试算的影响因子，让用户方便的改变某些因子，并快速得到模拟计算的结果。因此，滑动块也可以在移动端的分析应用中使用，使得用户可以随时随地做一些临时的模拟试算，并做出快速响应。
在这个demo中，我们也添加了一个子面板，专门用于模拟试算，而影响因子的调整就用了滑动块：
具体的实现方式也并不复杂。首先，对每一个需要添加的调整因子都创建一个脚本变量。之后在页面上添加一个滑动块，并对这个滑动块，打开写回设置，并映射到之前创建的脚本变量上。当用户在打开分析应用并滑动滑动块时，对应的脚本变量的值就会随之发生变化，而这个变化值则可以用在相关的计算中，这个计算可以是计算度量，也可以是脚本自身的计算。
在这个demo里，模拟计算是通过计算度量来实现的：
2.3.3 – 弹出框
在分析应用中，我们可以添加一个弹出框微件。使用弹出框的作用在于，用户可以临时的就某个关注的指标做一些详细的分析，而这些分析内容可以在弹出框中做展示。同时当弹出框被关闭时，可以回到之前的页面做继续的分析。很显然，如果要用用户故事来做，只能通过不同页面及页面之间的跳转来实现，用户体验上会不如使用弹出框。
在这个demo中，我们也设计了一个弹出框效果的页面，用户可以在一个表格中，点击选取某个产品类别，一个弹出框会显示被选中的产品类别的一些详细信息。
但是这里需要解释一下，这里的弹出框，事实上是通过子面板来实现的，而并不是标准的弹出框微件。原因在于，如果使用标准的弹出框微件，弹出框的位置和大小完全是由系统来控制的。在电脑端这样做问题不大，但是在移动端，因为屏幕的大小关系，需要我们更合理的来安排弹出框的大小和位置，缺少对位置和大小的调整，会很难优化最终的用户体验。所以在这个demo中，我们并没有使用弹出框微件，而是利用子面板，来模拟了弹出框的效果。
基本思路是，先增加一个空的面板框（SalesPopup），在这个面板框里不放置图表，并且把面板背景色设置为80%的透明度，这样当这个面板被显示的时候，其背后的其他面板仍然会被显示出来。然后在这个面板中再添加一个子面板（SalesPopup2），通过设置合适的大小尺寸和位置，模拟出弹出框的效果。
另外，这里的用户交互是点击表格中的某一行来打开这个“弹出框”，所以还需要将用户选中的那一行作为参数传递给对饮的子面板中的图表。具体的脚本可以参考下面的示例：
2.3.4 – 动态文本
分析应用和用户故事相比，最主要的区别就是允许用户通过脚本设计来实习更复杂的功能。所以在这个demo中，我们还利用了脚本功能实现了动态文本的展现。
以上图为例，在财务分析主题，用户可以看到一个警告信息，提示公司整体收入指标低于预期。在随后的深入分析中（通过点击“深入分析”按钮），用户可以切换不同的区域，分别了解不同区域的具体情况，同时，也会有一段文本帮助用户了解相关地区的解读。而在这两个页面里的文本，都是分析应用通过一些数据，动态生成的。而这里的动态文本生成功能，就是用了分析应用中的脚本编程能力。
实现原理其实并不复杂，就是利用JavaScript的文本处理语句，将一些关键字和相关的数据做一个拼接，同时利用IF语句，根据数据的变化，做对应的处理。
3- 设计移动端分析应用的最佳实践
3.1 – 分析应用的内容与界面设计
移动端分析报告与PC端的应用差别较大，不建议直接将PC端的内容直接转到移动终端。因此移动端的分析报告设计最好进行单独设计，设计时考虑以下几点：
- 整体主题设计可以与PC端一致，但每个主题下的细分主题，可以进行重新整合，结构尽量简化，且页面不要太多。
- 移动终端只选择重点指标进行分析和展示，不要把所有的指标都搬到移动终端。
- 设计移动端整体的界面风格，内容设计应与界面设计相结合，必要时调整一些指标或展现方式。
- 合理规划面板（Panel）的设计，尽量通过面板将需要一起展现或隐藏的微件放在一起，便于维护及其他调整。
另外需要注意的是画布颜色的设置。在最基础几个主题面板之间进行交互时，当从排列靠下的面板切换到排列靠上的面板时（如从生产主题切换到财务主题），会短暂的显示下整个画布的底色（默认是白色），如果画布底色与前端颜色不一致，效果会很不好。因此应将整个画布的底色与前端的主要颜色一致。
3.2 – 性能优化
性能是移动终端需要重点考虑的问题！SAC分析应用在设计时，一些设计方式或一些默认的功能选项（为方便设计），都可能对加载效率或交互效率有一定的影响，需要仔细分析并测试。
在本Demo设计中，通过以下方式对性能进行了优化和提升。
3.2.1 – 初始化时不需要加载的Panel，取消默认的“在查看时显示该项目”，并设置为隐藏
在分析应用初始化加载时候，一些面板是不需要显示出来的，这些面板可以通过取消默认的“在查看时显示该项目”选项，使其在初始化时不被加载，从而提升初始的加载效率。同时在布局中将其属性也设置为隐藏。
在需要加载时候，可以通过特定的脚本命令进行加载，如在首页中通过点击一个按钮来跳转时，可在这个按钮的脚本中定义“panel.setvisible（true）”。
3.2.2 – 大纲布局的排列设计中，应将默认需要加载的分析页面设置在最顶层
报告的大纲布局设计排列，应将默认需要加载的分析页面放在最上边。如：本Demo中，首页是财务面板，默认初始打开KPI与Revenue1面板，因此将其放在布局的最顶层。
3.2.3 – 不要在初始化时，运行非必须的脚本对象
分析应用中根据场景要求，一般会设计多个脚本对象，应仔细分析这些脚本对象，哪些需要在初始化时候就必须运行，哪些是可以交互中通过相应的点击调用。在初始时，仅调用这些必须的脚本对象。
如上，初始中，仅调用首页需要的“RevenueWarning“脚本对象，其他脚本对象不在初始化时候执行，可以在相应的交互中调用。
3.2.4 – 对仅用于取数据、而不需在前端展现的表，可以取消默认的“在查看时显示该项目”，并设置为隐藏
对于仅用于取数据进行后台测算，而不需要在前端展示的图表或表格，要取消默认“在查看时显示该项目”，并设置其属性为隐藏。
3.2.5 – 取消选择表格Table的“已启用计划“选项
对于仅用于展现数据、而不需输入数据的报表，要取消选择默认的“已启用计划“选项，以及“启用Explorer“选项。
3.2.6 – 取消选择统计图Chart的“Explorer“选项
Explorer是支持在报告中进行数据洞察的功能，在移动终端分析时候，数据洞察一般用不着，可以取消选择统计图的“Explorer“选项。
3.2.7 – 微件的选择顺序
SAC 分析应用中，一般来讲加载效率是Shape > Text > Button或Chart，因此在一些场景中，几种方式都可以达到效果的，就尽量用Shape。
如：在设计底部切换面板区域时，为保证点击跳转的交互效果，需要在小图标和主题文字上添加一个透明的小蒙版，这个透明蒙版的效果可以通过Shape实现，也可以通过Text或Button微件实现。为提升加载效率，就采用Shape来实现这个功能。
3.2.8 – 删掉最终脚本中的console.log
在分析应用中写脚本时候，经常会用console.log来进行Debug。在脚本测试完成后，为提升正常使用时候的效率，应将最终版本中的console.log删除。
4 – 结束语
以上就是我们关于用SAC分析应用来开发针对移动端展示的一些心得和经验分享。希望这些分享能对读者在未来实际项目上的实施有帮助。
限于篇幅，我们不可能把这个demo中的所有设计都一一列举。目前我们也在和开发团队协作，会将这个demo发布在SAC的内容网络（Content Network）中，未来用户可以在他们的SAC环境中直接导入这个demo，作为开发的参考。
另外，在文章的开头也提到过，目前SAC分析应用只支持了IOS的SAC App。目前开发团队也正在努力，会在未来的版本中，也对安卓设备上的SAC App，实现对分析应用的支持。
最后，感谢您的阅读，如果有任何想法或者问题，也欢迎向我们提出！
