我們的團(tuán)隊(duì)為各種各樣的企業(yè)構(gòu)建了儀表板，并且在此過程中獲得了一些關(guān)鍵見解。

如果您正在考慮創(chuàng)建儀表板，這里有一些建議可能會(huì)幫助您節(jié)省時(shí)間、金錢和理智。

如果你想要一個(gè)堅(jiān)固的儀表盤，就要像對(duì)待飛機(jī)駕駛艙一樣認(rèn)真對(duì)待它的設(shè)計(jì)。在商務(wù)中——就像在飛行中一樣——你需要清楚地了解你的方向和表現(xiàn)，以免為時(shí)已晚而無法及時(shí)糾正航向。

真正實(shí)用的儀表板始終是協(xié)作的成果。它匯聚了目標(biāo)、數(shù)據(jù)、人員和邏輯。而它的最佳構(gòu)建者，正是一支精通所有四要素（分析師、設(shè)計(jì)師和開發(fā)人員）的團(tuán)隊(duì)，他們能夠理解您的業(yè)務(wù)語言。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

模板和人工智能工具在某些方面確實(shí)能提供幫助，但它們無法感知你的背景，也無法洞察所有細(xì)微之處。如果使用不當(dāng)，它們可能會(huì)把原本有用的工具變成有害的工具。你可能會(huì)追蹤錯(cuò)誤的事物，做出錯(cuò)誤的判斷。

因此，如果您的儀表板用于實(shí)際業(yè)務(wù)（而不僅僅是娛樂），請(qǐng)引入能夠連接業(yè)務(wù)目標(biāo)、數(shù)據(jù)和視覺語言的專家。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 1. 設(shè)定精確目標(biāo)

確定正確的目標(biāo)和問題是成功的一半。另一半是選擇能夠回答這些問題的可視化效果。

首先為您自己、開發(fā)人員和設(shè)計(jì)師組織需求收集流程。使用您喜歡的任何工具（Miro、Trello、FigJam、Google Sheets、Notion、ClickUp、Google Forms）。

創(chuàng)建看板、卡片或列表；每個(gè)看板、卡片或列表都應(yīng)包含您在交接任務(wù)前必須回答的問題。這些問題的答案將幫助您避免儀表盤的最大缺陷：雜亂的用戶界面、毫無意義的指標(biāo)以及未使用的數(shù)據(jù)。

儀表板應(yīng)該適用于業(yè)務(wù)，而不僅僅是看起來漂亮。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

第 2 步：組建一支負(fù)責(zé)任的團(tuán)隊(duì)

決定誰擁有儀表板、誰構(gòu)建它以及誰將使用它。

不要試圖制作一個(gè)“適合所有人”的儀表板。

人人適用的工具通常對(duì)任何人都沒有幫助。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 3. 定義用例和用戶

明確業(yè)務(wù)任務(wù)，并繪制用戶畫像。問自己三個(gè)問題：

• 儀表板將解決哪些問題？
  （例如，跟蹤收入增長、聚焦渠道瓶頸、監(jiān)控客戶流失）
• 誰根據(jù)這些數(shù)據(jù)做決策？
  創(chuàng)始人、營銷人員還是產(chǎn)品經(jīng)理？
• 每個(gè)人每天需要看到什么？
  想想一個(gè)“晨間儀式”——他們必須在30秒內(nèi)掌握什么？

這不僅僅與角色有關(guān)；習(xí)慣和便利也很重要。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 4. 確定關(guān)鍵指標(biāo)

選擇3-5 個(gè)真正能推動(dòng)業(yè)務(wù)發(fā)展的指標(biāo)。按從頂層到底層的順序排列它們。糟糕的儀表盤會(huì)顯示所有內(nèi)容，造成掌控全局的錯(cuò)覺。

指標(biāo)越少但越有意義。

例子：

• SaaS：活躍用戶、CAC、LTV、流失率；
• 營銷：點(diǎn)擊到引導(dǎo)轉(zhuǎn)化率、客戶獲取成本、ROMI；
• 財(cái)務(wù)：營業(yè)利潤、平均訂單價(jià)值、預(yù)測(cè)現(xiàn)金流。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 5. 準(zhǔn)備數(shù)據(jù)

沒有好的數(shù)據(jù)，就沒有好的儀表盤。問：

• 數(shù)據(jù)存儲(chǔ)在哪里？
• 它的完整性和時(shí)效性如何？
• 它將如何刷新？
• 數(shù)據(jù)質(zhì)量歸誰所有？

無需手動(dòng)輸入。自動(dòng)化讓儀表板保持活躍。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 6. 繪制粗略布局

任何東西都可以——從餐巾紙上的草圖到 Figma 的線框圖。仔細(xì)思考：

• 哪些塊屬于“頂部”？
• 視覺焦點(diǎn)在哪里？
• 什么應(yīng)該首先跳出來？

丑陋也沒關(guān)系——重點(diǎn)是測(cè)試結(jié)構(gòu)和想法。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 7. 獲取用戶反饋

把原型展示給真實(shí)用戶。不要問：“它漂亮嗎？” 而是問：

• 是不是一眼就看明白了？
• 它是否有足夠的信息來做出決策？
• 感覺缺少了什么或者多了什么？

在草稿期間聽到“我不明白”比在發(fā)布后聽到要好。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟 8：為設(shè)計(jì)師撰寫一份詳盡的簡介

設(shè)計(jì)師不會(huì)讀心術(shù)。如果你不說重點(diǎn)，他們就會(huì)替你做決定。包括：

• 哪些指標(biāo)適用于何處以及如何適用？
• 阻止優(yōu)先級(jí)（最重要的）；
• 移動(dòng)與大屏幕行為；
• 顏色強(qiáng)調(diào)、警報(bào)、數(shù)字格式。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

第 9 步：找到合適的建筑商

我們很想說“雇傭我們”，但這是你的事業(yè)和愿景。在 Dribbble、Behance 甚至 LinkedIn 上查看作品集——人才無處不在。

評(píng)判前景：

• 商業(yè)理解

漂亮的圖表并不比了解它們存在的原因更重要。

• 界面體驗(yàn)

儀表板不是登錄頁面；可用性是第一位的。

• 清晰的溝通

如果他們的流程現(xiàn)在聽起來很模糊，那么以后就不會(huì)變得清晰。

• 簡化能力

真正的技巧是讓復(fù)雜變得簡單。

• 克制感

作品集可以幫助您評(píng)估設(shè)計(jì)師的風(fēng)格、潮流感、是否適合您的業(yè)務(wù)類型以及整體技能和獨(dú)創(chuàng)性。

最重要的是，選擇一支能夠深入實(shí)現(xiàn)你的目標(biāo)的團(tuán)隊(duì)。

這就是真正的“哇”的由來。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

第十步：啟動(dòng)。觀察。改進(jìn)。

儀表盤是一個(gè)動(dòng)態(tài)系統(tǒng)，而非一次性的落地頁。發(fā)布后，請(qǐng)關(guān)注：

• 人們多久打開一次它？
• 會(huì)議中是否體現(xiàn)了指標(biāo)；
• 什么讓用戶犯了錯(cuò)誤，或者他們接下來會(huì)請(qǐng)求什么。

沒有哪個(gè)儀表板是第一天就完美的。不斷迭代——改進(jìn)終將帶來回報(bào)。

結(jié)論

優(yōu)秀的儀表盤不僅僅是一堆圖表。它能夠塑造團(tuán)隊(duì)的思維。它能夠引導(dǎo)注意力、培養(yǎng)習(xí)慣、加快決策速度，并節(jié)省時(shí)間，而不是浪費(fèi)時(shí)間。

當(dāng)出現(xiàn)以下情況時(shí)，您的儀表板將變得無價(jià)：

• 其目的非常明確；
• 每個(gè)角色都有自己的衡量標(biāo)準(zhǔn)；
• 噪音最小，意義最大；
• 您可以快速深入研究；
• 該團(tuán)隊(duì)確實(shí)使用了它。

如果這就是您想要的儀表板類型，我們希望這可以幫助您入門。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

另外，以下是創(chuàng)建業(yè)務(wù)儀表板時(shí)可能有用的AI 工具列表：

1. 聚合物搜索
2. Zoho Analytics
3. Tableau
4. 多莫
5. Sisense
6. 思想點(diǎn)
7. Looker工作室
8. Klipfolio

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

智能家居已經(jīng)從單品智能走向全屋聯(lián)動(dòng)，而 UI 設(shè)計(jì)正處于“功能越來越多、用戶時(shí)間越來越少”的挑戰(zhàn)中。
如何讓復(fù)雜系統(tǒng)在家中變得自然好用？本文從落地方法論出發(fā)，結(jié)合實(shí)際案例，拆解智能家居 UI 設(shè)計(jì)的核心要點(diǎn)。

一、智能家居 UI 設(shè)計(jì)的落地方法論

智能家居 UI 并不是在屏幕上堆功能，而是一個(gè)跨硬件、跨場(chǎng)景、跨人群的系統(tǒng)設(shè)計(jì)工程。這里有一個(gè)可落地的三層方法論：

1. 信息架構(gòu)層（IA）

• 設(shè)備分組：按照空間（客廳、臥室）、功能（照明、安防）、場(chǎng)景（回家、觀影）分類。

• 優(yōu)先級(jí)排序：高頻控制放在第一屏，低頻控制收進(jìn)次級(jí)菜單。

• 多入口設(shè)計(jì)：同一功能允許從不同入口觸發(fā)（面板、App、小程序、語音）。

落地要點(diǎn)：在信息架構(gòu)階段就考慮老人、小孩、訪客的使用差異，避免后期 UI 大改。

2. 交互模式層（IX）

• 場(chǎng)景化卡片：用卡片將多設(shè)備操作組合為“一鍵執(zhí)行”。

• 多模態(tài)觸發(fā)：UI 設(shè)計(jì)兼容觸屏、語音、傳感器自動(dòng)觸發(fā)等多種方式。

• 實(shí)時(shí)反饋：用戶需要在 0.3 秒內(nèi)看到操作結(jié)果，否則會(huì)懷疑系統(tǒng)無響應(yīng)。

落地要點(diǎn)：在交互模式設(shè)計(jì)時(shí)就和前端、硬件工程師溝通，確保狀態(tài)同步延遲可控。

3. 視覺語言層（VL）

• 狀態(tài)可讀性：顏色、圖標(biāo)、文字三重區(qū)分設(shè)備狀態(tài)。

• 適配環(huán)境光：在強(qiáng)光與暗光模式下，都保持足夠?qū)Ρ榷取?/p>

• 品牌一致性：全屋不同設(shè)備的 UI 元素（按鈕、開關(guān)、滑桿）保持統(tǒng)一視覺規(guī)范。

落地要點(diǎn)：設(shè)計(jì)規(guī)范提前固化成 UI Kit，減少跨團(tuán)隊(duì)溝通成本。

二、智能家居 UI 的設(shè)計(jì)原則（5 條）

1. 少即是多
   在智能家居中，用戶關(guān)注的是結(jié)果，而不是過程。UI 應(yīng)該優(yōu)先顯示關(guān)鍵狀態(tài)，而非所有數(shù)據(jù)。

2. 預(yù)判而非響應(yīng)
   通過 AI 學(xué)習(xí)用戶習(xí)慣，讓系統(tǒng)提前提供選項(xiàng)（比如傍晚自動(dòng)彈出“開燈+拉窗簾”場(chǎng)景卡片）。

3. 跨端一致性
   手機(jī) App、墻面觸控、平板控制中心要保持一致的視覺與交互邏輯。

4. 留出人工控制權(quán)
   再智能的系統(tǒng)也要讓用戶可以一鍵接管，防止“自作主張”帶來反感。

5. 情緒化體驗(yàn)
   在 UI 動(dòng)效、配色、微交互中加入溫度，讓科技更有人情味。

三、案例拆解

案例 1：Google Nest Hub Max

• 亮點(diǎn)：

  • 大面積卡片布局，場(chǎng)景卡片與單設(shè)備卡片并存。

  • 動(dòng)畫過渡自然，減少“操作跳躍感”。

• 可借鑒點(diǎn)：

  • 使用圖標(biāo)+標(biāo)簽雙保險(xiǎn)提高識(shí)別率。

  • 場(chǎng)景卡片采用溫暖色調(diào)，提升親和度。

案例 2：Aqara Home App（國內(nèi)）

• 亮點(diǎn)：

  • 按空間分組的首頁結(jié)構(gòu)，減少用戶尋找時(shí)間。

  • 支持“自動(dòng)化”卡片，滿足高階用戶需求。

• 可借鑒點(diǎn)：

  • 提供“快速操作欄”，減少點(diǎn)擊層級(jí)。

  • 高對(duì)比度的狀態(tài)色（開=亮色，關(guān)=灰色）適合老人使用。

案例 3：三星 SmartThings

• 亮點(diǎn)：

  • 跨品牌設(shè)備接入能力強(qiáng)，UI 對(duì)多種設(shè)備類型有統(tǒng)一樣式。

  • 分屏模式支持同時(shí)查看多個(gè)設(shè)備狀態(tài)。

• 可借鑒點(diǎn)：

  • 用統(tǒng)一的“設(shè)備卡片模板”降低學(xué)習(xí)成本。

  • 為第三方設(shè)備預(yù)留定制化 UI 區(qū)域。

四、設(shè)計(jì)落地建議

1. 前期用 Figma/Pixso 建立 UI 組件庫，統(tǒng)一按鈕、開關(guān)、滑桿等基礎(chǔ)組件樣式。

2. 與硬件/前端團(tuán)隊(duì)共創(chuàng)交互原型，在低保真階段就驗(yàn)證操作路徑與響應(yīng)速度。

3. 分階段上線：先覆蓋高頻設(shè)備與場(chǎng)景，再逐步擴(kuò)展到低頻功能，避免一次性開發(fā)周期過長。

4. 收集使用數(shù)據(jù)：上線后通過埋點(diǎn)分析用戶點(diǎn)擊路徑，優(yōu)化 IA 和場(chǎng)景卡片順序。

結(jié)語

智能家居 UI 設(shè)計(jì)的挑戰(zhàn)不只是視覺，而是讓不同設(shè)備、不同人群、不同場(chǎng)景融為一個(gè)順暢的體驗(yàn)。
一個(gè)優(yōu)秀的 UI，不是讓用戶覺得“科技很厲害”，而是讓他們感覺——

生活變得更輕松，而這份輕松幾乎是無感的。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

項(xiàng)目背景:

為進(jìn)一步加強(qiáng)沿江沿海岸堤安全防范和綜合治理工作，根據(jù)市委市政府部署牽頭打造江海堤防綜合治理智慧工程。按照?qǐng)?jiān)持“立足預(yù)防、綜合施策”總原則，運(yùn)用互聯(lián)網(wǎng)、大數(shù)據(jù)、云計(jì)算、人工智能等技術(shù)手段，圍繞沿江沿海生態(tài)保護(hù)、禁漁禁采、船舶管理、防汛防臺(tái)、打擊走私、旅游安全管理、灘涂管理、日常風(fēng)險(xiǎn)防控等重點(diǎn)工作，切實(shí)提升綜合治理水平與應(yīng)急處置能力。

堤防綜合治理的實(shí)際需求，包括防洪、排澇、水資源管理等方面的需求，設(shè)計(jì)時(shí)主要考慮實(shí)時(shí)數(shù)據(jù)、監(jiān)測(cè)信息應(yīng)準(zhǔn)確、及時(shí)地展示在界面上，方便用戶了解堤防狀況。利用圖表、地圖等可視化手段，將復(fù)雜的數(shù)據(jù)和信息以直觀的方式呈現(xiàn)給用戶。注意信息的層級(jí)和優(yōu)先級(jí)，確保重要信息能夠突出顯示，預(yù)警信息要突出顯示以便操作人員快速解決。

項(xiàng)目概述

產(chǎn)品定位

建設(shè)“全域覆蓋”技防體系，建立專職巡防隊(duì)伍，推行網(wǎng)格化服務(wù)管理模式， 努力打造“一鍵聯(lián)動(dòng)、一圖展示、一屏指揮”現(xiàn)代化江海堤防綜合治理模式，實(shí)現(xiàn)沿江沿海“全天候、全時(shí)段、全過程”巡防監(jiān)控，及時(shí)發(fā)現(xiàn)、處置各類違法違規(guī)行為和風(fēng)險(xiǎn)隱患，構(gòu)建職責(zé)清晰、分級(jí)負(fù)責(zé)、上下貫通、部門聯(lián)動(dòng)、運(yùn)行高效的江海堤防綜合治理體系。

目標(biāo)用戶

工程管理人員：負(fù)責(zé)監(jiān)督和管理整個(gè)堤防治理工程，需要實(shí)時(shí)監(jiān)控各項(xiàng)指標(biāo)和數(shù)據(jù)；

政府監(jiān)管部門：相關(guān)環(huán)保、水利或城建等部門的監(jiān)管人員，需要監(jiān)控工程進(jìn)度和效果，確保符合標(biāo)準(zhǔn)；

緊急應(yīng)急人員：負(fù)責(zé)處理突發(fā)事件和緊急情況的人員，需要快速獲取現(xiàn)場(chǎng)信息做出相應(yīng)反應(yīng)；

研究人員：從事相關(guān)領(lǐng)域研究的學(xué)者或科研人員，可能需要獲取實(shí)時(shí)數(shù)據(jù)進(jìn)行分析和研究。

設(shè)計(jì)風(fēng)格

藍(lán)色科技感設(shè)計(jì)風(fēng)格以藍(lán)色為主導(dǎo)色調(diào)，突出冷靜、專業(yè)和現(xiàn)代感。運(yùn)用深淺不同的藍(lán)色調(diào)配合白色字體，呈現(xiàn)出科技感強(qiáng)烈的視覺效果。高對(duì)比度的設(shè)計(jì)風(fēng)格使關(guān)鍵信息更突出，GIS動(dòng)態(tài)效果和互動(dòng)元素增加用戶體驗(yàn)。藍(lán)色科技感設(shè)計(jì)常見于科技產(chǎn)品、數(shù)字平臺(tái)，傳達(dá)著穩(wěn)健、創(chuàng)新與可靠性的形象，吸引注重技術(shù)與現(xiàn)代感的受眾，展現(xiàn)出科技與未來的融合之美。

設(shè)計(jì)亮點(diǎn)

 

 

 

數(shù)據(jù)信息整合，增加關(guān)鍵數(shù)據(jù)，助力用戶風(fēng)險(xiǎn)管理

左側(cè)信息之前有“風(fēng)格不統(tǒng)一、圖表樣式不美觀、環(huán)形圖顏色搭配不協(xié)調(diào)、有些文字在深色界面上顯示不清晰”等痛點(diǎn)。

 

在設(shè)計(jì)過程中增加了「氣象要素」模塊，因?yàn)樘岱腊l(fā)生災(zāi)害多半可以和天氣相掛鉤的，增加氣象要素可以很好的預(yù)測(cè)未來的天氣現(xiàn)象，在有極端天氣的時(shí)候可以提前做預(yù)防工作，最大程度減少損失。同時(shí)將巡更、巡檢和視頻的統(tǒng)計(jì)整合在一起輪播顯示，可以增加顯示數(shù)據(jù)的區(qū)域。

清晰化數(shù)據(jù)展示提高可讀性

右側(cè)主要是原型主要是平臺(tái)視頻的統(tǒng)計(jì)，主要有顯示數(shù)據(jù)比較單一，模塊排版不清晰，數(shù)據(jù)展示不清晰等痛點(diǎn)。

 

調(diào)整后增加了「物資情況」「巡查打卡明細(xì)」「人員職責(zé)表」等模塊，在減少操作的技術(shù)上展示更多的信息量。最上邊的視頻區(qū)域分成「視頻監(jiān)控」「PPT展示」和「無人機(jī)」展示三個(gè)部分。整個(gè)右側(cè)模塊排版清晰，便于用戶查找信息，從而提高工作效率。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

Shipp-Logistics 交付管理應(yīng)用 / UI/UX 設(shè)計(jì)

Shipp-Logistics 是一款面向中小型物流公司的交付管理應(yīng)用，旨在提升配送效率、簡化任務(wù)分配流程，并為司機(jī)提供清晰、可操作的任務(wù)指引。

本項(xiàng)目從用戶研究出發(fā)，圍繞“調(diào)度員-司機(jī)”雙端交互流程，設(shè)計(jì)了完整的任務(wù)創(chuàng)建、路線規(guī)劃、實(shí)時(shí)追蹤與狀態(tài)回報(bào)機(jī)制。UI風(fēng)格采用模塊化信息呈現(xiàn)+中性色調(diào)，兼顧操作高頻與環(huán)境復(fù)雜下的可讀性與點(diǎn)擊效率。

關(guān)鍵設(shè)計(jì)亮點(diǎn)包括：

• 多狀態(tài)任務(wù)卡片，支持動(dòng)態(tài)狀態(tài)變更與實(shí)時(shí)反饋；

• 簡化版地圖追蹤視圖，適配駕駛場(chǎng)景下的快速瀏覽需求；

• 高對(duì)比度操作按鈕與一致性的底部導(dǎo)航，強(qiáng)化操作路徑記憶；

• 針對(duì)司機(jī)端的語音播報(bào)與一鍵導(dǎo)航設(shè)計(jì)，降低認(rèn)知負(fù)擔(dān)。

• 

  蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

Platformcraft 是一款來自俄羅斯的商業(yè)級(jí)云存儲(chǔ)產(chǎn)品，致力于為企業(yè)提供穩(wěn)定、安全且高效的文件管理與協(xié)作服務(wù)。其品牌視覺以字母“P”與云的圖形結(jié)合為核心，簡潔而富有科技感，象征著平臺(tái)（Platform）與云端（Cloud）之間的高度融合。

從設(shè)計(jì)語言來看，Platformcraft 的標(biāo)志設(shè)計(jì)強(qiáng)調(diào)結(jié)構(gòu)感與數(shù)字秩序：

• 標(biāo)識(shí)構(gòu)建基于幾何網(wǎng)格，提升在不同尺寸與場(chǎng)景下的可識(shí)別性；

• 色彩采用深藍(lán)與漸變紫，傳達(dá)出專業(yè)性與技術(shù)前沿感；

• 在圖標(biāo)使用上，適配度極高，無論是在 Dock 欄、移動(dòng)端應(yīng)用或印刷場(chǎng)景中都保持極佳的清晰度與一致性。

這套視覺系統(tǒng)不僅提升了品牌辨識(shí)度，也為其云服務(wù)產(chǎn)品賦予了可信賴的第一印象，是典型的“技術(shù)驅(qū)動(dòng) + 品牌精致化”結(jié)合的典范設(shè)計(jì)。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

今天看到這么一個(gè)問題：

我想說，這真是一個(gè)好問題！可能會(huì)有如下答案：

●Excel的數(shù)據(jù)透視表操作麻煩，用BI拖拽一下就能有結(jié)果
●整合多源數(shù)據(jù)，很多型其他數(shù)據(jù)可以一起分析了
●視覺化快速、美觀，尤其是聯(lián)動(dòng)的功能

作為一個(gè)從事資料行業(yè)多年的人，我覺得最后一個(gè)是比較有意義的：視覺化。

可能很多人都不懂什么叫聯(lián)動(dòng)，看這個(gè)：

將顯示縮放圖像

很好理解，就是讓數(shù)據(jù)動(dòng)起來，Excel和PPT必備這樣，需要長久，而且效果要差顯著。

說到BI，可能很多人不了解，那報(bào)表總該接觸過吧，兩者的視覺化都是類似的，這也是比較重的。

想要快速、簡單，不用方案碼，就能實(shí)現(xiàn)可視化嗎？

首先不說會(huì)用工具，我覺得模板才是最重要的，工具學(xué)起來可能會(huì)很長久，但是模板直接，可以用，而且重要的是：財(cái)務(wù)營銷、銷售營銷等。

FineReport做化有一套方法，而且里面的生活化模板很不錯(cuò)：

將顯示縮放圖像

將顯示縮放圖像

將顯示縮放圖像

將顯示縮放圖像

什么？沒看到癮？直接看大屏！

將顯示縮放圖像

將顯示縮放圖像

覺得難，你也能做出來。點(diǎn)擊FineReport免費(fèi)試用，還有更多演示供你選擇，總有一款適合你，別點(diǎn)擊大屏演示等你來體驗(yàn)。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

先來看幾張高校迎新大屏：

西北工業(yè)大學(xué)

將顯示縮放圖像

浙江農(nóng)林大學(xué)

將顯示縮放圖像

資料有限，大概做到了這樣一個(gè)迎新大屏：

將顯示縮放圖像

接下來是制作步驟

教程只是視覺講化demo的制作過程唷，硬體部分不涉及啦

1、確定主題及展示指標(biāo)

在設(shè)計(jì)可視化駕駛艙或大屏的時(shí)候，我們第一步要先確定我們大屏/駕駛艙的主題，然后列出我們想要在這張大屏上想要展示的數(shù)據(jù)指標(biāo)和分析維度

主題：學(xué)校迎新大屏，通過對(duì)學(xué)校招生資料以及教職人員資料分析，向新生展示學(xué)校招生情況及學(xué)校師資力量、辦學(xué)能力

主要分析維度如下：

各省份新生招生人數(shù)分析
歷年各省招生情況分析
迎新資師隊(duì)伍各
師資力量分析
辦學(xué)規(guī)模分析
歷年本科升學(xué)率趨勢(shì)分析
學(xué)校初步支出結(jié)構(gòu)分析
在校學(xué)生學(xué)歷結(jié)構(gòu)分析

2、根據(jù)資料關(guān)系選擇合適的圖表

關(guān)于圖表的選擇，看我前面兩天寫的圖表應(yīng)用指南：不知道用什么圖表展示數(shù)據(jù)？看下面這份圖表選擇指南就夠了，根據(jù)數(shù)據(jù)之間的關(guān)系選擇合適的圖表，可以參照這張經(jīng)典的圖表：

將顯示縮放圖像

將顯示縮放圖像

3、駕駛艙排版設(shè)計(jì)

根據(jù)確定好的分析指標(biāo)進(jìn)行排版，排版要注意主次分明，讓讀者瞬間看到重點(diǎn)資訊，提高資訊傳遞的效率，把核心練習(xí)指標(biāo)放在中間位置、占更大面積，一般都會(huì)將動(dòng)態(tài)效果豐富的地圖放在主要位置，抓住讀者眼球，次要指標(biāo)螢?zāi)环旁趲资畟€(gè)屏幕上。還有一些輔助分析的內(nèi)容，可以通過圖表聯(lián)動(dòng)、鉆取體現(xiàn)。

可以參考如下幾種布局方式：

將顯示縮放圖像

我的布局：

將顯示縮放圖像

4、城市化模板制作

模板的制作，我用的是FineReport，做視覺化大屏非常專業(yè)，基本上不用寫什么程序碼就可以開發(fā)視覺化大屏，多一個(gè)低程序碼的報(bào)表開發(fā)平臺(tái)吧。剛感興趣的話可以下載一個(gè)和我一起試試看

軟體激活碼迭代這里，話不多說，上教程：

打開finereport，創(chuàng)建一張決策報(bào)表：

將顯示縮放圖像

新建數(shù)據(jù)集，然后用sql查詢語句從數(shù)據(jù)庫中提取數(shù)據(jù)，可以新增省份數(shù)據(jù)庫數(shù)據(jù)，也可以直接上傳檔案數(shù)據(jù)集，定義地區(qū)引數(shù)，關(guān)聯(lián)歷年各省招生數(shù)據(jù)和各分招生數(shù)據(jù)（實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)），其他的取數(shù)據(jù)報(bào)表我不用一一發(fā)貨來，大家可以自己根據(jù)需求寫

將顯示縮放圖像

決策報(bào)表采用的是易用式布局，可以拖拽便捷布局，根據(jù)之前設(shè)計(jì)的布局排版將所有圖表元件按照布局設(shè)計(jì)順序拖放到對(duì)應(yīng)位置：

將顯示縮放圖像

這里面我用到了兩個(gè)圖表外掛，滾動(dòng)字幕和數(shù)字時(shí)鐘外掛，大家可以在一些外掛商城免費(fèi)下載，點(diǎn)選服務(wù)器>外掛管理就可以找到這些外掛啦，當(dāng)然你還可以找到其他你心儀的外掛。

將顯示縮放圖像

字幕滾動(dòng)效果和數(shù)據(jù)時(shí)鐘效果：（我錄的不是很清楚抱歉><）

然后分別給圖表元素類型設(shè)置其他、數(shù)據(jù)、樣式、效果，以中間的地圖設(shè)置為例：

將顯示縮放圖像

其他圖表元件的數(shù)據(jù)和效果設(shè)定我這里就不贅述了

到這一步，基本上駕駛艙的雛形就做完了，我們可以對(duì)背景圖、最后的細(xì)節(jié)進(jìn)行美化，背景可以選擇顏色或者是圖片，做的匆忙我不想找背景圖，直接用的顏色，點(diǎn)選機(jī)身>樣式進(jìn)行設(shè)置

將顯示縮放圖像

為了更好的視覺效果我們還可以給圖表新增主題，增加大屏科技感，比如我們的大屏主題：

點(diǎn)選標(biāo)題背景塊>屬性>樣式，上傳圖片設(shè)置：

將顯示縮放圖像

最后儲(chǔ)存模板，點(diǎn)選預(yù)覽，效果如下（嘻嘻還是用的上面那張圖）：

看著？是不是還挺酷炫的！其實(shí)這樣的大屏制作起來并不難，趕緊學(xué)習(xí)起來引爆你的SNS吧XDDD

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 一、視覺魅力：營造沉浸式數(shù)據(jù)空間

深色背景是天然的聚焦器，能讓亮色數(shù)據(jù)元素“跳”出來。比如在監(jiān)控大屏上，紅色預(yù)警指標(biāo)、熒光綠的實(shí)時(shí)數(shù)據(jù)曲線，在黑色或深灰色背景襯托下，瞬間抓住目光，使關(guān)鍵信息不被繁雜內(nèi)容淹沒。這種高對(duì)比度，就像舞臺(tái)追光燈，把核心數(shù)據(jù)推到視覺C位，讓決策者第一時(shí)間捕捉關(guān)鍵。 

同時(shí)，深色大屏自帶科技感與專業(yè)感濾鏡。在智慧工廠、航空指揮等場(chǎng)景，深色調(diào)契合行業(yè)對(duì)精準(zhǔn)、嚴(yán)謹(jǐn)、前沿的追求，營造出沉浸式工作氛圍，仿佛置身數(shù)據(jù)宇宙，每一個(gè)閃爍的數(shù)字、流轉(zhuǎn)的圖表，都是探索業(yè)務(wù)規(guī)律的星芒，提升用戶對(duì)數(shù)據(jù)價(jià)值的感知。

 二、設(shè)計(jì)要點(diǎn)：平衡美觀與實(shí)用

（一）色彩搭配：精準(zhǔn)傳遞數(shù)據(jù)含義

色彩是數(shù)據(jù)的“情緒符號(hào)”。除了利用高對(duì)比突出重點(diǎn)，還要為不同數(shù)據(jù)類型定制色彩規(guī)則。比如健康醫(yī)療大屏，綠色系展示正常生理指標(biāo)，黃色預(yù)警潛在風(fēng)險(xiǎn)，紅色標(biāo)識(shí)緊急狀況，讓醫(yī)護(hù)人員通過顏色快速判讀患者狀態(tài)；金融大屏里，綠色代表收益、紅色象征虧損，直觀反映資金流向與盈虧情況，形成視覺化“數(shù)據(jù)語義網(wǎng)” 。

（二）布局邏輯：構(gòu)建清晰信息層次

大屏數(shù)據(jù)繁雜，布局要像搭建“信息金字塔”。把最核心、最需高頻關(guān)注的數(shù)據(jù)（如總覽性指標(biāo)、實(shí)時(shí)警報(bào)）放在視覺黃金區(qū)（通常是中間或上部）；次要的趨勢(shì)分析、分類數(shù)據(jù)，有序分布在周邊。像智慧交通大屏，中心展示實(shí)時(shí)擁堵熱力圖與事故警報(bào)，側(cè)邊陳列歷史通行數(shù)據(jù)、區(qū)域流量對(duì)比，既保證決策層抓重點(diǎn)，又滿足分析層挖細(xì)節(jié)，讓信息流動(dòng)符合業(yè)務(wù)思考路徑。

（三）動(dòng)效與交互：激活數(shù)據(jù)生命力

適度動(dòng)效是數(shù)據(jù)的“動(dòng)態(tài)說明書”。實(shí)時(shí)更新的數(shù)據(jù)流、閃爍的新數(shù)據(jù)點(diǎn)、平滑切換的圖表狀態(tài)，能直觀展現(xiàn)數(shù)據(jù)變化趨勢(shì)。比如能源監(jiān)控大屏，電量流動(dòng)的動(dòng)態(tài)效果，模擬電力傳輸路徑；交互上，支持鉆取（點(diǎn)擊圖表深入查看細(xì)分?jǐn)?shù)據(jù)）、篩選（按時(shí)間/區(qū)域等維度過濾），讓用戶從“看數(shù)據(jù)”升級(jí)為“探索數(shù)據(jù)”，挖掘隱藏在可視化背后的業(yè)務(wù)邏輯。 

 三、場(chǎng)景適配：讓深色大屏“對(duì)癥下藥”

在不同行業(yè)，深色大屏發(fā)揮獨(dú)特價(jià)值。軍事指揮中，深色降低反光，適應(yīng)作戰(zhàn)室暗光環(huán)境，戰(zhàn)略地圖、兵力部署等數(shù)據(jù)在深色底上清晰呈現(xiàn)，保障指揮決策高效；能源監(jiān)控場(chǎng)景，深色調(diào)凸顯能源數(shù)據(jù)的精密與嚴(yán)肅，實(shí)時(shí)電量、管道壓力等信息動(dòng)態(tài)更新，助力能源調(diào)度精準(zhǔn)；文化場(chǎng)館的大數(shù)據(jù)展示，深色大屏搭配藝術(shù)化可視化設(shè)計(jì)，將觀眾流量、互動(dòng)數(shù)據(jù)等轉(zhuǎn)化為炫酷視覺作品，兼具科技感與藝術(shù)氛圍。 

深色大屏頁面的大數(shù)據(jù)可視化設(shè)計(jì)，是一場(chǎng)平衡美學(xué)與功能、貼合場(chǎng)景與需求的創(chuàng)作。它以深色為底，繪就數(shù)據(jù)的千般模樣，讓冰冷數(shù)字變成可感知、可交互、能驅(qū)動(dòng)決策的“活信息”，在智慧化浪潮中，持續(xù)拓寬數(shù)據(jù)可視化的表達(dá)邊界，為各行業(yè)洞察數(shù)據(jù)本質(zhì)、挖掘價(jià)值，打造專屬的“視覺洞察窗口” ，引領(lǐng)我們?cè)跀?shù)據(jù)深海中，精準(zhǔn)捕撈業(yè)務(wù)增長的“寶藏”。