行動端指導手冊

1.1 應用場景

FineBI 的儀表板除了可以在 PC 端查看之外，還可以在行動端，如手機、pad 端進行查看，讓最終使用者可以不透過 PC 就可以方便地用手指觸摸的方式瀏覽查看系統中的範本。

而查看的方式也有很多種，包括資料分析 App、微信、釘釘、手機瀏覽器等，下面將對行動端的製作進行具體的介紹。

注：手機端只支援 Android 和 iOS 系統。

1.2 實現思路

FineBI 在儀表板介面提供了行動端佈局功能，方便使用者設計行動端儀表板展示的組件及展示順序。在儀表板編輯介面點選「行動端佈局」進入介面。

進行配置前，建議新手先大致瞭解行動端佈局的配置功能後，再進行配置。詳情請參見文檔：行動端佈局

1.3 製作流程

方式一：PC端直接轉換

當PC 和行動端樣式差別不大、風格一致時。沒有用到大量的懸浮，即行動端能夠還原。此時可以 PC端直接轉行動端

方式二：單獨配置行動端

當行動端需要特殊的設計、樣式要差別 PC 進行設計時。此時將 PC 另存為一份，然後再單獨配置行動端。

注：後續同步修改需要維護兩個儀表板。

在進行行動端樣式設計之前，先將所需要的組件新增到「儀表板」中，在行動端看板中才會展示對應內容；「過濾組件、其他組件」同理。這是進行行動端設計的前提！

2.1 整體頁面樣式設定

2.1.1 選擇合適的行動端畫布

為了在 PC 模擬最接近行動端的效果，提供不同手機型號的畫布大小配置，我們切換到和手機最適配的畫布，如下圖所示：

2.1.2 設定行動端背景

方式一：行動端會自動繼承PC儀表板的背景。行動端的背景可以透過「儀表板」中「儀表板樣式」進行設定。在「儀表板」中設定好主題顏色，再切換回行動端佈局中，即是相應的主題顏色。如下圖所示：

方式二：根據主題顏色自主設定背景的顏色或圖片。如下圖所示：

可以參考的背景圖片：

2.1.3 隱藏組件

儀表板中一些用於優化圖表效果的組件，無需在行動端展示。此時可以在行動端佈局中隱藏這些組件。在行動端佈局介面，點選組件左上角「隱藏」按鈕，組件行動到「隱藏的組件」中。隱藏的組件將不在行動端顯示。隱藏該組件後，之後的組件依次向上行動。如下圖所示：

2.1.4 組件間隙

點選「樣式設定」，組件間隙設定「10/8」，在左側可以看見實現效果。如下圖所示：

2.1.5 圖表字體

推薦使用「自適應」，則會根據組件大小調整字號。如下圖所示：

2.1.6 隱藏全螢幕按鈕

一些指標卡、儀表板等一目瞭然的組件，建議隱藏全螢幕按鈕，美化行動端查看時的整體效果。

點選目標組件（如指標卡）關閉「顯示全螢幕按鈕」。如下圖所示：

2.2 組件樣式設定

2.2.1 標題設定

1）儀表板標題

行動端組件標題/文字組件支援單獨配置行動端樣式。

注：不會影響PC效果。

• 文字組件（推薦字號 24 、字體：龐門正道標題體、背景透明 、文字置中）

2）組件標題

6.0.15版本之後，FineBI支援直接在行動端看板中進行組件標題的設定，不用再反覆地切換回「儀表板」中進行設定。

注：對於Tab組件，「行動端佈局」中只能設定Tab組件的標題，對於Tab組件中子組件的標題和樣式設定，需要傳回「儀表板/組件」中進行設定

2.2.2 圖示設定

使用「圖片組件」，推薦使用一些背景透明的矢量圖示，並且將組件背景設定為透明

注：「圖片組件」需要在「PC儀表板」中進行新增。

2.2.3 過濾組件

• 「過濾組件」不是特別多時，建議將「過濾組件」加在頁面中能讓使用者查看時快速瞭解到篩選的範圍，調整參數也會更加便利；

• 當「過濾組件」非常多時可以統一顯示在參數面板中

  
  

推薦配置

a.「顯示全部過濾組件在參數板中」開關關閉，過濾組件將展示在佈局中

b.調整過濾組件寬度，放到標題下方。建議一排兩個排放。

注：過濾組件的樣式設定需要傳回 PC儀表板中進行設定

c.回到「儀表板樣式」中調節「過濾組件」樣式（看場景自訂）

• 標題字體：和背景對比度高的字體顏色

• 圓角邊框：圓角 6 （圓潤點） 邊框 0

• 主題色：透明色

2.2.4 關鍵指標

當儀表板中存在KPI數值需要進行突出顯示時，我們常採用KPI指標卡進行設計。同時我們也將這些需要進行突出顯示的指標成為「關鍵指標」。

1）KPI指標製作

將指標拖入分析區域，圖形屬性選擇「KPI指標卡」指標卡即可。製作請參考說明文檔：KPI指標卡

注：拖入的「指標」，指標值不能為空，否則KPI指標卡不生效。

拖入多個指標，可同時顯示多個數值。點選「文字設定」中的編輯按鈕，即可進入KPI指標卡設計頁面，可以根據自己的需求進行相應的KPI指標卡設計

FineBI還支援對指標卡中的數值進行「形狀」標記，可以利用條件屬性設定形狀及形狀顏色

2）常見指標卡布局

指標卡的設計靈活多樣，根據自身的不同需求，具有很大的發展空間。在這裏我們只列舉幾個比較常見的樣式進行製作展示，有助於幫助大家快速瞭解行動端指標卡的樣式設計。

A.樣式一：單個“指標名稱+數字”同列展示

當“指標卡”中存在“指標名稱”和“數字”，並且希望在一排展示時，推薦：

• 指標名稱/數字同一列靠左，空格鍵調整“指標名稱”和“數字”間距，分別設定字體樣式。

• 指標名稱「同比增長率：」：字體：預設；字號：14；粗體；靠左。

• 指標數值「49.17%」：字體：預設；字號：12；粗體；靠左。

B.樣式二：單個“指標名稱+數字”分列展示

當【指標卡】中只存在“指標名稱”和“數字”的時候，推薦：

• 指標名稱/數值各佔一列，置中顯示。

• 字體：預設；

• 總毛利額：字號：20；置中

• 毛利額（求和）：字號：30；粗體；顏色：b55140；置中

  
  

C.樣式三：多個“指標名稱+數字”同列展示

有時根據需求和美觀設計，可以將一些“指標”放在同列進行展示。

推薦：

• 指標名稱/指標數值靠左，各佔一列；

• 當有多個副指標時，透過空格鍵調整間距。

• 字體：龐門正道標題體；字號：16；粗體；靠左。

D.樣式四：多個“指標名稱+數字”分列展示

當「指標卡」中有多個指標時，建議將相關的指標資訊儘可能透過單個指標卡進行傳達；透過調整文字的大小、顏色優化佈局展示。

推薦：

• 指標名稱/指標數值靠左，各佔一列；

• 當有多個副指標時，透過換行調整位置與列間距。

• 標題：字號：12；靠左

• 指標：字號：20；粗體；靠左

  
  

3）常見指標卡樣式

A.指標卡中插入形狀

在指標卡中新增形狀，可以達到輔助突出顯示的效果。

B.選擇自適應方式

強烈建議使用「標準自適應」，「整體自適應」會因為文字長度放縮導致各 「指標卡」字體大小不一致

C.使用“組合”功能

當有多個指標卡集中顯示的時候，推薦使用「組合」將所需要的「指標卡」組合在一起進行展示

甚至還可以進一步對組合後的「指標卡」進行組合「樣式設定」，使得版塊更加清晰和突出

具體的樣式設定案例可以參考文檔：組件組合

注：「組件成組」功能不僅可以解決多個「指標卡」樣式設計問題，還可以解決「指標卡」對齊問題

例子：

“多個指標名稱+數字”設計可製作了兩個KPI指標卡，然後使用「組件成組」，更方便指標的對齊。

指標卡1：

• 指標名稱「上年同期銷售額/同比增長率」：字體：預設；字號：18；粗體；靠左

• 自適應方式：標準自適應（推薦）

指標卡2：

• 【訂單金額年同期（求和）/同比增長率（聚合）】：字體：預設；字號：18；粗體；靠右

• 【同比增長率（聚合）】：自訂形狀

• 自適應方式：標準自適應（推薦），確定字體能夠保持一致的大小

組件成組：
透過簡單的點選將兩個組件組合，可以方便指標的對齊，點選也不會出現陰影效果。

2.3 標準圖表展示

看板中標準圖表的展示。主要有幾個製作思路：

1）保證充足的圖形空間

圖形空間可能會被其他元素擠壓導致顯示不全，頁面資訊密度很低。

常見的優化方式：橫縱軸標題去除、軸標籤字號調小、圖例字號調小或關閉、縮減組件內邊距

2）利用 tab 組件節省篇幅 提升資訊密度

如果將圖表平鋪開展示的資訊密度會很低，

常見的方法：將幾個有聯動的組件做在同一個 「tab 組件」中，用 tab 來進行區分

3）利用組件成組+調整內邊距營造區塊感，提升資訊密度

3.1 應用封裝

• 應用場景：需要將多個看板組合形成一個類app應用，完成業務資料的展示。

• 操作步驟：應用封裝

• 環境要求：BI 版本 6.0.14 及之後 ，安裝「應用封裝」插件（免費）

使用者支援自由組合應用封裝內每個 tab 的顯示內容，支援新增超連結，可放置「數據門戶」的頁面連結進行組合。

還支援自訂 tab 頁名稱、圖示樣式。設定導航欄樣式等。如下圖所示：

• 導航結構：

• 兩層資源層級：建議一級底部+二級頂部

• 一層資源層級：建議一級頂部

• 樣式：

• 根據主題風格自訂導航欄顏色、圖表顏色等



封裝好的應用。可將連結分享給其他人，或者掛出到 目錄 中。

3.2 數據門戶

• 功能場景：

• 企業統一的資料查看入口，將使用者的核心看板都集中展示在門戶首頁

• 可以透過應用封裝打包幾個看板成一個應用，掛載門戶上。門戶本身也可以以連結的形式掛載在應用封裝

• BI行動端推薦使用方式：將「數據門戶」作為行動端的「首頁」，利用門戶的功能新增核心指標與看板入口

• 功能說明：參考 數據門戶 中的製作方法

詳情參考連結：行動端常見問題

本部分內容為行動端的進階設定，如果對行動端看板有更高的要求，詳情可以查看我們的說明文檔進行學習：行動端學習路徑