手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

B端基礎 | 全套WEB表單設計基

2024-4-17    ui設計分享達人

第一部分 | WEB表單設計
在B的設計中、表單是我們最為常見的設計內(nèi)容。下面我們來學習如何做好表單設計這部分內(nèi)容。
1、什么是表單
我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎 | 全套WEB表單設計基礎
 
 
表單是一種用于收集用戶輸入的HTML元素,通常用于創(chuàng)建用戶與網(wǎng)頁交互的表單。表單可以包含各種輸入字段,如文本框、復選框、單選按鈕、下拉列表和提交按鈕等。當用戶填寫表單并提交后,數(shù)據(jù)將被發(fā)送到服務器進行處理。在web開發(fā)中,表單是實現(xiàn)用戶交互和數(shù)據(jù)收集的重要手段之一。
 
1.1、常見應用場景
在我們的后臺系統(tǒng)中、我們表單在70%的場景上都會使用到。采集錄入數(shù)據(jù)信息、編輯數(shù)據(jù)信息等。如我們SaaS管理平臺的學員錄入、檔案查詢、獎勵規(guī)則設置等。
B端基礎 | 全套WEB表單設計基礎
 
 
2、表單設計原則
設計原則是任何一種解決方案的指路燈。我們在表單的設計中需要遵循以下原則、
簡潔明了、清晰高效、適應業(yè)務、及時反饋。
B端基礎 | 全套WEB表單設計基礎
 
 
2.1、簡潔明了
表單的設計應該簡潔明了,避免過多的裝飾和元素干擾用戶填寫表單。
 
2.2、清晰高效
表單中的各個字段和選項應該清晰可見。用戶應該能夠快速找到需要填寫的字段和選項,并且填寫過程中不會遇到過多的困難。
 
2.3、適應業(yè)務
應該符合我們的業(yè)務應用場景、滿足我們的業(yè)務需求。
 
2.4、及時反饋
在用戶填寫表單的過程中,應該提供適當?shù)姆答?,例如輸入驗證、錯誤提示等,以便用戶能夠及時了解自己的輸入是否正確。
 
3、表單構成
我們通常的表單都基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
B端基礎 | 全套WEB表單設計基礎
 
 
3.1、標簽
標簽文本主要是解釋輸入項的含義,一般不宜太長,需要簡明扼要,快速讓用戶理解。輸入框標簽在布局上可以分為
左標簽、頂標簽、行內(nèi)標簽
。這三種設計在許多情況下可以提高可讀性和用戶友好性,但也有一些潛在的缺點。
B端基礎 | 全套WEB表單設計基礎
 
 
3.1.1、左標簽
優(yōu)點
:可讀性強、減少用戶的認知負擔。布局直觀、提高填寫速度。
缺點
:不適合長標簽、對業(yè)務場景適用性差。
 
3.1.2、頂標簽
優(yōu)點
:節(jié)省空間、減少表單的長度和寬度。視覺層次清晰。
缺點
:需要額外的間距、縱向空間利用率不高
 
3.1.3、行內(nèi)標簽
優(yōu)點
:節(jié)省空間、簡潔易于閱讀
缺點
:可讀性有限、對于長標簽或復雜內(nèi)容可讀性降低、不適合大部分的場景。
 
3.2、域
表單的域表示的是一個空間。這個空間里可以是
輸入內(nèi)容、選擇內(nèi)容、選則時間、選擇數(shù)值、觸發(fā)交互按鈕(上傳資料)
B端基礎 | 全套WEB表單設計基礎
 
 
3.3、提示
避免廢話、給出結果以及處理方式。
B端基礎 | 全套WEB表單設計基礎
 
 
3.4、按鈕
一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
在我們系統(tǒng)設計里。我是更愿意把按鈕放在頁面的底部。至于為什么可以看一下、我之前的《按鈕的基礎設計知識的文章》
 
4、設計細節(jié)
除了上面表單的基礎知識外,為了我們表單設計的更好我們就需要在細節(jié)上下功夫了。畢竟優(yōu)秀的設計師注重細節(jié)的表現(xiàn)的。
B端基礎 | 全套WEB表單設計基礎
 
 
4.1、表單里標簽后的冒號要不要加
最初是因為屏幕顯示的原因所以才加的冒號、隨著技術的進步。現(xiàn)在可加可不加。系統(tǒng)內(nèi)統(tǒng)一就行。
B端基礎 | 全套WEB表單設計基礎
 
 
4.2、如何設定輸入框的寬度
輸入框的寬度是自適應的、輸入框的寬度是有暗示左右的。在真實場景中,大部分輸入框是存在理想長度的,那么就應該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負擔。下圖就是典型案例,一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理,反而容易誤導用戶對輸入金額的判斷,造成一種不安全感。
B端基礎 | 全套WEB表單設計基礎
 
 
4.3、表單布局
在表單中我們采用多種布局方式。
信息分組、內(nèi)容列表、標簽頁、分步驟。
在信息傳遞上。這集中布局方式本質(zhì)都是一樣的。將信息進行分類展示。來更好效的進行信息的傳遞和展示。理論支持、格式塔原理
B端基礎 | 全套WEB表單設計基礎
 
 
我們?nèi)绾芜x則適用那種布局方式呢。很簡單需要展示內(nèi)容的多少。
 
B端基礎 | 全套WEB表單設計基礎
 
 
第二部分 | 表單交互
為了讓我們表單的用戶體驗做到極致、我們還有注意這些交互上的細節(jié)。做好這些細節(jié)將大幅提升我們的用戶體檢。
B端基礎 | 全套WEB表單設計基礎
 
 
1、錯誤提示
驗證用戶輸入活提交信息是否正確、驗證方法有三種、實時、提交后、服務器。因為他們時效性不同所以應用的場景也不同。
B端基礎 | 全套WEB表單設計基礎
 
 
錯誤提示要適用積極地的語言、不清楚的告訴用戶存在哪里、要如何修復。
 
2、更智慧、高效
之前好像看過一個什么定律忘了。他的大致意思是,如果系統(tǒng)能處理的問題盡量讓系統(tǒng)去處理、不用留給用戶去操作。
B端基礎 | 全套WEB表單設計基礎
 
 
2.1、簡化輸入智能默認
如果可以帶出來的信息可以盡力帶過來。
B端基礎 | 全套WEB表單設計基礎
 
 
滿足多數(shù)人需要的地方放置選擇,來幫助用戶作出明智選擇?;ヂ?lián)網(wǎng)表單中有很多地方能利用智能默認減少必要的選擇次數(shù),加速表單完成過程。
 
2.2、個性化默認
保留用戶登陸信息、重復填寫內(nèi)容。例如、之前去醫(yī)院需要手機登陸的那段時間。在去過一次后。掃完填寫信息制藥填一個名字、其他信息都帶出來了。
B端基礎 | 全套WEB表單設計基礎
 
 
2.3、及時新增
我們在滿足大部分用戶的同時、在某些場景里還要提高額外的輸入框給需要的人用。同時不會阻礙不需要的人。這類輸入框常常被作為高級選項或者額外選項。
B端基礎 | 全套WEB表單設計基礎
 
 
3、結構
一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點,仔細規(guī)劃結構。
B端基礎 | 全套WEB表單設計基礎
 
 
3.1、從簡單開始到創(chuàng)建邏輯分類
從簡單問題開始,用戶已經(jīng)很清楚答案了。將不相關的信息按邏輯分組展示。來幫助用戶理解。
B端基礎 | 全套WEB表單設計基礎
 
 
3.2、單步、多步、單列、多列
至于這些的方式的選擇、總的來說還是信息呈現(xiàn)多少的不同。單步的轉(zhuǎn)化率更高。但多步卻更適合復雜信息的收集。
B端基礎 | 全套WEB表單設計基礎
 
 
單列和多列基本也是一樣的道理
 
B端基礎 | 全套WEB表單設計基礎
 
 
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYwNzU2OA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權,非商業(yè)轉(zhuǎn)載請注明出處。
 

藍藍設計(m.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

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

銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.88yangsc.com

存檔