最近開(kāi)始接觸了大型sasa平臺(tái)項(xiàng)目，由于產(chǎn)品及業(yè)務(wù)的需求相當(dāng)復(fù)雜，導(dǎo)致常規(guī)的基礎(chǔ)組件已無(wú)法滿足業(yè)務(wù)的基本功能，需要定制大量的高級(jí)組件。當(dāng)業(yè)務(wù)組件越來(lái)越龐大復(fù)雜時(shí)，就導(dǎo)致了表單布局產(chǎn)生了諸多不協(xié)調(diào)的問(wèn)題，非常影響用戶體驗(yàn)。有些地方還會(huì)對(duì)用戶在數(shù)據(jù)錄入過(guò)程當(dāng)中造成一些困惑。那么我針對(duì)這個(gè)問(wèn)題，進(jìn)行了分析和總結(jié)，在此分享給大家一些小小的經(jīng)驗(yàn)。

目錄：

1. 常見(jiàn)表單布局
2. 復(fù)雜業(yè)務(wù)表單經(jīng)常出現(xiàn)的問(wèn)題
3. 解決辦法
4. 畫(huà)重點(diǎn)

一、常見(jiàn)表單布局

我們常見(jiàn)的表單布局為單列信息展示布局，其通常適用于業(yè)務(wù)需求較為簡(jiǎn)單的情況。如下圖所示：

但當(dāng)業(yè)務(wù)信息較為復(fù)雜，需要大量錄入信息的時(shí)候，如果還采用單列信息展示的情況則會(huì)使整個(gè)頁(yè)面變得很長(zhǎng)，用戶想要檢驗(yàn)表單信息填寫(xiě)是否正確的時(shí)候來(lái)回翻閱造成了諸多不便。那么我們通常會(huì)考慮采用多列信息展示的方式進(jìn)行布局，如下圖所示：

復(fù)雜業(yè)務(wù)表單經(jīng)常出現(xiàn)的問(wèn)題

然而，關(guān)于多列信息展示會(huì)出現(xiàn)很多問(wèn)題，比如：當(dāng)多列信息展示的組件標(biāo)題長(zhǎng)度不一時(shí)，這是我們經(jīng)常遇到的情況。

而且大多也無(wú)法預(yù)計(jì)標(biāo)題的最大長(zhǎng)度，我們初始寬度定多寬，都有可能無(wú)法滿足業(yè)務(wù)小哥哥D2。誰(shuí)知道業(yè)務(wù)小哥哥，哪天來(lái)個(gè)超長(zhǎng)標(biāo)題呢，是吧？

當(dāng)然問(wèn)題還不止這些，比如：業(yè)務(wù)小哥哥D2：“我要出發(fā)時(shí)間、到達(dá)時(shí)間；出發(fā)日期、到達(dá)日期；出發(fā)地點(diǎn)、到達(dá)地點(diǎn)…*&……%%￥##@……”

設(shè)計(jì)師D1：“好的，老板！沒(méi)問(wèn)題！通通滿足你??！”

接下來(lái)我們將看到來(lái)自太空基佬村的A、B、C組合，閃亮登場(chǎng)！

三列布局有3對(duì)基佬怎么辦？？？好辦！縱向結(jié)構(gòu)唄！

然而理想很美好，現(xiàn)實(shí)很骨感。乍一看似乎沒(méi)什么大問(wèn)題…那我們拿給用戶檢驗(yàn)一下…

經(jīng)過(guò)用戶的一番眼動(dòng)測(cè)試…我們發(fā)現(xiàn)由于成雙成對(duì)的組件并列出現(xiàn)，會(huì)造成用戶的視線像打乒乓球一樣上下交替。

那么，如果采用橫向排列呢？

則會(huì)有其中一對(duì)組合被活生生拆分，拆分后用戶的眼動(dòng)軌跡就更不可思議了，會(huì)出現(xiàn)如下?tīng)顩r：

由于換行造成的成對(duì)組件被拆分，用戶下一步的視線落腳點(diǎn)會(huì)被打亂。

綜上所述在面對(duì)復(fù)雜業(yè)務(wù)場(chǎng)景時(shí)表單布局所存在的問(wèn)題主要有2點(diǎn)：

1. 標(biāo)題長(zhǎng)度不一時(shí)，組件間的間距無(wú)法等距怎么辦；
2. 組件成對(duì)出現(xiàn)的時(shí)候，如何布局才能避免成對(duì)被拆分且不影響用戶在獲取表單信息時(shí)的快捷度。

解決辦法

那么我們先來(lái)解決第一個(gè)問(wèn)題，如下圖所示：

我們可以將標(biāo)題文本與文本框在同一列上進(jìn)行展示，這樣無(wú)論標(biāo)題文本有多長(zhǎng)都不會(huì)再出現(xiàn)組件間距不一的問(wèn)題了。接下來(lái)我們來(lái)解決組件成對(duì)出現(xiàn)的問(wèn)題，我們將3列調(diào)整為2列分布，如下圖所示：

也就是關(guān)聯(lián)組件最多2列展示，這樣就能很好的解決組件不成對(duì)，且不影響用戶在獲取表單信息時(shí)的快捷度。

說(shuō)到快捷度，還有更簡(jiǎn)化的辦法么？當(dāng)然！有?。?！如下圖所示：

我們可以看到關(guān)聯(lián)組件重組成了復(fù)合組件，從此再也不分離了。當(dāng)然在未錄入信息的時(shí)候，文本框需要有相應(yīng)的錄入信息提示，用戶才能清晰的知道需要錄入的內(nèi)容是什么。另外標(biāo)題文本也需要有錄入信息的范圍描述，這樣才能很好的組合在一起。等等，上圖出現(xiàn)了個(gè)BUG！

由于布局空間的變化，之前的顯示區(qū)域被壓縮到了右側(cè)，開(kāi)發(fā)小哥哥動(dòng)態(tài)渲染出的組件出現(xiàn)了溢出的狀況！這可怎么辦？直接讓他換行？

別急我們接著往下看……設(shè)計(jì)師跟業(yè)務(wù)方溝通后產(chǎn)出的高級(jí)組件和開(kāi)發(fā)根據(jù)具體運(yùn)用場(chǎng)景動(dòng)態(tài)渲染后的結(jié)果對(duì)比如下：

我們可以看到由于特殊業(yè)務(wù)場(chǎng)景的變化，設(shè)計(jì)師不可能將所有場(chǎng)景都設(shè)計(jì)覆蓋到，那么這個(gè)時(shí)候就需要開(kāi)發(fā)哥哥的動(dòng)態(tài)渲染了，就可能出現(xiàn)業(yè)務(wù)組件超長(zhǎng)甚至溢出的情況。

那么如何正確換行呢？如下圖所示：

這個(gè)時(shí)候我們就需要與開(kāi)發(fā)溝通，搞清楚哪些是后臺(tái)動(dòng)態(tài)渲染的組件，哪些是前端寫(xiě)死的組件。我們可以看到錯(cuò)誤的換行方式是將前端寫(xiě)死的組件進(jìn)行了拆分換行，寫(xiě)死的是不可拆分的哦！正確的換行方式是在前端寫(xiě)死的組件區(qū)域內(nèi)換行。上面那個(gè)正確的例子不出錯(cuò)，但也不是最佳用法。

我們看看更合理的方式是什么，如下圖所示：

仔細(xì)觀察我們可以看到后臺(tái)配置項(xiàng)通常第一個(gè)是業(yè)務(wù)的綜合屬性，它一般是枚舉或者枚舉相關(guān)的復(fù)雜組件。第二個(gè)配置項(xiàng)是備注框，備注框其實(shí)是可放置在第一行或者第二行的，但為了遵循不打算前端配置組件的原則，所有放置在第一行。

由于布局空間的限制，我們將溢出的增刪區(qū)也就是整個(gè)組件的控制區(qū)域進(jìn)行換行更為合理，因?yàn)樗刂屏苏麄€(gè)組件的增加或者刪除。那么知道了上述的各種解決方案，我們?cè)O(shè)計(jì)師在定制組件規(guī)范的時(shí)間就需要更加細(xì)致的考慮到不同情景的配置的配置情況了，如下圖所示：

我們可以用An來(lái)定義綜合屬性組件代號(hào)，因?yàn)樗呛笈_(tái)配置的，不確定會(huì)是什么?？蓳Q行區(qū)域也可以進(jìn)行更為細(xì)致的定義，比如布局排版經(jīng)常會(huì)因?yàn)椴煌?yè)面而有所不同，那么這就需要定義換行的極限區(qū)域是哪里，需要將關(guān)聯(lián)性高的不可換行區(qū)域標(biāo)注出來(lái)。這樣最終的落地實(shí)現(xiàn)效果，雖然是開(kāi)發(fā)動(dòng)態(tài)渲染的，但是設(shè)計(jì)師也會(huì)更具有還原度的把控性。

畫(huà)重點(diǎn)

好了關(guān)于B端表單的布局我們今天就講到這里，面對(duì)復(fù)雜的業(yè)務(wù)場(chǎng)景總結(jié)如下：

1. 標(biāo)題長(zhǎng)度不一時(shí)，組件間的間距無(wú)法等距，我們需要將標(biāo)題文本與文本框布局在一列；
2. 組件成對(duì)出現(xiàn)的時(shí)候，最多采用2列的情況展示，如能夠合并為一個(gè)組件則進(jìn)行合并；
3. 面對(duì)復(fù)雜的動(dòng)態(tài)渲染業(yè)務(wù)場(chǎng)景，我們需要對(duì)組件規(guī)范進(jìn)行更為詳細(xì)的說(shuō)明，搞清楚哪些是動(dòng)態(tài)配置，哪些是前端寫(xiě)死的，哪些部分可以換行，如何換行等。

作者：角馬X

本文由 @角馬X 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議