起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識后臺產品：字段設計
這篇文章將通過“匯總字段”、“處理字段”、“設計字段”這三個方面來詳細闡述如何進行字段設計。讓你之后在面對后臺產品繁多的字段時，游刃有余！
后臺產品和前臺產品的一個很大的不同，在于后臺產品的字段信息會比較多。如何合理地設計這些字段，成為后臺產品設計的一個重要工作。本文將重點討論在后臺產品設計時，如何合理地進行字段設計，主要按照以下三個步驟來進行：
- 匯總字段；
- 處理字段；
- 設計字段
匯總字段
想要進行字段設計，最開始要做的是匯總字段。因為我們最終的目的是要把字段在頁面上展現出來，如果沒有字段，就無從談起字段設計?！扒蓩D難為無米之炊”說的就是這個意思。
那么問題來了，字段如何匯總？一般來說，字段來源有兩個：
1.業務需求。業務需求的字段是在跟業務部門調研時獲得的。
- 業務需求的字段獲取是一個逐漸完善的過程。因為產品經理跟業務部門接觸時，首先應該獲取的應該是整個業務流程（業務流程梳理會另寫文章來討論），是比較宏觀的，在這個過程中，獲取到的字段應該是粗略的；等將業務流程梳理完成后，進行詳細的業務流程設計時，會再細化涉及到的每個字段， 對每個字段的信息進行詳細記錄；
- 要盡量確保匯總的字段是全部的，沒有遺漏。以防上線使用后，發現問題，造成返工?？梢栽谧侄卧O計前和產出原型后，多跟業務部門的人確認，這樣可以避免這種情況發生。
- 匯總的字段要包括以下幾種信息：
- ?字段名稱
- 必填性質
- 輸入方式；記錄字段的數據如何輸入：手動輸入/選擇/自動生成/其他
- 手動輸入；如果是手動輸入方式，則要記錄對輸入值的格式要求以及輸入值范圍
- 選擇輸入；如果是選擇輸入方式，則要記錄是單選還是多選以及選項列表
- 是否需要單獨配置權限；有些字段比較特殊，如果只能某些人看到，則需要給這些字段單獨配置權限
- 字段提醒（說明）；字段的一些特殊說明，用來提醒操作者
- 其他；因為后臺產品跟業務密切相關，不同的業務可能包含的字段信息也不盡相同，因此可能也會有字段的其他信息需要記錄，這個需要具體問題具體分析。
2. 系統需求。系統需求的字段雖然業務部門不太關注或者感知不到，但是對系統來說確是很重要的，比如說數據的id、各個時間的記錄等，這些字段從業務部門很難獲取到，但卻是非常有用的信息，這些字段就要靠產品經理平時的經驗積累。
處理字段
通過匯總字段，我們將產品設計中涉及中的字段全部列了出來，接下來我們可以開始字段設計了嗎？答案還是不行，因為雖然我們將字段全部匯總了出來，但是這些字段可能比較繁多，比較混亂，因此這些字段還是要經過一系列的處理，才能開始設計中。
那么如何處理呢？在這里，我推薦一種方法，準確來說是四種策略——刪除、組織、隱藏、轉移。（有興趣的同學可以詳細閱讀《簡約至上——交互式設計四策略》這本書，里面對這四種策略進行了詳細的說明）
1、刪除
通過與業務調研，我們獲得了大量的字段。但是，這些字段都是必須的嗎？過多的字段不但頁面看起來非常臃腫，也會降低操作者的效率。這就需要我們對這些字段逐個進行分析，刪除冗余的字段，來簡化展現在頁面上的字段，使操作者的注意力集中到真正重要的內容上?？偨Y來說，需要刪除的字段有以下兩種：
實際業務沒有用的；在匯總字段部分，我們為了盡量將字段都考慮到，需要做加法，把可能涉及到的字段全部列出來；在這個階段，就需要做減法，刪除那些對實際業務沒有用的字段。
【舉例】：針對購票系統，我們需要記錄注冊用戶的個人信息，因此將“身份證號”、“手機號”、“體重”等信息列了出來，但是在這個階段，通過分析可以得出，“體重”字段對實際業務沒有用，因此可以刪除。當然，如果換作另一個系統，比如說體檢報告系統的個人信息，“體重”這個字段就是必須的了，因為這個字段跟業務息息相關?？傊?，分析字段是否有用，一定要結合實際業務場景。
系統自動生成的；有些字段雖然是業務關心的，但是并不需要人工填寫，如創建者賬號；或者是業務并不關心，但是對系統來說確實有用的，如記錄的id；這些會系統自動生成，因此這些字段不需要放到“頁面”中。注意：這里的頁面指的是新增/修改頁面，在產品設計中，這些系統自動生成的字段也要有所記錄，比如id會出現在數據列表頁面中，創建者賬號、創建時間、修改時間會記錄到操作日志頁面里?！皠h除”的意思更多意義上是指，這些字段不需要人工進行數據的輸入，并不是在頁面中不展示。
2、組織
在對匯總的字段進行篩選刪除后，接下來我們就可以對剩下的字段進行組織了，通過對字段進行組織，能夠使字段更加模塊化，看起來更加整齊，清晰易懂，操作效率也會提升。推薦以下兩種組織方式：
行為組織。這種方式是根據用戶某種行為觸發的頁面來對字段進行組織，該頁面上的字段都是為了讓用戶完成某種行為而組織到一起的。一般來說，這種組織方式是頁面級的組織方式，比較宏觀。
【舉例】：在購物平臺京東買東西時，如果用戶的行為是“修改個人信息”，那么觸發的頁面上的字段都是與個人信息有關的字段；如果用戶的行為是“結算”時，那么觸發的頁面上的字段是與訂單相關的字段信息。
歸類組織。這種方式是根據字段之間的關系來組織，將類別相同的字段放在一起，組成頁面上的一個分塊。與“行為組織”相比，“歸類組織”這種方式就比較微觀，重點關注對頁面上的字段再次進行組織?！九e例】：以12306為例，在注冊用戶的“個人信息”頁面，將“用戶名”、“姓名”、“性別”等字段組織為“基本信息”部分；將“手機號碼”、“固定電話”、“電子郵件”組織為“聯系方式”部分；
以上兩種是比較常見的組織方式，在實際工作中，可以根據具體的業務需求來選擇適合自己后臺的組織方式。
3、隱藏
有些字段雖然沒有被刪除，但是其重要性或者說使用頻率比較低，如果直接展示出來，不但會造成頁面信息過多，而且也會影響操作者效率。在這里，我們可以考慮使用隱藏的方式來處理這些字段，只保留一個開關，可以用來顯示這些隱藏的字段。
【舉例】：在使用QQ郵件發送郵件時，大部分情況下使用默認的字段就能滿足日常的需求，但是也有一些特殊需求，偶爾會使用到。QQ郵箱提供了一些特殊的選項隱藏了郵件編輯頁面底部并設置了開關，在有需要的時候打開開關，就可以使用。
還有一種情況，就是字段的展示依賴于前面字段的選擇，在前面字段沒有選擇之前，系統無法獲取下面的字段如何顯示。這種情況下，就可以先隱藏這些字段，等前面的字段選擇好后，隱藏的字段再顯示?！九e例】：在淘寶商家后臺發布寶貝時，“采購地”如果選擇“國內”，則不需要再進行其他選擇；如果選擇“海外及港澳臺”，那么就還需要選擇“國家/地區”和“庫存類型”。
4、轉移
在處理字段時，也可以對某些字段進行“轉移”操作，轉移的目的是充分利用各種資源來提高效率。推薦以下兩種轉移方式：
系統和人工的轉移。雖然系統通過計算機強大的功能可以替代人工完成很多復雜的工作，但是僅限于客觀的計算和判斷，一旦涉及到主觀的判斷，那么這部分工作就需要人工來進行。
【舉例】：在人力資源行業做招聘流程外包項目時，需要對潛在的項目進行多輪評估，每次評估都會記錄該潛在項目的一些信息，然后最后通過這些所有評估的信息來決定是否要立項。在這個過程中，系統可以對每次評估的信息進行記錄，也可以根據需求對數據進行一些處理，來產生更加通俗易懂的結論，但是最終是否要立項，還是要通過人工的判斷，因此這里面涉及到很多主觀因素，單純靠系統是無法判斷的。
設備的轉移。這種設備之間的轉移一般用在字段值的輸入上。
【舉例】：如果是一個快遞后臺管理系統，需要輸入快遞單號，如果讓人工在后臺直接輸入的話，會比較費時費力，而且還有一定幾率出錯。這種情況下，可以考慮讓系統接入掃描儀，使用掃描儀來對快遞的條形碼直接掃描，來錄制快遞單號，不但輸入速度提升，而且還減少了出錯的概率。雖然通過外接設備來掃描輸入，好處很多，但是還是建議同時保留手動輸入方式，以防止外接設備出故障時，還有另外的方式來完成工作。
以上是兩種常用的轉移方式，可能還會有其他的轉移方式，但無論是哪種方式，設計的初衷都是為了提升工作效率來設計的，這點一定要明確。
設計字段
在對字段進行處理之后，我們就可以進行設計字段的工作了。設計字段時，一般需要從以下幾個方面來考慮：
- 字段名稱。字段名稱要做到簡潔明了，字數不要太多，以免看上去繁瑣；同時讓用戶一眼就知道這個字段的作用是什么。
- 輸入方式。根據字段要輸入的值的特性，選擇適合它的輸入方式，可以有以下幾種輸入方式供選擇：
1、手動填寫。
適用于字段要輸入的值沒有固定選項的情形。
（1）手動填寫要對輸入的內容格式和輸入值范圍進行規定。這種方式也分為兩種：
- 一種是規定可輸入的最大字符數，這種情況可輸入的字符數是不固定的，只要不超過規定的最大字符數就好。【舉例】：用戶名設置，最多可輸入多少位；
- 另一種是規定輸入的字符位數，這種情況可輸入的字符是固定的?！九e例】：輸入手機號，都是11位。
（2）為了讓用戶在輸入時知曉輸入字符的限制規定，用戶體驗最好的是能實時顯示輸入了多少個字符和最多可輸入的字符數。
【舉例】：如淘寶發布寶貝時的“寶貝賣點”字段，能實時顯示已輸入的字符數和最多可輸入字符數。
（3） 在這里，我們將討論一種情形：那就是如果用戶輸入的字符超過了限制，應該怎么處理？是直接限制超過部分無法再繼續輸入；還是能繼續輸入，但是給出明確的超出提示？
對于這個問題，還是應該分情況來看待：
- 如果需要輸入的是手機號等固定位數的數字信息，那么就可以做成超過部分無法再繼續輸入，這樣可以防止用戶出錯；
- 如果需要輸入的是文字信息，那么就需要考慮到用戶可能會先輸入或復制多于規定的內容，然后再進行編輯到符合規定的字符數，這樣就需要讓用戶可以輸入多于規定的字符數，但是要在已輸入的字符數部分給予明顯的提示。
【舉例】：還是以淘寶的發布寶貝時的“寶貝賣點”字段為例，允許輸入超過最大限制的字符數，同時進行字數超過要求的提示，以此來引導用戶進行再次編輯。
2、單選。
這是一種非常常見的選擇輸入方式，將所有可能的選項列出來，讓用戶選擇。適用于要輸入的值已有固定選項的情況。
（1）選項之間是互斥的，也就是說，只能選擇其中的某一個選項。這種方式適用于該字段的值只有一種存在的情況。如“性別”、“最高學位”等。【舉例】：京東的“個人信息”頁面的“性別”字段就使用的單選輸入方式。
（2）使用單選這種輸入方式，還要考慮其默認值的問題?？梢詫⑵淠J值設置為被選擇概率最大的那個值，這樣可以在一定程度上減輕用戶選擇的成本。但是，這種情況要慎重使用，因為如果賦予了默認值，在遇到該字段的值未確認的情況下，數據統計時就會發生偏差。
3、多選。
這也是比較常見的一種選擇輸入方式。將所有可能的選項列出來，讓用戶選擇。適用于要輸入的值已有固定選項的情況。
（1）它與單選的不同在于，這種輸入方式可以進行多個選擇，適用于該字段的值有多種可能的情況。【舉例】：淘寶賣家“發布寶貝”頁面的“售后服務”可以選擇多個。
（2）使用多選這種輸入方式，默認不會勾選任何選項，除非是已經確認必須要選擇的選項。如上圖的“服務承諾”選項默認就是勾選狀態。
4、列表單選。
這種方式是通過列表的方式將選項列出來，然后用戶從列表中選擇所需的選項。適用于要輸入的值已有固定選項的情況。
（1）列表單選的選項之間是互斥的，只能選擇其中的某一個選項。這種方式適用于該字段的值只有一種存在的情況；與上面說的“單選”相似。
（2）雖然列表單選與單選實現的效果相似，但是它們的應用場景不同。單選適用于選項較少的情況，這種情況下就可以將選項全部列出來，讓用戶直接選擇，從而減少了用戶點擊下拉的這一步操作；而列表單選則適用于選項較多的情況，將選項放置到列表中，并通過拖動滾動條的方式來進行選擇，節省了頁面空間。
（3）雖然列表單選解決了選項過多占用頁面的問題，但是遇到選項過多的情況下，如何讓用戶從眾多的選項中快速查找到自己所需的選項呢？這里，推薦使用搜索選擇，即在列表框上方添加一個搜索框，與搜索內容匹配的選項會在列表實時展示，這樣就能極大提升用戶查找的效率?！九e例】：淘寶“發布寶貝”頁面的“品牌”支持搜索選項。
（4）列表單選的變形——多級聯動選擇，這種方式應用于需要進行多個層級的選擇，高層級的選項決定低層級的選項。【舉例】：當當網在新增收獲地址時“地區”字段就是多級聯動選擇。
（5）還有另外一種變形，將每一級的選項都直接展示出來，并在每一級上增加快速搜索框，這種方式適用于每一級選項都比較多的情況。【舉例】：淘寶“發布寶貝”時選擇寶貝的品類和品牌。
5、列表多選。
這種方式通過列表選擇的方式來進行多項選擇，適用于要輸入的值已有固定選項的情況。
- 列表多選和多選的區別在于，列表多選適用于選項比較多的情況，如果全部展示出來，會造成頁面比較臃腫。因此將選項做成列表選擇的形式。
- 因為列表選項會在拉動時看不到已選擇的選項，同時在失去焦點時列表選項消失，因此，還需要將已選擇的選項列出來，方便一眼就能看到選了哪些選項。
- 為了方便刪除已經選擇的選項，需要直接在列出來的選項上提供刪除功能，減少用戶操作的步驟。
【舉例】：如圖是大街網選擇城市的彈窗，已經選擇的“廈門”、“莆田”、“三明”會出現在已選擇的部分，同時，如果想刪除某一個已選擇的城市，可以直接點擊該城市右邊的刪除按鈕。
1、掃描輸入。
這在文章的前面有過介紹，可以通過掃描儀、攝像頭等來對二維碼、條形碼進行掃描來快速進行字段信息的輸入，這種方式比起手動輸入來，不但減少了人工操作失誤，效率有了很大地提升。唯一要注意的是，在支持掃描輸入的同時，也要支持手動輸入，以防掃描設備失效時，還有其他的方式來完成工作?！九e例】：現在很火的共享單車，就同時支持掃描二維碼和手動輸入車號來解鎖。
2、必填性質。
在設計字段時，有些字段是必須要填的，而有些字段是選填的，要對字段的必填性質進行說明。如何獲知字段是否是必填項呢？這就需要在整理字段階段時，和業務方確認好。確認好之后，在這一步，就要將必填的字段特殊標記出來。最常用的標記方式是在字段前方加上紅色*號?！九e例】：淘寶“發布寶貝”頁面的“寶貝類型”、“寶貝標題”就是必填項。
3、字段提醒（說明）。
有些字段有一些特別的輸入規則或者限制，這個需要對用戶進行提醒，防止用戶沒有看到或者忘掉這些規則或限制從而造成返工。具體來說，一般有以下三種提醒方式：
（1）在輸入框還未輸入內容時顯示提醒內容。這種方式的好處是提醒內容不會占用額外的空間；而且在輸入框內進行提示，能夠讓用戶在輸入時就看到提醒，“觸達率”很高?！九e例】：微信公眾平臺的“新建圖文消息”頁面的“標題”、“作者”、“正文”就使用了這種方式。
不好的地方在于在開始輸入后，提醒內容會消失；如果提醒的內容過多時，用戶無法完全記住。因此這種提醒方式適用于提醒內容不多或者容易理解的情況。
（2）將字段的提醒內容直接展示出來。這種方式的好處在于提醒內容會一直存在，任何字段都可以使用?！九e例】：微信公眾平臺在設置“關鍵詞自動回復”時，對“規則名稱”的字數限制就使用了這種提醒方法。淘寶在發布寶貝時的“寶貝賣點”、“寶貝屬性”字段的提醒也使用了這種方式。
不好的地方在于這種方式在提醒內容很多的情況下，會非常占用頁面空間，甚至喧賓奪主。因此，這種方式適用于提醒內容不多，且提醒內容比較重要的情況。
（3）將字段的提醒內容隱藏起來，只保留一個簡潔的入口在查看時需要進行額外的操作。這種方式的好處是在遇到提醒內容非常多的情況下，會很節省頁面空間；不好的地方在于提醒內容過于隱秘；用戶查看提醒還需要額外的操作成本。
【舉例】：淘寶在發布寶貝時的“材質成分”字段的提醒就使用了這種方式。點擊“填寫須知”會新頁面跳轉到具體的材質成分填寫的標準與規范頁面。
以上說的三種字段提醒的顯示方式，各有利弊。在具體應用中，要考慮到具體的使用場景。有的時候可以考慮結合使用。【舉例】：淘寶在“發布寶貝”頁面的“主圖視頻”字段既顯示了比較重要的幾點提醒，又留了一個入口，來讓用戶查看完整的教程。
以上，就是根據自己這幾年的經驗總結出來的字段設計的一些心得，由于本人水平及經驗有限，可能有的地方說的不是很完善，希望大家多多拍磚，感謝！
本文由 @?baluwaker 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自unspalsh，基于CC0協議
請問系統字段有什么作用呢？小白誠心請教~~~
感謝科普與干貨~
總結的很全面，干貨，謝謝
菜鳥學習了，很有用！
總結得到位，我們系統也正面臨字段模塊設計重組，文章基本涵蓋了幾種基礎類型的字段設計規范。我想還補充一樣，字段值的設置唯一性，也有不少用處。
大胸弟，蟹蟹你喲 ??
獲益匪淺，正在設計后臺焦頭爛額，多謝樓主分享。
感謝支持！后續會持續更新
總結得很棒，我現在也是主要負責后臺產品，學習了~
謝謝，互相學習
都是干貨呀 ??
多謝支持，后續會持續更新后臺產品相關的內容
非常抱歉，這篇文章排版有問題。如果大家看著有點亂，可以查看我的公眾號，里面也有這篇文章。我會盡力跟運營編輯同學溝通，把排版修正 ??
。