FVS如何快速將PC範本轉換為行動端範本

製作建議：

製作範本時，頁面可劃分為多個區域，每個區域內包含背景、標題、圖表等組件

PC 端範本轉換為行動端後，非組合的組件，會預設按一行一個的方式展示

建議將一個區域內的所有組件組合，確定在行動端切換時不分離錯位

設定方式：

• 多選組件 + 快捷鍵

• 多選組件 + 範本右側工具欄

• 多選組件 + 右鍵組合

製作建議：

對於含義相似的區域（如多個關鍵指標卡或圖表對比），建議保持寬高一致，以確定行動端切換時大小統一

設定方式：

先設計一個區域並調整樣式，然後複製貼上，取代資料和內容

製作建議：

在擺放不同區域組件時，要保持整體對齊和間距一致

如果 PC 端不能對齊，那麼切換行動端時，也會不對齊

設定方式：

1）多選需要對齊的組件，設定佈局和間距

2）藉助輔助線精準對齊，確定各個組合中的元素也能高度對齊

製作建議：

建議透過標題、富正文、圖片組件組合完成「指標卡」，不建議使用表格進行製作

原因分析：

• 自適應邏輯差異：PC 端的表格自適應只對格子寬高自適應，行動端的自適應方案是整體縮放。行動端表格字號會跟隨表格組件大小變化

• 表格字號不支援在 PC 端和行動端區分配置

• 表格內容不支援在 PC 端和行動端區分配置。如果想要調整指標卡內容佈局無法透過表格實現，但可以透過富正文/標題位置調整實現

製作建議：

透過標題 + 自訂圖片背景 + 顯隱控制的方式製作的「Tab 按鈕」，顯示和隱藏的組件必須要放在同一個大分組下，否則轉換到行動端顯隱組件不在同一個位置

如果之前製作時不在同一個分組下，需要先將隱藏組件顯示後，將所有組件成組，然後再單獨隱藏部分組件

製作建議：

行動端不支援展示三維組件、擴展圖表。若 PC 端有相關圖表，轉到行動端會被隱藏。

因此在製作組件時，請考慮行動端是否需要展示相關組件，如有必要，請避開使用三維組件/擴展圖表

圖表和表格組件在 PC 端與行動端共用相同的內容樣式，無法單獨調整行動端樣式。

設計範本時需同時考慮行動端效果。如需單獨調整行動端，建議複製並單獨製作一份行動端範本。

製作建議：

當對表格組件、組件標題和背景進行組合時，組合內採用絕對佈局，不支援高度自適應，切換至行動端後無法實現表格高度自適應。

推薦使用絕對畫布塊代替組合背景，將其他組件put 命令絕對畫布塊中。

絕對畫布塊支援開啟重佈局模式，重佈局下組件可以實現高度自適應。

設定方式：

1）使用絕對畫布塊作為組合背景

2）將標題、表格組件put 命令絕對畫布塊中

3）開啟絕對畫布塊重佈局、開啟表格預覽高度自適應。

製作建議：

對於多行報表，建議設定表格分頁，以保證行動端預覽時的效能體驗

對於多欄報表，建議開啟高度自適應，以保證行動端預覽時可以橫向捲動表格，或橫屏查看

如果範本包含複雜的頁頭背景（具有特定形狀），且主要為企業戰情室範本設計，由於螢幕尺寸的變化，頁頭背景圖片可能會發生漸變，導致在行動端的顯示效果不佳。

解決方法：

針對行動端寬度重新制作一張頁頭背景上傳，並設定合理的填充方式

PC 端：

行動端：

問題場景：

如果範本包含複雜的頁面背景（具有特定形狀/圖案），且主要為企業戰情室範本設計，由於螢幕尺寸的變化，背景圖片可能會發生漸變，導致在行動端的顯示效果不佳。

解決方法：

針對行動端寬度重新制作一張頁面背景上傳，並設定合理的填充方式

問題場景：

在 PC 端製作的標題組件，若組件寬度正好與內容長度一致，轉換至行動端後，標題內容可能被截斷

解決方法：

• 在行動端佈局下調整標題組件的寬度或者標題內容字號
  

• 在 PC 端製作範本時，將標題組件寬度適當拉長（預留部分拉伸空間）

PC 端：

行動端：

問題場景：

PC 端使用了自訂圖片的圖片組件/組件背景，切換至行動端後，由於畫布寬度變化，組件背景可能被拉伸，導致背景效果不佳

PC 端：

行動端：

解決方法：

• 可透過調整組件背景的填充方式，將背景調整至合適效果

• 如果三種填充方式的效果都不理想，可以根據行動端組件的大小重新上傳一張圖片

問題場景：

若圖片帶有圖示，在轉換至行動端後，由於寬度縮減，可能導致圖示被拉伸漸變

PC 端：

行動端：

解決方法：

設定圖片的點九圖，將圖片中的圖示放在固定在左側，此時拉伸組件寬度，圖示不會再漸變

問題場景：

PC 端如果製作了多個指標卡，在轉換至行動端後，會預設按一行一個的方式展示，導致行動端效果不佳

PC 端：

行動端：

解決方法：

手動拖曳組件位置，可手段調整寬度或選中組件後，右鍵設定組件寬度