這篇文章將通過“匯總字段”、“處理字段”、“設(shè)計字段”這三個方面來詳細(xì)闡述如何進(jìn)行字段設(shè)計。讓你之后在面對后臺產(chǎn)品繁多的字段時，游刃有余！

后臺產(chǎn)品和前臺產(chǎn)品的一個很大的不同，在于后臺產(chǎn)品的字段信息會比較多。如何合理地設(shè)計這些字段，成為后臺產(chǎn)品設(shè)計的一個重要工作。本文將重點(diǎn)討論在后臺產(chǎn)品設(shè)計時，如何合理地進(jìn)行字段設(shè)計，主要按照以下三個步驟來進(jìn)行：

• 匯總字段；
• 處理字段；
• 設(shè)計字段

匯總字段

想要進(jìn)行字段設(shè)計，最開始要做的是匯總字段。因?yàn)槲覀冏罱K的目的是要把字段在頁面上展現(xiàn)出來，如果沒有字段，就無從談起字段設(shè)計?！扒蓩D難為無米之炊”說的就是這個意思。

那么問題來了，字段如何匯總？一般來說，字段來源有兩個：

1.業(yè)務(wù)需求。業(yè)務(wù)需求的字段是在跟業(yè)務(wù)部門調(diào)研時獲得的。

• 業(yè)務(wù)需求的字段獲取是一個逐漸完善的過程。因?yàn)楫a(chǎn)品經(jīng)理跟業(yè)務(wù)部門接觸時，首先應(yīng)該獲取的應(yīng)該是整個業(yè)務(wù)流程（業(yè)務(wù)流程梳理會另寫文章來討論），是比較宏觀的，在這個過程中，獲取到的字段應(yīng)該是粗略的；等將業(yè)務(wù)流程梳理完成后，進(jìn)行詳細(xì)的業(yè)務(wù)流程設(shè)計時，會再細(xì)化涉及到的每個字段， 對每個字段的信息進(jìn)行詳細(xì)記錄；
• 要盡量確保匯總的字段是全部的，沒有遺漏。以防上線使用后，發(fā)現(xiàn)問題，造成返工。可以在字段設(shè)計前和產(chǎn)出原型后，多跟業(yè)務(wù)部門的人確認(rèn)，這樣可以避免這種情況發(fā)生。
• 匯總的字段要包括以下幾種信息：

1. ?字段名稱
2. 必填性質(zhì)
3. 輸入方式；記錄字段的數(shù)據(jù)如何輸入：手動輸入/選擇/自動生成/其他
4. 手動輸入；如果是手動輸入方式，則要記錄對輸入值的格式要求以及輸入值范圍
5. 選擇輸入；如果是選擇輸入方式，則要記錄是單選還是多選以及選項(xiàng)列表
6. 是否需要單獨(dú)配置權(quán)限；有些字段比較特殊，如果只能某些人看到，則需要給這些字段單獨(dú)配置權(quán)限
7. 字段提醒（說明）；字段的一些特殊說明，用來提醒操作者
8. 其他；因?yàn)楹笈_產(chǎn)品跟業(yè)務(wù)密切相關(guān)，不同的業(yè)務(wù)可能包含的字段信息也不盡相同，因此可能也會有字段的其他信息需要記錄，這個需要具體問題具體分析。

2. 系統(tǒng)需求。系統(tǒng)需求的字段雖然業(yè)務(wù)部門不太關(guān)注或者感知不到，但是對系統(tǒng)來說確是很重要的，比如說數(shù)據(jù)的id、各個時間的記錄等，這些字段從業(yè)務(wù)部門很難獲取到，但卻是非常有用的信息，這些字段就要靠產(chǎn)品經(jīng)理平時的經(jīng)驗(yàn)積累。

處理字段

通過匯總字段，我們將產(chǎn)品設(shè)計中涉及中的字段全部列了出來，接下來我們可以開始字段設(shè)計了嗎？答案還是不行，因?yàn)殡m然我們將字段全部匯總了出來，但是這些字段可能比較繁多，比較混亂，因此這些字段還是要經(jīng)過一系列的處理，才能開始設(shè)計中。

那么如何處理呢？在這里，我推薦一種方法，準(zhǔn)確來說是四種策略——刪除、組織、隱藏、轉(zhuǎn)移。（有興趣的同學(xué)可以詳細(xì)閱讀《簡約至上——交互式設(shè)計四策略》這本書，里面對這四種策略進(jìn)行了詳細(xì)的說明）

1、刪除

通過與業(yè)務(wù)調(diào)研，我們獲得了大量的字段。但是，這些字段都是必須的嗎？過多的字段不但頁面看起來非常臃腫，也會降低操作者的效率。這就需要我們對這些字段逐個進(jìn)行分析，刪除冗余的字段，來簡化展現(xiàn)在頁面上的字段，使操作者的注意力集中到真正重要的內(nèi)容上?？偨Y(jié)來說，需要刪除的字段有以下兩種：

實(shí)際業(yè)務(wù)沒有用的；在匯總字段部分，我們?yōu)榱吮M量將字段都考慮到，需要做加法，把可能涉及到的字段全部列出來；在這個階段，就需要做減法，刪除那些對實(shí)際業(yè)務(wù)沒有用的字段。

【舉例】：針對購票系統(tǒng)，我們需要記錄注冊用戶的個人信息，因此將“身份證號”、“手機(jī)號”、“體重”等信息列了出來，但是在這個階段，通過分析可以得出，“體重”字段對實(shí)際業(yè)務(wù)沒有用，因此可以刪除。當(dāng)然，如果換作另一個系統(tǒng)，比如說體檢報告系統(tǒng)的個人信息，“體重”這個字段就是必須的了，因?yàn)檫@個字段跟業(yè)務(wù)息息相關(guān)?？傊治鲎侄问欠裼杏?，一定要結(jié)合實(shí)際業(yè)務(wù)場景。

系統(tǒng)自動生成的；有些字段雖然是業(yè)務(wù)關(guān)心的，但是并不需要人工填寫，如創(chuàng)建者賬號；或者是業(yè)務(wù)并不關(guān)心，但是對系統(tǒng)來說確實(shí)有用的，如記錄的id；這些會系統(tǒng)自動生成，因此這些字段不需要放到“頁面”中。注意：這里的頁面指的是新增/修改頁面，在產(chǎn)品設(shè)計中，這些系統(tǒng)自動生成的字段也要有所記錄，比如id會出現(xiàn)在數(shù)據(jù)列表頁面中，創(chuàng)建者賬號、創(chuàng)建時間、修改時間會記錄到操作日志頁面里?！皠h除”的意思更多意義上是指，這些字段不需要人工進(jìn)行數(shù)據(jù)的輸入，并不是在頁面中不展示。

2、組織

在對匯總的字段進(jìn)行篩選刪除后，接下來我們就可以對剩下的字段進(jìn)行組織了，通過對字段進(jìn)行組織，能夠使字段更加模塊化，看起來更加整齊，清晰易懂，操作效率也會提升。推薦以下兩種組織方式：

行為組織。這種方式是根據(jù)用戶某種行為觸發(fā)的頁面來對字段進(jìn)行組織，該頁面上的字段都是為了讓用戶完成某種行為而組織到一起的。一般來說，這種組織方式是頁面級的組織方式，比較宏觀。

【舉例】：在購物平臺京東買東西時，如果用戶的行為是“修改個人信息”，那么觸發(fā)的頁面上的字段都是與個人信息有關(guān)的字段；如果用戶的行為是“結(jié)算”時，那么觸發(fā)的頁面上的字段是與訂單相關(guān)的字段信息。

歸類組織。這種方式是根據(jù)字段之間的關(guān)系來組織，將類別相同的字段放在一起，組成頁面上的一個分塊。與“行為組織”相比，“歸類組織”這種方式就比較微觀，重點(diǎn)關(guān)注對頁面上的字段再次進(jìn)行組織?！九e例】：以12306為例，在注冊用戶的“個人信息”頁面，將“用戶名”、“姓名”、“性別”等字段組織為“基本信息”部分；將“手機(jī)號碼”、“固定電話”、“電子郵件”組織為“聯(lián)系方式”部分；

以上兩種是比較常見的組織方式，在實(shí)際工作中，可以根據(jù)具體的業(yè)務(wù)需求來選擇適合自己后臺的組織方式。

3、隱藏

有些字段雖然沒有被刪除，但是其重要性或者說使用頻率比較低，如果直接展示出來，不但會造成頁面信息過多，而且也會影響操作者效率。在這里，我們可以考慮使用隱藏的方式來處理這些字段，只保留一個開關(guān)，可以用來顯示這些隱藏的字段。

【舉例】：在使用QQ郵件發(fā)送郵件時，大部分情況下使用默認(rèn)的字段就能滿足日常的需求，但是也有一些特殊需求，偶爾會使用到。QQ郵箱提供了一些特殊的選項(xiàng)隱藏了郵件編輯頁面底部并設(shè)置了開關(guān)，在有需要的時候打開開關(guān)，就可以使用。

還有一種情況，就是字段的展示依賴于前面字段的選擇，在前面字段沒有選擇之前，系統(tǒng)無法獲取下面的字段如何顯示。這種情況下，就可以先隱藏這些字段，等前面的字段選擇好后，隱藏的字段再顯示?！九e例】：在淘寶商家后臺發(fā)布寶貝時，“采購地”如果選擇“國內(nèi)”，則不需要再進(jìn)行其他選擇；如果選擇“海外及港澳臺”，那么就還需要選擇“國家/地區(qū)”和“庫存類型”。

4、轉(zhuǎn)移

在處理字段時，也可以對某些字段進(jìn)行“轉(zhuǎn)移”操作，轉(zhuǎn)移的目的是充分利用各種資源來提高效率。推薦以下兩種轉(zhuǎn)移方式：

系統(tǒng)和人工的轉(zhuǎn)移。雖然系統(tǒng)通過計算機(jī)強(qiáng)大的功能可以替代人工完成很多復(fù)雜的工作，但是僅限于客觀的計算和判斷，一旦涉及到主觀的判斷，那么這部分工作就需要人工來進(jìn)行。

【舉例】：在人力資源行業(yè)做招聘流程外包項(xiàng)目時，需要對潛在的項(xiàng)目進(jìn)行多輪評估，每次評估都會記錄該潛在項(xiàng)目的一些信息，然后最后通過這些所有評估的信息來決定是否要立項(xiàng)。在這個過程中，系統(tǒng)可以對每次評估的信息進(jìn)行記錄，也可以根據(jù)需求對數(shù)據(jù)進(jìn)行一些處理，來產(chǎn)生更加通俗易懂的結(jié)論，但是最終是否要立項(xiàng)，還是要通過人工的判斷，因此這里面涉及到很多主觀因素，單純靠系統(tǒng)是無法判斷的。

設(shè)備的轉(zhuǎn)移。這種設(shè)備之間的轉(zhuǎn)移一般用在字段值的輸入上。

【舉例】：如果是一個快遞后臺管理系統(tǒng)，需要輸入快遞單號，如果讓人工在后臺直接輸入的話，會比較費(fèi)時費(fèi)力，而且還有一定幾率出錯。這種情況下，可以考慮讓系統(tǒng)接入掃描儀，使用掃描儀來對快遞的條形碼直接掃描，來錄制快遞單號，不但輸入速度提升，而且還減少了出錯的概率。雖然通過外接設(shè)備來掃描輸入，好處很多，但是還是建議同時保留手動輸入方式，以防止外接設(shè)備出故障時，還有另外的方式來完成工作。

以上是兩種常用的轉(zhuǎn)移方式，可能還會有其他的轉(zhuǎn)移方式，但無論是哪種方式，設(shè)計的初衷都是為了提升工作效率來設(shè)計的，這點(diǎn)一定要明確。

設(shè)計字段

在對字段進(jìn)行處理之后，我們就可以進(jìn)行設(shè)計字段的工作了。設(shè)計字段時，一般需要從以下幾個方面來考慮：

• 字段名稱。字段名稱要做到簡潔明了，字?jǐn)?shù)不要太多，以免看上去繁瑣；同時讓用戶一眼就知道這個字段的作用是什么。
• 輸入方式。根據(jù)字段要輸入的值的特性，選擇適合它的輸入方式，可以有以下幾種輸入方式供選擇：

1、手動填寫。

適用于字段要輸入的值沒有固定選項(xiàng)的情形。

（1）手動填寫要對輸入的內(nèi)容格式和輸入值范圍進(jìn)行規(guī)定。這種方式也分為兩種：

• 一種是規(guī)定可輸入的最大字符數(shù)，這種情況可輸入的字符數(shù)是不固定的，只要不超過規(guī)定的最大字符數(shù)就好?！九e例】：用戶名設(shè)置，最多可輸入多少位；
• 另一種是規(guī)定輸入的字符位數(shù)，這種情況可輸入的字符是固定的?！九e例】：輸入手機(jī)號，都是11位。

（2）為了讓用戶在輸入時知曉輸入字符的限制規(guī)定，用戶體驗(yàn)最好的是能實(shí)時顯示輸入了多少個字符和最多可輸入的字符數(shù)。

【舉例】：如淘寶發(fā)布寶貝時的“寶貝賣點(diǎn)”字段，能實(shí)時顯示已輸入的字符數(shù)和最多可輸入字符數(shù)。

（3） 在這里，我們將討論一種情形：那就是如果用戶輸入的字符超過了限制，應(yīng)該怎么處理？是直接限制超過部分無法再繼續(xù)輸入；還是能繼續(xù)輸入，但是給出明確的超出提示？

對于這個問題，還是應(yīng)該分情況來看待：

• 如果需要輸入的是手機(jī)號等固定位數(shù)的數(shù)字信息，那么就可以做成超過部分無法再繼續(xù)輸入，這樣可以防止用戶出錯；
• 如果需要輸入的是文字信息，那么就需要考慮到用戶可能會先輸入或復(fù)制多于規(guī)定的內(nèi)容，然后再進(jìn)行編輯到符合規(guī)定的字符數(shù)，這樣就需要讓用戶可以輸入多于規(guī)定的字符數(shù)，但是要在已輸入的字符數(shù)部分給予明顯的提示。

【舉例】：還是以淘寶的發(fā)布寶貝時的“寶貝賣點(diǎn)”字段為例，允許輸入超過最大限制的字符數(shù)，同時進(jìn)行字?jǐn)?shù)超過要求的提示，以此來引導(dǎo)用戶進(jìn)行再次編輯。

2、單選。

這是一種非常常見的選擇輸入方式，將所有可能的選項(xiàng)列出來，讓用戶選擇。適用于要輸入的值已有固定選項(xiàng)的情況。

（1）選項(xiàng)之間是互斥的，也就是說，只能選擇其中的某一個選項(xiàng)。這種方式適用于該字段的值只有一種存在的情況。如“性別”、“最高學(xué)位”等?！九e例】：京東的“個人信息”頁面的“性別”字段就使用的單選輸入方式。

（2）使用單選這種輸入方式，還要考慮其默認(rèn)值的問題?？梢詫⑵淠J(rèn)值設(shè)置為被選擇概率最大的那個值，這樣可以在一定程度上減輕用戶選擇的成本。但是，這種情況要慎重使用，因?yàn)槿绻x予了默認(rèn)值，在遇到該字段的值未確認(rèn)的情況下，數(shù)據(jù)統(tǒng)計時就會發(fā)生偏差。

3、多選。

這也是比較常見的一種選擇輸入方式。將所有可能的選項(xiàng)列出來，讓用戶選擇。適用于要輸入的值已有固定選項(xiàng)的情況。

（1）它與單選的不同在于，這種輸入方式可以進(jìn)行多個選擇，適用于該字段的值有多種可能的情況?！九e例】：淘寶賣家“發(fā)布寶貝”頁面的“售后服務(wù)”可以選擇多個。

（2）使用多選這種輸入方式，默認(rèn)不會勾選任何選項(xiàng)，除非是已經(jīng)確認(rèn)必須要選擇的選項(xiàng)。如上圖的“服務(wù)承諾”選項(xiàng)默認(rèn)就是勾選狀態(tài)。

4、列表單選。

這種方式是通過列表的方式將選項(xiàng)列出來，然后用戶從列表中選擇所需的選項(xiàng)。適用于要輸入的值已有固定選項(xiàng)的情況。

（1）列表單選的選項(xiàng)之間是互斥的，只能選擇其中的某一個選項(xiàng)。這種方式適用于該字段的值只有一種存在的情況；與上面說的“單選”相似。

（2）雖然列表單選與單選實(shí)現(xiàn)的效果相似，但是它們的應(yīng)用場景不同。單選適用于選項(xiàng)較少的情況，這種情況下就可以將選項(xiàng)全部列出來，讓用戶直接選擇，從而減少了用戶點(diǎn)擊下拉的這一步操作；而列表單選則適用于選項(xiàng)較多的情況，將選項(xiàng)放置到列表中，并通過拖動滾動條的方式來進(jìn)行選擇，節(jié)省了頁面空間。

（3）雖然列表單選解決了選項(xiàng)過多占用頁面的問題，但是遇到選項(xiàng)過多的情況下，如何讓用戶從眾多的選項(xiàng)中快速查找到自己所需的選項(xiàng)呢？這里，推薦使用搜索選擇，即在列表框上方添加一個搜索框，與搜索內(nèi)容匹配的選項(xiàng)會在列表實(shí)時展示，這樣就能極大提升用戶查找的效率?！九e例】：淘寶“發(fā)布寶貝”頁面的“品牌”支持搜索選項(xiàng)。

（4）列表單選的變形——多級聯(lián)動選擇，這種方式應(yīng)用于需要進(jìn)行多個層級的選擇，高層級的選項(xiàng)決定低層級的選項(xiàng)?！九e例】：當(dāng)當(dāng)網(wǎng)在新增收獲地址時“地區(qū)”字段就是多級聯(lián)動選擇。

（5）還有另外一種變形，將每一級的選項(xiàng)都直接展示出來，并在每一級上增加快速搜索框，這種方式適用于每一級選項(xiàng)都比較多的情況?！九e例】：淘寶“發(fā)布寶貝”時選擇寶貝的品類和品牌。

5、列表多選。

這種方式通過列表選擇的方式來進(jìn)行多項(xiàng)選擇，適用于要輸入的值已有固定選項(xiàng)的情況。

• 列表多選和多選的區(qū)別在于，列表多選適用于選項(xiàng)比較多的情況，如果全部展示出來，會造成頁面比較臃腫。因此將選項(xiàng)做成列表選擇的形式。
• 因?yàn)榱斜磉x項(xiàng)會在拉動時看不到已選擇的選項(xiàng)，同時在失去焦點(diǎn)時列表選項(xiàng)消失，因此，還需要將已選擇的選項(xiàng)列出來，方便一眼就能看到選了哪些選項(xiàng)。
• 為了方便刪除已經(jīng)選擇的選項(xiàng)，需要直接在列出來的選項(xiàng)上提供刪除功能，減少用戶操作的步驟。

【舉例】：如圖是大街網(wǎng)選擇城市的彈窗，已經(jīng)選擇的“廈門”、“莆田”、“三明”會出現(xiàn)在已選擇的部分，同時，如果想刪除某一個已選擇的城市，可以直接點(diǎn)擊該城市右邊的刪除按鈕。

1、掃描輸入。

這在文章的前面有過介紹，可以通過掃描儀、攝像頭等來對二維碼、條形碼進(jìn)行掃描來快速進(jìn)行字段信息的輸入，這種方式比起手動輸入來，不但減少了人工操作失誤，效率有了很大地提升。唯一要注意的是，在支持掃描輸入的同時，也要支持手動輸入，以防掃描設(shè)備失效時，還有其他的方式來完成工作。【舉例】：現(xiàn)在很火的共享單車，就同時支持掃描二維碼和手動輸入車號來解鎖。

2、必填性質(zhì)。

在設(shè)計字段時，有些字段是必須要填的，而有些字段是選填的，要對字段的必填性質(zhì)進(jìn)行說明。如何獲知字段是否是必填項(xiàng)呢？這就需要在整理字段階段時，和業(yè)務(wù)方確認(rèn)好。確認(rèn)好之后，在這一步，就要將必填的字段特殊標(biāo)記出來。最常用的標(biāo)記方式是在字段前方加上紅色*號。【舉例】：淘寶“發(fā)布寶貝”頁面的“寶貝類型”、“寶貝標(biāo)題”就是必填項(xiàng)。

3、字段提醒（說明）。

有些字段有一些特別的輸入規(guī)則或者限制，這個需要對用戶進(jìn)行提醒，防止用戶沒有看到或者忘掉這些規(guī)則或限制從而造成返工。具體來說，一般有以下三種提醒方式：

（1）在輸入框還未輸入內(nèi)容時顯示提醒內(nèi)容。這種方式的好處是提醒內(nèi)容不會占用額外的空間；而且在輸入框內(nèi)進(jìn)行提示，能夠讓用戶在輸入時就看到提醒，“觸達(dá)率”很高?！九e例】：微信公眾平臺的“新建圖文消息”頁面的“標(biāo)題”、“作者”、“正文”就使用了這種方式。

不好的地方在于在開始輸入后，提醒內(nèi)容會消失；如果提醒的內(nèi)容過多時，用戶無法完全記住。因此這種提醒方式適用于提醒內(nèi)容不多或者容易理解的情況。

（2）將字段的提醒內(nèi)容直接展示出來。這種方式的好處在于提醒內(nèi)容會一直存在，任何字段都可以使用。【舉例】：微信公眾平臺在設(shè)置“關(guān)鍵詞自動回復(fù)”時，對“規(guī)則名稱”的字?jǐn)?shù)限制就使用了這種提醒方法。淘寶在發(fā)布寶貝時的“寶貝賣點(diǎn)”、“寶貝屬性”字段的提醒也使用了這種方式。

不好的地方在于這種方式在提醒內(nèi)容很多的情況下，會非常占用頁面空間，甚至喧賓奪主。因此，這種方式適用于提醒內(nèi)容不多，且提醒內(nèi)容比較重要的情況。

（3）將字段的提醒內(nèi)容隱藏起來，只保留一個簡潔的入口在查看時需要進(jìn)行額外的操作。這種方式的好處是在遇到提醒內(nèi)容非常多的情況下，會很節(jié)省頁面空間；不好的地方在于提醒內(nèi)容過于隱秘；用戶查看提醒還需要額外的操作成本。

【舉例】：淘寶在發(fā)布寶貝時的“材質(zhì)成分”字段的提醒就使用了這種方式。點(diǎn)擊“填寫須知”會新頁面跳轉(zhuǎn)到具體的材質(zhì)成分填寫的標(biāo)準(zhǔn)與規(guī)范頁面。

以上說的三種字段提醒的顯示方式，各有利弊。在具體應(yīng)用中，要考慮到具體的使用場景。有的時候可以考慮結(jié)合使用?！九e例】：淘寶在“發(fā)布寶貝”頁面的“主圖視頻”字段既顯示了比較重要的幾點(diǎn)提醒，又留了一個入口，來讓用戶查看完整的教程。

以上，就是根據(jù)自己這幾年的經(jīng)驗(yàn)總結(jié)出來的字段設(shè)計的一些心得，由于本人水平及經(jīng)驗(yàn)有限，可能有的地方說的不是很完善，希望大家多多拍磚，感謝！

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

題圖來自unspalsh，基于CC0協(xié)議