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

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

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

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

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

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

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

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

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

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

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