B端產(chǎn)品的三種頁面類型

5 評論 12817 瀏覽 72 收藏 8 分鐘

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

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

B端產(chǎn)品的三種頁面類型

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

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

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

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

B端產(chǎn)品的三種頁面類型

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

一、過渡頁面

為什么工作臺總是五顏六色?花花綠綠?

為什么我明明想要的是表格、表單,你卻給我看這個花花綠綠的頁面?

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

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

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

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

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

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

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

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

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

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

B端產(chǎn)品的三種頁面類型

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

二、沉浸頁面

沉浸頁面,顧名思義就是讓用戶更為投入的頁面,我們再以 Figma 為例。

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

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

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

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

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

這類相同類型的工具型軟件,都擁有著相類似的信息布局方式,而我們再去做其他的弊端系統(tǒng)當(dāng)中也會借鑒他們的布局方式。

B端產(chǎn)品的三種頁面類型

三、配置頁面

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

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

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

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

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

B端產(chǎn)品的三種頁面類型

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

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

其實(shí),最后你會發(fā)現(xiàn),我們在文章里聊的其實(shí)并不是頁面類型,而是你的用戶它的使用究竟有哪些場景。

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

#專欄作家#

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

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我中途被打擾了,沒太看明白

    來自廣東 回復(fù)
  2. 有意思,新的角度

    來自廣東 回復(fù)
  3. 過渡界面設(shè)計(jì)的亮眼活潑的作用原來在這,b端設(shè)計(jì)也還是要看具體的應(yīng)用場景

    來自廣東 回復(fù)
  4. 個人很喜歡這三種類型的“沉浸頁面”,因?yàn)橐粋€產(chǎn)品只有用戶沉浸了才能有更多的價(jià)值。

    來自山東 回復(fù)
  5. 可視化配置、幫助體系的建立、專業(yè)門檻的降低、產(chǎn)品模版的建立這些都能夠大大提高用戶使用的便利性,過于繁瑣極可能被用戶拋棄

    來自廣東 回復(fù)