前兩周新課忙著整理內(nèi)容，終于又回到了大家最喜歡的改版環(huán)節(jié)了。

這次就不加什么前奏直接來看改版對象，某 CRM 系統(tǒng)中的個(gè)人績效考核打分的表格、表單混合案例，這次依舊是一個(gè)偏入門的快速體驗(yàn)改版。

首先我們看看原圖：

這個(gè)頁面的功能，主要是針對某個(gè)員工進(jìn)行績效打分。績效本身包含多個(gè)維度，每個(gè)維度會(huì)量化出不同的數(shù)值，通過填入目標(biāo)值和實(shí)際表現(xiàn)值，就可以得出對應(yīng)的維度分?jǐn)?shù)。

比較特殊的是，除了可量化數(shù)值外，還有包含主觀評價(jià)的數(shù)值，比如工作表現(xiàn)、客戶滿意程度等，需要通過其他人（1個(gè)或多個(gè)）來打分，所以最終的績效就是不同維度分?jǐn)?shù)的權(quán)重計(jì)算得出。

它的實(shí)際頁面框架如下圖所示：

它的瀏覽體驗(yàn)和對新手非常不友好相信你們看完以后都有結(jié)論，所以下面我就直接來分享改版后的內(nèi)容，以及對應(yīng)的原版問題分析。

PS：為了照顧手機(jī)的體驗(yàn)我強(qiáng)行縮短了頁面的寬度，部分輸入框?qū)挾容^小要暫時(shí)忽略。

改動(dòng)1：優(yōu)化頁面框架

在這個(gè)優(yōu)化中，將年月選項(xiàng)切換到標(biāo)題旁邊，一方面要突出原有考核對象的標(biāo)題，另一方面減少縱向欄目的數(shù)量，簡化頁面的層級。

改動(dòng)2：考核類型區(qū)分

將量化考核項(xiàng)和個(gè)人打分區(qū)域做更好的隔離，同時(shí)作為打分人，自己操作的欄目通過背景色進(jìn)行突出，在進(jìn)入頁面更容易聚焦到自己的目標(biāo)。

同時(shí)，移除斑馬紋，將上下行區(qū)分重點(diǎn)轉(zhuǎn)移成左右不同模塊的辨識(shí)度。

改動(dòng)3：優(yōu)化分值明細(xì)表格

原有表格中單行高度不一致，瀏覽體驗(yàn)極差，且對 X 軸標(biāo)題添加到左側(cè) “完成值” “下月目標(biāo)” 列之下，查看起來非常混亂。

所以統(tǒng)一了所有行的高度，并將這個(gè)獨(dú)立標(biāo)題置入到單元格之內(nèi)，排版方式做成左右布局和上方內(nèi)容做出更好的區(qū)分，提升識(shí)別效率。

改動(dòng)4：優(yōu)化最終得分的展示

原有設(shè)計(jì)中最終得分作為頁面的核心數(shù)值，并沒有得到有效的突出，且容易和上方數(shù)值混淆，作為整個(gè)表格最終的計(jì)算結(jié)果，將其和表格單元格剝離，獨(dú)立到表格之外右下角顯示，無論是邏輯還是查找都更合理通順。

還有一些其它的小改動(dòng)就不說了，另外一些需要涉及到其它頁面業(yè)務(wù)邏輯優(yōu)化的修改項(xiàng)，因?yàn)樾枰ǜL的篇幅解釋所以放棄了。

下面是原版和改版后的原型對比，你們可以思考是否有解決上述體驗(yàn)問題：

結(jié)尾

今天的分享到這里結(jié)束，希望對大家有所幫助。目前再下次的改版對象會(huì)聚焦在交互方向的組件或流程中，有相關(guān)的工作案例和棘手問題，都可以在我們的社群里發(fā)上來，就有機(jī)會(huì)成為下次改版的對象。

我們下篇再賤~~