揭秘B端表單的布局秘密

3 評(píng)論 10150 瀏覽 91 收藏 11 分鐘

最近開(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 大佬,怎么不繼續(xù)更新了

    來(lái)自廣東 回復(fù)
  2. 后臺(tái)配制項(xiàng)是什么?

    來(lái)自廣西 回復(fù)
  3. 你說(shuō)得對(duì)

    回復(fù)