一次完整的UX交互設(shè)計優(yōu)化可以這么做

2023-09-13 11:53 作者:酸梅干超人的電話亭 0人讀過 | 我要投稿

今天主要的改版對象是一個采購的管理主頁，即表盤頁。

下面是原圖案例：

該頁面主要是對大型企業(yè)當(dāng)前采購條目和進(jìn)度的展示，尤其是對標(biāo)記過的重點(diǎn)采購事件，會用一個流程框架將這些事件所處的進(jìn)度展示出來。然后還包括一些新建的采購合同、供應(yīng)商的列表。顯然這個頁面存在不少的視覺、體驗(yàn)的問題，我就不一條條簡單分析了，總結(jié)起來：

頂部的采購管理 Banner 完全是多余的
采購流程跟進(jìn)的空間不足，單一采購事件連標(biāo)題都很難顯示完
采購流程跟進(jìn)內(nèi)的事件區(qū)分度不夠大，很難注意到具體的條目
右側(cè)的個人信息以及下方的數(shù)據(jù)展示空間過大，但是信息并不突出
采購合同中信息有問題，信息太少，缺乏關(guān)鍵合同名（這些字段都有）
表格內(nèi)都是居中對齊不利于閱讀的習(xí)慣
……

這次因?yàn)閮?nèi)容比較多，所以我就使用 1920 寬創(chuàng)建畫布，并做好對應(yīng)的?24 列柵格。

在這個基礎(chǔ)上，對頁面的模塊進(jìn)行重新的布局。移除 banner，將用戶信息和數(shù)據(jù)、常用功能移動到頂欄，將重點(diǎn)采購跟進(jìn)拉長做成通欄，增加顯示區(qū)域。把審批、供應(yīng)商做成一欄。

然后，再逐一完成模塊的樣式設(shè)計。首先是頂部欄，用戶信息放左側(cè)，數(shù)據(jù)放中間，常用放右側(cè)。

重點(diǎn)優(yōu)化采購跟進(jìn)的組件，使用不同顏色區(qū)分跟進(jìn)階段，并讓采購事件的展示卡片化，對一些關(guān)鍵信息進(jìn)行露出（詳情中包含的字段），提高卡片的識別效率。

最后把兩個表格重新設(shè)計，優(yōu)化內(nèi)容排列并高亮數(shù)據(jù)即可。

然后看看改版前后的對比：

以這個頁面為例，在項目包裝中如果只簡單的放個頁面進(jìn)去有點(diǎn)太簡陋了，那么應(yīng)該怎么包裝它呢？

我在之前的分享中也講了，要寫就要寫解決了哪些問題，而不是寫個頁面產(chǎn)品說明或交互說明。所以優(yōu)先把解決的問題羅列出來：

布局重構(gòu)：解決原有布局空間利用不合理的問題
采購跟進(jìn)優(yōu)化：解決原有卡片識別性差，信息不完整的問題
表格的優(yōu)化：解決原來的信息展示不合理，布局不合理

如果包含了一些特殊的交互或樣式的表現(xiàn)，也可以做出強(qiáng)調(diào)，比如采購事件的卡片，實(shí)際上處于每個不同的采購階段中，打開看到的信息是不一樣的，也就意味著卡片在每個階段就應(yīng)該有不同的狀態(tài)樣式，展示關(guān)鍵的字段信息或數(shù)據(jù)。

TIPS：這個需要比較細(xì)致分析業(yè)務(wù)細(xì)節(jié)，時間關(guān)系這個部分偷懶，大家理解這個意思即可。

有了大致的想法，就可以用原型做個基本的布局出來：