B端產(chǎn)品日記——表單設(shè)計(jì)

3 評論 21631 瀏覽 133 收藏 13 分鐘

編輯導(dǎo)語:表單在很多工作和項(xiàng)目中都會用到,在一個(gè)項(xiàng)目中,會涉及到大量的數(shù)據(jù)、信息等等,這時(shí)候用表單進(jìn)行記錄是很重要的;本文作者詳細(xì)的介紹了在B端產(chǎn)品設(shè)計(jì)的工程中運(yùn)用到的表單設(shè)計(jì),我們一起來看一下。

人們眼中的天才之所以卓越非凡,并非天資超人一等,而是付出了持續(xù)不斷的努力;1萬小時(shí)的錘煉是任何人從平凡變成世界級大師的必要條件?!窭峦枴懂愵悺?/p>

在過去幾個(gè)月中,筆者一直在B端審核系統(tǒng)、流程管理系統(tǒng)、業(yè)務(wù)管理后臺、電銷系統(tǒng)中來回游走;下面將工作中積累的一些經(jīng)驗(yàn)和思考梳理匯總,希望能夠輸出為有用的分享,得到更多的前輩指教與更多的同道交流。

初遇表單這個(gè)問題,往往會直接跳過,但是最近幾次B端產(chǎn)品設(shè)計(jì)過程中,卻深深感受到表單設(shè)計(jì)的痛苦。

現(xiàn)實(shí)情況是——絕大多數(shù)的企業(yè)員工往往把時(shí)間埋沒在海量的表單中。

一、表單的使用場景

表單在B端產(chǎn)品中,是最為常見的一種信息展現(xiàn)方式;不論是傳統(tǒng)行業(yè)還是泛互聯(lián)網(wǎng)行業(yè)的產(chǎn)、銷、供、管等場景中,都涉及到大量的業(yè)務(wù)信息和數(shù)據(jù),表單是最為簡單直觀的表現(xiàn)載體。

表單的概念并非互聯(lián)網(wǎng)原創(chuàng),在傳統(tǒng)行業(yè)中,紙質(zhì)化的表單就占據(jù)了非常重要的工具地位;B端產(chǎn)品通過為表單增加屬性,使得一個(gè)個(gè)任務(wù)表單能夠在動作——狀態(tài)機(jī)中流轉(zhuǎn),就能夠?qū)崿F(xiàn)業(yè)務(wù)的線上化開展和管理。

二、表單的基本結(jié)構(gòu)

B端產(chǎn)品的表單,常常由以下三部分構(gòu)成:列表、功能和搜索。

表單設(shè)計(jì)屬于B端產(chǎn)品頁面設(shè)計(jì)中的一種,在B端產(chǎn)品頁面中,常見的信息元素都可以劃分為:展示項(xiàng)和操作項(xiàng)。

在表單中,列表項(xiàng)常常被認(rèn)為是展示項(xiàng),功能和搜索歸類為操作項(xiàng);其中搜索又可以理解為一類特殊的操作——不對表單信息產(chǎn)生影響的獨(dú)立操作。

1. 列表

列表是承載表單信息的主體,單一列表常展示某種狀態(tài)或某幾種狀態(tài)的數(shù)據(jù)。

設(shè)計(jì)時(shí)注意以下三點(diǎn):

1)提取信息展示的維度

列表由字段構(gòu)成,但并非所有的信息字段都需要在列表中進(jìn)行展示。

原則上,設(shè)計(jì)時(shí)需要調(diào)研并確定:業(yè)務(wù)上針對當(dāng)前表單中,需要關(guān)注的信息維度。

例如在質(zhì)檢場景中,產(chǎn)品批次、抽樣數(shù)量、業(yè)務(wù)員信息等,屬于質(zhì)檢表單中應(yīng)該呈現(xiàn)的信息;而其他更多與質(zhì)檢業(yè)務(wù)無關(guān)的產(chǎn)品屬性則不需要體現(xiàn)和關(guān)注。

列表只展示當(dāng)前頁面使用者所需關(guān)注信息的最小集合——尤其是當(dāng)內(nèi)容不同時(shí)會引起用戶不同操作的字段,應(yīng)該給出更高的展示優(yōu)先級。

2)注意排序條件和分頁

常見的列表排序維度有:時(shí)間維度、處理優(yōu)先級維度等。

時(shí)間維度常常使用的是列表中數(shù)據(jù)生成的時(shí)間,例如訂單列表中,可以依據(jù)訂單生成的時(shí)間順序展示訂單;這種設(shè)計(jì)便于用戶先處理創(chuàng)建時(shí)間早的任務(wù),符合現(xiàn)實(shí)中先到先處理的邏輯,避免壓單或超時(shí)。

處理優(yōu)先級維度,是指系統(tǒng)依據(jù)一些限定條件,為列表任務(wù)增加了優(yōu)先級屬性,例如處理人員相同時(shí),可以為vip客戶的訂單提高處理優(yōu)先級,在列表中較前的順序展示,保證先被受理,提升客戶體驗(yàn)。

3)設(shè)計(jì)技巧

列表表頭除了展示字段名稱信息之外,本身也可以擴(kuò)展一些排序的屬性,例如當(dāng)列表默認(rèn)為依據(jù)“創(chuàng)建時(shí)間”順序排列時(shí),可以增加一個(gè)這樣的設(shè)計(jì):點(diǎn)擊“創(chuàng)建時(shí)間”的列名,即可將列表切換為倒序排列。

這一技巧可以很好的支持用戶查看最新的列表數(shù)據(jù),簡單便捷且沒有理解成本,在實(shí)際業(yè)務(wù)中非常有用。

此外,當(dāng)列表需展示的字段較多時(shí),也可以對相似的字段進(jìn)行合并展示,例如:總處理量、待處理量和已處理量,這三個(gè)相似且有關(guān)聯(lián)的字段,可以合并展示;在字段名中通過“/”分隔三個(gè)字段名,在列表數(shù)據(jù)中展示為”3000/1500/1500″,這樣可以有效地縮小列表寬度、避免字段過多帶來的雜亂感。

如果擔(dān)心字段合并展示會引起用戶誤解,還可以在字段名后方展示“?”的提示圖標(biāo),鼠標(biāo)懸浮即展示字段信息說明,以達(dá)到消除誤解的目的。

2. 功能

當(dāng)表單中通過列表展示了用戶需要關(guān)注和處理的信息后,還需要依賴一些表單功能,幫助和支持用戶完成業(yè)務(wù)操作,實(shí)現(xiàn)B端工單正向、逆向以及異常狀態(tài)下的處理流轉(zhuǎn)。

1)列表功能圍繞

增、刪、改,3個(gè)方面設(shè)計(jì)。

常見的表單功能有:查看詳情、處理、駁回/刪除、轉(zhuǎn)單、掛起、抽取/獲取、追加數(shù)據(jù)等;可以根據(jù)用戶在當(dāng)前表單期望完成的動作進(jìn)行選擇,設(shè)計(jì)時(shí),注意關(guān)鍵操作的二次確認(rèn)機(jī)制,從設(shè)計(jì)角度降低用戶誤操作的概率,避免關(guān)鍵操作出現(xiàn)錯(cuò)誤給業(yè)務(wù)帶來的負(fù)面影響。

2)除了將表單功能獨(dú)立于列表之外全局展示,還可以將功能與列表合并,在每一行列表數(shù)據(jù)后方展示對應(yīng)可以進(jìn)行的操作功能。

這種設(shè)計(jì)適合于同一表單中包含多種子狀態(tài)的任務(wù),且需要對不同子狀態(tài)任務(wù)進(jìn)行不同操作的業(yè)務(wù)場景。通過對功能生效范圍的調(diào)整,靈活支持業(yè)務(wù)操作。

3. 搜索

搜索其實(shí)是對列表數(shù)據(jù)的查找,實(shí)際業(yè)務(wù)中,列表數(shù)據(jù)量級往往比較大,增設(shè)搜索功能,可以幫助用戶快速找到目標(biāo)數(shù)據(jù)。

1)搜索項(xiàng)的設(shè)計(jì)原則

在使用中,索引本身應(yīng)該是0思考成本的,否則就失去了索引的核心價(jià)值。

圍繞這一點(diǎn),有兩個(gè)設(shè)計(jì)時(shí)的原則:寧少勿多和高頻前置——即不要揣測用戶需要,而是實(shí)際調(diào)研,只設(shè)置有限的、會被真實(shí)使用的搜索項(xiàng),并且最常使用的展示位置盡量靠前。

在搜索項(xiàng)的設(shè)計(jì)中,產(chǎn)品經(jīng)理應(yīng)當(dāng)克制,數(shù)量超過10個(gè)的搜索項(xiàng),使用起來就十分困難了。

2)當(dāng)搜索項(xiàng)不可避免得比較多時(shí),可以進(jìn)行分類展示,降低尋找成本

常用的有兩種分類方式:

①信息維度

常見的有列表信息自有屬性維度的分類和任務(wù)屬性維度的分類,例如:

  • 訂單信息自有的屬性包括:客戶姓名、產(chǎn)品名稱/編號、商品類別、價(jià)格范圍、訂單創(chuàng)建時(shí)間等;
  • 任務(wù)屬性則包括:訂單處理狀態(tài)、處理人、處理時(shí)間、處理結(jié)果等。

②條件類別維度

例如可以按照時(shí)間類、名稱類、狀態(tài)類等將訂單列表的搜索項(xiàng)分為:

  • 訂單創(chuàng)建時(shí)間、訂單失效時(shí)間、訂單處理時(shí)間;
  • 客戶姓名、處理人姓名、商家名稱;
  • 訂單狀態(tài)、商品狀態(tài)、訂單處理狀態(tài)等。

任何信息都是存在信息結(jié)構(gòu)的,產(chǎn)品經(jīng)理需要發(fā)現(xiàn)這些結(jié)構(gòu),并借助信息自有的結(jié)構(gòu)進(jìn)行組織設(shè)計(jì),讓信息本身說話。

3)兩個(gè)注意要點(diǎn):

  • 注意不同搜索條件之間的關(guān)聯(lián)關(guān)系,可以利用條件聯(lián)動,縮小用戶選擇的范圍;例如必要時(shí),產(chǎn)品分類和產(chǎn)品編號就可以設(shè)計(jì)為聯(lián)動。
  • 搜索條件之間是交集的關(guān)系,注意不要邏輯重復(fù),相同搜索結(jié)果的條件,只保留一個(gè)即可;例如產(chǎn)品名稱和編號。

4. 基本結(jié)構(gòu)的自定義延伸

在商業(yè)B端產(chǎn)品中,可以通過擴(kuò)展自定義配置項(xiàng),來適配不同企業(yè)、部門、業(yè)務(wù)的需要。

必要時(shí),可以將表單列表字段、搜索項(xiàng)和操作項(xiàng)都設(shè)計(jì)為可配置,支持不同用戶在一定范圍內(nèi)選擇自己需要的信息、搜索條件;甚至可以自定義配置搜索項(xiàng)順序,以及決定操作項(xiàng)的停/啟用。

再延伸一些,可以將搜索項(xiàng)展示順序設(shè)計(jì)為依據(jù)使用頻率自動調(diào)整。

當(dāng)然,在使用自定義設(shè)計(jì)中,要慎重而行,調(diào)研清楚必要性再做,避免殺雞用了宰牛刀。

三、表單的權(quán)限設(shè)計(jì)

除了上述基本結(jié)構(gòu)外,還需要理清表單權(quán)限。在權(quán)限設(shè)計(jì)中,常通過兩個(gè)維度來考量:功能權(quán)限和數(shù)據(jù)權(quán)限。

B端產(chǎn)品的權(quán)限設(shè)計(jì)是相對獨(dú)立也比較重要的一個(gè)模塊,基于整個(gè)系統(tǒng)的權(quán)限體系。

在表單權(quán)限設(shè)計(jì)中,應(yīng)注意:

1. 表單中功能的單一權(quán)限控制

功能項(xiàng)權(quán)限控制中,注意權(quán)限劃分的粒度,配套使用的一組功能,可以通過一個(gè)權(quán)限統(tǒng)一控制,避免權(quán)限冗余,降低權(quán)限配置的復(fù)雜度。

例如:工單掛起與取消掛起,就可以統(tǒng)一控制。

2. 列表和搜索項(xiàng)的數(shù)據(jù)權(quán)限

通過數(shù)據(jù)權(quán)限區(qū)分不同主體、不同部門、不同業(yè)務(wù)線的列表查看范圍,注意搜索時(shí),也應(yīng)保證數(shù)據(jù)權(quán)限劃分有效,避免出現(xiàn)搜索時(shí),列表查看范圍擴(kuò)大了的數(shù)據(jù)泄露風(fēng)險(xiǎn)。

四、關(guān)于表單設(shè)計(jì)的PRD如何寫

常見的表單設(shè)計(jì)PRD組織方式有兩種:

1. 針對單一表單逐項(xiàng)說明

針對單一表單,通過逐一說明列表、功能、搜索項(xiàng)和權(quán)限來組織PRD結(jié)構(gòu),可以清晰全面地將表單內(nèi)容和邏輯描述清楚。

2. 多個(gè)同類表單,可以合并說明

實(shí)際工作中,由于常依據(jù)任務(wù)狀態(tài)對表單進(jìn)行拆分,涉及到一組表單的批量新增。

這種場景下,一組表單需展示的信息往往比較相似,在輸出PRD時(shí),可以先統(tǒng)一說明共性,再突出說明表單間的差異點(diǎn)。

例如:可以先統(tǒng)一說明該組表單中共有的列表字段、功能項(xiàng)和搜索項(xiàng),再針對有差異的表單單獨(dú)說明特有功能——如此,可以提高PRD的輸出效率,避免重復(fù)信息分散PRD讀者的注意力,便于技術(shù)人員理解和把控需求。

 

本文由 @非魚 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 關(guān)于表單的PRD編寫,用python開發(fā)時(shí),建議是不是可以結(jié)合研發(fā)看的更方便的形式,在PRD中寫明表單中的字段名稱、描述、類型、約束、創(chuàng)建、修改。
    字段名稱:就是表單中某個(gè)字段的名稱
    描述:對于這個(gè)字段的描述,比如某個(gè)字段是【附件】,那么描述就可以針對這個(gè)字段的一些說明和限制,例如只能上傳3個(gè)附件,每個(gè)附件大小不超過10m
    類型:這個(gè)字段的類型,包括string,select string,number,date,圖片,附件等
    約束:unique或者不是非unique,這個(gè)字段是不是唯一不可重復(fù)值,比如工單編號等字段
    創(chuàng)建:required或者optional,必填或者非必填
    修改:optional或者不能修改

    這樣子后端就很清楚每個(gè)表單有什么內(nèi)容,并且產(chǎn)品對其的要求是什么,具體的表現(xiàn)形式可再由UI、前端和產(chǎn)品決定。

    來自浙江 回復(fù)
  2. 經(jīng)常更新呀

    來自湖北 回復(fù)
  3. nice

    來自上海 回復(fù)