B端產品頁面如何設計,從用戶專注維度詳解B端產品的三種頁面類型
前言
在 B 端產品當中,我們經(jīng)??吹轿寤ò碎T的設計頁面,很多人會質疑自己,這是 B 端產品的頁面么?
感覺品牌調性不太符合,B 端產品往往傳達給用戶的都是嚴肅、刻板,但是在同一個產品當中,同樣會存在這樣的差異。
在瀏覽各大設計系統(tǒng)時,我們經(jīng)常聽到 B 端頁面的具體歸類,通常都會分為:表單頁、列表頁、詳情頁、結果頁、工作臺 等等…,但是除了這些維度進行劃分之外,我們還可以從另一個角度去看待 B 端的具體頁面。
那今天就是我們要講的,按照用戶的專注維度去劃分的三種 B 端產品的頁面類型:"過渡頁面、沉浸頁面、配置頁面"
其實在我劃分頁面類型的本質上,是在對用戶的不同姿態(tài)所去使用的專注度的思考。因為我們用戶最終的使用姿態(tài)也就導致了,頁面需要進行細致的分類。
過渡頁面
為什么工作臺總是五顏六色?花花綠綠?
為什么我明明想要的是表格、表單,你卻給我看這個花花綠綠的頁面?
為什么我不建議打工人的居住位置選擇在公司附近?
其實都可以通過過渡頁面/場景進行解答。過渡頁面,在設計中也就是用戶不需要非常專注于某一個具體的頁面。而用戶在這些頁面當中主要起到過渡的作用,也就是用戶可以通過這些頁面去尋找到他想要的內容。
比如工作臺/首頁,它本質其實就是分發(fā),也就是說在 C 端產品它分發(fā)的是用戶流量,而在 B 端產品它分發(fā)的是產品功能。因此你會發(fā)現(xiàn) B 端產品的工作臺都是以各種各樣花里胡哨的功能入口來展開的,即使是相應的圖表,折線圖,但通常情況下這些數(shù)據(jù)可以通過圖表進入到對應的頁面當中。因此它的本質都是提供給用戶進入系統(tǒng)功能的入口。而花里胡哨則是通過顏色的區(qū)分,能夠讓他明確的知道我究竟要去到哪,要用什么功能?
比如現(xiàn)在你打開 Sketch/Figma,它的頁面當中總是花花綠綠。其實在它看來,這個頁面就不是一個嚴肅,需要去沉浸的頁面,而更多是讓你找到你想要的信息內容。
其實過渡頁面的本質就是如同我們上班工作,每天都需要有一個通勤時間,比如 15 分鐘、30 分鐘,來去緩沖工作與生活,通過這樣的方式來進行切換自己的工作狀態(tài),能夠讓你知道在哪些地方我需要格外專注、在哪些地方我們稍微放松。
沉浸頁面
沉浸頁面,顧名思義就是讓用戶更為投入的頁面,我們再以 Figma 為例。
你會發(fā)現(xiàn) Figma 在首頁當中,它的設計風格是非常跳躍、夸張的,而到了沉浸式場景當中,他的設計風格就是克制、聚焦。
這究竟是為什么?其實這個和我們 B 端產品有著異曲同工的地方。在 B 端產品當中,你會發(fā)現(xiàn),表單、表格,我們在設計這些頁面的時候,考慮的不是如何設計其顏色、樣式,想的更多就是在用戶不被干擾的前提下,能夠更加合理、高效展示這些信息。而這些頁面在設計的時候其實就是一個沉浸頁面,考慮的是從統(tǒng)一的頁面布局,相同的交互形式,來對用戶進行教育。
這也是為什么你看 Sketch、Photoshop、Figma。這類相同類型的工具型軟件,都擁有著相類似的信息布局方式,而我們再去做其他的 B 端系統(tǒng)時也會借鑒他們的布局方式。
配置頁面
配置頁面,也就是用戶對于前臺應用的相應配置,在 B 端系統(tǒng)當中就是我們常說的管理后臺系統(tǒng)。
在管理后臺的設計當中,考慮的就不是如何布局、如何進行顏色突出,我們更多應該去思考如何降低用戶的使用成本。常見的處理方式會有幾類:可視化配置、幫助體系的建立、專業(yè)門檻的降低、產品模版的建立。這里就不展開講了,里面會涉及到較多的細節(jié)。在接觸到的任意 B 端系統(tǒng)的管理后臺,都需要做到上面幾點才能夠算是一個合格的 B 端管理后臺。
比如在飛書的字段配置頁面里面,你會發(fā)現(xiàn)就是如此。采取可視化的配置策略能夠讓你知道管理后臺的配置結果,在前端系統(tǒng)的頁面里面究竟應該如何展示。
最后聊聊
其實,最后你會發(fā)現(xiàn),我們在文章里聊的其實并不是頁面類型,而是你的用戶它的使用究竟有哪些場景。雖然大家都在說 B 端,但 B 端產品本身就是一個復雜的結合體,它有著不同的頁面、不同的,因此在設計上,我們更要格外小心。
作者: CE青年Youthce
想了解更多網(wǎng)站技術的內容,請訪問:網(wǎng)站技術