【微傳單】720°全景編輯指引

一、功能效果

使用一組或多組照片拼接制作出來的模擬現(xiàn)實的場景，經(jīng)過特殊的拼合，處理，讓使用者有立于畫境中的視覺體驗。

二、功能說明

【版本】無版本限制

三、設(shè)置介紹

1. 全景頁面結(jié)構(gòu)

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

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

1.1 部件

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

1.2 較大寬度

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

請嚴(yán)格遵循上表設(shè)置各層級部件尺寸，務(wù)必不能超出較大寬度。

1.3 面向角度

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

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

↑ 實際效果，由于調(diào)整了面向角度，它們相切了

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

方法一：部件之間盡量不要有重疊；

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

↑ 編輯時將它們水平居中

↑ 實際效果

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

2. 外/內(nèi)圈背景

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

2.1 強(qiáng)制尺寸

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

2.2 左右邊緣銜接

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

2.3 背景內(nèi)容

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