信息输入优化思路-工时填报页面改版

改版原因

多部门同事反馈工时系统填报工时功能不好用，经过走访并观察个别同事使用系统，发现工时填报信息混乱，层级关系不明确；前端适配存在问题，小屏幕内容需要横线滚动，操作不方便。

改版思路

设计通过【信息分类整合】【视觉层级重构】两步重新对工时填报（信息输入页）、填报后详情页（信息展示）进行了重新设计。内容如下

前端改为采用弹性布局，根据浏览器宽度对页面内容适配

工时间填报页

信息分类整合

通常我们清楚的描述一件事情会采用“某人在什么时间在什么地点做了什么”这样的语言结构。当前场景为工时填报，最重要的内容为工作内容，我们采用“某人做了什么在什么时间什么地点。”

“项目经理”为该条工时的审批人，选择项目名称后出现。在填写工时时应重点关注工作内容的填写，审批人为非必要信息，此处去掉。查看审批状态时再给予显示。

视觉层级重构

“项目名称”和“详情内容”强关联，归为一列显示。“工作类型”“任务类别”为同一类信息，都是描述工作类型，归位一列。

优点：缩短了列数，使得列表避免横向滚动（横向滚动成本高于竖向滚动成本）

表格视觉紧凑，错落有致。

工时详情页

信息分类整合

在填报的基础信息基础上，多出了状态信息和审核信息。

视觉层级重构

在工时提交后重点关注的是状态信息。当状态信息为“驳回”时，会依次关注审核意见信息（审核意见为非必填字段，一般审核人不填写）。

按照填报工时时对基本信息层级的分类，对该界面进行设计。图形化状态信息并突出显示。

总结

工时填写完，还涉及到审批流程，都需要做信息的展示，而每个角色的不同，关注的信息点则不同，需要设计对信息进行梳理展示。思路都可以用“信息分类整合”“视觉层级重构”方法。