FVS行動端自動成組

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 應用場景

開啟「行動端佈局」，將 PC端 範本切換到「行動端」模式時，由於流式佈局下組件預設按行排列，原有的組合佈局如有重疊組件會被打亂，導致佈局錯亂。

而 FVS 範本中常存在重疊組件，若不進行成組處理，將無法還原原始排版效果。

V4.0.0 版本，FVS 新增自動成組功能，智慧識別並組合重疊組件，配合成組引導提示，幫助使用者降低調整操作成本，還原預期佈局效果。

1.3 注意事項

• 僅支援開啟了「行動端佈局」的範本

• 自動成組功能支援廢除還原

• 自動成組無法保證所有範本均可成組，若自動成組後轉換效果不符合預期，可廢除自動組合操作，手動進行組合

• 自動成組屬於分頁功能，一個分頁僅支援進行一次自動成組

開啟「行動端佈局」的任意範本切換至行動端時，會彈出成組引導。如下圖所示：

注：勾選「不再提醒」後不會再觸發引導。若跳出引導時未勾選不再提示，則每次開啟新範本，切換時都會觸發。

• 若勾選右下角「當前分頁啟動自動成組」，點選「開始使用」後，範本會按照自動成組規則進行成組，頁面配置欄中「自動成組」置灰。如下圖所示：

注：點選畫布上方「廢除」或使用快捷鍵，可對自動成組進行一鍵解組，畫布中展示未自動成組效果，「自動成組」按鈕支援再次點選。

• 若不勾選「當前分頁啟動自動成組」，點選「開始使用」後進入行動端佈局。可在右側頁面配置面板中點選「自動成組」進行成組。

注：僅支援在當前分頁組件 Tab 下調整行動端組件大小、位置等屬性前使用自動成組。若調整過行動端組件屬性，則「自動成組」灰化。

3.1 組件範圍

• 自動成組僅對單個組件生效。

• 組合、容器視為單個組件，其內部組件不參與自動成組。

注：容器類型包括：Tab、絕對畫布塊、擴展組件。

3.2 邏輯規則

根據組件間是否存在重疊關係進行分組，組件之間的間距小於 0 時即為存在重疊關係。如下圖所示：

• PC 端效果

• 行動端效果

注：「自動成組」的組合名稱預設為 分組X_範本名稱 。

此外，也為一些特殊場景做了規則處理：

1）範本大背景

當範本內含有背景組件，與大部分組件有重疊關係時。若將背景組件和其餘組件一同組合，在其餘組件會在背景組件中按流式佈局規則按行排列，效果較差。

因此增加以下判斷規則：

若組件在組件圖層中處於最底層 10%，且組件尺寸佔據畫布 90% 以上，則視為範本大背景，作為單個組件，不參與成組。否則按重疊關係正常成組。

• PC端效果
  

• 行動端效果

行動端範本調整建議：

建議刪除原有背景組件，在「頁面背景」中重新上傳一張適配行動端尺寸的背景圖。

大多數 PC 端背景圖並不適用於行動端，切換佈局後會被強制拉伸至行動端寬度，導致畫面失真或漸變。因此，為確定展示效果，建議使用專為行動端設計的背景圖。

2）重疊面積判斷

為避免部分組件有重疊關係，但不應劃為同一組合的情況，增加重疊面積判斷：

當兩個組件的重疊面積超過 60% 時屬於一個組合，會自動成組。

若某個組件同時與多個組件重疊（如 指標卡底1 與 底1、底 都有重疊），根據組件圖層層級判斷，優先與層級更近的組件組合 （指標卡底1 與 底1 組合）。

本文提供範例範本，點選下載後使用：服務指標綜合看板.fvs

1）開啟範例範本，點選畫布頂端工具欄「範本設定>行動端」，勾選「開啟行動端佈局」。

2）刪除「範本背景」組件，詳情原因見 3.2 節

3）點選畫布右上角，將範本切換至行動端模式後，彈出自動成組引導，預設勾選「當前分頁啟動自動分組」，點選「開始使用」。如下圖所示：

4）設定「頁面背景」，本範例以設定為顏色為例。

5）對各組合內組件位置、文字大小等進行調整，以達到更好的展示效果。此處不再贅述，詳情請參見：行動端調整建議 。