首页
/
每日頭條
/
生活
/
自己做自動化屏幕教程
自己做自動化屏幕教程
更新时间:2024-10-04 19:11:02

自己做自動化屏幕教程?之前,老李分享了:全網最詳細教程(上):教你如何從0-1制作出一張可視化大屏粉絲覺得幹貨滿滿,催着老李我盡快出教程後半段,這不今天就來了,這篇依舊幹貨十足,先收藏!,我來為大家科普一下關于自己做自動化屏幕教程?以下内容希望對你有幫助!

自己做自動化屏幕教程(全網最詳細教程)1

自己做自動化屏幕教程

之前,老李分享了:全網最詳細教程(上):教你如何從0-1制作出一張可視化大屏!粉絲覺得幹貨滿滿,催着老李我盡快出教程後半段,這不今天就來了,這篇依舊幹貨十足,先收藏!

我們主要講了大屏制作的第一步和第二步,在開始前我們再回顧一下。

  • 第一步:跟業務人員進行需求調研,确定3份文檔的準備,确保我們在設計開發初期就明确了設計方向

  • 第二步:大屏視覺設計準備,主要是确定好大屏的布局方案、配色方案、字體及組件樣式

    今天在(下)篇,我們會繼續講第三步到第七步,從大屏模闆制作→動态特效補充→細節調整→大屏視覺及硬件調試→上線運行原創不易,如果有幫助的話,請點贊支持~

    ------------------------------------正文開始---------------------------------

    第三步:大屏制作

    (主要思路:新建空白大屏畫布→選擇大屏主題→選定圖表組件并綁定相應數據→預覽大屏)

    在第一二步的需求确定 數據整理 素材準備都做好後,我們就可以開始第三步的大屏制作了。用到的工具還是FineReport,獲取方式見文末。

    廢話不多說,直接開搞!

  • step1:打開FineReport,新建一張空白的可視化大屏畫布/直接選擇一個布局模闆

    如果你是想自己設計大屏布局,就直接新建空白模闆,如果懶得自己設計,可以直接選擇FR裡自帶的布局模闆(即圖中選擇模闆處),像我一般就直接選自帶的模闆,比較方便。

  • step2:在選完大屏布局後,選擇大屏主題

    新建畫布時,會有一個默認的主題,但是我們一般會根據實際情況去選一個合适的主題。

    比如如果是需要展示用的大屏,我一般就會選用下面下面3個深藍綠色系的風格,如果是日常報表展示的話,我個人就會更偏向上面四個淺色系的,因為比較經常看,如果選擇視覺沖擊比較強的深色系的話,會比較壓抑。

  • step3:新建數據集,綁定大屏中各個組件的數據來源

    當我們選擇完大屏主題後,就該把大屏中每個組件與其需要展示的數據綁定起來。具體操作的話,就是通過sql語句取出要用到的數據集,簡單的大屏用select ... from語句就足矣。

  • step4:拖拽組件到畫布中,調整大屏整體樣式

    在第三步,我們将組件和其數據源綁定起來,那第四步要做的就是從參數面闆、空白塊、圖表塊、控件面闆中選擇想要的組件拖拽到畫布中,并調整可視化大屏的整體樣式。

  • step5:确定最終的組件圖表類型/樣式/特效

    第五步主要就是對拉到畫布上的組件,進行設計,主要包括組件的圖表類型、數據、樣式、特效等。

  • step6:預覽大屏,調試組件及最終布局

    在确定完組件樣式後,就可以預覽可視化大屏,能直接在浏覽器中調整組件的位置大小。

    自己做自動化屏幕教程(全網最詳細教程)

    第四步:動态特效補充

    對于特定的大屏場景,我們是需要添加一些動态輪播、消息滾動、告警線/圖表閃爍動畫的效果補充。

    以高速監控為例,在下圖的大屏中,依次遍曆了山東省每個市的高速收費數據,通過動态輪播引導觀看者了解每個市區的信息,做到信息表達完整的同時,也讓大屏界面保持整潔。

    以政府平台為例,一天内會有多條通知發布,這時候就可以使用“消息滾動“,去顯示多條消息文本(例如下圖右下角的“最新動态”),以滾動的形式展示即不需要太大的空間,又可以通過動态效果引起注意。

    自己做自動化屏幕教程(全網最詳細教程)

    以生産監控為例,在生産過程中需要非常注意異常數據,保證生産的順利。所以我們在做監控看闆時,常需要對監控用的圖表設置一條警戒線,同時對低于警戒線數值的系列,設置條件變色和閃爍動畫效果,突出異常數據,例如下圖的左半部分,就是用警戒線和紅色來提醒觀看者數據的變化。

    自己做自動化屏幕教程(全網最詳細教程)

    第五步:細節調整

    大屏制作好後,還需要經過一些細節調整,讓大屏整體效果更ok。

    下面6點是我總結的大屏常見視覺問題,你們在做完後可以對照檢查下,是否有踩坑:

  • 1.組件不對齊

  • 2.模塊間無邊框感

  • 3.圖表或圖片拉伸變形

  • 4.沒有留白

  • 5.使用過多色塊/配色太亮眼/太不顯眼

  • 6.文字之間無對比區别

    第六步:大屏視覺及硬件調試

    視覺方面

    主要看下關鍵視覺元素、字體字号、頁面動效、圖表是否有按預期顯示、有無變形、錯位等情況,在上方細節調整的基礎上再次優化。

    硬件性能與數據方面

  • 圖形圖表動畫是否流暢、數據加載和刷新有無異常;

  • 頁面長時間展示是否會存在崩潰、卡死的情況;

  • 後台控制系統能否正常切換前端頁面顯示。

    大屏投屏電腦推薦配置:

    硬件

    配置

    CPU

    Intel(R) Core(TM) i7-10700CPU @ 2.90GHZ 2.90GHz

    内存

    16.0GB

    顯卡

    獨立顯卡 GeFORCE GTX 1660 SUPER 0 SUPER

    操作系統

    Windows 10

    第七步:大屏上線運行

    按照經驗來看,這部分主要關注兩個問題:

    1、熄屏問題:由于投屏電腦的屏保限制,大屏運行一段時間後有可能會自動熄屏,大屏上線運行前要提前設置好熄屏時長;

    2、播放周期問題:如果大屏需要輪播演示,那就要提前測試好演示者和大屏輪播的配合度,調整輪播時間的間隔。例如下圖這張銷售數據大屏,一共有3張模闆要輪播,在切換或輪播場景的同時輪播了模闆,所以需要提前測試好演示者和大屏輪播的配合度。

    小結:

    對于可視化大屏的制作,其實我已經寫過很多了,但是平常寫的比較分散,大都是針對各流程模塊寫的,比如圖表顔色的選取,大屏模闆如何套用,怎麼制作動态特效等。所以也讓很多我的讀者還不太清楚整個可視化大屏的完整制作流程。

    花了好幾個晚上,把一套完整制作流程寫了出來,可能還有些缺漏,但整體來說差不多夠用了,有想補充的,可以收藏一波等我更新,我會後續再補上,

    看了這麼多,不如自己動手做一張吧,回複“模闆”即可獲取工具 40套大屏模闆!

  • Comments
    Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
    Sign up to post
    Sort by
    Show More Comments
    推荐阅读
    三伏天用什麼排濕氣寒氣最好?
    三伏天用什麼排濕氣寒氣最好?
    01伏天去濕氣寒氣的辦法:1、少吃甜、膩的食物。如果你身體有濕氣少吃甜膩食物,因為甜膩容易轉化為濕氣。2、别吃生冷食物。3、别喝酒。4、可以多吃姜去寒濕。5、可以多吃綠豆、西瓜、扁豆來去濕寒氣。三伏天是一年中最熱的時候,這段時間也是冬病夏治的好時候,非常适合排除體内的寒濕,伏天去濕氣寒氣的辦法:1、...
    2024-10-04
    巧開鏽鎖
    巧開鏽鎖
    巧開鏽鎖的材料:普通白紙、鉛筆、一把小刀。巧開鏽鎖步驟:1、把白紙墊在桌子上,把鉛筆芯削成粉末。2、把削下來的鉛筆芯,倒在鎖眼裡,同時也可以把鉛筆芯塗在鑰匙上,然後就可以鑰匙插進去,就像這樣,先反複多插幾次,讓鑰匙和鎖之間充分潤滑,同時破壞掉鐵鏽,最後就可以慢慢的試試左右擰開了。
    2024-10-04
    什麼是政治條件兵?
    什麼是政治條件兵?
    政治條件兵就是政治條件較高,現實表現良好,本人及親屬無違法犯罪行為,個人形象較好的兵種。比如到北京衛戍區,在中央,軍隊高層領導身邊和重要部門當警衛人員等,對政治條件要求更高。政治條件兵就是政治條件較高,現實表現良好,本人及親屬無違法犯罪行為,個人形象較好的兵種。政治兵在新兵連的訓練和普通士兵一樣,但...
    2024-10-04
    圍棋怎麼下
    圍棋怎麼下
    圍棋現在比較流行的一種棋牌類型,主要是取決于中國,格狀的棋盤以及黑白二子去進行對弈,同時進行以為地的大小來決定勝負,中國的時候對于圍棋是非常講究的,是一樣樣精通的這樣的說法,是目前世界上最複雜的遊戲,不僅動腦,需要很多講究很多的戰術,而且需要非常透徹地理解圍棋,那麼很多人那堆圍棋怎麼進行下的也是不清...
    2024-10-04
    布藝沙發清洗方法詳解
    布藝沙發清洗方法詳解
    布藝沙發清洗方法詳解布藝沙發清洗方法詳解1、一般清洗流程:可以選用專用的布藝清潔劑。首先用幹淨的白布蘸上少量清潔劑,在弄髒了的地方反複擦拭,直到污漬去掉。為免留下印迹,最好是從污漬的外圍抹起。切忌大量用水擦洗,以免水滲入沙發的内層,造成沙發裡邊框受潮、變形、沙發布縮水,影響沙發的整體外觀造型。2、有...
    2024-10-04
    Copyright 2023-2024 - www.tftnews.com All Rights Reserved