720°全景編輯指引

全景頁面結構

上圖是全景展開后的圖示，如你所見，它由外圈背景（2580×1306），內圈背景（2360×1206），還有在其上方的部件構成。為了方便描述，外圈背景和內圈背景使用了純色表示，實際上它們是兩張圖片。將整塊東西繞著Y軸卷成一個圓柱體后，就變成了我們在手機上看到的720°全景：

圓柱體的上方和下方可以看到白色的區域，是由屬性“背景色”控制的，可以修改成你想要的顏色。

部件

編輯全景中的部件時，你會接觸到一個新的概念：層級。一共有10個層級，可以這樣理解，層級越小，越靠近背景；層級越大，越靠近觀看者。高層級的部件看起來會比實際尺寸更大，和我們在現實中遠小近大的觀感一致。

- 最大寬度

部件在每個層級中都有一個最大寬度，超過這個寬度有可能兩邊會被背景切割遮擋。各層級最大寬度參照表：

請嚴格遵循上表設置各層級部件尺寸，務必不能超出最大寬度。

- 面向角度

全景中所有部件都會調整成面向圓柱體的Y軸，因此即使在編輯時看起來是處于一個平面的兩個部件，實際觀看時都有可能會斜切，即使他們在同一個層級上。

↑ 編輯時（這兩個方塊處在同一層級，且有重疊）

↑ 實際效果，由于調整了面向角度，它們相切了

要避免這種情況，有兩個方法：

a)部件之間盡量不要有重疊；

b)如果需要做重疊效果，請把部件水平居中對齊。示例：

↑ 編輯時將它們水平居中

↑ 實際效果

如果N個部件水平居中對齊，那么不管它們處在什么層級都不會有相切的情況

外/內圈背景

外/內圈背景圖片設計難度較高，如果你不是專業設計師，建議不要修改背景圖片，直接選擇合適的全景模板修改部件內容。

- 強制尺寸

外圈背景2580×1306，內圈背景 2360×1206。這是一個強制的尺寸，即使你的背景圖片像素區域沒那么大，也要預留空白像素，做成所要求尺寸的部分透明PNG圖片。

- 左右邊緣銜接

由于背景圖片最終要卷成圓柱狀，設計時需要留意讓圖片的左側和右側完美拼合。

- 背景內容

全景中不宜添加尺寸過大的部件，因此你應該把想表現的大部分內容放在背景圖片上，僅保留相對較小的、需要添加點擊事件的部件。