企业管理中，财务对账是一个关键环节，它确保了交易的准确性和资金的安全。本文通过访谈和分析，识别了当前对账流程中存在的问题，如难以读取的屏幕布局、操作复杂性等，并提出了一系列优化措施，包括布局优化、视觉优化和交互优化，供大家参考。

每到月末财务都需要对发票的进行对账，来核对分公司的差旅业务是否与总公司的账单能够齐平，确保交易的准确性，接下来分享一下是如何优化这个场景的。

一、知识补充-对账的定义

财务对账是对企业或个人财务账目进行核对的过程。

目的包括保证财务数据准确、防范财务风险、满足外部审计要求。

内容有账证核对、账实核对。方法分为日常对账、定期对账、专项对账。其重要性在于为企业管理提供决策依据、维护企业信誉和形象、促进企业健康发展。

二、背景

自研的平台能够满足业务部门需求以及提高业务部门对产品的满意度成为重要的任务，其中财务部门就是重要的一环，往往资金安全、高效筹集与优化配置资金的特性。决定着各个部门有效资金筹划的合理性，随着业务的发展，财务人员机构化改革变动较频繁，每个部门/财务对于产品的现状越来越不满，影响到了团队的满意度。

三、当前问题

为了找到其中的优化点，找了5 位财务人员进行访谈，结合在相关的事业群里面的诉求，将优化点分为：

难读取：

• 任务一和任务二需要滚动查看，屏效低
• 视觉老旧

难操作：

• 每次筛选路径混乱，难使用
• 表格自定义难使用

四、优化措施

优化措施分解为：布局优化、视觉优化、交互优化

1. 布局优化

贴合业务场景提高屏效果

首先分离场景，分成首次对账场景以及二次确认的场景

动作分析：

首次对账目标：财务操作如今是对总账-分账，筛选（修改）生成子账单

二次对账目标：查看对账概览、开票、结算

将原有上下布局改为左右布局，便于财务直观并行比较费用明细，清晰呈现不同费用项目，对比差异、了解费用构成和分布，同时提高表格在首页的信息展示效率，减少滚动操作，方便用户获取费用数据，为财务分析和决策提供支持。

静态状态下，常规滚动场景有布局改动补充，滚动时系统自动收起总账卡片，增加表格信息曝光率，提升操作效率，避免遮挡，提高表格可见性，让财务同学便捷获取数据，系统自动调整，减少操作步骤和时间成本，使查看和操作表格更流畅高效。在对账情境下，折叠二次对账，使表格内容最大化，提高用户对账专注度和效率，营造简洁操作环境，方便用户浏览分析数据，提升工作质量和效果。

集成总账与分账，增强对账易读性

优化视觉之前优先优化了整体的布局，将总分账单进行区分，并且对总账数字进行加粗和字号加高进行强化。表格减少分割线，弱化表格分割感，降低阅读成本。

2. 视觉优化

上面讲完了布局的优化，下一步优化视觉，视觉优化主要在顶部的卡片和账单概览。

顶部卡片品牌感设计，提升财务对账愉悦感

旧版使用了3种底色色块背景过强，新版则参考了字节跳动现有产品的设计风格采用了毛玻璃质感，融入了产品品牌基因。

当时的设计理念是：虚实之美，细腻通透质感。在满是扁平风格的境况下，大胆采用了新拟态的质感，希望能在扁平风格中打造一种有拟物层次与差异化的视觉体验，运用通透玻璃的磨砂材质打造真实&理想之“虚”，产生隐约之美，构建界面主次、虚实、冷暖的平衡感。

设计流程：

1. 手绘初稿：使用 ipad 进行收回，软件是procreate（这里解释下为什么不用手绘板，画画的实力不好），确定完了之后上传到 PS上面。
2. C4D建模：习惯用 C4D 进行快速搭建确定角度，初步的白模渲染。
3. OC 初稿：初步的渲染器选择了 OC,一方面是免费的不用花多余的钱，另外一个方面 OC 擅长近景渲染。虽然无法渲染细节，但是近景的效果已经足够满足普通的业务需求。
4. PS后期：初步渲染之后，整体的光感呆板，没有任何的生气不够通透与灵动，于是整体的色调整体增加了一些，添加了邻近色进行调试，使得整体更加的通透感。

账单概览具象化呈现，降低理解成本

在对账单概览进行设计优化时，引入了线下票据的样式。线下票据在财务的日常生活和工作中较为常见，对其有着一定的熟悉度。通过引入线下票据样式，能够让账单概览的呈现更加直观、贴近财务的工作日常认知。财务在查看账单概览时，能够迅速理解其中的内容和结构，极大地降低了用户的理解成本。

财务无需花费过多的时间去适应新的界面和格式，就能够轻松地获取账单信息，提高了用户的使用体验和效率。

交互优化

新增折叠看板，收纳三栏

这个折叠看板具有强大的收纳功能，能够将三栏内容巧妙地收纳其中。当不需要查看这三栏内容时，可以将看板折叠起来，不占用过多的空间，使页面更加简洁整洁。

高级筛选优化

打造财务千人千面的筛选需求，提高筛选效率

随着业务发展，财务人员因工作内容、重点及习惯差异有特定筛选逻辑。为满足个性化需求实现千人千面筛选，开放高级筛选功能。财务人员次月进入系统，一键点选标签即可筛选数据，操作便利，提升效率，便于进行财务分析、决策及日常业务处理，为企业财务管理提供支持。

管理高级筛选更轻量

明确区分增删改操作，设独立路径以优化流程。增有专门入口和流程，确保准确录入；删有独立路径且严格验证提示，保数据安全完整；改有独立流程及历史记录。此举优化流程，提效率降风险。

自定义优化

分组展示自定义列，高效选取多列表格

通过Tab交互方式，为用户带来了极大的便利，进一步提升了用户操作的效率和准确性。在使用系统或浏览页面时，迅速将财务引导至特定的位置或功能模块。它就像是一个精准的指南针，始终为用户指明方向在复杂的操作环境中不会迷失。

五、数据验证

上线后针对对账效率进行相关的埋点，2 个月后单次对账效率提高说11.67%，财务部门的满意度从 7.2 提升到 7.5，因为页面涉及到的内容较多各种接口较为复杂，只能 2 期发布。

六、总结

本文从布局、视觉、交互三方面进行优化，作为设计师在设计的时候，需要有属于自己的设计流程。我自己一般的思路一般从大颗粒度到小颗粒度：业务分解-场景拆分-布局-视觉-交互。

希望能给到同行借鉴思路，如果有其他的设计流程的思路可随时沟通互相学习。