百數(shù)表單優(yōu)化——支持多列布局,適應(yīng)更多場景排版需求
表單是用戶向系統(tǒng)傳遞和修改數(shù)據(jù)信息的主要方式,同時也是系統(tǒng)獲取用戶數(shù)據(jù)、響應(yīng)反饋結(jié)果的主要方式,可以說表單是人機(jī)交互中重要的數(shù)據(jù)媒介。
而表單布局是用戶在使用表單提交數(shù)據(jù)時的第一感觀,表單布局分為 [PC端布局] 和 [移動端布局] 。設(shè)計者可通過表單布局,將表單字段合理進(jìn)行分布,提高表單界面使用效率及成員數(shù)據(jù)填報效率。
一、表單布局設(shè)置:
列數(shù)設(shè)置:
更新之后,百數(shù)表單布局從僅支持單雙列升級為支持單列、雙列、三列以及四列這四種排列方式。當(dāng)遇到字段內(nèi)容較多的表單,可以設(shè)置為三列、四列,減少成員滑動頁面填報的頻率。
更多設(shè)置
列數(shù)設(shè)置只能將字段布局進(jìn)行最基礎(chǔ)的分割,實際場景中不同的字段需要填報的內(nèi)容不一樣,所需要的寬度也不一樣。此時,可以在更多設(shè)置中進(jìn)一步對表單布局進(jìn)行設(shè)置。
在更多設(shè)置里可以對字段標(biāo)題位置、輸入框?qū)挾鹊冗M(jìn)行更個性化的設(shè)置,支持對 [PC端] 和 [移動端] 分別設(shè)置。
注意:
1.原表單屬性 [PC端表單布局] 、[移動端表單布局] 功能合并到表單布局內(nèi)。
2.表單多列布局只在PC端生效,移動端僅支持單列布局。
二、表單布局移動端及PC端:
移動端
移動端設(shè)置,字段標(biāo)題可以設(shè)置為 [左右] 和 [上下] 兩種位置布局方式。
PC端
1.字段標(biāo)題位置
字段標(biāo)題可以設(shè)置為 [左右] 和 [上下] 兩種位置布局方式。不同的布局方式,其展示的效果也不一樣。
2.字段標(biāo)題樣式
字段標(biāo)題樣式中,可以對標(biāo)題的 [寬度] 和 [對齊方式] 進(jìn)行設(shè)置。
3.字段描述信息樣式
字段描述信息可根據(jù)需求設(shè)置為 [顯示] 或者 [隱藏] 。
設(shè)置了 [顯示] 后,描述信息將直接在輸入框下方進(jìn)行顯示;設(shè)置 [隱藏] 后,描述信息將以小提示的方式展示,點(diǎn)擊提示符號,將彈出對應(yīng)的描述信息。
注意:
1.只有當(dāng) [字段標(biāo)題位置] 設(shè)置為 [左右] 時方可設(shè)置隱藏,否則默認(rèn)顯示在字段標(biāo)題下方。
2.其中 [分割線] 的字段描述信息始終顯示不隱藏。
三、經(jīng)典使用場景展示:
標(biāo)題左右排列:
表單布局——三列:
表單布局——四列: