後臺產品設計如何進行欄位設計

由人人都是產品經理發表于手機遊戲
2021-08-23

輸入選項欄位頁面方式

簡介（1）它與單選的不同在於，這種輸入方式可以進行多個選擇，適用於該欄位的值有多種可能的情況

12306性別填錯了怎麼修改

這篇文章將透過“彙總欄位”、“處理欄位”、“設計欄位”這三個方面來詳細闡述如何進行欄位設計。讓你之後在面對後臺產品繁多的欄位時，遊刃有餘！

後臺產品和前臺產品的一個很大的不同，在於後臺產品的欄位資訊會比較多。如何合理地設計這些欄位，成為後臺產品設計的一個重要工作。本文將重點討論在後臺產品設計時，如何合理地進行欄位設計，主要按照以下三個步驟來進行：

彙總欄位；

處理欄位；

設計欄位

彙總欄位

想要進行欄位設計，最開始要做的是彙總欄位。因為我們最終的目的是要把欄位在頁面上展現出來，如果沒有欄位，就無從談起欄位設計。“巧婦難為無米之炊”說的就是這個意思。

那麼問題來了，欄位如何彙總？一般來說，欄位來源有兩個：

1.業務需求。業務需求的欄位是在跟業務部門調研時獲得的。

業務需求的欄位獲取是一個逐漸完善的過程。因為產品經理跟業務部門接觸時，首先應該獲取的應該是整個業務流程（業務流程梳理會另寫文章來討論），是比較宏觀的，在這個過程中，獲取到的欄位應該是粗略的；等將業務流程梳理完成後，進行詳細的業務流程設計時，會再細化涉及到的每個欄位，對每個欄位的資訊進行詳細記錄；

要儘量確保彙總的欄位是全部的，沒有遺漏。以防上線使用後，發現問題，造成返工。可以在欄位設計前和產出原型後，多跟業務部門的人確認，這樣可以避免這種情況發生。

彙總的欄位要包括以下幾種資訊：

欄位名稱

必填性質

輸入方式；記錄欄位的資料如何輸入：手動輸入/選擇/自動生成/其他

手動輸入；如果是手動輸入方式，則要記錄對輸入值的格式要求以及輸入值範圍

選擇輸入；如果是選擇輸入方式，則要記錄是單選還是多選以及選項列表

是否需要單獨配置許可權；有些欄位比較特殊，如果只能某些人看到，則需要給這些欄位單獨配置許可權

欄位提醒（說明）；欄位的一些特殊說明，用來提醒操作者

其他；因為後臺產品跟業務密切相關，不同的業務可能包含的欄位資訊也不盡相同，因此可能也會有欄位的其他資訊需要記錄，這個需要具體問題具體分析。

2。系統需求。系統需求的欄位雖然業務部門不太關注或者感知不到，但是對系統來說確是很重要的，比如說資料的id、各個時間的記錄等，這些欄位從業務部門很難獲取到，但卻是非常有用的資訊，這些欄位就要靠產品經理平時的經驗積累。

處理欄位

透過彙總欄位，我們將產品設計中涉及中的欄位全部列了出來，接下來我們可以開始欄位設計了嗎？答案還是不行，因為雖然我們將欄位全部彙總了出來，但是這些欄位可能比較繁多，比較混亂，因此這些欄位還是要經過一系列的處理，才能開始設計中。

那麼如何處理呢？在這裡，我推薦一種方法，準確來說是四種策略——刪除、組織、隱藏、轉移。（有興趣的同學可以詳細閱讀《簡約至上——互動式設計四策略》這本書，裡面對這四種策略進行了詳細的說明）

1、刪除

透過與業務調研，我們獲得了大量的欄位。但是，這些欄位都是必須的嗎？過多的欄位不但頁面看起來非常臃腫，也會降低操作者的效率。這就需要我們對這些欄位逐個進行分析，刪除冗餘的欄位，來簡化展現在頁面上的欄位，使操作者的注意力集中到真正重要的內容上。總結來說，需要刪除的欄位有以下兩種：

實際業務沒有用的；在彙總欄位部分，我們為了儘量將欄位都考慮到，需要做加法，把可能涉及到的欄位全部列出來；在這個階段，就需要做減法，刪除那些對實際業務沒有用的欄位。

【舉例】：

針對購票系統，我們需要記錄註冊使用者的個人資訊，因此將“身份證號”、“手機號”、“體重”等資訊列了出來，但是在這個階段，透過分析可以得出，“體重”欄位對實際業務沒有用，因此可以刪除。當然，如果換作另一個系統，比如說體檢報告系統的個人資訊，“體重”這個欄位就是必須的了，因為這個欄位跟業務息息相關。總之，分析欄位是否有用，一定要結合實際業務場景。

系統自動生成的；有些欄位雖然是業務關心的，但是並不需要人工填寫，如建立者賬號；或者是業務並不關心，但是對系統來說確實有用的，如記錄的id；這些會系統自動生成，因此這些欄位不需要放到“頁面”中。注意：這裡的頁面指的是新增/修改頁面，在產品設計中，這些系統自動生成的欄位也要有所記錄，比如id會出現在資料列表頁面中，建立者賬號、建立時間、修改時間會記錄到操作日誌頁面裡。“刪除”的意思更多意義上是指，這些欄位不需要人工進行資料的輸入，並不是在頁面中不展示。

2、組織

在對彙總的欄位進行篩選刪除後，接下來我們就可以對剩下的欄位進行組織了，透過對欄位進行組織，能夠使欄位更加模組化，看起來更加整齊，清晰易懂，操作效率也會提升。推薦以下兩種組織方式：

行為組織。這種方式是根據使用者某種行為觸發的頁面來對欄位進行組織，該頁面上的欄位都是為了讓使用者完成某種行為而組織到一起的。一般來說，這種組織方式是頁面級的組織方式，比較宏觀。

【舉例】：

在購物平臺京東買東西時，如果使用者的行為是“修改個人資訊”，那麼觸發的頁面上的欄位都是與個人資訊有關的欄位；如果使用者的行為是“結算”時，那麼觸發的頁面上的欄位是與訂單相關的欄位資訊。

歸類組織。這種方式是根據欄位之間的關係來組織，將類別相同的欄位放在一起，組成頁面上的一個分塊。與“行為組織”相比，“歸類組織”這種方式就比較微觀，重點關注對頁面上的欄位再次進行組織。【舉例】：以12306為例，在註冊使用者的“個人資訊”頁面，將“使用者名稱”、“姓名”、“性別”等欄位組織為“基本資訊”部分；將“手機號碼”、“固定電話”、“電子郵件”組織為“聯絡方式”部分；

以上兩種是比較常見的組織方式，在實際工作中，可以根據具體的業務需求來選擇適合自己後臺的組織方式。

3、隱藏

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

【舉例】：

在使用QQ郵件傳送郵件時，大部分情況下使用預設的欄位就能滿足日常的需求，但是也有一些特殊需求，偶爾會使用到。QQ郵箱提供了一些特殊的選項隱藏了郵件編輯頁面底部並設定了開關，在有需要的時候開啟開關，就可以使用。

還有一種情況，就是欄位的展示依賴於前面欄位的選擇，在前面欄位沒有選擇之前，系統無法獲取下面的欄位如何顯示。這種情況下，就可以先隱藏這些欄位，等前面的欄位選擇好後，隱藏的欄位再顯示。【舉例】：在淘寶商家後臺釋出寶貝時，“採購地”如果選擇“國內”，則不需要再進行其他選擇；如果選擇“海外及港澳臺”，那麼就還需要選擇“國家/地區”和“庫存型別”。

4、轉移

在處理欄位時，也可以對某些欄位進行“轉移”操作，轉移的目的是充分利用各種資源來提高效率。推薦以下兩種轉移方式：

系統和人工的轉移。雖然系統透過計算機強大的功能可以替代人工完成很多複雜的工作，但是僅限於客觀的計算和判斷，一旦涉及到主觀的判斷，那麼這部分工作就需要人工來進行。

【舉例】：

在人力資源行業做招聘流程外包專案時，需要對潛在的專案進行多輪評估，每次評估都會記錄該潛在專案的一些資訊，然後最後透過這些所有評估的資訊來決定是否要立項。在這個過程中，系統可以對每次評估的資訊進行記錄，也可以根據需求對資料進行一些處理，來產生更加通俗易懂的結論，但是最終是否要立項，還是要透過人工的判斷，因此這裡面涉及到很多主觀因素，單純靠系統是無法判斷的。

裝置的轉移。這種裝置之間的轉移一般用在欄位值的輸入上。

【舉例】：

如果是一個快遞後臺管理系統，需要輸入快遞單號，如果讓人工在後臺直接輸入的話，會比較費時費力，而且還有一定機率出錯。這種情況下，可以考慮讓系統接入掃描器，使用掃描器來對快遞的條形碼直接掃描，來錄製快遞單號，不但輸入速度提升，而且還減少了出錯的機率。雖然透過外接裝置來掃描輸入，好處很多，但是還是建議同時保留手動輸入方式，以防止外接裝置出故障時，還有另外的方式來完成工作。

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

設計欄位

在對欄位進行處理之後，我們就可以進行設計欄位的工作了。設計欄位時，一般需要從以下幾個方面來考慮：

欄位名稱。欄位名稱要做到簡潔明瞭，字數不要太多，以免看上去繁瑣；同時讓使用者一眼就知道這個欄位的作用是什麼。

輸入方式。根據欄位要輸入的值的特性，選擇適合它的輸入方式，可以有以下幾種輸入方式供選擇：

1、手動填寫。

適用於欄位要輸入的值沒有固定選項的情形。

（1）手動填寫要對輸入的內容格式和輸入值範圍進行規定。這種方式也分為兩種：

一種是規定可輸入的最大字元數，這種情況可輸入的字元數是不固定的，只要不超過規定的最大字元數就好。【舉例】：使用者名稱設定，最多可輸入多少位；

另一種是規定輸入的字元位數，這種情況可輸入的字元是固定的。【舉例】：輸入手機號，都是11位。

（2）為了讓使用者在輸入時知曉輸入字元的限制規定，使用者體驗最好的是能實時顯示輸入了多少個字元和最多可輸入的字元數。

【舉例】：如淘寶釋出寶貝時的“寶貝賣點”欄位，能實時顯示已輸入的字元數和最多可輸入字元數。

（3）在這裡，我們將討論一種情形：那就是如果使用者輸入的字元超過了限制，應該怎麼處理？是直接限制超過部分無法再繼續輸入；還是能繼續輸入，但是給出明確的超出提示？

對於這個問題，還是應該分情況來看待：

如果需要輸入的是手機號等固定位數的

數字資訊

，那麼就可以做成超過部分無法再繼續輸入，這樣可以防止使用者出錯；

如果需要輸入的是

文字資訊

，那麼就需要考慮到使用者可能會先輸入或複製多於規定的內容，然後再進行編輯到符合規定的字元數，這樣就需要讓使用者可以輸入多於規定的字元數，但是要在已輸入的字元數部分給予明顯的提示。

【舉例】：還是以淘寶的釋出寶貝時的“寶貝賣點”欄位為例，允許輸入超過最大限制的字元數，同時進行字數超過要求的提示，以此來引導使用者進行再次編輯。

2、單選。

這是一種非常常見的選擇輸入方式，將所有可能的選項列出來，讓使用者選擇。適用於要輸入的值已有固定選項的情況。

（1）選項之間是互斥的，也就是說，只能選擇其中的某一個選項。這種方式適用於該欄位的值只有一種存在的情況。如“性別”、“最高學位”等。【舉例】：京東的“個人資訊”頁面的“性別”欄位就使用的單選輸入方式。

（2）使用單選這種輸入方式，還要考慮其預設值的問題。可以將其預設值設定為被選擇機率最大的那個值，這樣可以在一定程度上減輕使用者選擇的成本。但是，這種情況要慎重使用，因為如果賦予了預設值，在遇到該欄位的值未確認的情況下，資料統計時就會發生偏差。

3、多選。

這也是比較常見的一種選擇輸入方式。將所有可能的選項列出來，讓使用者選擇。適用於要輸入的值已有固定選項的情況。

（1）它與單選的不同在於，這種輸入方式可以進行多個選擇，適用於該欄位的值有多種可能的情況。【舉例】：淘寶賣家“釋出寶貝”頁面的“售後服務”可以選擇多個。

（2）使用多選這種輸入方式，預設不會勾選任何選項，除非是已經確認必須要選擇的選項。如上圖的“服務承諾”選項預設就是勾選狀態。

4、列表單選。

這種方式是透過列表的方式將選項列出來，然後使用者從列表中選擇所需的選項。適用於要輸入的值已有固定選項的情況。

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

（2）雖然列表單選與單選實現的效果相似，但是它們的應用場景不同。單選適用於選項較少的情況，這種情況下就可以將選項全部列出來，讓使用者直接選擇，從而減少了使用者點選下拉的這一步操作；而列表單選則適用於選項較多的情況，將選項放置到列表中，並透過拖動捲軸的方式來進行選擇，節省了頁面空間。

（3）雖然列表單選解決了選項過多佔用頁面的問題，但是遇到選項過多的情況下，如何讓使用者從眾多的選項中快速查詢到自己所需的選項呢？這裡，推薦使用搜索選擇，即在列表框上方新增一個搜尋框，與搜尋內容匹配的選項會在列表實時展示，這樣就能極大提升使用者查詢的效率。【舉例】：淘寶“釋出寶貝”頁面的“品牌”支援搜尋選項。

（4）列表單選的變形——多級聯動選擇，這種方式應用於需要進行多個層級的選擇，高層級的選項決定低層級的選項。【舉例】：噹噹網在新增收穫地址時“地區”欄位就是多級聯動選擇。

（5）還有另外一種變形，將每一級的選項都直接展示出來，並在每一級上增加快速搜尋框，這種方式適用於每一級選項都比較多的情況。【舉例】：淘寶“釋出寶貝”時選擇寶貝的品類和品牌。

5、列表多選。

這種方式透過列表選擇的方式來進行多項選擇，適用於要輸入的值已有固定選項的情況。

列表多選和多選的區別在於，列表多選適用於選項比較多的情況，如果全部展示出來，會造成頁面比較臃腫。因此將選項做成列表選擇的形式。

因為列表選項會在拉動時看不到已選擇的選項，同時在失去焦點時列表選項消失，因此，還需要將已選擇的選項列出來，方便一眼就能看到選了哪些選項。

為了方便刪除已經選擇的選項，需要直接在列出來的選項上提供刪除功能，減少使用者操作的步驟。

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

1、掃描輸入。

這在文章的前面有過介紹，可以透過掃描器、攝像頭等來對二維碼、條形碼進行掃描來快速進行欄位資訊的輸入，這種方式比起手動輸入來，不但減少了人工操作失誤，效率有了很大地提升。唯一要注意的是，在支援掃描輸入的同時，也要支援手動輸入，以防掃描裝置失效時，還有其他的方式來完成工作。【舉例】：現在很火的共享單車，就同時支援掃描二維碼和手動輸入車號來解鎖。

2、必填性質。

在設計欄位時，有些欄位是必須要填的，而有些欄位是選填的，要對欄位的必填性質進行說明。如何獲知欄位是否是必填項呢？這就需要在整理欄位階段時，和業務方確認好。確認好之後，在這一步，就要將必填的欄位特殊標記出來。最常用的標記方式是在欄位前方加上紅色*號。【舉例】：淘寶“釋出寶貝”頁面的“寶貝型別”、“寶貝標題”就是必填項。