SaaS产品移动化，这些坑你躲不掉！

相信很多读者是带着好奇点开这篇文章的，对于什么是SaaS，SaaS产品有哪些并不是很了解，可能仅局限于听过。包括很多正在从事相关工作的童鞋，可能也没有一个比较清晰的认识。

一、关于SaaS

定义：SaaS是Software-as-a-Service（软件即服务）的简称。厂商将软件部署在自己的服务器上，客户根据自己的需求来租用软件，无需购买和维护，厂商会全权管理和维护软件。百度百科

分类：根据SaaS产品种类，可分为 通用型 和 垂直型 两类。

SaaS产品分类

二、为什么要移动化

随着移动互联网的迅猛发展，用户花费在移动设备上的时间越来越多，SaaS产品移动化成为一种趋势。
互联网浪潮下长期培养的用户习惯，让用户更倾向于通过移动设备来解决问题。
移动化办公，信息传递更快更及时，加快工作节奏，提高工作效率。

三、如何移动化

1.需求分析

SaaS产品移动化，并不是简单的将PC端的内容照搬到移动端，需要根据实际情况，多方面的进行分析、评估。

需求分析--->产品内容

用户的实际需求。哪些内容需要移动化，哪些没必要，需要进行逐一的筛选，最好有调研数据的支持。
移动端的局限性。一些复杂功能，例如报表渲染出图，因配置的问题，出图时间很长。可以考虑适当的简化产品功能，或做一些提醒、限制性操作等。
开发成本。对于一些开发成本过高的功能，前期可以考虑不上，等App上线后，再根据市场反馈，做进一步决策。

2.信息架构

根据上一步需求分析确定的“产品内容”，进行导航、框架的构建与设计，最终输出移动app的信息架构图。

App信息架构图

3.关于平台

平台选择
PC端的产品，一套设计方案可以通吃全部。但移动端产品，有多个系统平台，首先要考虑的是在哪些系统平台投放产品？

从上图可以得出，目前两个主流的系统平台是 Android 和 iOS，Windows Phone 已被市场淘汰，值得注意的是 iOS 的市场份额也在下滑。
市场现状
一般来说，一个移动应用应该根据不同平台的设计规范，分别展开设计。但是目前市场上，很多移动应用在不同的平台上基本上都很相似，包括大厂的一些应用（QQ、微信等），并没有较好的遵守平台的设计规范。
有以下几种可能：
①，学习成本。像QQ/微信是属于装机必备类产品，用户量、用户粘度都很大。我们的大部分社交都是在这上面进行的，长期高频的使用，让我们对其功能、结构都非常熟悉。常见的一个情景：你换手机了（另一种系统机型），如果新手机上的QQ/微信与之前用的差异较大，在使用时你会觉得难用、别扭，需要花时间去熟悉、适应，增加了学习成本。
②，平台规范。iOS刚推出的时候，就有比较完善的平台规范。Android相对完整的规范则推出的比较晚，加之它的SDK版本很多，开发周期长，所以在移动互联网初期开发一款App，一般都是先进iOS的开发，然后再复制到Android上。随着用户认知的不断建立，用户习惯的持续培养，现在想改过来也很难。
但是也有一些在遵循平台规范上做的比较好的移动App，像网易云音乐、知乎等。
工作现状
工作中进行移动应用设计时，理想的状态：有足够的时间，分别Android和iOS出一套设计方案进行开发。但现实往往是：时间紧，预算少，人力资源短缺，要求同时开发运行Android和iOS设备上的App。
此时可以考虑：
①，统一设计风格。Android和iOS一套设计方案，节省时间，降低开发成本。
②，微调设计方案。设计方案出来后，根据Android和iOS平台规范的特点进行一些微调，例如一些控件可以直接用原生的（日期弹层，提示框，分享弹层等），一方面减少开发人员重新“造轮子”，另一方面也能使得App在不同的平台上显得自然些。

四、页面样式

SaaS产品移动化，关于前期的准备工作“东拉西扯”了很多，可能有人已经开始头晕了，下面开始上干货。
关于SaaS产品，接触比较多的是ERP、采购管理软件这一块，所以接下来会更多的拿这方面的内容来举例，但是方法与技巧是共通的。

1.表格

点击看大图

PC端的表格，通常都比较宽，字段多，数据信息量大。如何将这么“大”的表格在移动端进行展示呢？最简单的就是直接将表格“搬到”移动端，但这样肯定是不行的。经过一番思考后，进行如下的尝试：

尝试方案

a. 删减字段，挑几个重要的字段进行展示，其它字段删除。这样虽然能够较好的在移动端展示，但却无法满足业务需求。
b. 加滚动条，该方案在满足业务功能上没有问题。但在操作体验上，首先这是PC端的交互方式，不适合用在移动端；其次，“可拖动”的区域比较小，当纵向数据较多时，滚动条可能出现在下一屏。再者，左右拖动是一个动态的过程，用户需要刻意的对拖动前后的信息建立连系。
c. 表格显示在一块固定的区域。
当左右滑动时，最左侧的一列固定且悬浮，其它列整体左右滑动；
当上下滑动时，最上面的一行固定且悬浮，其它行整体上下滑动。
该方案把表格移动化遇到的大部分问题都解决了。但它的缺点是，开发成本很高，且对移动设备的硬件也有一定的要求，特别是滑动时可能会出现卡顿。

通过对a、b、c三种设计方案的利弊分析，发现都不是很理想。“PC端的表格”、“移动端的表格”、“表格很宽”、“表格字段多”、“表格信息量大”……我们的思维已经深陷在表格的“泥潭”中再难前进。此时需要将思维从这泥潭中“抽”出来，放下所有的包袱，重新开始。

表格是什么？表格是展示和传递数据信息的载体。可参见《一个表格的自我修养》

既然是载体，也就是说在移动端的数据信息可以采用其它更合适的载体来承载。换句话说，就是可以尝试在移动端采用其它的形式来展示PC端的表格信息。（在意识上突破了表格）

表格炸裂（点击看大图）

接下来只需要对炸裂开的数据进行处理，可以发现每条数据的信息虽然多，但都是关联在物品上的。对于采购订单中的物品，最关键（最关心）的信息是：什么物品，买了多少，花了多少钱。在移动场景下，可以先将最关键的信息展示出来，其它的信息“转移”到下级页面显示。

最终方案（点击看大图）

2.多字段显示

移动端单据详情页对于多字段的展示，主要有以下几种形式：

A类：适用于字段个数比较多的情况。使用要求：字段名长度在2~4个字之间。
B类：适合直接展示在“首屏”的重要字段。使用要求：字段名长度在2~4个字之间。
C类：属于通用型的，比较适合于字段值为数字类的字段，也适合字段名长度相差比较大，在2-8个字之间的字段。

多字段显示

3.屏幕尺寸

相对于PC端的屏幕，移动端就显得小的多，加之SaaS产品的信息量也比较多，所以在设计的过程中，要特别注意“首屏”所承载的信息量，要把握好度。内容过多，增加了用户获取信息的难度，内容过少，频繁操作，也不合适。

对于一个页面内的信息量（可能有多屏），也需要进行控制。最重要的信息要第一时间呈现在用户眼前，一些重要程度不高的信息，可以进行“隐藏”（折叠）。