起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)大屏思考與復(fù)盤
為了降低匯報(bào)業(yè)績(jī)過(guò)程中的領(lǐng)導(dǎo)理解成本、更好地將工作成果向其他人展示，這個(gè)時(shí)候，我們可以借助大屏技術(shù)。那么，怎么做好大屏可視化、滿足業(yè)務(wù)小伙伴和老板的需求呢？這篇文章里，作者結(jié)合案例做了分享，一起來(lái)看。
前言
一直以來(lái)，業(yè)務(wù)伙伴以及團(tuán)隊(duì)在匯報(bào)業(yè)績(jī)的場(chǎng)景中都是通過(guò)常規(guī)的表格或者是PPT等靜態(tài)的方式，這種匯報(bào)方式不僅僅要求業(yè)務(wù)伙伴花時(shí)間去做相關(guān)的文件（PPT或者是表格），對(duì)于聽(tīng)匯報(bào)的領(lǐng)導(dǎo)的總結(jié)構(gòu)建能力也是一個(gè)挑戰(zhàn)，提高了領(lǐng)導(dǎo)的理解成本。
因此，業(yè)務(wù)伙伴和團(tuán)隊(duì)找了外援設(shè)計(jì)師，也就是我，負(fù)責(zé)這個(gè)需求的設(shè)計(jì)。
一、前期準(zhǔn)備
1. 業(yè)務(wù)需求分析
動(dòng)手做大屏可視化之前先要分析領(lǐng)導(dǎo)的關(guān)注點(diǎn)，根據(jù)跟產(chǎn)品以及同級(jí)領(lǐng)導(dǎo)2次溝通之后，可以把所有模塊化為3個(gè)指標(biāo)“QCT”，分別代表的“成本”“指標(biāo)”“團(tuán)隊(duì)提效”。
所有模塊的邏輯排布以及故事線展示方式都是根據(jù)3個(gè)標(biāo)準(zhǔn)展開(kāi)。
2. 用戶與場(chǎng)景
涉及到的用戶可以歸為2類：演員與觀眾。演員通常指的是團(tuán)隊(duì)或者是產(chǎn)品的負(fù)責(zé)人，需要向更高一級(jí)老板或者是團(tuán)隊(duì)伙伴交代現(xiàn)有產(chǎn)品的問(wèn)題以及業(yè)績(jī)和未來(lái)的規(guī)劃。
觀眾：通常是2類-老板和團(tuán)隊(duì)伙伴，團(tuán)隊(duì)伙伴更多的是被迫來(lái)參加會(huì)議的，所以更多是查看相關(guān)的數(shù)據(jù)。老板作為匯報(bào)的目標(biāo)用戶，需要了解到現(xiàn)有團(tuán)隊(duì)和產(chǎn)品的現(xiàn)況。
在會(huì)議室座位分布上，團(tuán)隊(duì)負(fù)責(zé)人/產(chǎn)品負(fù)責(zé)人負(fù)責(zé)在前面宣講，老板一般做的位置是右上角的座位，便于更近的查看到電視屏幕上全部的內(nèi)容。其余人員按照職位往后分布。團(tuán)隊(duì)成員一般處在最遠(yuǎn)位置，只能在筆記本電腦上查看具體的內(nèi)容。
3. 故事線搭建
具體動(dòng)手之前，優(yōu)先按照“QCT”的思路進(jìn)行邏輯排布，首先項(xiàng)目成熟度和解耦地圖屬于成本總覽，整機(jī)項(xiàng)目與研發(fā)項(xiàng)目屬于指標(biāo)，業(yè)務(wù)觸達(dá)屬于團(tuán)隊(duì)提效，主圖由地圖直觀呈現(xiàn)全球各地域。
二、設(shè)計(jì)過(guò)程
1. 布局框架
通過(guò)分析人員座位分布結(jié)合4象限設(shè)計(jì)方法，將地圖放在右上角呈現(xiàn)。左至下呈現(xiàn)“L”布局將整體填充，左邊則是按照項(xiàng)目成熟度與解耦地圖滿足老板查看權(quán)重，底部由指標(biāo)與提效內(nèi)容進(jìn)行橫向排列。
2. 交互
交互主要分為2各方面地圖交互與“模塊交互”。
地圖交互：
包含4個(gè)點(diǎn)：懸浮/下鉆/拖拽/放大縮小。
懸?。?/strong>系統(tǒng)監(jiān)控鼠標(biāo)的移動(dòng)，在相應(yīng)的地圖模塊之上時(shí)候，國(guó)家模塊邊緣開(kāi)始發(fā)光效果放大并且增加“Z”軸的懸浮呈現(xiàn)效果。滿足老板對(duì)于每個(gè)區(qū)域的成果查看需求，同時(shí)又滿足宣講者“演員”的簡(jiǎn)化操作需求，所以采用的是懸浮+固定位置非模態(tài)彈窗的方案來(lái)呈現(xiàn)。
下鉆：這個(gè)是后期添加的需求，主要是滿足老板想要了解每個(gè)國(guó)家的項(xiàng)目進(jìn)度的需求，為此增加了點(diǎn)擊下鉆的操作，老板會(huì)在下一步驟下看到每個(gè)國(guó)家更多詳細(xì)的信息。
拖拽與放大縮?。?/strong>2個(gè)手指聯(lián)動(dòng)的效果，所以放在一說(shuō)，在一定的區(qū)域內(nèi)，以2只手和2/3指頭作為大幅度交互或者是小幅度交互。
3. 定義風(fēng)格
針對(duì)風(fēng)格的定義，優(yōu)先級(jí)制定了一系列的為“硬件”“流動(dòng)線”“潮流色”為主的關(guān)鍵詞，針對(duì)關(guān)鍵詞搜索出相關(guān)聯(lián)的圖片，逐步提取出使用較多的顏色，并且根據(jù)已有的圖片尋找到相關(guān)的元素制定了“圖形”“色彩”“字體”“構(gòu)成”“質(zhì)感”“體感”“動(dòng)效”風(fēng)格。
4. 選擇圖表
可視化圖表分類很多，同時(shí)又存在混合和基礎(chǔ)樣式進(jìn)行選擇。在我們的業(yè)務(wù)之中，使用了占比類和比類以及主圖的地圖類的展示方式。
地圖類：主圖的人力地圖。
占比類-判斷：以“升級(jí)項(xiàng)目為例”—需求是要呈現(xiàn)在當(dāng)前階段的進(jìn)度所在的百分比，同時(shí)還存在多階段、雙階段的業(yè)務(wù)需求，因此選用了子彈圖形式展現(xiàn)。
比較類-對(duì)比：以數(shù)據(jù)統(tǒng)計(jì)為例，業(yè)務(wù)需求是針對(duì)所在的整體項(xiàng)目的解耦程度進(jìn)行統(tǒng)計(jì)，用指標(biāo)卡的形式更能直接告訴老板現(xiàn)有的解耦進(jìn)度。
三、設(shè)計(jì)交付
1. 動(dòng)效
主要是采用APNG進(jìn)行交付，相對(duì)png和gif相比，一個(gè)是比較清晰一個(gè)是比較小。
那和lottie的區(qū)別是什么呢？
APNG 是一種基于 PNG 格式的動(dòng)畫格式，支持透明背景和較高的色彩深度。它可以在現(xiàn)代的瀏覽器、圖片查看器和編輯軟件中播放，并且不需要任何額外的庫(kù)或插件。APNG 文件相對(duì)較小，易于分享和嵌入網(wǎng)頁(yè)，但在某些老舊的瀏覽器中可能不被完全支持。
Lottie 是一個(gè)由 Airbnb 開(kāi)發(fā)的開(kāi)源庫(kù)，可用于創(chuàng)建和交付高度可定制的矢量動(dòng)畫，適用于移動(dòng)應(yīng)用程序和 Web。Lottie 使用 JSON 文件描述動(dòng)畫，同時(shí)依賴于底層的矢量圖形庫(kù)（如 Adobe After Effects 或 Bodymovin 插件）。Lottie 動(dòng)畫可以在多個(gè)平臺(tái)上播放，并且可以實(shí)現(xiàn)更復(fù)雜的交互和動(dòng)畫效果。然而，Lottie 文件相對(duì)較大，需要額外的解析庫(kù)來(lái)播放。
選擇使用哪種格式取決于你的具體需求和目標(biāo)平臺(tái)。如果你只需要簡(jiǎn)單的動(dòng)畫效果，并希望在 Web 上展示或共享文件，APNG 可能是一個(gè)不錯(cuò)的選擇。如果你需要更復(fù)雜的交互和高度可定制的動(dòng)畫，或者打算在移動(dòng)應(yīng)用程序中使用動(dòng)畫，Lottie 可能更適合你的需求。
結(jié)合實(shí)際業(yè)務(wù)談，我們的動(dòng)效并不復(fù)雜，因此采用的APNG的交付方式。
2. 字體實(shí)現(xiàn)
一般的開(kāi)發(fā)都會(huì)使用默認(rèn)的字體，其實(shí)也可以采用特殊字體通過(guò)字體包加載即可，但是這種開(kāi)發(fā)成本比較高。數(shù)字字體推薦“DIN”。
四、未來(lái)規(guī)劃
現(xiàn)在做的是第一期的規(guī)劃，第二期主要是要針對(duì)“CT”內(nèi)容進(jìn)行填充以及地圖的3級(jí)下鉆進(jìn)行進(jìn)行優(yōu)化，滿足老板更細(xì)化的需求。
總結(jié)
以上是從“前期準(zhǔn)備”“中期設(shè)計(jì)”“后期交付”3個(gè)流程節(jié)點(diǎn)講述設(shè)計(jì)來(lái)進(jìn)行思考與復(fù)盤，希望能對(duì)伙伴們帶來(lái)思考方式。
為我投票
我在參加人人都是產(chǎn)品經(jīng)理2023年度評(píng)選，希望喜歡我的文章的朋友都能來(lái)支持我一下~
點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁(yè)面，點(diǎn)擊紅心即可為我投票。
每人每天最多可投30票，投票即可獲得抽獎(jiǎng)機(jī)會(huì)，抽取書籍、人人都是產(chǎn)品經(jīng)理紀(jì)念周邊&起點(diǎn)課堂會(huì)員等好禮哦！
投票傳送門：https://996.pm/Y9awo
專欄作家
一只雞腿，微信公眾號(hào)：B端設(shè)計(jì)一只雞腿，人人都是產(chǎn)品經(jīng)理專欄作家。一個(gè)吃貨的B端設(shè)計(jì)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
