浅谈企业级办公系统设计

这个领域对设计的要求是什么？

在阿里一个设计师的基准要求就是手段的多样与精深，一个设计师成长数年后手活已完备，此后的考验即是在对应的场合输出最合适的设计手段。我在企业智能待了5年，说一说我的定义：在这里做企业级办公系统和业界普遍的企业级系统的共性都是让员工能更高效地干完活。要满足这个“高效”，系统的领域分支就得最大化覆盖低效的线下工作行为，其次就是尽可能将那唯一一个员工无法主动选择的系统做的更易用，最后，这些系统会回到商业这条路上，以自身的产品能力作为核心的商品属性。

企业级办公系统属于典型的B类系统，它给我们留下的普遍印象是信息密集和样式简陋，因为在传统场景中它就是给少部分人使用的内部系统，基础观感和操作的资源投入的配比会明显降低；其次这类系统是针对特定职能领域的专业系统，名词、注释、行业标准会大大增加系统本身的易用性门槛；最后一点，企业级系统的更替成本极高，迭代生命周期长达几年到数十年，不同时期堆积的历史包袱造就了错综复杂的依赖关系。

从设计的视角来看，设计手段本身是不可能去颠覆行业几十年积淀的“套路”的，大多数情况下你根本没有0-1重构的主动权，甚至在视觉表达上也会举步维艰，因此狭义上设计的空间就会捉襟见肘。在我看来做这类设计需要把握3个切入口：
1.建立标准化，保障用户最基础的操作在预期之内；
2.了解业务生态，为用户达成目标铺设一条最简单快速的路径；
3.找到用户仍处于低效的行为，以更优的方式去替代它

本篇会通过一个具体的例子谈一谈我的经验：

挑选一个合适的“栗子”

但凡一个公司大了，员工办公用的电脑、屏幕、鼠标…日常环境中桌子、椅子、板凳…这种东西得管起来吧，坏了少了丢了得修得补。“AAP资产管理系统”就是一个管理着阿里巴巴有形和无形资产的平台，所有企业资产的生命周期都会在平台上维护和对接着线下服务。就资产使用者而言，可以在平台上处置自己手中资产的来去，就资产管理者而言，需要在后台调拨着资产的流通和存储。这是一个典型的将传统线下行为线上化的系统，如下（图1）可见这个系统的一个功能全貌。

2020年经过C端视角的升级改造后，让每个阿里员工都可以在线自助操作办公资产，并在线下通过服务台、资产自助柜完成全流程配套服务。新版上线后，在为期1个月的使用满意度调研中收获了高达166分的PSAT分值，而这个系统的研发方式基本90%以上是基础能力的覆盖，基本没有进行新型的交互方案和定制化改造，所以这应该是一个最贴切的企业系统案例。

图1:资产管理平台（用户侧）界面-首页

Step1: 建立标准化，保障用户最基础的操作在预期之内

“标准化”在设计领域中已经是一个振聋发聩的字眼了，它是企业级系统设计不可或缺的一层，要做好它包含3个递进的层次：
1.标准化的本质是研发协同的标准化
2.其次是交互的一致性带来的体验标准化
3.最后才是视觉的和谐带来的品牌标准化

先说第1层，企业级系统的体量和周期决定了不可能只有固定的项目人员从一而终，且持续运行的年限越久对基础建设的依赖层度越大，所以0-1阶段的技术栈架构非常重要，对于设计侧的迭代更像是一个负债的过程，迭代版本越高升级需要顾及的层面就会越多，散落在几百个页面中的样式的一致性会逐渐在这个过程中被消耗掉。而前期设计产物组件化的核心价值就在于此，组件是一种能把最基础操作行为脚本化1⃣️的东西，只要在最开始将其设计完成，就能被统一的管理，且它们的迭代能实时覆盖系统中各个角落。所以在构建基础交互行为时，需要尽可能地使用它们进行排列组合，这是一件前人栽树后人乘凉的善事。如下（图2）是整一个资产管理系统中被抽象出来的16个区块，在几百个页面中逃不出这几种组合模式，这个数字越小，标准化的程度就会越高，研发迭代的成本就会越低。
1⃣️脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。当执行脚本时，计算机会执行一连串的操作。

图2:资产管理平台抽象出来的16个常用区块片段

在这个阶段，是一个“挑选”和“升级”组件的过程（一个新设计系统在7年内都避免不了基础能力的周期性升级）。举个例子，在这个项目中就涉及到了对「Table 表格」组件能力的增量升级，表格是对大量有序信息的的容器，资产平台的主要信息就是各种资产的信息明细，所以表格的在线率达到了80%以上。如下（图3）是表格在系统中的5个变种，承载着“展示”“检索”“编辑”3种能力能完全满足现有的所有功能诉求，能达到这点就是表格升级的“单元格自定义”能力。

图3:资产管理平台中表格涉及的5种拓展样式

即使是对现有组件的选择，不同的组合方式也能直接影响用户的行为，进而反馈在业务的数据上。如下（图4）我们在进行产品体验基线的建立时会用到一个评价组件，这类的组件频繁出现在用户的视野中，已经到了让用户疲乏的存在，但从业务角度仍需尽力获取用户的反馈数据。在获取用户评价这件事上，真实主动的反馈才是对产品迭代最具价值的，所以一定会存在一个提供用户主动输入的「Input 输入框」，正因为该组件的开放性反而让用户望而却步。在新的评价组件中，我们基于第一轮的用户反馈呈现了几个概括性的问题类型，让操作成本降低到只需鼠标点击1次，而在点击之后在展示出扩展输入框。行为学的一些过往案例中证实了这点，当你付出了第一步的执行成本时，会有更大的几率去完成下一个顺序的步骤。在这个案例中流程没有发生改变，只是更有“心机”地选择了基础组件，带给最终的数据是30%以上的增长。

图4:一个评分组件优化的例子

即使是系统层的控件，也存在优化的空间，在信息拥挤的B端场景，隐藏不必要的干扰能提升信息阅读效率，而当用户需要操作时，提示提供视觉层的便利亦能给交互体验雪中送炭。

图5:滚动条显隐及宽度变化提升用户操作便利性

图6:等宽字体在数据场景发挥的价值

第2层的标准化是交互的一致性，简单来说就是尽可能将相似的操作行为用同一个方案来覆盖，这听起来是将设计行为同质化的一个过程。但这就是企业级应用特有的一个族群特征，即使开发团队不同，但用户始终是唯一的，用户早上用了“考勤系统”中午用个“报销系统”下午用个“会议室预定系统”，难道让ta去学习3遍不同的产品交互么？当然这里讲的是基础交互行为的标准一致，这对设计的成就“大我”的要求。

计算中的设计

B类应用的设计手法必须是克制的，避免更多的视觉噪音给页面信息量增加负担。在组件层，小小一个参数的选取，就要兼顾不同场景使用方式存在的变数。来看一个最简单直观的例子（下图）

这是一个带有层级的「导航菜单」，在不同的业务场景中会出现 Icon 有无的情况，组件设计者很容易确定单个菜单项中“Icon”和“文字”的大小比例样式关系，并用缩进的常规视觉手法来表达两行菜单的层级关系，但缩进多少是一个主观的变量。图中的方案中二级菜单的缩进实现了和一级菜单的文本对齐，同时 Icon 的存在直观地表达了层级关系，因此推导出最佳的“缩进值”=“Icon宽度”+“右间距”，这个缩进值又同样适用于无 Icon 情况下的层级区分。

前文提及B类应用的一个特点是页面数量大，且这些页面可能分布在不同迭代中，所以对一致性的解决方案就会落在参数上，以最少的参数去应对不确定的结构变化来限制样式产生分之的可能性。来看一个例子（下图）

这是一个「页面卡片」容器，它负责承载页面中不同种类的信息内容，根据信息的类型需要适时地去留“分隔线”，在页面观感一致性的角度，我们总是希望内容和标题始终保持肉眼统一的距离，这就产生了“标题”和“分隔线”、“分隔线”与“内容”2种常量参数，需要在每次迭代中牢记。在如图方案中将2种情况拆分成2个头部和1个固定的内容容器，并将间距的参数拆分到这3个模块中，每次使用仅需组合即可达到预设的最佳参数效果，直接摒弃了传入参数这个步骤来实现的标准化的管控，这是设计方案和技术实现配合的一种方案呈现。

在第3层的标准化是视觉观感上的品牌标准化，如果只有1个应用那只能叫品牌化，只有将企业智能所有的应用放在一起那才是品牌的标准化。我们曾经面对一个问题，做了那么多应用，到头来用户根本不知道哪些应用是我们做的，这是一件让人沮丧的事儿。要解这个问题，靠人和人的协同是不现实的，得从研发的标准化入手，耳熟能详的就是设计语言，通过一套 Design-Token （图5）来奠定设计物料的基础样貌，并强制由这套唯一的物料来进行应用研发最底层的支持。

图5:DEEP Design 的 Design-Token

之后需要找到影响用户观感的核心元素来让多个系统之间形成最直观的“印象”，在视觉中最重要的2个媒介就是“图标”与“插图”，它们是典型的图形化元素。当我们去设计这2样东西时，就得从平台出发建立顶层的品牌基调。如下（图6）“资产管理平台”和其它企业智能应用放在一起的效果不分你我，这就是实现了品牌的“大我”。

图6:“资产管理平台”和企业智能其它应用的品牌观感对比

在“资产管理平台”中通过插图将多个角色的协作关系进行了图形化的呈现，用户是橙色上衣的女青年，她在使用这个系统时接触到的“线上供应商”“资产管理员”“组织决策者”分布在不同的操作页面中，让图形化的元素言之有物并和用户实时的行为呼应，这是一个产品带给用户的温度。

*插图本身来源于“插画中台”绘制标准，仅从业务场景的需求出发做增量，产出亦可反哺插画中台，这样插画中台亦能保持一个健康的增长。

Step2: 了解业务生态，为用户达成目标铺设一条最简单快速的路径

资产管理平台的用户侧偏向于C类系统，用户只要在站点按需执行相关的操作即可完成自身的资产领用或“更换”“归还”“自购”操作，相对复杂的系统后台则面向“资产管理员”这个角色，用户每一次发起的资产操作行为，资产管理员都要在管理后台进行相应的资产处置操作，如下（图7）可以看到这个管理后台的一个基本面貌。

图7:资产管理平台管理端界面

它是一个层级相对扁平的典型工作台界面，用户（资产管理员）从左侧的导航前往不同相对独立的功能操作页面。这里我拿资产查询做一个展开，每一个资产都在数据维护层面有着不同的标签属性，比如一台笔记本电脑，本身具备“品牌”“型号”“名称”这几条基础参数，上溯又会有“资产编号”（每个资产的唯一专属编号）“类目”（属于什么类型的资产）“库房”（被存放在哪）“责任人”（谁在用）“地点”（谁在哪用）这几条管控的数据信息。在资产管理员检索一个资产时都是从几种标签从数据库中去找到这一件真实存在的资产。所以“资产查询”是一个高频的操作，但那么多的标签就会形成一个巨大的筛选器，且每次都要进行冗长的条件输入才能完成1件资产的检索，这是一名资产管理员每天要面对的事儿。其次，因地域和管理层级的不同，不同的资产管理员去检索资产的方式也会不同，比如少量且面对实物的场景，使用“资产编号”是更快更准的方式；在管控跨地域的多处资产时，会频繁使用到“库房”“位置”；从团队资产使用场景会直接从“责任人”去检查资产…这就导致了不同角色下筛选条件维度的不同，也确定了同一种角色检索资产方式的趋同。在这个命题下，要提升资产查询的效率就是要解决如何让筛选器快速地列出查询条件。

在这个小确幸的Case中我们借鉴了Fiori 的 P13n 对话框的解决方式，为筛选组件增加了“筛选设置”的能力（图8），用户可以按自己的筛选习惯去存储自己的筛选条件，以及保存自己的多套筛选方案，让接下来的行为变得更高效。

图8:具备保存筛选条件的筛选模块

体系化的满意度提升

在2021年初我们发起了专项满意度升级战役，相比在日常需求中的体验迭代该方式会有更全的视角和设计牵引力，在对500+资产管理员投放调查问卷后收集到了322份有效反馈（图9），整体的满意度为142分落在良好的水平。

图9:资产管理平台管理端 PSAT 满意度基线

在6个核心产品功能模块的独立满意度分值中我们发现按模块的使用频率和满意是处于一个健康的模型，即高频模块满意度较好，低频模块满意度较低。且主要的分数区间落在4分（图10），即体验基本满意但不够极致。也帮助我们在接下来针对性的体验提升策略中锁定了“资产盘点”“资产创建”这2块体验洼地（本文对“资产盘点”作一个展开介绍）

图10:资产管理平台管理端分模块体验评分

将用户反馈结合盘点行为的阶段，我们发现用户的体验卡点其实分为线上和线下2类，经过对用户反馈原声的转译后我们将问题分为“盘前”“盘中”“盘后”3个阶段8类问题，共计14个明确的体验改造切入口（图11）

图11:“资产盘点”功能模块下用户反馈原声的梳理

说到这里我们依然还是挑一个明确的例子讲一讲，资产盘点其实就是去检查公司的资产是不是完好，在哪里，谁在用
，有没有丢失或损坏情况。是一个周期性的任务，像行政资产桌子椅子这些可能每年会按区域盘点1～2次，比如西溪园区的行政管理员在年初定下了一个盘点任务需要盘点1～8号楼所有行政资产的实物情况，“任务负责人”就会来到资产管理平台创建这样的一个盘点任务，在创建这个任务的过程中恰我们在满意度调研中发现的一个体验卡点。
因历史遗留问题，产品的初代设计完全是技术化的思维，导航的设计是功能导向，导致“任务负责人”和“盘点操作员”都挤在同一个页面去执行操作（图12），这样2个角色都会接触到冗余的页面信息因此降低了产品的易用性。新的方案中我们将产品导航设计的思路更正为以2种角色的任务导向，干什么事去什么页面，且达到的页面中全是和本角色相关的操作，在角色任务交集的任务节点再将任务流进行汇合。

图12:新旧“资产盘点”方式流程对比图

如（图13）可以看到新的分流设计方案中单一角色所需执行的输入项变得更具“确定性”，页面信息减负，页面易用性提升。

图13:新旧“盘点任务创建”方案对比图

Step3: 找到用户仍处于低效的行为，以更优的方式去替代它

解决了盘点任务的建立环节就到了“资产盘点”这个行为本身了，由“盘点操作员”亲自执行，去把西溪园区的桌椅板凳挨个清点一遍…为了找到这个体力活环节的体验问题，我们组建了一支小队亲自去实操了一边这个盘点工作：

图14:资产盘点任务线下实操

盘点的原理是这样的，每一个资产实物都贴有一个一维码标签，盘点操作员达到自定的区域会有一个该区域应有资产数量和总类的数据表，然后通过一个手持的扫码枪按个去扫描区域中所有资产的一维码标签，最终将扫描所得的标签数据和原始数据进行比对，获得区域中资产的数据缺失（盘盈、盘亏）情况，以及资产位置变更或使用状态的反馈。

在整一个实操流程中最让我们头疼的就是辨别资产，因为业余的我们并不能将原始数据的资产名称和实地实物外观一一对应，比如眼前有2张桌子，1张叫“休闲桌”1张叫“长桌”傻傻分不清楚。紧接着就是寻找标签的过程，在隐秘的角落以奇怪的姿势去扫码录入数据，而且因为扫码枪通信距离的问题必须一个人扛着电脑，一个人扫码，组队完成任务，光是一个工位片区就花了我们半个小时的时间。专业的资产盘点操作员虽然会比我们更熟悉资产和操作方式，但这个过程本身仍是一个非常传统的体力活动。所以，提升线上系统用户的满意度，真实的解决方案未必也在线上解决！我们就盘点流程按线上线下行为进行剥离如下（图15），并和产研团队将反馈内容也进行分离，验证了线下行为的体验槽点着实多了整整一半。

图15:资产盘点任务线上线下行为拆分

此时我们将方案聚焦于线下盘点行为中的对象，主流的行政资产品类和数量占据了资产类目的92%，多达50万件。这类资产的特征就是“五花八门，数不胜数”（图16），且在园区的拓展下5年后这类资产的数量还会翻3倍。在人力成本不断上涨和业务发展趋势下，我们需要把握住这个降本提效的时机。

图16:被盘点资产的数量类型分析

显然这个问题不是画画设计稿就能解决的，这就呼应了本文的第二章节，设计师有多了解业务生态。在行业中存在于“一维码标签”“BLE标签”“RFID标签”3种主流标签方案，3者的造价单位分别以“分”“角”“元”档区分。
第1种就是现存的普通标签，它呈现的一维码标签内容必须依赖于读码的终端；而第2种“BLE标签”是内置芯片的昂贵标签，它被广泛用于高价值资产的监控，就像漂亮国电影中假释期的犯人被带上了脚环，被监控了活动路径和活动范围；而第3种“RFID标签”介于2者之间，它内置的“芯片”极其简陋，基本只有锡箔的厚度，它能响应附近发射特定电波的终端。这个技术能力就突破了距离和位置的限制，一个用机器替代人工的方案跃然于眼前。

在我们业务团队和工业设计小组的合作中，第一代原型机落地，它是一个被能推着走的小车，车载信号发射设备能在行进中实时获取周围被贴着“RFID标签”的桌椅板凳，只需在楼层遛个弯，原本需要拿着扫码枪贴脸获取的资产数据就统统被收集到资产管理平台上了。在我们的实地可用性测试中，验证了该方式能在盘点大规模资产时比人工有更高的效率和准确率。同时在成本的预估上能在量产后远远低于人力成本投入，因此设计团队和行政业务方一拍即合，着手于实际方案的落地。

图17:可用性测试实体方案验证

在企业智能工业设计小组的专业引领下，全新的自研硬件“资产盘点车”就此诞生。

图18:“盘点车”工作状态模拟效果

在企业级办公系统领域通过硬件去开拓市场并形成自研技术的壁垒的做法并不是新鲜事，比如钉钉从小小的一个“打卡器”开拓中小企业办公领域，进而演化为一系列的办公套件。阿里巴巴企业智能的一个个垂直技术解决方案源源不绝地通过“钉钉”以及“阿里云”输入到国内外市场，让商业美而简单。

最后仍有必要解释一下～

在普遍的互联网视野中，企业系统一直被冠以后台系统的帽子，其实在这几年的风起云涌中它正悄无声息地与我们如影随行。如音视频会议在疫情期间走进中小学课堂，市民可以通过支付宝进行市政业务办理，线下演唱会可以直接通过扫脸入场…这些都是基于量级的用户数据衍生的服务升级去替代原本传统的集体协同行为。在阿里巴巴，这是一个庞大的员工生态圈，亦是一个初始的练兵台地，我们基于员工的“数量”“职能”“业务域”“地域”“语言”等多维信息改变着人与人之间协作方式的升级。最近华为发布了“鸿蒙”系统，打响了中国自研操作系统破局国际技术垄断的第一枪，面对诸多国际企业级办公领域的先驱，我们亦任重道远。本文仅以小小案例管中窥豹，谈及皮毛，目前笔者已经离开阿里，可在通过语雀留言保持交流。