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

每到月末財(cái)務(wù)都需要對(duì)發(fā)票的進(jìn)行對(duì)賬，來(lái)核對(duì)分公司的差旅業(yè)務(wù)是否與總公司的賬單能夠齊平，確保交易的準(zhǔn)確性，接下來(lái)分享一下是如何優(yōu)化這個(gè)場(chǎng)景的。

一、知識(shí)補(bǔ)充-對(duì)賬的定義

財(cái)務(wù)對(duì)賬是對(duì)企業(yè)或個(gè)人財(cái)務(wù)賬目進(jìn)行核對(duì)的過(guò)程。

目的包括保證財(cái)務(wù)數(shù)據(jù)準(zhǔn)確、防范財(cái)務(wù)風(fēng)險(xiǎn)、滿足外部審計(jì)要求。

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

二、背景

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

三、當(dāng)前問(wèn)題

為了找到其中的優(yōu)化點(diǎn)，找了5 位財(cái)務(wù)人員進(jìn)行訪談，結(jié)合在相關(guān)的事業(yè)群里面的訴求，將優(yōu)化點(diǎn)分為：

難讀?。?/p>

• 任務(wù)一和任務(wù)二需要滾動(dòng)查看，屏效低
• 視覺(jué)老舊

難操作：

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

四、優(yōu)化措施

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

1. 布局優(yōu)化

貼合業(yè)務(wù)場(chǎng)景提高屏效果

首先分離場(chǎng)景，分成首次對(duì)賬場(chǎng)景以及二次確認(rèn)的場(chǎng)景

動(dòng)作分析：

首次對(duì)賬目標(biāo)：財(cái)務(wù)操作如今是對(duì)總賬-分賬，篩選（修改）生成子賬單

二次對(duì)賬目標(biāo)：查看對(duì)賬概覽、開(kāi)票、結(jié)算

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

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

集成總賬與分賬，增強(qiáng)對(duì)賬易讀性

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

2. 視覺(jué)優(yōu)化

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

頂部卡片品牌感設(shè)計(jì)，提升財(cái)務(wù)對(duì)賬愉悅感

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

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

設(shè)計(jì)流程：

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

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

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

財(cái)務(wù)無(wú)需花費(fèi)過(guò)多的時(shí)間去適應(yīng)新的界面和格式，就能夠輕松地獲取賬單信息，提高了用戶的使用體驗(yàn)和效率。

交互優(yōu)化

新增折疊看板，收納三欄

這個(gè)折疊看板具有強(qiáng)大的收納功能，能夠?qū)⑷龣趦?nèi)容巧妙地收納其中。當(dāng)不需要查看這三欄內(nèi)容時(shí)，可以將看板折疊起來(lái)，不占用過(guò)多的空間，使頁(yè)面更加簡(jiǎn)潔整潔。

高級(jí)篩選優(yōu)化

打造財(cái)務(wù)千人千面的篩選需求，提高篩選效率

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

管理高級(jí)篩選更輕量

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

自定義優(yōu)化

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

通過(guò)Tab交互方式，為用戶帶來(lái)了極大的便利，進(jìn)一步提升了用戶操作的效率和準(zhǔn)確性。在使用系統(tǒng)或?yàn)g覽頁(yè)面時(shí)，迅速將財(cái)務(wù)引導(dǎo)至特定的位置或功能模塊。它就像是一個(gè)精準(zhǔn)的指南針，始終為用戶指明方向在復(fù)雜的操作環(huán)境中不會(huì)迷失。

五、數(shù)據(jù)驗(yàn)證

上線后針對(duì)對(duì)賬效率進(jìn)行相關(guān)的埋點(diǎn)，2 個(gè)月后單次對(duì)賬效率提高說(shuō)11.67%，財(cái)務(wù)部門(mén)的滿意度從 7.2 提升到 7.5，因?yàn)轫?yè)面涉及到的內(nèi)容較多各種接口較為復(fù)雜，只能 2 期發(fā)布。

六、總結(jié)

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

希望能給到同行借鑒思路，如果有其他的設(shè)計(jì)流程的思路可隨時(shí)溝通互相學(xué)習(xí)。