工作中一个 erp 2.0 项目的心得总结

首先交代一下背景，这个项目是公司自己做的erp系统，为的是打通各部门线上线下各个流程，提高效率。因为每个部门职能不同，流程也不同，但是各部门之间业务关系又紧密相连，需要熟悉梳理不同部门的不同工作流程，又因为各种历史原因，每个部门的工作流程也不规范，这个又需要各个部门的领导去规范自己部门的业务流，使之标准、规范化。除了业务，产品线也是不规范，这些种种原因，公司亟需自己的erp系统去解决现在的问题。

按照产品设计开发流程，设计应该需要提前介入摸底、调查才能开始工作的。但是我们的工作根本不被重视，导致项目开发到2.0快结尾的时候，我们才介入，目的也就很明确了，美化！呵呵哒~

再交代一下项目技术架构情况，整个erp2.0使用的element的框架，自己本地的服务器，没有明确的产品经理和项目经理，领导画原型，前端直接调用框架组件，没有架构师，整个项目更像是救火，哪里起火浇哪里。站在局外人的角度，整个团队缺少项目统筹，缺少整体规划，缺少经验。而我更是缺少对业务的理解，项目都做了一半了，整个架子都起来了，我这边才开始接触，真的是一脸懵逼。所以，面对这样的项目，只能用非比寻常的方式去设计了。

一、基本信息设计

修改前

一开始，我接到的第一个任务就是美化上面的业务界面。首先上面也说了，框架用的element，在国内，ant design和element是大家用的比较多的、也是比较成熟不错的框架了，很多样式也都是大厂写好在用的，整体元素应该是没问题的，问题出在元素调用的时候的一些细节，还有对业务侧重点的表现形式。拿上面这张图来说，在B端后台界面中，按理说设计是没问题的，但是我得到的反馈说是不好看。其实，这个不好看，是因为没有侧重点，一堆文字，从上到下看下来，容易视觉疲劳，抓不住重点。

修改后

针对以上问题，我把项目名称给突出，然后把项目金额和最低贡献利润这两组数字分离出来，放在右侧，重点突出。表格样式没动，前面也说了，我是半路出家，来美化的，手里没有任何资料，表格直接在后台中随手截的图，连数据都对不上，这个不是重点。经过上面修改，用户点开这个菜单，首先知道这是什么项目，因为经年累月，公司有上百个项目，需要清洗知道现在进来的是哪个项目，接下来的信息才有用。对于一个项目，大家关心的肯定也就是金额和利润率了。然后把基本信息和下边的表格用分割线隔开，既能让信息展示突出重点，又不会因为信息密集导致压抑。在设计之初，我也查看了其他菜单内容，这种展示的地方还是有很多的，其他不同的菜单都可以样式复用。

样式复用

二、弹窗设计

接下来，就是优化弹窗了。现在只能是哪里不好看改哪里了，开发按照框架调用组件，那只能是在原有基础上，尽量的去重设计组件，形成统一修改，尽可能的减少前端开发的工作量。但是有些地方如果要达到效果，也还得添加一些元素，不能一味的迁就。下方弹窗页面中，原页面还是老问题，没有重点，从上到下看下去，不知道哪里是重点内容，所以，我在修改稿中，把负责人，优先级和状态提炼出来，用头像或者图标的方式突出表现。因为这个页面改动比较大，一开始开发说实现不了，说是获取不到头像。我多少还了解一些前端知识，也知道现在的erp可以调用公司的钉钉接口，头像肯定是能拿到的，其他的样式都是固定的，技术上不存在问题，无非就是工作量的问题。后来我把效果图发给领导，领导立马就确定了方案。

修改前

修改后

顺便说一下，这个弹窗，我设计时候用了Adobe xd中的堆叠和边缘填充，修改其中的字段的时候，下面内容可以自动布局，实现响应式的设计；(figma中的auto layout也可以实现这种效果)后面不排除还有类似的弹窗，到时候我直接替换一下字段内容，效果就出来了，可以节省很多时间。

响应式设计

三、表格设计

随着效果图数量的增加，后面我也需要填充一些真实数据，这个时候就得考虑重绘表格了。表格中，我主要用到了重复网格，这个真的是Adobe xd的一个特色了，虽然figma和sketch中可以使用别的方法达到相似的效果，但是都没有重复网格简单高效。然后就是数据填充了，真实数据填充也是做效果图的一个重要步骤，图看起来真不真实，全在数据上了。这里我用的灰大的xd内容填充助手，这个插件是收费的，但是免费功能可以填充一些日期、姓名等普通数据，要是自定义数据填充，就得花钱了，这个问题我也向领导反馈过，但是领导没给买，效率直线下降~

表格内容填充

四、树菜单设计

菜单树其实没啥好设计的，长的都差不多，再怎么设计，形式也不能大于功能，无非就是把功能糅合进去，好看的同时好用。我一直觉得做B端产品，好看是其次的，好用才是首要的。但是人们往往忘记了主次之分，当然有时候也是迫不得已，如果看起来平淡无奇，领导们会觉得项目中设计师没有什么存在感的，毕竟不是专业的人，看不出业务逻辑背后的交互，现在都是看脸的时代。

第一版设计稿

这个树菜单，根据一开始的需求，到后来的定稿，一共出了N版。因为涉及到两层树菜单，而且字段长度和具体内容都不确定，都是做了容错性处理的，伸缩性设计，还要保证右侧表格的显示。最后我们向有关业务部门进行调研，确认了二级树菜单交付模板的数量等级不会很多，字段内容等也明确之后，我又改了最后一版，使用了上下结构，这样能保证右侧内容的正常显示，不至于太紧凑。其实好多时候，在定稿之前，因为很多原因，都会有N多飞机稿，正是这些看不见的效果图，在一次次的试错和尝试中，才诞生了最终的最终稿。

最终版定稿

五、左侧菜单设计

随着项目的深入，左侧菜单也在增加和调整，作为一个有情怀的设计师，菜单也要紧跟需求变更，所以我把左侧菜单重新使用响应式方式进行设计，针对图标风格不统一的问题，我对图标进行重绘。这样不管是增删还是调整顺序，我只要随意拖拽就可以了。

菜单可以随意拖拽

六、项目工时设计

这个部门在逻辑上是比较难的，因为每个人每天可能会做不同的项目，每个项目可能会产生费用，产生的费用会有不同的类型，然而大部分人可能就只是填个每日工作日志，情况比较复杂，要在一个页面中把所有情况都要包含进去，我光考虑这个问题就花了一天时间真的就像是俄罗斯套娃，一层套一层，所以单独摘出来讲讲。

首先点击进来就是添加项目，所有的费用是挂在项目上的，所以项目是根本。如果没有费用，只添加填写项目就行，然后提交。如果有费用，那就添加费用，根据展开的字段进行选择填写，可以添加多条。以此类推，因为内容高度的不确定性，我们在讨论的时候，决定添加展开折叠按钮，当条目太多的时候，每添加一次项目，都可以折叠，这样最后提交的时候，可以清晰的看到自己提交了哪些内容。

项目工时填写界面

七、总结

整个项目还在继续，一般来说B端设计很难实现太大突破，其中主要的设计点还是在于理清业务逻辑，考虑真实使用场景，需要做一定的容错性设计。B端设计中，重要的不应该是UI，而应该是交互、是解决问题。