最近在公司里一直負(fù)責(zé)后臺(tái)網(wǎng)頁(yè)的迭代更新，目標(biāo)用戶是公司的業(yè)務(wù)，我們一個(gè)組里光不同的項(xiàng)目就有五六個(gè)，其中包括新功能，更新迭代，網(wǎng)頁(yè)轉(zhuǎn)App等，都是管理平臺(tái)的設(shè)計(jì)工作。

這些管理平臺(tái)都有共同的特點(diǎn)：業(yè)務(wù)邏輯復(fù)雜，信息數(shù)據(jù)海量，而之前的頁(yè)面因?yàn)闆](méi)有考慮到使用場(chǎng)景和用戶習(xí)慣，因此信息量更加龐大，這讓我在做更新迭代的時(shí)候更加的難做。

我在設(shè)計(jì)后臺(tái)的時(shí)候給自己設(shè)立了兩個(gè)簡(jiǎn)單的目標(biāo)：1、保證功能完整流暢的同時(shí)易用性；2、保證信息組織合理的同時(shí)可讀性。

當(dāng)然實(shí)現(xiàn)這些目標(biāo)的時(shí)候也不是都一帆風(fēng)順的，誰(shuí)還沒(méi)走過(guò)點(diǎn)彎路呢~下面就用我的經(jīng)驗(yàn)來(lái)告訴大家設(shè)計(jì)過(guò)程中的收獲吧！

合理組織表單內(nèi)容

后臺(tái)的頁(yè)面設(shè)計(jì)與我們平時(shí)見(jiàn)到的很多好看的數(shù)據(jù)可視化不同，大部分都是通過(guò)表單填寫實(shí)現(xiàn)的，但是基于公司業(yè)務(wù)的特點(diǎn)，表單填寫的繁瑣和邏輯的復(fù)雜，讓第一次看到要優(yōu)化表單的我直接想逃跑~

如大家在圖中看到的一樣，所有的表單內(nèi)容都羅列出來(lái)了，而且有的需要填寫有的不需要填寫，就直接混在了一起，我們業(yè)務(wù)用了很多年也是很厲害了。

可能第一次見(jiàn)這么厲害的表單，所以很快我的彎路就來(lái)了，當(dāng)時(shí)我的想的是根據(jù)內(nèi)容類型，關(guān)聯(lián)邏輯將表單分成兩個(gè)模塊，畢竟比起一整個(gè)大任務(wù)，我們更愿意去完成小任務(wù)，就像我們?cè)O(shè)立小目標(biāo)一樣。然后我設(shè)計(jì)成了這樣，如下圖所示：

我弄完這一稿就覺(jué)得不太好，但我具體也不知道不好在哪，但首先可以肯定的是我的排列方式是不對(duì)的，因?yàn)橐廊婚喿x困難，其次我的標(biāo)簽對(duì)齊方式也有問(wèn)題。

目前業(yè)內(nèi)比較認(rèn)可的標(biāo)簽對(duì)齊方式有頂對(duì)齊、左對(duì)齊、右對(duì)齊，因?yàn)榈谝淮我?jiàn)到的復(fù)雜表單是左對(duì)齊，因此被我判斷不適合目前的頁(yè)面，但是不是真的不適合呢？我們來(lái)研究一下，如下圖所示：

所以得出結(jié)論，當(dāng)前這么復(fù)雜的表單，頂部對(duì)齊顯然是不合適的，那么目前頁(yè)面中的標(biāo)簽都較長(zhǎng)，要填寫的表單項(xiàng)數(shù)較多，綜合考慮后，為了讓用戶在一屏環(huán)境下填完，我選擇了更適合的標(biāo)簽右對(duì)齊方式。如下圖所示：

如何最大限度的提高目前頁(yè)面的信息閱讀呢？跳出被原頁(yè)面固定住的思維，我們可以將只讀的和需要操作的區(qū)分，如下圖所示：

這樣整個(gè)頁(yè)面的是不是遵循了我們之前說(shuō)的目標(biāo)：1、保證功能完整流暢的同時(shí)易用性；2、保證信息組織合理的同時(shí)可讀性，雖然走了點(diǎn)彎路，但是了解到了更多的知識(shí)，不過(guò)是真的燒腦。

逐漸展開(kāi)額外內(nèi)容

漸進(jìn)展開(kāi)額外內(nèi)容也是應(yīng)對(duì)復(fù)雜信息的一種手段。根據(jù)用戶的需要，通過(guò)點(diǎn)擊按鈕，再出現(xiàn)更多額外內(nèi)容，這樣可使界面保持簡(jiǎn)潔，操作邏輯清晰。

比如最近的界面中有關(guān)于信息補(bǔ)充的填寫，默認(rèn)情況下是只有一行填寫項(xiàng)，如果需要填寫更多的信息，點(diǎn)擊添加就可以新增一條表單，如下圖所示：

這個(gè)頁(yè)面中我有一個(gè)很大的問(wèn)題就是，用的1920的尺寸來(lái)做的，而且是鋪滿了屏幕，完全沒(méi)有考慮到適配的為題，導(dǎo)致這個(gè)表單在平時(shí)業(yè)務(wù)用的屏幕上放不下，而業(yè)務(wù)們的電腦屏幕是1280。。。

這里的1920的屏幕是之前的網(wǎng)頁(yè)設(shè)計(jì)師定的，他走了之后就交接給了我，我傻不拉幾的直接拿到就做了，前端開(kāi)始寫了才發(fā)現(xiàn)有問(wèn)題，又跑去問(wèn)前任網(wǎng)頁(yè)設(shè)計(jì)師，尺寸大小是怎么定下來(lái)的，他說(shuō)是問(wèn)的前端，前端說(shuō)要寬屏，可以自適應(yīng)。。。

其實(shí)業(yè)務(wù)霸霸們用的都是1280的悠久電腦屏，所以要么1360或者1440是我們比較適合的尺寸，我之前經(jīng)常在定界面尺寸時(shí)犯難，不知道自己要定多大，其實(shí)我們可以看看用戶用的大部分是多大尺寸的電腦就比較好確定尺寸了，很多時(shí)候我們要選最適合自己的，而不是最好的。

所以我將界面改成了1360寬度的畫板，參考阿里云、騰訊云和百度云等等，將界面信息重新布局，同時(shí)保證功能完整流暢的同時(shí)易用性以及保證信息組織合理的同時(shí)可讀性。如下圖所示：

劃重點(diǎn)

我以前沒(méi)有做B端之前，覺(jué)得B端的產(chǎn)品都很簡(jiǎn)單，不過(guò)都是一些表單而已，不會(huì)有多難，真的做了之后才發(fā)現(xiàn)雖然看來(lái)看去大部分都是一些表單，但是理順邏輯的同時(shí)把復(fù)雜的事情變簡(jiǎn)單，這本身就是一件不容易做到的事情。

最近寫的都是一些項(xiàng)目當(dāng)中遇到的問(wèn)題，不是很厲害的設(shè)計(jì)的，但很多設(shè)計(jì)師多多少少都會(huì)遇到，希望能給大家?guī)?lái)幫助。

想進(jìn)一步學(xué)好表單設(shè)計(jì)，可以下載網(wǎng)站后臺(tái)管理平臺(tái)設(shè)計(jì)模板。

文章來(lái)源：海鹽社