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

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

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

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

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

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

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

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

我弄完這一稿就覺得不太好，但我具體也不知道不好在哪，但首先可以肯定的是我的排列方式是不對的，因為依然閱讀困難，其次我的標(biāo)簽對齊方式也有問題。

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

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

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

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

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

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

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

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

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

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

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

劃重點

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

最近寫的都是一些項目當(dāng)中遇到的問題，不是很厲害的設(shè)計的，但很多設(shè)計師多多少少都會遇到，希望能給大家?guī)韼椭?/p>

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

文章來源：海鹽社