無論是網(wǎng)站建設(shè)還是APP開發(fā)、小程序開發(fā)，在做頁面設(shè)計(jì)的時(shí)候都無可避免需要做表單設(shè)計(jì)，在做后臺(tái)產(chǎn)品的時(shí)候就更是需要做大量的表單設(shè)計(jì)了。當(dāng)然，產(chǎn)品開發(fā)是團(tuán)隊(duì)工作，頁面設(shè)計(jì)好，還需要落地執(zhí)行，交到小程序開發(fā)、APP開發(fā)等產(chǎn)品開發(fā)的時(shí)候問題就來了：“字段限制無法實(shí)現(xiàn)啊~”然而，此時(shí)審核字段就顯得十分重要。制定一個(gè)限制標(biāo)準(zhǔn)，除了需求問題還有字段名稱和內(nèi)容等等，然后做好頁面設(shè)計(jì)后，審查一下，對(duì)于產(chǎn)品開發(fā)效率和團(tuán)隊(duì)協(xié)助都百利而無害。下面，斑驢互聯(lián)設(shè)計(jì)師就給大家說說，如何制定一個(gè)表單的自審單。
一般表單字段的類型分為了兩種：一、輸入型字段;二、非輸入型字段。當(dāng)然，有時(shí)候我們可能也會(huì)遇到既是輸入又是非輸入的字段的時(shí)候，如果有此情況，將兩者按照頁面的自身情況合并即可。還有一些情況是輸入型字段與非輸入型字段都會(huì)遇到的共性問題，這些都需要我們?nèi)タ紤]。
一、輸入型字段自審單
在設(shè)計(jì)輸入型字段的時(shí)候，我們需要考慮的有以下幾個(gè)問題：
· 字段數(shù)據(jù)類型限制。
· 字段輸入長度限制。
· 字段輸入格式限制。
· 單行文本輸入框還是多行文本輸入框。
· 輸入項(xiàng)是否有驗(yàn)重設(shè)置。
· 字段輸入內(nèi)容是否可以通過其他表單字段進(jìn)行計(jì)算。
1.字段的數(shù)據(jù)類型限制
嚴(yán)格意義來說，需要考慮這個(gè)問題的應(yīng)該是開發(fā)，但是作為產(chǎn)品經(jīng)理的我們?nèi)绻梢栽谝婚_始就把字段的數(shù)據(jù)類型考慮清楚，無論是后面開發(fā)還是我們對(duì)整個(gè)產(chǎn)品的把控都會(huì)更上一個(gè)臺(tái)階。
字段的數(shù)據(jù)類型基本上可以分為以下幾種：布爾型、字符串、整型、浮點(diǎn)型、數(shù)組、對(duì)象等。不同的開發(fā)語言數(shù)據(jù)類型可能會(huì)略有差異;同時(shí)有些數(shù)據(jù)類型可能也會(huì)拆分的更精細(xì)一些，比如一些語言浮點(diǎn)型會(huì)有單精度和雙精度之分。但是對(duì)于我們?cè)谠O(shè)計(jì)表單頁面中的字段時(shí)，一般來說只需要了解布爾型，字符串，整型、浮點(diǎn)型即可滿足設(shè)計(jì)上的一些需要。
布爾型：值只有兩種：true/false。即是與否。這個(gè)一般用于非輸入型字段的填寫。需要選擇某個(gè)字段的是否，或者有些開發(fā)在用到只有兩個(gè)選項(xiàng)的選擇時(shí)也可能會(huì)用到。
字符串：字符串可以理解為我們輸入字符的一個(gè)集合?？梢允亲帜?，漢字，符號(hào)，數(shù)字等。一般來說我們?cè)谠O(shè)計(jì)的時(shí)候字符串也是用到最多的時(shí)候。從某個(gè)意義上來講，輸入型的字段一般都可以通過字符串來存儲(chǔ)。只不過由于存儲(chǔ)所占空間的大小等原因不可以這么操作。
當(dāng)然，對(duì)于不同的數(shù)據(jù)庫來說，不同的輸入長度所采用的字符串類型也不一樣。比如MySQL中的CHAR類型，最多可存儲(chǔ) 255 個(gè)字節(jié)，VARCHAR最多可存儲(chǔ) 65535 個(gè)字節(jié)，當(dāng)然，其所占的空間也不同。如果我們可以了解一些數(shù)據(jù)庫中設(shè)計(jì)表的知識(shí)，肯定會(huì)更好。
整型：即整數(shù)類型，不同的數(shù)據(jù)庫有對(duì)應(yīng)的整型類型限制其存儲(chǔ)范圍，比如TINYINT和SMALLINT。
浮點(diǎn)型：一般來說分為單精度和雙精度。
在了解了以上的一些知識(shí)之后，我們就可以根據(jù)字段的具體需求來確定其屬于哪個(gè)數(shù)據(jù)類型。從而從容的設(shè)計(jì)出表單字段。
2.字段輸入長度的限制(最大最小值)
在我們了解了什么叫做數(shù)據(jù)類型后，接下來要考慮的就是字段長度的限制。其實(shí)，這個(gè)應(yīng)該是屬于數(shù)據(jù)類型的一個(gè)拓展。因?yàn)樵谀阍O(shè)計(jì)了它的長度后，開發(fā)會(huì)根據(jù)其長度選擇選擇一個(gè)數(shù)據(jù)類型的類型去進(jìn)行存儲(chǔ)。所以我們?cè)谝婚_始就將其長度想好無論是對(duì)于業(yè)務(wù)需求來說還是數(shù)據(jù)庫的表設(shè)計(jì)都是十分有益的。
比如我們需要想好這個(gè)字符串的長度最長可以輸入多少位;數(shù)字最大可以輸入多少;小數(shù)點(diǎn)后保留幾位小數(shù);時(shí)間與日期是從何年何月何日開始的，最大又可以到何年何月何日。
以MySQL為例，不同的數(shù)據(jù)類型的存儲(chǔ)范圍大致為以下情況：
(1)整型
(2)浮點(diǎn)型
(3)日期型
(4)字符串類型
了解數(shù)據(jù)庫的數(shù)據(jù)類型，可以讓我們?cè)谠O(shè)計(jì)字段時(shí)大致了解到這個(gè)長度可以用什么樣的數(shù)據(jù)類型進(jìn)行存儲(chǔ)。尤其對(duì)于一直閾值的判定等都有很大的用處。
3.字段格式限制
在設(shè)計(jì)表單字段時(shí)，往往一些對(duì)于一些字段的輸入格式有所限制，最典型的為輸入手機(jī)號(hào)、身份證的格式。這些對(duì)于開發(fā)來講一般是用正則表達(dá)式進(jìn)行匹配的。比如可以輸入的特殊符號(hào)是什么。首字母必須填寫什么。不可以填寫什么等等。所以我們?cè)O(shè)計(jì)表單頁面，如有遇到特殊填寫規(guī)則的時(shí)最好可以清晰的寫清楚。
當(dāng)然，如果有能力的話，我們也可以了解一下正則表達(dá)式的書寫規(guī)則及原理，知其根本對(duì)于我們?cè)谠O(shè)計(jì)時(shí)肯定是有好處的。菜鳥教程的正則表達(dá)式教程寫的還不錯(cuò)，在此簡(jiǎn)單進(jìn)行一下推薦。http://www.runoob.com/regexp/regexp-tutorial.html。我們并不需要學(xué)的多好，只是簡(jiǎn)單了解下，在設(shè)計(jì)字段的驗(yàn)證時(shí)帶著目的性去看一下即可。
4、單行文本輸入框還是多行文本輸入框
在前端書寫頁面時(shí)，單行文本框即type屬性設(shè)為text的input標(biāo)簽，多行文本框即textarea。這個(gè)對(duì)于一些字段規(guī)則來說也是可以提高交互體驗(yàn)的。比如我們?cè)趯懸粋€(gè)信息備注的時(shí)候，可能就需要一個(gè)多行文本框，而填寫姓名的字段一個(gè)單行文本輸入框即可。
5、輸入項(xiàng)是否有驗(yàn)重設(shè)置
這個(gè)設(shè)計(jì)一般我們會(huì)在注冊(cè)一些網(wǎng)站的時(shí)候用到，比如當(dāng)你注冊(cè)網(wǎng)站輸入手機(jī)號(hào)時(shí)，會(huì)提示你“該手機(jī)號(hào)已注冊(cè)請(qǐng)直接登錄!”，這時(shí)就是用到了驗(yàn)重處理。我們?cè)谠O(shè)計(jì)表單頁面的時(shí)候，必須要考慮到的就是這些。一般來說，驗(yàn)重設(shè)置多見于名稱，手機(jī)號(hào)，身份證號(hào)等進(jìn)行區(qū)別標(biāo)識(shí)的填寫，我們?cè)谠O(shè)計(jì)這些字段時(shí)要注意是否需要驗(yàn)重。
6、字段輸入內(nèi)容是否可以通過其他表單字段進(jìn)行計(jì)算
有時(shí)候，一段字段可以與其他字段計(jì)算得出，這個(gè)時(shí)候，我們就無需讓用戶進(jìn)行填寫，只需根據(jù)規(guī)則將其自動(dòng)計(jì)算出即可。比如，寫了一個(gè)單價(jià)，下文有數(shù)量，那么應(yīng)收用單價(jià)*數(shù)量即可。在應(yīng)收欄目就沒有必要讓其填寫了。
當(dāng)然，這個(gè)例子比較簡(jiǎn)單，實(shí)際我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，情況會(huì)比較復(fù)雜，我們往往都拿不準(zhǔn)這個(gè)是需要計(jì)算的還是需要填寫的，或者是誤設(shè)計(jì)為填寫字段了。這個(gè)時(shí)候，就需要設(shè)計(jì)者對(duì)自己的產(chǎn)品邏輯十分了解，每個(gè)字段的意義必須清楚。否則可能出現(xiàn)的就不止是將計(jì)算字段設(shè)計(jì)為填寫字段的問題了。也有可能出現(xiàn)數(shù)據(jù)錯(cuò)誤，計(jì)算出來的值與用戶填寫的值出現(xiàn)不一致。
二、非輸入型字段自審單
非輸入型字段這里指的是無需用戶自己填寫，通過規(guī)則列出由用戶選擇的字段。有時(shí)候，輸入型字段與非輸入型字段會(huì)有一些共性的審查項(xiàng)目，比如說數(shù)據(jù)類型以及是否可以通過其他字段計(jì)算出來等，但由于非輸入字段更多可控，所以相對(duì)來說會(huì)有更多的限制，同時(shí)所需要考慮的情況也都會(huì)在自己的掌控之內(nèi)。非填寫字段這里介紹兩種，一種是選擇項(xiàng)，一種是時(shí)間日期選擇器。設(shè)計(jì)選擇項(xiàng)的時(shí)候，我們需要考慮的問題有以下幾種：
1、此選擇項(xiàng)的展示形式：下拉框、級(jí)聯(lián)下拉框、一級(jí)彈窗、多級(jí)彈窗
對(duì)于設(shè)計(jì)選擇項(xiàng)類型的非輸入型字段來說，可以通過其具體業(yè)務(wù)大致分為下拉框、級(jí)聯(lián)下拉框、一級(jí)彈窗、多級(jí)彈窗。一級(jí)與多級(jí)(級(jí)聯(lián))的區(qū)別即為是否有層級(jí)關(guān)系，這點(diǎn)比較容易理解。所以在我們?cè)O(shè)計(jì)的時(shí)候所需要考慮的是采用下拉框的形式還是采用彈窗的形式。
采用下拉框的形式時(shí)每一級(jí)的數(shù)據(jù)條目會(huì)比較少，以我的經(jīng)驗(yàn)來說一般不要多于 20 條，如果再多的時(shí)候，不僅交互上并不友好，而且在請(qǐng)求后臺(tái)數(shù)據(jù)的時(shí)候，返回的也會(huì)很慢。
所以這個(gè)時(shí)候我們就需要采用彈窗的形式，通過分頁來控制其長度了。相當(dāng)于犧牲了操作的便捷性來進(jìn)行交互的優(yōu)化，同時(shí)也減輕服務(wù)器壓力。當(dāng)然，在設(shè)計(jì)的時(shí)候我們也可以直接在下拉框上進(jìn)行分頁請(qǐng)求，這樣的設(shè)計(jì)并不少見。最終怎么設(shè)計(jì)就看設(shè)計(jì)者自己的權(quán)衡了。
2、是否支持搜索選擇項(xiàng)
在設(shè)計(jì)選擇項(xiàng)的時(shí)候，是否允許搜索又是一個(gè)功能點(diǎn)，一般只要數(shù)據(jù)過多不好進(jìn)行篩選的時(shí)候都會(huì)用到搜索。這樣我們可以精準(zhǔn)的定位到自己所要選擇的項(xiàng)目。設(shè)計(jì)搜索時(shí)，我們需要考慮的是搜索是精準(zhǔn)搜索還是模糊搜索。
當(dāng)然，更友好的方式肯定是進(jìn)行模糊搜索，然后通過模糊程度的不斷精細(xì)其結(jié)果也越發(fā)精準(zhǔn)。但是有時(shí)候，我們所需要填寫的項(xiàng)目可能是在知道了此項(xiàng)的具體內(nèi)容后進(jìn)行填寫的。比如設(shè)計(jì)審批單時(shí)，選擇審批人的姓名肯定是確定的，這時(shí)我們就不妨使用精準(zhǔn)搜索來提高檢索速度。
3、選擇項(xiàng)是否可以重復(fù)選擇
關(guān)于這一點(diǎn)，我們?cè)谠O(shè)計(jì)的時(shí)候也是需要的，比如在電商系統(tǒng)中的報(bào)備滿倉預(yù)警時(shí)，已經(jīng)是滿倉的倉庫(即已經(jīng)被選擇過的)肯定是不可以再繼續(xù)選擇的，這種情況就是不可以重復(fù)選擇。是否可以重復(fù)選擇這個(gè)設(shè)計(jì)點(diǎn)在業(yè)務(wù)邏輯上感覺還是比較明確的，如果自己業(yè)務(wù)理的清楚，可以很清楚地設(shè)計(jì)出來。
這里，我要說一個(gè)容易被遺忘的設(shè)計(jì)點(diǎn)：在設(shè)計(jì)已選擇的某個(gè)元素不可被其他表單選擇時(shí)，在已有條目上再次修改該元素理論上是被占用的狀態(tài)，所以從后端邏輯上修改時(shí)該元素時(shí)不可選狀態(tài)，需設(shè)置一個(gè)狀態(tài)，即修改時(shí)，此條需要改動(dòng)的話所選擇的是當(dāng)前所選中的條目以及未被選擇的條目。
4、是否與其他字段有聯(lián)動(dòng)操作
這點(diǎn)設(shè)計(jì)其實(shí)與下拉框的級(jí)聯(lián)類似，當(dāng)我們?cè)谄渌侄沃羞x擇了某些固定項(xiàng)時(shí)，當(dāng)前字段可能是與該字段進(jìn)行關(guān)聯(lián)的。我們只能選擇與該字段相關(guān)聯(lián)的字段。有時(shí)候，甚至為角色或者項(xiàng)目聯(lián)動(dòng)，比如固定的人或者模塊可以看到不同的項(xiàng)目，這些就關(guān)乎權(quán)限設(shè)計(jì)的內(nèi)容了，在此不多贅述。
設(shè)計(jì)這點(diǎn)時(shí)，我們需要考慮的是關(guān)聯(lián)的兩個(gè)或者多個(gè)字段是雙向聯(lián)動(dòng)還是單向聯(lián)動(dòng)。如果是單向聯(lián)動(dòng)，那么在填寫字段時(shí)就需要按照特定的順序去填寫。必須是一級(jí)一級(jí)的選擇關(guān)聯(lián)項(xiàng)。而雙向聯(lián)動(dòng)指的是聯(lián)動(dòng)關(guān)系沒有先后順序，用戶可以任意填寫項(xiàng)目，與之關(guān)聯(lián)的項(xiàng)目只需在用戶選擇完畢后將關(guān)聯(lián)項(xiàng)列出即可。大多數(shù)情況單向聯(lián)動(dòng)與雙向聯(lián)動(dòng)都可以用，但是前者更加注重的是邏輯性，而后者注重的是對(duì)于用戶的交互友好性。設(shè)計(jì)時(shí)間日期選擇器的時(shí)候，我們需要考慮的問題有以下幾種：
1、選擇器的精確程度
我們?cè)谠O(shè)計(jì)時(shí)間日期選擇器的時(shí)候，是需要精確到時(shí)分秒還是年月日，這點(diǎn)需要進(jìn)行考慮，比如電商CMS的搶購點(diǎn)肯定需要精確到秒，而簽訂合同合同期可能只需要精確到日即可。
2、選擇一個(gè)時(shí)間段還是時(shí)間點(diǎn)
這一點(diǎn)應(yīng)該比較好設(shè)計(jì)同時(shí)也比較好理解。具體業(yè)務(wù)應(yīng)該也比較清晰，需要唯一一點(diǎn)注意的就是如果我們?cè)O(shè)計(jì)的是一個(gè)時(shí)間段。那么通過此字段進(jìn)行列表篩選的時(shí)候，開始時(shí)間和結(jié)束日期，需要將其單獨(dú)拆開進(jìn)行一個(gè)時(shí)間段的范圍篩選。比如填寫合同開始結(jié)束日期是一個(gè)時(shí)間段。列表篩選時(shí)，合同開始日期也是一個(gè)時(shí)間段;合同結(jié)束日期也是一個(gè)時(shí)間段。
3、選擇時(shí)間有沒有時(shí)間限制
關(guān)于這點(diǎn)最常見的就是一般在設(shè)計(jì)時(shí)我們需要選擇的時(shí)候是當(dāng)前及之后的一個(gè)時(shí)間還是可以選擇任意時(shí)間。另外，比如簽訂合同時(shí)同一個(gè)合同的開始日期肯定要大于結(jié)束日期。新合同的開始日期必須要在舊合同的結(jié)束日期之后。合同期內(nèi)進(jìn)行的一系列操作的時(shí)間肯定不能超出合同時(shí)間等等情況。這樣設(shè)計(jì)可以增強(qiáng)產(chǎn)品的容錯(cuò)性，讓用戶在操作錯(cuò)誤的情況下可以及時(shí)糾正過來?？赡茉谠O(shè)計(jì)一個(gè)字段時(shí)，我們要考慮的問題不僅僅有這些，其實(shí)我覺得我們每個(gè)人在設(shè)計(jì)表單頁面的時(shí)候都需要這樣一個(gè)自審單。對(duì)照著我們的產(chǎn)品，進(jìn)行查漏補(bǔ)缺，讓我們的產(chǎn)品變得更加完善。
標(biāo)簽： 南昌網(wǎng)站建設(shè)公司/南昌做網(wǎng)站的公司/南昌微信小程序/南昌APP開發(fā)/—斑驢互聯(lián)
贛公網(wǎng)安備 36010902000435號(hào)
