如何又快又好地設計B端表單?先學會這些表單設計樣式

2022-2-28    seo達人


基礎表單 

平鋪所有需要填寫的信息,適合內(nèi)容項較少、內(nèi)容項無法按照相關性分組的表單。

圖片

 

分組表單 

單次任務的表單頁中需要填寫內(nèi)容眾多,且不同內(nèi)容之中存在一定可分類歸納性。

 

1) 標題分組

表單項較多(超過了7個設置項)的情況下建議分組,分組標題能夠引導用戶完成表單填寫。但分組內(nèi)設置項要有強關聯(lián)性,否則不能歸為一組,不能因為字段多為了分組去分組。

圖片

 

2) 卡片分組

7-15個設置項,用標題分組不足以給信息做層級區(qū)分,為了讓用戶在操作時更聚焦,同時也需要給用戶更明確的操作引導,即可使用卡片分組。

卡片分組之間關聯(lián)性更弱,分類更明確,多個設置項,多個分類。

圖片

 

3) 基礎分步表單

如果每個組之間有邏輯先后順序,那么推薦使用分步表單,利用步驟條告知用戶完整流程和進度。

通常在最后提交前讓用戶再次確認信息,并在流程結束給與明確的結果反饋。適用于具有明確的線性邏輯的任務和用戶在操作完成后就不再參與的復雜表單。

圖片

 

4) 標簽分組式表單

如果每個組既沒有邏輯先后順序,也沒有關聯(lián)性時,推薦使用標簽分組,適用于表單內(nèi)容過多,為減少加載時間將表單分頁展現(xiàn)的情況。

圖片

 

高級表單 

1) 動態(tài)增減

建議條目表單數(shù)≤3項,并且每個輸入框不需要單獨的標題使用。

圖片

 

2) 可編輯表格

建議條目表單數(shù)2~5項時使用,以使得每行內(nèi)容可被完整呈現(xiàn)。

圖片

 

3) 折疊面板編輯

建議條目表單數(shù)在6~8項時使用。

圖片

 

4) 規(guī)則樹

應用于規(guī)則編輯場景。適用于頁面中需要添加一個或多個對象,且每個對象都需要添加或編輯多組數(shù)據(jù)的情況。

圖片

 

5) 語句式表單

讓用戶在預設的結構來完成語句,常用于設置、編輯規(guī)則類表單,表單讀起來更友好更人性化。

圖片

 

最后 

希望通過前兩部分表單內(nèi)容的學習,能讓大伙對B端表單有一個初步的認識和理解。

在表單設計的第部分,將會為大伙分享實操性的方法來提升表單體驗,并能夠運用到實際工作中。

如果想學習更多關于「B端表單設計」的內(nèi)容,記得及時關注接下來的文章推送。

慢慢來比較快,如覺得有幫助,請關注公眾號,點個贊&在看,謝謝!

 

原文地址:Clip設計夾(公眾號)

作者:Cassie

轉載請注明:學UI網(wǎng)》如何又快又好地設計B端表單?先學會這些表單設計樣式

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔