后臺產(chǎn)品:字段設(shè)計
這篇文章將通過“匯總字段”、“處理字段”、“設(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ā)生。
- 匯總的字段要包括以下幾種信息:
- ?字段名稱
- 必填性質(zhì)
- 輸入方式;記錄字段的數(shù)據(jù)如何輸入:手動輸入/選擇/自動生成/其他
- 手動輸入;如果是手動輸入方式,則要記錄對輸入值的格式要求以及輸入值范圍
- 選擇輸入;如果是選擇輸入方式,則要記錄是單選還是多選以及選項(xiàng)列表
- 是否需要單獨(dú)配置權(quán)限;有些字段比較特殊,如果只能某些人看到,則需要給這些字段單獨(dú)配置權(quán)限
- 字段提醒(說明);字段的一些特殊說明,用來提醒操作者
- 其他;因?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é)議
請問系統(tǒng)字段有什么作用呢?小白誠心請教~~~
感謝科普與干貨~
總結(jié)的很全面,干貨,謝謝
菜鳥學(xué)習(xí)了,很有用!
總結(jié)得到位,我們系統(tǒng)也正面臨字段模塊設(shè)計重組,文章基本涵蓋了幾種基礎(chǔ)類型的字段設(shè)計規(guī)范。我想還補(bǔ)充一樣,字段值的設(shè)置唯一性,也有不少用處。
大胸弟,蟹蟹你喲 ??
獲益匪淺,正在設(shè)計后臺焦頭爛額,多謝樓主分享。
感謝支持!后續(xù)會持續(xù)更新
總結(jié)得很棒,我現(xiàn)在也是主要負(fù)責(zé)后臺產(chǎn)品,學(xué)習(xí)了~
謝謝,互相學(xué)習(xí)
都是干貨呀 ??
多謝支持,后續(xù)會持續(xù)更新后臺產(chǎn)品相關(guān)的內(nèi)容
非常抱歉,這篇文章排版有問題。如果大家看著有點(diǎn)亂,可以查看我的公眾號,里面也有這篇文章。我會盡力跟運(yùn)營編輯同學(xué)溝通,把排版修正 ??
。