一般來說锌俱，無論是C端產(chǎn)品還是后臺產(chǎn)品，我們在設(shè)計(jì)的時候都不可避免的會接觸到設(shè)計(jì)表單頁面的時候。尤其是后臺產(chǎn)品伴栓，可以說大部分內(nèi)容的生成都是一個個表單頁面堆疊而成的，所以設(shè)計(jì)好一個頁面對于一個后臺產(chǎn)品來說可以說是十分重要的雨饺。然而我們在設(shè)計(jì)完之后钳垮，信心滿滿的交給開發(fā)時，卻時不時的會讓開發(fā)懟來懟去：“這個字段的限制沒辦法做啊”“這個數(shù)據(jù)量這么大额港，要不要做分頁啊”…饺窿，此種情況，不勝枚舉移斩。所以為了讓我們心中有底氣肚医，在設(shè)計(jì)每一個表單字段的時候，除了一些需求上的問題向瓷，即此字段需不需要出現(xiàn)肠套，字段名稱及填寫內(nèi)容是什么之外，對于某一個字段的客觀限制猖任，我們也應(yīng)該有個標(biāo)準(zhǔn)你稚。這個時候，有一個表單頁面字段的自審單就十分重要朱躺。我們在設(shè)計(jì)完一個表單頁面之后刁赖，按照自審單將自己的頁面重新審視一下，查漏補(bǔ)缺长搀，無論是以后對于開發(fā)的溝通還是產(chǎn)品的完整性都是十分重要的宇弛。下面，我想說一說自己設(shè)計(jì)表單頁面時候的自審單源请。

我把表單字段的類型分為了兩種：一涯肩、輸入型字段；二巢钓、非輸入型字段病苗。當(dāng)然，有時候我們可能也會遇到既是輸入又是非輸入的字段的時候症汹，如果有此情況硫朦，將兩者按照頁面的自身情況合并即可。還有一些情況是輸入型字段與非輸入型字段都會遇到的共性問題背镇，這些都需要我們?nèi)タ紤]咬展。

一泽裳、輸入型字段自審單

我認(rèn)為，在設(shè)計(jì)輸入型字段的時候破婆，我們需要考慮的有以下幾個問題1涮总、字段數(shù)據(jù)類型限制。2祷舀、字段輸入長度限制瀑梗。3、字段輸入格式限制裳扯。4抛丽、單行文本輸入框還是多行文本輸入框。5饰豺、輸入項(xiàng)是否有驗(yàn)重設(shè)置亿鲜。6、字段輸入內(nèi)容是否可以通過其他表單字段進(jìn)行計(jì)算冤吨。

1.字段的數(shù)據(jù)類型限制蒿柳。

嚴(yán)格意義來說，需要考慮這個問題的應(yīng)該是開發(fā)漩蟆，但是作為產(chǎn)品經(jīng)理的我們?nèi)绻梢栽谝婚_始就把字段的數(shù)據(jù)類型考慮清楚垒探，無論是后面開發(fā)還是我們對整個產(chǎn)品的把控都會更上一個臺階。

字段的數(shù)據(jù)類型基本上可以分為以下幾種：布爾型爆安、字符串、整型仔引、浮點(diǎn)型扔仓、數(shù)組、對象等咖耘。不同的開發(fā)語言數(shù)據(jù)類型可能會略有差異翘簇；同時有些數(shù)據(jù)類型可能也會拆分的更精細(xì)一些，比如一些語言浮點(diǎn)型會有單精度和雙精度之分儿倒。但是對于我們在設(shè)計(jì)表單頁面中的字段時版保，一般來說只需要了解布爾型，字符串夫否，整型彻犁、浮點(diǎn)型即可滿足設(shè)計(jì)上的一些需要。

布爾型：值只有兩種：true/false凰慈。即是與否汞幢。這個一般用于非輸入型字段的填寫。需要選擇某個字段的是否微谓，或者有些開發(fā)在用到只有兩個選項(xiàng)的選擇時也可能會用到森篷。

字符串：字符串可以理解為我們輸入字符的一個集合输钩。可以是字母仲智，漢字买乃，符號，數(shù)字等钓辆。一般來說我們在設(shè)計(jì)的時候字符串也是用到最多的時候剪验。從某個意義上來講，輸入型的字段一般都可以通過字符串來存儲岩馍。只不過由于存儲所占空間的大小等原因不可以這么操作碉咆。當(dāng)然，對于不同的數(shù)據(jù)庫來說蛀恩，不同的輸入長度所采用的字符串類型也不一樣疫铜。比如MySQL中的CHAR類型，最多可存儲255個字節(jié)双谆，VARCHAR最多可存儲65535個字節(jié)壳咕，當(dāng)然，其所占的空間也不同顽馋。如果我們可以了解一些數(shù)據(jù)庫中設(shè)計(jì)表的知識谓厘，肯定會更好。

整型：即整數(shù)類型寸谜，不同的數(shù)據(jù)庫有對應(yīng)的整型類型限制其存儲范圍竟稳，比如TINYINT和SMALLINT。

浮點(diǎn)型：一般來說分為單精度和雙精度熊痴。

在了解了以上的一些知識之后他爸，我們就可以根據(jù)字段的具體需求來確定其屬于哪個數(shù)據(jù)類型。從而從容的設(shè)計(jì)出表單字段果善。

2.字段輸入長度的限制（最大最小值）

在我們了解了什么叫做數(shù)據(jù)類型后诊笤，接下來要考慮的就是字段長度的限制。其實(shí)巾陕，這個應(yīng)該是屬于數(shù)據(jù)類型的一個拓展讨跟。因?yàn)樵谀阍O(shè)計(jì)了它的長度后，開發(fā)會根據(jù)其長度選擇選擇一個數(shù)據(jù)類型的類型去進(jìn)行存儲鄙煤。所以我們在一開始就將其長度想好無論是對于業(yè)務(wù)需求來說還是數(shù)據(jù)庫的表設(shè)計(jì)都是十分有益的晾匠。比如我們需要想好這個字符串的長度最長可以輸入多少位；數(shù)字最大可以輸入多少梯刚；小數(shù)點(diǎn)后保留幾位小數(shù)混聊；時間與日期是從何年何月何日開始的，最大又可以到何年何月何日。

以MySQL為例句喜，不同的數(shù)據(jù)類型的存儲范圍大致為以下情況：

①整型

②浮點(diǎn)型

③日期型

④字符串類型

了解數(shù)據(jù)庫的數(shù)據(jù)類型预愤，可以讓我們在設(shè)計(jì)字段時大致了解到這個長度可以用什么樣的數(shù)據(jù)類型進(jìn)行存儲。尤其對于一直閾值的判定等都有很大的用處咳胃。

3.字段格式限制

在設(shè)計(jì)表單字段時植康，往往一些對于一些字段的輸入格式有所限制，最典型的為輸入手機(jī)號展懈、身份證的格式销睁。這些對于開發(fā)來講一般是用正則表達(dá)式進(jìn)行匹配的。比如可以輸入的特殊符號是什么存崖。首字母必須填寫什么冻记。不可以填寫什么等等。所以我們設(shè)計(jì)表單頁面来惧，如有遇到特殊填寫規(guī)則的時最好可以清晰的寫清楚冗栗。當(dāng)然，如果有能力的話供搀，我們也可以了解一下正則表達(dá)式的書寫規(guī)則及原理隅居，知其根本對于我們在設(shè)計(jì)時肯定是有好處的。菜鳥教程的正則表達(dá)式教程寫的還不錯葛虐，在此簡單進(jìn)行一下推薦胎源。http://www.runoob.com/regexp/regexp-tutorial.html。我們并不需要學(xué)的多好屿脐，只是簡單了解下涕蚤，在設(shè)計(jì)字段的驗(yàn)證時帶著目的性去看一下即可。

4的诵、單行文本輸入框還是多行文本輸入框

在前端書寫頁面時万栅，單行文本框即type屬性設(shè)為text的input標(biāo)簽，多行文本框即textarea奢驯。這個對于一些字段規(guī)則來說也是可以提高交互體驗(yàn)的申钩。比如我們在寫一個信息備注的時候次绘，可能就需要一個多行文本框瘪阁，而填寫姓名的字段一個單行文本輸入框即可。

5邮偎、輸入項(xiàng)是否有驗(yàn)重設(shè)置

這個設(shè)計(jì)一般我們會在注冊一些網(wǎng)站的時候用到管跺，比如當(dāng)你注冊網(wǎng)站輸入手機(jī)號時，會提示你“該手機(jī)號已注冊請直接登錄禾进！”豁跑，這時就是用到了驗(yàn)重處理。我們在設(shè)計(jì)表單頁面的時候泻云，必須要考慮到的就是這些艇拍。一般來說狐蜕，驗(yàn)重設(shè)置多見于名稱，手機(jī)號卸夕，身份證號等進(jìn)行區(qū)別標(biāo)識的填寫层释，我們在設(shè)計(jì)這些字段時要注意是否需要驗(yàn)重。

6快集、字段輸入內(nèi)容是否可以通過其他表單字段進(jìn)行計(jì)算

有時候贡羔，一段字段可以與其他字段計(jì)算得出，這個時候个初，我們就無需讓用戶進(jìn)行填寫乖寒，只需根據(jù)規(guī)則將其自動計(jì)算出即可。比如院溺，寫了一個單價楣嘁，下文有數(shù)量，那么應(yīng)收用單價*數(shù)量即可覆获。在應(yīng)收欄目就沒有必要讓其填寫了马澈。當(dāng)然，這個例子比較簡單弄息，實(shí)際我們在進(jìn)行設(shè)計(jì)的時候痊班，情況會比較復(fù)雜，我們往往都拿不準(zhǔn)這個是需要計(jì)算的還是需要填寫的摹量，或者是誤設(shè)計(jì)為填寫字段了涤伐。這個時候，就需要設(shè)計(jì)者對自己的產(chǎn)品邏輯十分了解缨称，每個字段的意義必須清楚凝果。否則可能出現(xiàn)的就不止是將計(jì)算字段設(shè)計(jì)為填寫字段的問題了。也有可能出現(xiàn)數(shù)據(jù)錯誤睦尽，計(jì)算出來的值與用戶填寫的值出現(xiàn)不一致器净。

二、非輸入型字段自審單

非輸入型字段這里指的是無需用戶自己填寫当凡，通過規(guī)則列出由用戶選擇的字段山害。有時候，輸入型字段與非輸入型字段會有一些共性的審查項(xiàng)目沿量，比如說數(shù)據(jù)類型以及是否可以通過其他字段計(jì)算出來等浪慌，但由于非輸入字段更多可控，所以相對來說會有更多的限制朴则，同時所需要考慮的情況也都會在自己的掌控之內(nèi)权纤。非填寫字段這里介紹兩種，一種是選擇項(xiàng)，一種是時間日期選擇器汹想。

設(shè)計(jì)選擇項(xiàng)的時候外邓，我們需要考慮的問題有以下幾種：

1、此選擇項(xiàng)的展示形式：下拉框古掏、級聯(lián)下拉框坐榆、一級彈窗、多級彈窗冗茸。

對于設(shè)計(jì)選擇項(xiàng)類型的非輸入型字段來說席镀，可以通過其具體業(yè)務(wù)大致分為下拉框、級聯(lián)下拉框夏漱、一級彈窗豪诲、多級彈窗。一級與多級（級聯(lián)）的區(qū)別即為是否有層級關(guān)系挂绰，這點(diǎn)比較容易理解屎篱。所以在我們設(shè)計(jì)的時候所需要考慮的是采用下拉框的形式還是采用彈窗的形式。

采用下拉框的形式時每一級的數(shù)據(jù)條目會比較少葵蒂，以我的經(jīng)驗(yàn)來說一般不要多于20條交播，如果再多的時候，不僅交互上并不友好践付，而且在請求后臺數(shù)據(jù)的時候秦士，返回的也會很慢。所以這個時候我們就需要采用彈窗的形式永高，通過分頁來控制其長度了隧土。相當(dāng)于犧牲了操作的便捷性來進(jìn)行交互的優(yōu)化，同時也減輕服務(wù)器壓力命爬。當(dāng)然曹傀，在設(shè)計(jì)的時候我們也可以直接在下拉框上進(jìn)行分頁請求，這樣的設(shè)計(jì)并不少見饲宛。最終怎么設(shè)計(jì)就看設(shè)計(jì)者自己的權(quán)衡了皆愉。

2、是否支持搜索選擇項(xiàng)

在設(shè)計(jì)選擇項(xiàng)的時候艇抠，是否允許搜索又是一個功能點(diǎn)幕庐，一般只要數(shù)據(jù)過多不好進(jìn)行篩選的時候都會用到搜索。這樣我們可以精準(zhǔn)的定位到自己所要選擇的項(xiàng)目练链。設(shè)計(jì)搜索時翔脱，我們需要考慮的是搜索是精準(zhǔn)搜索還是模糊搜索奴拦。當(dāng)然媒鼓，更友好的方式肯定是進(jìn)行模糊搜索，然后通過模糊程度的不斷精細(xì)其結(jié)果也越發(fā)精準(zhǔn)。但是有時候绿鸣，我們所需要填寫的項(xiàng)目可能是在知道了此項(xiàng)的具體內(nèi)容后進(jìn)行填寫的疚沐。比如設(shè)計(jì)審批單時，選擇審批人的姓名肯定是確定的潮模，這時我們就不妨使用精準(zhǔn)搜索來提高檢索速度亮蛔。

3、選擇項(xiàng)是否可以重復(fù)選擇

關(guān)于這一點(diǎn)擎厢，我們在設(shè)計(jì)的時候也是需要的究流，比如在電商系統(tǒng)中的報備滿倉預(yù)警時，已經(jīng)是滿倉的倉庫（即已經(jīng)被選擇過的）肯定是不可以再繼續(xù)選擇的动遭，這種情況就是不可以重復(fù)選擇芬探。是否可以重復(fù)選擇這個設(shè)計(jì)點(diǎn)在業(yè)務(wù)邏輯上感覺還是比較明確的，如果自己業(yè)務(wù)理的清楚厘惦，可以很清楚地設(shè)計(jì)出來偷仿。

這里，我要說一個容易被遺忘的設(shè)計(jì)點(diǎn)：在設(shè)計(jì)已選擇的某個元素不可被其他表單選擇時宵蕉，在已有條目上再次修改該元素理論上是被占用的狀態(tài)酝静，所以從后端邏輯上修改時該元素時不可選狀態(tài)，需設(shè)置一個狀態(tài)羡玛，即修改時别智，此條需要改動的話所選擇的是當(dāng)前所選中的條目以及未被選擇的條目。

4稼稿、是否與其他字段有聯(lián)動操作

這點(diǎn)設(shè)計(jì)其實(shí)與下拉框的級聯(lián)類似亿遂，當(dāng)我們在其他字段中選擇了某些固定項(xiàng)時，當(dāng)前字段可能是與該字段進(jìn)行關(guān)聯(lián)的渺杉。我們只能選擇與該字段相關(guān)聯(lián)的字段蛇数。有時候，甚至為角色或者項(xiàng)目聯(lián)動是越，比如固定的人或者模塊可以看到不同的項(xiàng)目耳舅，這些就關(guān)乎權(quán)限設(shè)計(jì)的內(nèi)容了，在此不多贅述倚评。

設(shè)計(jì)這點(diǎn)時浦徊，我們需要考慮的是關(guān)聯(lián)的兩個或者多個字段是雙向聯(lián)動還是單向聯(lián)動。如果是單向聯(lián)動天梧，那么在填寫字段時就需要按照特定的順序去填寫盔性。必須是一級一級的選擇關(guān)聯(lián)項(xiàng)。而雙向聯(lián)動指的是聯(lián)動關(guān)系沒有先后順序呢岗，用戶可以任意填寫項(xiàng)目冕香，與之關(guān)聯(lián)的項(xiàng)目只需在用戶選擇完畢后將關(guān)聯(lián)項(xiàng)列出即可蛹尝。大多數(shù)情況單向聯(lián)動與雙向聯(lián)動都可以用，但是前者更加注重的是邏輯性悉尾，而后者注重的是對于用戶的交互友好性突那。

設(shè)計(jì)時間日期選擇器的時候，我們需要考慮的問題有以下幾種：

1构眯、選擇器的精確程度

我們在設(shè)計(jì)時間日期選擇器的時候愕难，是需要精確到時分秒還是年月日，這點(diǎn)需要進(jìn)行考慮惫霸，比如電商CMS的搶購點(diǎn)肯定需要精確到秒猫缭，而簽訂合同合同期可能只需要精確到日即可。

2壹店、選擇一個時間段還是時間點(diǎn)

這一點(diǎn)應(yīng)該比較好設(shè)計(jì)同時也比較好理解饵骨。具體業(yè)務(wù)應(yīng)該也比較清晰，需要唯一一點(diǎn)注意的就是如果我們設(shè)計(jì)的是一個時間段茫打。那么通過此字段進(jìn)行列表篩選的時候居触，開始時間和結(jié)束日期，需要將其單獨(dú)拆開進(jìn)行一個時間段的范圍篩選老赤。比如填寫合同開始結(jié)束日期是一個時間段轮洋。列表篩選時，合同開始日期也是一個時間段抬旺；合同結(jié)束日期也是一個時間段弊予。

3、選擇時間有沒有時間限制

關(guān)于這點(diǎn)最常見的就是一般在設(shè)計(jì)時我們需要選擇的時候是當(dāng)前及之后的一個時間還是可以選擇任意時間开财。另外汉柒，比如簽訂合同時同一個合同的開始日期肯定要大于結(jié)束日期。新合同的開始日期必須要在舊合同的結(jié)束日期之后责鳍。合同期內(nèi)進(jìn)行的一系列操作的時間肯定不能超出合同時間等等情況碾褂。

這樣設(shè)計(jì)可以增強(qiáng)產(chǎn)品的容錯性，讓用戶在操作錯誤的情況下可以及時糾正過來历葛。

可能在設(shè)計(jì)一個字段時正塌，我們要考慮的問題不僅僅有這些，其實(shí)我覺得我們每個人在設(shè)計(jì)表單頁面的時候都需要這樣一個自審單恤溶。對照著我們的產(chǎn)品乓诽，進(jìn)行查漏補(bǔ)缺，讓我們的產(chǎn)品變得更加完善咒程。