6个原则，带您解锁移动端响应式界面设计

[yvonnexu]

1.前言

在上一篇文章中，我们谈到了网页端可视化仪表盘设计的原则--可读性。可读性准则可以帮助你检查你的仪表盘，使其能够更准确地传达信息。除了网页端仪表盘，自SAP分析云的社交媒体整合服务推出后，移动设计也越来越受到关注。我们的同事iamsharon根据junling.chang专为移动端展示而设计的移动应用demo讲述了如何轻松实现该功能。关于该demo的详细信息，请参见：指尖上的业务分析助理 – SAP 分析云与企业微信集成案例 | SAP Blogs。

在这篇文章中，我将谈谈移动端响应式界面的设计要点。

1.1内容如水 “Content is like water”

当响应式界面开始流行时，设计师Josh Clark提出了 "内容如水 Content is like water"，其灵感来自于功夫大师李小龙的名言。

图1 李小龙名言

这是个很好的比喻。一个好的响应式界面就像中国功夫中强调的 如果你把屏幕看作是一个容器，内容就会在这个容器中流动。

图2  内容如水

1.2什么是响应式布局？

响应式设计是由Ethan Marcotte在2010年提出的，目的是让同一个网页在不同的屏幕分辨率下有不同的显示方式。

从技术角度来看，当浏览器的宽度达到一个值（Breakpoint）时，页面的布局和风格就会发生明显的变化，这就是响应式设计最重要的特点——分段显示。

图3分段显示

在SAP分析云的故事中，用户已经可以使用响应式画布进行设计，这些响应式页面已经支持移动端的自适应呈现。具体操作方式请见：使用流式布局面板和面板设计响应式布局 | SAP Help Portal。

图4 SAP分析云故事 响应式画布

 

2. 针对移动端的响应式设计准则

对于移动端响应式界面设计，除了上一篇文章提到的可读性之外（如何设计可视化仪表盘大屏？最佳实践 ——可读性 Readable | SAP Blogs），我们还需要保证用户的浏览体验是流畅一致的，并在不同的界面中合理地显示元素。这意味着在设计之初就需要对界面的布局进行规划。

2.1 流体图像

流体图像是响应式界面最常见的布局方法，它经常被应用于图片的显示。当图片的宽度大于或接近手机的宽度时，流体图像通过等距缩放使其适合界面。

图5 流体图像

这里需要注意的是，流体图像主要适用于将大分辨率的图像放大到小尺寸。如果图片很小，放大后会影响清晰度和可读性。为了避免这种像素上的差异，你也可以选择在建设网站时准备多种尺寸的照片。

2.2 间距调整

当界面中的小元素较多时，我们选择通过调整间距来处理。像下图的柱状图，我们只需要微调每个数据块的距离，就可以使他适应这个画布。

图6 间距调整

另外，对于页面的间距，我们的同事roy.jin在测试了不同的比例单位后，发现在屏幕两侧各留出2%的空间，可以提升用户的视觉体验。更多详细的操作细节，请见他的文章：实例分析：利用SAP 分析云的分析应用设计移动应用 | SAP Blogs

2.3 布局扩展

在一个屏幕上显示非常多的数据是网页端的一个特点，那么我们通常如何将一个有大量数据的页面适应于移动端呢？

为了适应移动端的宽度，我们会根据画布的大小自动对于显示的数据条目进行缩减，用横向拖动的方式查看完整数据。

进阶的选择是在这里我们可以使用过滤器，将移动端所显示的数据进行精选，如图7。

图7 布局扩展

2.4 弹出框

当你需要对于移动端数据进行更多注释的时候，弹出框提供了一个很好的选择。你可以在SAC分析应用中设置弹出框微件，或者也可以使用子面板的方式模拟弹出框微件。关于弹出框微件的设置细节，请见上文链接中Roy Jin的博文。

图8 弹出框

这里需要注意的是，弹出框微件的大小是完全由系统控制的。如果你有进阶的需求，使用子面板模拟弹出框微件可以让你更合理地安排大小和位置。

2.5 固定布局

固定布局顾名思义，就是将元素固定在屏幕的某个位置，比如居中展示，这样无论画布如何变化，元素的大小和位置都不再发生变化。如果要设计固定的布局，那么需要以面积更小的移动端作为设计的基准。

图9固定布局

2.6 组件替换

由于移动端与web端的操作方式与屏幕尺寸有着较大的差异，响应式布局中组件的平面大小与位置的变化有时无法满足用户更高阶的需求。这时候我们常用组件替换的思路提升布局的设计。

例如，在PC上比较常见的顶部标签栏，在移动端往往被调整为可折叠的卡片组件。如果标签栏的选项较少，它也可以被底部的导航栏所取代（图10）。

图10 组件替换

3 本期小结

通过本期的介绍，相信大家一定都了解了移动端响应式界面的设计要点。百看不如一试，快将学到的知识应用到响应式仪表板的设计操作中吧。

更多信息，请关注SAP分析云主题页面 (SAP Analytics Cloud | SAP Community), 参与社区的讨论 (All Questions in SAP Analytics Cloud | SAP Community), 并阅读该主题的其他帖子 (SAP Analytics Cloud | SAP | SAP Blogs).

感谢您支持我的第二篇博文，更多关于仪表板设计的信息，请持续关注本频道的推送。另外，我期待你在评论中的发表反馈和意见。咱们下期再见！

(文章图片均有作者制作。本博客中使用的图片保留所有权利。未经SAP SE或SAP关联公司的明确许可，不得以任何形式或为任何目的复制或传播本博客的任何部分）。