編輯導(dǎo)讀：B端常見(jiàn)的頁(yè)面類型包括工作臺(tái)、數(shù)據(jù)看板、表單、表格等。本文作者圍繞B端產(chǎn)品的查詢頁(yè)面展開(kāi)分析，希望對(duì)你有幫助。

一、B端常見(jiàn)典型頁(yè)面

B端常見(jiàn)的頁(yè)面類型包括工作臺(tái)、數(shù)據(jù)看板、表單、表格等。每種頁(yè)面類型都很值得研究，我們掌握了幾種常見(jiàn)頁(yè)面類型后就能更好設(shè)計(jì)出符合需求的頁(yè)面了。

1. 工作臺(tái)

概念：

工作臺(tái)是整個(gè)系統(tǒng)的首頁(yè)，登錄完成后的第一個(gè)頁(yè)面就是工作臺(tái)頁(yè)面。工作臺(tái)主要是為了讓用戶快速了解掌握自己在系統(tǒng)中的整體任務(wù)情況和待辦事項(xiàng)，以及一些數(shù)據(jù)統(tǒng)計(jì)。

使用場(chǎng)景：

1.為用戶提供待辦事項(xiàng)、日歷、任務(wù)情況等方面的信息，讓用戶對(duì)自己工作情況以及接下來(lái)的工作有掌握和了解

2.為用戶提供相關(guān)高頻功能的操作快捷入口

3.查看項(xiàng)目任務(wù)的總體數(shù)據(jù)情況，展示整體數(shù)據(jù)指標(biāo)和完成情況

設(shè)計(jì)原則：

1.符合用戶心智模型-按照業(yè)務(wù)優(yōu)先級(jí)和重要程度排列信息

2.內(nèi)容不宜太多，一屏半能夠展示完最好。挑選重要的信息展示

3.圖表顏色不宜過(guò)多，適當(dāng)進(jìn)行視覺(jué)降噪

2. 數(shù)據(jù)看板

概念：

數(shù)據(jù)看板是系統(tǒng)為用戶提供數(shù)據(jù)分析統(tǒng)計(jì)的查看頁(yè)面，該頁(yè)面承載了用戶對(duì)系統(tǒng)以及業(yè)務(wù)操作所關(guān)心的數(shù)據(jù)指標(biāo)，通過(guò)搭配各類統(tǒng)計(jì)圖形通過(guò)時(shí)間維度、空間展示數(shù)據(jù)。

使用場(chǎng)景：

1.為用戶提供數(shù)據(jù)統(tǒng)計(jì)、查看的看板，幫助用戶了解整體的業(yè)務(wù)數(shù)據(jù)，是系統(tǒng)的數(shù)據(jù)可視化平臺(tái)

2.部分場(chǎng)景可通過(guò)展示某項(xiàng)業(yè)務(wù)的數(shù)據(jù)的方式來(lái)點(diǎn)擊圖形進(jìn)入功能操作，是一種特殊的功能快捷入口。

設(shè)計(jì)原則：

1.表達(dá)數(shù)據(jù)需要選擇正確的數(shù)據(jù)圖形進(jìn)行展示，避免出現(xiàn)辛普森悖論。例如需要展示兩組數(shù)據(jù)之間的變化趨勢(shì)，用折線圖會(huì)比柱狀圖更加合適準(zhǔn)確。

2 .統(tǒng)計(jì)圖形避免使用過(guò)多的顏色。同一個(gè)頁(yè)面上盡量避免使用過(guò)多的顏色，建議不超多5種，過(guò)多的顏色會(huì)令用戶在識(shí)別信息上產(chǎn)生困難。

3. 表單

概念：

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。用通俗易懂的話來(lái)說(shuō)，就是我們看到的頁(yè)面需要填寫較多相關(guān)信息的頁(yè)面，都叫做表單，如下圖：

使用場(chǎng)景：

負(fù)責(zé)采集用戶的數(shù)據(jù)。當(dāng)需要采集用戶數(shù)據(jù)的時(shí)候，使用表單搜集用戶填寫的內(nèi)容。

設(shè)計(jì)原則：

1.從設(shè)計(jì)的范圍上來(lái)看，包含了兩個(gè)方面：

表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。

表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕

2.標(biāo)簽與輸入框的位置關(guān)系選擇取決于表單希望通過(guò)用戶進(jìn)行何種操作。常見(jiàn)的位置關(guān)系有左標(biāo)簽、頂部標(biāo)簽、行內(nèi)標(biāo)簽。

4. 查詢表格頁(yè)面

概念：

表格適用于展示一些條例的細(xì)節(jié)，比較說(shuō)充值/消費(fèi)的流水、創(chuàng)建多條廣告推廣計(jì)劃后的效果數(shù)據(jù)陳列等等。

使用場(chǎng)景：

只要用戶有需要找到屏幕中任何相同元素的需求，都可以用到篩選，常見(jiàn)的使用情況有：

1.數(shù)據(jù)列表、卡片列表等任何列表類型的頁(yè)面，用于篩選可見(jiàn)項(xiàng)目的數(shù)量。

2.分析類型的屏幕和儀表板，用于篩選圖表中包含數(shù)據(jù)的范圍或類型（時(shí)間范圍、受眾類型、顯示的指標(biāo)、價(jià)值范圍等）。

設(shè)計(jì)原則：

1.表格可細(xì)分為查看類表格、編輯類表格，每一類的表格所對(duì)應(yīng)的用戶目標(biāo)不同，需要針對(duì)不同的目標(biāo)進(jìn)行差異化設(shè)計(jì)

2.表格列對(duì)齊方式要注意。數(shù)字類的一般是左對(duì)齊，價(jià)格是右對(duì)齊。價(jià)格右對(duì)齊是方便比較金額數(shù)的多少，從左邊突出的位數(shù)就能一眼看到哪個(gè)是最多與最少。如果價(jià)格一般固定在幾位數(shù)的話，也可以考慮左對(duì)齊。

二、B端查詢頁(yè)面類型

B端系統(tǒng)中最常見(jiàn)的就是查詢界面，基本上覆蓋了系統(tǒng)中90%的場(chǎng)景，通常B端都會(huì)與大量數(shù)據(jù)和業(yè)務(wù)產(chǎn)生強(qiáng)關(guān)聯(lián)性。B端查詢大致可分為以下6種類型。

1. 模糊查詢+操作按鈕

由模糊搜索框、功能操作按鈕和數(shù)據(jù)組成。適用于數(shù)據(jù)列不太多，輕搜索的頁(yè)面場(chǎng)景。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：能夠根據(jù)用戶的關(guān)鍵詞快速找出所有匹配的內(nèi)容

缺點(diǎn)：

1. 查詢位置不夠突出，容易被用戶忽略；
2. 針對(duì)全局?jǐn)?shù)據(jù)關(guān)鍵詞進(jìn)行搜索，顆粒度較粗。

2. 多查詢條件

由多個(gè)查詢條件（超過(guò)2個(gè)）組成查詢區(qū)域，適用于數(shù)據(jù)列多且查詢功能使用較多的頁(yè)面，需要精準(zhǔn)設(shè)置多個(gè)查詢條件篩選出數(shù)據(jù)進(jìn)行查看和操作。

在設(shè)計(jì)該類型頁(yè)面的時(shí)候查詢條件需要根據(jù)業(yè)務(wù)和用戶的使用習(xí)慣進(jìn)行設(shè)置，不可將全部的列頭都放入查詢條件，具體的放置順序和個(gè)數(shù)需要根據(jù)用戶的實(shí)際適用場(chǎng)景去判斷，并不是一股腦全部丟給用戶去用。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

用戶有明確搜索需求下，能夠根據(jù)用戶的各類關(guān)鍵詞快速找出所有匹配的內(nèi)容，顆粒度很細(xì)。

缺點(diǎn)：

需要匹配多條件下的數(shù)據(jù)，數(shù)據(jù)量大的情況下查詢可能需要花費(fèi)一定等待時(shí)間。

3. 模糊查詢

搜索框和產(chǎn)品logo組成，通常此類頁(yè)面搜索框放大且居中顯示。模糊查詢頁(yè)面適用于強(qiáng)搜索的頁(yè)面，該頁(yè)面使用場(chǎng)景為專注搜索操作本身，例如百度首頁(yè)。簡(jiǎn)約的元素告知用戶此頁(yè)面的作用就是用來(lái)搜索。

在一些側(cè)重搜索類型的產(chǎn)品中，如：知識(shí)庫(kù)、操作指南、圖書查詢等頁(yè)面中經(jīng)常用到。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

搜索入口或產(chǎn)品使用，搜索功能很突出明確；

缺點(diǎn)：

無(wú)任何產(chǎn)品使用經(jīng)驗(yàn)的新手可能不知所措，建議頁(yè)面搭配其他搜索關(guān)鍵詞或操作指引。

4. 帶頁(yè)簽的查詢

頁(yè)簽對(duì)數(shù)據(jù)進(jìn)行了分類，查詢區(qū)域在頁(yè)簽上方說(shuō)明查詢條件對(duì)下方多頁(yè)簽同時(shí)生效，查詢條件需要同時(shí)對(duì)以下兩個(gè)頁(yè)簽進(jìn)行篩選。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

針對(duì)分類頁(yè)簽進(jìn)行的搜索，在分類的場(chǎng)景下都可查看搜索完成的結(jié)果；

缺點(diǎn)：

搜索是針對(duì)分類下的，如果只需要在某一類下搜索會(huì)造成資源浪費(fèi)并且時(shí)間會(huì)更長(zhǎng)

5. 高級(jí)搜索

除了提供模糊搜索條件外，還搭配了高級(jí)搜索器使用。高級(jí)搜索場(chǎng)景是對(duì)于基礎(chǔ)搜索的一種補(bǔ)充，針對(duì)在模糊搜索基礎(chǔ)上，進(jìn)行補(bǔ)充詳細(xì)篩選的一種方式。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

高級(jí)搜索針是對(duì)模糊搜索的一種補(bǔ)充，可對(duì)符合某一類條件下的目標(biāo)進(jìn)行篩選；

缺點(diǎn)：

開(kāi)發(fā)工作量稍大，需要在篩選中進(jìn)行篩選。

6. 自定義搜索條件

自定義搜索條件是一種比較特殊的條件設(shè)置方式，是系統(tǒng)在提供2-3個(gè)基礎(chǔ)搜索條件外，用戶可根據(jù)自身需要自己設(shè)置其他的搜索條件展示或隱藏，并可根據(jù)此設(shè)置方式保存為查詢方案，方便以后使用。

自定義搜索條件方式適合強(qiáng)搜索場(chǎng)景，用戶可針對(duì)自身需求自定義搜索條件，保證自身處理業(yè)務(wù)高效性。

方案優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

高效便捷，用戶可自定義搜索；

缺點(diǎn)：

開(kāi)發(fā)工作量大，需要條件多個(gè)展示和ID保存多個(gè)方案。

三、如何設(shè)計(jì)查詢方案

1. 選擇合適的查詢類型

在日常工作中設(shè)計(jì)師同學(xué)會(huì)遇到設(shè)計(jì)查詢頁(yè)面的時(shí)候，在接到這個(gè)任務(wù)的時(shí)候我們需要首先思考這個(gè)頁(yè)面適合使用哪一種查詢方案類型，然后再進(jìn)行細(xì)節(jié)設(shè)計(jì)，所以這就要求我們對(duì)以上的六種查詢方案以及各自的特點(diǎn)十分了解。那么我們?nèi)绾芜x擇合適的查詢類型呢？

1）頁(yè)面類型

我們需要確定頁(yè)面的類型，是數(shù)據(jù)維護(hù)新增還是數(shù)據(jù)操作類，這兩種類型的頁(yè)面對(duì)于查詢數(shù)據(jù)的功能依賴程度是不一樣的。

1.數(shù)據(jù)操作類

對(duì)于數(shù)據(jù)操作類型的頁(yè)面來(lái)說(shuō)更加依賴查詢功能，也就是說(shuō)數(shù)據(jù)操作類的頁(yè)面需要更加精細(xì)的搜索的頁(yè)面，因?yàn)榻酉聛?lái)用戶需要根據(jù)設(shè)置的各種精確搜索條件篩選出符合業(yè)務(wù)條件的一批數(shù)據(jù)進(jìn)行批量操作。

2.數(shù)據(jù)維護(hù)類

數(shù)據(jù)維護(hù)類是對(duì)一批數(shù)據(jù)進(jìn)行新增和維護(hù)，所以該頁(yè)面的核心目標(biāo)是新增數(shù)據(jù)，對(duì)于新增數(shù)據(jù)來(lái)說(shuō)，搜索舊數(shù)據(jù)變成了低頻的使用需求，這時(shí)候精細(xì)搜索功能對(duì)于該頁(yè)面就不是特別有必要。

這部分內(nèi)容在設(shè)計(jì)師對(duì)業(yè)務(wù)不是足夠了解的時(shí)候，可能會(huì)拿捏不準(zhǔn)，這個(gè)時(shí)候可以找產(chǎn)品經(jīng)理或者需求人員進(jìn)行確認(rèn)這塊的功能設(shè)計(jì)。因?yàn)檫@部分的內(nèi)容直接影響了開(kāi)發(fā)的工作量和設(shè)計(jì)的頁(yè)面布局。

2）數(shù)據(jù)量

選擇何種查詢方式還需要看整體的數(shù)據(jù)量。例如同樣都是表格，表格1有5列，表格2有12列，而且表格2數(shù)據(jù)條數(shù)可能上萬(wàn)條，這時(shí)候針對(duì)表格1的小規(guī)模數(shù)據(jù)可采用簡(jiǎn)單的查詢方式，而對(duì)于表格2的大規(guī)模數(shù)據(jù)，或許簡(jiǎn)單的查詢方式無(wú)法滿足用戶對(duì)于找數(shù)據(jù)的需求，可能就需要設(shè)計(jì)更加復(fù)雜的查詢方案。

2. 設(shè)計(jì)方案的知識(shí)儲(chǔ)備

用戶目標(biāo)：

我們?cè)谠O(shè)計(jì)任何頁(yè)面或功能的時(shí)候都應(yīng)該明確用戶的使用場(chǎng)景和目標(biāo)，這是我們?cè)O(shè)計(jì)的初衷。設(shè)計(jì)師是通過(guò)各種方式來(lái)解決用戶的問(wèn)題的。作為一個(gè)交互設(shè)計(jì)師。在我們接到需求之后，首先需要弄清楚的是產(chǎn)生需求的業(yè)務(wù)背景是什么。其次是基于業(yè)務(wù)背景了解產(chǎn)品的目標(biāo)是什么。最后弄清楚產(chǎn)品的用戶人群有哪些，用戶目標(biāo)是哪些。

在設(shè)計(jì)查詢頁(yè)面的時(shí)候，我們需要明確用戶的目標(biāo)是什么。常見(jiàn)的查詢頁(yè)用戶目標(biāo)有：快速關(guān)鍵詞搜索、目標(biāo)匹配搜索和條件批量操作。

了解了設(shè)計(jì)目標(biāo)后才能根據(jù)目標(biāo)去選擇使用何種查詢區(qū)域，每一種查詢區(qū)域都有不同的使用場(chǎng)景，對(duì)應(yīng)了不同的設(shè)計(jì)目標(biāo)，需要權(quán)衡各方面因素選擇一種查詢區(qū)域布局。

操作路徑：

了解完用戶的目標(biāo)之后需要確定操作的流程。F式布局是一種很科學(xué)的布局方法，基本原理依據(jù)了大量的眼動(dòng)研究。一般來(lái)說(shuō)，用戶瀏覽網(wǎng)頁(yè)的視覺(jué)軌跡是這樣的——先看看頂部，然后看看左上角，然后沿著左邊緣順勢(shì)直下。

這個(gè)閱讀模式看起來(lái)有點(diǎn)像字母F，并包含以下3個(gè)組成部分：

1.用戶首先以水平方向閱讀，通常是在內(nèi)容區(qū)域的上半部分。這個(gè)初始的部分形成了F型的頭部。

對(duì)于頁(yè)面的重點(diǎn)內(nèi)容和高頻操作區(qū)域需要放置在用戶能夠關(guān)注到的地方，在重查詢的頁(yè)面，查詢條件區(qū)域就應(yīng)該放置在用戶能夠查看得到并方便操作的區(qū)域，例如左上角，重要程度根據(jù)業(yè)務(wù)從前往后進(jìn)行排列。

設(shè)計(jì)原則及建議：

1.掌握各種設(shè)計(jì)方式利弊

查詢區(qū)域的設(shè)計(jì)總原則是要在滿足用戶目標(biāo)的基礎(chǔ)上盡可能降低開(kāi)發(fā)成本，并不是所有的頁(yè)面只要給出最全的查詢就一定是好用的。這需要我們?cè)O(shè)計(jì)師去權(quán)衡，究竟應(yīng)該使用何種方式。

2.了解業(yè)務(wù)和用戶

B端設(shè)計(jì)師往往需要面對(duì)復(fù)雜的業(yè)務(wù)和多角色用戶，而業(yè)務(wù)壁壘通常很高。能做醫(yī)療行業(yè)的不能做教育，能做教育的不能做客戶關(guān)系。所以在B端領(lǐng)域，設(shè)計(jì)師除了要掌握設(shè)計(jì)本身的技能之外要關(guān)注業(yè)務(wù)層的需求甚至是戰(zhàn)略層的行業(yè)知識(shí)。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議