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