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