之前一直在更新和 C 端有關(guān)的 APP 改版，最近因?yàn)橛姓归_ B 端的課程和討論，也收集了不少問題界面和難點(diǎn)。

今天演示的案例是 B 端二期學(xué)員目前項(xiàng)目的一個(gè)駕駛艙頁面（首頁），基于保密問題項(xiàng)目本身內(nèi)容和字段有相應(yīng)的修改。

我們首先看看原圖的樣式：

原主頁用的是 1920 寬，但項(xiàng)目要支持 1440，同時(shí)覺得原來的設(shè)計(jì)有問題，需要優(yōu)化。所以，我們就來優(yōu)化下這個(gè)頁面的整體交互和展示。

因?yàn)闀r(shí)間有限，所以我的優(yōu)化是偏交互原型的，對(duì)細(xì)節(jié)、色彩的配置沒花太多精力調(diào)整，如果是認(rèn)為細(xì)節(jié)、色彩有優(yōu)化空間，那是正常現(xiàn)象。

對(duì)于這樣的頁面的調(diào)整，我的設(shè)計(jì)步驟是這樣的：

• 了解項(xiàng)目基本信息，不同功能模塊業(yè)務(wù)

• 完成頂部通欄模塊設(shè)計(jì)和調(diào)整

• 確定內(nèi)容區(qū)域結(jié)構(gòu)、功能模塊、間距

• 根據(jù)權(quán)重要求，優(yōu)先設(shè)計(jì)地圖區(qū)域

• 其次設(shè)計(jì)左側(cè)任務(wù)數(shù)據(jù)模塊

• 接著設(shè)計(jì)右側(cè)圖片展示區(qū)域

• 最后依次設(shè)計(jì)下方其它模塊

關(guān)于這個(gè)項(xiàng)目的業(yè)務(wù)信息，我就不在前面慢慢講解了，因?yàn)檫@個(gè)同學(xué)對(duì)項(xiàng)目的了解也并不是太充足，所以有部分業(yè)務(wù)內(nèi)容沒搞明白（引以為戒） ，下面會(huì)通過每個(gè)模塊的詳細(xì)改版展開說明。

1. 完成頂部通欄模塊設(shè)計(jì)

原圖中，頂欄包含導(dǎo)航和一個(gè)菜單欄。導(dǎo)航欄沒有太大的問題，重點(diǎn)調(diào)整在菜單欄右側(cè)的時(shí)間選項(xiàng)上。

在這個(gè)案例中，出現(xiàn)了直接選擇時(shí)間范圍的標(biāo)簽，也有自定義時(shí)間跨度的表單。如果選擇右側(cè)時(shí)間自定義的時(shí)候，左側(cè)的標(biāo)簽顯示顯然會(huì)有沖突。

所以我做了調(diào)整，增加了 “自定義” 選項(xiàng)，同時(shí)讓左側(cè)的標(biāo)簽選擇后會(huì)自動(dòng)設(shè)置右側(cè)的時(shí)間點(diǎn)，如果自己去編輯右側(cè)的時(shí)間，左側(cè)就會(huì)自動(dòng)切換到自定義標(biāo)簽，同時(shí)去掉查詢按鈕，選擇后直接刷新下方內(nèi)容。

2.根據(jù)權(quán)重和內(nèi)容切割頁面

第二步，就是根據(jù)業(yè)務(wù)方的需求，確認(rèn)頁面中最重要的內(nèi)容，首先是地圖模塊，然后是任務(wù)狀態(tài)。

在原頁面中，左側(cè)的模塊拆分有點(diǎn)太混亂，所以，我先考慮合并左上和左下的子模塊，構(gòu)成整體。將頁面切割成6個(gè)尺寸不同，權(quán)重不同的區(qū)域。

其中，頁面邊距為 20px，模塊間距為 8px。

3.優(yōu)化地圖區(qū)域的交互和樣式

中間區(qū)域，默認(rèn)顯示的是市地圖。上方右側(cè)的圖形就是之前做好的彈窗，用來點(diǎn)擊該區(qū)后展示的具體數(shù)據(jù)信息。

該圖表中，藍(lán)色代表完成，黃色代表未完成。顯然，這樣的數(shù)據(jù)是沒人能看懂的。

不僅白色標(biāo)識(shí)文字看不清，數(shù)據(jù)提示關(guān)聯(lián)度也特別低，且點(diǎn)擊的彈窗的形式本身也不符合這個(gè)模塊的應(yīng)用場(chǎng)景。

所以我做了對(duì)應(yīng)的調(diào)整，讓點(diǎn)擊區(qū)域后，區(qū)域放大其它數(shù)據(jù)隱藏，直接在該地圖模塊中展開對(duì)應(yīng)數(shù)據(jù)信息， 將完成和未完成做成堆疊條形圖。

4.優(yōu)化左側(cè)數(shù)據(jù)內(nèi)容

之后，就是優(yōu)化左側(cè)數(shù)據(jù)了，在進(jìn)一步討論過程中發(fā)現(xiàn)，代辦、簽收、進(jìn)行，實(shí)際上和下方任務(wù)狀態(tài)統(tǒng)計(jì)的數(shù)據(jù)不是一回事……所以做了進(jìn)一步切割。

同時(shí)，原設(shè)計(jì)任務(wù)狀態(tài)用的奇怪的百分比柱狀圖幾乎沒有識(shí)別性，所以我嘗試了下用一個(gè)百分比柱狀圖來展示這個(gè)圖表，但顯然效果不是太理想。

中間切換了不少的樣式，最后用對(duì)每個(gè)數(shù)據(jù)展示一個(gè)百分比柱狀圖，同時(shí)拆分了上下兩個(gè)兩類數(shù)據(jù)，上方是還在 “進(jìn)行” 的類型，下方是 “失敗” 的類型。同時(shí)對(duì)重要類型進(jìn)行色彩暗示。

5.優(yōu)化右側(cè)圖片展示區(qū)域

右側(cè)任務(wù)環(huán)境抓拍，圖片來源不能完全確定，有攝像頭的，也有上傳的。不過不糾結(jié)在這個(gè)細(xì)節(jié)上，該模塊會(huì)展示最新的任務(wù)的不同圖片，點(diǎn)擊可以放大，且可以上下翻滾查看更多……

所以我覺得這樣的展示效率太低，進(jìn)行了幻燈片式的切換，讓正常情況下就能看清楚圖片的內(nèi)容而不是每張都要點(diǎn)擊放大。

6.優(yōu)化下方的模塊

最后，就是優(yōu)化底部模塊了，下面的模塊沒有太多可交互的內(nèi)容或者復(fù)雜圖表，所以只在原有基礎(chǔ)上優(yōu)化布局，可以直接查看前后的兩個(gè)版本對(duì)比。

完成了上面的調(diào)整，基本整個(gè)頁面的交互和布局就重構(gòu)完成了，下面就是前后兩者之間的對(duì)比，可以點(diǎn)擊查看大圖。

今天的改版就到這里結(jié)束了。B端項(xiàng)目里，交互怎么做，核心還是圍繞在對(duì)于業(yè)務(wù)本身的理解。在下次改版中，我會(huì)主要挑選和表單有關(guān)的案例來進(jìn)行演示。

我們下篇再賤～

B端產(chǎn)品設(shè)計(jì)全能班持續(xù)招生中，有提升需要的同學(xué)記得聯(lián)系我～