從0-1搭建B端可視化頁(yè)面（基礎(chǔ)篇）

時(shí)間：2023-07-24 10:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 10:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

從0-1搭建B端可視化頁(yè)面（基礎(chǔ)篇）：

前言

在一些后臺(tái)設(shè)計(jì)中我們常常會(huì)看到數(shù)據(jù)可視化的身影，而圖表是數(shù)據(jù)可視化最常用的載體。但是對(duì)于新手來(lái)說(shuō)，拿到需求后常常不知如何下手，或者沒(méi)有一個(gè)好的思路。今天我將結(jié)合遇到過(guò)的案例，講解一下我是如何做可視化頁(yè)面的。步驟較為基礎(chǔ)，理解起來(lái)不難～～第一次嘗試寫(xiě)文章，又遇到過(guò)困難，但還好也堅(jiān)持下來(lái)了，在寫(xiě)文的過(guò)程中感謝有贊設(shè)計(jì)師@美芳的指導(dǎo)。

今天的案例是一款HRM 的招聘報(bào)表可視化頁(yè)面，從0-1五步詳細(xì)拆解搭建的過(guò)程。首先，常見(jiàn)的可視化頁(yè)面是由：標(biāo)題欄、數(shù)據(jù)統(tǒng)計(jì)、排行榜、可視化圖表構(gòu)成的。

現(xiàn)在開(kāi)始案例講解，假設(shè)一開(kāi)始我從產(chǎn)品經(jīng)理那兒接到了一個(gè)需求原型。那接下來(lái)可以從“定義模塊類(lèi)型”、“確定模塊優(yōu)先級(jí)”、“布局重構(gòu)”、“模塊拆解”、“模塊組裝并走查”五個(gè) 步驟來(lái)著手做設(shè)計(jì)。

一、定義模塊類(lèi)型

拿到需求，先以宏觀的角度來(lái)定義一下模塊類(lèi)型。（關(guān)于如何選擇圖表，以及每個(gè)圖表用法之間有啥區(qū)別，可以參照一下antv螞蟻數(shù)據(jù)可視化，里面有詳細(xì)的每類(lèi)圖表的用法，所以這里不作贅述。）如果一開(kāi)始對(duì)某塊到底該用什么類(lèi)型的圖表而感到糾結(jié)時(shí)，可以先把想到的合適的圖表都在注釋上標(biāo)明，做到具體板塊的時(shí)候再來(lái)深究其中的區(qū)別。舉個(gè)栗子 ：在做本月效率渠道這一塊時(shí)，我一開(kāi)始認(rèn)為采用扇形圖和柱狀堆疊圖都行，那我先在這一塊標(biāo)明。之后拆解到這一塊時(shí)，我再詳細(xì)講述一下我最終是如何選擇的吧。

二、確定模塊的優(yōu)先級(jí)

模塊的類(lèi)型定義完了，接下來(lái)就要確定模塊的優(yōu)先級(jí)。

舉個(gè)栗子 ：在招聘報(bào)表中各模塊的優(yōu)先級(jí)是這樣的：

p0：在招職位數(shù)、在招人數(shù)、簡(jiǎn)歷接收數(shù)、面試人次

p1:簡(jiǎn)歷接收趨勢(shì)、效率渠道、招聘進(jìn)度、招聘漏斗、offer拒收率

p2:內(nèi)推榜

梳理完這些有助于我們?cè)谧霾季种貥?gòu)的時(shí)候，讓重要的信息在首屏曝光更多，讓頁(yè)面布局更合理。

三、布局重構(gòu)

原型圖的布局，并不代表最終設(shè)計(jì)的布局就是長(zhǎng)這個(gè)樣子，在知道了模塊優(yōu)先級(jí)的前提下，首先要看一下布局是否合理？頁(yè)面的布局是否是按照優(yōu)先級(jí)來(lái)的？如果有不合理的地方，就要做及時(shí)的調(diào)整。

目前大部分的B端產(chǎn)品都是通過(guò)瀏覽器的方式呈現(xiàn)，想要設(shè)計(jì)稿被前端完整還原，需要將瀏覽器中的一些因素考慮進(jìn)去。而想要真實(shí)了解設(shè)備中一屏的高度，就還需要對(duì)上面的分辨率尺寸進(jìn)行處理：電腦分辨率 - 頁(yè)簽高度 - 網(wǎng)址欄 - 書(shū)簽欄 = 設(shè)計(jì)稿真實(shí)高度即：1440x820 尺寸進(jìn)行設(shè)計(jì)。還有另外一種情況：如果系統(tǒng)是給公司內(nèi)部員工使用,由于公司批量采購(gòu)設(shè)備的原因,公司內(nèi)部員工的屏幕分辨率往往會(huì)比較統(tǒng)一,這種情況下需要拿到這個(gè)數(shù)據(jù),然后以它作為基準(zhǔn)尺寸開(kāi)始設(shè)計(jì)。

在該案例中，我采用的是1440x820 的尺寸，24柵格（其中頁(yè)邊距20px，水槽16px）來(lái)做的設(shè)計(jì)。（溫馨提示：因?yàn)闁鸥襻槍?duì)的是內(nèi)容區(qū)的元素排布，所以在計(jì)算水槽和頁(yè)邊距的時(shí)候不要把導(dǎo)航的寬也算進(jìn)去來(lái)哦～）柵格的目的是能讓內(nèi)容區(qū)頁(yè)面更為整齊劃一，并且在與前端交接的時(shí)候也不容易出錯(cuò)。

布局重構(gòu)需要記住兩個(gè)原則：1、布局更緊湊，首屏曝光更多信息；2、應(yīng)用柵格做規(guī)范

四、模塊逐個(gè)拆解

每個(gè)公司都有不同的視覺(jué)規(guī)范，要以具體的為準(zhǔn)。在視覺(jué)規(guī)范下，可以確定好字體、字號(hào)、字重、顏色等。之后開(kāi)始對(duì)每個(gè)具體的模塊進(jìn)行拆解。

第一個(gè)栗子 ：數(shù)據(jù)統(tǒng)計(jì)

在拆解數(shù)據(jù)類(lèi)型板塊時(shí)，大致可以分四個(gè)小步驟：

1.梳理好信息的重要程度

2.搭好卡片框架

3.應(yīng)用可視化

4.層級(jí)優(yōu)化

接下來(lái)拿“本月招聘職位數(shù)“來(lái)實(shí)戰(zhàn)一下

step1:梳理好信息的重要程度

重要信息：職位數(shù)數(shù)據(jù)

次要信息：標(biāo)題

輔助信息：上升/下降的數(shù)量

step2:搭好卡片框架

卡片的寬度已經(jīng)用柵格確定好，用字體、大小、顏色進(jìn)行信息層級(jí)的區(qū)分，固定的padding為20px

step3:應(yīng)用可視化

這一步我是將增長(zhǎng)/減少做了一個(gè)小箭頭的可視化處理，為了表明卡片的功能，我也在右側(cè)空白區(qū)域加了圖標(biāo)，對(duì)于其他的產(chǎn)品來(lái)說(shuō)，這一步也可以根據(jù)需求來(lái)，應(yīng)用具體的圖表來(lái)做可視化處理。

step4:層級(jí)優(yōu)化

對(duì)職位數(shù)進(jìn)一步加粗，對(duì)輔助信息進(jìn)行弱化（弱化的方式可以從：顏色、大小、字重等方面考慮）

這是拆解數(shù)據(jù)統(tǒng)計(jì)的大致思路，可以用同樣的思路把“本月在招人數(shù)”、“本月接收簡(jiǎn)歷數(shù)”、“本月面試人數(shù)”補(bǔ)充出來(lái)。

第二個(gè)栗子 ：簡(jiǎn)歷投遞趨勢(shì)

代表趨勢(shì)的，我首選的是折線圖。折線圖的特點(diǎn)是：用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化，反映事物隨時(shí)間或有序類(lèi)別而變化的趨勢(shì)。 在折線圖中，數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出來(lái)。所以，折線圖常用來(lái)分析數(shù)據(jù)隨時(shí)間的變化趨勢(shì)。在折線圖中，一般水平軸（X軸）用來(lái)表示時(shí)間的推移，并且間隔相同；而垂直軸（Y軸）代表不同時(shí)刻的數(shù)據(jù)的大小。

選好了圖表的類(lèi)型，就開(kāi)始布局圖表了，分兩個(gè)小步驟：

第一步：考慮元素是否都有：

圖表常常包含的元素有：標(biāo)題、坐標(biāo)系、主體圖形、圖例、提示信息、切換選項(xiàng)、值域（選擇顯示范圍），其中必備的有：標(biāo)題、時(shí)間、圖形主體 ；常有：坐標(biāo)系、圖例、提示信息




按照這個(gè)思路先來(lái)做一個(gè)1.0

該折線圖必備的有：標(biāo)題、坐標(biāo)系、主體圖形、提示信息、切換選項(xiàng)

第二步：檢查下視覺(jué)呈現(xiàn)上的問(wèn)題

做完之后并沒(méi)有完，根據(jù)元素的屬性，可以對(duì)其做一個(gè)視覺(jué)上的優(yōu)化。

其實(shí)依據(jù)圖表元素的重要程度，可以將元素分為：底層元素、中層元素、頂層元素。

底層元素：通常是我們所說(shuō)的軸線、刻度等。

中層元素：承載主要數(shù)據(jù)信息的數(shù)據(jù)圖形、數(shù)據(jù)線段等。通常中層元素會(huì)用更低明度與更高飽和度的數(shù)據(jù)色來(lái)表現(xiàn)。

頂層元素：圖表高亮信息,內(nèi)容包括懸停樣式、懸停后的詳細(xì)數(shù)據(jù)說(shuō)明等，并輔以動(dòng)畫(huà)、投影來(lái)強(qiáng)調(diào)效果。

按照以上的思路，再對(duì)1.0做一個(gè)優(yōu)化，盡量做到疏密有致，呼吸感。

第三個(gè)栗子 ：效率渠道分析

在前文已經(jīng)提到過(guò)這個(gè)問(wèn)題：在定義模塊類(lèi)型的時(shí)候，針對(duì)效率渠道這塊好像用扇形圖和柱狀堆疊圖都行。那現(xiàn)在就具體拆解一下，到底使用哪種類(lèi)型的圖會(huì)是最優(yōu)解。

柱狀堆疊圖相比于扇形圖，多了坐標(biāo)系，也就是說(shuō)多x軸（投遞環(huán)節(jié)）和y軸（通過(guò)人數(shù)）的分析維度。多了坐標(biāo)系使得可以在縱向上對(duì)比不同的發(fā)布平臺(tái)效率是如何的 ，可以在橫向上，看到不同面試環(huán)節(jié)的效率是如何的，所以總的來(lái)說(shuō)，在效率渠道分析這一塊采用堆疊柱狀圖的效果會(huì)比扇形圖更加直觀。

圖例的擺放也是有一個(gè)小細(xì)節(jié)點(diǎn)：根據(jù)人的視覺(jué)動(dòng)線從上到下進(jìn)行瀏覽的，那圖例也可以依據(jù)圖形主體從上到下進(jìn)行擺放。

小總結(jié)：

一個(gè)完整的圖表必備的元素有：標(biāo)題、時(shí)間、圖形主體 。但往往在設(shè)計(jì)的時(shí)候容易忽略時(shí)間這一項(xiàng)。所以在設(shè)計(jì)完的時(shí)候要檢查下時(shí)都有遺漏？在這次案例中在時(shí)間的維度上做了兩種形式：直接在標(biāo)題中顯示，例如本月在招職位，本月招聘進(jìn)度等?；蛘呤褂脮r(shí)間切換選項(xiàng)，比如本周、本月、本年來(lái)表示時(shí)間維度。

五、模塊組裝并走查

根據(jù)之前拆解的栗子 ，可以用同樣的思路將其他的圖表做出來(lái)。

現(xiàn)在每個(gè)小模塊都已將搭建好，就要站在一個(gè)宏觀的角度來(lái)檢查一遍：

信息分類(lèi)：重點(diǎn)信息是否突出、設(shè)計(jì)要求是否滿足。

布局劃分和占比：是否合理利用空間，是否做到了呼吸感適中

信息降噪、視覺(jué)降噪：顏色：彩色的應(yīng)用要謹(jǐn)慎、中性灰的層級(jí)要清晰

元素：是否存在濫用圖標(biāo)和陰影，重點(diǎn)信息是否傳達(dá)明確。

規(guī)范統(tǒng)一：圓角、問(wèn)層級(jí)的字體、卡片、坐標(biāo)軸、圖例是否做到了統(tǒng)一。







以上僅是一個(gè)簡(jiǎn)單的拆解過(guò)程，真正工作中遇到的可視化頁(yè)面各有不相同，具體的問(wèn)題還是要具體分析。第一次寫(xiě)文章，寫(xiě)的有不足的地方也歡迎大家指出并討論，入行才不久，未來(lái)還有很多要學(xué)習(xí)的地方～







最后再次感謝有贊設(shè)計(jì)師@美芳在CCtalk的分享，我們是一群本著提升B端體驗(yàn)匯聚在一起的團(tuán)隊(duì)，歡迎關(guān)注公眾號(hào)【且曼B端產(chǎn)品設(shè)計(jì)】交流探討。




本文由光文Vivi原創(chuàng),未經(jīng)許可，禁止轉(zhuǎn)載。

原文首發(fā)站酷從0-1搭建B端可視化頁(yè)面（基礎(chǔ)篇）|UI-其他|觀點(diǎn)|光文Vivi - 原創(chuàng)文章 - 站酷 (ZCOOL)歡迎關(guān)注呀～～




參考文獻(xiàn)：

《CCtalk B端產(chǎn)品設(shè)計(jì)課》by 美芳

CE青年-B 端項(xiàng)目設(shè)計(jì)稿尺寸究竟是多少？

百度UED:B端圖表視覺(jué)設(shè)計(jì)思考(精髓篇)