手把手教程!五步解鎖移動領導駕駛艙製作

2020-12-23 億信華辰軟體

移動領導駕駛艙作為移動BI的核心應用,通過實時圖形化展示業務指標數據,能夠讓企業領導者像在汽車駕駛艙裡面對儀錶盤一樣,直觀地監測企業運營情況,並對異常關鍵指標預警和挖掘分析,實現決策分析無處不在的實時動態管理。

眾所周知,企業領導者不可能長時間坐在電腦前,行動裝置成為必須使用的終端。因此,移動端可視化分析對於企業領導者來說意義重大。

今天,教大家製作移動領導駕駛艙,只需掌握好下面的5個步驟就可以刷刷刷「變」出漂亮的領導駕駛艙!這裡以資產日報駕駛艙為例,介紹一個完整的駕駛艙搭建實例,手把手教你搭建移動駕駛艙。

以下跳過了數據準備和數據清洗的步驟,直接從駕駛艙的設計上手。使用工具:億信ABI

第一步:理清需求,設計草圖

領導駕駛艙呈現的數據是領導最關注的,也是最匯總的數據,可以讓領導一眼就看明白數據重點、形勢走向,以便及時做出精準判斷,有效決策。

比如上圖是資產日報移動駕駛艙頁面。首先要搞清楚資產日報最關注的是什麼:資金來源、資金支出、資金結餘結構。這張頁面的重點就圍繞這個三個關注點展開來,然後依靠時間來展示這三個關注點。

這就需要整理出駕駛艙會包含的內容,可通過思維導圖進行梳理。這個環節就是去梳理展示什麼主題、什麼維度、什麼指標,以及報表需要實現的分析、交互等功能,比如怎麼跳到其他條線駕駛艙去看數據,進行分析,以及這個領導駕駛艙會給予公司管理什麼樣的支撐。期間需要不斷和業務方溝通,最好能畫出demo,引導一起思考,給出合理建議。所謂前期多溝通,後期才少返工嘛。

第二步:布局設計

根據第一步的設計稿規劃報表布局。布局看似簡單,其實是很重要的一個步驟,需要縱觀整個頁面的排版情況,充分考慮各組件的擺放位置。也要重複考慮移動端自適應。各個手機、平板解析度差異很大,所以要滿足移動端報表的自適應規則。

最簡單流式布局,將所有關注點均以平鋪的方式展開,能夠快速一覽數據內容。

以上圖駕駛艙為例,在億信ABI中布局如下圖所示,灰色虛線為布局組件的劃分,勾選「手機自動排版」。

APP計算時,會根據布局代碼成流式布局,並每個布局自動水平撐滿來滿足不移動端的屏幕大小。

第三步:基本元素設計

布局中數字和圖形是主要組成元素,佔據了絕大多數版面,要達到更好的展現效果就需要發揮不同元素的特長。

(1)數字

數字的表達,直觀、簡潔,且佔用空間少,是最直接展示方式。在移動駕駛艙場景中適合應用於重點業務指標的展示,在報表的最顯眼位置放入諸多重點數字可以快速地一覽業務的全貌。

其缺點在於無法更深入地了解數字的背後的趨勢,佔比,分布等更深層次的含義。

(2)圖形

圖形在數據內容的表達上表現得更豐富,在視覺上也能達到更好的效果。在移動駕駛艙場景中適合應用於業績達成率、重點指標走勢等,以便用戶對業績現狀與趨勢有更加直觀的把控。

就使用者而言,移動端報表講究隨時獲取,所以在設計上,需要避繁就簡,直擊重點。比如:資金來源分四類現金流入,四大類型用表格顯示,現金金額則用數字直觀表達出來。像下圖資金來源佔比分析,使用佔比圖表達出來更為豐富,更為直觀。

第四步:對接數據

報表的布局、美觀很重要,但是數據的有效性依然是第一位的,如果報表脫離了數據價值本身,那再好看也沒有任何意義。

在億信ABI中,所有展示組件的數據來源都可以通過表格來獲取,所以需要將業務數據對接到億信ABI中後,通過表格給統計圖等組件提供數據。

第五步:細節美化

最後需要對我們製作的分析展現進行美化,包括設置背景顏色、邊框樣式、文字顏色、大小、統計圖配色、添加圖片一個都不能少喔,做出來的領導駕駛艙一定美美噠。友情提示:不要忘記設置統計圖提示信息的樣式和表格的整行高亮及選中樣式。

當然,駕駛艙製作的最後一個重要步驟就是加入動態的效果以及一些細節優化。所謂「死的表格不如動的圖形」,我們不僅要努力讓大家能夠解讀數據,還要讓他們還可以輕鬆甚至愉快地完成這些工作。

悄悄告訴你,億信ABI中有很多可以實現的動態效果,比如自動輪播、播放組件、時間滑動軸等等。當然,還可以在整個報表的整體設置中添加腳本,通過腳本來完成自定義樣式的設計等,方便了前端開發人員快速實現一些動態效果。

以上就是通過億信ABI從移動端設計的思路梳理的移動駕駛艙製作教程,當然在具體實施過程中,需要全局把控,從報表結構、數據選擇、主頁設計、元素搭配組合等方面著手設計,循序漸進,這必然是一個不斷打磨的過程。

相關焦點

  • 移動領導駕駛艙如何製作?移動駕駛艙app
    移動領導駕駛艙作為移動BI的核心應用,通過實時圖形化展示業務指標數據,能夠讓企業領導者像在汽車駕駛艙裡面對儀錶盤一樣,直觀地監測企業運營情況,並對異常關鍵指標預警和挖掘分析。領導駕駛艙所具有直觀性、全面性、方便性、多維性和可配置性,能極大地輔助企業領導者了解相關決策信息, 抓住主要問題和問題的主要方面,對潛在問題提早預警,從而使企業更好地實現經營和領導目標。眾所周知,企業領導者不可能長時間坐在電腦前,行動裝置成為必須使用的終端。因此,移動端可視化分析對於企業領導者來說意義重大。今天,就手把手教你搭建移動駕駛艙。
  • 領導駕駛艙完整製作攻略送上
    而在企業業務流程管理中,「駕駛艙」可以幫助企業管理者儘可能清楚地查看更多企業活動信息,因此,我們稱之為「領導駕駛艙」,國外稱之為Dashboard。當領導需要了解業務中發生的事情,同時保持日常運營控制時,領導駕駛艙能夠幫助快速做出戰術決策提供可靠的信息。
  • 領導駕駛艙大數據平臺的實施流程是怎麼樣的?
    如今的大數據時代,管理者都喜歡引入一款領導駕駛艙大數據平臺到日常管理中,讓工作更有效率。領導駕駛艙的理念已經非常流行也深受喜愛。但是,工具用不好,發揮不了作用,依舊是徒勞無功的事情。那領導駕駛艙大數據平臺該怎麼去實施?
  • BI領導駕駛艙在企業中逐漸佔領地位
    正如汽車駕駛需要儀錶盤一樣,企業經營管理也需要「駕駛艙」,及時為管理者提供所需要的數據以及預警的措施,從而保證正常高效的運營。除此之外,對於很多大型企業,領導駕駛艙的搭建不僅僅能夠幫助決策,還可以跟外界展現企業能力,所以不少企業會將領導駕駛艙做成大屏放在接待中心。
  • 領導駕駛艙如何助力領導做決策?
    有道是亂世出英雄,領導駕駛艙應勢橫空而出。領導駕駛艙是基於ERP的高層決策支持系統。通過詳盡的指標體系,實時反映企業的運行狀態,將採集的數據形象化、直觀化、具體化,幫助管理者全局掌握企業實時運營狀況,更精準地做決策,促進業務的發展。而Smartbi就可以做這樣的領導駕駛艙。
  • 管理駕駛艙系統有什麼價值?移動駕駛艙解決方案
    Smartbi某行長移動駕駛艙案例Smartbi管理駕駛艙系統項目背景:隨著金融改革創新和現代信息技術的發展,金融企業正在經歷著一場巨大的挑戰:監管機構對銀行實施越來越嚴格的監管,包括銀行經營指標的監測,以及IT建設的指引;客戶對金融服務的需求越來越高,也推動了銀行迅速提升業務管理水平。
  • 《迷你 》飛劍製作圖文教程 手把手教你打造屬於自己的飛劍
    :原標題:《迷你世界》飛劍製作圖文教程 手把手教你打造屬於自己的飛劍 《迷你世界》是一款高度自由的休閒類3D沙盒遊戲,有著非常方便快捷的多人聯機模式,在這裡,你能夠隨心所欲創造一切,那麼《迷你世界》飛劍怎麼做?
  • BI領導駕駛艙-讓公司高層體驗「駕駛」的感覺
    「 BI領導駕駛艙」的出現無疑順應了BI的發展趨勢,也為企業高管創造了虛擬的辦公環境。BI領導駕駛艙是一個管理信息中心系統,為企業高管提供「一站式」決策支持。以億信ABI為例,BI領導駕駛艙的功能特點主要體現在以下幾個方面:1.直觀性進入駕駛艙頁面就像進入汽車駕駛艙一樣,各種圖形界面(例如壓力錶盤)將顯示在您的面前。與汽車駕駛艙不同,這些圖形反映了企業中的各種經濟狀況。
  • 我的世界鐵軌製造機製作圖文方法 手把手教你鐵軌製造機怎麼製作
    我的世界鐵軌製造機製作圖文方法 手把手教你鐵軌製造機怎麼製作時間:2020-04-13 16:06   來源:小皮手遊網   責任編輯:沫朵 川北在線核心提示:原標題:我的世界鐵軌製造機製作圖文方法 手把手教你鐵軌製造機怎麼製作 我的世界手遊中鐵軌需要用到的材料很複雜,而鐵軌又是紅石的機器裡面必不可少的,還有很多小夥伴不會製作鐵軌
  • PS教程:製作翻動手機圖片的GIF動態教程
    【解鎖會員】支持微信公眾號+小程序+APP+PC網站多平臺學習哈嘍大家好,我是愛知趣小艾老師,今天給大家帶來一個製作手機翻頁照片動態圖的教程。第三步,找到對應的素材作為手機壁紙,這裡要製作翻頁,所以要多找一些,然後按照手機的大小裁剪出對應的大小,效果
  • 「手把手教你設計」—12個最佳手機APP界面設計教程
    這篇文章集合了12個最佳手機用戶界面設計的教程,雖然教程偏向初學者,但我相信即使是很優秀的設計師仍然可以從中學到新的東西。如何使用Photoshop來設計手機UI界面1.Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial視頻主要是介紹如何使用Sketch製作一個美食類
  • 鯉魚旗燈籠製作方法圖解教程詳解
    燈籠的製作方法隨著我們所追求的目的的不同本身還可以發生一些相應的變化哦,這裡紙藝網給大家推薦的是一個可愛的鯉魚旗的燈籠製作。
  • 多肉捧花製作教程
    多肉植物飽滿可愛,又形態各異,愈來愈流行被製作成手捧花。不僅耐久,且回頭率超高。
  • 【繪畫教程】超簡單的眼睛畫法教程!五步三個圖層,家裡的狗都學會了!
    想必這些都是繪畫初學者們經常在想的問題吧,就是不知道如何才能學習好繪畫,然後繪畫出自己想要畫的東西那麼今天靈貓課堂就在網絡上收集整理了一些關於超簡單的眼睛畫教程!五步三個圖層,家裡的狗都學會了!教程非常簡單,趕緊來看看叭:第一步,打一個簡單的草稿
  • iPhone5S美版解鎖教程
    iPhone5S美版解鎖教程  iPhone5S美版可以分為Sprint(簡稱S版)、Verizon(簡稱V版)、AT&T(簡稱A版)和T-Mobile(簡T版),根據不同的版本,解鎖的方法也各不相同。
  • 一文看懂卡貼機的卡貼解鎖、黑解、官解,附各個解鎖教程
    一、卡貼解鎖(其實分為:不完美卡貼解鎖、完美解鎖、卡貼黑解)卡貼解鎖最好理解,就是用採用卡貼晶片來破解信號問題,2020年3月11日,蘋果官方再一次感動了世界,發布了完美的ICCID串碼,一直到現在大家用的就是卡貼完美解鎖(卡貼黑解就是在卡貼完美解鎖的情況卡去掉卡貼還可以正常使用)。
  • 蘋果ios5.1系統美版iphone4s怎麼解鎖 iphone4s解鎖教程詳解
    蘋 果ios5.1系統美版iphone4s解鎖教程詳解   卡貼支持16個運營商,熱門的SB AU ATT SPRINT 還有加拿大的運營商支持那是必須的。  全自動解鎖,免除一切繁瑣的操作,性價比高,比GPP還好用!
  • 手把手教你汽車貼膜教程!讓你輕鬆給愛車鍍膜!
    其實,去這樣的公司鍍膜是完全沒有必要的,畢竟這種鍍膜的費用是非常高的,而且,有的皮包公司的手藝並不好,所以,汽車貼膜的教程是非常重要的,這裡,手把手教你汽車貼膜教程,讓你輕鬆給愛車貼膜!其中,前擋風玻璃的鍍膜是最有難度的,也是考驗技術的環節,一定要對膜進行烤膜定型,建議把熱風槍的溫度調至最高,風速也是,然後快速加熱需要定型的弧度部位,同時用刮片將車膜緊緊貼在玻璃上,一定要注意不停的移動烤膜槍,否則容易將膜燻黑。
  • 西湖政協開上了「數字駕駛艙」!
    作為浙江首個搭建在城市大腦上的   政協智慧平臺   西湖政協數字駕駛艙   昨天正式上線   趕緊去漲姿勢——   調研座談會後,區政協迅速行動,對現有履職平臺進行了系統梳理,決定同步開發數字駕駛艙和智慧政協平臺,並對多個系統進行整合。   經過近2個月的開發和反覆調試,區政協數字駕駛艙正式在杭州城市大腦西湖平臺上線運行。這是浙江第一個搭建在城市大腦上的政協數字駕駛艙。
  • 易拉罐飛機手工製作教程 廢舊易拉罐diy飛機
    易拉罐飛機手工製作教程: 步驟1:把廢舊易拉罐頂部用剪刀剪開,同時準備一張有斜線的紙(可以自己用直尺畫斜線)。步驟2:把準備的紙包著易拉罐 步驟3:沿著斜線用剪刀剪開,然後全部展開、壓平,這個我們製作的是飛機的螺旋槳。步驟4:找2個易拉罐連在一起做飛機的機身。