前两周新课忙着整理内容，终于又回到了大家最喜欢的改版环节了。

这次就不加什么前奏直接来看改版对象，某 CRM 系统中的个人绩效考核打分的表格、表单混合案例，这次依旧是一个偏入门的快速体验改版。

首先我们看看原图：

这个页面的功能，主要是针对某个员工进行绩效打分。绩效本身包含多个维度，每个维度会量化出不同的数值，通过填入目标值和实际表现值，就可以得出对应的维度分数。

比较特殊的是，除了可量化数值外，还有包含主观评价的数值，比如工作表现、客户满意程度等，需要通过其他人（1个或多个）来打分，所以最终的绩效就是不同维度分数的权重计算得出。

它的实际页面框架如下图所示：

它的浏览体验和对新手非常不友好相信你们看完以后都有结论，所以下面我就直接来分享改版后的内容，以及对应的原版问题分析。

PS：为了照顾手机的体验我强行缩短了页面的宽度，部分输入框宽度较小要暂时忽略。

改动1：优化页面框架

在这个优化中，将年月选项切换到标题旁边，一方面要突出原有考核对象的标题，另一方面减少纵向栏目的数量，简化页面的层级。

改动2：考核类型区分

将量化考核项和个人打分区域做更好的隔离，同时作为打分人，自己操作的栏目通过背景色进行突出，在进入页面更容易聚焦到自己的目标。

同时，移除斑马纹，将上下行区分重点转移成左右不同模块的辨识度。

改动3：优化分值明细表格

原有表格中单行高度不一致，浏览体验极差，且对 X 轴标题添加到左侧 “完成值” “下月目标” 列之下，查看起来非常混乱。

所以统一了所有行的高度，并将这个独立标题置入到单元格之内，排版方式做成左右布局和上方内容做出更好的区分，提升识别效率。

改动4：优化最终得分的展示

原有设计中最终得分作为页面的核心数值，并没有得到有效的突出，且容易和上方数值混淆，作为整个表格最终的计算结果，将其和表格单元格剥离，独立到表格之外右下角显示，无论是逻辑还是查找都更合理通顺。

还有一些其它的小改动就不说了，另外一些需要涉及到其它页面业务逻辑优化的修改项，因为需要花更长的篇幅解释所以放弃了。

下面是原版和改版后的原型对比，你们可以思考是否有解决上述体验问题：

结尾

今天的分享到这里结束，希望对大家有所帮助。目前再下次的改版对象会聚焦在交互方向的组件或流程中，有相关的工作案例和棘手问题，都可以在我们的社群里发上来，就有机会成为下次改版的对象。

我们下篇再贱~~