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

一、功能效果

使用一組或多組照片拼接制作出來(lái)的模擬現(xiàn)實(shí)的場(chǎng)景，經(jīng)過(guò)特殊的拼合，處理，讓使用者有立于畫(huà)境中的視覺(jué)體驗(yàn)。

二、功能說(shuō)明

【版本】無(wú)版本限制

三、設(shè)置介紹

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

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

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

1.1 部件

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

1.2 較大寬度

部件在每個(gè)層級(jí)中都有一個(gè)較大寬度，超過(guò)這個(gè)寬度有可能兩邊會(huì)被背景切割遮擋。各層級(jí)較大寬度參照表：

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

1.3 面向角度

全景中所有部件都會(huì)調(diào)整成面向圓柱體的Y軸，因此即使在編輯時(shí)看起來(lái)是處于一個(gè)平面的兩個(gè)部件，實(shí)際觀看時(shí)都有可能會(huì)斜切，即使他們?cè)谕粋€(gè)層級(jí)上。

↑ 編輯時(shí)（這兩個(gè)方塊處在同一層級(jí)，且有重疊）

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

要避免這種情況，有兩個(gè)方法：

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

方法二：如果需要做重疊效果，請(qǐng)把部件水平居中對(duì)齊。示例：

↑ 編輯時(shí)將它們水平居中

↑ 實(shí)際效果

如果N個(gè)部件水平居中對(duì)齊，那么不管它們處在什么層級(jí)都不會(huì)有相切的情況

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

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

2.1 強(qiáng)制尺寸

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

2.2 左右邊緣銜接

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

2.3 背景內(nèi)容

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