編輯導(dǎo)語(yǔ)：不同的品牌對(duì)于B端產(chǎn)品的設(shè)計(jì)都有不同的看法，大部分還是以嚴(yán)肅、刻板的風(fēng)格為主，但這其中也有一定的差異存在，本篇文章作者為我們介紹了B端產(chǎn)品的三種頁(yè)面類型，從頁(yè)面類型可以聯(lián)想到用戶的使用場(chǎng)景，一起來(lái)學(xué)習(xí)一下吧。

在B端產(chǎn)品當(dāng)中，我們經(jīng)?？吹轿寤ò碎T的設(shè)計(jì)頁(yè)面，很多人會(huì)質(zhì)疑自己，這是B端產(chǎn)品的頁(yè)面么？

感覺品牌調(diào)性不太符合，B端產(chǎn)品往往傳達(dá)給用戶的都是嚴(yán)肅、刻板，但是在同一個(gè)產(chǎn)品當(dāng)中，同樣會(huì)存在這樣的差異。

在瀏覽各大設(shè)計(jì)系統(tǒng)時(shí)，我們經(jīng)常聽到B端頁(yè)面的具體歸類，通常都會(huì)分為：表單頁(yè)、列表頁(yè)、詳情頁(yè)、結(jié)果頁(yè)、工作臺(tái)等等。

但是除了這些維度進(jìn)行劃分之外，我們還可以從另一個(gè)角度去看待B端的具體頁(yè)面。

那今天就是我們要講的，按照用戶的專注維度去劃分的三種B端產(chǎn)品的頁(yè)面類型：“過渡頁(yè)面、沉浸頁(yè)面、配置頁(yè)面”。

其實(shí)在我劃分頁(yè)面類型的本質(zhì)上，是在對(duì)用戶的不同姿態(tài)所取使用的專注度思考的思考。因?yàn)槲覀冇脩糇罱K的使用姿態(tài)也就導(dǎo)致了，頁(yè)面需要進(jìn)行細(xì)致的分類。

一、過渡頁(yè)面

為什么工作臺(tái)總是五顏六色？花花綠綠？

為什么我明明想要的是表格、表單，你卻給我看這個(gè)花花綠綠的頁(yè)面？

為什么我不建議打工人的居住位置選擇在公司附近？

其實(shí)都可以通過過渡頁(yè)面/場(chǎng)景進(jìn)行解答。

在過渡頁(yè)面中，在設(shè)計(jì)中也就是用戶不需要非常專注于某一個(gè)具體的頁(yè)面。

而用戶在這些頁(yè)面當(dāng)中主要起到過渡的作用，也就是用戶可以通過這些頁(yè)面去尋找到他想要的內(nèi)容。

比如工作臺(tái)/首頁(yè)，它本質(zhì)其實(shí)就是分發(fā)，也就是說(shuō)在C端產(chǎn)品它分發(fā)的是用戶流量，而在B端產(chǎn)品它分發(fā)的是產(chǎn)品功能

因此你會(huì)發(fā)現(xiàn)B端產(chǎn)品的工作臺(tái)都是以各種各樣花里胡哨的功能入口來(lái)展開的，即使是相應(yīng)的圖表，折線圖，但通常情況下這些數(shù)據(jù)可以通過圖表進(jìn)入到對(duì)應(yīng)的頁(yè)面當(dāng)中。

因此它的本質(zhì)都是提供給用戶進(jìn)入系統(tǒng)功能的入口。

而花里胡哨則是通過顏色的區(qū)分，能夠讓他明確的知道我究竟要去到哪，要用什么功能？

比如現(xiàn)在你打開Sketch/Figma，它的頁(yè)面當(dāng)中總是花花綠綠。

其實(shí)在它看來(lái)，這個(gè)頁(yè)面就不是一個(gè)嚴(yán)肅，需要去沉浸的頁(yè)面，而更多是想讓你找到你想要的信息內(nèi)容。

其實(shí)過渡頁(yè)面的本質(zhì)就是如同我們上班工作，每天都需要有一個(gè)通勤時(shí)間，比如15分鐘、30分鐘，來(lái)去緩沖工作與生活，通過這樣的方式來(lái)進(jìn)行切換自己的工作狀態(tài)，能夠讓你知道在哪些地方我需要格外專注、在哪些地方我們稍微放松。

二、沉浸頁(yè)面

沉浸頁(yè)面，顧名思義就是讓用戶更為投入的頁(yè)面，我們?cè)僖?Figma 為例。

你會(huì)發(fā)現(xiàn)Figma在首頁(yè)當(dāng)中，它的設(shè)計(jì)風(fēng)格是非常跳躍、夸張的，而到了沉浸式場(chǎng)景當(dāng)中，他的設(shè)計(jì)風(fēng)格就是克制、聚焦。

這究竟是為什么？其實(shí)這個(gè)和我們B端產(chǎn)品有著異曲同工的地方。

在B端產(chǎn)品當(dāng)中，你會(huì)發(fā)現(xiàn)，表單、表格，我們?cè)谠O(shè)計(jì)這些頁(yè)面的時(shí)候，考慮的不是如何設(shè)計(jì)其顏色、樣式，想的更多就是在用戶不被干擾的前提下，能夠更加合理、高效展示這些信息。

而這些頁(yè)面在設(shè)計(jì)的時(shí)候其實(shí)就是一個(gè)沉浸頁(yè)面，考慮的是從統(tǒng)一的頁(yè)面布局，相同的交互形式，來(lái)對(duì)用戶進(jìn)行教育。

這也是為什么你看 Sketch、Photoshop、Figma。

這類相同類型的工具型軟件，都擁有著相類似的信息布局方式，而我們?cè)偃プ銎渌谋锥讼到y(tǒng)當(dāng)中也會(huì)借鑒他們的布局方式。

三、配置頁(yè)面

配置頁(yè)面，也就是用戶對(duì)于前臺(tái)應(yīng)用的相應(yīng)配置，在B端系統(tǒng)當(dāng)中就是我們常說(shuō)的管理后臺(tái)系統(tǒng)。

在管理后臺(tái)的設(shè)計(jì)當(dāng)中，考慮的就不是如何布局、如何進(jìn)行顏色突出，我們更多應(yīng)該去思考如何降低用戶的使用成本。

常見的處理方式會(huì)有幾類：可視化配置、幫助體系的建立、專業(yè)門檻的降低、產(chǎn)品模版的建立。

這里就不展開講了，里面會(huì)涉及到較多的細(xì)節(jié)。

在接觸到的任意球B端系統(tǒng)的管理后臺(tái)，都需要做到上面幾點(diǎn)才能夠算是一個(gè)合格的B端管理后臺(tái)。

比如在飛書的字段配置頁(yè)面里面，你會(huì)發(fā)現(xiàn)就是如此。

采取可視化的配置策略能夠讓你知道管理后臺(tái)的配置結(jié)果，在前端系統(tǒng)的頁(yè)面里面究竟應(yīng)該如何展示。

其實(shí)，最后你會(huì)發(fā)現(xiàn)，我們?cè)谖恼吕锪牡钠鋵?shí)并不是頁(yè)面類型，而是你的用戶它的使用究竟有哪些場(chǎng)景。

雖然大家都在去說(shuō)B端、B端，但B端產(chǎn)品本身就是一個(gè)復(fù)雜的結(jié)合體，它有著不同的頁(yè)面、不同的，因此在設(shè)計(jì)上，我們更要格外小心。

#專欄作家#

CE青年，微信公眾號(hào)：CE青年，人人都是產(chǎn)品經(jīng)理專欄作家。專注B端設(shè)計(jì)領(lǐng)域，一個(gè)2B行業(yè)的2B設(shè)計(jì)師。

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

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