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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

劃重點

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

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

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

文章來源：海鹽社