整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          如何提高B端表單操作效率,這里有7個技巧

          輯導(dǎo)語:B端表單若設(shè)計不好,則容易導(dǎo)致不佳的用戶體驗,無法給用戶有效的信息反饋。那么,應(yīng)該如何優(yōu)化B端表單設(shè)計、提高B端表單的操作效率呢?也許你需要在交互形式、表單頁面、輸入框等方面做好優(yōu)化。本文作者總結(jié)了提高B端表單操作效率的7個技巧,不妨來看一下。

          一些同學(xué)在設(shè)計B端表單時,不知道需要考慮哪些問題,直接使用Ant Design提供的表單模版,或者參考競品,上線后用戶反饋難用,產(chǎn)品反饋拓展性低。

          那么該如何提高B端表單操作效率呢?這里有7個技巧分享給大家。

          目錄

          1. 不濫用表單的交互形式;
          2. 將復(fù)雜表單進(jìn)行合理的歸納簡化;
          3. 復(fù)雜表單布局要考慮關(guān)聯(lián)性;
          4. 表單視覺可以不平衡;
          5. 標(biāo)簽對齊方式要選對;
          6. 表單頁面要考慮適配方式;
          7. 輸入框不用整齊劃一,可以錯落有致。

          一、不濫用表單的交互形式

          表單的交互設(shè)計,有時候往往會被設(shè)計所忽略,或者所有交互都采用彈窗,本可以氣泡卡片一步解決,使用彈窗卻要兩步完成,本需要界面跳轉(zhuǎn)承載復(fù)雜表單,卻使用彈窗不停滾動。

          在表單設(shè)計時,該如何選擇合適的交互形式呢?首先我們需要了解常用的交互形式有哪些。

          常用的交互形式主要有:原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁面跳轉(zhuǎn)等。

          表單交互方式的選擇,我們可以參考 Ant Design 表單設(shè)計規(guī)范,從關(guān)聯(lián)性和復(fù)雜度進(jìn)行判斷,在選擇時,我們優(yōu)先考慮信息的復(fù)雜度,其次在考慮相關(guān)性。

          1)當(dāng)信息復(fù)雜度低,同時相關(guān)性高時,我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。

          比如釘釘任務(wù)詳情頁面的數(shù)據(jù)編輯,相關(guān)度極高,同時信息不復(fù)雜,那么就可選擇原位編輯,在使用原位編輯時,需要根據(jù)業(yè)務(wù)進(jìn)行判斷,是否有必要進(jìn)行原位編輯。

          而Ones的篩選,其數(shù)據(jù)量相對較多,但是相關(guān)性極高,那么就可以選擇氣泡的形式;有贊教育綁定銷售員,采用了彈窗的形式,這里也可采取氣泡的形式。

          2)當(dāng)信息復(fù)雜度高,但關(guān)聯(lián)性也較高時,我們可以使用抽屜、全屏彈窗的交互方式。

          比如神策數(shù)據(jù),信息量較為復(fù)雜,同時有一定相關(guān)性,數(shù)據(jù)創(chuàng)建后即可在列表中查看;但是當(dāng)數(shù)據(jù)特別復(fù)雜,同時新增入口位置較多時,可采用全屏彈窗的方式,在CRM行業(yè)較常見,比如銷幫幫。

          其優(yōu)勢是,當(dāng)從詳情頁進(jìn)行新增或編輯時,編輯完成后,詳情頁數(shù)據(jù)即可展示當(dāng)前新增的信息,如果是頁面表單,需要刷新數(shù)據(jù)才可以查看到,體驗感較低。

          3)當(dāng)信息復(fù)雜度高或信息獨立時,我們可以使用頁面的交互方式。

          比如有贊的新增報名,其關(guān)聯(lián)性就不像CRM那么強(qiáng),因此直接采用頁面的交互方式就可以;而阿里巴巴的創(chuàng)建網(wǎng)絡(luò)信息復(fù)雜度較高,同時相對獨立,因此也適合采用頁面進(jìn)行交互。

          二、將復(fù)雜表單進(jìn)行合理的歸納簡化

          對于復(fù)雜表單,在設(shè)計時需要對其進(jìn)行合理的歸納簡化,降低表單填寫負(fù)荷。

          一般來說,表單可分為基礎(chǔ)表單、分步表單、錨點定位、標(biāo)簽頁這幾類。

          1)當(dāng)表單條目數(shù)在7個內(nèi),表單較為簡單,這時候我們一般直接采用基礎(chǔ)表單,比如有贊更換負(fù)責(zé)人頁面:

          2)當(dāng)表單條目數(shù)在7個以上,可歸類到復(fù)雜表單,這時候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷,選擇合適的分組方式,進(jìn)行歸納簡化,降低表單填寫負(fù)荷。具體該如何選擇呢?

          ① 如果每個組之間有邏輯先后順序,那么推薦使用分步表單,比如阿里云的購買。

          ② 如果每個組之間關(guān)聯(lián)性較強(qiáng),就不適合分開,推薦使用錨點定位,比如銷幫幫的編輯銷售機(jī)會、新建客戶等表單都是采用錨點定位。

          ③ 如果每個組既沒有邏輯先后順序,也沒有關(guān)聯(lián)性時,推薦使用標(biāo)簽分組,比如飛書的發(fā)票管理,都是相對獨立的表單。

          三、復(fù)雜表單布局要考慮關(guān)聯(lián)性

          上面提到了為復(fù)雜表單進(jìn)行合理的歸納簡化,但是歸納簡化后采用什么布局方式更合適呢?

          表單頁面的布局方式,綜合起來可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。

          在選擇時,和表單的交互方式選擇一樣,可參考 Ant Design 表單設(shè)計規(guī)范,從關(guān)聯(lián)性和復(fù)雜度進(jìn)行判斷,在選擇時,我們優(yōu)先考慮信息的復(fù)雜度,其次再考慮相關(guān)性。

          1)當(dāng)條目數(shù)在7個內(nèi)時,仍然使用基礎(chǔ)布局,比如網(wǎng)易互客的企業(yè)信息資料新增:

          2)當(dāng)表單條目數(shù)在7個以上,可歸類到復(fù)雜表單,這時候仍然根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷,選擇合適的布局方式,提高表單的瀏覽效率和屏效需求。

          ① 當(dāng)表單空間有限,且相關(guān)性較強(qiáng)時,推薦使用弱分組,將多個組合在一行中,形成分組的暗示。

          PS:弱分組也可和區(qū)域內(nèi)分組和卡片分組組合使用,從而提高屏效。

          ② 當(dāng)條目數(shù)在7-15個內(nèi)時,相關(guān)性較強(qiáng)時,使用區(qū)域內(nèi)分組較為適合,比如網(wǎng)易七魚的新建在線質(zhì)檢模版:

          ③ 當(dāng)條目數(shù)在15個以上,推薦使用卡片布局較為合適,比如阿里云服務(wù)購買表單:

          四、表單視覺可以不平衡

          在設(shè)計表單時,我們總覺得視覺重心偏左,因此在設(shè)計時我們總想讓視覺變得更平衡。

          比如京東云,使用大屏電腦看,信息全集中在左邊,感覺視覺有點失衡。而類似飛書的居中設(shè)計,視覺會更平衡。

          于是我在設(shè)計時也在考慮要不要用居中設(shè)計的方式呢?但是當(dāng)我繼續(xù)查找資料時發(fā)現(xiàn),其實在表單的設(shè)計中我們不用過度的追求視覺平衡,首先人的視覺動線遵循F模型,同時根據(jù)行業(yè)相關(guān)信息可讀性研究,眼動舒適角度為30度。

          因此當(dāng)表單信息較少,不考慮屏效時,采用從上往下的方式,據(jù)研究這是能夠最高效完成任務(wù)的布局方式。

          為了印證這個結(jié)論,我收集了近50個B端后臺,共507個表單,竟然發(fā)現(xiàn)只有2個產(chǎn)品用了視覺重心居中的設(shè)計。

          這個結(jié)果讓我挺詫異的,但又在情理之中。一個是飛書設(shè)置類表單、一個是百度云購買表單。

          設(shè)置類表單,數(shù)據(jù)項較少,相對比較簡單,使用居中設(shè)計可以讓用戶更聚焦。

          而百度云的表單,雖然也是視覺居中,但是將側(cè)邊欄進(jìn)行收起,在設(shè)計上和我們普通網(wǎng)頁設(shè)計方式類似,從而承載更多的信息。

          而其他的CRM、ERP、云產(chǎn)品、OA、項目研發(fā)、文檔產(chǎn)品、在線教育、HR、BI等系統(tǒng)產(chǎn)品的錄入類表單均采用的視覺偏左的設(shè)計方式,不管表單拓展多復(fù)雜的信息,都不會影響整體的一致性。

          所以,在設(shè)計表單時不用過度追求視覺平衡,而是需要優(yōu)先考慮信息操作效率,信息閱讀效率。

          五、標(biāo)簽對齊方式要選對

          標(biāo)簽分為左標(biāo)簽、右標(biāo)簽、頂標(biāo)簽三種,不同的對齊方式,使用場景不同。

          具體該如何選擇呢?我們需要從3個方面進(jìn)行考慮:操作效率、標(biāo)簽長度、屏效、視覺對齊。

          1. 操作效率

          根據(jù)Matteo Penzo的研究總結(jié)得到的瀏覽時間表發(fā)現(xiàn),標(biāo)簽移動到輸入框的時間,頂部對齊最快只要50ms,其次是右對齊240ms,左對齊耗費時間最長500ms。

          因此當(dāng)以操作效率為主時,推薦使用頂對齊的方式。

          2. 標(biāo)簽長度

          當(dāng)標(biāo)簽長度超過8個字,或者需要考慮中英文雙版本時,推薦使用頂對齊的方式,其容納的標(biāo)簽文字更多,拓展性更好,比如Ones的建任務(wù)的標(biāo)簽,就采用標(biāo)簽頂對齊的方式:

          3. 屏效

          如果只考慮屏效,那么標(biāo)簽左對齊右對齊均可,但是如果還考慮表單錄入效率,那么推薦使用標(biāo)簽右對齊的方式,比如蜂鳥匯報:

          4. 視覺對齊

          一般情況我們在設(shè)計表單,優(yōu)先考慮效率和屏效,但在競品分析中發(fā)現(xiàn),竟然有50%的表單采用了標(biāo)簽左對齊的方式,因為這樣可以讓標(biāo)簽和其他內(nèi)容保持對齊,比如神策網(wǎng):

          因此,在進(jìn)行標(biāo)簽對齊方式的選擇時,我們首先要清楚以什么為主,什么是可以犧牲的,比如神策網(wǎng)選擇了視覺對齊,而犧牲的是操作效率。

          六、表單頁面要考慮適配方式

          設(shè)計時如果不考慮適配方式,那么前端可能不考慮,可能用他覺得合理的方式,在實際使用時就會導(dǎo)致體驗不好,后面想在調(diào)整就得重新等排期了,因此在設(shè)計時就需要把適配方式定好。

          表單在設(shè)計時一般有2種適配方式,一種是固定適配,一種是間距適配。

          1. 固定適配,設(shè)計需要注意

          設(shè)計時,需要保證最小分辨率能夠正常顯示,表單中信息寬度固定,不隨分辨率變化而變化。該方式適合用于表單頁面的適配中。

          當(dāng)采用弱分組布局時,隨分辨率變小,數(shù)據(jù)項自動掉下來,其他保持不變。

          這里最小分辨率大家根據(jù)自己公司情況而定,我在設(shè)計時設(shè)定1366X768為最小分辨率。

          下圖是百度統(tǒng)計流量研究所,大家可以看看數(shù)據(jù),具體以自身公司而定,因為一些單位可能還在使用1280X720的分辨率,那么就設(shè)定1280為最小兼容的分辨率。

          2. 間距適配,和移動端類似,間距固定,組件自適應(yīng)

          該適應(yīng)方式在彈窗、抽屜中較為使用,表單頁中不太推薦使用該方式,因為當(dāng)分辨率變大,眼動的視覺變大,不利于信息瀏覽。

          七、輸入框不用整齊劃一,可以錯落有致

          表單頁在設(shè)計時,我們總是糾結(jié)到底整齊排列好,還是錯落排列好,錯落排列又該遵循什么規(guī)則呢,這里推薦大家閱讀Ant_Design的文章《整齊劃一?不如錯落有致》。

          文章提到,如果表單跟隨空間自適應(yīng)會造成不穩(wěn)定的情況,線上效果會呈現(xiàn)以下效果。

          同時輸入框的寬度不應(yīng)該自適應(yīng),而需要根據(jù)填寫內(nèi)容的長度來定,減輕判斷負(fù)擔(dān)。

          最后,錯落有致更舒適,整齊劃一在視線上有隱性的截斷,會感覺缺了一塊內(nèi)容。

          如何錯落有致呢?有什么規(guī)則嗎?

          Ant_Design設(shè)定104px 為原子級寬度尺碼 XS,通過倍數(shù)+間距疊加的方式(此處計算間距的原因是為了兼顧組合 input 和單個 input 對齊問題)從小到大去依次推導(dǎo)出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關(guān)系。

          通過對比,我們可以明顯地看到,錯落有致的排列方式更加舒適。

          當(dāng)然,你在設(shè)計時,最小原子的寬度不一定設(shè)置為104,也可根據(jù)業(yè)務(wù)情況將最小原子XS設(shè)置為可容納6個中文漢字,然后在通過如下規(guī)則進(jìn)行換算。

          八、畫重點

          本文針對如何提高B端表單操作效率,整理了7個技巧:

          1. 不濫用表單的交互形式;
          2. 將復(fù)雜表單進(jìn)行合理的歸納簡化;
          3. 復(fù)雜表單布局要考慮關(guān)聯(lián)性;
          4. 表單視覺可以不平衡;
          5. 標(biāo)簽對齊方式要選對;
          6. 表單頁面要考慮適配方式;
          7. 輸入框不用整齊劃一,可以錯落有致。

          希望通過本文的分享,讓大家有一個更清晰的認(rèn)知,從而提高表單操作效率。

          參考引文:

          《且曼B端產(chǎn)品設(shè)計之表單設(shè)計》

          人眼的視角

          http://t.hk.uy/Chp

          Label Placement in Forms

          http://t.hk.uy/Chr

          淺談B端表單設(shè)計

          https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ

          Ant Design 表單設(shè)計規(guī)范

          https://ant.design/docs/spec/research-form-cn

          Ant Design ProForm 高級表單

          https://procomponents.ant.design/components/form

          QueryFilter / LightFilter 篩選表單

          https://procomponents.ant.design/components/query-filter

          整齊劃一,不如錯落有致

          https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

          作者:風(fēng)箏KK,公眾號:海鹽社

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

          題圖來自Unsplash,基于CC0協(xié)議

          我們在瀏覽網(wǎng)頁的時候,經(jīng)常需要向服務(wù)器提交信息,并讓后臺程序處理。瀏覽器中使用 GET 和 POST 方法向服務(wù)器提交數(shù)據(jù)。

          GET 方法

          GET方法將請求的編碼信息添加在網(wǎng)址后面,網(wǎng)址與編碼信息通過"?"號分隔。如下所示:

          http://www.runoob.com/hello?key1=value1&key2=value2

          GET方法是瀏覽器默認(rèn)傳遞參數(shù)的方法,一些敏感信息,如密碼等建議不使用GET方法。

          用get時,傳輸數(shù)據(jù)的大小有限制 (注意不是參數(shù)的個數(shù)有限制),最大為1024字節(jié)。

          POST 方法

          一些敏感信息,如密碼等我們可以通過POST方法傳遞,POST提交數(shù)據(jù)是隱式的。

          POST提交數(shù)據(jù)是不可見的,GET是通過在url里面?zhèn)鬟f的(可以看一下你瀏覽器的地址欄)。

          JSP使用getParameter()來獲得傳遞的參數(shù),getInputStream()方法用來處理客戶端的二進(jìn)制數(shù)據(jù)流的請求。

          JSP 讀取表單數(shù)據(jù)

          • getParameter(): 使用 request.getParameter() 方法來獲取表單參數(shù)的值。

          • getParameterValues(): 獲得如checkbox類(名字相同,但值有多個)的數(shù)據(jù)。 接收數(shù)組變量 ,如checkbox類型

          • getParameterNames():該方法可以取得所有變量的名稱,該方法返回一個Emumeration。

          • getInputStream():調(diào)用此方法來讀取來自客戶端的二進(jìn)制數(shù)據(jù)流。



          使用URL的 GET 方法實例

          以下是一個簡單的URL,并使用GET方法來傳遞URL中的參數(shù):

          http://localhost:8080/testjsp/main.jsp?name=菜鳥教程&url=http://ww.runoob.com

          testjsp 為項目地址。

          以下是 main.jsp 文件的JSP程序用于處理客戶端提交的表單數(shù)據(jù),我們使用getParameter()方法來獲取提交的數(shù)據(jù):

          <%@ page language="java" contentType="text/html; charset=UTF-8"

          pageEncoding="UTF-8"%>

          <%@ page import="java.io.*,java.util.*" %>

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <h1>使用 GET 方法讀取數(shù)據(jù)</h1>

          <ul>

          <li><p><b>站點名:</b>

          <%= request.getParameter("name")%>

          </p></li>

          <li><p><b>網(wǎng)址:</b>

          <%= request.getParameter("url")%>

          </p></li>

          </ul>

          </body>

          </html>

          接下來我們通過瀏覽器訪問 http://localhost:8080/testjsp/main.jsp?name=菜鳥教程&url=http://ww.runoob.com 輸出結(jié)果如下所示:

          使用表單的 GET 方法實例

          以下是一個簡單的 HTML 表單,該表單通過GET方法將客戶端數(shù)據(jù)提交 到 main.jsp 文件中:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <form action="main.jsp" method="GET">

          站點名: <input type="text" name="name">

          <br />

          網(wǎng)址: <input type="text" name="url" />

          <input type="submit" value="提交" />

          </form>

          </body>

          </html>

          將以上HTML代碼保存到test.htm文件中。 將該文件放置于當(dāng)前jsp項目的 WebContent 目錄下(與 main.jsp 同一個目錄)。

          通過訪問 http://localhost:8080/testjsp/test.html 提交表單數(shù)據(jù)到 main.jsp 文件,演示 Gif 圖如下所示:

          在 "站點名" 與 "網(wǎng)址" 兩個表單中填入信息,并點擊 "提交" 按鈕,它將輸出結(jié)果。

          使用表單的 POST 方法實例

          接下來讓我們使用POST方法來傳遞表單數(shù)據(jù),修改main.jsp與Hello.htm文件代碼,如下所示:

          main.jsp文件代碼:

          <%@ page language="java" contentType="text/html; charset=UTF-8"

          pageEncoding="UTF-8"%>

          <%@ page import="java.io.*,java.util.*" %>

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <h1>使用 POST 方法讀取數(shù)據(jù)</h1>

          <ul>

          <li><p><b>站點名:</b>

          <%

          // 解決中文亂碼的問題

          String name = new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8");

          %>

          <%=name%>

          </p></li>

          <li><p><b>網(wǎng)址:</b>

          <%= request.getParameter("url")%>

          </p></li>

          </ul>

          </body>

          </html>

          代碼中我們使用 new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8")來轉(zhuǎn)換編碼,防止中文亂碼的發(fā)生。

          以下是test.htm修改后的代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <form action="main.jsp" method="POST">

          站點名: <input type="text" name="name">

          <br />

          網(wǎng)址: <input type="text" name="url" />

          <input type="submit" value="提交" />

          </form>

          </body>

          </html>

          通過訪問 http://localhost:8080/testjsp/test.html 提交表單數(shù)據(jù)到 main.jsp 文件,演示 Gif 圖如下所示:

          傳遞 Checkbox 數(shù)據(jù)到JSP程序

          復(fù)選框 checkbox 可以傳遞一個甚至多個數(shù)據(jù)。

          以下是一個簡單的HTML代碼,并將代碼保存在test.htm文件中:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <form action="main.jsp" method="POST" target="_blank">

          <input type="checkbox" name="google" checked="checked" /> Google

          <input type="checkbox" name="runoob" /> 菜鳥教程

          <input type="checkbox" name="taobao" checked="checked" />

          淘寶

          <input type="submit" value="選擇網(wǎng)站" />

          </form>

          </body>

          </html>

          以上代碼在瀏覽器訪問如下所示:

          以下為main.jsp文件代碼,用于處理復(fù)選框數(shù)據(jù):

          <%@ page language="java" contentType="text/html; charset=UTF-8"

          pageEncoding="UTF-8"%>

          <%@ page import="java.io.*,java.util.*" %>

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <h1>從復(fù)選框中讀取數(shù)據(jù)</h1>

          <ul>

          <li><p><b>Google 是否選中:</b>

          <%= request.getParameter("google")%>

          </p></li>

          <li><p><b>菜鳥教程是否選中:</b>

          <%= request.getParameter("runoob")%>

          </p></li>

          <li><p><b>淘寶是否選中:</b>

          <%= request.getParameter("taobao")%>

          </p></li>

          </ul>

          </body>

          </html>

          通過訪問 http://localhost:8080/testjsp/test.html 提交表單數(shù)據(jù)到 main.jsp 文件,演示 Gif 圖如下所示:

          讀取所有表單參數(shù)

          以下我們將使用 HttpServletRequestgetParameterNames() 來讀取所有表單參數(shù),該方法可以取得所有變量的名稱,該方法返回一個枚舉。

          一旦我們有了一個 Enumeration(枚舉),我們就可以調(diào)用 hasMoreElements() 方法來確定是否還有元素,以及使用nextElement()方法來獲得每個參數(shù)的名稱。

          <%@ page language="java" contentType="text/html; charset=UTF-8"

          pageEncoding="UTF-8"%>

          <%@ page import="java.io.*,java.util.*" %>

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <h1>讀取所有表單參數(shù)</h1>

          <table width="100%" border="1" align="center">

          <tr bgcolor="#949494">

          <th>參數(shù)名</th><th>參數(shù)值</th>

          </tr>

          <%

          Enumeration paramNames = request.getParameterNames();

          while(paramNames.hasMoreElements()) {

          String paramName = (String)paramNames.nextElement();

          out.print("<tr><td>" + paramName + "</td>\n");

          String paramValue = request.getParameter(paramName);

          out.println("<td> " + paramValue + "</td></tr>\n");

          }

          %>

          </table>

          </body>

          </html>

          以下是test.htm文件的內(nèi)容:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>菜鳥教程(runoob.com)</title>

          </head>

          <body>

          <form action="main.jsp" method="POST" target="_blank">

          <input type="checkbox" name="google" checked="checked" /> Google

          <input type="checkbox" name="runoob" /> 菜鳥教程

          <input type="checkbox" name="taobao" checked="checked" />

          淘寶

          <input type="submit" value="選擇網(wǎng)站" />

          </form>

          </body>

          </html>

          現(xiàn)在我們通過瀏覽器訪問 test.htm 文件提交數(shù)據(jù),輸出結(jié)果如下:

          通過訪問 http://localhost:8080/testjsp/test.html 提交表單數(shù)據(jù)到 main.jsp 文件,演示 Gif 圖如下所示:

          你可以嘗試使用以上的JSP代碼讀取其它對象,如文本框,單選按鈕或下拉框等等其他形式的數(shù)據(jù)。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          要收集和錄入數(shù)據(jù)時,表單必不可少,而表單,也是B端設(shè)計師的必備能力之一。對此,本文從表單是什么,為什么重要?表單的主要應(yīng)用場景、表單的主要結(jié)構(gòu)和類型三個方面做了介紹和分析,一起來看看吧。

          之前我們已經(jīng)分享過成套的表格設(shè)計思路,接下來我們就聚焦在表單部分的干貨整理和分享中,幫助大家更好的理解和設(shè)計表單。

          一、表單是什么,為什么重要

          表單這個詞匯雖然很常見,但相信不少同學(xué)對這個詞匯本身的理解是很陌生的、一知半解的。所以我們首要目標(biāo)就是認(rèn)識它是什么,以及它在B端項目中的作用、使用場景。

          和表格類似,表單也是現(xiàn)代電子計算機(jī)系統(tǒng)中最重要的組成部分之一,但和表格不同的是,從我們9年義務(wù)教育開學(xué)的第一天,甚至更早,就已經(jīng)在接觸和使用表單了。

          表單就是用來收集和錄入數(shù)據(jù)的列表清單,是我們過去填寫的試卷、個人資料、業(yè)務(wù)辦理等紙質(zhì)清單的數(shù)字化應(yīng)用方式。

          比如登陸流程的賬號密碼填寫,注冊流程的郵箱、用戶名等信息填寫,都是表單應(yīng)用的常見案例,計算機(jī)需要通過它來收集用戶指定的數(shù)據(jù)信息。

          輸入框、選擇控件等都是表單的一部分,但要注意的是,表單是一個合集概念,是一個整體的 “清單”,而不是單一的功能控件、組件。比如上圖的登陸表單、注冊表單,都包含了若干的輸入控件。

          在軟件編程中,通常也需要先定義出表單的整體對象,再去創(chuàng)建下級的控件。比如 HTML 需要先添加 <Form> 表單標(biāo)簽,再在它的下級定義相關(guān)的輸入框、下拉菜單、選項、按鈕等元素。

          <form value=”注冊表單”>

          <input type=”text”>用戶名br>

          <input type=”password”>密碼br>

          <button type=”button”>注冊按鈕</button>

          </form>

          這和現(xiàn)實邏輯是高度一致的,也就是每個表單都會有相關(guān)的頂級目標(biāo),不管是收集個人信息、健康狀況、工作經(jīng)驗亦或消費記錄。然后再根據(jù)這個目標(biāo)所需的具體明細(xì)羅列出相關(guān)的數(shù)據(jù)清單,例如個人信息收集所需的姓名、性別、年齡、身高、體重等等。

          表單設(shè)計,就是根據(jù)收集目標(biāo),設(shè)計若干數(shù)據(jù)收集控件的合集。

          而它之所以重要,就是因為除了使用表格、圖表等模塊查看信息之外,還包含大量的數(shù)據(jù)錄入需求。有相當(dāng)一部分項目中所產(chǎn)生的數(shù)據(jù),都是通過系統(tǒng)內(nèi)的表單輸入的,它們會占用用戶大量的精力和時間。

          所以優(yōu)秀的表單設(shè)計除了提升基礎(chǔ)的視覺效果外,還可以非常好的提升表單操作過程的體驗和效率,是 B 端設(shè)計師的必備能力之一。

          二、表單的主要應(yīng)用場景

          表單是用來收集數(shù)據(jù)的前面我們已經(jīng)解釋了,但收集數(shù)據(jù)這個目標(biāo)并不是只有把你填的內(nèi)容記錄到數(shù)據(jù)庫中這一個而已,還包含執(zhí)行特定程序時的必要數(shù)據(jù)收集。

          所以,我把表單應(yīng)用的主要場景拆分成4個大類:

          1. 數(shù)據(jù)錄入

          就是最基礎(chǔ)的用來將數(shù)據(jù)收集并保存到數(shù)據(jù)庫的場景,主要應(yīng)用在對特定數(shù)據(jù)對象的創(chuàng)建和編輯上。

          2. 數(shù)據(jù)篩選

          即通過若干的條件來篩選出指定的對象和數(shù)據(jù)內(nèi)容,常見于表格和列表數(shù)據(jù)的篩選。

          3. 功能設(shè)置

          通過若干的條件設(shè)置來實現(xiàn)對應(yīng)的功能或服務(wù),比如在 CMS 系統(tǒng)設(shè)置推送消息條件,或設(shè)置相關(guān)的程序、機(jī)器的運作執(zhí)行條件。

          4. 數(shù)據(jù)校驗

          即針對特定數(shù)據(jù)信息進(jìn)行驗證的場景,例如賬號登陸,非機(jī)器人驗證,財務(wù)、刪除的二次確認(rèn)等等。

          這4個場景的目標(biāo)不同,自然在設(shè)計的樣式和交互上會有一定的差異,后面我們會分別對它們展開講解,先能理解并分辨它們即可。

          三、表單的主要結(jié)構(gòu)和類型

          一個完整的表單通常會包含3個要素,標(biāo)題、數(shù)據(jù)項、按鈕。

          標(biāo)題就是這個表單的名稱,讓用戶理解填寫數(shù)據(jù)的目的。數(shù)據(jù)項則是該表單內(nèi)每一條要收集的數(shù)據(jù)對象,根據(jù)數(shù)據(jù)類型和特征會有不同的控件類型和交互形式。按鈕則是針對整個表單的操作(不是針對某個數(shù)據(jù)項),例如發(fā)布、重制、恢復(fù)默認(rèn)等。

          數(shù)據(jù)項是我們要重點探討的對象,每一個數(shù)據(jù)項都包含三個基礎(chǔ)的要素,數(shù)據(jù)名稱、數(shù)據(jù)內(nèi)容、操作對象。

          數(shù)據(jù)名稱就是該項的命名,讓用戶識別操作的數(shù)據(jù)是什么,它可以獨立顯示在畫布中,也可以置入到輸入框等操作對象內(nèi)。

          數(shù)據(jù)內(nèi)容,則是該數(shù)據(jù)項中要收集的數(shù)據(jù)特征,這是最核心的設(shè)計需求來源。數(shù)據(jù)特征是個總稱,里面包含很多要素,比如最基礎(chǔ)的一環(huán) —— 數(shù)據(jù)類型。

          這是一個開發(fā)術(shù)語,任何數(shù)據(jù)要被記錄,都會定義它的類型再進(jìn)行存儲和使用。常見的數(shù)據(jù)類型包含數(shù)值(Number)、字符串(String)、日期(data)三個大類,且每個大類根據(jù)具體使用場景還會拆分出細(xì)分類型,比如下面的案例:

          技術(shù)上的概念并不需要太深入理解,只要知道它從屬于哪個大類即可。更進(jìn)一步,技術(shù)上的數(shù)據(jù)類型劃分在實際應(yīng)用上仍是有局限性的,比如用戶名和密碼,本質(zhì)上它們都以字符串的形式保存,但它們從工作中的稱呼、樣式的設(shè)計都是全然不同的。

          除了數(shù)據(jù)類型,還有一個特別重要的就是數(shù)據(jù)內(nèi)容,每個數(shù)據(jù)項都會明確想要獲取的數(shù)據(jù)結(jié)果是什么樣的。有可能是用戶手動輸入的,也可能是在已經(jīng)存在的選項中挑選出來。還有對數(shù)據(jù)內(nèi)容的長度、格式、數(shù)量、遞進(jìn)、范圍、過濾的要求等。

          在稍微復(fù)雜點的項目中,產(chǎn)品經(jīng)理都會根據(jù)業(yè)務(wù)需要對數(shù)據(jù)類型進(jìn)行定義,并在設(shè)計表單需求的時候,具體的規(guī)劃每個數(shù)據(jù)項的數(shù)據(jù)類型,比如創(chuàng)建一個下面的表格來描述。

          之所以這個要講這個,因為對數(shù)據(jù)內(nèi)容的整理決定了最終應(yīng)該設(shè)計什么樣的——操作對象。

          操作對象就是該數(shù)據(jù)項的具體表現(xiàn)形式,包括了視覺樣式和交互方法。比如上方的商品名,就是一個簡單的輸入框,但是因為商品名動輒字?jǐn)?shù)非常多,這個輸入框的設(shè)計肯定不會像用戶名一樣短。

          商品分類中,要從既定的選項中選擇,而商品分類庫本身是樹狀結(jié)構(gòu)的,那么這個選擇必然要支持層級的表現(xiàn),同時還要支持多選,所以應(yīng)該使用下拉的樹狀選擇菜單。

          如果光看上面這個案例,可能覺得太簡單根本不用想那么多背后的需求。但在一些專業(yè)性更高,包含數(shù)十條復(fù)雜數(shù)據(jù)項的表單中,是必然要做出充分理解和分析,才能確保設(shè)計的有效性。

          后面我們會從常規(guī)表單的控件和組件類型入手,掌握基礎(chǔ)的知識后再學(xué)習(xí)如何結(jié)合數(shù)據(jù)需求進(jìn)行有效的設(shè)計。

          作者:酸梅干超人;公眾號:超人的電話亭(ID:Superman_Call)

          本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

          題圖來自Unsplash ,基于 CC0 協(xié)議

          該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。


          主站蜘蛛池模板: 国产天堂在线一区二区三区| 无码人妻久久一区二区三区免费丨| 丰满岳妇乱一区二区三区| 国产精品一区二区久久乐下载| 在线观看日韩一区| 国模丽丽啪啪一区二区| 中文字幕一区二区三区精彩视频 | 亚洲色婷婷一区二区三区| 久久精品一区二区三区不卡| 亚洲国产成人精品无码一区二区| 国精产品999一区二区三区有限 | 天美传媒一区二区三区| 久久久久人妻精品一区三寸蜜桃| 久久精品无码一区二区三区| 亚洲无圣光一区二区 | 丝袜人妻一区二区三区网站 | 欲色aV无码一区二区人妻| 日韩AV无码一区二区三区不卡| 精品一区二区三区免费观看| 亚洲一区二区三区首页| 在线观看国产一区二区三区| 久久久久久综合一区中文字幕| 中文字幕日韩欧美一区二区三区| 精品无码综合一区| 人妻夜夜爽天天爽一区| 亚洲乱码日产一区三区 | 视频精品一区二区三区| 水蜜桃av无码一区二区| 无码人妻一区二区三区精品视频| 91精品福利一区二区三区野战| 日本精品一区二区三区四区| 在线精品国产一区二区| 久久久国产一区二区三区| 亚洲AV午夜福利精品一区二区| 国产在线观看一区二区三区| 国产精品伦一区二区三级视频 | 国产一区二区三区四| 无码乱码av天堂一区二区| 无码毛片视频一区二区本码 | 国产精品99无码一区二区| 精品国产一区二区三区久久影院|