企業(yè)管理中，財務對賬是一個關鍵環(huán)節(jié)，它確保了交易的準確性和資金的安全。本文通過訪談和分析，識別了當前對賬流程中存在的問題，如難以讀取的屏幕布局、操作復雜性等，并提出了一系列優(yōu)化措施，包括布局優(yōu)化、視覺優(yōu)化和交互優(yōu)化，供大家參考。

每到月末財務都需要對發(fā)票的進行對賬，來核對分公司的差旅業(yè)務是否與總公司的賬單能夠齊平，確保交易的準確性，接下來分享一下是如何優(yōu)化這個場景的。

一、知識補充-對賬的定義

財務對賬是對企業(yè)或個人財務賬目進行核對的過程。

目的包括保證財務數(shù)據(jù)準確、防范財務風險、滿足外部審計要求。

內(nèi)容有賬證核對、賬實核對。方法分為日常對賬、定期對賬、專項對賬。其重要性在于為企業(yè)管理提供決策依據(jù)、維護企業(yè)信譽和形象、促進企業(yè)健康發(fā)展。

二、背景

自研的平臺能夠滿足業(yè)務部門需求以及提高業(yè)務部門對產(chǎn)品的滿意度成為重要的任務，其中財務部門就是重要的一環(huán)，往往資金安全、高效籌集與優(yōu)化配置資金的特性。決定著各個部門有效資金籌劃的合理性，隨著業(yè)務的發(fā)展，財務人員機構化改革變動較頻繁，每個部門/財務對于產(chǎn)品的現(xiàn)狀越來越不滿，影響到了團隊的滿意度。

三、當前問題

為了找到其中的優(yōu)化點，找了5 位財務人員進行訪談，結合在相關的事業(yè)群里面的訴求，將優(yōu)化點分為：

難讀?。?/p>

• 任務一和任務二需要滾動查看，屏效低
• 視覺老舊

難操作：

• 每次篩選路徑混亂，難使用
• 表格自定義難使用

四、優(yōu)化措施

優(yōu)化措施分解為：布局優(yōu)化、視覺優(yōu)化、交互優(yōu)化

1. 布局優(yōu)化

貼合業(yè)務場景提高屏效果

首先分離場景，分成首次對賬場景以及二次確認的場景

動作分析：

首次對賬目標：財務操作如今是對總賬-分賬，篩選（修改）生成子賬單

二次對賬目標：查看對賬概覽、開票、結算

將原有上下布局改為左右布局，便于財務直觀并行比較費用明細，清晰呈現(xiàn)不同費用項目，對比差異、了解費用構成和分布，同時提高表格在首頁的信息展示效率，減少滾動操作，方便用戶獲取費用數(shù)據(jù)，為財務分析和決策提供支持。

靜態(tài)狀態(tài)下，常規(guī)滾動場景有布局改動補充，滾動時系統(tǒng)自動收起總賬卡片，增加表格信息曝光率，提升操作效率，避免遮擋，提高表格可見性，讓財務同學便捷獲取數(shù)據(jù)，系統(tǒng)自動調(diào)整，減少操作步驟和時間成本，使查看和操作表格更流暢高效。在對賬情境下，折疊二次對賬，使表格內(nèi)容最大化，提高用戶對賬專注度和效率，營造簡潔操作環(huán)境，方便用戶瀏覽分析數(shù)據(jù)，提升工作質量和效果。

集成總賬與分賬，增強對賬易讀性

優(yōu)化視覺之前優(yōu)先優(yōu)化了整體的布局，將總分賬單進行區(qū)分，并且對總賬數(shù)字進行加粗和字號加高進行強化。表格減少分割線，弱化表格分割感，降低閱讀成本。

2. 視覺優(yōu)化

上面講完了布局的優(yōu)化，下一步優(yōu)化視覺，視覺優(yōu)化主要在頂部的卡片和賬單概覽。

頂部卡片品牌感設計，提升財務對賬愉悅感

舊版使用了3種底色色塊背景過強，新版則參考了字節(jié)跳動現(xiàn)有產(chǎn)品的設計風格采用了毛玻璃質感，融入了產(chǎn)品品牌基因。

當時的設計理念是：虛實之美，細膩通透質感。在滿是扁平風格的境況下，大膽采用了新擬態(tài)的質感，希望能在扁平風格中打造一種有擬物層次與差異化的視覺體驗，運用通透玻璃的磨砂材質打造真實&理想之“虛”，產(chǎn)生隱約之美，構建界面主次、虛實、冷暖的平衡感。

設計流程：

1. 手繪初稿：使用 ipad 進行收回，軟件是procreate（這里解釋下為什么不用手繪板，畫畫的實力不好），確定完了之后上傳到 PS上面。
2. C4D建模：習慣用 C4D 進行快速搭建確定角度，初步的白模渲染。
3. OC 初稿：初步的渲染器選擇了 OC,一方面是免費的不用花多余的錢，另外一個方面 OC 擅長近景渲染。雖然無法渲染細節(jié)，但是近景的效果已經(jīng)足夠滿足普通的業(yè)務需求。
4. PS后期：初步渲染之后，整體的光感呆板，沒有任何的生氣不夠通透與靈動，于是整體的色調(diào)整體增加了一些，添加了鄰近色進行調(diào)試，使得整體更加的通透感。

賬單概覽具象化呈現(xiàn)，降低理解成本

在對賬單概覽進行設計優(yōu)化時，引入了線下票據(jù)的樣式。線下票據(jù)在財務的日常生活和工作中較為常見，對其有著一定的熟悉度。通過引入線下票據(jù)樣式，能夠讓賬單概覽的呈現(xiàn)更加直觀、貼近財務的工作日常認知。財務在查看賬單概覽時，能夠迅速理解其中的內(nèi)容和結構，極大地降低了用戶的理解成本。

財務無需花費過多的時間去適應新的界面和格式，就能夠輕松地獲取賬單信息，提高了用戶的使用體驗和效率。

交互優(yōu)化

新增折疊看板，收納三欄

這個折疊看板具有強大的收納功能，能夠將三欄內(nèi)容巧妙地收納其中。當不需要查看這三欄內(nèi)容時，可以將看板折疊起來，不占用過多的空間，使頁面更加簡潔整潔。

高級篩選優(yōu)化

打造財務千人千面的篩選需求，提高篩選效率

隨著業(yè)務發(fā)展，財務人員因工作內(nèi)容、重點及習慣差異有特定篩選邏輯。為滿足個性化需求實現(xiàn)千人千面篩選，開放高級篩選功能。財務人員次月進入系統(tǒng)，一鍵點選標簽即可篩選數(shù)據(jù)，操作便利，提升效率，便于進行財務分析、決策及日常業(yè)務處理，為企業(yè)財務管理提供支持。

管理高級篩選更輕量

明確區(qū)分增刪改操作，設獨立路徑以優(yōu)化流程。增有專門入口和流程，確保準確錄入；刪有獨立路徑且嚴格驗證提示，保數(shù)據(jù)安全完整；改有獨立流程及歷史記錄。此舉優(yōu)化流程，提效率降風險。

自定義優(yōu)化

分組展示自定義列，高效選取多列表格

通過Tab交互方式，為用戶帶來了極大的便利，進一步提升了用戶操作的效率和準確性。在使用系統(tǒng)或瀏覽頁面時，迅速將財務引導至特定的位置或功能模塊。它就像是一個精準的指南針，始終為用戶指明方向在復雜的操作環(huán)境中不會迷失。

五、數(shù)據(jù)驗證

上線后針對對賬效率進行相關的埋點，2 個月后單次對賬效率提高說11.67%，財務部門的滿意度從 7.2 提升到 7.5，因為頁面涉及到的內(nèi)容較多各種接口較為復雜，只能 2 期發(fā)布。

六、總結

本文從布局、視覺、交互三方面進行優(yōu)化，作為設計師在設計的時候，需要有屬于自己的設計流程。我自己一般的思路一般從大顆粒度到小顆粒度：業(yè)務分解-場景拆分-布局-視覺-交互。

希望能給到同行借鑒思路，如果有其他的設計流程的思路可隨時溝通互相學習。